/*
Theme Name: Rathi Group
Theme URI: https://www.rathigroupindia.com
Author: Brew Labs Media
Description: Custom theme for Rathi Group India — a sustainability-led circular materials platform. Black, graphite and white base with restrained gold identity marks; deep green reserved for sustainability proof points, per the client brand brief.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
License: Proprietary
Text Domain: rathi
*/

/* ═══════════════════════════════════════════════════════════
   PALETTE — from the client brief:
   "Black, graphite, white and restrained gold aligned with the
    Rathi identity."
   "Use deep green selectively for links, proof points and
    sustainability sections; do not make the website
    predominantly green."
   Neutrals are true neutrals — no blue cast.
   ═══════════════════════════════════════════════════════════ */

:root{
  --black:#0B0B0C;
  --graphite:#1B1D1F;
  --graphite-2:#33363A;
  --ink:#16181A;
  --muted:#6B7076;        /* 4.99:1 on white — AA for body text */
  --faint:#8E9298;        /* decorative only, never body copy */
  --line:#E3E3E5;
  --line-2:#EFEFF1;
  --paper:#FFFFFF;
  --paper-2:#F7F7F8;

  --gold:#9C7C33;         /* rules, marks, large numerals */
  --gold-ink:#8A6D2A;     /* 4.88:1 — safe for small text */
  --gold-wash:#FBF8F0;

  --green:#1A6B4A;        /* 6.47:1 — sustainability proof points only */
  --green-wash:#F1F7F4;

  --err:#9C3524;
  --err-wash:#FBEEEA;
  --ok:#1A6B4A;

  --wrap:1140px;
  --gutter:48px;
  --header-h:65px;   /* 64px bar + 1px border — the hero subtracts this */
}

/* .tint sections were a light-grey band (--paper-2) alternating with the
   white base — pushed to a proper dark panel here instead, on request.
   Redefining the tokens locally (rather than just the background) means
   every child rule that already reads var(--ink)/var(--muted)/var(--line)/
   var(--gold) etc. flips to its on-dark equivalent automatically, with no
   separate dark-mode copy of every component rule to maintain. Same values
   as already proven on the holding page. */
.sec.tint{
  /* --paper-2 is this section's own band colour (the darkest of the two).
     --paper is what cards/tables floating inside it use — kept a step
     lighter so they still visibly lift off the band, the same relationship
     the light theme has (white cards on a light-grey band). Getting this
     backwards would make cards recede into the section instead of popping
     off it. */
  --paper:#1B1D1F;
  --paper-2:#0E0F10;
  --ink:#F2F2F0;
  --muted:#9A9C9F;        /* ~6.4:1 on this section's background */
  --faint:#6E7276;
  --line:rgba(255,255,255,.12);
  --line-2:rgba(255,255,255,.07);
  --gold:#B08D3F;         /* brightened — the white-tuned #9C7C33 is too dim on dark */
  --gold-ink:#C9A24A;
  --gold-wash:rgba(176,141,63,.12);
  --green:#4FA97D;
  --green-wash:rgba(79,169,125,.12);
  --err:#E08A76;
  --err-wash:rgba(224,138,118,.12);
  --ok:#4FA97D;
  /* background comes from the existing .sec.tint{background:var(--paper-2)}
     rule further down, which already resolves to the dark value redefined
     above through normal custom-property scoping.

     color:var(--ink) is repeated here deliberately, even though body
     already sets color:var(--ink). Custom properties re-resolve per scope,
     but a plain `color` declaration does not — body's color is computed
     ONCE at the body element (against the root --ink) and that fixed value
     is what descendants inherit, even ones sitting inside a section that
     redefines --ink. Headings and any other element with no color rule of
     its own would otherwise inherit body's light-theme colour verbatim and
     stay dark-on-dark. Setting color again here, inside the scope where
     --ink has already been redefined, gives this subtree a fresh value to
     inherit from. */
  color:var(--ink);
}
/* The one thing that does NOT auto-flip: .btn-solid hardcodes a graphite
   background, which is correct on the white base but would sit almost flush
   with a now-dark .tint panel. Swap it to a light surface only inside .tint. */
.sec.tint .btn-solid{background:var(--ink);color:var(--black)}
.sec.tint .btn-solid:hover{background:#fff}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Helvetica,Arial,sans-serif;
  background:var(--paper);
  color:var(--ink);
  line-height:1.6;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Mobile previously carried a procedural marble texture in the light
   sections as a phone-only flourish. Removed on request — mobile now
   matches desktop exactly: flat white, no texture, same base palette. */

/* Preloader.
   Shown only for the brief instant before the page is ready, then removed
   from layout entirely (not just hidden) so it can never trap a visitor or
   interfere with scrolling if something goes wrong. main.js clears it on
   window 'load' with a hard fallback timeout; body.preload-done is the
   single source of truth for whether it should be visible. */
.preloader{
  position:fixed;inset:0;z-index:200;
  background:#0a0a0b;
  display:flex;align-items:center;justify-content:center;
  transition:opacity .5s ease;
  /* CSS-only fallback: fades and unblocks itself even if JS never runs at
     all, so a script error or a no-JS visitor can never be stuck behind it.
     main.js normally removes it sooner, on window 'load'. */
  animation:preloaderFallback 0s linear 2.2s forwards;
}
.preloader img{width:min(220px,50vw);height:auto;display:block;opacity:0;animation:preloaderIn .6s ease .1s forwards}
@keyframes preloaderIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
@keyframes preloaderFallback{to{opacity:0;pointer-events:none}}

body.preload-done .preloader{opacity:0;pointer-events:none}
/* Fully removed from the DOM after the fade, via main.js. */
body.preload-removed .preloader{display:none}

@media(prefers-reduced-motion:reduce){
  .preloader{transition:none}
  .preloader img{animation:none;opacity:1}
}

img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit}

:focus-visible{outline:2.5px solid var(--gold);outline-offset:3px;border-radius:2px}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:9999;
  background:var(--graphite);color:#fff;padding:12px 20px;
  font-size:.85rem;font-weight:700;
}
.skip-link:focus{left:8px;top:8px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.narrow{max-width:760px}

/* ═══════════ TYPE ═══════════ */
h1,h2,h3,h4{letter-spacing:-.035em;line-height:1.1;text-wrap:balance}
h1{font-size:clamp(2.2rem,5vw,3.4rem);font-weight:900}
h2{font-size:clamp(2rem,4.4vw,3.15rem);font-weight:900;letter-spacing:-.04em;line-height:1.08}
h3{font-size:1.14rem;font-weight:800;letter-spacing:-.02em}
h4{font-size:.98rem;font-weight:800}

.lede{font-size:1.02rem;color:var(--muted);line-height:1.8}
.lede-lg{font-size:1.12rem;color:var(--muted);line-height:1.75}

/* index marks — gold is the Rathi identity signal */
.index{display:flex;align-items:center;gap:14px;margin-bottom:26px}
.index .num{
  font-size:.72rem;font-weight:800;color:var(--gold-ink);
  letter-spacing:.14em;font-variant-numeric:tabular-nums;
}
.index .bar{flex:0 0 34px;height:1px;background:var(--gold)}
.index .txt{
  font-size:.68rem;font-weight:700;letter-spacing:.19em;
  text-transform:uppercase;color:var(--muted);
}
.index.center{justify-content:center}
/* green variant — sustainability proof points only */
.index.proof .num,.index.proof .txt{color:var(--green)}
.index.proof .bar{background:var(--green)}

/* ═══════════ HEADER ═══════════ */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter);
  height:64px;display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.brand{display:flex;flex-direction:column;gap:6px;text-decoration:none;flex:none}
.brand-art{position:relative;display:block;line-height:0}
.brand-mark{height:32px;width:auto;display:block}
.brand .rule{width:34px;height:1px;background:var(--gold)}

/* Header logo sweep — the same continuous highlight built for the holding
   page, ported here. Masked to the logo's own alpha (not a plain rectangle)
   so the light rakes across the actual letterforms. */
.brand-sheen{
  position:absolute;inset:0;pointer-events:none;
  -webkit-mask-image:url(assets/img/logo.png);
          mask-image:url(assets/img/logo.png);
  -webkit-mask-size:contain;  mask-size:contain;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:left center; mask-position:left center;
  background:linear-gradient(100deg,
    transparent 38%,
    rgba(255,244,214,.75) 47%,
    #ffffff 50%,
    rgba(255,244,214,.75) 53%,
    transparent 62%);
  background-size:260% 100%;
  background-position:210% 0;
  animation:brand-sweep 4s linear infinite;
}
/* Linear rather than eased: an eased curve decelerates at the end and reads
   as the highlight stalling partway across. Holds off-screen briefly at each
   end so it gleams once per cycle rather than strobing continuously. */
@keyframes brand-sweep{
  0%   {background-position:210% 0}
  55%  {background-position:-70% 0}
  100% {background-position:-70% 0}
}
@media(prefers-reduced-motion:reduce){
  .brand-sheen{animation:none;background-position:-70% 0}
}

.nav{display:flex;align-items:center;gap:28px}
.nav a{
  font-size:.85rem;font-weight:600;text-decoration:none;color:var(--ink);
  padding:6px 0;border-bottom:1.5px solid transparent;
  transition:color .2s,border-color .2s;
}
.nav a:hover{color:var(--gold-ink)}
.nav a[aria-current="page"]{border-bottom-color:var(--gold);color:var(--gold-ink)}

.nav-toggle{
  display:none;background:none;border:1px solid var(--line);
  border-radius:4px;padding:8px 12px;cursor:pointer;
  font-size:.78rem;font-weight:700;
}

/* ═══════════ BUTTONS ═══════════ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-size:.88rem;font-weight:700;letter-spacing:-.01em;
  padding:15px 30px;border-radius:4px;text-decoration:none;cursor:pointer;
  border:1.5px solid transparent;
  transition:background .22s,color .22s,border-color .22s,transform .22s;
}
.btn-solid{background:var(--graphite);color:#fff}
.btn-solid:hover{background:var(--black);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold-ink);transform:translateY(-2px)}
.btn-green{background:var(--green);color:#fff}
.btn-green:hover{background:#14563B;transform:translateY(-2px)}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}

.ctas{display:flex;gap:12px;flex-wrap:wrap}
.ctas.center{justify-content:center}

/* ═══════════ PAGE HERO (inner pages) ═══════════ */
.page-hero{padding:88px 0 72px;background:var(--paper);border-bottom:1px solid var(--line)}
.page-hero .lede-lg{max-width:64ch}
.page-hero h1{margin-bottom:20px}

/* ═══════════ HOMEPAGE HERO ═══════════
   Full-bleed photo + scrim, normal document flow — no scroll-lock, no
   hijacked interaction. Replaces the earlier expanding-panel hero: same
   "real plant photography + bold statement" impact, but a visitor can
   simply scroll past it like every other page's hero. */
.hero-main{
  position:relative;min-height:82vh;display:flex;align-items:flex-end;
  background-size:cover;background-position:center;overflow:hidden;isolation:isolate;
}
.hero-main::before{
  content:'';position:absolute;inset:0;z-index:0;
  background:linear-gradient(180deg,
    rgba(8,9,10,.35) 0%,
    rgba(8,9,10,.5) 40%,
    rgba(8,9,10,.88) 100%);
}
.hero-main .tick{
  position:absolute;z-index:1;width:14px;height:14px;
  border-color:rgba(156,124,51,.85);border-style:solid;border-width:0;
}
.hero-main .tick.tl{top:28px;left:var(--gutter);border-top-width:1px;border-left-width:1px}
.hero-main .tick.br{bottom:28px;right:var(--gutter);border-bottom-width:1px;border-right-width:1px}

.hero-main-inner{position:relative;z-index:1;width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter) 64px}
.hero-main .index .txt{color:rgba(255,255,255,.85)}
.hero-main .index .bar{background:var(--gold)}
.hero-main h1{color:#fff;max-width:18ch;margin:18px 0 22px}
.hero-main .lede-lg{color:rgba(255,255,255,.82);max-width:58ch;margin-bottom:36px}
.hero-main .btn-ghost{color:#fff;border-color:rgba(255,255,255,.4)}
.hero-main .btn-ghost:hover{color:var(--gold-wash);border-color:var(--gold)}

.hero-main .stats{
  margin:0;max-width:none;display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid rgba(255,255,255,.18);padding-top:28px;
}
.hero-main .stat{border-right-color:rgba(255,255,255,.18);text-align:left;padding:0 18px 0 0}
.hero-main .stat .tick{position:static;width:20px;height:1px;border:none;background:var(--gold);margin:0 0 14px}
.hero-main .stat-n{color:#fff}
.hero-main .stat-l{color:rgba(255,255,255,.62)}
.hero-main .stat.proof .stat-n{color:var(--green)}

@media(max-width:760px){
  .hero-main{min-height:none;padding-top:120px}
  .hero-main h1{max-width:none;font-size:2.4rem}
  .hero-main .stats{grid-template-columns:repeat(2,1fr);gap:28px 0}
  .hero-main .stat{border-right:none;text-align:left}
}

/* ═══════════ SECTIONS ═══════════ */
.sec{padding:112px 0;border-top:1px solid var(--line)}
.sec:first-of-type{border-top:none}
.sec.tint{background:var(--paper-2)}
.sec.center{text-align:center}
.sec.center .lede{max-width:58ch;margin-inline:auto}
.sec-head{margin-bottom:56px}
.sec.center .sec-head{margin-inline:auto;max-width:760px}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);max-width:740px;margin:0 auto;align-items:start}
/* A 3-item stat row still used the 4-column template, leaving a phantom
   empty 4th column — the box itself stayed centered on the page, but with
   content only filling 3 of 4 tracks, the visible stats clustered toward
   the left instead of centring as a group. */
.stats.cols-3{grid-template-columns:repeat(3,1fr);max-width:560px}
.stat{padding:0 18px;border-right:1px solid var(--line);text-align:center}
.stat:last-child{border-right:none}
.stat .tick{width:20px;height:1px;background:var(--gold);margin:0 auto 14px}
.stat-n{font-size:1.9rem;font-weight:900;letter-spacing:-.05em;line-height:1;margin-bottom:9px}
.stat-l{font-size:.62rem;font-weight:700;color:var(--muted);letter-spacing:.12em;text-transform:uppercase;line-height:1.5}
.stat.proof .stat-n{color:var(--green)}
.stat.proof .tick{background:var(--green)}

/* card grid */
/* Divider lines come from a ring around each cell rather than from the grid's
   own background showing through the gaps. With the background trick, a row
   that does not fill its last column leaves a solid grey block — visible on
   any grid whose item count is not a multiple of the column count. */
.grid{
  display:grid;gap:1px;background:var(--paper);
  border:1px solid var(--line);border-radius:4px;overflow:hidden;
}
.leadership-photo{
  margin:0 0 40px;border-radius:4px;overflow:hidden;border:1px solid var(--line);
}
.leadership-photo img{
  /* Matches the source crop's own ratio, so object-fit has nothing left to
     crop at any viewport width — a fixed pixel height here previously meant
     a wider browser window forced a taller effective source slice than a
     narrower one, tightening the crop unpredictably and clipping heads on
     wide screens that a narrower test viewport never caught. */
  width:100%;aspect-ratio:2400/1247;height:auto;object-fit:cover;object-position:center top;display:block;
}
@media(max-width:560px){
  /* Phones: the wide crop would otherwise squeeze both men very small.
     Taller ratio brings them back to a readable size. */
  .leadership-photo img{aspect-ratio:4/3}
}
.leadership-photo figcaption{
  padding:12px 18px;font-size:.72rem;color:var(--muted);
  background:var(--paper);border-top:1px solid var(--line);
}

.entity-photo{border-radius:4px;overflow:hidden;border:1px solid var(--line)}
.entity-photo img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.entity-photo figcaption{
  padding:10px 16px;font-size:.72rem;font-weight:700;color:var(--ink);
  background:var(--paper);border-top:1px solid var(--line);
}

.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

/* .balanced: for an item count that isn't a multiple of the column count
   (e.g. 5 cards in a 3-column grid), a plain CSS grid leaves a dangling
   empty cell in the last row. Flex-wrap with centered rows means the
   leftover cards centre themselves instead. Each .cell already draws its
   own border via box-shadow, so nothing is lost switching from grid. */
.grid.balanced{display:flex;flex-wrap:wrap;justify-content:center}
.grid.balanced > *{flex:1 1 300px}
.grid-3.balanced > *{max-width:calc(33.333% - 1px)}
.grid-4.balanced > *{max-width:calc(25% - 1px)}

.cell{background:var(--paper);padding:34px 28px;box-shadow:0 0 0 1px var(--line)}
.cell .rule{width:24px;height:2px;background:var(--gold);margin-bottom:18px}
.cell.proof .rule{background:var(--green)}
.cell h3{margin-bottom:10px}
.cell p{font-size:.86rem;color:var(--muted);line-height:1.7}

/* split media/text */
.split{display:grid;grid-template-columns:1fr 1fr;gap:76px;align-items:center}
.split.flip .split-media{order:2}
/* Grid items default to min-width:auto, so a wide child (the grade/spec
   table, min-width:520px) can force this column past the viewport on
   mobile even though .table-wrap already scrolls internally. Letting the
   column shrink below its content's natural size hands overflow handling
   back to that wrapper, where it belongs. */
.split > *{min-width:0}
.split-media{
  aspect-ratio:4/3;border-radius:4px;overflow:hidden;position:relative;
  border:1px solid var(--line);background-size:cover;background-position:center;
}
.split-media .cap{
  position:absolute;left:18px;bottom:15px;font-size:.58rem;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.62);
}
.split-media .tick{
  position:absolute;top:12px;left:12px;width:10px;height:10px;
  border-top:1px solid rgba(156,124,51,.9);border-left:1px solid rgba(156,124,51,.9);
}

/* ── Material studies ──
   Procedural SVG textures (turbulence + lighting filters) standing in for
   photography. Drawn rather than sourced, so there is no licence to clear and
   no risk of showing another company's plant. Each carries a flat gradient
   fallback underneath in case the SVG fails to load.
   These are placeholders: swap for real plant photography before launch. */
.m-carbon,.m-oil,.m-poly,.m-steel{
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
}
.m-carbon{
  background-color:#0f1113;
  background-image:url(assets/img/carbon.svg);
}
.m-oil{
  background-color:#15110b;
  background-image:url(assets/img/oil.svg);
}
.m-poly{
  background-color:#151b21;
  background-image:url(assets/img/polymer.svg);
}
.m-steel{
  background-color:#3c4044;
  background-image:url(assets/img/steel.svg);
}

/* A hairline inner edge stops the darker panels bleeding into the page */
.split-media.m-carbon::after,
.split-media.m-oil::after,
.split-media.m-poly::after,
.split-media.m-steel::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}

/* spec table */
.spec{list-style:none;margin-top:28px;border-top:1px solid var(--gold)}
.spec li{
  display:flex;justify-content:space-between;gap:22px;
  padding:11px 0;border-bottom:1px solid var(--line);font-size:.82rem;
}
.spec .k{color:var(--muted);font-weight:600}
.spec .v{color:var(--ink);font-weight:700;text-align:right}

.tag{
  display:inline-block;margin-top:24px;font-size:.64rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;padding:8px 14px;border-radius:3px;
  color:var(--green);background:var(--green-wash);
}
.tag.dev{color:var(--gold-ink);background:var(--gold-wash)}
.tag.inline{margin-top:0;padding:6px 12px;white-space:nowrap}

/* bullet list */
ul.marks{list-style:none;display:grid;gap:7px}
ul.marks li{font-size:.92rem;color:var(--muted);padding-left:17px;position:relative}
ul.marks li::before{content:'';position:absolute;left:0;top:.66em;width:7px;height:1px;background:var(--gold)}

/* process pathways — each input has its own named process and its own
   output(s), shown as three self-contained rows rather than one shared
   funnel. Steel & Metals legitimately appears under two rows (tyre wire +
   metal scrap both feed it), everything else is one-to-one. Each row is a
   .rise element for its entrance; the inner steps stagger via transition-
   delay keyed off the row's own .in class, so nothing beyond the existing
   reveal observer in main.js is needed. */
.pathways{position:relative;display:flex;flex-direction:column;gap:56px;max-width:1100px;margin:0 auto}

/* Connects the two "Recovered steel & metals" output cards (one from the
   Tyre Pyrolysis row, one from Metal Preparation) with an actual drawn
   line, since those two are the one genuine merge point on the page.
   Position is computed in JS (main.js) because the cards' heights vary
   with content/viewport width, so a hardcoded path would drift. */
.pathways-merge{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.pathways-merge path{
  fill:none;stroke:var(--gold);stroke-width:1;stroke-linecap:round;
  opacity:0;transition:opacity .5s ease;
}
.pathways-merge.in path{
  opacity:1;animation:pathways-merge-pulse 2s ease-in-out infinite;
  filter:drop-shadow(0 0 0 rgba(156,124,51,0));
}

@keyframes pathways-merge-pulse{
  0%,100%{stroke-width:1;filter:drop-shadow(0 0 1px rgba(156,124,51,.3))}
  50%{stroke-width:1.5;filter:drop-shadow(0 0 4px rgba(156,124,51,.75))}
}

@media(prefers-reduced-motion:reduce){
  .pathways-merge.in path{animation:none}
}

@media(max-width:760px){
  .pathways-merge{display:none}
}

/* Labels (INPUT/PROCESS/OUTPUT) live in their own row so they always sit
   level with each other, independent of how tall any column's content is.
   The boxes/cards live in a second row below, vertically centred as a
   group — so a short column (one card) centres against a tall one (the
   output stack can run 1-3 cards) instead of being pinned to the top with
   dead space hanging underneath it. */
.pathway{display:flex;flex-direction:column;gap:10px}

/* Matches the grid's own rendered width (220+56+220+56+360), so the row
   title/status tag align with the columns below them instead of stretching
   to the full section width — which previously put the status tag further
   right than the output column, overlapping the merge connector. */
.pathway > .index{max-width:912px;width:100%;margin-inline:auto}

.pathway-labels,
.pathway-body{
  display:grid;gap:0;justify-content:center;width:100%;
  /* minmax (not fixed px) so the row shrinks to fit a tablet-width
     viewport instead of overflowing it — fixed widths only worked down to
     the point where the mobile single-column layout takes over. */
  grid-template-columns:minmax(160px,220px) minmax(32px,56px) minmax(160px,220px) minmax(32px,56px) minmax(220px,360px);
}
.pathway-body{align-items:center}
.pathway-step{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.pathway.in .pathway-step{opacity:1;transform:none}
.pathway.in .pathway-input{transition-delay:0ms}
.pathway.in .pathway-line:nth-of-type(2){transition-delay:120ms}
.pathway.in .pathway-process-wrap{transition-delay:220ms}
.pathway.in .pathway-line:nth-of-type(4){transition-delay:340ms}
.pathway.in .pathway-outputs .pathway-card{transition-delay:440ms}
.pathway.in .pathway-outputs .pathway-card:nth-child(2){transition-delay:520ms}
.pathway.in .pathway-outputs .pathway-card:nth-child(3){transition-delay:600ms}

.pathway-io-label{
  font-size:.63rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  margin-bottom:10px;display:block;min-height:1em;
}

.pathway-card{background:var(--paper);border:1px solid var(--line);border-radius:4px;padding:16px 18px}
.pathway-card h4{font-size:.88rem;margin-bottom:4px}
.pathway-card p{font-size:.76rem;color:var(--muted)}
.pathway-input{text-align:left}

.pathway-line{
  position:relative;height:2px;background:var(--line);
  transform-origin:left center;transform:scaleX(0);transition:transform .5s ease;
  overflow:visible;
}
.pathway.in .pathway-line{transform:scaleX(1)}

/* continuous gold shimmer travelling along the line once it has drawn in */
.pathway-line::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,var(--gold) 50%,transparent);
  background-size:200% 100%;background-position:200% 0;
  opacity:0;
}
.pathway.in .pathway-line::before{
  opacity:1;animation:pathway-shimmer 2.6s linear infinite;animation-delay:.6s;
}

.pathway-line::after{
  content:'';position:absolute;top:50%;left:0;width:7px;height:7px;border-radius:50%;
  background:var(--gold);transform:translate(-50%,-50%);
  box-shadow:0 0 0 0 rgba(156,124,51,.55);
}
.pathway.in .pathway-line::after{animation:pathway-pulse 2.2s ease-out infinite}

@keyframes pathway-shimmer{
  from{background-position:200% 0}
  to{background-position:-100% 0}
}
@keyframes pathway-pulse{
  0%{box-shadow:0 0 0 0 rgba(156,124,51,.55)}
  70%{box-shadow:0 0 0 9px rgba(156,124,51,0)}
  100%{box-shadow:0 0 0 0 rgba(156,124,51,0)}
}

.pathway-process{
  background:var(--graphite);color:#fff;border-radius:4px;padding:16px 18px;text-align:center;
}
.pathway-process h4{font-size:.92rem;color:#fff;margin-bottom:2px}
.pathway-process p{font-size:.72rem;color:rgba(255,255,255,.68)}

.pathway-outputs{display:flex;flex-direction:column;gap:10px}
.pathway-outputs .pathway-card{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.pathway-outputs .pathway-card h4{margin:0}
.pathway-outputs .pathway-card p{margin:0}
.pathway-outputs .pathway-card .tag-shared{
  flex-basis:100%;display:flex;align-items:center;gap:6px;
  font-size:.68rem;font-weight:700;color:var(--gold-ink);margin-top:4px;
}
.pathway-outputs .pathway-card .tag-shared::before{
  content:'';width:10px;height:10px;flex:none;
  border:1.5px solid var(--gold-ink);border-radius:50%;
}

/* The card where two routes genuinely converge gets a gold left edge —
   a visual "this is the merge point", distinct from an ordinary output. */
.pathway-merge-point{border-left:3px solid var(--gold)!important}

/* Route 02's own output isn't a second product — it's a pointer saying
   "this feeds the card above instead of producing its own line item".
   Dashed border + an upward arrow make that reading unmistakable rather
   than looking like a plain (and confusingly duplicate-sounding) output. */
.pathway-merge-indicator{
  display:flex!important;align-items:flex-start;gap:12px;
  border-style:dashed!important;background:var(--paper-2);
}
.pathway-merge-indicator .merge-arrow{
  flex:none;font-size:1.1rem;font-weight:700;color:var(--gold-ink);
  line-height:1;margin-top:2px;
}
.pathway-merge-indicator h4{color:var(--muted);font-weight:700}
.pathway-merge-indicator p{color:var(--muted);font-size:.78rem!important}

/* Route 03 (in development) sits visually apart from the two commercial
   routes above it — a rule plus slightly muted cards, so the maturity
   difference reads at a glance, not just from the small tag. */
.pathway-dev{padding-top:40px;border-top:1px dashed var(--line);margin-top:8px}
.pathway-dev .pathway-process{background:var(--graphite-2)}

@media(prefers-reduced-motion:reduce){
  .pathway-line::before,.pathway-line::after{animation:none}
}

@media(max-width:760px){
  /* The shared label row only makes sense next to a row of boxes; stacked
     vertically it would read as three loose words before any content.
     Each step prints its own label inline instead, via data-label. */
  .pathway-labels{display:none}
  .pathway-step[data-label]::before{
    content:attr(data-label);
    font-size:.63rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
    margin-bottom:10px;display:block;
  }

  .pathway-body{grid-template-columns:1fr;justify-items:center;text-align:center;row-gap:4px}
  .pathway-line{width:2px;height:28px;transform:scaleY(0);transform-origin:top center}
  .pathway.in .pathway-line{transform:scaleY(1)}
  .pathway-line::before{background:linear-gradient(180deg,transparent,var(--gold) 50%,transparent);background-size:100% 200%;background-position:0 200%}
  .pathway.in .pathway-line::before{animation-name:pathway-shimmer-v}
  .pathway-line::after{top:0;left:50%}
  .pathway-input,.pathway-process-wrap,.pathway-outputs{width:100%;max-width:360px}
  .pathway-outputs .pathway-card{justify-content:center;text-align:center}
}

@keyframes pathway-shimmer-v{
  from{background-position:0 200%}
  to{background-position:0 -100%}
}

/* ═══════════ ENTITY / TABLE ═══════════ */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:4px}
table.data{width:100%;border-collapse:collapse;font-size:.88rem;min-width:520px}
table.data th{
  text-align:left;padding:14px 20px;background:var(--paper-2);
  font-size:.64rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);border-bottom:1px solid var(--line);
}
table.data td{padding:16px 20px;border-bottom:1px solid var(--line-2);vertical-align:top}
table.data tr:last-child td{border-bottom:none}
table.data td:first-child{font-weight:700;white-space:nowrap}

/* ═══════════ INSIGHTS ═══════════ */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:44px}
.filter{
  font-size:.74rem;font-weight:700;padding:8px 16px;border-radius:3px;
  border:1px solid var(--line);background:var(--paper);color:var(--muted);
  text-decoration:none;transition:border-color .2s,color .2s;
}
.filter:hover{border-color:var(--gold);color:var(--gold-ink)}
.filter.on{background:var(--graphite);border-color:var(--graphite);color:#fff}

.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:36px}
.post-card{display:flex;flex-direction:column;text-decoration:none;color:inherit}
/* Falls back to one of the material studies rather than an empty grey
   rectangle when a post has no featured image — an empty box reads as a
   broken page. The specific study comes from a class set in the template. */
.post-card .thumb{
  aspect-ratio:16/10;border-radius:4px;overflow:hidden;margin-bottom:18px;
  border:1px solid var(--line);
  background-size:cover;background-position:center;background-repeat:no-repeat;
  background-color:var(--paper-2);
}
/* A real image sits on a neutral ground, not on the dark fallback — otherwise
   a transparent PNG would composite over the carbon study. The inline
   background-image on the element already overrides the fallback URL. */
.post-card .thumb.has-image{background-color:var(--paper-2)}

/* ── Full-width material band ──
   Breaks up the long text passages on About and Careers without adding
   another card grid. */
.band{
  position:relative;height:clamp(220px,32vw,380px);
  background-size:cover;background-position:center;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  display:flex;align-items:flex-end;
  isolation:isolate;
  overflow:hidden; /* the reveal's scale(1.06) settle must not bleed over the border */
}
/* Scrim. The steel study is light enough that white text on it fails contrast,
   so the lower half is darkened before any text is drawn over it. */
.band::before{
  content:'';position:absolute;inset:0;z-index:0;
  background:linear-gradient(180deg,
    rgba(8,9,10,.15) 0%,
    rgba(8,9,10,.42) 46%,
    rgba(8,9,10,.82) 100%);
}
.band .band-inner,.band .tick,.band .cap{position:relative;z-index:1}
.band .band-inner{
  max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter) 34px;width:100%;
}
.band .tick{
  position:absolute;top:20px;left:var(--gutter);width:12px;height:12px;
  border-top:1px solid rgba(156,124,51,.85);border-left:1px solid rgba(156,124,51,.85);
}
.band h3{
  color:#fff;font-size:clamp(1.1rem,2.2vw,1.5rem);margin-bottom:8px;max-width:22ch;
}
.band p{
  color:rgba(255,255,255,.68);font-size:.86rem;max-width:46ch;line-height:1.65;
}
.band .cap{
  position:absolute;right:var(--gutter);bottom:16px;
  font-size:.56rem;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:rgba(255,255,255,.4);
}
.post-card .cat{
  font-size:.62rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--gold-ink);margin-bottom:9px;
}
.post-card h3{margin-bottom:9px;font-size:1.04rem;transition:color .2s}
.post-card:hover h3{color:var(--gold-ink)}
.post-card p{font-size:.86rem;color:var(--muted);line-height:1.65;margin-bottom:12px}
.post-card time{font-size:.72rem;color:var(--muted);font-variant-numeric:tabular-nums}

.entry{max-width:720px;margin:0 auto}
.entry p{margin-bottom:1.1em;color:var(--ink)}
.entry h2{font-size:1.6rem;margin:1.8em 0 .6em}
.entry h3{margin:1.6em 0 .5em}
.entry ul,.entry ol{margin:0 0 1.2em 1.3em}
.entry li{margin-bottom:.4em}
.entry img{border-radius:4px;margin:1.6em 0}
.entry blockquote{
  border-left:2px solid var(--gold);padding-left:22px;margin:1.6em 0;
  color:var(--muted);font-style:italic;
}

/* ═══════════ VACANCIES ═══════════ */
.vacancies{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:4px;overflow:hidden}
.vacancy{
  background:var(--paper);padding:28px 30px;
  display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;
  transition:background .2s;
}
.vacancy:hover{background:var(--paper-2)}
.vacancy .meta{
  display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:9px;
  font-size:.76rem;color:var(--muted);
}
.vacancy .meta span{display:inline-flex;align-items:center;gap:6px}
.vacancy .meta span::before{content:'';width:5px;height:1px;background:var(--gold);flex:none}
.vacancy h3{font-size:1.06rem}
.vacancy .fn{
  font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-ink);margin-bottom:7px;
}

.pill{
  display:inline-block;font-size:.6rem;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;padding:5px 10px;border-radius:3px;
}
.pill.open{background:var(--green-wash);color:var(--green)}
.pill.paused{background:var(--gold-wash);color:var(--gold-ink)}
.pill.closed{background:var(--paper-2);color:var(--muted)}

.empty{
  padding:48px 32px;text-align:center;border:1px dashed var(--line);
  border-radius:4px;background:var(--paper-2);
}
.empty p{color:var(--muted);font-size:.94rem}

/* ═══════════ FORMS ═══════════ */
.form{display:grid;gap:22px}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.field{display:flex;flex-direction:column;gap:7px}
.field.full{grid-column:1/-1}
.field label{
  font-size:.72rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink);
}
.field .req{color:var(--gold-ink);margin-left:3px}
.field .hint{font-size:.78rem;color:var(--muted);line-height:1.5}

.field input[type=text],
.field input[type=email],
.field input[type=tel],
.field input[type=url],
.field input[type=file],
.field select,
.field textarea{
  font:inherit;font-size:.94rem;color:var(--ink);
  padding:12px 14px;border:1.5px solid var(--line);border-radius:4px;
  background:var(--paper);width:100%;
  transition:border-color .2s;
}
.field textarea{min-height:130px;resize:vertical;line-height:1.6}
.field select{cursor:pointer}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--gold);
}
.field input[aria-invalid=true],
.field select[aria-invalid=true],
.field textarea[aria-invalid=true]{border-color:var(--err)}
.field .err{font-size:.78rem;color:var(--err);font-weight:600}

.checks{display:grid;gap:9px;padding:2px 0}
.check{display:flex;align-items:flex-start;gap:10px;font-size:.88rem;color:var(--ink);cursor:pointer}
.check input{margin-top:4px;width:16px;height:16px;accent-color:var(--green);flex:none}

/* enquiry-path toggle — two selectable cards in the same idiom as .cell
   (rule + heading + copy), so the choice feels native to the page rather
   than a bolted-on form widget. */
.path-toggle{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-bottom:6px}

.path-option{
  position:relative;display:block;padding:26px 24px 24px;cursor:pointer;
  background:var(--paper);border:1px solid var(--line);border-radius:6px;
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease,background .2s ease;
}
.path-option input{position:absolute;opacity:0;pointer-events:none}

.path-option:hover{
  transform:translateY(-3px);
  border-color:var(--gold);
  box-shadow:0 14px 28px -18px rgba(0,0,0,.35);
}

.path-option .rule{
  width:24px;height:2px;background:var(--line);margin-bottom:20px;
  transition:width .25s ease,background .25s ease;
}

.path-icon{
  position:absolute;top:24px;right:24px;
  display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;
  background:var(--paper-2);color:var(--faint);
  transition:background .2s ease,color .2s ease;
}
.path-icon svg{width:19px;height:19px}

.path-check{
  position:absolute;top:24px;right:24px;
  display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;
  background:var(--gold);color:#fff;
  opacity:0;transform:scale(.6);
  transition:opacity .2s ease,transform .2s ease;
}
.path-check svg{width:16px;height:16px}

.path-option-title{display:block;font-weight:700;font-size:1rem;color:var(--ink);margin-bottom:6px}
.path-option-sub{display:block;font-size:.84rem;color:var(--muted);line-height:1.55;max-width:88%}

/* selected state */
.path-option:has(input:checked){
  border-color:var(--gold);
  background:var(--gold-wash);
  box-shadow:0 16px 32px -20px rgba(156,124,51,.45);
}
.path-option:has(input:checked) .rule{width:40px;background:var(--gold)}
.path-option:has(input:checked) .path-icon{opacity:0;transform:scale(.6)}
.path-option:has(input:checked) .path-check{opacity:1;transform:scale(1)}

/* dark (.sec.tint) context: swap the icon chip and glow to read correctly
   against the flipped token set rather than staying white-on-dark */
.sec.tint .path-icon{background:rgba(255,255,255,.06)}
.sec.tint .path-option:has(input:checked){box-shadow:0 16px 32px -20px rgba(0,0,0,.6)}

.path-fields{display:contents}
.path-fields[hidden]{display:none}

@media(max-width:640px){
  .path-toggle{grid-template-columns:1fr}
  .path-option-sub{max-width:100%}
}

.consent{
  padding:18px 20px;background:var(--paper-2);
  border:1px solid var(--line);border-radius:4px;
}
.consent .check{font-size:.85rem;color:var(--muted)}
.consent a{color:var(--green);font-weight:600}

/* honeypot — hidden from people, visible to bots */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

.notice{padding:16px 20px;border-radius:4px;font-size:.9rem;font-weight:600;margin-bottom:26px}
.notice.ok{background:var(--green-wash);color:var(--green);border:1px solid rgba(26,107,74,.2)}
.notice.bad{background:var(--err-wash);color:var(--err);border:1px solid rgba(156,53,36,.2)}

/* ═══════════ FOOTER ═══════════ */
.site-footer{background:var(--black);color:rgba(255,255,255,.6);padding:72px 0 40px;font-size:.86rem}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:44px;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.1)}
.footer-mark{width:180px;height:auto;display:block;margin-bottom:18px;border-radius:3px}
.footer-brand p{max-width:34ch;line-height:1.7;font-size:.85rem}
.footer-brand .tagline{color:#fff;font-weight:600;margin-top:16px}
.footer-col h4{
  color:#fff;font-size:.64rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;margin-bottom:16px;
}
.footer-col ul{list-style:none;display:grid;gap:9px}
.footer-col a{text-decoration:none;font-size:.85rem;transition:color .2s}
.footer-col a:hover{color:var(--gold)}
.footer-bottom{padding-top:32px;display:flex;flex-wrap:wrap;gap:14px 28px;justify-content:space-between;font-size:.78rem}
.footer-bottom nav{display:flex;flex-wrap:wrap;gap:20px}
.footer-bottom a{text-decoration:none}
.footer-bottom a:hover{color:var(--gold)}
.disclaimer{
  margin-top:32px;padding-top:24px;border-top:1px solid rgba(255,255,255,.08);
  font-size:.74rem;line-height:1.7;color:rgba(255,255,255,.42);max-width:88ch;
}

/* ═══════════ REVEAL ═══════════ */
.rise{opacity:0;transform:translateY(24px)}
.rise.in{
  opacity:1;transform:none;
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1);
}

/* Photographs get a slow settle-in (subtle Ken Burns) instead of a plain
   fade, on top of the same .rise/.in system main.js already drives — the
   .photo modifier only changes the starting transform. */
.rise.photo{transform:scale(1.06)}
.rise.photo.in{transition-duration:1.1s}

/* Parallax drift while scrolled past. main.js sets background-position-y
   directly; this only marks which elements it should touch and keeps the
   shift from spilling past the image's own box. */
.parallax{background-position-y:50%;will-change:background-position}

/* ═══════════ RESPONSIVE ═══════════ */
@media(max-width:1000px){
  .posts{grid-template-columns:repeat(2,1fr)}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .footer-top{grid-template-columns:1fr 1fr;gap:36px}
}

@media(max-width:760px){
  :root{--gutter:24px}
  .nav{
    display:none;position:absolute;top:64px;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--paper);border-bottom:1px solid var(--line);padding:8px 24px 20px;
  }
  .nav.open{display:flex}
  .nav a{padding:13px 0;border-bottom:1px solid var(--line-2)}
  .nav a[aria-current="page"]{border-bottom-color:var(--line-2)}
  .nav-toggle{display:block}

  .sec{padding:72px 0}
  .page-hero{padding:56px 0 48px}
  .split{grid-template-columns:1fr;gap:40px}
  .split.flip .split-media{order:0}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .grid.balanced > *{max-width:100%}
  .posts{grid-template-columns:1fr}
  .stats,.stats.cols-3{grid-template-columns:repeat(2,1fr);gap:32px 0;max-width:400px}
  .stat:nth-child(2){border-right:none}
  .form-grid{grid-template-columns:1fr}
  .vacancy{grid-template-columns:1fr;gap:16px;align-items:start}
  .ctas{flex-direction:column;align-items:stretch}
  .footer-top{grid-template-columns:1fr;gap:32px}
  .figcap{flex-direction:column;gap:8px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rise{opacity:1;transform:none}
  .rise.photo{transform:none} /* more specific than .rise alone, so it needs its own override */
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

@media print{
  .site-header,.site-footer,.hero-main,.nav-toggle{display:none}
  .sec{padding:24px 0;break-inside:avoid}
}