/* Lattouf Co. — layout corrections on top of the stock theme.
   Navbar order and colour, hero alignment, and the single-card page grid. */

/* ------------------------------------------------------------------ navbar
   Reading order across the bar: logo, region pill, then the gap, then the
   contact button with the cart to its right. The theme shipped the pill first
   and reordered the logo under 991px, so both are overridden here.
   The theme gave every control its own margin-top (31 / 34 / 30 / 31px), so
   nothing lined up. Instead the bar declares one band and centres its children
   in it, which keeps the logo and the region pill on a single axis regardless
   of their individual heights. */
:root {
  --lc-nav-band: 50px;
  --lc-nav-top: 26px;
  --lc-nav-inset: 40px;
  --lc-nav-gap: 20px;
}

.nav-secondary {
  height: calc(var(--lc-nav-top) * 2 + var(--lc-nav-band));
  align-items: center;
  padding-left: var(--lc-nav-inset);
  /* the bar spans the viewport but only its controls should catch the cursor */
  pointer-events: none;
}

.nav-secondary > * {
  pointer-events: auto;
  align-self: center;
}

/* the theme pulls the logo to the front under 991px; DOM order already does
   that, so the override just neutralises it */
.nav_logo {
  order: 0;
  width: 48px;
  height: var(--lc-nav-band);
  margin: 0;
}

/* the ID in lattouf-custom.css outranks any class selector, so the reset for
   the region pill has to be written at the same weight */
#region-switch {
  margin: 0 auto 0 var(--lc-nav-gap);
  align-self: center;
}

.nav-secondary .button.is-fixed {
  margin-top: 0;
  align-self: center;
}

.nav-secondary .nav_cart {
  margin: 0 0 0 var(--lc-nav-gap);
  align-self: center;
}

@media screen and (max-width: 767px) {
  :root {
    --lc-nav-band: 42px;
    --lc-nav-top: 18px;
    --lc-nav-inset: 20px;
    --lc-nav-gap: 12px;
  }

  .nav_logo {
    width: 40px;
  }
}

/* -------------------------------------------------------------------- hero
   The stock header pins its copy to the bottom of a full-height column.
   The headline belongs at the top. */
/* the theme collapses this container to height:0 and reveals it with a
   scroll interaction; pin it open so the headline is never clipped */
.header_container {
  height: auto !important;
}

@media screen and (min-width: 768px) {
  .header_container {
    justify-content: flex-start;
    padding-top: calc(var(--padding--top, 150px) + 1vw);
    min-height: 100svh;
  }

  .heading-xlarge.is-home {
    margin-bottom: 28px;
  }

  .text-size-medium.is-hero {
    max-width: 46ch;
  }
}

/* ------------------------------------------------------- single-card grid
   The closing page grid was built for two cards. With only Products left it
   should span the full width rather than leave a hole on the right. */
.grid {
  grid-template-columns: 1fr;
}

.grid .page_item {
  height: 60vh;
  min-height: 420px;
}

.grid .page_item .heading-medium {
  font-size: clamp(38px, 5vw, 76px);
}

@media screen and (max-width: 991px) {
  .grid .page_item {
    height: auto;
    min-height: 60vw;
  }
}

/* ---------------------------------------------------------- contact layout
   The form column now runs full width where the cover image used to sit. */
.section.is-form > .container.is-form:only-of-type,
.section.is-form > .w-layout-vflex.container:only-child {
  width: 100%;
}

.section.padding-right-none.is-form {
  padding-right: var(--padding--lateral, 96px);
}

@media screen and (max-width: 991px) {
  .section.padding-right-none.is-form {
    padding-right: var(--size--medium, 40px);
  }
}

/* ------------------------------------------------------------ text splits
   Several sections were drawn around photography that never arrived: the
   heading sat top-left, the copy was pushed 35vw to the right and dropped
   below it, and the empty quarter between them was meant for an image. With
   no image, the heading and the copy now share one row as an editorial split,
   so the section reads as deliberate rather than unfinished. */
@media screen and (min-width: 992px) {
  .container.lc-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    column-gap: var(--gap, 8vw);
    row-gap: 0;
    align-items: start;
  }

  .lc-split > .heading_wrapper {
    grid-column: 1;
    grid-row: 1;
  }

  .lc-split > .paragraph {
    grid-column: 2;
    grid-row: 1;
    width: auto;
    max-width: 60ch;
    margin-left: 0;
    padding-top: 0.4em;
  }

  .lc-split > .lc-capability_grid,
  .lc-split > .lc-process {
    grid-column: 1 / -1;
  }
}

/* --------------------------------------------------- quality-control track
   Before / during / after, drawn as a measured track instead of a photo:
   hairline rule, a node per stage, and the accent line that runs across it
   once the track scrolls into view (js/sections.js). */
.lc-process {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: clamp(56px, 6vw, 96px) 0 0;
  padding: 0;
  list-style: none;
}

.lc-process::before,
.lc-process::after {
  content: "";
  position: absolute;
  top: 7px;
  left: 0;
  right: 0;
  height: 1px;
  background-color: var(--color--neutral, #c1c4c7);
}

.lc-process::after {
  background-color: var(--color--accent);
  transform-origin: 0 50%;
  transition: transform 1600ms cubic-bezier(0.16, 1, 0.3, 1);
}

.lc-process_step {
  position: relative;
  padding: 40px clamp(16px, 3vw, 48px) 0 0;
}

.lc-process_step::before,
.lc-process_step::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 15px;
  height: 15px;
  border-radius: 50%;
}

.lc-process_step::before {
  z-index: 1;
  background-color: var(--color--body, #f0f0f0);
  border: 1px solid var(--color--accent);
}

.lc-process_step::after {
  z-index: 2;
  background-color: var(--color--accent);
  transform: scale(0.47);
  transition: transform 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.lc-process_no {
  display: block;
  font-family: var(--font--tertiary), sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color--accent);
}

.lc-process_name {
  margin: 14px 0 10px;
  font-family: var(--font--secondary), sans-serif;
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 600;
  line-height: 1.15;
  color: var(--color--text-primary, #000);
}

.lc-process_text {
  max-width: 34ch;
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--color--text-body, #5e666f);
}

.lc-process_name,
.lc-process_no,
.lc-process_text {
  transition: opacity 700ms ease, transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* hidden states only apply once the script has confirmed it can reveal them */
.lc-reveal-ready .lc-process:not(.is-visible)::after {
  transform: scaleX(0);
}

.lc-reveal-ready .lc-process:not(.is-visible) .lc-process_step::after {
  transform: scale(0);
}

.lc-reveal-ready .lc-process:not(.is-visible) .lc-process_no,
.lc-reveal-ready .lc-process:not(.is-visible) .lc-process_name,
.lc-reveal-ready .lc-process:not(.is-visible) .lc-process_text {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
}

.lc-process_step:nth-child(2) > *,
.lc-process_step:nth-child(2)::after {
  transition-delay: 380ms;
}

.lc-process_step:nth-child(3) > *,
.lc-process_step:nth-child(3)::after {
  transition-delay: 760ms;
}

@media screen and (max-width: 767px) {
  .lc-process {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 36px;
    margin-top: 48px;
  }

  .lc-process::before,
  .lc-process::after {
    top: 0;
    bottom: 0;
    left: 7px;
    right: auto;
    width: 1px;
    height: auto;
    transform-origin: 50% 0;
  }

  .lc-reveal-ready .lc-process:not(.is-visible)::after {
    transform: scaleY(0);
  }

  .lc-process_step {
    padding: 0 0 0 40px;
  }

  .lc-process_name {
    margin-top: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lc-process::after,
  .lc-process_step::after,
  .lc-process_step > * {
    transition: none !important;
  }
}

/* -------------------------------------------------------------- locations
   Replaces the stock map, which showed northern Italy. Two plain entries for
   the places Lattouf actually works from, sitting in the accent band. */
.lc-locations {
  position: absolute;
  right: var(--size--large, 10vw);
  bottom: clamp(64px, 8vw, 120px);
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 48px);
  width: min(34vw, 520px);
  color: var(--color--neutral-light, #fff);
}

.lc-locations_item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 28px;
  border-top: 1px solid #ffffff40;
}

.lc-locations_pin {
  position: absolute;
  top: -5px;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: var(--color--neutral-light, #fff);
}

.lc-locations_pin::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid #ffffffb3;
  animation: lc-pin-ping 2.8s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.lc-locations_item:nth-child(2) .lc-locations_pin::after {
  animation-delay: 1.4s;
}

@keyframes lc-pin-ping {
  0% {
    opacity: 0.9;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(3.6);
  }
}

.lc-locations_tag {
  font-family: var(--font--tertiary), sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.5;
  text-transform: uppercase;
  color: #ffffffa6;
}

.lc-locations_city {
  font-family: var(--font--secondary), sans-serif;
  font-size: clamp(34px, 3.4vw, 54px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.01em;
}

.lc-locations_country {
  font-size: 15px;
  color: #ffffffd6;
}

@media screen and (max-width: 991px) {
  .lc-locations {
    position: relative;
    right: auto;
    bottom: auto;
    width: auto;
    margin: 56px var(--size--medium, 5vw) 0 var(--size--large, 10vw);
  }
}

@media screen and (max-width: 767px) {
  .lc-locations {
    grid-template-columns: minmax(0, 1fr);
    margin: 48px 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lc-locations_pin::after {
    animation: none;
  }
}

/* ----------------------------------------------------------------- footer
   The stock footer art was a map of Europe with a marker in Italy. This one
   is the Eastern Mediterranean with Lebanon and Egypt picked out, generated
   from Natural Earth outlines (public domain). */
.footer_component {
  background-image: url("../images/footer-map.svg");
  background-repeat: no-repeat;
  background-position: right 2vw top 10%;
  background-size: auto 104%;
}

@media screen and (max-width: 991px) {
  .footer_component {
    background-position: right -12vw top 24px;
    background-size: 62vw auto;
  }
}

@media screen and (max-width: 767px) {
  .footer_component {
    /* the map gets its own band under the copyright line instead of sitting behind text */
    padding-bottom: 86vw;
    background-position: right -4vw bottom -4vw;
    background-size: 92vw auto;
  }
}

/* --------------------------------------------------- products card as a CTA
   The card sat on the same grey as the sections around it, so nothing said
   "click me". It now carries the accent colour, a real button label, and a
   hover that moves. */
.grid .page_item {
  color: #ffffffd9;
  background-color: var(--color--accent);
  transition: background-color 400ms ease;
}

.grid .page_item:hover {
  background-color: #222270;
}

.grid .page_item .heading-medium {
  color: var(--color--neutral-light, #fff);
}

.grid .page_item .lc-card-sub {
  color: #ffffffd9;
}

.grid .page_item .lc-card-art {
  color: var(--color--neutral-light, #fff);
  opacity: 0.9;
}

.grid .page_item .button_line,
.grid .page_item .button_arrow_line {
  background-color: var(--color--neutral-light, #fff);
}

.grid .page_item .button_angle {
  border-color: var(--color--neutral-light, #fff);
}

.lc-card-cta {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
  padding: 14px 22px;
  font-family: var(--font--tertiary), sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color--accent);
  background-color: var(--color--neutral-light, #fff);
  border-radius: 999px;
  transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
}

.lc-card-cta svg {
  width: 16px;
  height: 16px;
  transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
}

.grid .page_item:hover .lc-card-cta svg {
  transform: translate3d(4px, 0, 0);
}

.grid .page_item:active .lc-card-cta {
  transform: scale(0.97);
}

.grid .page_item:focus-visible {
  outline: 3px solid var(--color--neutral-light, #fff);
  outline-offset: -8px;
}

/* ------------------------------------------- "what sets us apart" pull line
   Fills the column under the heading with the section's key sentence, so
   the space no longer reads as a missing image. */
.lc-split_pull {
  max-width: 22ch;
  margin: clamp(32px, 4vw, 56px) 0 0;
  padding-left: 22px;
  font-family: var(--font--secondary), sans-serif;
  font-size: clamp(24px, 2.3vw, 36px);
  font-weight: 400;
  line-height: 1.2;
  color: var(--color--accent);
  border-left: 2px solid var(--color--accent);
}

/* ---------------------------------------------------- products card drawing
   The card used to carry a product photo and a hover cover image. It now
   carries the same drawing language as the catalogue: an O-ring face with its
   inner diameter, and the cross-section with its thickness. */
.page_item .lc-card-sub {
  position: relative;
  z-index: 2;
  max-width: 38ch;
  font-size: 16px;
  line-height: 1.6;
}

.lc-card-art {
  position: absolute;
  top: 50%;
  right: var(--size--large, 10vw);
  z-index: 1;
  width: min(36vw, 520px);
  color: var(--color--accent);
  transform: translate3d(0, -50%, 0);
  pointer-events: none;
}

.lc-card-art svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.lc-card-art_label {
  font-family: var(--font--tertiary), sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  fill: currentColor;
}

.lc-card-art_ring {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transition: transform 1200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.page_item:hover .lc-card-art_ring {
  transform: rotate(90deg) scale(1.04);
}

@media screen and (max-width: 991px) {
  .lc-card-art {
    position: relative;
    top: auto;
    right: auto;
    width: min(100%, 420px);
    margin-top: 40px;
    transform: none;
  }
}

/* ---------------------------------------------------- manufacturing block
   The theme pushed this copy 130px down (container.relative-bottom) so it
   would overlap a card that is no longer there, which left a tall empty band
   above the heading. Even padding top and bottom centres it in its band. */
.section.lc-mfg {
  padding-top: clamp(88px, 9vw, 140px);
  padding-bottom: clamp(88px, 9vw, 140px);
}

.section.lc-mfg .container.relative-bottom {
  top: 0;
  margin-bottom: 0;
}

/* products card: content centred vertically instead of pinned to the bottom */
@media screen and (min-width: 992px) {
  .grid .page_item {
    justify-content: center;
    padding-top: clamp(56px, 6vw, 96px);
    padding-bottom: clamp(56px, 6vw, 96px);
  }
}

/* ------------------------------------------------------------ contact CTA */
.section.lc-cta {
  padding: clamp(88px, 9vw, 140px) var(--size--large, 10vw);
  border-bottom: 0;
}

.lc-cta_inner {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  column-gap: var(--gap, 8vw);
  row-gap: 48px;
  align-items: end;
  padding-top: clamp(40px, 4vw, 64px);
  border-top: 1px solid #10161c1f;
}

.lc-cta_kicker {
  margin: 0 0 20px;
  font-family: var(--font--tertiary), sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color--accent);
}

.lc-cta_title {
  max-width: 17ch;
  margin: 0;
  font-family: var(--font--secondary), sans-serif;
  font-size: clamp(34px, 4.2vw, 66px);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--color--accent);
}

.lc-cta_text {
  max-width: 46ch;
  margin: 24px 0 0;
  font-size: clamp(16px, 1.15vw, 18px);
  line-height: 1.7;
  color: var(--color--text-body, #5e666f);
}

.lc-cta_actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
}

.lc-cta_btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 18px 28px;
  font-family: var(--font--tertiary), sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color--neutral-light, #fff);
  background-color: var(--color--accent);
  border-radius: 999px;
  transition: background-color 300ms ease, transform 160ms ease;
}

.lc-cta_btn svg {
  width: 16px;
  height: 16px;
  transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
}

.lc-cta_btn:hover {
  background-color: #222270;
}

.lc-cta_btn:hover svg {
  transform: translate3d(4px, 0, 0);
}

.lc-cta_btn:active {
  transform: scale(0.97);
}

.lc-cta_btn:focus-visible,
.lc-cta_tel:focus-visible {
  outline: 2px solid var(--color--accent);
  outline-offset: 4px;
}

.lc-cta_call {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lc-cta_call-label {
  font-family: var(--font--tertiary), sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color--text-body, #5e666f);
}

.lc-cta_tel {
  align-self: flex-start;
  font-family: var(--font--secondary), sans-serif;
  font-size: clamp(24px, 2.2vw, 32px);
  color: var(--color--accent);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  transition: background-size 500ms cubic-bezier(0.16, 1, 0.3, 1);
}

.lc-cta_tel:hover {
  background-size: 100% 1px;
}

@media screen and (max-width: 991px) {
  .lc-cta_inner {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media screen and (max-width: 767px) {
  .section.lc-cta {
    padding: 72px 20px;
  }
}

/* ---------------------------------------------------------- footer brand
   The logo is blue linework on a transparent ground, so on the blue footer
   it sits on a white disc to stay legible. */
.lc-footer_brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.lc-footer_logo {
  flex: none;
  display: inline-flex;
  width: 46px;
  height: 46px;
  padding: 5px;
  background-color: var(--color--neutral-light, #fff);
  border-radius: 50%;
}

.lc-footer_logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.lc-footer_brand .footer_heading {
  margin: 0;
}

/* ------------------------------------------------------- mobile 3D ring
   Phones only. The ring's canvas is parked over a gap opened at the top of the
   blue section under the hero, so the ring sits large and centred between the
   1950 counter and "From large production runs". js/sections.js measures the
   slot and sets the variables. The canvas is taller than the slot because the
   scene draws the ring at a fixed fraction of the canvas height; it is
   transparent and ignores the pointer, so the overhang is invisible. */
@media screen and (max-width: 767px) {
  .lc-ring-docked .header_spline-scroll {
    position: absolute;
    top: var(--lc-ring-top, 100svh);
    left: var(--lc-ring-left, 0px);
    bottom: auto;
    width: calc(100% - var(--lc-ring-left, 0px));
    height: var(--lc-ring-h, 100svh);
  }

  .lc-ring-docked .section.lc-ring-slot {
    padding-top: var(--lc-ring-slot, 86vw);
  }

  /* the flat circle graphic would double up with the 3D ring right above it */
  .lc-ring-docked .lc-ring-slot .circle_wrapper {
    display: none;
  }
}

/* ------------------------------------------------- contact form on phones
   Under 768px the theme zeroes the form section's left padding and puts it
   back only on the heading, so the fields ran flush to the left edge with a
   gap on the right. One even gutter on the section instead. */
@media screen and (max-width: 767px) {
  .section.padding-right-none.padding-bottom-none.is-form {
    padding-left: 20px;
    padding-right: 20px;
  }

  .section.is-form .heading_wrapper.is-form {
    padding-left: 0;
  }
}