/* landing.css */
/* The homepage, from 2 October 2026: a quieter, more premium landing page in the light blue
   theme, at the website team's request: less text, more picture, more space. In order: the
   hero slides, the brands, about (with the film), the factory floor, why (with a photograph),
   how it works, then the quote form (quote.css). Motion is DESIGN §8's, gated on `html.motion`.
   Loaded only on /. Tokens come from site.css, which loads first. */

/* Page tokens: the few values this page needs that the site does not have. */
.page-landing {
  --lp-veil: rgba(12, 28, 48, 0.72);         /* navy over a photo: large white text reads at 3.1:1 in the brightest spot a picture could have */
  --lp-veil-strong: rgba(12, 28, 48, 0.66);
  --lp-ghost: rgba(12, 28, 48, 0.55);        /* the fill of an outlined button over a photo */
  --lp-chalk-veil: rgba(28, 93, 153, 0.88);  /* blue over a photo: the panel in focus */
  --lp-line-on-dark: rgba(255, 255, 255, 0.2);
  --lp-soft-on-dark: rgba(255, 255, 255, 0.86);
  --lp-display: clamp(2.75rem, 1.5rem + 5.2vw, 5.75rem);
  --lp-h2: clamp(2rem, 1.4rem + 2.5vw, 3.5rem);
  --lp-numeral: clamp(3rem, 2.3rem + 2.8vw, 4.75rem);
  --lp-section: clamp(5rem, 3.4rem + 6.6vw, 9.5rem);
}

/* ------------------------------------------------------------ shared type */
.lp-eyebrow { display: flex; align-items: center; gap: var(--s-12); margin-bottom: var(--s-16); color: var(--chalk); font-size: var(--fs-small); font-weight: 600; line-height: 1.4; }
.lp-eyebrow::before { content: ""; flex: none; width: 32px; height: 1px; background: var(--chalk); }
.lp-eyebrow--on-dark { color: var(--chalk-bright); }
.lp-eyebrow--on-dark::before { background: var(--chalk-bright); }
.lp-h2 { max-width: 16em; font-family: var(--font-display); font-size: var(--lp-h2); font-weight: 500; line-height: 1.08; letter-spacing: -0.025em; }
.lp-h2--on-dark { color: var(--white); }
.lp-lead { max-width: 34rem; color: var(--ink-2); font-size: var(--fs-lead); line-height: 1.65; }
/* A section's heading on the left, a quiet link or line on the right */
.lp-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-16) var(--s-48); margin-bottom: var(--s-48); }

.lp-hero :focus-visible,
.lp-services :focus-visible { outline-color: var(--white); }

/* ------------------------------------------------------------ 1. the hero: three slides */
.lp-hero { position: relative; overflow: hidden; background: var(--ink-panel); color: var(--white); }
.lp-slides { position: relative; min-height: clamp(540px, 78vh, 780px); list-style: none; }
/* Each slide fills the box; the active one is shown, the rest wait behind it.
   Without the script the first slide is in the flow on its own. */
.lp-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 700ms ease, visibility 0s linear 700ms;
}
.lp-slide.is-active { opacity: 1; visibility: visible; transition-delay: 0s; }
html:not(.js) .lp-slide.is-active { position: relative; min-height: clamp(540px, 78vh, 780px); }
html:not(.js) .lp-slide:not(.is-active) { display: none; }
.lp-slide__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lp-slide::after { content: ""; position: absolute; inset: 0; background: var(--lp-veil); }
.lp-slide__inner { position: relative; z-index: 1; width: min(100% - 2 * var(--gutter), var(--container)); padding-block: var(--s-56) calc(var(--s-40) + 64px); }
.lp-hero__title { max-width: 12em; font-family: var(--font-display); font-size: var(--lp-display); font-weight: 600; line-height: 1; letter-spacing: -0.035em; }
/* Large text over the photo (19 px and semibold at the least), so it reads through the veil */
.lp-hero__lead { max-width: 36rem; margin-top: var(--s-24); font-size: max(1.1875rem, var(--fs-hero-lead)); font-weight: 600; line-height: 1.5; }
.lp-hero__badge { width: 116px; height: auto; margin-top: var(--s-24); }
.lp-hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-12); margin-top: var(--s-32); }
.lp-hero .btn--on-dark { background: var(--lp-ghost); }
.lp-hero .btn--on-dark:hover { background: var(--white); }
/* Previous, the dots, next and pause, along the foot of the slide */
.lp-hero__controls { position: absolute; left: 0; right: 0; bottom: var(--s-16); z-index: 2; display: none; align-items: center; gap: var(--s-4); }
.js .lp-hero__controls { display: flex; }
.lp-hero__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  background: var(--lp-ghost);
  color: var(--white);
  transition: background-color var(--fast) ease, color var(--fast) ease;
}
.lp-hero__arrow:hover { background: var(--white); color: var(--ink); }
.lp-hero__arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lp-hero__dots { display: flex; }
.lp-hero__dots button { display: flex; align-items: center; justify-content: center; width: 40px; height: 44px; padding: 0; border: 0; background: none; }
.lp-hero__dots button::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.6); transition: transform var(--fast) ease, background-color var(--fast) ease; }
.lp-hero__dots button:hover::before { background: var(--white); }
.lp-hero__dots button[aria-current="true"]::before { background: var(--chalk-bright); transform: scale(1.4); }
.lp-hero__pause {
  margin-left: auto;
  margin-right: 0;
  min-height: 44px;
  padding: 0 var(--s-8);
  border: 0;
  background: none;
  color: var(--white);
  font-size: var(--fs-small);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}
/* On each slide's turn: the picture draws nearer while the words rise */
.motion .lp-slide.is-active .lp-slide__photo { animation: lp-nearer 7s var(--ease-out) both; }
.motion .lp-slide.is-active .lp-hero__title,
.motion .lp-slide.is-active .lp-hero__lead,
.motion .lp-slide.is-active .lp-hero__badge,
.motion .lp-slide.is-active .lp-hero__actions { opacity: 0; animation: lp-rise 900ms var(--ease-out) forwards; }
.motion .lp-slide.is-active .lp-hero__lead { animation-delay: 220ms; }
.motion .lp-slide.is-active .lp-hero__badge { animation-delay: 320ms; }
.motion .lp-slide.is-active .lp-hero__actions { animation-delay: 400ms; }
/* Room at the right end of the controls for the WhatsApp button at the foot of a phone's screen */
@media (max-width: 767px) { .lp-hero__pause { margin-right: calc(56px + var(--s-12)); } }
/* On a phone (2026-10-06): the controls were wider than the screen, so the round arrows were
   squeezed into ovals and "Pause the slides" broke over three lines. Nothing in the row shrinks
   now; the pause button is a round icon like the arrows, its words kept as its name for screen
   readers; and the words of every slide sit at its foot, above the controls, so they do not
   jump about from slide to slide. Below 360 px the arrows give way: the dots and a swipe move it. */
@media (max-width: 767px) {
  .lp-slide { align-items: flex-end; }
  .lp-slide__inner { padding-block: calc(var(--header-h) + var(--s-32)) calc(var(--s-32) + 64px); }
  .lp-hero__actions .btn { flex: 1 1 100%; }
  .lp-hero__controls > * { flex-shrink: 0; }
  .lp-hero__dots button { width: 36px; }
  .lp-hero__pause {
    position: relative;
    width: 44px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    background: var(--lp-ghost);
    font-size: 0;
    text-decoration: none;
  }
  .lp-hero__pause::before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 10px;
    height: 14px;
    border-inline: 3px solid currentColor;
  }
  .lp-hero__pause[aria-pressed="true"]::before {
    width: 12px;
    border: 0;
    background: currentColor;
    clip-path: polygon(15% 0, 100% 50%, 15% 100%);
  }
  .lp-hero__pause:hover { background: var(--white); color: var(--ink); }
}
@media (max-width: 359px) { .lp-hero__arrow { display: none; } }
@keyframes lp-nearer { from { transform: scale(1.1); } to { transform: none; } }
@keyframes lp-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------ 2. the logos, running sideways */
.lp-logos { padding-block: var(--s-40) var(--s-8); overflow: hidden; background: var(--white); border-top: 1px solid var(--rule); }
.lp-logos__title { color: var(--ink-3); font-size: var(--fs-small); font-weight: 600; line-height: 1.4; text-align: center; }
.lp-logos__track { width: min(100% - 2 * var(--gutter), var(--container)); margin: var(--s-24) auto 0; }
.lp-logos__row { display: flex; }
.lp-logos__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--s-16) var(--s-24);
  width: 100%;
  list-style: none;
}
/* Three to a row, five from 900 px; a short last row sits centred. The widths are for the
   still row only: with motion on, the row below sets them, or the logos overlap */
.lp-logos__list li { display: flex; justify-content: center; }
html:not(.motion) .lp-logos__list li { flex: 0 1 calc((100% - 2 * var(--s-24)) / 3); }
.lp-logos__list img { width: 100%; max-width: 180px; height: auto; }
.lp-logos__list--again { display: none; }
.lp-logos__controls { display: flex; justify-content: flex-end; }
.lp-run__pause {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-3);
  font-size: var(--fs-small);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}
@media (min-width: 900px) { html:not(.motion) .lp-logos__list li { flex-basis: calc((100% - 4 * var(--s-24)) / 5); } }
/* More than six logos: twos on a phone and fives from 600 px */
@media (max-width: 599px) { html:not(.motion) .lp-logos__list:has(li:nth-child(7)) li { flex-basis: calc((100% - var(--s-24)) / 2); } }
@media (min-width: 600px) { html:not(.motion) .lp-logos__list:has(li:nth-child(7)) li { flex-basis: calc((100% - 4 * var(--s-24)) / 5); } }
/* Moving only when motion is wanted: one row of four copies, run sideways, with a pause button */
.motion .lp-logos__track { width: auto; margin-inline: 0; }
.motion .lp-logos__row { width: max-content; animation: lp-run 48s linear infinite; }
.motion .lp-logos__list { display: flex; flex-wrap: nowrap; justify-content: flex-start; width: auto; gap: 0; }
.motion .lp-logos__list--again { display: flex; }
.motion .lp-logos__list li { flex: none; width: clamp(150px, 16vw, 224px); padding-inline: clamp(16px, 2.5vw, 36px); }
.motion .lp-logos.is-paused .lp-logos__row { animation-play-state: paused; }
/* Twice the logos take twice the time, so the row keeps the pace it had with five */
.motion .lp-logos__row:has(li:nth-child(7)) { animation-duration: 96s; }
/* Four copies in a row, so half the row is exactly two of them. */
@keyframes lp-run { to { transform: translate3d(-50%, 0, 0); } }

/* ------------------------------------------------------------ 3. about us */
.lp-about { padding-block: var(--lp-section); background: var(--paper); }
.lp-about__grid { display: grid; gap: var(--s-48); align-items: center; }
@media (min-width: 1024px) { .lp-about__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-64); } }
.lp-about__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-24); }
.lp-about__text .lp-eyebrow { margin-bottom: calc(-1 * var(--s-8)); }
.lp-about__copy { display: grid; gap: var(--s-12); max-width: 34rem; color: var(--ink-2); line-height: 1.65; }
/* The numbers, counted up the first time they are seen (effects.js) */
.lp-stats { display: flex; flex-wrap: wrap; gap: var(--s-20) var(--s-48); width: 100%; padding-block: var(--s-24); border-block: 1px solid var(--rule); list-style: none; }
.lp-stats li { display: flex; flex-direction: column; gap: var(--s-4); }
.lp-stats__n { font-family: var(--font-display); font-size: var(--fs-step); font-weight: 500; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.lp-stats__l { color: var(--ink-3); font-size: var(--fs-small); line-height: 1.4; }
/* The years lead the numbers, large, on a light-blue highlight (the website team, 2026-10-05) */
.lp-stats__lead { flex-basis: 100%; align-items: flex-start; }
.lp-stats__n--lead { display: inline-block; padding-inline: var(--s-8); background: var(--chalk-bright); font-size: var(--lp-numeral); }
.lp-stats__l--lead { color: var(--ink); font-size: var(--fs-body); font-weight: 600; }
/* The factory film, playing on its own while it is on screen (site.js) */
.lp-about__frame .film__video { height: auto; aspect-ratio: 4 / 3; }

/* ------------------------------------------------------------ 4. the factory floor: three panels */
.lp-services { background: var(--ink-panel); color: var(--white); }
.lp-services__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-16) var(--s-48); padding-block: var(--lp-section) var(--s-48); }
.lp-services__cols { display: grid; list-style: none; }
.lp-col {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 420px;
  overflow: hidden;
  border-top: 1px solid var(--lp-line-on-dark);
}
.lp-col img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.motion .lp-col img { transition: transform 900ms var(--ease-out); }
.motion .lp-col:hover img,
.motion .lp-col:focus-within img { transform: scale(1.06); }
.lp-col::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--lp-veil-strong);
  transition: background-color var(--medium) var(--ease-out);
}
/* The panel under the pointer, or holding the focus, turns blue */
.lp-col:hover::after,
.lp-col:focus-within::after { background: var(--lp-chalk-veil); }
.lp-col__text { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-8); padding: var(--s-32) var(--gutter); }
.lp-col__title { font-family: var(--font-display); font-size: var(--fs-card); font-weight: 600; line-height: 1.15; }
.lp-col__text p { max-width: 22rem; color: var(--lp-soft-on-dark); line-height: 1.5; }
.lp-col__link,
.lp-link-on-dark {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--white);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.lp-col__link:hover,
.lp-link-on-dark:hover { color: var(--chalk-bright); text-decoration-thickness: 2px; }
@media (min-width: 900px) {
  .lp-services__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lp-col { min-height: clamp(480px, 62vh, 620px); border-top: 0; border-left: 1px solid var(--lp-line-on-dark); }
  .lp-col:first-child { border-left: 0; }
  .lp-col__text { padding: var(--s-40); }
}

/* ------------------------------------------------------------ 5. why brands choose us */
.lp-why { padding-block: var(--lp-section); background: var(--white); }
.lp-why__grid { display: grid; gap: var(--s-48); align-items: center; }
@media (min-width: 1024px) { .lp-why__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-64); } }
.lp-promises { margin-top: var(--s-32); border-bottom: 1px solid var(--rule); list-style: none; }
.lp-promises li { display: grid; gap: var(--s-4); padding-block: var(--s-20); border-top: 1px solid var(--rule); }
.lp-promises h3 { font-family: var(--font-display); font-size: var(--fs-tile); font-weight: 600; line-height: 1.25; }
.lp-promises p { color: var(--ink-2); line-height: 1.55; }
/* A photograph beside the promises for now; it draws nearer under the pointer */
.lp-why__photo { overflow: hidden; }
.lp-why__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.motion .lp-why__photo img { transition: transform 900ms var(--ease-out); }
.motion .lp-why__photo:hover img { transform: scale(1.04); }

/* ------------------------------------------------------------ 6. how it works */
.lp-process { padding-block: var(--lp-section); background: var(--paper); }
.lp-steps { display: grid; gap: var(--s-40); list-style: none; }
.lp-step { display: flex; flex-direction: column; gap: var(--s-12); padding-top: var(--s-24); border-top: 1px solid var(--ink); }
.lp-step__n { font-family: var(--font-display); font-size: var(--lp-numeral); font-weight: 300; line-height: 1; letter-spacing: -0.03em; color: var(--chalk); }
.lp-step__title { font-family: var(--font-display); font-size: var(--fs-card); font-weight: 600; line-height: 1.2; }
.lp-step p { color: var(--ink-2); line-height: 1.6; }
.lp-process__more { display: flex; flex-wrap: wrap; gap: 0 var(--s-32); margin-top: var(--s-48); }
@media (min-width: 900px) {
  .lp-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-48); }
}

/* 7. The quote form is the shared section in quote.css. */