/* ============================================================
   ALANTANA.COM — Stylesheet
   Built on the Alantana Design System (Brand Guidelines v1.0,
   theme "Alantana 2025-1"). Warm Stone base · teal as the brand ·
   Deep Ink secondary · 20.4° lean form language.

   Motion concept: «Die Linie, die steigt» — the brand's growth
   shapes (baseline → lift through the A → higher plateau) become
   the page's motion vocabulary. All animation is CSS/SVG +
   IntersectionObserver; transform/opacity only; fully disabled
   under prefers-reduced-motion. Reveal-hiding is scoped to .js
   so the page is complete without JavaScript.
   ============================================================ */

/* ---------- SELF-HOSTED BRAND FONTS (no CDN calls) ---------- */
@font-face {
  font-family: "Aptos";
  font-weight: 800 900;
  font-style: normal;
  font-display: swap;
  src: local("Aptos Black"), local("Aptos-Black"),
       url("../fonts/Aptos-Black.ttf") format("truetype");
}
@font-face {
  font-family: "Aptos";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: local("Aptos Bold"), local("Aptos-Bold"),
       url("../fonts/Aptos-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "Tenorite";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: local("Tenorite"), url("../fonts/Tenorite.ttf") format("truetype");
}
@font-face {
  font-family: "Tenorite";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: local("Tenorite Bold"), local("Tenorite-Bold"),
       url("../fonts/Tenorite-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "Tenorite";
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  src: local("Tenorite Italic"), local("Tenorite-Italic"),
       url("../fonts/Tenorite-Italic.ttf") format("truetype");
}

/* ---------- DESIGN TOKENS ---------- */
:root {
  /* backgrounds & neutrals */
  --stone:       #F6F3EC;
  --stone-deep:  #ECE6D7;
  --white:       #FFFFFF;
  --hairline:    #DED7C7;

  /* text */
  --charcoal:    #26302D;
  --charcoal-2:  #3F4743;
  --muted:       #5E6B66;

  /* brand teal — three jobs */
  --deep-teal:   #007F73;   /* accents, markers, icons, fills */
  --ink-teal:    #045C53;   /* teal TEXT + links on stone     */
  --bright-teal: #12A391;   /* emphasis on fills only         */

  /* structural secondary */
  --deep-ink:    #1F3A47;   /* dark sections, footer          */

  /* soft tint */
  --sage:        #C9DDD5;

  /* type */
  --font-heading: "Aptos", Arial, "Helvetica Neue", Helvetica, sans-serif;
  --font-body:    "Tenorite", Arial, "Helvetica Neue", Helvetica, sans-serif;

  /* form language — THE brand angle, measured from the logo's "A".
     Any vertical line in brand geometry adopts this exact inclination. */
  --lean:     -20.4deg;
  --lean-fix:  20.4deg;

  /* elevation — restrained */
  --shadow-sm: 0 1px 2px rgba(31, 58, 71, 0.06);
  --shadow-md: 0 4px 14px rgba(31, 58, 71, 0.08);

  --ease: cubic-bezier(0.2, 0, 0, 1);
}

/* ---------- BASE ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--charcoal);
  background: var(--stone);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
.wrap { max-width: 1140px; margin: 0 auto; padding: 0 32px; }
a { color: var(--ink-teal); text-decoration: none; transition: color .16s var(--ease); }
a:hover { color: var(--deep-teal); }
img { max-width: 100%; }

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 900;
  color: var(--charcoal-2);
  line-height: 1.15;
  letter-spacing: -.01em;
  margin: 0;
  text-wrap: balance;
}
p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

/* key phrases highlighted in teal bold (accessible teal-text token) */
.hl, strong.hl { color: var(--ink-teal); font-weight: 700; }

/* spaced eyebrow label */
.eyebrow {
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-teal);
  font-weight: 700;
}

/* thin teal connector line */
.teal-rule { height: 2px; background: var(--deep-teal); border: 0; }

/* skip link (a11y) */
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--white);
  color: var(--ink-teal); padding: 10px 16px; z-index: 100; }
.skip-link:focus { left: 0; }

/* ---------- HEADER ---------- */
.hdr {
  position: sticky; top: 0; z-index: 50;
  background: rgba(246, 243, 236, .92);
  backdrop-filter: saturate(1.1) blur(6px);
  border-bottom: 1px solid var(--hairline);
  transition: box-shadow .25s var(--ease);
}
.hdr.scrolled { box-shadow: 0 2px 14px rgba(31, 58, 71, .07); }
.hdr__in { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 24px; }
.hdr__logo { height: 26px; display: block; width: auto; }
.nav { display: flex; align-items: center; gap: 22px; }
.nav a { font-size: 14px; color: var(--charcoal); position: relative; padding-bottom: 4px; }
.nav a:hover { color: var(--ink-teal); }
/* journey marker: thin teal underline grows in on hover / active section */
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--deep-teal); transform: scaleX(0); transform-origin: left;
  transition: transform .25s var(--ease); }
.nav a:hover::after, .nav a.active::after { transform: scaleX(1); }
.nav a.active { color: var(--ink-teal); }
.hdr__right { display: flex; align-items: center; gap: 18px; }
.lang { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.lang a, .lang span { color: var(--muted); }
.lang a:hover { color: var(--ink-teal); }
.lang .lang--active { color: var(--charcoal-2); font-weight: 700; }
.lang .lang__sep { color: var(--hairline); }
.menu-btn { display: none; background: none; border: 0; cursor: pointer;
  color: var(--deep-teal); padding: 6px; }
.menu-btn svg { width: 26px; height: 26px; display: block; }
.menu-btn .icon-close { display: none; }
.menu-btn[aria-expanded="true"] .icon-menu { display: none; }
.menu-btn[aria-expanded="true"] .icon-close { display: block; }
.mobile-nav { display: none; }

/* the rising line tracks your progress along the page (JS sets scaleX) */
.progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--deep-teal); transform: scaleX(0); transform-origin: left;
  pointer-events: none; }

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-size: 14px; font-weight: 700;
  border-radius: 8px; padding: 11px 22px; cursor: pointer;
  border: 1.5px solid transparent;
  transition: all .16s var(--ease);
  position: relative; overflow: hidden;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--deep-teal); color: #fff; }
.btn--primary:hover { background: var(--ink-teal); color: #fff; }
/* a 20.4°-leaning sheen sweeps across primary buttons on hover */
.btn--primary::after { content: ""; position: absolute; top: -2px; bottom: -2px;
  width: 34%; left: -50%; background: rgba(255, 255, 255, .16);
  transform: skewX(var(--lean)); pointer-events: none;
  transition: transform .5s var(--ease); }
.btn--primary:hover::after { transform: skewX(var(--lean)) translateX(490%); }
.btn--secondary { background: #fff; color: var(--ink-teal); border-color: var(--deep-teal); }
.btn--secondary:hover { background: var(--sage); color: var(--ink-teal); }
.btn--lg { padding: 14px 28px; font-size: 15px; }
.btn svg { width: 18px; height: 18px; }

/* ---------- HERO ---------- */
.hero { background: var(--stone); position: relative; overflow: hidden; }
.hero__in { padding: 110px 0 150px; max-width: 760px; position: relative; z-index: 2; }
.hero h1 { font-size: 58px; line-height: 1.06; letter-spacing: -.015em; margin: 18px 0 0; }
.hero p { font-size: 19px; line-height: 1.55; max-width: 580px; margin: 22px 0 0; }
.hero__cta { display: flex; gap: 14px; margin-top: 36px; flex-wrap: wrap; }
/* the constructed "A" mark — two 20.4°-leaning parallelogram strokes,
   scalable CSS geometry (clip-paths encode the apex + inner triangle) */
.a-mark { position: relative; display: inline-block; width: 120px; aspect-ratio: 853 / 767; }
.a-mark > i { position: absolute; inset: 0; display: block; }
.a-mark .a-leg-r { background: var(--bright-teal); clip-path: polygon(33.9% 0, 66.2% 0, 96% 67.9%, 63.7% 67.9%); }
.a-mark .a-leg-l { background: var(--deep-teal);   clip-path: polygon(33.4% 0, 66.6% 0, 33.2% 100%, 0 100%); }
/* giant watermark bleeding off the hero's right edge
   (translate carries the JS parallax offset, independent of transform) */
.hero__mark { position: absolute; right: -70px; top: 50%; transform: translateY(-50%);
  translate: 0 var(--par, 0px);
  width: 512px; opacity: .14; pointer-events: none; z-index: 1; }

/* the growth shape: baseline → thick A-legs lifting through the apex →
   thin line continuing on the higher level. Same semi-transparent, two-tone
   treatment as the watermark A; leg slope = exactly the 20.4° lean. */
.growth { position: absolute; left: 0; bottom: 0; width: 100%; height: auto;
  display: block; z-index: 1; pointer-events: none; opacity: .28; }
.growth .ga-base, .growth .ga-left { fill: var(--deep-teal); }
.growth .ga-right, .growth .ga-line { fill: var(--bright-teal); }

/* hero entrance choreography (pure CSS — runs once on load) */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}
@keyframes mark-in {
  from { opacity: 0; }
  to   { opacity: .14; }
}
@keyframes growth-wipe {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
.js .hero .eyebrow   { animation: rise-in .7s var(--ease) .10s both; }
.js .hero h1         { animation: rise-in .8s var(--ease) .25s both; }
.js .hero__in > p    { animation: rise-in .8s var(--ease) .40s both; }
.js .hero__cta       { animation: rise-in .8s var(--ease) .55s both; }
.js .hero__mark      { animation: mark-in 1.5s var(--ease) .35s both; }
.js .growth          { animation: growth-wipe 1.9s cubic-bezier(.45, 0, .2, 1) .5s both; }

/* ---------- SECTION SHELL ---------- */
.section { padding: 96px 0; }
.section--white { background: var(--white); }
.section--dark { background: var(--deep-ink); }
.sec-head { max-width: 680px; margin-bottom: 52px; }
.sec-head h2 { font-size: 38px; margin: 12px 0 0; }
.sec-head p { font-size: 17px; line-height: 1.6; margin: 18px 0 0; }

/* ---------- SLANT FEATURE CARDS (Was wir tun) ---------- */
.feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.feat {
  transform: skewX(var(--lean));
  background: #fff; border: 1px solid var(--hairline);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .22s var(--ease), transform .22s var(--ease);
  margin: 0 22px;          /* room for the slanted corners */
}
.section--white .feat { background: var(--stone); }
.feat:hover { box-shadow: var(--shadow-md); transform: skewX(var(--lean)) translateY(-4px); }
.feat__in { transform: skewX(var(--lean-fix)); padding: 32px 28px 36px; }
.feat__ic { color: var(--deep-teal); width: 30px; height: 30px; }
.feat__ic svg { width: 30px; height: 30px; display: block; }
.feat h3 { font-size: 19px; margin: 18px 0 8px; }
.feat p { font-size: 15px; line-height: 1.55; margin: 0; }

/* ---------- STATS (Geschichte) ---------- */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; margin-bottom: 84px; }
.stat__n { font-family: var(--font-heading); font-weight: 900; color: var(--deep-teal);
  font-size: 56px; line-height: 1; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; }
.stat__l { font-size: 15px; color: var(--muted); margin-top: 12px; line-height: 1.45; }

/* ---------- TIMELINE — the ascending staircase ----------
   Each year sits one step (30px) higher than the last; the risers
   are 20.4°-leaning strokes, so the history itself climbs the
   brand angle from 2003 to today. Steps draw in sequence on scroll. */
.timeline { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; position: relative; }
.tl-item { position: relative; padding: 26px 18px 0 0; }
.tl-item:nth-child(1) { margin-top: 150px; }
.tl-item:nth-child(2) { margin-top: 120px; }
.tl-item:nth-child(3) { margin-top: 90px; }
.tl-item:nth-child(4) { margin-top: 60px; }
.tl-item:nth-child(5) { margin-top: 30px; }
.tl-item:nth-child(6) { margin-top: 0; }
/* step tread */
.tl-item::before { content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 2px; background: var(--hairline);
  transform-origin: left; }
.tl-item:last-child::before { background: var(--deep-teal); }
/* leaning riser dropping to the previous (lower) step */
.tl-item + .tl-item::after { content: ""; position: absolute; top: 0; left: -1px;
  width: 3px; height: 30px; background: var(--deep-teal);
  transform: skewX(var(--lean)); transform-origin: top left; }
.tl-item__y { font-family: var(--font-heading); font-weight: 900;
  color: var(--ink-teal); font-size: 17px; }
.tl-item__t { font-size: 14px; line-height: 1.45; color: var(--charcoal); margin-top: 6px; }

/* staircase choreography: treads grow, risers drop, labels rise — in year order */
.js .timeline.reveal .tl-item::before { transform: scaleX(0);
  transition: transform .5s var(--ease); }
.js .timeline.reveal .tl-item + .tl-item::after { transform: skewX(var(--lean)) scaleY(0);
  transition: transform .3s var(--ease); }
.js .timeline.reveal .tl-item__y,
.js .timeline.reveal .tl-item__t { opacity: 0; transform: translateY(12px);
  transition: opacity .5s var(--ease), transform .5s var(--ease); }
.js .timeline.reveal.in .tl-item::before { transform: scaleX(1); }
.js .timeline.reveal.in .tl-item + .tl-item::after { transform: skewX(var(--lean)) scaleY(1); }
.js .timeline.reveal.in .tl-item__y,
.js .timeline.reveal.in .tl-item__t { opacity: 1; transform: none; }
.js .timeline.reveal.in .tl-item:nth-child(1)::before { transition-delay: .05s; }
.js .timeline.reveal.in .tl-item:nth-child(2)::after  { transition-delay: .50s; }
.js .timeline.reveal.in .tl-item:nth-child(2)::before { transition-delay: .62s; }
.js .timeline.reveal.in .tl-item:nth-child(3)::after  { transition-delay: .95s; }
.js .timeline.reveal.in .tl-item:nth-child(3)::before { transition-delay: 1.07s; }
.js .timeline.reveal.in .tl-item:nth-child(4)::after  { transition-delay: 1.40s; }
.js .timeline.reveal.in .tl-item:nth-child(4)::before { transition-delay: 1.52s; }
.js .timeline.reveal.in .tl-item:nth-child(5)::after  { transition-delay: 1.85s; }
.js .timeline.reveal.in .tl-item:nth-child(5)::before { transition-delay: 1.97s; }
.js .timeline.reveal.in .tl-item:nth-child(6)::after  { transition-delay: 2.30s; }
.js .timeline.reveal.in .tl-item:nth-child(6)::before { transition-delay: 2.42s; }
.js .timeline.reveal.in .tl-item:nth-child(1) .tl-item__y,
.js .timeline.reveal.in .tl-item:nth-child(1) .tl-item__t { transition-delay: .15s; }
.js .timeline.reveal.in .tl-item:nth-child(2) .tl-item__y,
.js .timeline.reveal.in .tl-item:nth-child(2) .tl-item__t { transition-delay: .72s; }
.js .timeline.reveal.in .tl-item:nth-child(3) .tl-item__y,
.js .timeline.reveal.in .tl-item:nth-child(3) .tl-item__t { transition-delay: 1.17s; }
.js .timeline.reveal.in .tl-item:nth-child(4) .tl-item__y,
.js .timeline.reveal.in .tl-item:nth-child(4) .tl-item__t { transition-delay: 1.62s; }
.js .timeline.reveal.in .tl-item:nth-child(5) .tl-item__y,
.js .timeline.reveal.in .tl-item:nth-child(5) .tl-item__t { transition-delay: 2.07s; }
.js .timeline.reveal.in .tl-item:nth-child(6) .tl-item__y,
.js .timeline.reveal.in .tl-item:nth-child(6) .tl-item__t { transition-delay: 2.52s; }

/* ---------- COMPANY ACCORDION CARDS ---------- */
.co-list { display: grid; gap: 18px; }
.co {
  background: #fff; border: 1px solid var(--hairline); border-radius: 8px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .22s var(--ease), transform .22s var(--ease);
}
.co:hover { box-shadow: var(--shadow-md); }
.co__head {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center;
  width: 100%; gap: 18px; padding: 24px 28px;
  background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--font-body);
}
/* BU logo chip in the card header */
.co__logo { height: 32px; width: auto; max-width: 140px; object-fit: contain;
  justify-self: end; }
.co__title { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
/* leaning tick before the company name — grows when the card opens */
.co__tick { display: inline-block; width: 5px; height: 18px; background: var(--deep-teal);
  transform: skewX(var(--lean)); flex: none; align-self: center;
  transition: height .25s var(--ease), background .25s var(--ease); }
.co:hover .co__tick, .co.open .co__tick { height: 24px; background: var(--bright-teal); }
.co__name { font-family: var(--font-heading); font-weight: 900;
  color: var(--charcoal-2); font-size: 20px; }
.co__meta { font-size: 14px; color: var(--muted); }
.co__meta span + span::before { content: "·"; margin: 0 8px; color: var(--hairline); }
.co__chev { color: var(--deep-teal); transition: transform .25s var(--ease); flex: none; }
.co__chev svg { width: 22px; height: 22px; display: block; }
.co.open .co__chev { transform: rotate(180deg); }
/* smooth fold-out (grid-rows animation; inner wrapper clips) */
.co__body { display: grid; grid-template-rows: 0fr; padding: 0 28px;
  transition: grid-template-rows .38s var(--ease); }
.co__bin { overflow: hidden; min-height: 0; }
.co__bin > :last-child { margin-bottom: 28px; }
.co.open .co__body { grid-template-rows: 1fr; }
.co__body p { font-size: 15.5px; line-height: 1.6; }

/* ---------- SZENARIEN (Zusammenarbeit) ----------
   White cards on stone. Each carries a big Aptos numeral and a
   20.4°-leaning teal rule — the brand angle without repeating the
   slant of the «Was wir tun» cards. */
.scn-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.scn {
  background: #fff; border: 1px solid var(--hairline); border-radius: 8px;
  box-shadow: var(--shadow-sm); padding: 34px 30px 36px;
  transition: box-shadow .22s var(--ease), transform .22s var(--ease);
}
.scn:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.scn__n { font-family: var(--font-heading); font-weight: 900; font-size: 30px;
  line-height: 1; color: var(--deep-teal); letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; }
.scn__line { height: 3px; width: 46px; background: var(--deep-teal);
  transform: skewX(var(--lean)); transform-origin: left; margin: 16px 0 18px; }
.scn h3 { font-size: 20px; margin: 0 0 10px; }
.scn p { font-size: 15px; line-height: 1.6; margin: 0; }
/* the leaning rule draws in when the block arrives */
.js .scn.reveal .scn__line { transform: skewX(var(--lean)) scaleX(0);
  transition: transform .7s var(--ease) .2s; }
.js .scn.reveal.in .scn__line { transform: skewX(var(--lean)) scaleX(1); }

/* ---------- OPERATIVE WERTSCHÖPFUNG (value-creation levers) ----------
   Open columns (no card box) with a monoline teal icon and a
   20.4°-leaning rule — a third idiom, distinct from the slant cards
   and the numbered Szenarien cards. */
.lever-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 48px; }
.lever__ic { color: var(--deep-teal); width: 30px; height: 30px; }
.lever__ic svg { width: 30px; height: 30px; display: block; }
.lever__line { height: 3px; width: 46px; background: var(--deep-teal);
  transform: skewX(var(--lean)); transform-origin: left; margin: 18px 0 16px; }
.lever h3 { font-size: 19px; margin: 0; }
.lever p { font-size: 15px; line-height: 1.6; margin: 10px 0 0; color: var(--charcoal); }
.js .lever.reveal .lever__line { transform: skewX(var(--lean)) scaleX(0);
  transition: transform .7s var(--ease) .2s; }
.js .lever.reveal.in .lever__line { transform: skewX(var(--lean)) scaleX(1); }

/* ---------- DARK SECTION (Warum wir) ---------- */
.section--dark { position: relative; overflow: hidden; }
.section--dark .wrap { position: relative; z-index: 2; }
.section--dark .eyebrow { color: var(--bright-teal); }
.section--dark .sec-head h2 { color: #fff; }
.section--dark .sec-head p { color: rgba(255, 255, 255, .82); }
.why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 44px 56px; }
.why__line { height: 2px; background: var(--bright-teal); width: 56px; margin-bottom: 18px; }
.why h3 { color: #fff; font-size: 19px; margin: 0 0 10px; }
.why p { color: rgba(255, 255, 255, .82); font-size: 15.5px; line-height: 1.6; margin: 0; }

/* drifting brand chevrons — quiet depth behind the dark section */
.chev { position: absolute; aspect-ratio: 205 / 313; pointer-events: none; z-index: 1; }
.chev > i { position: absolute; inset: 0; display: block; }
.chev .chev-u { background: var(--deep-teal);
  clip-path: polygon(0 0, 36% 0, 100% 50%, 64% 50%); }
.chev .chev-d { background: var(--bright-teal);
  clip-path: polygon(64% 50%, 100% 50%, 36% 100%, 0 100%); }
.chev--1 { width: 300px; right: 4%; top: -60px; opacity: .10; }
.chev--2 { width: 170px; left: -56px; bottom: -40px; opacity: .08; }
@keyframes chev-drift {
  from { transform: translateY(-12px); }
  to   { transform: translateY(14px); }
}
.js .chev--1 { animation: chev-drift 22s ease-in-out infinite alternate; }
.js .chev--2 { animation: chev-drift 28s ease-in-out infinite alternate-reverse; }

/* ---------- VALUES ---------- */
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.value { padding: 0 32px; }
.value:first-child { padding-left: 0; }
.value:last-child { padding-right: 0; }
.value__line { height: 2px; background: var(--deep-teal); margin-bottom: 18px; }
.value h3 { font-size: 19px; margin: 0 0 10px; }
.value p { font-size: 15px; line-height: 1.6; margin: 0; }

/* ---------- ABOUT ---------- */
.about { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; }
.about .sec-head { margin-bottom: 0; }
.about__photo { display: block; width: 100%; height: auto; margin-top: 28px; border-radius: 8px; }
.about__text p { font-size: 16.5px; line-height: 1.65; }

/* ---------- CONTACT ---------- */
.contact__in { max-width: 640px; }
.contact__cta { display: flex; gap: 14px; margin-top: 32px; flex-wrap: wrap; }

/* ---------- FOOTER (deep ink, reversed logo) ---------- */
.ftr { background: var(--deep-ink); padding: 64px 0 44px; color: rgba(255, 255, 255, .82); }
.ftr__top { display: flex; justify-content: space-between; align-items: flex-start;
  gap: 40px; flex-wrap: wrap; }
.ftr__logo { height: 24px; width: auto; display: block; }
.ftr__tag { color: rgba(255, 255, 255, .66); font-size: 14px; margin-top: 18px;
  max-width: 340px; line-height: 1.55; }
.ftr__cols { display: flex; gap: 64px; flex-wrap: wrap; }
.ftr__col h4 { font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--bright-teal); margin: 0 0 14px; font-family: var(--font-body); font-weight: 700; }
.ftr__col a { display: block; font-size: 14px; color: rgba(255, 255, 255, .82); margin-bottom: 10px; }
.ftr__col a:hover { color: #fff; }
.ftr__rule { height: 2px; background: var(--bright-teal); width: 56px; margin: 46px 0 24px; border: 0; }
.ftr__legal { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  color: rgba(255, 255, 255, .55); font-size: 13px; }
.ftr__legal a { color: rgba(255, 255, 255, .66); }
.ftr__legal a:hover { color: #fff; }

/* ---------- LEGAL PAGES ---------- */
.legal { padding: 72px 0 96px; max-width: 820px; }
.legal h1 { font-size: 38px; margin-bottom: 36px; }
.legal h2 { font-size: 22px; margin: 40px 0 14px; }
.legal h3 { font-size: 17px; margin: 28px 0 10px; }
.legal p, .legal li { font-size: 15.5px; line-height: 1.65; }
.legal ul { padding-left: 22px; margin: 0 0 1em; }

/* ---------- SCROLL REVEALS (scoped to .js so no-JS users see everything) ---------- */
.js .reveal { opacity: 0; transform: translateY(28px);
  transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
/* grid stagger via data-d step */
.js .reveal[data-d="1"] { transition-delay: .12s; }
.js .reveal[data-d="2"] { transition-delay: .24s; }
.js .reveal[data-d="3"] { transition-delay: .36s; }
/* slant cards roll down from above and settle into the exact brand angle */
.js .feat.reveal { opacity: 0; transform: skewX(calc(var(--lean) * 1.6)) translateY(-44px); }
.js .feat.reveal.in { opacity: 1; transform: skewX(var(--lean)); }
.js .feat.reveal.in:hover { transform: skewX(var(--lean)) translateY(-4px); }
/* the timeline container reveals via its own choreography, not the base lift */
.js .timeline.reveal { opacity: 1; transform: none; }
/* accent lines grow when their block arrives */
.js .why.reveal .why__line { width: 0; transition: width .7s var(--ease) .25s; }
.js .why.reveal.in .why__line { width: 56px; }
.js .value.reveal .value__line { transform: scaleX(0); transform-origin: left;
  transition: transform .8s var(--ease) .2s; }
.js .value.reveal.in .value__line { transform: scaleX(1); }

/* ---------- MOTION SAFETY (reduced-motion: everything static, nothing hidden) ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .js .reveal, .js .timeline.reveal { opacity: 1; transform: none; }
  .js .feat.reveal, .js .feat.reveal.in { opacity: 1; transform: skewX(var(--lean)); }
  .js .hero .eyebrow, .js .hero h1, .js .hero__in > p, .js .hero__cta { opacity: 1; transform: none; }
  .js .hero__mark { opacity: .14; }
  .js .growth { clip-path: none; }
  .js .timeline.reveal .tl-item::before { transform: scaleX(1); }
  .js .timeline.reveal .tl-item + .tl-item::after { transform: skewX(var(--lean)) scaleY(1); }
  .js .timeline.reveal .tl-item__y, .js .timeline.reveal .tl-item__t { opacity: 1; transform: none; }
  .js .why.reveal .why__line { width: 56px; }
  .js .value.reveal .value__line { transform: scaleX(1); }
}

/* ---------- MOBILE ---------- */
@media (max-width: 920px) {
  .nav, .hdr__right .btn { display: none; }
  .menu-btn { display: inline-flex; }
  .mobile-nav.open { display: block; background: var(--stone);
    border-top: 1px solid var(--hairline); padding: 12px 0 16px; }
  .mobile-nav a { display: block; padding: 12px 32px; font-size: 16px; color: var(--charcoal); }
  .mobile-nav .lang { padding: 14px 32px 4px; }

  .hero__in { padding: 72px 0 96px; }
  .hero h1 { font-size: 38px; }
  .hero p { font-size: 17px; }
  .hero__mark { opacity: .08; width: 340px; right: -90px; }
  .js .hero__mark { animation-name: mark-in-m; }
  @keyframes mark-in-m { from { opacity: 0; } to { opacity: .08; } }

  .section { padding: 64px 0; }
  .sec-head h2 { font-size: 30px; }

  .feat-grid { grid-template-columns: 1fr; gap: 20px; }
  .feat { margin: 0 10px; }

  .scn-grid { grid-template-columns: 1fr; gap: 18px; }
  .lever-grid { grid-template-columns: 1fr; gap: 32px; }

  .stats { grid-template-columns: 1fr; gap: 28px; margin-bottom: 52px; }

  /* timeline: back to a calm vertical line with leaning year ticks */
  .timeline { grid-template-columns: 1fr; gap: 0; }
  .timeline::before { content: ""; position: absolute; top: 0; bottom: 0; left: 6px;
    width: 2px; background: var(--hairline); }
  .tl-item { padding: 0 0 26px 30px; margin-top: 0 !important; }
  .tl-item::before { content: ""; position: absolute; top: 4px; left: 0;
    width: 4px; height: 14px; right: auto; background: var(--deep-teal);
    transform: skewX(var(--lean)); }
  .tl-item + .tl-item::after { content: none; }
  .js .timeline.reveal .tl-item::before { transform: skewX(var(--lean)) scaleX(1); }
  .js .timeline.reveal.in .tl-item::before { transform: skewX(var(--lean)); }

  .co__head { padding: 18px 20px; grid-template-columns: 1fr auto; }
  .co__logo { display: none; }
  .co__body { padding: 0 20px; }
  .co__bin > :last-child { margin-bottom: 22px; }
  .co__name { font-size: 18px; }

  .why-grid { grid-template-columns: 1fr; gap: 32px; }
  .chev--1 { width: 200px; right: -40px; }
  .values { grid-template-columns: 1fr; gap: 32px; }
  .value { padding: 0; }
  .about { grid-template-columns: 1fr; gap: 36px; }
}