/* Grupo Toledo ST — landing. Plain CSS, no build step. Tokens and rules: DESIGN.md. */

/* ---------- Fonts (self-hosted, latin subset) ---------- */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('assets/fonts/fraunces.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url('assets/fonts/fraunces-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fonts/instrument-sans.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fonts/instrument-sans-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens ---------- */
:root {
  --paper: #f2efe8;
  --white: #ffffff;
  --ink: #14202e;
  --muted: #5b6573;
  --line: #dcd8cf;
  --navy: #0a3462;
  --navy-deep: #08213f;
  --navy-line: #1d3d63;
  --green: #107040;
  --green-hover: #0c5a33;
  --green-tint: #e6f1ea;
  --green-lit: #7fd1a0;
  --paper-dim: #b9c3cf;

  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-text: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --ease: cubic-bezier(.23, 1, .32, 1);
  --container: 1240px;
  --gutter: clamp(20px, 4vw, 56px);
  --section: clamp(72px, 9vw, 120px);
  --r-sm: 8px;
  --header-h: 80px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--header-h); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, picture { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-color: var(--green); text-underline-offset: .18em; }
h1, h2, h3, p, ul, ol, dl, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
strong { font-weight: 600; }
button { font: inherit; color: inherit; }

:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
.section-dark :focus-visible, .hero :focus-visible { outline-color: var(--green-lit); }

.container { width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto; }

.skip {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--green); color: var(--white); padding: 8px 12px; border-radius: var(--r-sm);
}
.skip:focus { top: 16px; }

/* Icons: from the inline sprite, tinted by the text color, sized by class */
.ic { width: 20px; height: 20px; flex: none; stroke: currentColor; }

/* Film grain on dark sections: one SVG turbulence tile, very low opacity. */
.grain { position: relative; }
.grain::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  opacity: .07; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.grain > * { position: relative; z-index: 1; }

/* Photos: one grade for every stock photo so they read as one shoot. */
picture img { filter: saturate(.82) contrast(1.04); }

/* ---------- Type ---------- */
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; letter-spacing: -.015em; }
.display { font-size: clamp(3.2rem, 9.6vw, 8.6rem); line-height: .96; letter-spacing: -.03em; }
h2 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); line-height: 1.04; color: var(--navy); max-width: 16ch; }
.section-dark h2 { color: var(--paper); }
h2 em, h1 em, .brand-name em, .contact-title em { font-style: italic; font-weight: 300; }
h3 { font-size: 24px; font-weight: 500; line-height: 1.2; }
.intro { font-size: 20px; line-height: 1.5; color: var(--muted); max-width: 46ch; }
.section-dark .intro { color: var(--paper-dim); }


.section-head { margin-bottom: 44px; }
.section-head-split { display: grid; grid-template-columns: 7fr 5fr; gap: 48px; align-items: end; }
@media (max-width: 860px) { .section-head { margin-bottom: 40px; } .section-head-split { grid-template-columns: 1fr; gap: 20px; } }

/* Placeholders: bracketed data the client has not confirmed yet. `?ph=1` highlights them. */
.ph { color: inherit; }
body.show-ph .ph { background: #f8e3a1; color: #3d2f00; border-radius: 4px; padding: 0 4px; }

/* ---------- Buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 26px; border-radius: var(--r-sm); border: 1px solid transparent;
  font-size: 15px; font-weight: 500; line-height: 1; text-decoration: none; cursor: pointer;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .12s var(--ease);
}
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--green); color: var(--white); }
.btn-primary:hover { background: var(--green-hover); color: var(--white); }
.btn-ghost { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn-ghost:hover { background: var(--green-tint); color: var(--ink); }
.btn-on-dark { border-color: rgba(245, 243, 238, .45); color: var(--paper); }
.btn-on-dark:hover { border-color: var(--paper); background: transparent; color: var(--paper); }
.btn-sm { padding: 11px 18px; }
.btn .ic { width: 18px; height: 18px; transition: transform .2s var(--ease); }
.btn:hover .ic { transform: translateX(3px); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 17px; font-weight: 500; text-decoration: none; color: var(--green);
}
.link-arrow .ic { transition: transform .2s var(--ease); }
.link-arrow:hover .ic { transform: translateX(4px); }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  color: var(--paper);
  background: transparent; border-bottom: 1px solid transparent;
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.site-header.is-solid { color: var(--ink); background: var(--paper); border-bottom-color: var(--line); }
.header-inner { display: flex; align-items: center; gap: 32px; height: var(--header-h); }
.brand { display: block; margin-right: auto; position: relative; }
.brand img { width: auto; height: 40px; transition: opacity .3s var(--ease); }
.brand .brand-dark { position: absolute; inset: 0; opacity: 0; }
.site-header.is-solid .brand-light { opacity: 0; }
.site-header.is-solid .brand-dark { opacity: 1; }
.nav { display: flex; align-items: center; gap: 28px; }
.nav a { position: relative; font-size: 15px; font-weight: 500; text-decoration: none; opacity: .85; transition: opacity .2s var(--ease); }
.nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.nav a:hover { opacity: 1; }
.nav a:hover::after { transform: scaleX(1); }
.nav-cta { display: none; }
.menu-btn { display: none; }
.site-header .btn-primary { color: var(--white); }

@media (max-width: 860px) {
  :root { --header-h: 64px; }
  .brand img { height: 32px; }
  .header-cta { display: none; }
  .menu-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin-right: -10px;
    background: none; border: 0; border-radius: var(--r-sm); cursor: pointer;
  }
  .menu-btn .ic { width: 24px; height: 24px; }
  .menu-btn .ic-close, .menu-btn[aria-expanded="true"] .ic-menu { display: none; }
  .menu-btn[aria-expanded="true"] .ic-close { display: block; }
  .site-header.is-open { color: var(--ink); background: var(--paper); border-bottom-color: var(--line); }
  .site-header.is-open .brand-light { opacity: 0; }
  .site-header.is-open .brand-dark { opacity: 1; }
  .nav {
    position: fixed; inset: var(--header-h) 0 auto 0; z-index: 40;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); color: var(--ink); border-bottom: 1px solid var(--line);
    padding: 8px var(--gutter) 24px;
    opacity: 0; transform: translateY(-8px); pointer-events: none;
    transition: opacity .2s var(--ease), transform .2s var(--ease);
  }
  .nav.is-open { opacity: 1; transform: none; pointer-events: auto; }
  .nav a { padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 20px; font-family: var(--font-display); opacity: 1; }
  .nav a:last-of-type { border-bottom: 0; }
  .nav-cta { display: block; margin-top: 16px; padding: 16px 24px; border-radius: var(--r-sm); background: var(--green); color: var(--white); text-align: center; font-family: var(--font-text); font-size: 15px; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative; min-height: 100svh; display: flex; align-items: flex-end;
  background: var(--navy-deep); color: var(--paper); overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 55% 50%; filter: saturate(.55) contrast(1.05) brightness(.85); transform-origin: 50% 50%; will-change: transform; }
/* Navy grade: the photo stays warm on the right, the type sits on navy at the left. */
.hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(8, 33, 63, .92) 0%, rgba(8, 33, 63, .72) 38%, rgba(8, 33, 63, .28) 70%, rgba(8, 33, 63, .35) 100%),
    linear-gradient(180deg, rgba(8, 33, 63, .55) 0%, rgba(8, 33, 63, 0) 35%, rgba(8, 33, 63, .55) 100%);
}
.hero-inner { position: relative; z-index: 1; padding: calc(var(--header-h) + 48px) 0 56px; }
.hero-kicker { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 500; color: var(--paper-dim); margin-bottom: 40px; }
.hero-kicker .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--green-lit); }
.hero .display { max-width: 12ch; }
.hero .mask { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.hero .line { display: block; }
.hero .accent { color: var(--green-lit); font-style: italic; font-weight: 300; }
.hero-foot {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 32px 48px; align-items: end; margin-top: clamp(40px, 6vh, 64px);
}
.hero .lede { font-size: 19px; line-height: 1.5; color: var(--paper-dim); max-width: 48ch; grid-column: 1; }
.hero .actions { display: flex; flex-wrap: wrap; gap: 12px; grid-column: 1; }
.hero-types {
  grid-column: 2; grid-row: 1 / 3; justify-self: end; align-self: end;
  display: grid; gap: 0; min-width: 200px;
  font-family: var(--font-display); font-size: 20px; line-height: 1;
  color: var(--paper);
}
.hero-types li { padding: 12px 0; border-top: 1px solid rgba(245, 243, 238, .22); }
.hero-types li:last-child { border-bottom: 1px solid rgba(245, 243, 238, .22); }

@media (max-width: 860px) {
  .hero { align-items: flex-end; }
  .hero-video { object-position: 60% 50%; }
  /* Vertical grade on phones: the can shows through the top half, the type sits on navy below. */
  .hero-bg::after {
    background:
      linear-gradient(180deg, rgba(8, 33, 63, .55) 0%, rgba(8, 33, 63, .35) 30%, rgba(8, 33, 63, .8) 60%, rgba(8, 33, 63, .96) 100%);
  }
  .hero-inner { padding: calc(var(--header-h) + 32px) 0 40px; }
  .hero-kicker { margin-bottom: 24px; }
  .hero-foot { grid-template-columns: 1fr; gap: 24px; margin-top: 32px; }
  .hero-types { grid-column: 1; grid-row: auto; justify-self: stretch; min-width: 0; font-size: 18px; }
  .hero .lede, .hero .actions { grid-column: 1; }
}

/* ---------- Manifesto ---------- */
.manifesto { padding-block: var(--section) 0; }
.manifesto + .section { padding-top: calc(var(--section) * .8); }
.manifesto-inner { padding-left: clamp(0px, 8vw, 120px); }
.manifesto-text {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.7rem, 3.4vw, 2.75rem); line-height: 1.2; letter-spacing: -.01em;
  color: var(--navy); max-width: 22ch;
}
.manifesto-text .w { color: var(--line); transition: color .3s var(--ease); }
.manifesto-text .w.is-on { color: var(--navy); }
@media (max-width: 860px) {
  .manifesto-inner { grid-template-columns: 1fr; gap: 20px; }
}

/* ---------- Sections ---------- */
.section { padding-block: var(--section); }
.section-dark { background: var(--navy-deep); color: var(--paper); }

/* ---------- Services: editorial list + sticky image ---------- */
.svc { position: relative; }
.services { padding-top: 0; }
.svc-still { display: none; }
@media (hover: hover) and (min-width: 961px) {
  .svc-list { width: 60%; }
  .svc-still { display: block; position: absolute; right: 0; top: 0; width: 32%; aspect-ratio: 4 / 5; overflow: hidden; transition: opacity .3s var(--ease); }
  .svc-still img { width: 100%; height: 100%; object-fit: cover; }
  .svc.is-hover .svc-still { opacity: 0; }
}
.svc-list { border-top: 1px solid var(--line); }
.svc-row {
  position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr) 40px; gap: 6px 24px; align-items: baseline;
  padding: 34px 0; border-bottom: 1px solid var(--line); cursor: pointer;
}
.svc-thumb { display: none; }
.svc-n { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.svc-row h3 {
  font-size: clamp(2.2rem, 4.4vw, 3.8rem); font-weight: 400; line-height: 1.05; color: var(--navy);
  transition: transform .3s var(--ease), color .3s var(--ease);
}
.svc-row p { grid-column: 2; font-size: 15px; color: var(--muted); max-width: 44ch; }
.svc-arrow { grid-column: 3; grid-row: 1; align-self: center; color: var(--green); opacity: 0; transform: translateX(-8px); transition: opacity .3s var(--ease), transform .3s var(--ease); }
.svc-row.is-active h3 { transform: translateX(10px); color: var(--green); }
.svc-row.is-active .svc-arrow { opacity: 1; transform: none; }
/* Floating photo that follows the cursor over the list (desktop with a real pointer). */
.svc-float {
  position: fixed; left: 0; top: 0; z-index: 30; width: clamp(220px, 22vw, 320px); aspect-ratio: 4 / 5;
  pointer-events: none; opacity: 0; overflow: hidden; display: none;
}
.svc-float picture { position: absolute; inset: 0; opacity: 0; transition: opacity .35s var(--ease); }
.svc-float picture.is-active { opacity: 1; }
.svc-float img { width: 100%; height: 100%; object-fit: cover; }
@media (hover: hover) and (min-width: 961px) { html.js .svc-float { display: block; } }
@media (max-width: 960px) {
  .svc-row { grid-template-columns: 40px 1fr; padding: 24px 0; }
  .svc-thumb { display: block; grid-column: 1 / -1; aspect-ratio: 16 / 9; overflow: hidden; margin-bottom: 8px; }
  .svc-thumb img { width: 100%; height: 100%; object-fit: cover; }
  .svc-arrow { display: none; }
  .svc-row.is-active h3 { transform: none; }
}

/* ---------- Process ---------- */
.band { position: relative; min-height: 70vh; display: flex; align-items: flex-end; overflow: hidden; }
.band-bg { position: absolute; inset: 0; }
.band-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; filter: saturate(.5) contrast(1.05); }
.band-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 33, 63, .35) 0%, rgba(8, 33, 63, .55) 60%, var(--navy-deep) 100%); }
.band-copy { position: relative; z-index: 1; padding-block: 120px 64px; }
.band-title { max-width: 16ch; font-size: clamp(2.4rem, 5.4vw, 4.6rem); }

.steps-wrap { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; padding-block: 64px var(--section); }
.steps-count {
  font-family: var(--font-display); font-weight: 300; font-size: clamp(6rem, 12vw, 11rem); line-height: .9; letter-spacing: -.04em;
  color: var(--paper); font-variant-numeric: tabular-nums;
}
.steps-media { position: relative; aspect-ratio: 4 / 3; margin-top: 24px; overflow: hidden; }
/* Feathered edges, only where photo and background are both dark (the process column).
   On cream a dark photo with soft edges leaves a muddy halo: services stays sharp. */
.feather {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent), linear-gradient(180deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent), linear-gradient(180deg, transparent, #000 9%, #000 91%, transparent);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.steps-media picture { position: absolute; inset: 0; opacity: 0; transition: opacity .6s var(--ease); }
.steps-media picture.is-active { opacity: 1; }
.steps-media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.55) contrast(1.05) brightness(.9); }
/* Navy tint over every step photo so light and dark shots sit on the same section. */
.steps-media::after { content: ''; position: absolute; inset: 0; background: var(--navy-deep); mix-blend-mode: multiply; opacity: .35; pointer-events: none; }
.steps { border-top: 1px solid var(--navy-line); }
.step { padding: 56px 0; border-bottom: 1px solid var(--navy-line); transition: opacity .4s var(--ease); }
.step-n { display: none; }
.step h3 { font-size: clamp(1.8rem, 3vw, 2.5rem); color: var(--paper); }
.step > p { margin-top: 12px; color: var(--paper-dim); max-width: 40ch; font-size: 17px; }
html.js .step { opacity: .4; }
html.js .step.is-active { opacity: 1; }

/* Pinned scenes (desktop, with motion): services and process lock the viewport while
   the scroll drives the active row. The frame is one viewport minus the header, so
   every row and the photo fit without the page moving. JS pins with ScrollTrigger. */
@media (min-width: 961px) {
  html.js .steps-wrap {
    min-height: calc(100svh - var(--header-h)); align-content: center; align-items: center;
    padding-block: 24px; box-sizing: border-box;
  }
  html.js .step { padding: clamp(16px, 2.6vh, 28px) 0; }
  html.js .step > p { font-size: 16px; margin-top: 8px; }
  html.js .steps-media { height: min(calc(100svh - var(--header-h) - 300px), 380px); aspect-ratio: auto; }
  .steps-progress { display: flex; gap: 6px; margin-top: 20px; }
  .steps-progress span { width: 28px; height: 2px; background: var(--navy-line); transition: background-color .3s var(--ease); }
  .steps-progress span.is-on { background: var(--green-lit); }
}
.steps-progress { display: none; }
@media (min-width: 961px) { html.js .steps-progress { display: flex; } }
@media (max-width: 960px) {
  .band { min-height: 56vh; }
  .band-copy { padding-block: 96px 48px; }
  .steps-wrap { grid-template-columns: 1fr; gap: 0; padding-block: 48px var(--section); }
  .steps-side { display: none; }
  .step-n { display: block; font-family: var(--font-display); font-weight: 300; font-size: 40px; line-height: 1; color: var(--navy-line); margin-bottom: 12px; }
  html.js .step { opacity: 1; }
}

/* ---------- Plant ---------- */
.plant-hero { position: relative; }
.plant-hero picture { aspect-ratio: 21 / 9; overflow: hidden; }
.plant-hero img { width: 100%; height: 100%; object-fit: cover; }
.specs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 48px; margin-top: 64px; }
.specs div { padding: 20px 0; border-bottom: 1px solid var(--line); }
.specs dt { font-size: 13px; color: var(--muted); }
.specs dd { margin: 6px 0 0; font-family: var(--font-display); font-size: 22px; line-height: 1.2; }
@media (max-width: 860px) {
  .plant-hero picture { aspect-ratio: 4 / 3; }
  .specs { grid-template-columns: 1fr 1fr; gap: 0 24px; margin-top: 40px; }
}

/* ---------- Brands ---------- */
.brands { border-top: 1px solid var(--line); }
.brands-grid { display: grid; grid-template-columns: 7fr 5fr; gap: 64px; align-items: center; }
.brand-photo { max-width: 420px; justify-self: center; }
/* Studio shot on a grey gradient ground: multiply darkens it into the paper and a soft
   radial mask fades the corners, so only the bottle and its shadow remain. */
.brand-photo img {
  mix-blend-mode: multiply; filter: brightness(1.2) contrast(1.02);
  -webkit-mask-image: radial-gradient(ellipse 40% 58% at 50% 52%, #000 62%, transparent 100%);
  mask-image: radial-gradient(ellipse 40% 58% at 50% 52%, #000 62%, transparent 100%);
}
.brand-list { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--line); }
.brand-list li { padding: 28px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 24px; }
.brand-logo { width: auto; height: clamp(40px, 4.4vw, 56px); margin-bottom: 8px; filter: none; }
.brand-name { font-family: var(--font-display); font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1; letter-spacing: -.02em; color: var(--navy); }
.brand-meta { font-size: 15px; color: var(--muted); text-align: right; }
.brand-next { grid-template-columns: 1fr; gap: 12px; }
.brand-next .brand-name { font-size: clamp(1.8rem, 3.2vw, 2.6rem); }
@media (max-width: 860px) { .brands-grid { grid-template-columns: 1fr; gap: 32px; } .brand-photo { max-width: 280px; } .brand-list li { grid-template-columns: 1fr; gap: 6px; } .brand-meta { text-align: left; } }

/* ---------- FAQ ---------- */
.faq-wrap { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; }
.faq-cta { margin-top: 24px; font-size: 17px; color: var(--muted); max-width: 28ch; }
.faq-cta a { display: block; margin-top: 8px; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px 0; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-size: 24px; font-weight: 400; line-height: 1.25; color: var(--navy);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ic { color: var(--green); transition: transform .2s var(--ease); }
.faq details[open] summary .ic { transform: rotate(180deg); }
.faq details p { padding: 0 0 24px; max-width: 60ch; color: var(--muted); }
@media (max-width: 860px) { .faq-wrap { grid-template-columns: 1fr; gap: 24px; } .faq summary { font-size: 20px; } }

/* ---------- Contact ---------- */
.contact-title { max-width: none; font-size: clamp(2.8rem, 8vw, 7rem); line-height: .96; letter-spacing: -.03em; margin-bottom: 64px; }
.contact { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; }
.contact-list { margin-top: 40px; }
.contact-list div { display: grid; grid-template-columns: 96px 1fr; gap: 16px; padding: 14px 0; border-top: 1px solid var(--navy-line); font-size: 17px; }
.contact-list div:last-child { border-bottom: 1px solid var(--navy-line); }
.contact-list dt { color: var(--paper-dim); font-size: 15px; padding-top: 2px; }
.contact-list dd { margin: 0; }
.contact-list a { text-decoration: none; }
.contact-list a:hover { color: var(--green-lit); }

.contact-form { background: var(--white); color: var(--ink); padding: 40px; display: grid; gap: 20px; }
.form-intro { font-size: 15px; color: var(--muted); }
.field { display: grid; gap: 6px; }
.field label { font-size: 15px; font-weight: 500; }
.field .opt { font-weight: 400; color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--white); color: var(--ink); font: inherit; font-size: 16px; line-height: 1.4;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea { resize: vertical; min-height: 96px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px var(--green-tint); }
.form-error { font-size: 15px; color: #a1261e; }
.contact-form .btn { justify-self: start; }
@media (max-width: 860px) {
  .contact-title { margin-bottom: 40px; }
  .contact { grid-template-columns: 1fr; gap: 40px; }
  .contact-form { padding: 24px; }
}

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-deep); color: var(--paper-dim); border-top: 1px solid var(--navy-line); overflow: hidden; }
.footer-inner { display: grid; grid-template-columns: 1fr auto; gap: 24px 48px; align-items: start; padding-block: 48px 32px; }
.footer-brand img { width: auto; height: 32px; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.footer-nav a { font-size: 15px; text-decoration: none; }
.footer-nav a:hover { color: var(--paper); }
.footer-data { grid-column: 1 / -1; display: grid; gap: 4px; font-size: 13px; }
.footer-foot {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding-block: 20px; border-top: 1px solid var(--navy-line); font-size: 13px;
}
@media (max-width: 860px) { .footer-inner { grid-template-columns: 1fr; gap: 24px; padding-block: 40px 24px; } }

/* ---------- Motion ---------- */
/* Entrance states are set by JS; without JS (or with reduced motion) everything is visible. */
html.js [data-reveal] { opacity: 0; }
html.js [data-hero-line] { opacity: 0; }
html.js [data-clip] picture { clip-path: inset(100% 0 0 0); }
html.js [data-split]:not(.is-split) { visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal], html.js [data-hero-line] { opacity: 1; }
  html.js [data-clip] picture { clip-path: none; }
  html.js [data-split]:not(.is-split) { visibility: visible; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}