@font-face{font-family:'Bricolage Grotesque';src:url('/assets/fonts/BricolageGrotesque-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}@font-face{font-family:'Bricolage Grotesque';src:url('/assets/fonts/BricolageGrotesque-800-normal.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}@font-face{font-family:'Source Serif 4';src:url('/assets/fonts/SourceSerif4-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:'Source Serif 4';src:url('/assets/fonts/SourceSerif4-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}@font-face{font-family:'DM Mono';src:url('/assets/fonts/DMMono-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:'DM Mono';src:url('/assets/fonts/DMMono-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}:root{
  --field:#C4C7C1; --field-hi:#D9DBD5; --field-lo:#B2B6AF;
  --slab:#14161A; --slab-lift:#1D2026;
  --ink:#14161A; --muted:#474B47;
  --copper:#A85426; --copper-ink:#7E3D18; --oxide:#204F73;
  --bone:#E6E8E3; --bone-mute:#9AA09B;
  --rule:#A6AAA4; --rule-soft:#B6BAB4;
  --shell:min(1240px,92vw);
  --gauge:132px;
  --ease:cubic-bezier(.16,.84,.24,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--field);color:var(--ink);
  font:400 17px/1.62 'Source Serif 4',Georgia,serif;
  font-variant-ligatures:none;font-feature-settings:"liga" 0,"dlig" 0;
  -webkit-font-smoothing:antialiased}
img,svg,video{display:block;max-width:100%}
a{color:var(--oxide);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{color:var(--copper-ink)}

/* The surfaces the browser draws for you still belong to the design. Leaving these at
   their defaults is the clearest tell that a page was assembled rather than built. */
::selection{background:var(--copper);color:#fff}
:focus-visible{outline:2px solid var(--copper-ink);outline-offset:3px;border-radius:1px}
html{scrollbar-color:var(--rule) var(--field-lo)}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--field-lo)}
::-webkit-scrollbar-thumb{background:var(--rule);border:3px solid var(--field-lo);border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:var(--muted)}
input,textarea{caret-color:var(--copper-ink)}
.mono,td.n,.fig{font-variant-numeric:tabular-nums}

h1,h2,h3,h4{font-family:'Bricolage Grotesque',system-ui,sans-serif;font-weight:800;
  letter-spacing:-.03em;line-height:1.02;margin:0;text-wrap:balance}
.d1{font-size:clamp(2.6rem,6vw,5.6rem)}
.d2{font-size:clamp(2rem,4.4vw,3.5rem)}
.prod .d2{font-size:clamp(2.2rem,5vw,4.1rem)}
.d3{font-size:clamp(1.35rem,2.2vw,1.9rem);letter-spacing:-.02em}
p{margin:0 0 1.05em;max-width:68ch;text-wrap:pretty}
.lead{font-size:clamp(1.08rem,1.5vw,1.32rem);line-height:1.5;max-width:60ch;
  text-wrap:pretty}
.mono{font-family:'DM Mono',ui-monospace,monospace;font-size:.775rem;letter-spacing:.07em;
  text-transform:uppercase;font-weight:500}
.muted{color:var(--muted)}
.shell{width:var(--shell);margin-inline:auto}
.rule{height:1px;background:var(--rule);border:0;margin:0}

.top{position:fixed;inset:0 0 auto 0;z-index:60;height:62px;display:flex;align-items:center;
  gap:24px;padding-inline:clamp(16px,3vw,34px);
  background:color-mix(in srgb,var(--field) 86%,transparent);
  backdrop-filter:blur(9px);border-bottom:1px solid var(--rule-soft)}
.top .brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);flex:none}
.top .brand img{height:26px;width:auto}
.top .brand b{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:.95rem;
  letter-spacing:-.02em}
.top nav{display:flex;gap:19px;margin-left:auto}
.top nav a{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:.87rem;
  color:var(--muted);text-decoration:none;letter-spacing:-.005em}
.top nav a:hover,.top nav a[aria-current]{color:var(--ink)}
.top .cta{flex:none;font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:.87rem;
  background:var(--ink);color:var(--field-hi);text-decoration:none;padding:9px 15px;border-radius:2px}
.top .cta:hover{background:var(--copper-ink);color:#fff}

/* Over the hero the bar sits on dark media, so it drops its own surface and inverts. A light
   band across the top of a full-bleed dark hero reads as a seam that should not be there. */
.top.over{background:transparent;backdrop-filter:none;border-bottom-color:transparent}
.top.over .brand{color:var(--bone)}
.top.over nav a{color:#C3C8C4}
.top.over nav a:hover,.top.over nav a[aria-current]{color:var(--bone)}
.top.over .burger{color:var(--bone);border-color:rgba(230,232,227,.42)}
.top.over .cta{background:var(--bone);color:var(--slab)}
.top.over .cta:hover{background:var(--copper);color:#fff}
.burger{display:none;flex:none;background:none;border:1px solid var(--rule);border-radius:2px;
  width:38px;height:34px;cursor:pointer;color:var(--ink);align-items:center;justify-content:center}

/* Depth gauge. Fixed, never scrolls, marks which stratum you are in. */
.gauge{position:fixed;left:0;top:62px;bottom:0;width:var(--gauge);z-index:50;
  display:flex;flex-direction:column;justify-content:center;gap:2px;
  padding-left:clamp(16px,3vw,34px);pointer-events:none}
.gauge a{pointer-events:auto;display:flex;align-items:center;gap:9px;text-decoration:none;
  font-family:'DM Mono',monospace;font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);padding:5px 0;transition:color .3s var(--ease)}
.gauge i{display:block;width:30px;height:1px;background:var(--rule);flex:none;
  transform:scaleX(.47);transform-origin:0 50%;
  transition:transform .45s var(--ease),background .3s var(--ease)}
.gauge a:hover{color:var(--ink)}
.gauge a[aria-current]{color:var(--copper-ink)}
.gauge a[aria-current] i{transform:scaleX(1);background:var(--copper)}
/* over a cinematic act the gauge sits on dark media and has to invert with it */
.gauge.on-dark a{color:#9AA09B}
.gauge.on-dark i{background:rgba(230,232,227,.34)}
.gauge.on-dark a:hover{color:var(--bone)}
.gauge.on-dark a[aria-current]{color:var(--copper)}
.gauge.on-dark a[aria-current] i{background:var(--copper)}

/* proximity rather than mandatory: mandatory fights the user whenever an act is taller
   than the viewport, which the programme table and the team grid both are on small screens */
.deck{scroll-snap-type:y proximity}
.act{min-height:100dvh;scroll-snap-align:start;display:flex;flex-direction:column;
  justify-content:center;padding:88px 0 60px;padding-left:var(--gauge);position:relative}
.act>.shell{width:min(1100px,calc(92vw - var(--gauge)))}
.act+.act{border-top:1px solid var(--rule-soft)}
.act-h{display:flex;align-items:baseline;gap:14px;margin-bottom:18px}
.act-h .mono{color:var(--copper-ink)}

/* The media well. The page is light, the clip is dark, so the well reads as a window cut
   through the surface rather than as a card sitting on it. */
.well{position:relative;background:var(--slab);border-radius:3px;overflow:hidden;
  box-shadow:0 18px 44px -26px rgba(20,22,26,.62),0 2px 6px -3px rgba(20,22,26,.34)}
.well video,.well img{width:100%;height:100%;object-fit:cover;display:block}
.well video{position:absolute;inset:0;opacity:0;transition:opacity .7s var(--ease)}
.well.playing video{opacity:1}
.well .ratio{aspect-ratio:16/9;width:100%}
.well figcaption{position:absolute;left:0;bottom:0;right:0;padding:10px 14px;color:var(--bone-mute);
  background:linear-gradient(to top,rgba(20,22,26,.86),transparent);
  font-family:'DM Mono',monospace;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase}

/* One authored motion moment, not an entrance on every element: content rises once as its
   act comes level, from an already-visible default so nothing is hidden without JS. */
.rise{opacity:1;transform:none}
.js .rise{opacity:0;transform:translateY(16px);
  transition:opacity .72s var(--ease),transform .72s var(--ease)}
.js .rise.in{opacity:1;transform:none}
.js .rise.d1x{transition-delay:.07s}
.js .rise.d2x{transition-delay:.14s}
.js .rise.d3x{transition-delay:.21s}
@media(prefers-reduced-motion:reduce){
  .js .rise{opacity:1;transform:none;transition:none}
  .deck{scroll-snap-type:none}
  .well video{display:none}
}

/* Cinematic act. The hero and the three product acts share one shape: the clip fills the
   whole section and the type sits on it.

   Two problems went away at once. Stacking type above a well made the act 1386px tall in a
   900px viewport, so the media fell below the fold. And a well that only occupied a third of
   a full-height act left the rest as dead space, which read as an unfinished page rather
   than as breathing room. Giving the media the entire act fixes the fit by construction and
   removes the gap, because there is no longer a short block floating in a tall container. */
.act.cine{padding:0;min-height:100dvh;position:relative;justify-content:stretch}
.cine{position:relative;min-height:100dvh;display:grid;align-items:end;isolation:isolate}
.cine>.well{position:absolute;inset:0;border-radius:0;box-shadow:none;z-index:0}
.cine>.well .ratio{aspect-ratio:auto;height:100%;width:100%}
.cine>.well figcaption{display:none}

/* The scrim is what makes bone type legible over a moving image, so it is part of the type
   contract rather than decoration. It flips side with the copy so the clip is never covered
   on the side you are meant to be looking at. */
.cine>.well::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(75deg,rgba(14,16,19,.92) 0%,rgba(14,16,19,.82) 42%,
    rgba(14,16,19,.58) 74%,rgba(14,16,19,.26) 90%,rgba(14,16,19,.34) 100%)}
.cine.flip>.well::after{background:linear-gradient(285deg,rgba(14,16,19,.92) 0%,
  rgba(14,16,19,.82) 42%,rgba(14,16,19,.58) 74%,rgba(14,16,19,.26) 90%,
  rgba(14,16,19,.34) 100%)}

.cine-copy{position:relative;z-index:5;color:var(--bone);
  padding:clamp(78px,11vh,104px) 0 clamp(48px,8vh,92px) var(--gauge);
  width:var(--shell);margin-inline:auto}
.cine-copy .inner{width:min(980px,100%)}
.cine-copy h2.d1{font-size:clamp(2.1rem,4.3vw,3.9rem);hyphens:none;
  overflow-wrap:normal;word-break:keep-all}
.cine.flip .cine-copy{padding-left:0;padding-right:var(--gauge)}
.cine.flip .cine-copy .inner{margin-left:auto}
.cine-copy .d1,.cine-copy .d2{color:var(--bone)}
.cine-copy .d1{max-width:21ch;text-wrap:pretty}
.cine-copy .lead,.cine-copy p{color:#CDD2CE;max-width:52ch;margin-top:14px}
.cine-copy .mono{color:var(--copper)}
.cine-copy .caps{border-top:1px solid rgba(230,232,227,.26);margin:20px 0 0}
.cine-copy .caps li{border-bottom:1px solid rgba(230,232,227,.15);padding:9px 2px;gap:14px}
.cine-copy .caps li:hover{background:rgba(230,232,227,.07)}
.cine-copy .caps b{color:var(--bone);font-size:.99rem}
.cine-copy .caps span{color:#AFB5B1;font-size:.86rem}
.cine-copy .facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 20px;
  margin:22px 0 24px;padding:0;list-style:none}
.cine-copy .facts .fig{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;
  font-size:1.6rem;letter-spacing:-.03em;color:var(--copper);display:block}
.cine-copy .facts small{font-size:.8rem;color:#B6BCB8;line-height:1.32;display:block;margin-top:2px}
.cine-copy .btnrow .btn{background:var(--bone);color:var(--slab);border-color:var(--bone)}
.cine-copy .btnrow .btn:hover{background:var(--copper);border-color:var(--copper);color:#fff}
.cine-copy .btnrow .btn.ghost{background:transparent;color:var(--bone);
  border-color:rgba(230,232,227,.44)}
.cine-copy .btnrow .btn.ghost:hover{background:var(--bone);color:var(--slab);border-color:var(--bone)}
.scroll-cue{position:absolute;left:50%;bottom:18px;z-index:5;transform:translateX(-50%);
  color:#CDD2CE;font-family:'DM Mono',monospace;font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;display:flex;align-items:center;gap:8px}
.scroll-cue i{display:block;width:1px;height:22px;
  background:linear-gradient(to bottom,transparent,var(--copper))}

/* capability list. Deliberately a list with rules, not a grid of identical icon cards. */
.caps{display:grid;gap:0;margin:0;padding:0;list-style:none;border-top:1px solid var(--rule)}
.caps li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;
  align-items:baseline;padding:15px 2px;border-bottom:1px solid var(--rule-soft)}
.caps b{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:1.06rem;
  letter-spacing:-.015em}
.caps span{color:var(--muted);font-size:.94rem}
.caps li:hover{background:var(--field-hi)}

/* product act */
.prod{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.24fr);
  gap:clamp(24px,4vw,58px);align-items:center}
.prod .well .ratio{aspect-ratio:3/2}
.prod .facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 18px;
  margin:18px 0 22px;padding:0;list-style:none}
.prod .facts div{display:flex;flex-direction:column;gap:1px}
.prod .facts .fig{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.5rem;
  letter-spacing:-.03em;color:var(--copper-ink)}
.prod .facts small{font-size:.8rem;color:var(--muted);line-height:1.32}

/* programme record */
.rec{width:100%;border-collapse:collapse;font-size:.9rem}
.rec caption{text-align:left;color:var(--muted);font-size:.9rem;margin-bottom:12px}
.rec th{text-align:left;font-family:'DM Mono',monospace;font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);font-weight:500;
  padding:0 12px 9px 0;border-bottom:1px solid var(--rule)}
.rec td{padding:11px 12px 11px 0;border-bottom:1px solid var(--rule-soft);vertical-align:top}
.rec tbody tr:hover{background:var(--field-hi)}
.rec .ag{font-family:'DM Mono',monospace;font-size:.74rem;font-weight:500;color:var(--ink);
  white-space:nowrap}
.rec .n{font-family:'DM Mono',monospace;font-size:.8rem;color:var(--copper-ink);white-space:nowrap}
.rec .pa{color:var(--muted);font-size:.85rem}
.filters{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
.filters button{font-family:'DM Mono',monospace;font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;background:transparent;border:1px solid var(--rule);color:var(--muted);
  padding:6px 11px;border-radius:2px;cursor:pointer;transition:all .22s var(--ease)}
.filters button:hover{border-color:var(--muted);color:var(--ink)}
.filters button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--field-hi)}

/* partner rail. Sits on a raised light plate because one of the eight logos ships with a
   baked near-white background; on a mid or dark field it would show as a plate edge. */
.rail{background:var(--field-hi);border:1px solid var(--rule-soft);border-radius:3px;
  padding:20px clamp(14px,2.4vw,26px);display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:14px clamp(14px,2.6vw,30px);align-items:center}
.rail div{display:grid;place-items:center;min-width:0}
.rail img{max-height:52px;width:auto;object-fit:contain}

.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 24px;
  margin:20px 0 24px;padding:0;list-style:none;max-width:640px}
.facts div{display:flex;flex-direction:column;gap:3px}
.facts .fig{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.55rem;
  letter-spacing:-.03em;color:var(--copper-ink);display:block;line-height:1.05}
.facts small{font-size:.82rem;color:var(--muted);line-height:1.34;display:block}
@media(max-width:560px){.facts{grid-template-columns:1fr;gap:14px}
  .facts div{flex-direction:row;align-items:baseline;gap:10px}}

/* products index */
.plist{display:grid;gap:clamp(28px,4vh,52px);margin-top:clamp(28px,5vh,54px)}
.people{columns:2;column-gap:clamp(24px,3.4vw,52px)}
.people article{break-inside:avoid;-webkit-column-break-inside:avoid;display:inline-block;
  width:100%}
/* Leadership only. The CEO bio is far longer than the other two, and column balancing put
   the CFO underneath it and stranded the VP alone in column two. `break-after:column` is not
   reliable in Chrome's multicol, so the three are placed explicitly: the long bio holds
   column one across both rows, and the two short ones stack beside it in the order the
   company lists them. */
.people.split{columns:auto;display:grid;grid-template-columns:1fr 1fr;
  column-gap:clamp(24px,3.4vw,52px);align-items:start}
.people.split article:nth-child(1){grid-column:1;grid-row:1 / span 2}
.people.split article:nth-child(2){grid-column:2;grid-row:1}
.people.split article:nth-child(3){grid-column:2;grid-row:2}
@media(max-width:860px){.people{columns:1}
  .people.split{display:block}
  .people.split article{grid-column:auto;grid-row:auto}}

.pcard{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(20px,3vw,42px);align-items:center}
.pcard:nth-child(even){direction:rtl}
.pcard:nth-child(even)>*{direction:ltr}
.pcard-media{display:block;text-decoration:none}
.pcard-media .well .ratio{aspect-ratio:16/10}
.pcard-body h3 a,.pcard-body .d3 a{color:var(--ink);text-decoration:none}
.pcard-body h3 a:hover,.pcard-body .d3 a:hover{color:var(--copper-ink)}
.pcard .facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 16px;
  margin-top:16px;padding:0;list-style:none}
.pcard .facts .fig{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;
  font-size:1.28rem;letter-spacing:-.03em;color:var(--copper-ink);display:block}
.pcard .facts small{font-size:.78rem;color:var(--muted);line-height:1.3;display:block;margin-top:2px}
@media(max-width:760px){.pcard{grid-template-columns:1fr}.pcard:nth-child(even){direction:ltr}}

/* facts + contact */
.facts3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.6vw,36px);
  border-top:1px solid var(--rule);padding-top:18px}
.facts3 h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:.95rem;
  margin-bottom:6px;letter-spacing:-.01em}
.facts3 p{font-size:.93rem;color:var(--muted);margin:0}
.btn{display:inline-flex;align-items:center;gap:9px;font-family:'Bricolage Grotesque',sans-serif;
  font-weight:600;font-size:.94rem;background:var(--ink);color:var(--field-hi);text-decoration:none;
  padding:12px 20px;border-radius:2px;border:1px solid var(--ink);cursor:pointer;
  transition:background .22s var(--ease),color .22s var(--ease)}
.btn:hover{background:var(--copper-ink);border-color:var(--copper-ink);color:#fff}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--rule)}
.btn.ghost:hover{background:var(--ink);color:var(--field-hi);border-color:var(--ink)}
.btnrow{display:flex;flex-wrap:wrap;gap:11px;margin-top:20px}

.foot{background:var(--field-hi);color:var(--muted);padding:56px 0 30px;
  padding-left:var(--gauge);scroll-snap-align:start;border-top:1px solid var(--rule)}
.foot .shell{width:min(1100px,calc(92vw - var(--gauge)))}
.foot a{color:var(--ink);text-decoration:none}
.foot a:hover{color:var(--copper-ink);text-decoration:underline}
.foot .grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:30px;margin-bottom:30px}
.foot h2{font-family:'DM Mono',monospace;font-size:.66rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);margin:0 0 11px;font-weight:500}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:7px;font-size:.92rem}
.foot .brand img{height:38px;width:auto}
.foot .bot{border-top:1px solid var(--rule-soft);padding-top:16px;display:flex;flex-wrap:wrap;gap:12px;
  justify-content:space-between;font-size:.82rem}

@media(max-width:980px){
  :root{--gauge:0px}
  .gauge{display:none}
  .act{padding:84px 0 56px}
  .act>.shell,.foot .shell{width:92vw}
  .prod{grid-template-columns:1fr;gap:22px}
  .facts3{grid-template-columns:1fr;gap:16px}
  .foot .grid{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  /* A scrim stretched across the whole section only protects the text if the section is
     exactly viewport height. On mobile it is not: the capabilities list makes this section
     taller, and dynamic browser chrome changes dvh while you scroll, so the text drifts onto
     whichever part of the gradient happens to be there and legibility becomes a coincidence.

     So on mobile the copy carries its own backdrop. Contrast then depends only on the block
     itself, never on how tall the section grew or where the page is scrolled. The section
     keeps a light even wash so the clip still reads around the panel. */
  /* The pseudo-element scrim composites OVER the copy on mobile regardless of z-index
     ordering, measured on rendered pixels: glyphs came out at exactly the value predicted by
     compositing it on top. Since the copy now carries its own backdrop, the section scrim has
     nothing left to do here, so it is removed rather than fought. */
  .cine>.well::after,.cine.flip>.well::after{background:rgba(14,16,19,.30)}
  .cine-copy{background:linear-gradient(to top,rgba(11,13,16,.97) 0%,rgba(11,13,16,.93) 62%,
    rgba(11,13,16,.86) 88%,rgba(11,13,16,.72) 100%);
    padding-top:30px;padding-bottom:36px;
    padding-inline:clamp(16px,4vw,26px);width:100%}
  .cine.flip .cine-copy{padding-inline:clamp(16px,4vw,26px)}
  .cine{align-items:end}
  .cine-copy .inner{width:100%}
  .cine-copy .facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px}
  .top nav,.top .cta{display:none}
  .burger{display:flex}
  .top.open{height:auto;flex-wrap:wrap;padding-bottom:14px;align-items:flex-start}
  .top.open nav{display:flex;flex-direction:column;gap:12px;width:100%;margin:12px 0 0;order:3}
  .top.open .cta{display:inline-flex;order:4}
  .deck{scroll-snap-type:none}
  .act{min-height:auto;padding:74px 0 46px}
  .caps li{grid-template-columns:1fr;gap:2px}
  .rail{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rec .pa{display:none}
  .foot .grid{grid-template-columns:1fr}
  .hero .d1{max-width:none}
}
@media(max-width:480px){
  /* three facts in two columns leaves one orphaned on its own row; stack instead */
  .cine-copy .facts,.pcard .facts{grid-template-columns:1fr;gap:12px}
  .cine-copy .facts div,.pcard .facts div{display:flex;align-items:baseline;gap:10px}
  .cine-copy .facts small,.pcard .facts small{margin-top:0}
}
@media(max-width:420px){
  .rec .tr{display:none}
}