/* ═══════════════════════════════════════════════════════════════════
   'corePHP' v6, tokens, base, masthead
   v3's editorial light ground + v5's pennant masthead.
   Brand is dark maroon #A41E22 and it is the ONLY red in the build.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* Brand, dark maroon. The only red on the site. */
  --brand:        #A41E22;
  --brand-deep:   #8A181B;
  --brand-shadow: #6E1215;
  /* The selected/hover tint. This was the brand red at 6%, which over
     white composited to #FAF2F2: hue 0, saturation 44%, lightness 96.5%,
     which is pink. Any pure red at a low alpha over white does that,
     because the hue survives and the darkness that made it read as
     maroon does not. Deepening the red did not help, it only made a
     duller pink. So the tint is a warm neutral now and the brand is
     carried by the border and the mark instead of the fill.
     Brand red on it measures 6.68:1, against 6.83:1 before. */
  --brand-wash:   rgba(74,58,50,.07);

  /* The mark lifted, for use as ink on a dark ground. #A41E22 measures
     2.51:1 on the night sections and fails even the large-text bar, so
     anything brand-coloured sitting on black needs one of these instead.
     Same hue, only as light as the contrast requires:
       --brand-lit     4.90:1  running text, AA body
       --brand-lit-lg  3.48:1  display figures, AA large only
     They live here rather than under [data-pill] because the night
     sections are dark in both modes. */
  --brand-lit:    #E05055;
  --brand-lit-lg: #C4323A;
  --brand-hair:   rgba(164,30,34,.18);

  /* Ground. The page sits on a toned neutral and surfaces are white,
     so cards have somewhere to lift off. Pure white on pure white with
     a hairline between them is what read as sterile. */
  --ground:       #F1EFED;
  --paper:        #FFFFFF;
  --paper-2:      #FFFFFF;
  --paper-3:      #E7E3E0;

  /* Ink. Body copy was #4A4442, which is a mid grey doing the work of
     text. Darker and larger. */
  --ink-1:        #14100F;
  --ink-2:        #37312F;
  --ink-3:        #6A6260;

  /* Structure */
  --line:         #C2BAB5;   /* 1.67:1 on the ground, was 1.25:1 */
  --line-soft:    #D4CDC8;   /* 1.36:1 on the ground, was 1.10:1 */
  --lift:         0 1px 2px rgba(20,16,15,.04), 0 14px 30px -18px rgba(20,16,15,.20);
  --lift-2:       0 2px 4px rgba(20,16,15,.05), 0 30px 60px -28px rgba(20,16,15,.30);

  /* Type */
  --f-display: "Archivo", system-ui, -apple-system, sans-serif;
  --f-body:    "Instrument Sans", system-ui, -apple-system, sans-serif;
  /* No third family. The client reads tracked caps in a squarish face
     as monospace, so the detail register is carried by the body face at
     a heavier weight and a larger size instead. */
  --f-mono:    "Instrument Sans", system-ui, -apple-system, sans-serif;

  /* Motion */
  --ease-out:  cubic-bezier(.23, 1, .32, 1);
  --ease-snap: cubic-bezier(.16, 1, .3, 1);
  --dur-fast: 180ms; --dur-base: 420ms; --dur-slow: 900ms;

  /* Geometry */
  --maxw: 1240px; --nav-top: 26px; --nav-side: 32px; --flag-h: 84px;
  /* How far the pennant's point hangs below the top. The hero clears
     THIS, not --flag-h: the band is 84px but the point reaches 130px,
     and padding derived from the band is short by construction. */
  --pennant-h: 130px;
  --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-pill: 999px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body{
  margin: 0;
  background: var(--ground);
  color: var(--ink-2);
  font-family: var(--f-body);
  font-size: 1.0625rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
body.is-locked { overflow: hidden; }

a { color: inherit; text-decoration: none; }
img, svg, video, canvas { max-width: 100%; }
img { height: auto; border: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.skip{
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--brand); color: #fff; padding: 14px 20px; border-radius: 0 0 var(--r-sm) 0;
  font-family: var(--f-mono); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
}
.skip:focus { left: 0; }

:where(a, button, input, textarea, select, [tabindex]):focus-visible{
  outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 3px;
}

/* ── Type scale ─────────────────────────────────────────────────── */
h1, h2, h3, h4 { font-family: var(--f-display); color: var(--ink-1); margin: 0; text-wrap: balance; }
/* The width axis is set once and then left alone. Binding it to scroll
   velocity made the headlines visibly shake while being read. */
/* 118 is the resting width the headline settle animation used to set on
   :root at runtime. That animation is gone, so the value lives here. */
h1, h2 { font-variation-settings: "wdth" var(--wdth, 118), "wght" var(--wgt, 800); }
h1 { --wgt: 900; font-size: clamp(3.25rem, 7.5vw, 7rem); line-height: .96; letter-spacing: -.045em; }
h2 { --wgt: 800; font-size: clamp(2.25rem, 4.5vw, 4.25rem); line-height: 1.02; letter-spacing: -.03em; }
h3 { font-weight: 700; font-size: clamp(1.6rem, 2.35vw, 2.25rem); line-height: 1.14; letter-spacing: -.02em; }
h4 { font-weight: 700; font-size: 1.125rem; line-height: 1.3; letter-spacing: -.01em; }
p  { margin: 0; }

/* Hubs and the homepage shout in caps; leaf pages speak in sentence case. */
.t-upper { text-transform: uppercase; }
.lead { font-size: clamp(1.15rem, 1.32vw, 1.4rem); line-height: 1.5; color: var(--ink-2); }
.label{
  font-family: var(--f-body); font-weight: 700; font-size: .875rem;
  letter-spacing: .075em; text-transform: uppercase; color: var(--ink-3);
}
.label--brand { color: var(--brand); }
.ink-1 { color: var(--ink-1); }
.brand { color: var(--brand); }

/* ── Hero headline phase-in ──────────────────────────────────────────
   Replaces the character scramble. The scramble re-typeset the headline
   on every frame, which in a proportional face re-wrapped the lines and
   moved the whole page: 95 layout shifts across 900ms, CLS 4.37.

   Opacity and transform are composited, so this animates nothing the
   layout engine has to measure. The headline occupies its final box from
   the first paint.

   The two sentences are separate blocks so the brand red always starts a
   line. Inline, the break landed mid-sentence and left "AND" stranded at
   the end of a black line. */
h1[data-phase] .phase{
  display: block;
  opacity: 0;
  transform: translateY(14px);
  animation: heroPhase .85s var(--ease-out) forwards;
}
h1[data-phase] .phase + .phase{ animation-delay: .1s; }

@keyframes heroPhase{
  to{ opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce){
  h1[data-phase] .phase{ animation: none; opacity: 1; transform: none; }
}

/* ── Layout ─────────────────────────────────────────────────────── */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(20px, 5vw, 40px); }
.section { padding-block: clamp(64px, 9vh, 132px); position: relative; }
.section--tight { padding-block: clamp(44px, 6vh, 84px); }
.section--band { background: var(--paper); }
.section--well { background: var(--brand-wash); }
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }
.rule--brand { height: 3px; background: var(--brand); border: 0; margin: 0; width: 64px; border-radius: 2px; }

.grid { display: grid; gap: clamp(20px, 3vw, 34px); }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px){ .g-3, .g-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px){ .g-2, .g-3, .g-4 { grid-template-columns: minmax(0,1fr); } }
.mt-2{margin-top:8px}.mt-4{margin-top:16px}.mt-6{margin-top:24px}
.mt-8{margin-top:32px}.mt-10{margin-top:40px}.mt-12{margin-top:48px}.mt-14{margin-top:56px}.mt-16{margin-top:64px}  /* mt-12 and mt-16 were used in the markup but never defined, so every
     one of them silently collapsed to no margin. The scale is 4px per
     unit, same as the rest. */
.measure { max-width: 62ch; }
.center { text-align: center; }
.center .measure { margin-inline: auto; }

/* ═══════════════════════════════════════════════════════════════════
   THE PENNANT MASTHEAD  (ported from v5, re-grounded to white)
   The red shape is its own layer so the logo holds position while the
   pennant flattens into a band. Vertex counts must match between the
   two clip-paths or the shape cannot interpolate.
   ═══════════════════════════════════════════════════════════════════ */
.barc{
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  height: var(--flag-h);
  display: flex; align-items: center; justify-content: flex-end;
  padding-right: var(--nav-side);
}
/* No full-bleed band on scroll.

   A second surface used to be painted across the whole viewport here at 86%
   white with a hairline under it, so the masthead read as a solid bar with a
   hard edge cutting through whatever it passed over, and the pill sat on top
   of it rather than over the page. The pill carries its own glass, so the
   band was only ever hiding the effect it duplicated. */

.flagfill{
  /* --pw is set on :root by placeFlag() so the shape and the logo
     box shrink together. */              /* pennant width */
  --ph: var(--pennant-h);   /* pennant height, arrow included */
  --pn: var(--flag-h);      /* y of the arrow shoulders */
  --bh: var(--flag-h);      /* scrolled band height */
  --hl: 4px;                /* top hairline weight */
  --s1: calc(var(--menu-left, 84.6%) + 8px);
  --s2: calc(var(--menu-left, 84.6%) - 56px);

  position: absolute; top: 0; left: 0; right: 0;
  height: var(--ph); z-index: 1;
  background: linear-gradient(168deg, var(--brand) 0%, var(--brand-deep) 100%);
  clip-path: polygon(
    var(--flag-left, 0px) 0px,
    calc(var(--flag-left, 0px) + var(--pw)) 0px,
    calc(var(--flag-left, 0px) + var(--pw)) var(--pn),
    calc(var(--flag-left, 0px) + var(--pw)) var(--pn),
    calc(var(--flag-left, 0px) + var(--pw) / 2) var(--ph),
    calc(var(--flag-left, 0px) + var(--pw) / 2) var(--ph),
    var(--flag-left, 0px) var(--pn),
    var(--flag-left, 0px) var(--pn)
  );
  transition: clip-path .55s var(--ease-out);
}
html.is-scrolled .flagfill{
  clip-path: polygon(
    0px 0px, 100% 0px, 100% var(--hl),
    var(--s1) var(--hl), var(--s2) var(--bh), var(--s2) var(--bh),
    0px var(--bh), 0px var(--bh)
  );
}

.flag{
  position: absolute; top: 0; left: var(--flag-left, 0px); z-index: 3;
  width: var(--pw, 300px); height: var(--flag-h);
  display: flex; align-items: center; justify-content: center;
}
.flag img{ display: block; width: min(158px, calc(var(--pw, 300px) * .53)); height: auto; transition: width .5s var(--ease-out); }

.barc__group{
  position: relative; z-index: 3;
  display: flex; align-items: center; gap: 6px;
  padding: 7px 7px 7px 24px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.55);
  /* The glass stays transparent but does not take a colour cast.

     saturate was 170%. Under the old full-bleed band that never showed,
     because the band was doing the sampling. With the pill genuinely over
     the page it amplified anything red behind it, and scrolled over the
     maroon enterprise band the whole bar turned pink.

     Pulling saturation almost to zero keeps the blur and the transparency,
     so the shapes and the light behind still come through, while the hue
     does not. Over maroon the sample lands near grey and the pill reads
     neutral; over the ivory ground there is no colour to lose. */
  backdrop-filter: blur(16px) saturate(12%);
  -webkit-backdrop-filter: blur(16px) saturate(12%);
  box-shadow: 0 10px 30px -18px rgba(20,16,15,.4), inset 0 0 0 1px rgba(20,16,15,.06);
  transition: background .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
html.is-scrolled .barc__group{
  background: rgba(255,255,255,.72);
  box-shadow: 0 16px 36px -20px rgba(20,16,15,.45), inset 0 0 0 1px rgba(20,16,15,.06);
}

.cap__links{ display: flex; align-items: center; gap: 4px; }

.lnk{
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  padding: 11px 15px; border-radius: var(--r-pill);
  font-family: var(--f-body); font-size: 15px; font-weight: 600;
  color: #2A2422; letter-spacing: -.005em; white-space: nowrap;
  transition: color .25s var(--ease-out), background .25s var(--ease-out);
}
.lnk::before{
  content: ""; position: absolute; left: 50%; bottom: 4px;
  width: 4px; height: 4px; margin-left: -2px; border-radius: 50%;
  background: var(--brand); opacity: 0; transform: translateY(4px);
  transition: opacity .25s var(--ease-out), transform .25s var(--ease-out);
}
.lnk:hover, .has-drop:hover > .lnk, .lnk[aria-current]{
  color: var(--brand); background: rgba(20,16,15,.05);
}
.lnk:hover::before, .has-drop:hover > .lnk::before, .lnk[aria-current]::before{
  opacity: 1; transform: translateY(0);
}
.caret{ width: 10px; height: 6px; opacity: .65; transition: transform .3s var(--ease-out); }
.has-drop:hover .caret{ transform: rotate(180deg); opacity: 1; }

/* ── Phone in the masthead ───────────────────────────────────────────
   Sits between the menu and the CTA, in the slot the mode pills used to
   hold. A number in the header is the one thing a buyer looks for that a
   contact page cannot answer fast enough, and it is the claim the support
   section makes: a person picks up. */
.barc__tel{
  display: inline-flex; align-items: center; gap: 8px;
  flex: none; margin: 0 6px 0 2px; padding: 10px 14px;
  border-radius: var(--r-pill);
  font-family: var(--f-body); font-size: 15px; font-weight: 700;
  letter-spacing: -.005em; white-space: nowrap; color: var(--ink-1);
  transition: color .25s var(--ease-out), background .25s var(--ease-out);
}
.barc__tel svg{ width: 15px; height: 15px; flex: none; opacity: .62; transition: opacity .25s var(--ease-out); }
.barc__tel:hover{ color: var(--brand); background: rgba(20,16,15,.05); }
/* The bar variant is a white disc sitting on the maroon pennant, so the
   text-link hover above wiped its background and left a maroon icon on a
   maroon ground: on hover the control disappeared. It keeps its disc and
   deepens instead. */
.barc__tel--bar:hover,
.barc__tel--bar:focus-visible{
  background: var(--paper); color: var(--brand-deep);
  box-shadow: var(--lift), 0 0 0 3px rgba(255,255,255,.35);
}
.barc__tel:hover svg{ opacity: 1; }
.barc__tel:focus-visible{ outline: 2px solid var(--brand); outline-offset: 2px; }

/* Between the nav breakpoint and about 1400px the bar is tight, so the
   number keeps its tap target and drops the icon rather than crowding
   the CTA off the end. */
@media (max-width: 1399px){
  .barc__tel{ padding: 10px 10px; font-size: 14.5px; }
  .barc__tel svg{ display: none; }
}

/* Below the nav breakpoint the whole .barc__group is hidden, and the number
   would go with it. On a phone tap-to-call is the most useful control in the
   header, so it stays as an icon beside the burger, in the slot the mobile
   pills used to hold. 50px square, the same tap target as the burger. */
.barc__tel--bar{ display: none; }
@media (max-width: 1179px){
  .barc__tel--bar{
    display: inline-flex; align-items: center; justify-content: center;
    position: relative; z-index: 4;
    width: 50px; height: 50px; margin: 0 4px 0 auto; padding: 0;
    border-radius: 50%; background: var(--paper); box-shadow: var(--lift);
    color: var(--brand);
  }
  .barc__tel--bar svg{ display: block; width: 19px; height: 19px; opacity: 1; }
  .barc__tel--bar span{ display: none; }
}

/* ── The CTA capsule ────────────────────────────────────────────── */
.cta{
  display: inline-flex; align-items: center; gap: 12px;
  padding: 9px 9px 9px 22px; border-radius: var(--r-pill);
  background: var(--brand); color: #fff;
  font-family: var(--f-display); font-size: 13px; font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase; white-space: nowrap;
  box-shadow: 0 3px 0 0 var(--brand-deep), 0 10px 22px -10px rgba(20,16,15,.55);
  transition: transform .2s var(--ease-snap), box-shadow .2s var(--ease-snap), background .3s var(--ease-out);
}
.cta:hover{
  background: var(--brand-deep); transform: translateY(-2px);
  box-shadow: 0 5px 0 0 var(--brand-shadow), 0 18px 34px -12px rgba(20,16,15,.6);
}
.cta:active{ transform: translateY(1px); box-shadow: 0 1px 0 0 var(--brand-deep), 0 5px 12px -8px rgba(20,16,15,.5); }
.cta__arrow{
  display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 50%; background: #fff; color: var(--brand); flex: none;
  transition: transform .3s var(--ease-snap);
}
.cta__arrow svg{ width: 16px; height: 16px; }
.cta:hover .cta__arrow{ transform: translateX(3px) rotate(-45deg); }

/* ── Mega panels ────────────────────────────────────────────────── */
.has-drop{ position: relative; }
/* The bridge from trigger to panel. At 22px it stopped at y86 while the
   panel's own bridge started at y91, leaving 5px of dead space: enough for
   one pointer sample to land outside both and shut the menu on the way
   down. Overlaps now, so the path is continuous. */
.has-drop::after{ content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 32px; }

.mega{
  position: fixed; top: calc(var(--flag-h) + 10px); right: var(--nav-side);
  width: min(1120px, calc(100vw - var(--nav-side) * 2));
  padding: 26px 26px 18px; border-radius: 22px;
  background: #fff; border: 1px solid rgba(20,16,15,.1);
  box-shadow: 0 34px 70px -30px rgba(20,16,15,.5), inset 0 1px 0 rgba(255,255,255,.9);
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(10px);
  transition: opacity .26s var(--ease-snap), transform .26s var(--ease-snap), visibility .26s;
}
.mega::before{ content: ""; position: absolute; left: 0; right: 0; top: -22px; height: 22px; }
.has-drop:hover .mega, .has-drop:focus-within .mega, .has-drop.is-open .mega{
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
}

/* Escape dismisses a panel that was opened by tabbing into it. Removing
   .is-open cannot do that on its own, because :focus-within is still true:
   Escape leaves focus on the trigger, which is where the user needs it.
   :not(:hover) keeps the mouse able to reopen the panel straight away, and
   the extra class raises this above the :focus-within rule regardless of
   source order. */
.has-drop.is-dismissed:not(:hover) .mega{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px);
}

.mega__grid{ display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 8px 14px; }
.mega__grid--products{ grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.mega__col{ min-width: 0; }
.mega__cat{
  margin: 0 0 10px; padding: 0 12px;
  font-family: var(--f-mono); font-size: 11.5px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--brand);
}
/* The column headings settle a beat before their items. */
.has-drop:hover .mega__cat, .has-drop.is-open .mega__cat{ animation: megaIn .3s var(--ease-snap) both; }
.mega__col a{
  display: block; padding: 9px 12px; border-radius: var(--r-sm);
  transition: background .18s var(--ease-snap);
}
.mega__col a b{
  display: block; font-family: var(--f-body); font-size: 14.5px; font-weight: 600;
  color: var(--ink-1); letter-spacing: -.005em;
}
.mega__col a span{
  display: block; margin-top: 1px; font-size: 12.5px; line-height: 1.4; color: var(--ink-3);
}
.mega__col a:hover{ background: rgba(20,16,15,.04); }
.mega__col a:hover b{ color: var(--brand); }
.has-drop:hover .mega__col a, .has-drop.is-open .mega__col a{ animation: megaIn .34s var(--ease-snap) both; animation-delay: .06s; }
@keyframes megaIn{ from{ opacity: 0; transform: translateY(6px); } to{ opacity: 1; transform: none; } }

.mega__foot{
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(20,16,15,.12);
  flex-wrap: wrap;
}
.mega__all{ font-family: var(--f-mono); font-size: 12.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); }
.mega__all:hover{ text-decoration: underline; }
.mega__note{ font-size: 13px; color: var(--ink-3); }
.mega__est{ font-family: var(--f-mono); font-size: 12.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.mega__est:hover{ color: var(--brand); }

/* Product rows in the Products panel */
.prodrow{ display: block; padding: 13px 14px; border-radius: var(--r-md); border: 1px solid var(--line); transition: border-color .2s var(--ease-snap), transform .2s var(--ease-snap); }
.prodrow:hover{ border-color: var(--brand); transform: translateY(-2px); }
.prodrow b{ display: block; font-family: var(--f-display); font-size: 1rem; font-weight: 800; color: var(--ink-1); }
.prodrow b em{ font-style: normal; color: var(--brand); }
.prodrow span{ display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.45; color: var(--ink-3); }
.prodrow i{ display: block; margin-top: 8px; font-style: normal; font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .06em; color: var(--ink-3); }

/* ── Burger + mobile sheet ──────────────────────────────────────── */
.burger{
  display: none; align-items: center; justify-content: center; gap: 5px; flex-direction: column;
  width: 50px; height: 50px; border-radius: 50%; background: var(--brand); flex: none;
  /* Above .flagfill (z:1). Without this the scrolled band, which spans the
     full width on mobile, paints over the burger and the menu is lost. */
  position: relative; z-index: 4;
  transition: background .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
/* On the band the burger is brand-on-brand, so it inverts to stay findable. */
html.is-scrolled .burger{
  background: #fff;
  box-shadow: 0 2px 10px -4px rgba(20,16,15,.5);
}
html.is-scrolled .burger span{ background: var(--brand); }
.burger span{ display: block; width: 20px; height: 2px; border-radius: 2px; background: #fff; transition: transform .3s var(--ease-out); }

.sheet{
  position: fixed; inset: 0; z-index: 90;
  /* v6's ground, brought across. The sheet was --paper, so opening the menu
     on a phone dropped a full white page over the site and the masthead's
     maroon vanished at exactly the moment the brand should be loudest. The
     radial sits top right, behind the close control, and the linear runs
     maroon to near-black down the scroll. */
  background:
    radial-gradient(120% 80% at 88% 0%, rgba(224,27,36,.5), transparent 62%),
    linear-gradient(170deg, var(--brand-deep) 0%, #4B0C0E 52%, #120809 100%);
  padding: 92px clamp(20px,6vw,40px) calc(40px + env(safe-area-inset-bottom));
  overflow-y: auto;
  opacity: 0; transform: translateY(-12px);
  transition: opacity .32s var(--ease-out), transform .32s var(--ease-out);
}
.sheet.is-open{ transform: none; }
.sheet.is-open{ opacity: 1; }
.sheet__close{
  position: absolute; top: 22px; right: clamp(20px,6vw,40px);
  font-family: var(--f-mono); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-1); min-height: 44px; min-width: 44px;
}
.sheet h2{ font-variation-settings: normal; line-height: 1.3; font-family: var(--f-mono); font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--brand); margin: 26px 0 10px; font-weight: 600; }
.sheet a.sheet__top{ display: block; font-family: var(--f-display); font-weight: 800; font-size: clamp(1.75rem,7vw,2.5rem); line-height: 1.18; letter-spacing: -.03em; color: var(--ink-1); }
.sheet a.sheet__sub{ display: block; padding: 7px 0; font-size: .95rem; color: var(--ink-2); border-bottom: 1px solid var(--line-soft); }
.sheet a.sheet__sub:last-child{ border-bottom: 0; }

@media (max-width: 1179px){
  .barc__group{ display: none; }
  .barc{ padding-right: 18px; }
  .burger{ display: flex; }
  .flagfill{ --s1: 100%; --s2: 100%; }
}
/* Must match the .barc__group breakpoint above. It was left at 1081 when the
   nav moved to 1180, so from 1081-1179px the links were hidden AND the sheet
   was display:none: the burger opened nothing. */
@media (min-width: 1180px){ .sheet{ display: none; } }

/* ── Reveals, progressive enhancement, visible by default ──────── */
.js [data-reveal]{ opacity: 0; transform: translateY(18px); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.js [data-reveal].in{ opacity: 1; transform: none; }
.js [data-reveal-group] > *{ opacity: 0; transform: translateY(18px); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.js [data-reveal-group].in > *{ opacity: 1; transform: none; }
.js [data-reveal-group].in > *:nth-child(2){ transition-delay: .06s }
.js [data-reveal-group].in > *:nth-child(3){ transition-delay: .12s }
.js [data-reveal-group].in > *:nth-child(4){ transition-delay: .18s }
.js [data-reveal-group].in > *:nth-child(5){ transition-delay: .24s }
.js [data-reveal-group].in > *:nth-child(6){ transition-delay: .30s }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .js [data-reveal], .js [data-reveal-group] > *{ opacity: 1 !important; transform: none !important; }
  .flagfill{ transition: none; }
}