/* ==========================================================================
   Greenleaf Hospitality Group — v2 site stylesheet
   Built from the component library (preview/library.html). Every value below
   comes from the token block; nothing is hard-coded per page.

   --spearmint is the brand light blue (#61b6e3), taken from the deck.
   It carries enough contrast on the dark surfaces and as a button fill, but
   not as text on cream or white — light-surface accents use --green.
   Replace the one hex and it propagates site-wide.
   ========================================================================== */

:root {
  /* Type. mr-eaves-modern is the brand face, served from GHG's Adobe kit
     (sch4rar) linked in the head. Fallbacks stay in the stack so a blocked
     or slow kit degrades to the system sans rather than to a serif. */
  --ui:"mr-eaves-modern", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --display:"mr-eaves-modern", "Helvetica Neue", Arial, sans-serif;
  /* Letter sizes of the system face the site was designed in. Mr Eaves has a
     short lowercase (x-height .341em against .528) and tall capitals, so one
     font-size cannot match both; font-size-adjust scales it to whichever
     metric the text is made of. See "type fitting" near the end. */
  --fit-lower:ex-height .53;
  --fit-caps:cap-height .71;
  --serif:Georgia, "Times New Roman", serif;
  --mono:ui-monospace, SFMono-Regular, Menlo, monospace;

  --green:#178341; --green-900:#116634; --green-deep:#364448; --green-950:#2a363a;
  --ink:#364448;
  --spearmint:#61b6e3; --spearmint-lift:#7fc6ea; --spearmint-ink:#1f2e33;
  /* The accent carries small type on dark grounds too, and there it has to
     clear 4.5:1. #61b6e3 lands at 4.48 flat on --green-deep and 3.73 over a
     bright patch of hero photo, so eyebrows use a lighter tint of the same
     blue: 5.83 and 4.85. Buttons and chips keep --spearmint, which is doing
     the opposite job on light grounds. */
  --spearmint-bright:#8fcdec;
  --gold:#dcbe3b; --gold-dark:#c9ab2a; --gold-ink:#2a2205;

  --cream:#f3f4fa; --paper:#e6e9f2; --panel:#edeff7; --white:#fff;
  --body:#59646b; --muted:#656e75; --sage:#bddcc9; --sage-light:#d0e6ce;
  /* --green is the deck's green and carries the fills and large type. Small
     green text on cream lands at 4.39:1, just under AA, so the eyebrows use
     this slightly darker cut instead. --muted was 3.62:1 on white before the
     palette change and is now 5.20:1. */
  --green-ink:#146f37;

  --info:#2f6f8f; --success:#148742; --warn:#b8860b; --error:#b0413e;
  --line:rgba(54,68,72,.14); --line-strong:rgba(54,68,72,.28); --line-dark:rgba(255,255,255,.18);

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --s7:48px; --s8:64px; --s9:96px; --s10:128px;
  --r-sm:4px; --r-md:10px; --r-lg:16px; --r-xl:22px; --r-pill:999px;
  --e1:0 2px 6px rgba(54,68,72,.08);
  --e2:0 10px 24px -12px rgba(54,68,72,.30);
  --e3:0 20px 44px -26px rgba(54,68,72,.42);
  --e4:0 30px 60px -28px rgba(54,68,72,.50);
  /* Hover-only bloom. The -28px spread on e4 keeps that shadow tucked under
     the card, so stepping e3 -> e4 reads as static however long it animates;
     e5 pulls the spread back to -18px and widens the blur so the shadow
     actually spreads out from under the card as it lifts. */
  --e5:0 42px 80px -18px rgba(54,68,72,.46);
  --maxw:1180px; --nav-h:74px;
}

*,*::before,*::after { box-sizing:border-box; }
/* Sizes throughout are the ones the site was designed at. Mr Eaves is held to
   them by font-size-adjust rather than by inflating the sizes: body sets
   --fit-lower, so lowercase lands at the original's height in every face in
   the stack, fallbacks included. */
html { scroll-behavior:smooth; }
body { margin:0; background:var(--cream); color:var(--body); font-family:var(--ui); font-size:1.0625rem; line-height:1.8; font-size-adjust:var(--fit-lower); -webkit-font-smoothing:antialiased; }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{animation:none!important;transition:none!important} }
img { max-width:100%; display:block; }

/* Heading colour cascades through one inherited custom property, so a dark
   ground only has to declare --heading once and every heading inside it —
   element or utility class — follows. Light cards sitting on a dark section
   revert it back. Avoids a specificity war between `h2` and `.h2-bold`. */
h1,h2,h3,h4,h5 { color:var(--heading,var(--ink)); }
.h1,.h2,.h2-bold,.h3,.display { color:var(--heading,var(--ink)); }
.hero,.hero-page,.on-dark,.bg-deep,.bg-950,.bg-ink,.split .tx,.tl-lead,.tl-stat,.tl-cta { --heading:#fff; }
.split.light .tx,.tl-quote,.feature,.c-brand,.c-story,.c-job,.c-news,.c-event,.rung,.modal { --heading:var(--ink); }
.tl-cta { --heading:var(--spearmint-ink); }

.wrap { max-width:var(--maxw); margin:0 auto; padding:0 var(--s5); }
.wrap-wide { max-width:1400px; margin:0 auto; padding:0 var(--s5); }
.sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skiplink { position:absolute; left:8px; top:-70px; z-index:300; background:var(--ink); color:var(--cream); padding:12px 22px; border-radius:var(--r-sm); text-decoration:none; font-weight:700; transition:top .2s; }
.skiplink:focus { top:8px; }
:where(a,button,summary,input,select,textarea):focus-visible { outline:3px solid var(--green); outline-offset:3px; border-radius:4px; }

/* ---------- type ---------- */
.eyebrow { font-size:.86rem; letter-spacing:.2em; text-transform:uppercase; font-weight:700; margin:0 0 var(--s3); color:var(--muted); }
.eyebrow-mint { color:var(--spearmint-bright); }
.eyebrow-green { color:var(--green-ink); }
/* Positive tracking, not the tight display default: at -.03em the hero's
   KALAMAZOO fused into one mass. The K/A and L/A pairs are the binding
   ones, since mr-eaves' L arm runs straight into the A diagonal at the
   baseline. Measured against the rendered font: both clear at .014em. */
.display { font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:clamp(2.6rem,7.5vw,6rem); line-height:.9; letter-spacing:.02em; margin:0; }
/* Optical kerning for the A's. Uniform tracking cannot even this word out:
   A's diagonal wedges into the flat stems of K and L, so K/A and L/A read
   tight at the baseline however far the whole line is tracked out, while
   O/O only gets loose. The font carries almost no kern data of its own
   (ZO is the only pair), so the space has to be added here. */
.display .ak { margin:0 .045em; }
.h1 { font-family:var(--display); font-weight:800; font-size:clamp(2.1rem,4.4vw,3.4rem); line-height:1.36; letter-spacing:-.025em; margin:0 0 var(--s4); text-wrap:balance; }
.h2 { font-family:var(--serif); font-weight:500; font-size:clamp(1.7rem,3.2vw,2.6rem); line-height:1.08; letter-spacing:-.015em; margin:0 0 var(--s4); text-wrap:balance; }
.h2-bold { font-family:var(--display); font-weight:800; font-size:clamp(1.7rem,3.2vw,2.6rem); line-height:1.38; letter-spacing:-.025em; margin:0 0 var(--s4); text-wrap:balance; }
.h3 { font-family:var(--display); font-weight:800; font-size:1.42rem; line-height:1.5; letter-spacing:-.01em; margin:0 0 var(--s2); }
.lead { font-size:1.16rem; line-height:1.75; max-width:56ch; }
.muted { color:var(--muted); }
.on-dark { color:#fff; } .on-dark p { color:var(--sage-light); } .on-dark .h2,.on-dark .h1,.on-dark .h3 { color:#fff; }

/* ---------- FPO markers ---------- */
.fpo-copy { position:relative; display:block; border-left:3px solid var(--gold); background:rgba(220,190,59,.10); padding:var(--s4) var(--s5); border-radius:0 var(--r-md) var(--r-md) 0; }
.fpo-copy::before { content:"FPO COPY"; display:block; font-size:.68rem; letter-spacing:.18em; font-weight:800; color:var(--gold-dark); margin-bottom:6px; }
.on-dark .fpo-copy { background:rgba(220,190,59,.14); }
.on-dark .fpo-copy::before { color:var(--gold); }
.fpo-tag { position:absolute; left:10px; top:10px; z-index:4; font-size:.62rem; font-weight:800; letter-spacing:.14em; padding:4px 9px; border-radius:var(--r-pill); background:var(--gold); color:var(--gold-ink); }
.has-fpo { position:relative; }

/* ---------- buttons ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:9px; font:inherit; font-weight:800; font-size:.98rem; letter-spacing:.03em; text-transform:uppercase; padding:14px 28px; border-radius:var(--r-sm); border:2px solid transparent; text-decoration:none; cursor:pointer; transition:background .18s,color .18s,border-color .18s; }
/* Variants are doubled up (.btn.btn-x) so a button carries its own colour
   wherever it is placed. Context rules like `.site-foot a` and `.drawer a`
   are (0,1,1) and would otherwise beat a single (0,1,0) variant class and
   repaint the label — which silently dropped the footer CTA to 1.29:1.
   Hover states are doubled again to clear `.site-foot a:hover` at (0,2,1). */
.btn.btn-primary { background:var(--green); color:#fff; } .btn.btn-primary:hover { background:var(--green-900); color:#fff; }
.btn.btn-mint { background:var(--spearmint); color:var(--spearmint-ink); } .btn.btn-mint:hover { background:var(--spearmint-lift); color:var(--spearmint-ink); }
/* White fill, for a button on a saturated brand ground. --spearmint on
   --green is 2.14:1, under the 3:1 a control needs against its own ground;
   white is 4.82:1 there. */
.btn.btn-white { background:#fff; color:var(--green-900); } .btn.btn-white:hover { background:var(--cream); color:var(--green-900); }
.btn.btn-gold { background:var(--gold); color:var(--gold-ink); } .btn.btn-gold:hover { background:var(--gold-dark); color:var(--gold-ink); }
.btn.btn-outline { border-color:var(--ink); color:var(--ink); } .btn.btn-outline:hover { background:var(--ink); color:var(--cream); }
.btn.btn-ghost { border-color:rgba(255,255,255,.55); color:#fff; } .btn.btn-ghost:hover { border-color:var(--spearmint); color:var(--spearmint); }
.btn-sm { font-size:.86rem; padding:10px 19px; }
.btn-lg { font-size:1.06rem; padding:17px 36px; }
.btn-block { display:flex; width:100%; }
.link-underline { display:inline-block; font-size:.9rem; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:var(--ink); text-decoration:none; border-bottom:2px solid var(--spearmint); padding-bottom:4px; }
.link-underline:hover { color:var(--green-900); }
.on-dark .link-underline { color:#fff; }
.on-dark .link-underline:hover { color:var(--spearmint); }
.btn-row { display:flex; flex-wrap:wrap; gap:var(--s3); }

/* ---------- header ---------- */
.site-head { position:fixed; inset:0 0 auto 0; z-index:100; transition:background .3s,border-color .3s,backdrop-filter .3s; border-bottom:1px solid transparent; }
.site-head .bar { display:flex; align-items:center; justify-content:space-between; gap:var(--s5); height:var(--nav-h); max-width:1400px; margin:0 auto; padding:0 var(--s5); }
/* Wordmark is a white PNG — the bar is dark in both states (blurred over a
   hero, solid deep green once scrolled), so one asset covers both. */
.site-head .logo { display:flex; align-items:center; flex:none; text-decoration:none; }
.site-head .logo img { height:34px; width:auto; }
.drawer .logo img { height:30px; width:auto; }
/* Gap tightens with the viewport so seven items compress gracefully instead
   of snapping at one breakpoint. Buys roughly 90px before collapse. */
.site-head nav ul { display:flex; align-items:center; gap:clamp(16px,2.2vw,32px); list-style:none; margin:0; padding:0; }
.site-head nav a { color:#fff; text-decoration:none; font-size:.96rem; font-weight:600; letter-spacing:.02em; padding-bottom:4px; border-bottom:2px solid transparent; white-space:nowrap; }
.site-head nav a:hover { color:var(--spearmint); }
.site-head nav a[aria-current="page"] { border-bottom-color:var(--spearmint); }

/* Careers submenu. The parent stays a link; the panel is a hover/focus
   disclosure, so nothing is only reachable with a pointer — tabbing into any
   child opens it via :focus-within. */
.site-head .has-sub { position:relative; }
/* The parent link stays a plain inline box like its siblings. Making it
   inline-flex to hold the caret grew it to the 14px icon's height and shifted
   its baseline, so Careers sat about a pixel above every other nav item and
   its underline with it. The caret is inline-block instead — enough for the
   rotate to apply, without the anchor changing shape. */
.site-head .caret { display:inline-block; width:12px; height:12px; margin-left:5px;
  vertical-align:baseline; transition:transform .2s; }
.site-head .has-sub:hover .caret,
.site-head .has-sub:focus-within .caret { transform:rotate(180deg); }
/* Selector has to out-rank `.site-head nav ul` (0,1,2), which would otherwise
   lay the panel out as another flex row in the bar. */
.site-head nav ul.subnav { display:block; }
.subnav { position:absolute; top:100%; left:calc(var(--s3) * -1); min-width:220px; margin:0;
  padding:var(--s3) 0; list-style:none; background:var(--green-deep);
  border:1px solid rgba(255,255,255,.14); border-radius:var(--r-sm);
  box-shadow:var(--e4); opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .18s,transform .18s,visibility .18s; z-index:120; }
.site-head .has-sub:hover .subnav,
.site-head .has-sub:focus-within .subnav { opacity:1; visibility:visible; transform:translateY(0); }
/* A gap between the label and the panel would close the menu as the pointer
   crosses it; this bridges it without moving anything. */
.site-head .has-sub::after { content:""; position:absolute; top:100%; left:0; right:0; height:14px; }
.subnav li { margin:0; }
.subnav a { display:block; padding:9px var(--s5); font-size:.93rem; font-weight:500;
  white-space:nowrap; border-bottom:0; }
.subnav a:hover { background:rgba(255,255,255,.08); color:var(--spearmint); }

/* Drawer children sit indented under their parent rather than behind a second tap. */
.drawer li.sub a { padding-left:var(--s5); font-size:.98rem; opacity:.85; }
.site-head .bar > .btn { white-space:nowrap; flex:none; }
/* 48px target — the old 1.6rem glyph gave roughly 32×30, under the 44px
   minimum. SVG rather than ☰ so it renders identically across platforms. */
.site-head .burger { display:none; align-items:center; justify-content:center; width:56px; height:56px; margin-right:-12px; padding:0; background:none; border:0; border-radius:var(--r-sm); color:#fff; cursor:pointer; }
.site-head .burger svg { width:36px; height:36px; display:block; }
.site-head .burger:hover { color:var(--spearmint); }
/* over-hero: transparent + blur. scrolled/interior: solid. */
.site-head.is-over { background:rgba(10,25,16,.30); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom-color:rgba(255,255,255,.16); }
.site-head.is-solid { background:var(--green-deep); border-bottom-color:rgba(255,255,255,.10); }
body.has-fixed-head { padding-top:0; }
body.interior { padding-top:0; }

/* mobile drawer */
.drawer { position:fixed; inset:0 0 0 auto; width:min(340px,88vw); background:var(--green-deep); color:#fff; z-index:200; padding:var(--s5); transform:translateX(102%); transition:transform .3s cubic-bezier(.2,.8,.2,1); overflow-y:auto; }
.drawer.open { transform:none; }
/* Closed, the drawer is only slid off-screen, which on its own leaves every
   link in it in the Tab order and the screen reader's reading order — a
   keyboard user tabbed through a dozen invisible links on every page, desktop
   included. visibility:hidden takes it out of both. The delay holds it
   visible until the slide-out finishes, and is dropped when it opens. */
.drawer { visibility:hidden; transition:transform .3s cubic-bezier(.2,.8,.2,1),visibility 0s linear .3s; }
.drawer.open { visibility:visible; transition:transform .3s cubic-bezier(.2,.8,.2,1),visibility 0s; }
.drawer-head { display:flex; align-items:center; justify-content:space-between; padding-bottom:var(--s4); border-bottom:1px solid var(--line-dark); }
/* SVG rather than a × glyph: the character sits off-centre in its own em box,
   so it reads high or low no matter how the button is flex-centred. A path in
   a square viewBox is centred geometrically and matches the burger's weight. */
.drawer .x { display:flex; align-items:center; justify-content:center; width:56px; height:56px; margin-right:-12px; padding:0; background:none; border:0; color:#fff; cursor:pointer; border-radius:var(--r-sm); }
.drawer .x svg { width:32px; height:32px; display:block; }
.drawer .x:hover { color:var(--spearmint); }
.drawer ul { list-style:none; margin:var(--s4) 0 0; padding:0; }
/* 10px, not 14. The list is fourteen items, and at 14px it ran past an
   812px phone; at 10px the whole menu fits on screen. Shorter phones aside,
   the drawer still scrolls. */
.drawer a { display:block; padding:10px 2px; color:#fff; text-decoration:none; font-family:var(--display); font-weight:800; font-size:1.25rem; border-bottom:1px solid rgba(255,255,255,.09); }
.drawer a:hover { color:var(--spearmint); }
/* Doubled up to clear `.drawer a` at (0,1,1), which would otherwise force
   display:block and leave the label at text-align:start — .btn centres via
   justify-content, which is inert on a non-flex box. */
.drawer .btn { display:flex; margin-top:var(--s5); padding:14px 28px; border-bottom-color:transparent; }
.scrim { position:fixed; inset:0; background:rgba(6,15,9,.55); z-index:150; opacity:0; pointer-events:none; transition:opacity .3s; }
.scrim.show { opacity:1; pointer-events:auto; }

/* ---------- social row (shared: footer + drawer) ---------- */
/* 48px tap targets, comfortably clearing the 44px WCAG 2.5.8 minimum, with the
   glyph at 26px so the padding stays an 11px ring. The row is pulled left by
   that same 11px so the icons optically align with the text above them rather
   than sitting inset by their own padding.

   Scoped to both parents rather than a bare `.social a`: both contexts set a
   broad context rule at (0,1,1) — `.site-foot a` and `.drawer a` — and a
   single-class selector would only tie with those and be settled by source
   order. `.drawer a` in particular would otherwise stack the icons as
   full-width blocks with a divider under each, so its display, padding, and
   border-bottom all have to be unwound explicitly. */
.site-foot .social, .drawer .social { display:flex; gap:var(--s2); list-style:none; margin:var(--s4) 0 0 -11px; padding:0; }
.site-foot .social a, .drawer .social a { display:flex; align-items:center; justify-content:center; width:48px; height:48px; padding:0; border:0; border-radius:var(--r-sm); }
.site-foot .social svg, .drawer .social svg { width:26px; height:26px; display:block; }
.site-foot .social a:hover, .drawer .social a:hover { color:#fff; background:rgba(255,255,255,.08); }

/* ---------- heroes ---------- */
.hero { position:relative; min-height:min(92vh,860px); display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; background:#06120b; color:#fff; }
.hero .media { position:absolute; inset:0; }
.hero .media img,.hero .media video { width:100%; height:100%; object-fit:cover; }
/* The film sits on top of the poster and fades in once it is actually
   playing, so a slow start shows the still rather than a black rectangle. */
.hero .media video { position:absolute; inset:0; opacity:0; transition:opacity .6s ease; }
.hero .media video.playing { opacity:1; }
/* A flat dark-grey wash under the two gradients. The gradients alone leave the
   middle of the frame at full brightness, which is what made a busy photograph
   compete with the headline; this evens the whole frame out so the type is the
   thing you look at. Grey rather than black, so the photograph keeps its
   colour instead of going muddy. */
.hero .sc-w { position:absolute; inset:0; background:rgba(34,40,42,.56); }
.hero .sc-t { position:absolute; inset:0 0 auto 0; height:38%; background:linear-gradient(180deg,rgba(0,0,0,.62),transparent); }
.hero .sc-b { position:absolute; inset:auto 0 0 0; height:68%; background:linear-gradient(180deg,transparent 0,rgba(0,0,0,.18) 26%,rgba(0,0,0,.55) 56%,rgba(0,0,0,.82) 80%,rgba(0,0,0,.93) 100%); }
.hero .inner { position:relative; z-index:3; max-width:1400px; width:100%; margin:0 auto; padding:0 var(--s5) clamp(48px,6vw,88px); }
.hero .kick { display:inline-block; font-size:.9rem; letter-spacing:.16em; text-transform:uppercase; background:var(--spearmint); color:var(--spearmint-ink); padding:7px 14px; border-radius:var(--r-sm); font-weight:800; margin:0 0 var(--s5); }
.hero .sub { margin:var(--s5) 0 var(--s6); max-width:52ch; font-size:1.18rem; color:#e8efe4; text-shadow:0 1px 14px rgba(0,0,0,.6); }
.hero .loc { position:absolute; left:var(--s5); bottom:var(--s4); z-index:4; display:flex; align-items:center; gap:9px; font-size:.84rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.72); font-weight:600; }
.hero .loc .pin { width:5px; height:5px; border-radius:50%; background:var(--spearmint); box-shadow:0 0 0 4px rgba(97,182,227,.24); }
.hero-page { position:relative; min-height:min(58vh,460px); display:flex; align-items:flex-end; overflow:hidden; background:#06120b; color:#fff; }
.hero-page img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* Subject sits high in the frame — see hero_page() in build.py. Biased upward
   rather than pinned to the very top: the band only shows about 30% of a 3:2
   photo's height, so `0` lands on foreheads just as center lands on chins.
   25% puts the visible window at roughly 18–47% of the image, which is where
   the faces in these three photos actually are. */
/* The about hero is taller than the rest. Its photograph is framed tight to
   the top of the frame, and at 460px a 3:2 image loses half its height, which
   cropped the subject's head off. More height means less of the picture is
   thrown away. */
.hero-page.tall { min-height:min(78vh,700px); }
.hero-page img.align-5 { object-position: 50% 5%; }
.hero-page img.align-15 { object-position: 50% 15%; }
.hero-page img.align-25 { object-position: 50% 25%; }
/* The downtown frame is 4:3, so the band takes 57% of it. 35% keeps the
   whole skyline with headroom above the tower and still shows the creek;
   50% clips the tower against the top edge. */
.hero-page img.align-35 { object-position: 50% 35%; }
/* The reverse case: a photo with no subject to protect, cropped instead for
   what sits behind the copy. Centred, this one puts a lit boom lift under the
   eyebrow at 2.96:1. Dropping to 65% seats the copy on the dark arena floor —
   7.52:1 worst case — and still holds the whole bowl in frame. */
.hero-page img.align-65 { object-position: 50% 65%; }
/* Measured, not eyeballed. For every hero page at 375/600/768/1000/1360 this
   finds the brightest pixel behind each line of copy and solves for the alpha
   that pulls it under the AA threshold — 4.5:1 for the eyebrow and lead, 3:1
   for the h1, which is large text. The worst case across all of them is 0.678,
   the eyebrow on the groundbreaking release, and the eyebrow can sit as high
   as 18.8% of the band on a phone. So the curve holds 0.70 from 18% to 88%
   rather than dipping to 0.30 in the middle the way it used to.
   The old curve was tuned against one page at one width and failed the eyebrow
   on nine of ten hero pages, at desktop widths as well as phone. Re-measure
   before lightening this: a hero photo with a bright patch mid-frame is what
   sets the number, so a new photo can move it. */
/* The one line sized for contrast rather than to the original design. Below
   WCAG's large-text threshold of 18.66px bold, the hero eyebrow is held to
   4.5:1 and was the single line forcing the scrim darker than everything
   else needed. 18.8px is over the line at font-weight 700, which drops it to
   3:1 and lets the photographs stay visible — the scrim below is tuned to
   that. Left unfitted so it renders exactly as it did when that was measured;
   fitting it by cap height would only make it larger. */
.hero-page .eyebrow { font-size:1.175rem; font-size-adjust:none; }
.hero-page .sc { position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.60) 0,rgba(0,0,0,.64) 18%,rgba(0,0,0,.64) 88%,rgba(0,0,0,.92) 100%); }
/* padding-top guarantees the bottom-aligned content clears the fixed header
   on short viewports, where 58vh can drop below the header + copy height. */
.hero-page .inner { position:relative; z-index:2; max-width:1400px; width:100%; margin:0 auto; padding:calc(var(--nav-h) + var(--s5)) var(--s5) clamp(34px,4.5vw,58px); }
.hero-page .h1 { color:#fff; margin-bottom:var(--s4); }
.hero-page .lead { color:#e2ebde; }

/* Benefits sits directly above the roles it is arguing for, and ends on a
   quiet line of small print, so the standard 108px-a-side seam opened a void
   between them — 216px of nothing at 1440. Halved on both sides of that one
   join; the band colour changing is already doing the work of marking it.
   Scoped to this seam, so the page's rhythm everywhere else is untouched. */
#benefits { padding-bottom:clamp(32px,3.4vw,52px); }
#benefits + .section { padding-top:clamp(32px,3.4vw,52px); }

/* Stat sourcing. Small and quiet, but the link has to be findable — a figure
   with an unreachable source is not much better than an uncited one. */
/* Source notes started life on a dark band, where --sage reads. On cream the
   same colour is 1.22:1 and effectively invisible, so the default is now the
   light-ground colour and the dark band overrides it. */
.sources { font-size:.86rem; color:var(--muted); max-width:80ch; }
.sources a { color:inherit; text-decoration:underline; text-underline-offset:2px; }
.sources a:hover { color:var(--green-ink); }
.on-dark .sources { color:var(--sage); }
.on-dark .sources a:hover { color:var(--spearmint); }

/* ---------- leadership quick facts ---------- */
/* Native <details> on the card, same as the job accordions: no JavaScript
   needed, and the summary is already a keyboard control. Borrows the
   disclosure arrow from .jb-more rather than inventing a second one. */
.qh { margin-top:var(--s4); border-top:1px solid var(--line); padding-top:var(--s3); }
.qh summary { display:flex; align-items:center; gap:8px; width:fit-content; cursor:pointer; list-style:none;
  font-size:.9rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:var(--green-ink); }
.qh summary::-webkit-details-marker { display:none; }
.qh summary::after { content:""; width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px); transition:transform .2s; }
.qh[open] summary::after { transform:rotate(-135deg) translate(-2px,-2px); }
.qh summary:hover { color:var(--green-900); }
.qh summary:focus-visible { outline:2px solid var(--green); outline-offset:3px; border-radius:2px; }
/* Bulleted rather than a definition list: five short lines read faster than
   five labelled paragraphs, and the label now sits inline with its answer
   instead of on a line of its own. */
.qh ul { margin:var(--s3) 0 0; padding-left:1.15em; }
.qh li { margin-bottom:var(--s2); font-size:.95rem; color:var(--body); }
.qh li:last-child { margin-bottom:0; }
.qh li b { color:var(--ink); font-weight:700; }
@media (prefers-reduced-motion:reduce){ .qh summary::after { transition:none; } }

/* ---------- brief brand pages ---------- */
/* Two brands have no site of their own, so they get a short page here. A
   reading column like the press release, with a fact list rather than prose
   for the things a visitor is actually looking up. */
.brand-brief { max-width:68ch; margin:0 auto; }
.brand-brief .lead { margin:0 0 var(--s6); }
.facts { margin:0 0 var(--s6); display:grid; grid-template-columns:minmax(9rem,auto) 1fr;
  gap:var(--s3) var(--s5); align-items:baseline; }
.facts dt { font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:var(--green); }
.facts dd { margin:0; }
.brand-brief .brief-more { margin:0 0 var(--s4); }
.brand-brief h2 { margin:var(--s7) 0 var(--s4); }
/* Hours get a panel rather than a row in the fact list: three lines is too
   much for a definition line, and on a page about a cafe it is the thing
   most people came to check. */
.hours-card { margin:0 0 var(--s6); padding:var(--s5) var(--s6); border:1px solid var(--line);
  border-left:3px solid var(--spearmint); border-radius:var(--r-md); background:var(--cream); }
/* Scoped past `.brand-brief h2` at (0,1,1), which was landing its 48px
   section margin inside the card and pushing the word Hours off the top. */
.brand-brief .hours-title { margin:0 0 var(--s3); font-family:var(--ui); font-size:.8rem; letter-spacing:.14em;
  text-transform:uppercase; font-weight:700; color:var(--green); }
.hours { margin:0; display:grid; grid-template-columns:auto 1fr; gap:var(--s2) var(--s6); }
.hours dt { color:var(--body); }
.hours dd { margin:0; font-variant-numeric:tabular-nums; color:var(--heading); font-weight:600; justify-self:start; }
@media (max-width:600px){ .hours { grid-template-columns:1fr; gap:0; }
  .hours dt { margin-top:var(--s2); } }
/* Numbered flow and the practical tips. Counters rather than list-style so the
   numeral can take the accent and sit level with the first line. */
.steps { list-style:none; counter-reset:step; margin:0 0 var(--s5); padding:0; }
.steps li { counter-increment:step; position:relative; padding-left:2.4rem; margin-bottom:var(--s3); }
.steps li::before { content:counter(step); position:absolute; left:0; top:0; width:1.6rem; height:1.6rem;
  border-radius:50%; background:var(--spearmint); color:var(--spearmint-ink);
  font-size:.85rem; font-weight:700; display:flex; align-items:center; justify-content:center; }
.tips { list-style:none; margin:0 0 var(--s5); padding:0; }
.tips li { position:relative; padding-left:1.5rem; margin-bottom:var(--s3); }
.tips li::before { content:""; position:absolute; left:0; top:.62em; width:7px; height:7px;
  border-radius:50%; background:var(--spearmint); }
.tips b { color:var(--heading); }
@media (max-width:600px){ .facts { grid-template-columns:1fr; gap:var(--s1) var(--s3); }
  .facts dd { margin-bottom:var(--s3); } }

/* ---------- benefits list ---------- */
/* The plan names are a scannable list, not prose: short, parallel, and read
   by people checking whether one specific thing is there. Columns rather than
   a single stack so eleven items do not become a scroll. */
.perks-head { font-family:var(--ui); font-size:.82rem; letter-spacing:.14em; text-transform:uppercase;
  font-weight:700; color:var(--green); margin:0 0 var(--s4); }
.perk-list { list-style:none; margin:0; padding:0; display:grid; gap:var(--s2) var(--s6);
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
.perk-list li { position:relative; padding-left:20px; font-size:.98rem; }
/* Benefits at a glance, above the job list. A two-column band: heading on the
   left, the six headline perks on the right, then one link down to the full
   section. Kept to section-tight so the roles stay close to the top. */
.perkbar { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.6fr); gap:var(--s6) var(--s8); align-items:start; }
.perkbar-head .h2 { margin:0; }
.perkbar-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
.perkbar p { margin:0 0 var(--s4); }
.perkbar-kicker { font-weight:700; color:var(--ink); }
/* Bullets inside a benefits module: one column, tighter, and visually a rank
   below the sentence above them rather than competing with it. */
.feature-perks { grid-template-columns:1fr; gap:var(--s2); margin-top:var(--s4);
  padding-top:var(--s4); border-top:1px solid var(--line); }
.feature-perks li { font-size:.93rem; color:var(--body); }
.perkbar > .link-underline { grid-column:2; justify-self:start; }
@media (max-width:820px) {
  .perkbar { grid-template-columns:1fr; }
  .perkbar-list { grid-template-columns:1fr; }
  .perkbar > .link-underline { grid-column:1; }
}
.perk-list li::before { content:""; position:absolute; left:0; top:.55em; width:7px; height:7px;
  border-radius:50%; background:var(--spearmint); }

/* ---------- press release ---------- */
/* A reading column. Releases are long-form prose in a site that otherwise
   sets everything in panels, so this is the one place with a measure. */
.release { max-width:72ch; margin:0 auto; }
.release .rel-kicker { font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--green); margin:0 0 var(--s5); }
.release p { margin:0 0 var(--s4); }
.release h2 { margin:var(--s7) 0 var(--s3); }
.release h3, .release h2.rel-sub { margin:var(--s5) 0 var(--s2); font-family:var(--ui); font-size:1.02rem; letter-spacing:.02em; }
.release ul { margin:0 0 var(--s4); padding-left:1.15em; }
/* Numbered clauses on the terms page. Wider indent than ul because the
   marker is "10." rather than a bullet, and the numbers have to clear
   the text they sit beside. */
.release ol { margin:0 0 var(--s4); padding-left:1.6em; }
.release ol li { margin-bottom:var(--s4); padding-left:.2em; }
.release li { margin-bottom:var(--s2); }
.release blockquote { margin:var(--s5) 0; padding:0 0 0 var(--s4); border-left:3px solid var(--spearmint);
  font-family:var(--display); font-size:1.16rem; line-height:1.6; color:var(--heading); }
.release blockquote cite { display:block; margin-top:var(--s3); font-family:var(--ui); font-size:.86rem;
  font-style:normal; letter-spacing:.04em; color:var(--muted); }
.release a:not(.link-underline) { color:var(--green-ink); text-decoration:underline; text-underline-offset:2px; }
.release a:not(.link-underline):hover { color:var(--green-900); }
/* The same treatment for a link sitting inside ordinary body copy outside the
   press release, which had no style of its own and was falling back to the UA
   blue. --green-ink, not --green: measured at 4.39:1 on cream, which is the
   trap the palette comment at the top of this file already describes. The
   darker cut is 5.70:1. */
.link-inline { color:var(--green-ink); text-decoration:underline; text-underline-offset:2px; }
.link-inline:hover { color:var(--green-900); }
.release .rel-boiler { font-size:.94rem; color:var(--muted); }
.release .rel-end { margin:var(--s6) 0 var(--s5); letter-spacing:.3em; color:var(--muted); }

/* ---------- sections ---------- */
.section { padding:clamp(56px,7.5vw,110px) 0; }
/* Anchored sections stop short of the fixed header, so #roles and #benefits
   jumps land on the heading rather than a line under it. */
/* Anything a fragment link can land on has to clear the fixed header.
   The brand cards are anchors rather than sections, so naming only
   section[id] left the footer's brand links landing underneath it. */
section[id], .c-brand[id] { scroll-margin-top:calc(75px + var(--s4)); }
.section-tight { padding:clamp(40px,5vw,70px) 0; }
.bg-cream { background:var(--cream); } .bg-white { background:var(--white); }
.bg-paper { background:var(--paper); }
.bg-deep { background:var(--green-deep); color:#fff; }
/* The brand green as a section ground. Used for the one call to action that
   has to stand apart from the dark-grey sections around it. */
.bg-green { background:var(--green); color:#fff; }
/* Sideways-move examples, now in the cream intro rather than a dark section
   after the ladders, so the idea lands before the ladders instead of after. */
.sideways h3 { color:var(--green-ink); margin:0 0 var(--s2); }
.sideways p { margin:0; }
/* Body copy here is white, not the sage tint the grey-green bands use: on
   --green that tint measures 3.65:1, under the 4.5:1 normal text needs. */
.bg-green p, .bg-green .cta-band p { color:#fff; }
.bg-950 { background:var(--green-950); color:#fff; }
.bg-ink { background:#0e1a12; color:#fff; }
.sec-head { max-width:62ch; margin-bottom:clamp(30px,4vw,48px); }
.sec-head.center { margin-inline:auto; text-align:center; }
.sec-head p:last-child { margin-bottom:0; }
.sechead-row { display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s5); flex-wrap:wrap; margin-bottom:clamp(26px,3.4vw,40px); }
.sechead-row .h2,.sechead-row .h2-bold { margin-bottom:0; }

/* segmented control */

/* divisions grid */
.divisions { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s5); }
.division { display:block; text-decoration:none; color:inherit; }
/* A photo filling a .ph or .av box. These were background images; as <img>
   they can carry a srcset and load lazily (see fill() in build.py). Laid over
   the box exactly as background-size:cover was, and under its caption, FPO
   tag and gradient, which are all positioned and come later in the box. */
.ph > .fill, .av > .fill { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.c-person .ph > .fill, .av > .fill { object-position:center top; }
.division .ph { position:relative; border-radius:var(--r-lg); overflow:hidden; aspect-ratio:4/5; background:#e4e0d4 center/cover; box-shadow:var(--e3); transition:transform .35s cubic-bezier(.2,.8,.2,1); }
.division:hover .ph { transform:translateY(-6px); }
.division h3 { margin:var(--s4) 0 var(--s1); font-size:1.12rem; font-weight:800; font-family:var(--ui); }
.division p { margin:0 0 var(--s3); font-size:.98rem; max-width:34ch; }
.division:hover .link-underline { color:var(--green-900); }

/* split columns */
.split { display:grid; grid-template-columns:1fr 1fr; min-height:min(76vh,600px); }
.split .ph { position:relative; background-size:cover; background-position:center; min-height:300px; }
.split .ph::after { content:""; position:absolute; inset:auto 0 0 0; height:34%; background:linear-gradient(180deg,transparent,rgba(0,0,0,.5)); }
.split .cap { position:absolute; left:var(--s4); bottom:var(--s3); z-index:2; font-size:.82rem; letter-spacing:.09em; text-transform:uppercase; color:rgba(255,255,255,.92); font-weight:600; }
.split .tx { display:flex; flex-direction:column; justify-content:center; padding:clamp(30px,5vw,76px); background:var(--green-950); color:#fff; }
.split .tx p { color:var(--sage-light); max-width:44ch; }
.split.light .tx { background:var(--cream); color:var(--ink); } .split.light .tx p { color:var(--body); }
.split .rk { font-size:.86rem; letter-spacing:.18em; text-transform:uppercase; color:var(--green); font-weight:700; margin:0 0 var(--s3); }
/* `.split .tx p` (0,3,1) outweighs a bare `.rk` class, so both of these
   eyebrows rendered as body copy no matter what colour the accent was.
   Qualified with the element to win: light blue on the dark panels, brand
   green on the light ones, which is how the deck splits the two. */
.split .tx p.rk { color:var(--spearmint); }
.split.light .tx p.rk { color:var(--green); }
.split .btn { align-self:flex-start; margin-top:var(--s5); }
.split.flip .ph { order:2; }

/* stats */
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:2px; background:rgba(255,255,255,.14); border-block:1px solid rgba(255,255,255,.14); }
.stats .st { background:var(--green-deep); padding:var(--s6) var(--s5); }
.stats .num { font-family:var(--display); font-weight:800; font-size:clamp(2.2rem,3.6vw,3.2rem); line-height:1; color:var(--spearmint); font-variant-numeric:tabular-nums; }
.stats .lab { font-size:.86rem; letter-spacing:.1em; text-transform:uppercase; color:var(--sage); margin-top:var(--s2); }

/* ---------- projected impact figures ---------- */
/* Deliberately not .stats. That dark band carries what GHG is today; these are
   projections for a building that opens in 2027, and a reader should not have
   to guess which kind of number they are looking at. Light ground, green
   numerals, and a line under each one saying what it actually counts.
   --spearmint is 2.26:1 on white and fails even the large-text 3:1 bar, so the
   numerals take --green (4.82:1) rather than the accent. */
/* auto-fit rather than a fixed count: "725,000" is three times the width of
   "250", so the row has to be allowed to break to 2x2 before a numeral wraps
   or overflows its column. */
.impact { list-style:none; margin:0; padding:0; display:grid; gap:var(--s6);
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.impact li { border-top:3px solid var(--green); padding-top:var(--s4); }
.impact .num { font-family:var(--display); font-weight:800; line-height:1;
  font-size:clamp(2.2rem,3.4vw,3rem); color:var(--green); font-variant-numeric:tabular-nums; }
.impact .lab { margin-top:var(--s3); font-size:.86rem; letter-spacing:.1em;
  text-transform:uppercase; font-weight:700; color:var(--ink); }
.impact p { margin:var(--s3) 0 0; font-size:.95rem; color:var(--muted); max-width:34ch; }
@media (max-width:600px){ .impact { grid-template-columns:1fr; gap:var(--s5); }
  .impact p { max-width:none; } }

/* focused tiles */
.tiles { display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:minmax(150px,auto); gap:var(--s4); grid-template-areas:"lead lead cta" "lead lead cta" "lead lead cta"; }
.tile { position:relative; border-radius:var(--r-xl); overflow:hidden; padding:var(--s6); display:flex; }
/* The photo is an element in a grid, not a background.
   As a background it could not be kept off his face at every width: the tile
   is 1.60:1 at full desktop but 1.36:1 at 901px, and `cover` from a 2:3
   headshot crops tighter the wider the tile gets, so his head swelled to 82%
   of the frame and bottom-aligned copy landed on his mouth. Measured across
   375/700/900/901/1024/1200/1360/1600, no single background position cleared
   him at more than three of them. A column each means they cannot collide at
   any width. It also gives the photo alt text, which a background never had. */
.tl-lead { grid-area:lead; min-height:clamp(400px,46vw,540px); background:var(--green-950); color:#fff;
  padding:0; display:grid; grid-template-rows:auto 1fr; }
.tl-face { width:100%; height:260px; object-fit:cover; object-position:center 6%; display:block; }
.tl-lead > div { padding:var(--s6); align-self:end; }
.tl-lead .kk { font-size:.86rem; letter-spacing:.18em; text-transform:uppercase; color:var(--spearmint); font-weight:700; }
.tl-lead h3 { font-family:var(--display); font-weight:800; font-size:clamp(1.6rem,2.8vw,2.3rem); line-height:1.36; letter-spacing:-.02em; margin:var(--s2) 0 var(--s2); color:#fff; }
.tl-lead p { margin:0; color:#dae7d6; max-width:40ch; }
@media (min-width:901px){
  .tl-lead { grid-template-columns:1fr minmax(210px,38%); grid-template-rows:1fr; }
  .tl-face { grid-column:2; grid-row:1; height:100%; object-position:center 12%; }
  .tl-lead > div { grid-column:1; grid-row:1; }
}
.tl-stat { grid-area:stat; background:var(--green); color:#fff; flex-direction:column; justify-content:center; }
.tl-stat .num { font-family:var(--display); font-weight:800; font-size:clamp(2.2rem,3.6vw,3rem); line-height:1; }
.tl-stat .lab { font-size:.86rem; letter-spacing:.08em; text-transform:uppercase; color:#c9ecd0; margin-top:var(--s2); }
.tl-cta { grid-area:cta; background:var(--spearmint); color:var(--spearmint-ink); flex-direction:column; justify-content:center; text-decoration:none; }
.tl-cta:hover { background:var(--spearmint-lift); }
.tl-cta .lab { font-size:.86rem; letter-spacing:.12em; text-transform:uppercase; font-weight:800; }
.tl-cta .big { font-family:var(--display); font-weight:800; font-size:1.5rem; margin-top:var(--s1); line-height:1.39; }
.tl-quote { grid-area:quote; background:var(--cream); color:var(--ink); align-items:center; }
.tl-quote blockquote { margin:0; font-family:var(--serif); font-size:1.2rem; line-height:1.45; }
/* #5d7a63 measured 4.32:1 on cream. It carried placeholder text before, so
   nobody had checked it; it now carries a real name and title. #57735d is
   the nearest tone to the original that clears AA, at 4.76:1. */
.tl-quote cite { display:block; margin-top:var(--s3); font-style:normal; font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; color:#57735d; font-family:var(--ui); font-weight:700; }

/* grids + cards */
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s5); }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s5); }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s5); }

.c-story .ph { position:relative; border-radius:var(--r-xl); overflow:hidden; aspect-ratio:1/1; background:#e4e0d4 center/cover; box-shadow:var(--e3); transition:transform .35s cubic-bezier(.2,.8,.2,1); }
.c-story:hover .ph { transform:translateY(-6px); }
.c-story .meta { margin:var(--s4) 0 var(--s2); font-size:.9rem; color:var(--muted); }
.c-story blockquote { margin:0 0 var(--s2); font-family:var(--serif); font-size:1.24rem; line-height:1.3; color:var(--ink); }
.c-story h3 { margin:0 0 var(--s2); font-family:var(--display); text-transform:uppercase; font-size:1.14rem; line-height:1.12; }
.c-story p { margin:0 0 var(--s4); font-size:.98rem; }

.rail { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(300px,1fr); gap:var(--s5); overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; padding-bottom:var(--s2); }
.rail > * { scroll-snap-align:start; }
.rail-arrows { display:flex; gap:var(--s2); }
/* display:flex on the class outranks the UA [hidden] rule, so say it here. */
.rail-arrows[hidden] { display:none; }
.rail-arrows button:disabled { opacity:.32; cursor:default; }
.rail-arrows button:disabled:hover { background:var(--white); border-color:var(--line-strong); color:var(--ink); }
.rail-arrows button { width:44px; height:44px; border-radius:50%; border:1px solid var(--line-strong); background:var(--white); color:var(--ink); font-size:1.05rem; cursor:pointer; }
.rail-arrows button:hover { background:var(--ink); border-color:var(--ink); color:#fff; }

/* Shadow rides a slower curve than the lift so it trails the card slightly
   rather than moving in lockstep — the bloom keeps expanding for a beat after
   the card settles, which is what makes the elevation read as motion instead
   of as two static states. Same easing as .division .ph and .c-story .ph.
   The global prefers-reduced-motion rule above kills both. */
.c-brand { display:block; text-decoration:none; color:inherit; border-radius:var(--r-lg); overflow:hidden; background:var(--white); box-shadow:var(--e3); transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .5s cubic-bezier(.2,.8,.2,1); }
/* Every brand card ships as `.c-brand rv`, and `.rv` (below) sets its own
   `transition` at the same (0,1,0) specificity but later in the file — so it
   replaced the whole declaration above and box-shadow animated not at all.
   Reasserting at (0,2,0) puts the card back in charge, with opacity folded in
   so the reveal still fades rather than popping. Keep this in sync with the
   base rule above; `.c-story` and `.c-news` have the same latent conflict. */
.c-brand.rv { transition:opacity .7s ease,transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .5s cubic-bezier(.2,.8,.2,1); }
.c-brand:hover { transform:translateY(-8px); box-shadow:var(--e5); }
.c-brand .ph { position:relative; aspect-ratio:16/10; background:#e4e0d4 center/cover; }
.c-brand .bd { padding:var(--s5); }
.c-brand .cat { font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:700; }
.c-brand h3 { margin:var(--s2) 0 var(--s2); font-family:var(--serif); font-weight:500; font-size:1.34rem; }
.c-brand p { margin:0; font-size:.97rem; }

.c-person .ph { position:relative; aspect-ratio:4/5; border-radius:var(--r-lg); overflow:hidden; background:#e4e0d4 center top/cover; box-shadow:var(--e3); }
.c-person h3 { margin:var(--s4) 0 2px; font-size:1.12rem; font-family:var(--ui); }
.c-person .role { font-size:.84rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.c-person p { margin:var(--s3) 0 0; font-size:.97rem; }

/* The card is a block so the description can sit under the title row; the
   title-and-Apply row keeps the two-column grid the card used to be. */
.c-job { display:block; padding:var(--s5); border:1px solid var(--line); border-radius:var(--r-md); background:var(--white); transition:border-color .2s,box-shadow .2s; }
.c-job .jb-head { display:grid; grid-template-columns:1fr auto; gap:var(--s4); align-items:center; }
/* Job cards ship as `.c-job rv` now that the listings come from Workday and
   reveal one row at a time — same latent conflict as `.c-brand.rv` above, same
   fix: reassert at (0,2,0) with opacity folded in, or the hover ease is lost.
   Keep in sync with the base rule above. */
.c-job.rv { transition:opacity .7s ease,border-color .2s,box-shadow .2s; }
.c-job:hover { border-color:var(--green); box-shadow:var(--e2); }
.c-job h3 { margin:0 0 6px; font-size:1.14rem; font-family:var(--ui); }
.c-job .fx { display:flex; flex-wrap:wrap; gap:6px var(--s4); font-size:.9rem; color:var(--muted); }

/* Description accordion. A native <details> so it opens without JS, takes
   keyboard focus, and announces its own state — the listing is the one place
   on the site a visitor is deciding whether to leave for Workday, so it
   should not depend on a script having run.
   Only rendered for postings whose description actually came back. */
.c-job .jb-more { margin-top:var(--s4); border-top:1px solid var(--line); padding-top:var(--s3); }
.c-job .jb-more summary { display:flex; align-items:center; gap:8px; width:fit-content; cursor:pointer; list-style:none;
  font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:var(--green-ink); }
.c-job .jb-more summary::-webkit-details-marker { display:none; }
.c-job .jb-more summary::after { content:""; width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px); transition:transform .2s; }
.c-job .jb-more[open] summary::after { transform:rotate(-135deg) translate(-2px,-2px); }
.c-job .jb-more summary:hover { color:var(--green); }
.c-job .jb-more summary:focus-visible { outline:2px solid var(--green); outline-offset:3px; border-radius:2px; }
.c-job .jb-more p { margin:var(--s3) 0 0; max-width:70ch; font-size:.95rem; color:var(--body); }
/* Stacked, the meta row's last chip can land directly above Apply — both
   pill-shaped, both flush left, and 16px apart they read as two buttons.
   Widen the gap and let Apply fill the row so it is unmistakably the action
   and the chip above it is unmistakably a label. Bigger tap target with it. */
@media (max-width:640px){
  .c-job .jb-head { grid-template-columns:1fr; row-gap:var(--s5); }
  .c-job .jb-head .btn { justify-self:stretch; }
}

.c-news { display:block; text-decoration:none; color:inherit; background:var(--white); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--e3); transition:transform .3s; }
.c-news:hover { transform:translateY(-5px); }
.c-news .ph { position:relative; aspect-ratio:16/9; background:#e4e0d4 center/cover; }
.c-news .bd { padding:var(--s5); }
.c-news h3 { margin:var(--s3) 0 var(--s2); font-size:1.16rem; font-family:var(--ui); line-height:1.53; }
.c-news p { margin:0; font-size:.96rem; }

.c-event { display:grid; grid-template-columns:88px 1fr; gap:var(--s4); align-items:center; padding:var(--s4); border:1px solid var(--line); border-radius:var(--r-md); background:var(--white); }
.c-event .date { background:var(--green-deep); color:#fff; border-radius:var(--r-sm); text-align:center; padding:var(--s3) 6px; }
/* --green is the fill colour for light grounds; on the dark date chip it
   measured 2.10:1. --sage is the same family and reads at 6.86:1. */
.c-event .date .m { font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--sage); font-weight:800; }
.c-event .date .d { font-family:var(--display); font-size:1.9rem; font-weight:800; line-height:1; }
.c-event h3 { margin:0 0 3px; font-size:1.06rem; font-family:var(--ui); }
.c-event p { margin:0; font-size:.9rem; color:var(--muted); }
/* The cards link out to whichever venue is hosting, so they are anchors now.
   Neither .c-event h3 nor the card itself set a colour, so without this the
   headings inherit the UA blue and pick up an underline. */
a.c-event { text-decoration:none; color:var(--ink); display:grid;
  transition:border-color .18s, box-shadow .18s, transform .18s; }
a.c-event h3 { color:var(--ink); }
a.c-event:hover { border-color:var(--spearmint); box-shadow:var(--e2); transform:translateY(-2px); }
a.c-event:focus-visible { outline:3px solid var(--green); outline-offset:3px; }
@media (prefers-reduced-motion:reduce){
  a.c-event { transition:none; }
  a.c-event:hover { transform:none; } }

/* value / feature list */
.features { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s5); }
/* Five values across, on the homepage. Five does not divide into the 3-up
   .features grid, so this is its own auto-fit track that folds to three then
   two then one rather than leaving two orphans on a second row. */
/* Explicit counts rather than auto-fit: five items into an auto-fit track
   wraps 4 + 1 and the orphan reads like a mistake. 5, then 3 + 2, then 2, then
   one column — each of those reads as a deliberate arrangement. */
.valstrip { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:var(--s5); }
@media (max-width:1040px){ .valstrip { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:700px){ .valstrip { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:440px){ .valstrip { grid-template-columns:1fr; } }
.valcard img { width:40px; height:auto; margin-bottom:var(--s3); }
.valcard h3 { font-family:var(--ui); font-size:1.02rem; margin:0 0 var(--s2); }
.valcard p { margin:0; font-size:.93rem; color:var(--body); }
.feature { background:var(--white); border-radius:var(--r-lg); padding:var(--s6); box-shadow:var(--e2); }
.feature .ic { width:52px; height:52px; border-radius:var(--r-md); background:color-mix(in srgb,var(--green) 14%,transparent); color:var(--green); display:grid; place-items:center; font-size:1.4rem; margin-bottom:var(--s4); }
.feature h3 { font-family:var(--ui); font-size:1.14rem; }
.feature p { margin:0; font-size:.99rem; }

/* pathway ladder */
.ladder { display:grid; gap:var(--s3); }
.rung { display:grid; grid-template-columns:auto 1fr auto; gap:var(--s4); align-items:center; padding:var(--s4) var(--s5); background:var(--white); border:1px solid var(--line); border-radius:var(--r-md); }
.rung .lv { width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:.88rem; background:var(--spearmint); color:var(--spearmint-ink); }
/* A step in the ladder, not a section: plain text rather than a heading, so a
   screen reader's heading list is the four paths and not twenty job titles.
   Weighted past `.split.light .tx p` so it keeps the look the old <h4> had. */
.split .tx .rung p.rt { margin:0; font-size:1.05rem; font-weight:700; color:var(--ink); max-width:none; }
.rung .yrs { font-size:.84rem; color:var(--muted); white-space:nowrap; letter-spacing:.06em; text-transform:uppercase; font-weight:700; }
.rung.top .lv { background:var(--green); color:#fff; }

/* timeline */
.timeline { border-left:2px solid var(--line); padding-left:var(--s6); display:grid; gap:var(--s6); }
.timeline .tl { position:relative; }
.timeline .tl::before { content:""; position:absolute; left:calc(-1 * var(--s6) - 7px); top:8px; width:12px; height:12px; border-radius:50%; background:var(--spearmint); box-shadow:0 0 0 3px var(--cream),0 0 0 5px var(--spearmint); }
.timeline .yr { font-family:var(--display); font-weight:800; font-size:1.24rem; color:var(--green); }
.timeline h3 { margin:2px 0 var(--s1); font-size:1.1rem; font-family:var(--ui); }
.timeline p { margin:0; max-width:58ch; }
.bg-deep .timeline,.bg-950 .timeline { border-color:var(--line-dark); }
.bg-deep .timeline .yr { color:var(--spearmint); }
.bg-deep .timeline .tl::before { box-shadow:0 0 0 3px var(--green-deep),0 0 0 5px var(--spearmint); }
/* A timeline that runs through the present has to say which side of today each
   entry sits on, or it reads as a plan that has not started. The chip does
   that; the entries themselves stay, because the sequence is the story. */
.tl-when { display:inline-block; margin-left:var(--s2); vertical-align:2px; font-family:var(--ui);
  font-size:.7rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; padding:3px 9px; border-radius:var(--r-pill); }
.tl-when.done { background:var(--paper); color:var(--muted); }
.tl-when.next { background:var(--spearmint); color:var(--spearmint-ink); }
.bg-deep .tl-when.done,.bg-950 .tl-when.done { background:rgba(255,255,255,.12); color:var(--sage); }
.bg-deep .timeline h3 { color:#fff; } .bg-deep .timeline p { color:var(--sage-light); }

/* quote block */
.quote-block { display:grid; grid-template-columns:auto 1fr; gap:clamp(24px,3.4vw,48px); align-items:center; }
.quote-block .av { position:relative; overflow:hidden; width:150px; height:150px; border-radius:50%; background:#e4e0d4 center top/cover; box-shadow:var(--e2); flex:none; }
.quote-block blockquote { margin:0; font-family:var(--serif); font-size:clamp(1.35rem,2.3vw,1.95rem); line-height:1.32; color:var(--ink); }
.quote-block .who { margin-top:var(--s4); font-weight:800; color:var(--ink); }
.quote-block .role { font-size:.86rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.bg-deep .quote-block blockquote,.bg-deep .quote-block .who { color:#fff; }
.bg-deep .quote-block .role { color:var(--sage); }

/* accordion */
.acc details { border-bottom:1px solid var(--line); }
.acc details:first-of-type { border-top:1px solid var(--line); }
.acc summary { cursor:pointer; list-style:none; padding:var(--s5) var(--s7) var(--s5) 0; position:relative; font-size:1.1rem; font-weight:800; color:var(--ink); }
.acc summary::-webkit-details-marker { display:none; }
.acc summary::after { content:"+"; position:absolute; right:8px; top:50%; transform:translateY(-50%); font-size:1.5rem; font-weight:400; color:var(--green); }
.acc details[open] summary::after { content:"\2212"; }
.acc .ab { padding:0 var(--s7) var(--s5) 0; max-width:70ch; }

/* CTA band */
/* Capped and centred inside the wide wrap. Left to fill it, the heading and
   the button sat on the outer padding at either end — 1305px apart at 1353 —
   which read as two things pinned to the margins rather than one band. */
.cta-band { display:flex; align-items:center; justify-content:space-between; gap:var(--s6); flex-wrap:wrap;
  max-width:1060px; margin-inline:auto; }
.cta-band .h2-bold { max-width:20ch; margin-bottom:var(--s2); }
.cta-band p { color:var(--sage-light); max-width:46ch; margin:0; }

/* chips + badges */
/* Job search. The magnifier is a sibling rather than a background-image so it
   inherits currentColor and stays crisp; the input carries left padding to
   clear it. */
.jobsearch { position:relative; display:flex; align-items:center; max-width:520px; margin:0 0 var(--s4); color:var(--muted); }
.jobsearch svg { position:absolute; left:16px; width:19px; height:19px; pointer-events:none; }
.jobsearch input { font:inherit; font-size:1rem; width:100%; padding:14px 18px 14px 46px; border:1px solid var(--line-strong); border-radius:var(--r-pill); background:var(--white); color:var(--ink); }
.jobsearch input::placeholder { color:var(--muted); }
.jobsearch input:focus { border-color:var(--green); }
/* Safari renders a pill-busting inner spinner on type=search. */
.jobsearch input::-webkit-search-decoration { -webkit-appearance:none; }

.jobempty { padding:var(--s6) 0; color:var(--muted); }
.jobempty button { font:inherit; background:none; border:0; border-bottom:2px solid var(--spearmint); cursor:pointer; padding:0 0 2px; }

.chips { display:flex; flex-wrap:wrap; gap:var(--s2); }
.chip { font:inherit; font-size:.9rem; font-weight:600; padding:9px 17px; border-radius:var(--r-pill); border:1px solid var(--line-strong); background:transparent; color:var(--ink); cursor:pointer; }
.chip[aria-pressed="true"] { background:var(--ink); border-color:var(--ink); color:var(--cream); }
/* Pager under the job list. Page buttons reuse .chip so the controls read as
   one family with the filter chips above the list. */
.pager { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:var(--s2); margin-top:var(--s5); }
.pager[hidden] { display:none; }
.pager-pages { display:flex; flex-wrap:wrap; gap:var(--s2); }
.pager .chip { min-width:44px; }
.pager .chip[aria-current="page"] { background:var(--ink); border-color:var(--ink); color:var(--cream); }
.pager .chip:disabled { opacity:.35; cursor:default; }
.badge { display:inline-flex; align-items:center; gap:6px; font-size:.72rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; padding:5px 11px; border-radius:var(--r-pill); }
.b-mint { background:var(--spearmint); color:var(--spearmint-ink); }
.b-green { background:color-mix(in srgb,var(--green) 16%,transparent); color:var(--green); }
.b-gold { background:var(--gold); color:var(--gold-ink); }
.b-quiet { border:1px solid var(--line-strong); color:var(--body); }

/* logo strip */
.logos { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:clamp(24px,4vw,56px); }
.logos img { height:clamp(46px,5vw,66px); width:auto; opacity:.85; }

/* figure */
.fig img { border-radius:var(--r-lg); box-shadow:var(--e3); width:100%; }
.fig figcaption { margin-top:var(--s3); font-size:.9rem; color:var(--muted); }
/* --muted is a light-ground colour and measured 1.95:1 the first time a
   figure landed on a dark section. Same fix as .sources. */
.on-dark .fig figcaption,.bg-deep .fig figcaption { color:var(--sage); }

/* forms */
.field { display:grid; gap:7px; margin-bottom:var(--s5); }
.field label { font-size:.86rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink); }
.ctrl { font:inherit; font-size:1rem; width:100%; padding:13px 15px; border:1px solid var(--line-strong); border-radius:var(--r-sm); background:var(--white); color:var(--ink); }
.ctrl:focus { outline:none; border-color:var(--green); box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 22%,transparent); }
.signup { display:flex; gap:var(--s3); flex-wrap:wrap; }

/* JotForm embed on the news page. min-height is the fallback for the moment
   before the frame reports its own size, and for the case where that message
   never arrives — without it a scrolling="no" iframe collapses to nothing. */
/* "Show more events" sits under the grid, centred. */
/* A leadership card with no photograph yet. Deliberately not a portrait —
   it should read as missing, not as somebody. */
/* Not scoped to .c-person any more: the founder's half of the ownership
   split on the about page reserves its slot the same way, and a dashed box
   saying so is better than a stock photograph standing in for a real person. */
.ph-await { display:grid; place-items:center; background:var(--cream);
  border:1px dashed var(--line-strong); }
.ph-await span { font-size:.82rem; letter-spacing:.14em; text-transform:uppercase;
  font-weight:700; color:var(--muted); }
.split .ph-await::after { content:none; }

.morerow { display:flex; justify-content:center; margin-top:var(--s6); }
.morerow[hidden], .morerow button[hidden] { display:none; }
/* .c-event sets its own display, which would otherwise beat the UA [hidden]
   rule — the same trap the nav submenu hit. */
.c-event[hidden] { display:none !important; }

.jotform { margin-top:var(--s6); }
.jotform iframe { display:block; width:100%; min-height:720px; border:0; }
@media (max-width:660px){ .jotform iframe { min-height:900px; } }
.signup .ctrl { flex:1 1 240px; }

/* footer */
.site-foot { background:var(--green-deep); color:var(--sage-light); padding:clamp(48px,6vw,80px) 0 var(--s6); }
.site-foot .cols { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:clamp(26px,3vw,48px); }
/* 12.8px against the slate, where --spearmint lands at 4.48:1 — a whisker
   under AA. The lift tone clears it without changing the colour read. */
.site-foot h2 { margin:0 0 var(--s4); font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; color:var(--spearmint-lift); font-weight:800; }
.site-foot ul { list-style:none; margin:0; padding:0; display:grid; gap:var(--s2); }
.site-foot a { color:var(--sage-light); text-decoration:none; font-size:.96rem; }
.site-foot a:hover { color:#fff; }
.site-foot .blurb { font-family:var(--display); font-weight:800; font-size:1.4rem; color:#fff; line-height:1.48; margin:0 0 var(--s4); }
.site-foot .addr { font-size:.95rem; margin:0 0 var(--s5); }
.site-foot .fine { display:flex; flex-wrap:wrap; gap:var(--s2) var(--s5); margin-top:clamp(32px,4vw,52px); padding-top:var(--s5); border-top:1px solid var(--line-dark); font-size:.88rem; color:var(--sage); }
.site-foot .fine a { font-size:.88rem; color:var(--sage); }
/* Second fine-print row: the employment notice PDFs. Sits tight under the
   first, without its rule. */
.site-foot .fine.notices { margin-top:var(--s3); padding-top:0; border-top:0; }

/* reveal */
/* Hidden only once JS is known to be running: see REVEAL in build.py.
   :where() keeps these at the specificity plain .rv had, so the card rules
   that override them (.c-brand.rv, .c-job.rv) still win as before. */
:where(.js) .rv { opacity:0; transform:translateY(18px); transition:opacity .7s ease,transform .7s ease; }
:where(.js) .rv.in { opacity:1; transform:none; }

/* ---------- type fitting ---------- */
/* body fits lowercase to the original face (--fit-lower). Text set entirely in
   capitals has no lowercase to match, so it fits by cap height instead — as do
   figures, which stand at cap height. Georgia never changed, so the serif
   styles opt out and keep their own proportions.
   Fitted to the original lowercase, Mr Eaves reaches .34em further from
   descender to ascender than the system face did, which closed the white gap
   between lines of the tightly set headings and then overlapped them. Those
   rules (.h1, .h2-bold, .h3, .tl-lead h3, .tl-cta .big, .c-news h3,
   .site-foot .blurb, and the featured story title in build.py) carry their
   original line-height plus .34, which puts the gap back where it was.
   Running text never closed up that far, and its spacing was chosen by eye
   rather than matched: body 1.65 -> 1.8, .lead 1.6 -> 1.75, .release
   blockquote 1.45 -> 1.6. That is about half of the .33 a full match would
   take, picked side by side against the original.
   Sits below every component because `font:inherit` on .btn would otherwise
   reset it. A new uppercase style belongs in this list. */
.eyebrow, .display, .btn, .link-underline, .fpo-copy::before, .fpo-tag,
.hero .kick, .hero .loc, .facts dt,
.brand-brief .hours-title, .perks-head, .release .rel-kicker, .seg .lab, .split .cap,
.split .rk, .stats .lab, .impact .lab, .tl-lead .kk, .tl-stat .lab, .tl-cta .lab,
.tl-quote cite, .c-story h3, .c-brand .cat, .c-person .role, .c-job .jb-more summary,
.c-event .date .m, .rung .yrs, .tl-when, .quote-block .role, .badge, .field label,
.qh summary, .qh dt,
.site-foot h2,
.stats .num, .impact .num, .tl-stat .num, .c-event .date .d, .timeline .yr,
.rung .lv, .steps li::before { font-size-adjust:var(--fit-caps); }
.h2, .tl-quote blockquote, .c-story blockquote, .c-brand h3,
.quote-block blockquote { font-size-adjust:none; }

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .grid-4,.features { grid-template-columns:repeat(2,1fr); }
  .divisions { grid-template-columns:repeat(2,1fr); }
  .divisions .division .ph { aspect-ratio:16/10; }
  .stats { grid-template-columns:repeat(2,1fr); }
  .site-foot .cols { grid-template-columns:1fr 1fr; }
}
/* Two-stage collapse, both breakpoints measured rather than inherited from
   the layout breakpoint below. Measured with Mr Eaves fitted to the original
   letter sizes, where it sets about 10% wider than the system face did: the
   links run 800px at 1440 against the old 726.
   Stage 1 — seven links plus the CTA fit down to 1195px, gaps at their 24px
   floor. Held at 1240: the bar has two gaps and space-between splits any
   slack across both, so the breakpoint has to sit ~45px above the true limit
   to leave ~20px at each end. Otherwise one label change overflows it. Below
   it the CTA goes first, being the most redundant element there (it also
   appears in the drawer, the footer, and every page's closing CTA band),
   which keeps the full nav usable ~220px further down.
   Stage 2 — links alone fit to 994px; held at 1020 for the same reason.
   Below that everything goes to the drawer. */
@media (max-width:1240px){
  .site-head .bar > .btn { display:none; }
}
@media (max-width:1020px){
  .site-head nav { display:none; }
  .site-head .burger { display:inline-flex; }
}
@media (max-width:900px){
  .grid-3,.grid-2 { grid-template-columns:1fr; }
  .split,.split.flip { grid-template-columns:1fr; }
  .split.flip .ph { order:0; }
  .tiles { grid-template-columns:repeat(2,1fr); grid-template-areas:"lead lead" "stat cta" "quote quote"; }
  .quote-block { grid-template-columns:1fr; }
}
@media (max-width:600px){
  /* Eases down on phones the way it always has, to 16px. In rem so it tracks
     the root if a visitor has raised their browser's text size. */
  body { font-size:1rem; }
  /* .hero .loc is pinned bottom-left and has no right edge to wrap against, so
     on a phone it runs to two lines and grows up into the buttons. The inner
     padding has to clear it: 48px cleared one line, not two. */
  .hero .inner { padding-bottom:104px; }
  .divisions,.grid-4,.features { grid-template-columns:1fr; }
  .stats { grid-template-columns:1fr 1fr; }
  .tiles { grid-template-columns:1fr; grid-template-areas:"lead" "stat" "cta" "quote"; }
  .c-job { grid-template-columns:1fr; }
  .rail { grid-auto-columns:minmax(260px,1fr); }
  .site-foot .cols { grid-template-columns:1fr; }
}

/* ---------- review mode ---------- */
/* Inert until site.js sets body.review from ?review=1, so the data-review-id
   attributes can ship on the normal pages without affecting anyone who is not
   reviewing — one build serves both audiences and the badges cannot drift from
   what is deployed.

   Badges hang off ::after: .fpo-copy already owns ::before, and no block class
   uses ::after on itself (.split's gradient sits on a child .ph). Every block
   class is either static or already position:relative, so the anchor below
   never changes an existing layout. */
body.review [data-review-id] { position:relative; outline:1px dashed rgba(214,51,132,.5); outline-offset:-1px; }
body.review [data-review-id]::after {
  content:attr(data-review-id);
  position:absolute; top:0; left:0; z-index:80;
  font:700 10px/1 var(--mono); letter-spacing:.07em;
  padding:4px 6px; background:#d63384; color:#fff; border-radius:0 0 4px 0;
  pointer-events:none; white-space:nowrap; text-transform:none;
}
/* Nested blocks would stack badges on the same corner; the inner one steps
   right so both stay readable. */
body.review [data-review-id] [data-review-id]::after { left:auto; right:0; border-radius:0 0 0 4px; }
/* Heroes start at the top of the page, under the fixed header (z-index 100 to
   the badge's 80), so their badge would sit behind the nav bar on every page.
   Drop it clear of the header instead. */
body.review .hero[data-review-id]::after,
body.review .hero-page[data-review-id]::after { top:var(--nav-h); }
.review-bar {
  position:fixed; left:0; right:0; bottom:0; z-index:300;
  display:flex; align-items:center; gap:var(--s4); flex-wrap:wrap;
  padding:10px 16px; background:#d63384; color:#fff;
  font:600 13px/1.35 var(--ui);
}
.review-bar code { font-family:var(--mono); background:rgba(0,0,0,.22); padding:2px 6px; border-radius:3px; }
.review-bar a { color:#fff; text-decoration:underline; }
.review-bar .sp { margin-left:auto; }
body.review { padding-bottom:52px; }
@media print { .review-bar, body.review [data-review-id]::after { display:none; } }