/* ============================================================
   HERT — Graphic Design & Marketing
   Design system. Nothing more, nothing less.
   Tokens are derived from the HERT Brand Book (section 05/06).
   ============================================================ */

/* ---------- 01 TOKENS ---------- */
:root{
  /* Brand
     --red is the exact brand colour (Hert Red, Pantone 200 C) and is the ONLY
     saturated red anywhere on the site — graphics and type alike. Rules, marks,
     fills, buttons, active bars, display words, labels, eyebrows: all this value.

     There used to be a second token holding a lightened #E63946 for small red
     text on dark grounds. Same hue, but 75% saturation against this one's 100%,
     and that missing saturation read on screen as a pink that was plainly not
     the brand colour. It has been removed at Hamid's direction: one red, no
     variants.

     The value is #B3000E, Pantone 200 C, as printed on the COLOR PALETTE page
     of the HERT brand book — hex, RGB, CMYK and Pantone all stated there. That
     page is the source of truth and outranks any colour picked off a scan: the
     red diamonds on the brand-book COVER sample around #D6161F in the compressed
     image, and trusting that sample over the spec put a lighter, pinker red
     across the whole site for a day. Sample artwork only when no spec exists.

     What this colour can carry is measured, not assumed. It scores 2.63:1 on the
     charcoal ground and 2.76:1 on the void — under the 3.0:1 WCAG AA floor for
     large display type and well under the 4.5:1 for small text. Hamid chose the
     exact brand colour over a lightened variant knowing this. So red type here is
     emphasis and nothing may depend on it alone: never a sole error state, never
     the only indication of anything, never a colour a reader must resolve in
     order to use the page. On .ground-light it passes comfortably. */
  --red:#B3000E;
  --charcoal:#111111;
  --void:#0A0A0A;
  --white:#FFFFFF;
  --gray-100:#F4F4F4;
  --gray-300:#D6D4D1;
  --gray-400:#A6A6A6;
  --gray-600:#6E6963;
  --gray-700:#333333;
  --gray-800:#1E1E1E;

  /* Semantic — dark ground (default) */
  --bg:var(--charcoal);
  --bg-alt:var(--void);
  --fg:#E8E6E3;
  --fg-dim:#9A9793;
  --fg-faint:#84807B;
  --rule:rgba(255,255,255,.13);
  --rule-strong:rgba(255,255,255,.26);
  --panel:#171717;

  /* Grid */
  --shell:1680px;
  --gut:clamp(20px,4vw,64px);
  --col:12;

  /* Rhythm */
  --s-1:.5rem;  --s-2:1rem;   --s-3:1.5rem; --s-4:2rem;
  --s-5:3rem;   --s-6:4.5rem; --s-7:7rem;   --s-8:10rem;
  --section:clamp(5rem,11vw,10.5rem);

  /* Type */
  --display:"Archivo","Helvetica Neue",Helvetica,Arial,"Liberation Sans",sans-serif;
  --text:"Manrope","Helvetica Neue",Helvetica,Arial,sans-serif;

  --t-hero:clamp(3.1rem,10.4vw,10.5rem);
  --t-xxl:clamp(2.6rem,7.2vw,6.6rem);
  --t-xl:clamp(2rem,4.6vw,4rem);
  --t-lg:clamp(1.5rem,2.7vw,2.35rem);
  --t-md:clamp(1.125rem,1.6vw,1.4rem);
  --t-body:clamp(.9375rem,1.02vw,1.0625rem);
  --t-sm:.8125rem;
  --t-xs:.6875rem;

  /* Motion */
  --e-out:cubic-bezier(.16,1,.3,1);
  --e-io:cubic-bezier(.65,.05,.36,1);
  --d-micro:220ms;
  --d-mid:640ms;
  --d-long:1000ms;
}

/* Light ground — applied per-section, not per-page */
.ground-light{
  --bg:var(--gray-100);
  --bg-alt:var(--white);
  --fg:var(--charcoal);
  --fg-dim:#5A5754;
  --fg-faint:#6E6963;
  --rule:rgba(17,17,17,.15);
  --rule-strong:rgba(17,17,17,.34);
  --panel:var(--white);
  background:var(--bg);
  color:var(--fg);
}
.ground-dark{
  --bg:var(--charcoal); --bg-alt:var(--void); --fg:#E8E6E3;
  --fg-dim:#9A9793; --fg-faint:#84807B;
  --rule:rgba(255,255,255,.13); --rule-strong:rgba(255,255,255,.26); --panel:#171717;
  background:var(--bg); color:var(--fg);
}
.ground-void{ --bg:var(--void); background:var(--void); color:var(--fg); }

/* ---------- 02 RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--charcoal);color:#E8E6E3;
  font-family:var(--text);font-size:var(--t-body);line-height:1.65;
  font-weight:400;letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
h1,h2,h3,h4,h5,h6,p,figure,blockquote,ul,ol,dl,dd{margin:0}
ul,ol{list-style:none;padding:0}
.prose ul,.prose ol{list-style:disc;padding-left:1.2em;margin-top:1em}
.prose ol{list-style:decimal}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;padding:0}
:where(h1,h2,h3,h4){font-family:var(--display);font-weight:800;line-height:.92;letter-spacing:-.028em}
hr{border:0;border-top:1px solid var(--rule);margin:0}

/* ---------- 03 ACCESSIBILITY ---------- */
:focus-visible{
  outline:2px solid var(--red);
  outline-offset:3px;
  border-radius:1px;
}
.skip{
  position:absolute;left:var(--gut);top:-100px;z-index:2000;
  background:var(--red);color:#fff;padding:.75rem 1.25rem;
  font-size:var(--t-xs);letter-spacing:.18em;text-transform:uppercase;font-weight:700;
  transition:top var(--d-micro) var(--e-out);
}
.skip:focus{top:1rem}
.vh{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ---------- 04 LAYOUT ---------- */
.shell{
  width:100%;max-width:var(--shell);margin-inline:auto;
  padding-inline:var(--gut);
}
.shell-wide{width:100%;padding-inline:var(--gut)}
.grid{display:grid;grid-template-columns:repeat(var(--col),minmax(0,1fr));gap:var(--gut)}
.section{padding-block:var(--section);position:relative}
.section-tight{padding-block:clamp(3rem,6vw,5.5rem)}
.bleed{width:100%}

@media (max-width:1024px){ :root{--col:8} }
@media (max-width:640px){ :root{--col:4} }

/* Column helpers.
   These set only grid-column-END (span N) so that a .startN class can independently
   set the start line. Using the `grid-column` shorthand here would reset the start
   back to auto and collapse the element to a single track. */
.c1{grid-column-end:span 1}.c2{grid-column-end:span 2}.c3{grid-column-end:span 3}
.c4{grid-column-end:span 4}.c5{grid-column-end:span 5}.c6{grid-column-end:span 6}
.c7{grid-column-end:span 7}.c8{grid-column-end:span 8}.c9{grid-column-end:span 9}
.c10{grid-column-end:span 10}.c11{grid-column-end:span 11}.c12{grid-column-end:span 12}
.start2{grid-column-start:2}.start3{grid-column-start:3}.start4{grid-column-start:4}
.start5{grid-column-start:5}.start6{grid-column-start:6}.start7{grid-column-start:7}
.start8{grid-column-start:8}.start9{grid-column-start:9}
@media (max-width:1024px){
  .c1,.c2,.c3,.c4,.c5{grid-column-end:span 4}
  .c6,.c7,.c8,.c9,.c10,.c11,.c12{grid-column-end:span 8}
  .start2,.start3,.start4,.start5,.start6,.start7,.start8,.start9{grid-column-start:auto}
}
@media (max-width:640px){
  .c1,.c2,.c3,.c4,.c5,.c6,.c7,.c8,.c9,.c10,.c11,.c12{grid-column-end:span 4}
}

/* Safety net. A span wider than the number of tracks does not simply clamp —
   the grid invents implicit columns to fit it, which narrows every track in the
   section and skews the whole layout. Anything that slips through the helpers
   above (an inline style, a hand-written span) is caught here and made full
   width on a phone instead of breaking the section around it. */
@media (max-width:640px){
  .grid > *{grid-column-end:span 4!important}
}

/* ---- Banner band ----
   One quiet landscape between the hero and the first text band. Sized as a
   breath rather than a second hero: the height is capped well under a third of
   the viewport so the headline above it still owns the first screen, and there
   is no type over it at all, which is why it needs no scrim and no contrast
   budget. object-position holds the red line a quarter of the way down the
   band at every width — a centred crop drops it onto the top edge on wide
   screens, where the visible slice of a 16:9 source is only ~40% of its height. */
.band{position:relative;height:clamp(11rem,30svh,20rem);overflow:hidden;
  background:var(--void);border-block:1px solid var(--rule)}
.band .media{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto}
.band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 33%}
@media (max-width:760px){
  .band{height:clamp(8rem,22svh,13rem)}
}

/* ---------- 05 TYPOGRAPHY ---------- */
.d-hero{font-family:var(--display);font-size:var(--t-hero);font-weight:800;
  line-height:.86;letter-spacing:-.038em;text-transform:uppercase}
.d-xxl{font-family:var(--display);font-size:var(--t-xxl);font-weight:800;
  line-height:.9;letter-spacing:-.032em;text-transform:uppercase}
.d-xl{font-family:var(--display);font-size:var(--t-xl);font-weight:800;
  line-height:.96;letter-spacing:-.026em;text-transform:uppercase}
.d-lg{font-family:var(--display);font-size:var(--t-lg);font-weight:700;
  line-height:1.06;letter-spacing:-.018em;text-transform:uppercase}
.d-md{font-family:var(--display);font-size:var(--t-md);font-weight:700;
  line-height:1.2;letter-spacing:.01em;text-transform:uppercase}

.eyebrow{
  font-family:var(--text);font-size:var(--t-xs);font-weight:600;
  letter-spacing:.28em;text-transform:uppercase;color:var(--red);
  display:flex;align-items:center;gap:.9rem;
}
.eyebrow::after{content:"";flex:0 0 clamp(28px,4vw,64px);height:1px;background:var(--red)}
.eyebrow-plain{color:var(--fg-faint)}
.eyebrow-plain::after{background:var(--rule-strong)}

/* ---- Small text sitting on photography ----
   Red type is emphasis, never the carrier (see the token note at the top), and
   over a photograph that is not a preference but a necessity. The brand red has
   a relative luminance of 0.096, so clearing 4.5:1 would need a ground darker
   than the value itself — impossible over a lit frame. Measured before this rule
   existed, the hero eyebrow landed at 2.67:1 and the plate eyebrow at 1.02:1,
   which is invisible. So over imagery the small text goes to paper and the red
   survives as the rule beside it, which is a graphic element and carries no
   contrast requirement. */
.hero-bleed .hero-copy .eyebrow,
.plate-copy .eyebrow{color:#F2F0ED}
.hero-bleed .hero-copy .caps,
.plate-copy .caps{color:#D8D5D1}

.label{
  font-family:var(--text);font-size:var(--t-xs);font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--fg-dim);
}
.num{
  font-family:var(--display);font-size:var(--t-sm);font-weight:600;
  letter-spacing:.14em;color:var(--fg-faint);font-variant-numeric:tabular-nums;
}
.lede{font-size:clamp(1.02rem,1.45vw,1.28rem);line-height:1.55;color:var(--fg);max-width:52ch}
.prose{color:var(--fg-dim);max-width:60ch}
.prose p+p{margin-top:1.15em}
.prose strong{color:var(--fg);font-weight:600}
.measure-sm{max-width:38ch}
.measure{max-width:48ch}
.red{color:var(--red)}
.dim{color:var(--fg-dim)}
.faint{color:var(--fg-faint)}

/* Caps body — the mockup voice */
.caps{
  font-size:var(--t-sm);letter-spacing:.14em;text-transform:uppercase;
  line-height:1.9;font-weight:500;color:var(--fg-dim);
}

/* ---------- 06 RULES & MARKS ---------- */
.rule{height:1px;background:var(--rule);width:100%}
.rule-red{height:1px;background:var(--red);width:clamp(40px,5vw,72px)}
.mark{width:8px;height:8px;background:var(--red);flex:none}
.tick{display:block;width:1px;height:clamp(40px,6vw,84px);background:var(--rule-strong)}

/* ---------- 07 LINKS & BUTTONS ---------- */
.link{
  display:inline-flex;align-items:center;gap:.85rem;
  font-size:var(--t-xs);font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--fg);padding-block:.4rem;position:relative;
}
.link .bar{
  display:block;width:clamp(30px,3.4vw,56px);height:1px;background:var(--red);
  transition:width var(--d-micro) var(--e-out);
}
.link:hover .bar,.link:focus-visible .bar{width:clamp(46px,5.4vw,84px)}
.link .arrow{transition:transform var(--d-micro) var(--e-out);color:var(--red)}
.link:hover .arrow{transform:translateX(5px)}

.link-underline{
  position:relative;display:inline-block;
  background-image:linear-gradient(var(--red),var(--red));
  background-size:0% 1px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size var(--d-micro) var(--e-out);padding-bottom:2px;
}
.link-underline:hover,.link-underline:focus-visible{background-size:100% 1px}

.btn{
  display:inline-flex;align-items:center;gap:1rem;
  border:1px solid var(--rule-strong);padding:1.05rem 1.6rem;
  font-size:var(--t-xs);font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--fg);background:transparent;position:relative;overflow:hidden;isolation:isolate;
  transition:color var(--d-micro) var(--e-out),border-color var(--d-micro) var(--e-out);
}
.btn::before{
  content:"";position:absolute;inset:0;background:var(--red);z-index:-1;
  transform:scaleY(0);transform-origin:bottom;
  transition:transform 420ms var(--e-out);
}
.btn:hover::before,.btn:focus-visible::before{transform:scaleY(1)}
.btn:hover,.btn:focus-visible{color:#fff;border-color:var(--red)}
.btn-solid{background:var(--red);border-color:var(--red);color:#fff}
.btn-solid::before{background:var(--charcoal)}
.btn-block{width:100%;justify-content:space-between}

/* ---------- 08 HEADER / NAV ---------- */
.hdr{
  position:fixed;inset:0 0 auto 0;z-index:900;
  padding-block:clamp(.9rem,1.6vw,1.35rem);
  transition:background-color 420ms var(--e-out),border-color 420ms var(--e-out),
             backdrop-filter 420ms var(--e-out),transform 520ms var(--e-out);
  border-bottom:1px solid transparent;
}
.hdr-inner{display:flex;align-items:center;gap:var(--gut)}
.hdr.is-stuck{
  background:rgba(10,10,10,.82);backdrop-filter:blur(14px) saturate(1.1);
  border-bottom-color:var(--rule);
}
.hdr.is-hidden{transform:translateY(-104%)}
.brand{display:block;flex:none;line-height:0}
.brand img{width:clamp(96px,10.2vw,146px);height:auto}
.brand:focus-visible{outline-offset:6px}

.nav{display:flex;align-items:center;gap:clamp(1.1rem,2.5vw,2.6rem);margin-inline:auto}
.nav a{
  font-size:var(--t-xs);font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:#CFCCC8;position:relative;padding-block:.4rem;
  transition:color var(--d-micro) var(--e-out);
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--red);
  transform:scaleX(0);transform-origin:left;transition:transform 320ms var(--e-out);
}
.nav a:hover,.nav a:focus-visible{color:#fff}
.nav a:hover::after,.nav a:focus-visible::after{transform:scaleX(1)}
.nav a[aria-current="page"]{color:#fff}
.nav a[aria-current="page"]::after{transform:scaleX(1)}

.hdr-tag{
  flex:none;font-size:var(--t-xs);font-style:italic;letter-spacing:.1em;
  color:#8C8985;line-height:1.55;text-align:right;
}
.burger{
  flex:none;width:38px;height:38px;display:grid;place-content:center;gap:6px;
  margin-left:.5rem;
}
.burger span{display:block;width:22px;height:1.5px;background:#E8E6E3;transition:transform 380ms var(--e-out),opacity 200ms}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.75px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.75px) rotate(-45deg)}
@media (min-width:1025px){ .burger{display:none} }
@media (max-width:1024px){ .nav,.hdr-tag{display:none} .hdr-inner{justify-content:space-between} }

/* Full-screen menu */
.menu{
  position:fixed;inset:0;z-index:950;background:var(--void);color:#E8E6E3;
  display:flex;flex-direction:column;padding:calc(var(--gut) + 4.2rem) var(--gut) var(--gut);
  clip-path:inset(0 0 100% 0);pointer-events:none;
  transition:clip-path 720ms var(--e-io);
}
.menu.is-open{clip-path:inset(0 0 0 0);pointer-events:auto}
.menu ol{display:flex;flex-direction:column;gap:clamp(.4rem,1.4vw,1rem);margin-top:auto}
.menu li{opacity:0;transform:translateY(22px);transition:opacity 460ms var(--e-out),transform 460ms var(--e-out)}
.menu.is-open li{opacity:1;transform:none}
.menu.is-open li:nth-child(1){transition-delay:180ms}
.menu.is-open li:nth-child(2){transition-delay:230ms}
.menu.is-open li:nth-child(3){transition-delay:280ms}
.menu.is-open li:nth-child(4){transition-delay:330ms}
.menu.is-open li:nth-child(5){transition-delay:380ms}
.menu.is-open li:nth-child(6){transition-delay:430ms}
.menu-link{display:flex;align-items:baseline;gap:1.1rem;padding-block:.35rem}
.menu-link .n{font-family:var(--display);font-size:var(--t-xs);letter-spacing:.16em;color:var(--red);flex:none;width:2.2em}
.menu-link .t{font-family:var(--display);font-size:clamp(2.1rem,9vw,3.4rem);font-weight:800;
  letter-spacing:-.03em;text-transform:uppercase;line-height:1;
  transition:color var(--d-micro) var(--e-out),transform 380ms var(--e-out)}
.menu-link:hover .t,.menu-link:focus-visible .t{color:var(--red);transform:translateX(8px)}
.menu-foot{margin-top:clamp(2rem,5vw,3.5rem);padding-top:1.4rem;border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;justify-content:space-between}
body.menu-open{overflow:hidden}

/* ---------- 09 FOOTER ---------- */
.ftr{background:var(--void);color:#E8E6E3;padding-top:clamp(3.5rem,7vw,6rem);
  border-top:1px solid rgba(255,255,255,.1)}
.ftr .brand img{width:clamp(120px,13vw,190px)}
.ftr-cols{display:grid;gap:var(--gut) var(--gut);grid-template-columns:repeat(12,minmax(0,1fr))}
.ftr h3{font-family:var(--text);font-size:var(--t-xs);font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:#8E8A85;margin-bottom:1.15rem}
.ftr ul{list-style:none;margin:0;padding:0}
.ftr li+li{margin-top:.6rem}
.ftr a:not(.brand){font-size:var(--t-sm);color:#B4B1AD;transition:color var(--d-micro) var(--e-out)}
.ftr a:not(.brand):hover,.ftr a:not(.brand):focus-visible{color:#fff}
.ftr-bottom{margin-top:clamp(3rem,6vw,5rem);padding-block:1.5rem;border-top:1px solid rgba(255,255,255,.1);
  display:flex;flex-wrap:wrap;gap:.8rem 2rem;align-items:center;justify-content:space-between;
  font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;color:#8E8A85}
/* Footer columns: 4 + 2 + 2 + 4 of twelve on desktop. The spans live here rather
   than inline so the breakpoints below can actually override them. */
.ftr-cols > *{grid-column-end:span 2}
.ftr-cols > .ftr-wide{grid-column-end:span 4}
@media (max-width:1024px){
  .ftr-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ftr-cols > *,.ftr-cols > .ftr-wide{grid-column-end:span 1}
}
@media (max-width:520px){.ftr-cols{grid-template-columns:1fr}}

/* ---------- 10 MEDIA ---------- */
.media{position:relative;overflow:hidden;background:#0D0D0D;isolation:isolate}
.media img{width:100%;height:100%;object-fit:cover;display:block}
.media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,10,10,.16),rgba(10,10,10,0) 34%,rgba(10,10,10,.28));
  mix-blend-mode:multiply;opacity:.9;
}
.media-flat::after{display:none}
.r-portrait{aspect-ratio:4/5}
.r-tall{aspect-ratio:3/4}
.r-page{aspect-ratio:1/1.414}
.r-square{aspect-ratio:1/1}
.r-land{aspect-ratio:3/2}
.r-wide{aspect-ratio:16/9}
.r-cine{aspect-ratio:21/9}
.r-golden{aspect-ratio:1.618/1}
.r-full{aspect-ratio:auto;height:100%}
@media (max-width:640px){
  .r-cine{aspect-ratio:16/10}
  .r-wide{aspect-ratio:4/3}
}

/* ---- Full-bleed cinematic plate ----
   The scrim is anchored to the copy, not to the frame. Tying it to the frame
   meant its strength at the text depended on how tall the section happened to
   be, so the eyebrow measured 3.66:1 at 1440 and got worse, not better, when the
   section shortened on a phone. A band that begins above the copy and is already
   at 95% by the time it reaches it gives the same ground at every viewport,
   whatever the photograph is doing underneath. */
.plate{position:relative;min-height:clamp(22rem,58svh,40rem);display:flex;
  align-items:flex-end;background:var(--void);overflow:hidden}
.plate-art{position:absolute;inset:0;z-index:0}
.plate-art .media{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto}
.plate-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Mood only — legibility is the scrim band's job. */
.plate-art::after{content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(8,8,8,.35) 0%,rgba(8,8,8,0) 55%)}
.plate-scrim{position:relative;z-index:2;width:100%;
  padding-top:clamp(7rem,22vh,14rem);padding-bottom:clamp(2.5rem,6vw,4.5rem);
  background:linear-gradient(0deg,rgba(8,8,8,.97) 0%,rgba(8,8,8,.95) 55%,
    rgba(8,8,8,.45) 80%,rgba(8,8,8,0) 100%)}
.plate-copy{color:#F2F0ED}

figcaption{
  margin-top:.85rem;font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-faint);display:flex;gap:.75rem;align-items:baseline;
}
figcaption::before{content:"";width:14px;height:1px;background:var(--red);flex:none;transform:translateY(-4px)}

/* Slow scale on scroll-in */
.media-zoom img{transform:scale(1.06);transition:transform 1600ms var(--e-out)}
.is-in .media-zoom img,.media-zoom.is-in img{transform:scale(1)}

/* ---------- 11 GRAIN + VIGNETTE ---------- */
.grain{
  position:fixed;inset:-120px;z-index:800;pointer-events:none;opacity:.055;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
  will-change:transform;
}
@media (prefers-reduced-motion:no-preference){
  .grain{animation:grainshift 7s steps(6,end) infinite}
}
@keyframes grainshift{
  0%{transform:translate(0,0)}16%{transform:translate(-14px,9px)}
  33%{transform:translate(11px,-13px)}50%{transform:translate(-8px,-9px)}
  66%{transform:translate(13px,7px)}83%{transform:translate(-11px,12px)}
  100%{transform:translate(0,0)}
}

/* ---------- 12 CURSOR ---------- */
.cursor{
  position:fixed;top:0;left:0;z-index:1000;pointer-events:none;
  width:9px;height:9px;background:var(--red);
  transform:translate3d(-50px,-50px,0);
  transition:width 260ms var(--e-out),height 260ms var(--e-out),
             background-color 260ms var(--e-out),opacity 260ms;
  mix-blend-mode:normal;opacity:0;
}
.cursor.is-live{opacity:1}
.cursor.is-hot{width:44px;height:44px;background:rgba(179,0,14,.22);
  outline:1px solid var(--red);}
@media (hover:none),(pointer:coarse),(prefers-reduced-motion:reduce){.cursor{display:none}}

/* ---------- 13 REVEALS ----------
   Scoped to html.js so that with JavaScript disabled, or if the script fails to
   load, every element is visible by default. Nothing is ever hidden by CSS alone. */
@media (prefers-reduced-motion:no-preference){
  .js .rv{opacity:0;transform:translateY(26px);
      transition:opacity 900ms var(--e-out),transform 900ms var(--e-out)}
  .js .rv.is-in{opacity:1;transform:none}
  .js .rv-mask{clip-path:inset(0 100% 0 0);transition:clip-path 1100ms var(--e-io)}
  .js .rv-mask.is-in{clip-path:inset(0 0 0 0)}
  .js .rv-up{overflow:hidden;display:block}
  .js .rv-up>*{display:block;transform:translateY(105%);transition:transform 1000ms var(--e-io)}
  .js .rv-up.is-in>*{transform:none}
  .js .rv-d1{transition-delay:90ms}.js .rv-d2{transition-delay:180ms}
  .js .rv-d3{transition-delay:270ms}.js .rv-d4{transition-delay:360ms}
  .js .rv-d5{transition-delay:450ms}
}

/* ---------- 14 HERO ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;
  padding-top:clamp(6rem,11vh,9rem);background:var(--void);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;flex:1;min-height:0}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr;grid-template-rows:auto 1fr}}
.hero-copy{display:flex;flex-direction:column;justify-content:center;
  padding:clamp(1.5rem,4vw,3rem) var(--gut) clamp(2rem,5vw,4rem) var(--gut)}
.hero-art{position:relative;min-height:44svh;background:#0D0D0D}
.hero-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-art::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(10,10,10,.92),rgba(10,10,10,.1) 42%,rgba(10,10,10,0))}
@media (max-width:900px){.hero-art::after{background:linear-gradient(180deg,rgba(10,10,10,.7),rgba(10,10,10,0) 50%)}}

/* ---- Full-bleed hero ----
   The image covers the whole section and the copy sits on top of it. The scrim
   is not decoration: measured against the plate, the headline needs the ground
   under it held below about 22% luminance to clear 4.5:1, which the first stop
   guarantees regardless of what the photograph does there. Every value below is
   a contrast requirement, not a taste one. */
.hero-bleed .hero-art{position:absolute;inset:0;min-height:0;z-index:0}
.hero-bleed .hero-art .media{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto}
.hero-bleed .hero-art::after{
  background:
    linear-gradient(90deg,rgba(8,8,8,.95) 0%,rgba(8,8,8,.88) 30%,rgba(8,8,8,.45) 58%,rgba(8,8,8,.18) 100%),
    linear-gradient(0deg,rgba(8,8,8,.55) 0%,rgba(8,8,8,0) 38%);
}
.hero-bleed .hero-inner{position:relative;z-index:2;display:flex;flex:1;min-height:0;
  align-items:center;width:100%}
.hero-bleed .hero-copy{max-width:min(64rem,92%);padding-block:clamp(2rem,6vh,4rem)}
/* The cap is in rem, not ch. A ch cap looked reasonable but is measured on the
   body font (~8.5px), so 58ch resolved to ~493px while the hero headline needs
   roughly 4.4em of a 150px face — about 650px at 1440. The masked reveal lines
   have overflow:hidden, so the shortfall cut the words in half rather than
   wrapping them. The prose below sets its own 40ch measure inline. */
@media (max-width:900px){
  .hero-bleed .hero-copy{max-width:none}
  /* On a phone the copy sits over the lower half, so the scrim has to come from
     the bottom instead of the left or the prose loses its ground. */
  .hero-bleed .hero-art::after{
    background:
      linear-gradient(0deg,rgba(8,8,8,.95) 0%,rgba(8,8,8,.9) 46%,rgba(8,8,8,.4) 78%,rgba(8,8,8,.2) 100%);
  }
  .hero-bleed .hero-inner{align-items:flex-end}
}
/* ---- Inner-page headers ----
   Work, Services and About use the same full-bleed header as the home page, but
   over pictures that are far paler — a lit concrete wall and an overcast sky
   rather than a dark hall. Measured at 1440 against the real rendered ground,
   the Work caption came back at 3.11:1, short of the 4.5 small text needs, so it
   is lifted off the dim grey it uses on flat black. The left end of the scrim is
   deepened a little at the same time; the right-hand stops are left alone, so
   the picture keeps its light exactly where no type is sitting on it. Both rules
   are confined to these pages, so the approved home hero is untouched. */
@media (min-width:901px){
  .hero-head .hero-art::after{
    background:
      linear-gradient(90deg,rgba(8,8,8,.97) 0%,rgba(8,8,8,.92) 30%,rgba(8,8,8,.5) 58%,rgba(8,8,8,.18) 100%),
      linear-gradient(0deg,rgba(8,8,8,.55) 0%,rgba(8,8,8,0) 38%);
  }
}
.hero-head .hero-copy .label{color:#F2F0ED}
/* A 16:9 header in a portrait viewport shows only the middle quarter of the
   frame. On these two pictures the single red element — the sphere, the red
   edge — sits well right of centre, so a default centre crop hands a phone a
   rectangle of blank concrete. These move the phone crop onto the subject;
   above 900px the whole frame is in view and the default applies. */
@media (max-width:900px){
  .hero-art img.focus-right{object-position:75% center}
  .hero-art img.focus-far-right{object-position:85% center}
}

.hero-rail{position:absolute;right:var(--gut);top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:.9rem;align-items:center;z-index:3}
.hero-rail i{width:5px;height:5px;border:1px solid rgba(255,255,255,.4);border-radius:50%;display:block}
.hero-rail i.on{background:var(--red);border-color:var(--red)}
@media (max-width:900px){.hero-rail{display:none}}
.scroll-cue{position:absolute;right:var(--gut);bottom:clamp(1.4rem,4vw,2.6rem);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:.7rem;
  font-size:var(--t-xs);letter-spacing:.24em;text-transform:uppercase;color:#8C8985}
.scroll-cue .tick{height:56px;background:linear-gradient(var(--rule-strong),transparent);position:relative;overflow:hidden}
.scroll-cue .tick::after{content:"";position:absolute;inset:0 auto auto 0;width:1px;height:18px;background:var(--red)}
@media (prefers-reduced-motion:no-preference){
  .scroll-cue .tick::after{animation:cue 2.2s var(--e-io) infinite}
}
@keyframes cue{0%{transform:translateY(-20px)}60%,100%{transform:translateY(56px)}}
@media (max-width:640px){.scroll-cue{display:none}}

/* Hero headline lines */
.hero-lines{display:block}
.hero-lines .ln{display:block;overflow:hidden}
.hero-lines .ln>span{display:block}
@media (prefers-reduced-motion:no-preference){
  .js .hero-lines .ln>span{transform:translateY(104%);transition:transform 1100ms var(--e-io)}
  .js.hero-ready .hero-lines .ln>span{transform:none}
  .js .hero-lines .ln:nth-child(2)>span{transition-delay:110ms}
  .js .hero-lines .ln:nth-child(3)>span{transition-delay:220ms}
  .js .hero-lines .ln:nth-child(4)>span{transition-delay:330ms}
}

/* ---------- 15 PROJECT CARDS ---------- */
.pcard{position:relative;display:block;background:var(--panel);
  border:1px solid var(--rule);overflow:hidden;height:100%;
  transition:border-color 420ms var(--e-out),background-color 420ms var(--e-out)}
.pcard:hover,.pcard:focus-visible{border-color:var(--rule-strong);background:#1B1B1B}
.pcard-media{position:relative;overflow:hidden}
.pcard-media img{transition:transform 1200ms var(--e-out),filter 700ms var(--e-out)}
.pcard:hover .pcard-media img{transform:scale(1.045)}
.pcard-body{padding:clamp(1.2rem,2vw,1.8rem);display:flex;flex-direction:column;gap:.8rem;min-height:0}
.pcard-cat{font-size:var(--t-xs);font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--red)}
.pcard h3{font-size:clamp(1.1rem,1.55vw,1.45rem);letter-spacing:-.012em;line-height:1.05;
  text-transform:uppercase;font-weight:700;color:#F0EEEB}
.pcard .meta{font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-faint);
  display:flex;flex-wrap:wrap;gap:.35rem .9rem}
.pcard .go{margin-top:auto;padding-top:.6rem;color:var(--red);
  transition:transform 380ms var(--e-out)}
.pcard:hover .go{transform:translateX(6px)}
/* Wide closing card — body sits beside the image rather than beneath it. */
@media (min-width:901px){
  .pcard-wide{display:grid;grid-template-columns:1.618fr 1fr;align-items:stretch}
  .pcard-wide .pcard-media{height:100%}
  .pcard-wide .pcard-media .media{height:100%;aspect-ratio:auto}
  .pcard-wide .pcard-body{justify-content:center;padding:clamp(1.6rem,3vw,3rem)}
  .pcard-wide h3{font-size:clamp(1.4rem,2.6vw,2.2rem)}
}
.pcard::before{
  content:"";position:absolute;left:0;top:0;width:2px;height:100%;background:var(--red);
  transform:scaleY(0);transform-origin:top;transition:transform 520ms var(--e-out);z-index:2;
}
.pcard:hover::before,.pcard:focus-visible::before{transform:scaleY(1)}

/* Index (list) view */
.pindex{border-top:1px solid var(--rule)}
.pindex-row{
  display:grid;grid-template-columns:4rem 1fr 12rem 8rem 4rem;gap:var(--gut);
  align-items:center;padding-block:clamp(1.1rem,2.1vw,1.7rem);
  border-bottom:1px solid var(--rule);position:relative;
  transition:padding-inline var(--d-micro) var(--e-out),color var(--d-micro) var(--e-out);
}
.pindex-row::before{content:"";position:absolute;inset:0;background:var(--red);
  transform:scaleX(0);transform-origin:left;transition:transform 520ms var(--e-io);z-index:-1}
.pindex-row:hover::before,.pindex-row:focus-visible::before{transform:scaleX(1)}
.pindex-row:hover,.pindex-row:focus-visible{padding-inline:1.15rem;color:#fff}
.pindex-row:hover .num,.pindex-row:hover .pcard-cat,.pindex-row:hover .meta{color:rgba(255,255,255,.82)}
.pindex-row h3{font-size:clamp(1.15rem,2.4vw,2rem);text-transform:uppercase;font-weight:800;letter-spacing:-.022em}
@media (max-width:900px){
  .pindex-row{grid-template-columns:2.6rem 1fr auto;row-gap:.35rem}
  .pindex-row .hide-sm{display:none}
}

/* ---------- 16 FILTERS ---------- */
.filters{display:flex;flex-wrap:wrap;gap:.5rem}
.filter{
  border:1px solid var(--rule);padding:.6rem 1rem;font-size:var(--t-xs);
  letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--fg-dim);
  display:inline-flex;align-items:center;gap:.6rem;
  transition:color var(--d-micro),border-color var(--d-micro),background-color var(--d-micro);
}
.filter .n{color:var(--fg-faint);font-size:.85em}
.filter:hover{color:var(--fg);border-color:var(--rule-strong)}
.filter[aria-pressed="true"]{background:var(--red);border-color:var(--red);color:#fff}
.filter[aria-pressed="true"] .n{color:rgba(255,255,255,.7)}
.pgrid-item{transition:opacity 420ms var(--e-out),transform 420ms var(--e-out)}
.pgrid-item[hidden]{display:none}
.pgrid-item.is-out{opacity:0;transform:translateY(10px)}

.viewtoggle{display:inline-flex;border:1px solid var(--rule)}
.viewtoggle button{padding:.55rem .95rem;font-size:var(--t-xs);letter-spacing:.18em;
  text-transform:uppercase;font-weight:600;color:var(--fg-faint)}
.viewtoggle button[aria-pressed="true"]{background:var(--fg);color:var(--bg)}

/* ---------- 17 PROCESS / STAGES ---------- */
.stages{counter-reset:st}
.stage{
  display:grid;grid-template-columns:5.5rem 1fr;gap:var(--gut);
  padding-block:clamp(1.4rem,3vw,2.4rem);border-top:1px solid var(--rule);
  position:relative;
}
.stage:last-child{border-bottom:1px solid var(--rule)}
.stage .n{font-family:var(--display);font-size:clamp(1.6rem,3.4vw,2.6rem);font-weight:800;
  color:transparent;-webkit-text-stroke:1px var(--fg-faint);line-height:1;
  transition:color 520ms var(--e-out),-webkit-text-stroke-color 520ms var(--e-out)}
.stage.is-in .n{color:var(--red);-webkit-text-stroke-color:var(--red)}
.stage h3{font-size:clamp(1.15rem,2vw,1.6rem);text-transform:uppercase;margin-bottom:.55rem}
@media (max-width:640px){.stage{grid-template-columns:3.2rem 1fr}}

/* ---------- 18 SERVICES ---------- */
.svc{border-top:1px solid var(--rule)}
.svc:last-of-type{border-bottom:1px solid var(--rule)}
.svc-head{
  display:grid;grid-template-columns:5rem 1fr 3rem;gap:var(--gut);align-items:center;
  width:100%;text-align:left;padding-block:clamp(1.3rem,2.6vw,2.1rem);
}
.svc-head h3{font-size:clamp(1.3rem,3.2vw,2.6rem);text-transform:uppercase;
  transition:color var(--d-micro) var(--e-out)}
.svc-head:hover h3{color:var(--red)}
.svc-plus{position:relative;width:20px;height:20px;justify-self:end}
.svc-plus::before,.svc-plus::after{content:"";position:absolute;background:var(--red);
  transition:transform 420ms var(--e-out)}
.svc-plus::before{left:0;top:9.5px;width:20px;height:1.5px}
.svc-plus::after{top:0;left:9.5px;height:20px;width:1.5px}
.svc-head[aria-expanded="true"] .svc-plus::after{transform:scaleY(0)}
/* Panels are open in the markup so the content exists without JavaScript.
   The script collapses the closed ones on init. */
.svc-panel{overflow:hidden;transition:height 520ms var(--e-io)}
.svc-panel-inner{padding-bottom:clamp(1.6rem,3.4vw,2.8rem)}
.svc-panel-inner .lede+.prose{margin-top:1.25rem}
.svc-list{display:flex;flex-wrap:wrap;gap:.5rem}
.svc-list li{border:1px solid var(--rule);padding:.5rem .85rem;font-size:var(--t-xs);
  letter-spacing:.14em;text-transform:uppercase;color:var(--fg-dim)}
@media (max-width:640px){.svc-head{grid-template-columns:2.6rem 1fr 2rem}}

/* ---------- 19 FORM ---------- */
.form{display:grid;gap:clamp(1.2rem,2.4vw,1.9rem)}
.field{position:relative;display:flex;flex-direction:column;gap:.5rem}
.field label{font-size:var(--t-xs);letter-spacing:.2em;text-transform:uppercase;
  font-weight:600;color:var(--fg-dim)}
.field label .req{color:var(--red)}
.field input,.field select,.field textarea{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--rule-strong);
  padding:.7rem 0;font-size:var(--t-body);color:var(--fg);border-radius:0;
  transition:border-color var(--d-micro) var(--e-out);
}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--red) 50%),linear-gradient(135deg,var(--red) 50%,transparent 50%);
  background-position:calc(100% - 11px) calc(50% + 1px),calc(100% - 6px) calc(50% + 1px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:2rem;cursor:pointer}
.field select option{background:var(--charcoal);color:var(--fg)}
.field textarea{resize:vertical;min-height:8.5rem;line-height:1.6}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-bottom-color:var(--red)}
.field input::placeholder,.field textarea::placeholder{color:var(--fg-faint)}
.field input[type="file"]{padding:.55rem 0;font-size:var(--t-sm);color:var(--fg-dim);cursor:pointer}
.field input[type="file"]::file-selector-button{
  margin-right:1rem;border:1px solid var(--rule-strong);background:transparent;color:var(--fg);
  padding:.55rem 1rem;font-size:var(--t-xs);font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;cursor:pointer;border-radius:0;
  transition:background-color var(--d-micro) var(--e-out),border-color var(--d-micro) var(--e-out);
}
.field input[type="file"]::file-selector-button:hover{background:var(--red);border-color:var(--red);color:#fff}
.field .err{font-size:var(--t-xs);letter-spacing:.1em;color:var(--red);min-height:1.1em}
.field.has-error input,.field.has-error select,.field.has-error textarea{border-bottom-color:var(--red)}
.field-check{flex-direction:row;align-items:flex-start;gap:.85rem}
.field-check input{width:17px;height:17px;flex:none;margin-top:.3rem;accent-color:var(--red)}
.field-check label{text-transform:none;letter-spacing:.01em;font-size:var(--t-sm);
  line-height:1.6;color:var(--fg-dim);font-weight:400}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:inherit}
@media (max-width:640px){.form-grid{grid-template-columns:1fr}}
.form-status{border:1px solid var(--rule);padding:1rem 1.2rem;font-size:var(--t-sm)}
.form-status[data-tone="ok"]{border-color:var(--red);color:var(--fg)}
.form-status[data-tone="bad"]{border-color:var(--red);color:var(--red)}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- 20 CASE STUDY ---------- */
/* Case-study opening: a split rather than a scrimmed background, so project
   imagery that already contains typography is never veiled behind the title. */
.cs-hero{display:grid;grid-template-columns:1fr 1fr;background:var(--void);min-height:84svh}
.cs-hero-copy{display:flex;flex-direction:column;justify-content:center;
  padding:clamp(8rem,15vh,11rem) clamp(1.5rem,3.5vw,4rem) clamp(2.5rem,5vw,4rem) var(--gut)}
.cs-hero-art{position:relative;min-height:56svh;background:#0D0D0D}
.cs-hero-art .media{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto}
/* Keeps the fixed header legible where it overlaps full-bleed imagery. */
.cs-hero-art::before,.hero-art::before{
  content:"";position:absolute;inset:0 0 auto 0;height:clamp(90px,14vh,170px);z-index:3;
  background:linear-gradient(180deg,rgba(10,10,10,.9),rgba(10,10,10,0));pointer-events:none;
}
@media (max-width:900px){
  .cs-hero{grid-template-columns:1fr}
  .cs-hero-copy{padding-inline:var(--gut);order:2;padding-top:clamp(2rem,6vw,3rem)}
  .cs-hero-art{order:1;min-height:48svh;margin-top:clamp(4.5rem,11vh,6rem)}
}
.cs-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:var(--gut);border-top:1px solid var(--rule);padding-top:1.4rem}
.cs-meta dt{font-size:var(--t-xs);letter-spacing:.2em;text-transform:uppercase;color:var(--fg-faint);margin-bottom:.45rem}
.cs-meta dd{font-size:var(--t-sm);letter-spacing:.06em;color:var(--fg)}
/* Services can be long, so it takes the full row. 1/-1 adapts to however many
   tracks auto-fit produced, unlike a fixed span that overflows a 1-column grid. */
.cs-meta-full{grid-column:1/-1}
.quote{
  font-family:var(--display);font-size:clamp(1.5rem,3.6vw,2.9rem);font-weight:700;
  line-height:1.12;letter-spacing:-.024em;text-transform:uppercase;color:var(--fg);
  border-left:2px solid var(--red);padding-left:clamp(1.2rem,3vw,2.4rem);
}
.gallery-h{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(240px,34vw);
  gap:var(--gut);overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:1.2rem;scrollbar-width:thin;scrollbar-color:var(--red) transparent;
}
.gallery-h>*{scroll-snap-align:start}
.gallery-h::-webkit-scrollbar{height:2px}
.gallery-h::-webkit-scrollbar-thumb{background:var(--red)}
.gallery-h::-webkit-scrollbar-track{background:var(--rule)}
.pnav{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--gut);align-items:center;
  border-top:1px solid var(--rule);padding-top:clamp(1.6rem,3vw,2.4rem)}
.pnav .to-right{text-align:right}
@media (max-width:640px){.pnav{grid-template-columns:1fr;text-align:left}.pnav .to-right{text-align:left}}

/* ---------- 21 MISC ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch}
@media (max-width:900px){.split{grid-template-columns:1fr}}
/* Image half of a split: fills the row without letting its intrinsic height
   dictate how tall the whole section becomes. */
.split-media{position:relative;min-height:56svh}
.split-media .media{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto}
@media (max-width:900px){.split-media{min-height:62svh}}
.pad{padding:clamp(1.8rem,5vw,4.5rem)}
.stack-sm>*+*{margin-top:var(--s-2)}
.stack>*+*{margin-top:var(--s-3)}
.stack-lg>*+*{margin-top:var(--s-4)}
.flow-between{display:flex;flex-wrap:wrap;gap:1.4rem 2rem;align-items:flex-end;justify-content:space-between}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(246px,1fr));gap:1px;background:var(--rule)}
.tile{background:var(--bg);padding:clamp(1.3rem,2.4vw,2rem);display:flex;flex-direction:column;gap:.7rem;
  transition:background-color 420ms var(--e-out)}
.tile:hover{background:var(--panel)}
.tile .glyph{width:26px;height:26px;border:1px solid var(--red);position:relative;flex:none;margin-bottom:.35rem}
.tile .glyph[data-g="tri"]{border:0}
.tile .glyph[data-g="tri"]::after{content:"";position:absolute;inset:0;
  background:var(--red);clip-path:polygon(50% 4%,96% 96%,4% 96%)}
.tile .glyph[data-g="slash"]::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top right,transparent calc(50% - 1px),var(--red) 50%,transparent calc(50% + 1px))}
.tile .glyph[data-g="circle"]{border-radius:50%}
.tile .glyph[data-g="x"]{border:0}
.tile .glyph[data-g="x"]::before,.tile .glyph[data-g="x"]::after{
  content:"";position:absolute;left:0;top:50%;width:100%;height:1px;background:var(--red)}
.tile .glyph[data-g="x"]::before{transform:rotate(45deg)}
.tile .glyph[data-g="x"]::after{transform:rotate(-45deg)}
.tile .glyph[data-g="grid"]{background:
  linear-gradient(var(--red),var(--red)) 0 50%/100% 1px no-repeat,
  linear-gradient(var(--red),var(--red)) 50% 0/1px 100% no-repeat}

.bigstat{font-family:var(--display);font-size:clamp(2.4rem,6vw,4.6rem);font-weight:800;
  line-height:1;letter-spacing:-.03em}

/* Marquee strip */
.strip{overflow:hidden;border-block:1px solid var(--rule);padding-block:1.05rem;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.strip-track{display:flex;gap:clamp(2rem,5vw,4.5rem);width:max-content}
.strip span{font-family:var(--display);font-size:var(--t-sm);font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:var(--fg-faint);display:flex;align-items:center;gap:clamp(2rem,5vw,4.5rem)}
.strip span::after{content:"";width:5px;height:5px;background:var(--red);flex:none}
@media (prefers-reduced-motion:no-preference){
  .strip-track{animation:slide 42s linear infinite}
}
@keyframes slide{to{transform:translateX(-50%)}}

/* 404 */
.four{min-height:100svh;display:grid;place-items:center;text-align:center;position:relative;overflow:hidden}
.four-grid{position:absolute;inset:0;opacity:.16;
  background-image:linear-gradient(var(--rule-strong) 1px,transparent 1px),
                   linear-gradient(90deg,var(--rule-strong) 1px,transparent 1px);
  background-size:clamp(40px,6vw,88px) clamp(40px,6vw,88px);
  transform:skewY(-4deg) scale(1.3)}

/* Loader */
.loader{position:fixed;inset:0;z-index:1200;background:var(--void);
  display:grid;place-items:center;transition:opacity 620ms var(--e-out),visibility 620ms}
.loader img{width:clamp(130px,17vw,230px);opacity:0;animation:loadin 900ms var(--e-out) forwards}
.loader.is-done{opacity:0;visibility:hidden;pointer-events:none}
@keyframes loadin{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.loader{display:none}}

/* Page transitions where supported */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root){animation:vtout 260ms var(--e-io) both}
  ::view-transition-new(root){animation:vtin 440ms var(--e-out) both}
  @keyframes vtout{to{opacity:0}}
  @keyframes vtin{from{opacity:0}}
}

/* ---------- 22 RTL ---------- */
[dir="rtl"] .eyebrow::after{order:-1}
[dir="rtl"] .link .arrow{transform:scaleX(-1)}
[dir="rtl"] .link:hover .arrow{transform:scaleX(-1) translateX(5px)}
[dir="rtl"] .pcard::before{left:auto;right:0}
[dir="rtl"] .quote{border-left:0;border-right:2px solid var(--red);padding-left:0;padding-right:clamp(1.2rem,3vw,2.4rem)}
[dir="rtl"] .pindex-row::before{transform-origin:right}
[dir="rtl"] .hero-art::after{background:linear-gradient(-90deg,rgba(10,10,10,.92),rgba(10,10,10,.1) 42%,rgba(10,10,10,0))}
[dir="rtl"] .pnav .to-right{text-align:left}
[dir="rtl"] figcaption::before{order:1}

/* ---------- 23 PRINT ---------- */
@media print{
  .hdr,.menu,.grain,.cursor,.loader,.scroll-cue,.strip{display:none!important}
  body{background:#fff;color:#111}
  .section{padding-block:1.5rem}
}