/* ============================================================
   April HR: page furniture, the scroll film, and the home sections.
   Loads AFTER house.css and only adds; house.css keeps its tokens
   (navy #1B2431, paper #F5F0E6, champagne #C6AC72 as a whisper only,
   Cormorant over Poppins). Light ground everywhere after the film.
   ============================================================ */

:root{
  --furniture-z: 60;
  /* frosted-glass furniture: translucent warm-white, heavy blur, a bright
     top edge and a soft shadow so it reads as glass floating over the paper */
  --pill-bg: rgba(247,242,233,.40);
  --pill-line: rgba(27,36,49,.09);
  --pill-shadow: 0 10px 30px rgba(27,36,49,.14), inset 0 1px 0 rgba(255,255,255,.7);
  --pill-blur: blur(20px) saturate(1.7);
  --champ-soft: rgba(198,172,114,.42);
}

/* sticky is silently broken by overflow-x:hidden anywhere up the tree */
html, body{ overflow-x: clip; }
body{ background: var(--paper); }

/* Every image carries width and height attributes so the browser can reserve
   space and CLS stays at zero. Without height:auto those attributes become a
   FIXED height and the picture stretches. This one line is load-bearing. */
img{ height:auto; }

/* ------------------------------------------------------------
   1. PERSISTENT PAGE FURNITURE
   Identical on every page. Wordmark top-right, floating pill nav
   top-left, pinned CTA, left section rail, scroll cue.
   ------------------------------------------------------------ */

.skip{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--navy); color:var(--paper);
  padding:.8rem 1.2rem; border-radius:999px; font-size:.85rem; }
.skip:focus{ left:16px; top:16px; }

.furniture{ position:fixed; inset:0; z-index:var(--furniture-z); pointer-events:none; }
.furniture > *{ pointer-events:auto; }

/* --- the wordmark: seal + April HR, top right, every page --- */
.wordmark{
  position:fixed; top:22px; right:26px; z-index:calc(var(--furniture-z) + 2);
  display:inline-flex; align-items:center; gap:.62rem; text-decoration:none;
  padding:.44rem .78rem .44rem .5rem; border-radius:999px;
  background:var(--pill-bg); border:1px solid var(--pill-line);
  backdrop-filter:blur(20px) saturate(1.7); -webkit-backdrop-filter:blur(20px) saturate(1.7);
  box-shadow:var(--pill-shadow);
  transition:background .3s ease, border-color .3s ease;
}
.wordmark img{ width:30px; height:auto; }
.wordmark .wm-text{ display:flex; flex-direction:column; line-height:1; }
.wordmark .wm-name{ font-family:var(--display); font-weight:600; font-size:1.16rem; letter-spacing:.012em; color:var(--ink); }
.wordmark .wm-sub{ font-family:var(--sans); font-weight:400; font-size:.54rem; letter-spacing:.26em;
  text-transform:uppercase; color:var(--muted); margin-top:.22rem; }

/* --- the floating pill nav, top left --- */
.pillnav{
  position:fixed; top:22px; left:26px; z-index:calc(var(--furniture-z) + 2);
  display:flex; align-items:center; gap:.1rem; padding:.34rem;
  border-radius:999px; background:var(--pill-bg); border:1px solid var(--pill-line);
  backdrop-filter:blur(20px) saturate(1.7); -webkit-backdrop-filter:blur(20px) saturate(1.7);
  box-shadow:var(--pill-shadow);
}
.pillnav a{
  display:inline-block; text-decoration:none; color:var(--sec);
  font-size:.8rem; font-weight:400; letter-spacing:.01em;
  padding:.5rem .82rem; border-radius:999px; white-space:nowrap;
  transition:color .22s ease, background .22s ease;
}
.pillnav a:hover{ color:var(--ink); background:rgba(27,36,49,.055); }
.pillnav a[aria-current="page"]{ color:var(--ink); font-weight:500; background:rgba(198,172,114,.2); }

/* --- the pinned CTA pill, bottom right --- */
.ctapill{
  position:fixed; right:26px; bottom:26px; z-index:calc(var(--furniture-z) + 2);
  display:inline-flex; align-items:center; gap:.55rem; text-decoration:none;
  padding:.78rem 1.3rem; border-radius:999px;
  background:var(--navy); color:var(--paper);
  font-size:.82rem; font-weight:500; letter-spacing:.02em;
  box-shadow:0 14px 32px rgba(27,36,49,.28);
  transition:transform .24s cubic-bezier(.22,1,.36,1), box-shadow .24s ease;
}
.ctapill:hover{ transform:translateY(-2px); box-shadow:0 18px 40px rgba(27,36,49,.34); }
.ctapill .dot{ width:6px; height:6px; border-radius:50%; background:var(--champ); flex:none; }

/* --- the left section rail --- */
.rail{
  position:fixed; left:26px; top:50%; transform:translateY(-50%);
  z-index:calc(var(--furniture-z) + 1);
  display:flex; flex-direction:column; gap:.95rem;
}
.rail a{ display:flex; align-items:center; gap:.6rem; text-decoration:none; }
.rail .tick{ width:16px; height:1px; background:rgba(27,36,49,.28); flex:none;
  transition:width .3s cubic-bezier(.22,1,.36,1), background .3s ease; }
.rail .rlabel{ font-size:.6rem; letter-spacing:.2em; text-transform:uppercase;
  color:transparent; white-space:nowrap; transition:color .3s ease; }
.rail a:hover .tick, .rail a.on .tick{ width:30px; background:var(--deep); }
/* The label is revealed on hover only. Showing it for the active section too
   would lay it over the film copy, which is fixed at 6vw and stays put. */
.rail a:hover .rlabel{ color:var(--ink); }
.rail a.on .tick{ height:2px; }

/* --- the bottom-left scroll cue --- */
.scrollcue{
  position:fixed; left:26px; bottom:26px; z-index:calc(var(--furniture-z) + 1);
  font-size:.58rem; letter-spacing:.24em; text-transform:uppercase; color:var(--muted);
  display:flex; align-items:center; gap:.5rem;
  transition:opacity .45s ease;
}
.scrollcue .arr{ display:inline-block; animation:cuebob 1.9s ease-in-out infinite; }
@keyframes cuebob{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(4px) } }
.scrollcue.gone{ opacity:0; pointer-events:none; }

/* furniture goes light-on-dark while the dark first act is on screen */
body.on-film-dark .wordmark,
body.on-film-dark .pillnav{ background:rgba(27,36,49,.5); border-color:rgba(245,240,230,.2); }
body.on-film-dark .wordmark .wm-name{ color:var(--paper); }
body.on-film-dark .wordmark .wm-sub{ color:rgba(245,240,230,.6); }
body.on-film-dark .pillnav a{ color:rgba(245,240,230,.76); }
body.on-film-dark .pillnav a:hover,
body.on-film-dark .pillnav a[aria-current="page"]{ color:var(--paper); background:rgba(245,240,230,.13); }
body.on-film-dark .rail .tick{ background:rgba(245,240,230,.35); }
body.on-film-dark .rail a.on .rlabel{ color:var(--paper); }
body.on-film-dark .scrollcue{ color:rgba(245,240,230,.6); }
body.on-film-dark .ctapill{ background:var(--paper); color:var(--navy); }

/* ------------------------------------------------------------
   2. THE SCROLL FILM (Act 1 -> Act 2 -> Act 3)
   Ported unchanged in behaviour from the approved reference build.
   The Act 1 / Act 3 artwork is locked and must not be restyled.
   ------------------------------------------------------------ */

/* the stage is full bleed: it must not inherit the global section padding,
   which would shift the sticky world down and push the copy under the nav */
.film{ position:relative; height:1080vh; background:#000; padding:0; }
.film .world{ position:sticky; top:0; height:100vh; overflow:hidden; background:#000; perspective:1400px; }
.film .stage3d{ position:absolute; inset:0; transform-style:preserve-3d; }
.film .panel{ position:absolute; inset:0; overflow:hidden; backface-visibility:hidden; transform-origin:center center; }
.film .panel .media{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.film #a1 .media{ object-position:center 55%; }
.film #a2{ transform:rotateY(-90deg); }
.film #a3{ transform:rotateY(-90deg); }

.film #bars{ position:absolute; inset:0; z-index:18; pointer-events:none; }
.film #bars .bar{ position:absolute; display:inline-flex; align-items:center; gap:.45rem;
  background:rgba(245,240,230,.96); color:var(--navy); border-radius:999px;
  padding:.42rem .95rem .42rem .55rem; font-size:.82rem; font-weight:500; white-space:nowrap;
  box-shadow:0 12px 26px rgba(0,0,0,.45); }
.film #bars .bar .tick{ width:18px; height:18px; border-radius:50%; background:var(--champ);
  color:var(--navy); display:inline-flex; align-items:center; justify-content:center;
  font-size:.62rem; font-weight:700; opacity:0; transform:scale(.5); }

.film .scrim{ position:absolute; inset:0; z-index:20; pointer-events:none;
  background:linear-gradient(90deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.55) 22%, rgba(0,0,0,.12) 42%, rgba(0,0,0,0) 56%); }

.film .fcopy{ position:absolute; z-index:22; left:6vw; top:50%; transform:translateY(-50%);
  max-width:min(460px,40vw); opacity:0; color:var(--paper); }
.film .fcopy .kick{ font-size:.72rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--champ); font-weight:500; }
.film .fcopy .hair{ width:56px; height:1px; background:var(--champ); opacity:.85; margin:.9rem 0; }
.film .fcopy h2{ font-family:var(--display); font-style:italic; font-weight:400;
  font-size:clamp(1.6rem,3.4vw,2.9rem); line-height:1.08; color:inherit; }
.film .fcopy p{ margin-top:.85rem; font-size:clamp(.88rem,1.3vw,1.05rem);
  color:rgba(245,240,230,.82); max-width:38ch; }
/* the film copy must never be taller than the viewport it is centred in */
.film .fcopy{ max-height:88vh; overflow:hidden; }
/* Act 2 sits lower on screen (COPY-01 build note) */
.film .fcopy.low{ top:60%; }
/* the film's bulleted lists (Act 1 friction, Act 2 how we can help) */
.film .fcopy .film-list{ list-style:none; margin:.35rem 0 0; padding:0; display:grid;
  gap:.5rem; max-width:42ch; }
.film .fcopy .film-list li{ position:relative; padding-left:1.15rem;
  font-size:clamp(.92rem,1.3vw,1.14rem); line-height:1.35; color:rgba(245,240,230,.92); }
.film .fcopy .film-list li::before{ content:''; position:absolute; left:0; top:.52em;
  width:5px; height:5px; border-radius:50%; background:var(--champ); }
.film .fcopy .film-close{ margin-top:1rem; font-style:italic;
  font-size:clamp(.9rem,1.25vw,1.08rem); color:var(--paper); }
.film .fcopy.islight{ color:var(--navy); }
.film .fcopy.islight h2{ color:var(--navy); }
.film .fcopy.islight .kick{ color:var(--deep); }
.film .fcopy.islight .hair{ background:var(--champ); }
.film .fcopy.islight p{ color:#3A4552; }

.film .man2{ position:absolute; left:13%; bottom:3%; width:34vw; transform-origin:center bottom;
  z-index:10; will-change:transform,left,bottom; filter:drop-shadow(0 14px 22px rgba(0,0,0,.5)); }
.film .man2 img{ display:block; width:100%; animation:breathe 3.6s ease-in-out infinite; }
@keyframes breathe{ 0%,100%{ transform:translateY(0) rotate(0deg) } 50%{ transform:translateY(-.8%) rotate(.3deg) } }

.film #a3birds{ position:absolute; inset:0; z-index:16; pointer-events:none; }
.film #a3birds .bird{ position:absolute; left:0; will-change:transform,opacity; }
.film #a3birds .bird img{ display:block; width:100%; }
.film #a3birds #b1{ width:6vw;   top:14%; animation:fly1 16s linear infinite; }
.film #a3birds #b2{ width:4.6vw; top:22%; animation:fly2 21s linear infinite; }
.film #a3birds #b3{ width:5.2vw; top:10%; animation:fly3 26s linear infinite; }
@keyframes fly1{ 0%{transform:translateX(-22vw);opacity:0} 8%{opacity:1} 92%{opacity:1} 100%{transform:translateX(128vw);opacity:0} }
@keyframes fly2{ 0%{transform:translateX(-30vw);opacity:0} 8%{opacity:1} 92%{opacity:1} 100%{transform:translateX(128vw);opacity:0} }
@keyframes fly3{ 0%{transform:translateX(-40vw);opacity:0} 8%{opacity:1} 92%{opacity:1} 100%{transform:translateX(128vw);opacity:0} }

/* ------------------------------------------------------------
   3. HOME SECTIONS
   ------------------------------------------------------------ */

.band{ padding:clamp(84px,11vw,150px) 0; }
.band.tint{ background:#EFE9DB; }

/* --- the difference: opening statement --- */
.opener{ max-width:900px; }
.opener h2{ font-size:clamp(2.1rem,4.4vw,3.5rem); line-height:1.04; margin-top:1.4rem; }
.opener h2 em{ font-style:italic; color:var(--deep); }
.opener .lede{ margin-top:1.6rem; max-width:56ch; }

/* --- the pill label chip (Enigma 08) --- */
.chip{ display:inline-block; border:1px solid var(--line-l); border-radius:999px;
  padding:.46rem 1.05rem; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); background:var(--paper); }

/* --- feature bands: the four differentiators.
       They STACK: each card sticks under the one before it and the next
       slides up and covers it, so the four read as one moving sequence
       rather than a list (Enigma, the cover transition). --- */
.features{ margin-top:clamp(34px,4.4vw,56px); }
.feature{ position:sticky; top:calc(96px + var(--n) * 16px);
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(30px,5vw,72px); align-items:center;
  padding:clamp(40px,5vw,64px) clamp(24px,3.4vw,52px);
  margin-bottom:clamp(26px,3.4vw,44px); border-radius:22px;
  /* a soft paper ground, never the accent as a fill */
  background:linear-gradient(168deg, #FBF7EF 0%, #F1EBDD 100%);
  border:1px solid rgba(27,36,49,.055);
  box-shadow:0 -18px 44px rgba(27,36,49,.07); }
.feature:last-child{ margin-bottom:0; }
.feature.flip .fig{ order:-1; }
.feature .fig{ position:relative; }
.feature .fig img{ width:100%; height:auto; border-radius:14px; }
.feature .num{ position:absolute; top:clamp(18px,2.4vw,26px); right:clamp(22px,3vw,34px);
  font-family:var(--display); font-size:.92rem; font-weight:600; color:var(--champ);
  letter-spacing:.16em; }
.feature h3{ font-size:clamp(1.55rem,2.6vw,2.2rem); line-height:1.12; margin:1rem 0 0; }
.feature h3 em{ font-style:italic; color:var(--deep); }
.feature p{ margin-top:.9rem; max-width:44ch; }
/* the floating circular stat over the graphic */
.feature .stat{ position:absolute; left:-18px; bottom:34px; width:132px; height:132px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  border-radius:50%; background:var(--paper); border:1px solid var(--champ-soft);
  box-shadow:0 16px 38px rgba(27,36,49,.14); padding:.6rem; }
.feature .stat span{ font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.feature .stat b{ font-family:var(--display); font-size:.98rem; line-height:1.16; color:var(--ink);
  font-weight:600; margin-top:.3rem; }

/* --- the journey band: ONE image that grows, splits into three panels,
       tilts apart in 3D and flips into three answer cards. Driven by four
       custom properties so CSS owns every transform and nothing competes.
       With JS off the cards rest flat and readable. --- */
.jstage{ min-height:100vh; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:clamp(26px,4vw,52px); }
.jhead{ text-align:center; }

.triptych{ --grow:1; --split:1; --fan:0; --flip:1;
  width:min(1060px,88vw); display:grid; grid-template-columns:repeat(3,1fr);
  gap:calc(6px + var(--split) * 14px);
  perspective:1900px; transform:scale(var(--grow)); transform-origin:center center; }

.tpane{ position:relative; display:block; text-decoration:none; aspect-ratio:.74;
  transform-style:preserve-3d; will-change:transform;
  transform:rotateY(calc(var(--fan) * var(--dir) * 17deg + var(--flip) * 180deg))
            translateZ(calc(var(--fan) * var(--depth) * -46px)); }
.tpane:nth-child(1){ --dir:1;  --depth:1; }
.tpane:nth-child(2){ --dir:0;  --depth:0; }
.tpane:nth-child(3){ --dir:-1; --depth:1; }

.tface{ position:absolute; inset:0; border-radius:8px; overflow:hidden;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  box-shadow:0 22px 54px rgba(27,36,49,.2); }
/* the image face: each panel shows its own third of one continuous picture */
.tfront{ background-image:url('/film/act2-manless.webp'); background-size:300% 100%;
  background-position:calc(var(--i) * 50%) center; }
/* the card face, revealed as the panel turns */
.tback{ transform:rotateY(180deg); background:var(--paper); border:1px solid var(--line-l);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:clamp(20px,2.6vw,34px); }
.tback .tnum{ font-family:var(--sans); font-size:.66rem; letter-spacing:.2em; color:var(--champ); }
.tback h3{ font-family:var(--display); font-size:clamp(1.15rem,1.9vw,1.6rem); line-height:1.16;
  margin-top:.9rem; color:var(--ink); }
.tback .tgo{ margin-top:1.2rem; padding-top:.9rem; border-top:1px solid var(--line-l);
  font-size:.64rem; letter-spacing:.18em; text-transform:uppercase; color:var(--deep); }
.tpane:hover .tback{ border-color:var(--champ); }

/* --- numbered service rows, no cards (Resha 04): number + name, then the
       deliverables column. Long and scannable, generous vertical room. --- */
.rows{ border-top:1px solid var(--line-l); margin-top:clamp(38px,5vw,60px); }
.row{ display:grid; grid-template-columns:minmax(210px,.85fr) 1.15fr;
  gap:clamp(16px,3vw,56px); align-items:start;
  padding:clamp(26px,3.2vw,40px) 0; border-bottom:1px solid var(--line-l);
  transition:background .35s ease; }
.row:hover{ background:rgba(198,172,114,.06); }
.row .rnum{ display:block; font-family:var(--sans); font-size:.68rem; font-weight:500;
  letter-spacing:.2em; color:var(--champ); margin-bottom:.55rem; }
.row .rbody h3{ font-size:clamp(1.24rem,2vw,1.62rem); line-height:1.14; }
.row .rdel{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap;
  gap:.4rem 1.6rem; padding-top:.34rem; }
.row .rdel li{ position:relative; font-size:.9rem; line-height:1.7; color:var(--muted);
  padding-left:.9rem; }
.row .rdel li::before{ content:''; position:absolute; left:0; top:.66em; width:5px; height:5px;
  border-radius:50%; background:var(--champ); }
.optionsline{ margin-top:clamp(30px,4vw,46px); font-size:.95rem; color:var(--muted);
  border-left:2px solid var(--champ-soft); padding-left:1.1rem; max-width:60ch; }

/* --- the scroll-linked manifesto reveal (Resha 01), centred and large,
       with a soft leading edge rather than a hard on/off per word --- */
.manifesto{ max-width:1120px; text-align:center; }
.manifesto .mtext{ font-family:var(--display); font-weight:500; text-wrap:balance;
  font-size:clamp(1.7rem,4.4vw,3.35rem); line-height:1.28; margin-top:clamp(28px,3.4vw,46px);
  max-width:none; }
.manifesto .mtext .w{ color:rgba(27,36,49,.15); transition:color .5s ease; }
.manifesto .mtext .w.edge{ color:rgba(27,36,49,.48); }
.manifesto .mtext .w.lit{ color:var(--ink); }
.manifesto .after{ margin-top:clamp(46px,6vw,84px); display:grid; grid-template-columns:1.15fr .85fr;
  gap:clamp(30px,5vw,70px); align-items:center; text-align:left; }
.manifesto .after .pull{ font-family:var(--display); font-style:italic;
  font-size:clamp(1.2rem,2.2vw,1.7rem); line-height:1.38; color:var(--ink);
  border-left:2px solid var(--champ); padding-left:1.3rem; max-width:32ch; }
.manifesto .after img{ width:100%; height:auto; border-radius:8px; }

/* --- the counting stats band. Every figure here is a fact already stated
       elsewhere on the page. Nothing is invented to fill the slot. --- */
.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,4vw,64px);
  margin-top:clamp(40px,5vw,70px); padding-top:clamp(34px,4vw,52px);
  border-top:1px solid var(--line-l); }
.stat-i .fig{ font-family:var(--display); font-weight:600; line-height:.92;
  font-size:clamp(3rem,7vw,5.6rem); color:var(--ink); letter-spacing:-.01em; }
.stat-i .fig .sfx{ color:var(--champ); }
.stat-i .lab{ margin-top:.85rem; font-size:.9rem; line-height:1.55; color:var(--muted); max-width:26ch; }

/* an image that grows out of a sliver as you scroll it (Resha) */
.grow{ clip-path:inset(0); will-change:clip-path,transform; }
.js .grow{ clip-path:inset(40% 0 40% 0); transform:scale(1.06); }

/* --- the people --- */
.people{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(36px,6vw,86px); align-items:center; }
.people img{ width:100%; border-radius:4px; }
.creds{ margin-top:2rem; padding-top:1.5rem; border-top:1px solid var(--line-l);
  font-size:.95rem; color:var(--muted); max-width:56ch; }
.svclist{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.6rem; padding:0; list-style:none; }
.svclist li{ font-size:.82rem; color:var(--sec); border:1px solid var(--line-l);
  border-radius:999px; padding:.42rem .9rem; }

/* --- closing call to action --- */
.closer{ text-align:center; }
.closer h2{ font-size:clamp(2rem,4.2vw,3.2rem); line-height:1.06; }
.closer .sub{ margin:1.1rem auto 0; max-width:48ch; color:var(--muted); }
.btnrow{ display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; margin-top:2.2rem; }
.btn{ display:inline-flex; align-items:center; gap:.5rem; text-decoration:none;
  padding:.92rem 1.6rem; border-radius:999px; font-size:.88rem; font-weight:500;
  transition:transform .22s cubic-bezier(.22,1,.36,1), background .22s ease, color .22s ease; }
.btn.solid{ background:var(--navy); color:var(--paper); }
.btn.ghost{ border:1px solid rgba(27,36,49,.24); color:var(--ink); }
.btn:hover{ transform:translateY(-2px); }
.btn.ghost:hover{ background:rgba(27,36,49,.05); }

/* ------------------------------------------------------------
   4. INTERIOR PAGE PATTERNS (varied per page, not one box style)
   ------------------------------------------------------------ */
/* every page head must clear the fixed furniture */
.hero{ padding-top:clamp(132px,15vw,190px) !important; }
section[id]{ scroll-margin-top:96px; }

.phead{ padding:clamp(140px,17vw,200px) 0 clamp(46px,6vw,72px); }
.phead h1{ font-size:clamp(2.4rem,5.6vw,4.2rem); line-height:1.02; margin-top:1.2rem; }
.phead .lede{ margin-top:1.4rem; max-width:54ch; }

.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,5.5vw,80px); align-items:start; }
.stack{ display:grid; gap:clamp(24px,3.4vw,40px); }
.timeline{ position:relative; padding-left:34px; }
.timeline::before{ content:''; position:absolute; left:8px; top:6px; bottom:6px; width:1px; background:var(--line-l); }
.timeline .step{ position:relative; padding-bottom:clamp(26px,3.4vw,40px); }
.timeline .step::before{ content:''; position:absolute; left:-30px; top:9px; width:9px; height:9px;
  border-radius:50%; background:var(--paper); border:1px solid var(--champ); }
.timeline .step h3{ font-size:1.24rem; }
.timeline .step p{ margin-top:.4rem; color:var(--muted); font-size:.95rem; }

.hub{ display:grid; grid-template-columns:repeat(auto-fit,minmax(255px,1fr)); gap:clamp(16px,2.4vw,26px); }
.hub a{ display:block; text-decoration:none; padding:clamp(24px,3vw,34px);
  border:1px solid var(--line-l); border-radius:5px; background:var(--paper);
  transition:border-color .25s ease, transform .25s cubic-bezier(.22,1,.36,1); }
.hub a:hover{ border-color:var(--champ); transform:translateY(-3px); }
.hub a h3{ font-size:1.22rem; }
.hub a p{ margin:.5rem 0 0; font-size:.92rem; color:var(--muted); }
.hub a .go{ display:inline-block; margin-top:1rem; font-size:.74rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--deep); }

.faq{ border-top:1px solid var(--line-l); }
.faq details{ border-bottom:1px solid var(--line-l); padding:1.15rem 0; }
.faq summary{ cursor:pointer; font-family:var(--display); font-size:1.18rem; font-weight:600;
  list-style:none; display:flex; justify-content:space-between; gap:1rem; align-items:baseline; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:'+'; color:var(--deep); font-family:var(--sans); font-size:1.1rem; flex:none; }
.faq details[open] summary::after{ content:'\2212'; }
.faq details p{ margin:.8rem 0 0; color:var(--muted); font-size:.96rem; }

/* the ghost section word (Enigma 10): huge, full bleed, cropped by the
   viewport edges, and barely there. In our whisper, never the accent as fill. */
.ghostwrap{ position:relative; }
.ghostword{ position:absolute; left:50%; translate:-50% 0; top:-.42em; z-index:0;
  pointer-events:none; font-family:var(--display); font-weight:600;
  font-size:clamp(7rem,23vw,20rem); line-height:.78; letter-spacing:-.01em;
  color:rgba(27,36,49,.045); white-space:nowrap; user-select:none; }
.ghostwrap > :not(.ghostword){ position:relative; z-index:1; }

/* headline that resolves letter by letter out of a dot (Enigma 09) */
.assemble .ch{ display:inline-block; white-space:pre; }
.js .assemble .ch{ opacity:0; transform:translateY(.16em) scale(.82); filter:blur(4px); }
.js .assemble.on .ch{ opacity:1; transform:none; filter:none;
  transition:opacity .5s ease, transform .5s cubic-bezier(.22,1,.36,1), filter .5s ease;
  transition-delay:calc(var(--c) * 22ms); }

/* the two slightly tilted route cards (Resha 06) */
.routes{ display:flex; justify-content:center; flex-wrap:wrap;
  gap:clamp(18px,2.6vw,34px); margin-top:clamp(34px,4.4vw,54px); }
.route{ position:relative; display:block; text-decoration:none; width:min(300px,88vw);
  padding:clamp(26px,3vw,36px) clamp(22px,2.6vw,30px) clamp(22px,2.6vw,28px);
  border-radius:16px; background:var(--paper); border:1px solid var(--line-l);
  box-shadow:0 16px 40px rgba(27,36,49,.09); text-align:center;
  transition:transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease; }
.route:nth-child(1){ transform:rotate(-2.4deg); }
.route:nth-child(2){ transform:rotate(2.1deg); }
.route:hover{ transform:rotate(0deg) translateY(-6px); box-shadow:0 24px 52px rgba(27,36,49,.16); }
.route .rmark{ width:70px; height:70px; margin:0 auto; border-radius:50%;
  background:#EFE9DB; border:1px solid var(--champ-soft);
  display:flex; align-items:center; justify-content:center; }
.route .rmark img{ width:40px; height:auto; }
.route .rname{ font-family:var(--display); font-style:italic; font-weight:600;
  font-size:clamp(1.3rem,2vw,1.6rem); line-height:1.1; margin-top:1rem; color:var(--ink); }
.route .rrole{ font-size:.8rem; color:var(--muted); margin-top:.5rem; line-height:1.55; }
.route .rgo{ display:inline-block; margin-top:1.1rem; padding-top:.9rem;
  border-top:1px solid var(--line-l); width:100%;
  font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--deep); }

/* ------------------------------------------------------------
   5. REVEALS: JS-gated so nothing is ever hidden without JS
   ------------------------------------------------------------ */
.js [data-rise]{ opacity:0; transform:translateY(18px); }
.js [data-rise].in{ opacity:1; transform:none;
  transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }

/* ------------------------------------------------------------
   6. FOOTER  (one shared block, byte-identical on every page)
   COPY-13 Round 2: a navy panel with a rounded top edge, three
   columns (mark + tagline / large numbered nav / utility + credential
   + contact + social), then a full-width fine-print row. Rendered in
   the DoA system (navy ground, champagne hairlines). Kept to about
   half the viewport on a phone (height discipline).
   ------------------------------------------------------------ */
footer{ background:var(--navy); color:var(--dim); border-top:0;
  border-radius:26px 26px 0 0; margin-top:clamp(40px,6vw,72px);
  padding:clamp(46px,5.5vw,68px) 0 clamp(26px,3vw,36px); }
footer .fgrid{ display:grid; align-items:start;
  grid-template-columns:1fr 1.15fr 1fr; gap:clamp(30px,4vw,56px); }

/* COL 1: mark + tagline */
footer .fmark .fseal{ width:56px; height:auto; opacity:.95; margin-bottom:1.1rem; }
footer .ftagline{ font-family:var(--display); font-style:italic; font-size:1.16rem;
  line-height:1.4; color:var(--ivory); max-width:26ch; margin:0; }

/* COL 2: the large numbered nav, champagne hairline between, hairlines flanking */
footer .fnum{ display:flex; flex-direction:column;
  border-left:1px solid var(--line-d); border-right:1px solid var(--line-d);
  padding:0 clamp(18px,2.4vw,34px); }
footer .fnum a{ display:flex; align-items:baseline; gap:.8rem; text-decoration:none;
  padding:clamp(11px,1.4vw,16px) 0; border-top:1px solid var(--line-d);
  color:var(--ivory); transition:color .2s ease, padding-left .25s cubic-bezier(.22,1,.36,1); }
footer .fnum a:first-child{ border-top:0; }
footer .fnum a:hover{ color:var(--champ); padding-left:.4rem; }
footer .fnum .fn-i{ font-family:var(--sans); font-weight:500; font-size:.7rem; letter-spacing:.14em;
  color:var(--champ); flex:none; }
footer .fnum .fn-l{ font-family:var(--display); font-weight:600; font-size:clamp(1.3rem,2.1vw,1.85rem);
  line-height:1.05; }

/* COL 3: utility links + credential + contact + social */
footer .futil{ display:flex; flex-direction:column; gap:1.1rem; }
footer .futil-links{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap;
  gap:.5rem 1.1rem; }
footer .futil-links a{ font-family:var(--sans); font-size:.64rem; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; color:var(--dim); text-decoration:none; transition:color .18s ease; }
footer .futil-links a:hover{ color:var(--ivory); }
footer .fcred{ font-family:var(--display); font-style:italic; font-size:1rem; line-height:1.42;
  color:var(--dim); max-width:34ch; margin:0; }
footer .fcontact{ display:flex; flex-direction:column; gap:.35rem; }
footer .fcontact .fc-head{ font-family:var(--sans); font-weight:500; font-size:.66rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--dim2); margin-bottom:.2rem; }
footer .fcontact a{ font-size:.9rem; color:var(--ivory); text-decoration:none; transition:color .18s ease; }
footer .fcontact a:hover{ color:var(--champ); }
footer .fsocial{ display:inline-flex; align-items:center; gap:.5rem; text-decoration:none;
  color:var(--dim); font-size:.82rem; transition:color .18s ease; align-self:flex-start; }
footer .fsocial:hover{ color:var(--ivory); }
footer .fsocial svg{ flex:none; }

/* full-width fine print */
footer .ffine{ grid-column:1 / -1; margin-top:clamp(26px,3vw,40px); padding-top:1.2rem;
  border-top:1px solid var(--line-d);
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1.6rem;
  font-size:.72rem; color:var(--dim2); letter-spacing:.02em; }
footer .ffine .credit a{ color:var(--dim); text-decoration:none; border-bottom:1px solid rgba(244,239,228,.22); }
footer .ffine .updated{ font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--dim2); margin-left:auto; }

@media (max-width:820px){
  footer{ border-radius:20px 20px 0 0; }
  footer .fgrid{ grid-template-columns:1fr 1fr; gap:28px 26px; }
  footer .fmark{ grid-column:1 / -1; }
  footer .fnum{ border-left:0; border-right:0; padding:0; }
  footer .ffine{ flex-direction:column; align-items:flex-start; gap:.5rem; }
  footer .ffine .updated{ margin-left:0; }
}
@media (max-width:520px){
  footer .fgrid{ grid-template-columns:1fr; }
}

/* ------------------------------------------------------------
   7. RESPONSIVE: nothing is hidden on mobile, sections get MORE room
   ------------------------------------------------------------ */
@media (max-width:1180px){
  .rail{ display:none; }                    /* labels collide with content; nav pill carries the same links */
}
@media (max-width:900px){
  .feature{ grid-template-columns:1fr; gap:26px; }
  .feature.flip .fig{ order:0; }
  .feature .stat{ left:auto; right:6px; bottom:6px; width:108px; height:108px; }
  .manifesto .after{ grid-template-columns:1fr; text-align:left; }
  .people{ grid-template-columns:1fr; }
  .split{ grid-template-columns:1fr; }
  /* the panels stack so each stays readable; none is dropped. No turn on a
     phone: the card face is shown outright, since a pinned 3D flip on a small
     screen costs a lot of scrolling for very little. */
  .jstage{ min-height:0; }
  .triptych{ grid-template-columns:1fr; gap:12px;
    --grow:1 !important; --split:1 !important; --fan:0 !important; --flip:1 !important;
    perspective:none; }
  .tpane{ aspect-ratio:2.4; transform:none !important; }
  .tfront{ display:none; }
  .tback{ transform:none; }
  .row{ grid-template-columns:1fr; gap:.5rem; }
  .row .rdel{ gap:.3rem 1.2rem; }
  .routes{ gap:16px; }
}
@media (max-width:820px){
  /* On phones 100vh is the LARGE viewport, so a 100vh stage runs under the
     bottom nav. svh is the small viewport and always fits what is on screen. */
  .film{ height:1080svh; }
  .film .world{ height:100svh; }

  .film .man2{ width:62vw; }
  .film .fcopy{ left:6vw; right:6vw; max-width:none; top:auto; bottom:15svh; transform:none; }
  .film .fcopy h2{ font-size:clamp(1.7rem,7.4vw,2.4rem); }
  .film #a3birds #b1{ width:13vw } .film #a3birds #b2{ width:11vw } .film #a3birds #b3{ width:12vw }
  .film .scrim{ background:linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.35) 40%, rgba(0,0,0,.8) 100%); }

  /* furniture reflows: wordmark stays top-right, nav becomes a pinned bottom pill,
     CTA moves into the top-left slot. Nothing is removed. */
  .wordmark{ top:14px; right:14px; padding:.36rem .66rem .36rem .42rem; }
  .wordmark img{ width:26px; height:auto; }
  .wordmark .wm-name{ font-size:1rem; }
  .wordmark .wm-sub{ font-size:.5rem; letter-spacing:.2em; }

  .pillnav{ top:auto; bottom:14px; left:50%; right:auto; transform:translateX(-50%);
    max-width:calc(100vw - 28px); overflow-x:auto; scrollbar-width:none; gap:0; }
  .pillnav::-webkit-scrollbar{ display:none; }
  .pillnav a{ font-size:.72rem; padding:.5rem .62rem; }

  .ctapill{ right:auto; left:14px; top:14px; bottom:auto; padding:.58rem 1rem; font-size:.74rem; }
  .scrollcue{ left:14px; bottom:74px; font-size:.54rem; }

  /* the bottom-pinned nav must never sit on top of the footer's own content */
  footer{ padding-bottom:104px; }

  .band{ padding:clamp(70px,15vw,110px) 0; }   /* more vertical room, not less */
  .row{ grid-template-columns:52px 1fr; }
  .ghostword{ font-size:clamp(4rem,22vw,7rem); }
  .phead{ padding:clamp(120px,26vw,160px) 0 clamp(40px,8vw,60px); }
}
@media (max-width:380px){
  .pillnav a{ font-size:.68rem; padding:.48rem .52rem; }
}

/* ------------------------------------------------------------
   7b. HOME PAGE COMPONENTS (COPY-01): the first-screen hero with a
   supplied-graphic slot, the Act 1 narrative, the April HR / ESG
   grids, the four-point blocks, the owner line and the mandate notice.
   ------------------------------------------------------------ */

/* the first screen: hero copy beside the graphic slot Hashini supplies */
.herohome{ padding:clamp(140px,16vw,206px) 0 clamp(56px,8vw,96px); }
.herohome-grid{ display:grid; grid-template-columns:0.7fr 1.3fr;
  gap:clamp(28px,3vw,48px); align-items:center; }
.herohome-copy .hair{ width:56px; height:1px; background:var(--champ); opacity:.85; margin:1rem 0 1.3rem; }
.herohome-copy h1{ font-size:clamp(2.5rem,5.6vw,4.4rem); line-height:1; }
/* hero-big = the swapped long headline: smaller than a punchy interior heading so the long line
   stays proportionate with the graphic (Hashini: hero text too large, match the others). */
.herohome-copy h1.hero-big{ font-size:clamp(2.1rem,4vw,3.2rem); line-height:1.08; }
.herohome-copy .hero-list{ list-style:none; margin:1.4rem 0 0; padding:0; display:grid; gap:.6rem; }
.herohome-copy .hero-list li{ position:relative; padding-left:1.35rem; font-family:var(--display);
  font-weight:500; font-size:clamp(1.15rem,1.9vw,1.5rem); line-height:1.2; color:var(--ink); }
.herohome-copy .hero-list li::before{ content:''; position:absolute; left:0; top:.6em; width:6px;
  height:6px; border-radius:50%; background:var(--champ); }
.herohome-copy .hero-subsmall{ margin-top:1rem; font-family:var(--sans); font-size:1.02rem;
  line-height:1.5; color:var(--muted); max-width:42ch; }
.herohome-copy .lede{ margin-top:1.3rem; max-width:34ch; }
.herohome-copy .hero-third{ margin-top:1.1rem; color:var(--muted); font-size:1rem;
  line-height:1.7; max-width:48ch; }
.herohome-copy .btnrow{ margin-top:2rem; }

/* the placeholder graphic slot: keep the frame, drop the image in */
.hero-slot{ position:relative; aspect-ratio:4/3; border-radius:18px; overflow:hidden;
  border:1px solid var(--line-l); background:linear-gradient(168deg,#FBF7EF 0%,#ECE5D6 100%);
  box-shadow:0 34px 66px -38px rgba(27,36,49,.34);
  display:flex; align-items:center; justify-content:center; }
.hero-slot::after{ content:''; position:absolute; inset:16px; border:1px dashed var(--champ-soft);
  border-radius:11px; pointer-events:none; }
.hero-slot-note{ font-family:var(--sans); font-size:.68rem; font-weight:500; letter-spacing:.22em;
  text-transform:uppercase; color:var(--muted); text-align:center; line-height:2; }

/* Act 1 narrative, inside the film overlay */
.film .fcopy .film-narrative{ margin-top:.2rem; font-size:clamp(.86rem,1.12vw,1.02rem);
  line-height:1.55; max-width:40ch; color:rgba(245,240,230,.9); }

/* the two-pillar split (April HR admin / strategic) */
.duo{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2.4vw,26px);
  margin-top:clamp(30px,4vw,48px); }
.duo-card{ padding:clamp(24px,3vw,34px); border:1px solid var(--line-l); border-radius:14px;
  background:var(--paper); }
.tint .duo-card{ background:#FBF7EF; }
.duo-card .chip{ margin-bottom:1rem; }
.duo-card p{ margin:0; }

/* mini-card grid (feature sets, ESG integrity pillars) */
.cardgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,22px); }
.cardgrid.three{ grid-template-columns:repeat(3,1fr); }
.minicard{ padding:clamp(22px,2.6vw,30px); border:1px solid var(--line-l); border-radius:12px;
  background:var(--paper); display:flex; flex-direction:column; }
.tint .minicard{ background:#FBF7EF; }
.minicard .mc-num{ font-family:var(--sans); font-weight:500; font-size:.66rem; letter-spacing:.18em;
  color:var(--champ); margin-bottom:.8rem; }
.minicard h3{ font-size:1.14rem; line-height:1.2; }
.minicard p{ margin:.7rem 0 0; font-size:.92rem; color:var(--muted); }

/* the four selling points: a 2x2 on a champagne hairline */
.points{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(22px,3vw,40px) clamp(30px,4vw,64px); }
.point{ padding-top:1.1rem; border-top:1px solid var(--champ-soft); }
.point h3{ font-size:1.12rem; line-height:1.24; }
.point p{ margin:.7rem 0 0; font-size:.94rem; color:var(--muted); }

/* the direct-to-the-owner line */
.ownerline{ margin-top:clamp(30px,4vw,46px); border-left:2px solid var(--champ);
  padding:.2rem 0 .2rem 1.2rem; }
.ownerline p{ margin:0; font-size:1rem; color:var(--sec); max-width:64ch; }

/* the mandate notice block (April ESG) */
.notice{ margin-top:clamp(30px,4vw,44px); padding:clamp(22px,2.8vw,32px);
  border:1px solid var(--line-l); border-left:3px solid var(--champ); border-radius:12px;
  background:#FBF7EF; }
.notice p{ margin:0; color:var(--sec); max-width:none; }

/* the manifesto final line */
.mfin{ font-family:var(--display); font-style:italic; font-weight:500;
  font-size:clamp(1.4rem,3vw,2.2rem); line-height:1.3; text-align:center; color:var(--ink);
  max-width:24ch; margin:clamp(40px,5vw,72px) auto 0; }

/* the April ESG 87% stat callout: big animated number + a filling ring */
.esg-stat{ margin-top:clamp(32px,4vw,52px); display:flex; align-items:center;
  gap:clamp(28px,5vw,64px); flex-wrap:wrap;
  padding:clamp(28px,3.4vw,40px) clamp(26px,3vw,40px);
  border:1px solid var(--line-l); border-radius:16px; background:#FBF7EF; }
.esg-stat-num{ flex:1 1 260px; }
.esg-stat-num .fig{ font-family:var(--display); font-weight:600; line-height:.9;
  font-size:clamp(4rem,10vw,7rem); color:var(--ink); display:flex; align-items:flex-start; }
.esg-stat-num .fig .pct{ color:var(--champ); font-size:.55em; margin-top:.15em; }
.esg-stat-lab{ margin:.6rem 0 0; font-size:1.05rem; color:var(--sec); max-width:26ch; }
.esg-stat-cap{ margin:.7rem 0 0; font-size:.74rem; letter-spacing:.04em; color:var(--muted); }
.esg-stat-viz{ flex:0 0 auto; }
.esg-stat-viz .ring-track{ stroke:rgba(27,36,49,.1); }
.esg-stat-viz .ring-fill{ stroke:var(--champ); }
@media (max-width:560px){ .esg-stat{ flex-direction:column-reverse; align-items:flex-start; } }

@media (max-width:900px){
  .herohome-grid{ grid-template-columns:1fr; gap:34px; }
  .hero-slot{ aspect-ratio:16/10; }
  .duo{ grid-template-columns:1fr; }
  .cardgrid, .cardgrid.three{ grid-template-columns:1fr 1fr; }
  .points{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .cardgrid, .cardgrid.three{ grid-template-columns:1fr; }
}

/* ------------------------------------------------------------
   8. REDUCED MOTION: everything static, everything visible
   ------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .film{ height:auto; }
  .film .world{ position:relative; height:auto; min-height:100vh; }
  .film .stage3d{ position:relative; }
  .film .panel{ position:relative; inset:auto; height:100vh; transform:none !important; }
  .film #a2, .film #a3{ transform:none !important; }
  .film .fcopy{ position:relative; opacity:1 !important; left:auto; top:auto; bottom:auto;
    transform:none; max-width:none; max-height:none; overflow:visible;
    padding:2.4rem 6vw; background:var(--navy); }
  .film .fcopy.islight{ background:var(--paper); }
  .film .scrim{ display:none; }
  .film .man2 img, .film #a3birds .bird, .scrollcue .arr{ animation:none; }
  .film #bars .bar .tick{ opacity:1; transform:none; }
  .js [data-rise]{ opacity:1; transform:none; }
  .manifesto .mtext .w{ color:var(--ink); }
  .js .assemble .ch{ opacity:1; transform:none; filter:none; }
  .js .grow{ clip-path:inset(0); transform:none; }
  .feature{ position:static; box-shadow:none; }
  /* reduced motion: no pin, no turn, the answer cards shown outright */
  .jstage{ min-height:0; }
  .triptych{ --grow:1; --split:1; --fan:0; --flip:1; perspective:none; }
  .tpane{ transform:none; aspect-ratio:1.6; }
  .tfront{ display:none; }
  .tback{ transform:none; }
  .btn:hover, .ctapill:hover, .hub a:hover{ transform:none; }
  .route:nth-child(1), .route:nth-child(2){ transform:none; }
  .route:hover{ transform:none; }
}

/* ------------------------------------------------------------
   9. FOCUS: visible on every interactive element
   ------------------------------------------------------------ */
a:focus-visible, button:focus-visible, summary:focus-visible, details:focus-visible{
  outline:2px solid var(--deep); outline-offset:3px; border-radius:4px;
}

/* ------------------------------------------------------------
   10. PHASE 1 ADDITIONS: the sweep-in lede, the iceberg block
   ------------------------------------------------------------ */

/* the lede as lines that sweep in one at a time, rather than a paragraph */
.sweep{ list-style:none; margin:clamp(28px,3.6vw,44px) 0 0; padding:0; max-width:62ch; }
.sweep li{ position:relative; padding-left:1.6rem; margin-bottom:.95rem;
  font-family:var(--display); font-size:clamp(1.05rem,1.7vw,1.35rem); line-height:1.45; color:var(--ink); }
.sweep li::before{ content:''; position:absolute; left:0; top:.6em; width:5px; height:5px;
  border-radius:50%; background:var(--champ); }
.js .sweep li{ opacity:0; transform:translateX(-14px); }
.js .sweep li.in{ opacity:1; transform:none;
  transition:opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1); }

/* the iceberg: the seen work above a waterline, the unseen mass below */
.berg{ margin-top:clamp(30px,4vw,50px); border-radius:10px; overflow:hidden;
  border:1px solid var(--line-l); }
.berg-top{ padding:clamp(20px,2.6vw,30px); background:var(--paper); }
.berg-bottom{ padding:clamp(24px,3.2vw,40px); background:#EAF0F0;
  border-top:2px solid var(--champ-soft); }
.berg h3{ font-size:1.05rem; letter-spacing:.01em; }
.berg p{ margin:.6rem 0 0; font-size:.95rem; line-height:1.75; color:var(--muted); max-width:none; }
.berg-bottom p{ color:var(--sec); }

@media (prefers-reduced-motion:reduce){
  .js .sweep li{ opacity:1; transform:none; }
}

/* ============================================================
   12. THE PAPER-CUT LAYER (site-wide, Hashini 19 Aug 2026)
   The whole site reads as cut and torn paper: warm paper grounds
   with a fibre grain, content on floating paper cards with soft
   warm (never black) multi-layer lift shadows, torn edges where
   the tinted paper layers meet, and a few organic cut shapes.
   Matched to the Act 1/2/3 film, which is already paper-cut.
   ============================================================ */
:root{
  /* warm, soft, layered paper shadows (brown-tinted, never black) */
  --lift-sm:0 1px 1px rgba(74,52,24,.05), 0 3px 8px -3px rgba(74,52,24,.14);
  --lift:0 1px 1px rgba(74,52,24,.05), 0 7px 15px -7px rgba(74,52,24,.17),
    0 20px 38px -18px rgba(74,52,24,.14);
  --lift-lg:0 2px 3px rgba(74,52,24,.06), 0 14px 26px -12px rgba(74,52,24,.2),
    0 34px 60px -26px rgba(74,52,24,.17);
}

/* the fibre grain, laid over every ground */
.grain{ position:fixed; inset:0; z-index:9998; pointer-events:none;
  opacity:.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px; }

/* content cards float above the paper as cut/lifted pieces */
.card, .minicard, .duo-card, .notice, .esg-stat, .hub a, .route,
.hero-slot, .berg, .timeline .step .stepcard{ box-shadow:var(--lift); }
.hub a:hover, .route:hover{ box-shadow:var(--lift-lg); }

/* the tinted bands read as a torn sheet of paper laid on the ground:
   a paper-coloured torn strip covers the straight top edge, so the
   visible top of the tint is irregular. The strip matches the paper
   ground above it (#F5F0E6). */
.tint{ position:relative; }
.tint::before{ content:''; position:absolute; left:0; right:0; top:-1px; height:22px; z-index:1;
  pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='22' preserveAspectRatio='none'%3E%3Cpath d='M0,0 H120 V11 L110,16 L100,11 L90,14 L80,10 L70,15 L60,11 L50,16 L40,10 L30,14 L20,10 L10,15 L0,12 Z' fill='%23F5F0E6'/%3E%3C/svg%3E") top left / 120px 22px repeat-x; }
.tint > .wrap{ position:relative; z-index:2; }

/* the tinted layer also casts a faint shadow onto the ground below,
   so it reads as a raised piece rather than a colour change */
.tint::after{ content:''; position:absolute; left:0; right:0; top:0; height:14px; z-index:0;
  pointer-events:none; box-shadow:0 -8px 18px -6px rgba(74,52,24,.12); }

/* the navy footer is a cut sheet of dark paper: warm lift, torn top */
footer{ box-shadow:var(--lift-lg); position:relative; }
footer::before{ content:''; position:absolute; left:0; right:0; top:-1px; height:20px; z-index:3;
  pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='20' preserveAspectRatio='none'%3E%3Cpath d='M0,0 H120 V10 L108,14 L96,9 L84,13 L72,9 L60,14 L48,10 L36,13 L24,9 L12,14 L0,11 Z' fill='%23F5F0E6'/%3E%3C/svg%3E") top left / 120px 20px repeat-x; }
footer .fgrid{ position:relative; z-index:4; }

/* the solid button is a small cut-paper chip that lifts */
.btn.solid{ box-shadow:var(--lift-sm); }
.btn.solid:hover{ box-shadow:var(--lift); }

/* the marks read as pressed into the paper */
.wordmark img, footer .fseal{ filter:drop-shadow(0 1px 0 rgba(255,255,255,.4)); }

/* organic cut-paper shapes behind the home hero, each its own soft shadow */
.herohome{ position:relative; overflow:clip; }
.herohome::before{ content:''; position:absolute; z-index:0; pointer-events:none;
  width:min(38vw,440px); aspect-ratio:1; right:-6%; top:8%;
  background:rgba(198,172,114,.16);
  border-radius:47% 53% 44% 56% / 55% 46% 54% 45%;
  filter:drop-shadow(0 24px 40px rgba(74,52,24,.1)); }
.herohome::after{ content:''; position:absolute; z-index:0; pointer-events:none;
  width:min(20vw,220px); aspect-ratio:1; left:-5%; bottom:-8%;
  background:rgba(27,36,49,.05);
  border-radius:58% 42% 47% 53% / 43% 57% 43% 57%; }
.herohome .wrap{ position:relative; z-index:1; max-width:1420px; }

/* a cut-paper accent behind the closing band */
.band.tint#start{ overflow:clip; }

@media (prefers-reduced-motion:reduce){
  .grain{ display:none; }   /* the grain is static, but drop it if motion is reduced for calm */
}

/* ------------------------------------------------------------
   13. LEGAL PROSE (Privacy Policy, Terms & Conditions)
   ------------------------------------------------------------ */
.legal{ max-width:72ch; }
.legal h2{ font-size:1.28rem; line-height:1.25; margin-top:clamp(28px,3.2vw,42px); }
.legal h2:first-child{ margin-top:0; }
.legal p{ margin-top:.75rem; color:var(--sec); }
.legal .intro{ font-family:var(--display); font-style:italic; font-size:1.15rem; color:var(--sec);
  border-left:2px solid var(--champ); padding-left:1.2rem; max-width:60ch; }

/* ------------------------------------------------------------
   14. FAQ TOOLS: search + section jumps + categorised accordion
   ------------------------------------------------------------ */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.faq-tools{ display:flex; flex-wrap:wrap; align-items:center; gap:16px 24px;
  margin-bottom:clamp(30px,4vw,44px); }
.faq-search{ flex:1 1 320px; }
.faq-search input{ width:100%; font-family:var(--sans); font-size:1rem; color:var(--ink);
  background:var(--ivory); border:1px solid var(--line-l); border-radius:999px;
  padding:13px 20px; box-shadow:var(--lift-sm); transition:border-color .18s ease; }
.faq-search input::placeholder{ color:var(--muted); }
.faq-search input:focus{ outline:2px solid var(--champ); outline-offset:1px; border-color:var(--champ); }
.faq-jumps{ display:flex; flex-wrap:wrap; gap:.5rem; }
.faq-jumps a{ font-family:var(--sans); font-size:.72rem; font-weight:500; letter-spacing:.06em;
  text-decoration:none; color:var(--sec); border:1px solid var(--line-l); border-radius:999px;
  padding:.5rem .9rem; background:var(--paper); transition:border-color .18s ease, color .18s ease; }
.faq-jumps a:hover{ border-color:var(--champ); color:var(--ink); }
.faq-cat{ margin-bottom:clamp(30px,4vw,48px); scroll-margin-top:96px; }
.faq-cat-head{ font-size:1.1rem; letter-spacing:.02em; color:var(--deep);
  padding-bottom:.6rem; border-bottom:1px solid var(--champ-soft); margin-bottom:.4rem; }
.faq-none{ font-size:1rem; color:var(--muted); padding:1rem 0; }
.faq-none a{ color:var(--deep); }

/* ------------------------------------------------------------
   15. HOME PRODUCT SECTIONS (April HR / HR Consultancy / April ESG)
   Big, visible product heading + a clean wide bullet list + a link.
   ------------------------------------------------------------ */
.product-h{ font-size:clamp(2.1rem,4.6vw,3.5rem); line-height:1.03; letter-spacing:.002em; }
.opener .product-h + .lede{ margin-top:1.4rem; }
.rules.wide{ max-width:64ch; margin-top:clamp(26px,3.4vw,40px); }
.rules.wide li{ font-size:1rem; }

/* ------------------------------------------------------------
   PAPERCUT SECTION DIVIDER (home page only)
   A layered cut-paper wave settles along the bottom of each home
   content band. It sits BEHIND the copy (wrap z-index 2) and the
   band carries extra bottom padding, so it never crowds the text.
   Scoped to body.has-film so only the home page is affected.
   ------------------------------------------------------------ */
body.has-film .band{ position:relative; padding-bottom:clamp(150px,17vw,220px); }
body.has-film .band > .wrap{ position:relative; z-index:2; }
body.has-film .papercut{ position:absolute; left:0; right:0; bottom:0; z-index:1;
  pointer-events:none; line-height:0; height:clamp(64px,8vw,116px); }
body.has-film .papercut svg{ display:block; width:100%; height:100%; }
@media (max-width:720px){
  body.has-film .band{ padding-bottom:clamp(120px,26vw,172px); }
  body.has-film .papercut{ height:clamp(48px,12vw,82px); }
}

/* ------------------------------------------------------------
   INNER-PAGE TYPE SIZE (audit 2026-08-20)
   Section headlines on the inner pages are often full sentences, so at the
   old display sizes they read as a wall of oversized type. Bring them down.
   Scoped to body:not(.has-film) so the home page keeps its display sizes;
   .hero h1 is inner-page only already (home uses .herohome).
   ------------------------------------------------------------ */
.hero h1{ font-size:clamp(2rem,4vw,3.05rem); line-height:1.05; }
body:not(.has-film) h2{ font-size:clamp(1.6rem,2.7vw,2.3rem); line-height:1.14; }
body:not(.has-film) .opener h2{ font-size:clamp(1.75rem,3vw,2.55rem); line-height:1.1; }
body:not(.has-film) .closer h2{ font-size:clamp(1.75rem,3.1vw,2.5rem); line-height:1.08; }

/* ------------------------------------------------------------
   THREE-PILLAR HERO VIDEO (home page, added 2026-08-20)
   One video (cream + gold-flow map + navy pillars, no baked text) with the
   three service names as live HTML overlays at the locked pillar centres.
   Name type scales to the video box (cqi), not the viewport, so it stays in
   proportion whatever width the hero column is.
   ------------------------------------------------------------ */
.hero-pillars{ aspect-ratio:1800/1005; border:0; display:block;
  background:#F5F0E6; box-shadow:0 30px 60px -30px rgba(27,36,49,.28);
  container-type:inline-size; }
.hero-pillars::after{ display:none; }
.hero-vid{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.hero-name{ position:absolute; top:40%; transform:translateX(-50%); text-align:center;
  color:#fff; white-space:nowrap; z-index:2; pointer-events:none; }
.hero-name .hn-t{ display:block; font-family:var(--display); font-weight:600;
  font-size:clamp(10px,2.28cqi,21px); line-height:1.05; letter-spacing:.005em; }
.hero-name .hn-rule{ display:block; width:clamp(14px,2.8cqi,22px); height:1.5px;
  background:var(--champ); margin:6px auto 5px; opacity:.95; }
.hero-name .hn-s{ display:block; font-family:var(--sans); font-weight:400;
  font-size:clamp(6.5px,1.24cqi,11px); letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.84); }
@media (prefers-reduced-motion:reduce){
  .hero-vid{ display:none; }
  .hero-pillars{ background:#F5F0E6 url('/hero/mockup-cream-hero.png') center/cover no-repeat; }
}