@font-face {
  font-family: 'Alumni Sans';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/alumni-sans-latin-ext-italic.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Alumni Sans';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/alumni-sans-latin-italic.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Alumni Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/alumni-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Alumni Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/alumni-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Noto Sans Devanagari';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/noto-sans-devanagari-devanagari.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}

/* ==========================================================================
   Wide Wings Media
   Design system derived from the supplied "Creat" Elementor template kit
   (Alumni Sans display type, asterisk motif, outlined/solid headline mix,
   light logo band, light footer with asterisk watermark) and re-coloured to
   the client's brand palette: Deep Forest Green #0D5541 / Mint Mist #DEFFF5 /
   Charcoal #222222 / White.
   ========================================================================== */
:root{
  --green:#0D5541; --green-d:#07392B; --green-l:#12775B; --green-x:#1B9873;
  --mint:#DEFFF5; --mint-2:#EDFFF9; --mint-d:#B8EFDC;
  --ink:#161A18; --ink-2:#222222;
  --body:#4C5854; --muted:#5F6B65;
  --bg:#FFFFFF; --bg-2:#F2F5F3; --bg-3:#FAF7F4;
  --line:#E2E8E5; --line-2:#D3DCD8;

  --r-sm:8px; --r:12px; --r-lg:18px; --r-xl:24px; --pill:999px;
  --sh-sm:0 1px 3px rgba(7,57,43,.06);
  --sh:0 16px 40px -20px rgba(7,57,43,.3);
  --sh-lg:0 34px 70px -30px rgba(7,57,43,.38);

  --container:1280px;
  --gutter:clamp(20px,4.4vw,44px);
  --sect:clamp(66px,8vw,120px);
  --sect-sm:clamp(52px,5.6vw,84px);
  /* The step from an interior page's introduction into its first content section.
     One pair of values drives all four vertical pages, so the transition is the
     same everywhere and cannot be patched per page. */
  --intro-gap-below:clamp(20px,2.1vw,30px);
  --intro-gap-above:clamp(24px,2.4vw,34px);
  /* Breathing space between a page heading and the description under it. The H1 is
     set on a tight .86 line-height, so it needs a deliberate gap beneath it or the
     description reads as part of the heading block. Scales with the viewport:
     comfortable on a phone, generous but not empty on a large screen. */
  --head-to-intro:clamp(24px,1.4vw + 14px,34px);

  --ff-d:"Alumni Sans","Arial Narrow",system-ui,sans-serif;
  --ff-b:Inter,"Noto Sans Devanagari",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  /* Header height and logo height are one pair. The logo lockup is almost square
     (1050 x 1000), so its width is driven by its height: the header can only be
     compact if the space around the logo is small, not if the logo is small.
     --hh is the header height, --logo-h the artwork inside it. */
  --hh:82px;
  --logo-h:64px;
  /* The film hero ends flush with the bottom of the video, so the first section
     below it supplies the whole gap on its own. Given its own value here rather
     than inheriting the full mid-page section rhythm, which read as a blank band
     on a phone. Above tablet this matches the previous spacing. */
  --reel-gap:clamp(36px,8vw,120px);
  --bar-h:0px;      /* announcement bar height, set when one is showing */
  --bar-top-h:0px;  /* same, but only when that bar is at the top */
  --admin-h:0px; /* WordPress admin bar height, for signed-in users */
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden}
body{
  margin:0;background:var(--bg);color:var(--body);
  font-family:var(--ff-b);font-size:1.0625rem;line-height:1.68;font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;
}
img,svg,video,iframe{max-width:100%;display:block}
img,video{height:auto}
a{color:var(--green);text-decoration:none}
button{font:inherit;color:inherit}
ul,ol{margin:0;padding:0}
li{list-style:none}
h1,h2,h3,h4,h5,h6,p,figure,blockquote,fieldset{margin:0}
fieldset{border:0;padding:0;min-width:0}
:focus-visible{outline:3px solid var(--green-x);outline-offset:3px;border-radius:4px}
::selection{background:var(--green);color:#fff}

/* ---------- display type (Alumni Sans, as in the template) ---------- */
h1,h2,h3,h4,.h1,.h2,.h3,.h4{
  font-family:var(--ff-d);color:var(--ink);font-weight:800;
  letter-spacing:-.015em;line-height:.86;text-wrap:balance;
}
h1,.h1{font-size:clamp(2.9rem,7vw,5rem);line-height:.86;letter-spacing:-.02em}
h2,.h2{font-size:clamp(2.2rem,4.6vw,3.5rem);line-height:.88;letter-spacing:-.016em}
h3,.h3{font-size:clamp(1.65rem,2.6vw,2.25rem);line-height:.92;font-weight:700}
h4,.h4{font-size:clamp(1.3rem,1.8vw,1.55rem);line-height:.98;font-weight:700}
.lead{font-size:clamp(1.02rem,1.35vw,1.15rem);line-height:1.68}
.small{font-size:.9375rem;line-height:1.6}
.eyebrow{
  display:inline-flex;align-items:center;gap:.55em;
  font-family:var(--ff-b);font-size:.75rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--green);line-height:1.4;
}
.eyebrow svg{flex:none;width:15px;height:15px;fill:currentColor}
.eyebrow--light{color:var(--mint)}
.outline{color:transparent;-webkit-text-stroke:1.4px var(--ink)}
.outline-light{color:transparent;-webkit-text-stroke:1.4px rgba(255,255,255,.75)}
.outline-green{color:transparent;-webkit-text-stroke:1.4px var(--green)}
@supports not ((-webkit-text-stroke:1px red)){
  .outline{color:var(--ink)}.outline-green{color:var(--green)}.outline-light{color:#fff}
}
.txt-green{color:var(--green)}

/* ---------- layout ---------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.container--wide{max-width:1440px}
.container--narrow{max-width:900px}
.section{padding-block:var(--sect)}
.section--sm{padding-block:var(--sect-sm)}
.section--alt{background:var(--bg-2)}
.section--mint{background:linear-gradient(180deg,var(--mint-2),#fff)}
.sect-head{max-width:760px;margin-bottom:clamp(30px,4vw,54px)}
.sect-head .eyebrow{margin-bottom:.85rem}
.sect-head p{margin-top:1.05rem}
.sect-head--center{margin-inline:auto;text-align:center}
.sect-head--split{max-width:none;display:grid;gap:1.3rem;align-items:end}
@media(min-width:920px){
  .sect-head--split{grid-template-columns:1.25fr .75fr;gap:3rem}
  .sect-head--split .sh-side{padding-bottom:.5rem}
}

/* ---------- buttons ---------- */
.btn{
  --bg-btn:var(--green);--fg-btn:#fff;--bd-btn:var(--green);
  display:inline-flex;align-items:center;justify-content:center;gap:.65em;
  min-height:52px;padding:.75rem 1.6rem;border-radius:var(--pill);
  background:var(--bg-btn);color:var(--fg-btn);border:1.5px solid var(--bd-btn);
  font-family:var(--ff-b);font-size:.875rem;font-weight:600;letter-spacing:.02em;
  cursor:pointer;text-align:center;
  transition:transform .32s var(--ease),background .25s,color .25s,border-color .25s,box-shadow .32s;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px -12px rgba(7,57,43,.5)}
.btn:active{transform:translateY(0)}
.btn svg{width:14px;height:14px;flex:none;transition:transform .4s var(--ease)}
.btn:hover svg{transform:rotate(90deg)}
.btn--dark{--bg-btn:var(--ink);--bd-btn:var(--ink)}
.btn--dark:hover{--bg-btn:var(--green);--bd-btn:var(--green)}
.btn--light{--bg-btn:#fff;--fg-btn:var(--ink);--bd-btn:#fff}
.btn--light:hover{--bg-btn:var(--mint);--bd-btn:var(--mint)}
.btn--outline{--bg-btn:transparent;--fg-btn:var(--ink);--bd-btn:var(--line-2)}
.btn--outline:hover{--bg-btn:var(--ink);--fg-btn:#fff;--bd-btn:var(--ink)}
.btn--outline-light{--bg-btn:transparent;--fg-btn:#fff;--bd-btn:rgba(255,255,255,.5)}
.btn--outline-light:hover{--bg-btn:#fff;--fg-btn:var(--ink);--bd-btn:#fff}
.btn--sm{min-height:44px;padding:.5rem 1.2rem;font-size:.8125rem}
.btn-row{display:flex;flex-wrap:wrap;gap:.85rem 1.1rem;align-items:center}
.link-arrow{display:inline-flex;align-items:center;gap:.5em;font-weight:600;font-size:.875rem;
  letter-spacing:.04em;text-transform:uppercase;color:var(--green)}
.link-arrow svg{width:13px;height:13px;transition:transform .32s var(--ease)}
.link-arrow:hover svg{transform:translateX(4px)}

/* ---------- header ---------- */
body.admin-bar{--admin-h:32px}
@media screen and (max-width:782px){body.admin-bar{--admin-h:46px}}

.site-header{
  position:fixed;inset:auto 0 auto 0;top:calc(var(--admin-h) + var(--bar-top-h));z-index:120;
  background:#fff;
  -webkit-backdrop-filter:saturate(160%) blur(14px);backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid transparent;
  transition:background .3s,border-color .3s,box-shadow .3s;
}
.site-header{border-bottom-color:var(--line)}
.site-header.is-stuck{box-shadow:0 8px 26px -20px rgba(7,57,43,.7)}
.header-inner{display:flex;align-items:center;gap:1.25rem;height:var(--hh);transition:height .3s var(--ease)}
.brand{display:flex;align-items:center;flex:none;margin-right:auto;padding:0}
.brand{position:relative}
/* width:auto keeps the natural aspect ratio; only the height is ever set.
   The size is deliberately fixed in every header state: the sticky header still
   gains its shadow, but the logo must not resize, animate or jump on scroll. */
.brand img{height:var(--logo-h);width:auto;max-width:100%}
.nav{display:none}
.header-cta{display:none}
@media(min-width:1080px){
  /* A little more room on a laptop, so the wordmark reads comfortably without the
     header turning into a tall band. */
  :root{ --hh:94px; --logo-h:75px; }
  .nav{display:block;margin-inline:auto}
  .nav ul{display:flex;align-items:center;gap:clamp(.5rem,1.7vw,1.5rem)}
  .nav a{position:relative;display:block;padding:.5rem .3rem;font-size:.9375rem;font-weight:500;
    color:var(--ink);transition:color .22s;white-space:nowrap}
  .nav a::after{content:"";position:absolute;left:.3rem;right:.3rem;bottom:.14rem;height:2px;
    background:var(--green);border-radius:2px;transform:scaleX(0);transform-origin:left;
    transition:transform .34s var(--ease)}
  .nav a:hover{color:var(--green)}
  .nav a:hover::after,.nav .current-menu-item>a::after,.nav .current_page_item>a::after{transform:scaleX(1)}
  .nav .current-menu-item>a,.nav .current_page_item>a{color:var(--green);font-weight:600}
  .header-cta{display:inline-flex;flex:none}
}
.burger{
  display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  width:48px;height:48px;padding:0 11px;margin-right:-10px;background:none;border:0;cursor:pointer;flex:none;
}
.burger span{display:block;height:2px;width:100%;background:var(--ink);border-radius:2px;
  transition:transform .35s var(--ease),opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(min-width:1080px){.burger{display:none}}

.mobile-panel{
  position:fixed;inset:0;z-index:115;background:#fff;
  padding:calc(var(--hh) + 16px) var(--gutter) 40px;
  display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;
  opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity .3s var(--ease),transform .35s var(--ease),visibility .35s;
}
.mobile-panel.is-open{opacity:1;visibility:visible;transform:none}
.mobile-panel ul{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.mobile-panel li{border-bottom:1px solid var(--line)}
.mobile-panel a{
  display:flex;align-items:center;justify-content:space-between;padding:1.15rem .2rem .95rem;min-height:62px;
  font-family:var(--ff-d);font-weight:700;font-size:1.75rem;line-height:1;color:var(--ink);letter-spacing:-.01em;
}
.mobile-panel a svg{width:14px;height:14px;opacity:.28;color:var(--ink)}
.mobile-panel .current-menu-item>a,.mobile-panel .current_page_item>a{color:var(--green)}
.mobile-panel .current-menu-item>a svg,.mobile-panel .current_page_item>a svg{opacity:1;color:var(--green)}
.mobile-panel .btn{margin-top:1.7rem;width:100%}
.mp-foot{margin-top:auto;padding-top:2.2rem;color:var(--muted);font-size:.875rem}
.mp-foot a{color:var(--body);display:inline-block;padding:.25rem 0}
body.nav-open{overflow:hidden}

/* ---------- asterisk motif ---------- */
.ast{position:absolute;z-index:0;pointer-events:none;opacity:1}
.ast svg{width:100%;height:100%;display:block;fill:currentColor}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden}
.hero-head{position:relative;z-index:2}
.hero h1{margin-top:1.1rem;max-width:16ch}
.hero h1 .l{display:block}
/* ---------- cinematic hero: the showreel, and nothing else ----------
   The showreel is 16:9 at every size it is encoded in (1600x900, 1280x720,
   854x480), so the hero is given that exact ratio. The frame is then shown whole:
   nothing is cropped away, and because the box matches the film there are no
   letterbox bars either. The height simply follows the width, which is why there
   is no viewport-height rule here. Forcing 100vh would crop the film. */
.hero--film{
  --hero-ratio:16 / 9;
  position:relative;overflow:hidden;background:#0A1512;
  margin-top:var(--hh);
  width:100%;
  aspect-ratio:var(--hero-ratio);
  height:auto;
}
.hero-bg{
  position:absolute;inset:0;overflow:hidden;
  background-color:#0A1512;background-size:contain;background-position:center;background-repeat:no-repeat;
}
.hero-video{
  position:absolute;inset:0;width:100%;height:auto;
  /* contain guarantees the whole frame survives even if a replacement showreel is
     uploaded at a different ratio; with a matching film it fills the box exactly. */
  aspect-ratio:var(--hero-ratio);object-fit:contain;object-position:center;
  opacity:0;transition:opacity .9s var(--ease);
}
.hero-video.is-ready{opacity:1}

/* Browsers without aspect-ratio fall back to a padding box of the same 16:9. */
@supports not (aspect-ratio: 16 / 9){
  .hero--film{height:0;padding-bottom:56.25%}
  .hero-video{height:100%}
}

/* ---------- pill links (404 shortcuts) ---------- */
.hero-marks{display:flex;flex-wrap:wrap;gap:.5rem}
.tag{
  display:inline-flex;align-items:center;padding:.44rem .95rem;border-radius:var(--pill);
  border:1px solid var(--line-2);background:#fff;
  font-size:.8125rem;font-weight:600;color:var(--ink);
  transition:background .25s,border-color .25s,color .25s;
}
a.tag:hover{background:var(--green);border-color:var(--green);color:#fff}

/* ---------- section that follows a page hero ---------- */
.section--after-hero{padding-top:var(--intro-gap-above)}
/* Home page: the first section after the showreel. */
.hero--film+.section{padding-top:var(--reel-gap)}
.sect-head--tight{margin-bottom:clamp(24px,3vw,40px);max-width:38ch}

/* ---------- expertise ---------- */
.exp-grid{display:grid;gap:clamp(20px,2.4vw,28px)}
@media(min-width:760px){.exp-grid{grid-template-columns:repeat(2,1fr)}}
.exp-card{position:relative;display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .3s}
.exp-card:hover{transform:translateY(-6px);box-shadow:var(--sh);border-color:var(--mint-d)}
.exp-media{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--bg-2)}
.exp-media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.exp-card:hover .exp-media img{transform:scale(1.055)}
.exp-num{position:absolute;top:14px;left:14px;z-index:2;min-width:42px;height:34px;padding:0 .6rem;
  border-radius:var(--pill);display:grid;place-items:center;background:rgba(255,255,255,.94);color:var(--green);
  font-family:var(--ff-b);font-weight:700;font-size:.75rem;letter-spacing:.1em}
.exp-body{padding:clamp(22px,2.4vw,32px);display:flex;flex-direction:column;flex:1}
.exp-body h3{margin-bottom:.85rem}
.exp-body p{font-size:1rem;line-height:1.68}
.exp-body .link-arrow{margin-top:1.4rem;align-self:flex-start}

/* ---------- stats (light band, as in the template) ---------- */
.stats{background:var(--bg-2);position:relative;overflow:hidden}
.stats .ast{left:-4%;bottom:-38%;width:clamp(150px,19vw,290px);height:clamp(150px,19vw,290px);
  color:#fff;opacity:.9}
.stats .container{position:relative;z-index:1}
.stats-grid{display:grid;gap:clamp(30px,4vw,20px);grid-template-columns:repeat(2,1fr);text-align:center}
@media(min-width:880px){.stats-grid{grid-template-columns:repeat(4,1fr)}}
.stat{position:relative;padding:0 .4rem}
@media(min-width:880px){.stat+.stat::before{content:"";position:absolute;left:0;top:10%;bottom:22%;width:1px;background:var(--line-2)}}
.stat b{display:block;font-family:var(--ff-d);font-weight:800;color:var(--ink);
  font-size:clamp(3.4rem,7.4vw,5.4rem);line-height:.82;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.stat span{display:block;margin-top:.7rem;font-size:.75rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}

/* ---------- testimonials ---------- */
.tst-grid{display:grid;gap:clamp(18px,2.2vw,24px)}
@media(min-width:860px){.tst-grid{grid-template-columns:repeat(3,1fr)}}
.tst{display:flex;flex-direction:column;height:100%;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);padding:clamp(24px,2.6vw,32px);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .3s}
.tst:hover{transform:translateY(-5px);box-shadow:var(--sh);border-color:var(--mint-d)}

/* The person leads the card. The portraits are supplied as squares, so they are
   shown as squares: the whole frame is visible, nothing is masked off and no face
   is cropped. They stay this size on phones, where the card is widest. */
.tst-by{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:1.5rem}
.tst-photo{
  display:block;width:clamp(150px,52%,200px);aspect-ratio:1;
  border-radius:var(--r);overflow:hidden;background:var(--bg-2);
}
.tst-photo img{width:100%;height:100%;object-fit:cover;display:block}
.tst-by strong{
  display:block;margin-top:1.15rem;font-family:var(--ff-d);font-weight:700;
  font-size:clamp(1.6rem,2.2vw,1.95rem);line-height:1;color:var(--ink);
}
.tst-role{
  display:block;margin-top:.5rem;font-family:var(--ff-b);font-size:.75rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--green);
}
.tst blockquote{font-size:1rem;line-height:1.72;color:var(--body);flex:1;text-align:center}
/* Decoration only, so it sits quietly under the words rather than above them. */
.tst-q{width:30px;height:23px;fill:var(--mint-d);margin:1.4rem auto 0;flex:none;display:block}

/* ---------- brand logo band (static grid, as in the template) ---------- */
.brand-band{background:var(--bg-2);position:relative;overflow:hidden}
.brand-grid{
  display:flex;flex-wrap:wrap;justify-content:center;
  border-top:1px solid var(--line-2);border-left:1px solid var(--line-2);
  max-width:1160px;margin-inline:auto;
}
.brand-cell{
  display:grid;place-items:center;position:relative;
  flex:0 0 50%;max-width:50%;aspect-ratio:16/9;
  padding:clamp(14px,2vw,26px);background:#fff;
  border-right:1px solid var(--line-2);border-bottom:1px solid var(--line-2);
}
@media(min-width:560px){.brand-cell{flex-basis:33.3333%;max-width:33.3333%}}
@media(min-width:900px){.brand-cell{flex-basis:20%;max-width:20%}}
.brand-cell img{
  max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain;
  filter:grayscale(1) contrast(1.05);opacity:.72;
  transition:filter .4s var(--ease),opacity .4s var(--ease);
}
.brand-cell:hover img,.brand-cell:focus-visible img{filter:none;opacity:1}
.brand-name{
  font-family:var(--ff-d);font-weight:700;color:var(--muted);text-align:center;
  font-size:clamp(1.15rem,2vw,1.5rem);line-height:1.02;letter-spacing:-.01em;
  padding:0 .4rem;transition:color .3s;
}
.brand-cell:hover .brand-name{color:var(--green)}

/* ---------- poster grid ---------- */
/* The row gap has to be clearly larger than the space between an image and its own
   caption, otherwise a caption sits almost equidistant between two rows and reads as
   though it belongs to the image below it. That is what made the client order look
   wrong on phones even though the sequence itself was right. */
.pgrid{display:grid;gap:clamp(40px,4.2vw,62px) clamp(16px,2vw,28px);grid-template-columns:repeat(2,1fr)}
@media(min-width:660px){.pgrid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1100px){.pgrid{grid-template-columns:repeat(4,1fr)}}
.pgrid--3{grid-template-columns:1fr}
@media(min-width:660px){.pgrid--3{grid-template-columns:repeat(3,1fr)}}
.pcard{
  position:relative;display:flex;flex-direction:column;width:100%;padding:0;border:0;background:none;
  cursor:pointer;text-align:left;
}
.pcard-media{
  position:relative;display:block;border-radius:var(--r);overflow:hidden;background:var(--bg-2);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.pcard:hover .pcard-media{transform:translateY(-5px);box-shadow:var(--sh)}
.pcard figure{aspect-ratio:4/5;overflow:hidden}
.pcard img{width:100%;height:100%;object-fit:cover;transition:transform .85s var(--ease)}
.pcard:hover img{transform:scale(1.05)}
.pcard-zoom{
  position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:50%;
  background:rgba(255,255,255,.92);display:grid;place-items:center;opacity:0;
  transition:opacity .3s,background .3s,transform .3s var(--ease);
}
.pcard-zoom svg{width:13px;height:13px;stroke:var(--ink);fill:none;stroke-width:2;stroke-linecap:round}
.pcard:hover .pcard-zoom,.pcard:focus-visible .pcard-zoom{opacity:1}
.pcard:hover .pcard-zoom{background:var(--green)}
.pcard:hover .pcard-zoom svg{stroke:#fff}
.pcard-cap{display:block;padding:.75rem .1rem 0}

/* ---------- one portfolio title system ----------
   Ad Films set the reference ("P. N. Gadgil & Sons"), and Theatre, Events and
   Social Media use the very same rule rather than a lookalike of their own, so
   the two can never drift apart again. Horizontal padding still differs by
   context: an Ad Films title sits inside a bordered card, the others sit under a
   full-bleed image and must stay flush with its edge. */
.pcard-cap strong,
.vbody strong{
  display:block;font-family:var(--ff-d);font-weight:700;
  /* Scales with the viewport instead of stepping at one breakpoint: 22px on the
     narrowest phone up to 30px on a large desktop. The line-height leaves room for
     the long client names that wrap to two lines without letting them collide. */
  font-size:clamp(1.375rem,.85vw + 1.05rem,1.875rem);
  line-height:1.06;
  letter-spacing:normal;color:var(--ink);
}
.pcard-cap small,
.vbody span{
  display:block;margin-top:.45rem;font-family:var(--ff-b);font-size:.75rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
}

/* ---------- ad films ---------- */
.vgrid{display:grid;gap:clamp(18px,2.2vw,28px)}
@media(min-width:700px){.vgrid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1120px){.vgrid{grid-template-columns:repeat(3,1fr)}}
.vcard{display:block;width:100%;padding:0;border:1px solid var(--line);background:#fff;
  border-radius:var(--r-lg);overflow:hidden;cursor:pointer;text-align:left;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .3s}
.vcard:hover{transform:translateY(-5px);box-shadow:var(--sh);border-color:var(--mint-d)}
.vthumb{position:relative;display:block;aspect-ratio:16/9;background:#0b1a15;overflow:hidden}
.vthumb img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.vcard:hover .vthumb img{transform:scale(1.05)}
.vplay{position:absolute;inset:0;margin:auto;width:58px;height:58px;border-radius:50%;
  background:rgba(255,255,255,.94);display:grid;place-items:center;
  transition:transform .35s var(--ease),background .3s}
.vplay svg{width:17px;height:17px;fill:var(--green);margin-left:3px}
.vcard:hover .vplay{transform:scale(1.1);background:var(--green)}
.vcard:hover .vplay svg{fill:#fff}
.vbody{display:block;padding:1.15rem 1.25rem 1.3rem}
.vframe{width:100%;aspect-ratio:16/9;border:0;display:block}

/* ---------- lightbox ---------- */
.lb{position:fixed;inset:0;z-index:200;display:none;background:rgba(8,22,18,.95);padding:clamp(16px,4vw,52px)}
.lb.is-open{display:grid;place-items:center;animation:fade .25s var(--ease)}
@keyframes fade{from{opacity:0}to{opacity:1}}
.lb-stage{position:relative;max-width:min(1120px,100%);display:grid;place-items:center}
.lb-stage img{max-height:80vh;width:auto;border-radius:var(--r);box-shadow:var(--sh-lg)}
.lb-stage video{max-height:80vh;max-width:100%;width:auto;border-radius:var(--r);background:#000}
.lb-cap{margin-top:1.1rem;text-align:center;color:rgba(255,255,255,.86);font-size:.9375rem}
.lb-btn{position:fixed;z-index:2;width:48px;height:48px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.15);display:grid;place-items:center;transition:background .25s,transform .25s}
.lb-btn:hover{background:rgba(255,255,255,.32)}
.lb-btn[hidden]{display:none}
.lb-btn svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lb-close{top:clamp(12px,2vw,24px);right:clamp(12px,2vw,24px)}
.lb-prev{left:clamp(8px,2vw,22px);top:50%;transform:translateY(-50%)}
.lb-next{right:clamp(8px,2vw,22px);top:50%;transform:translateY(-50%)}
.lb-prev:hover,.lb-next:hover{transform:translateY(-50%) scale(1.07)}
@media(max-width:600px){
  .lb-prev,.lb-next{top:auto;bottom:18px;transform:none}
  .lb-prev{left:calc(50% - 62px)}.lb-next{right:calc(50% - 62px)}
  .lb-prev:hover,.lb-next:hover{transform:scale(1.07)}
  .lb-stage img,.lb-stage video{max-height:68vh}
}

/* ---------- interior page hero ---------- */
.phero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);
  padding-top:calc(var(--hh) + clamp(34px,4.6vw,62px));padding-bottom:var(--intro-gap-below);
  background:radial-gradient(120% 140% at 86% -20%,var(--mint-2),#fff 60%)}
.phero .container{position:relative;z-index:1}
.phero .eyebrow{margin-bottom:.9rem}

/* One text system for the introduction on every interior page. Both lines of the
   Theatre, Events, Social Media and Ad Films intros use this, so they read as one
   paragraph block rather than a lead followed by something smaller. */
.phero-intro{
  max-width:66ch;
  font-family:var(--ff-b);
  font-size:clamp(1.0625rem,.35vw + 1rem,1.1875rem);
  font-weight:400;
  line-height:1.68;
  letter-spacing:normal;
  color:var(--body);
}
.phero-intro{margin-top:var(--head-to-intro)}
.phero .ast{top:calc(var(--hh) + 4px);right:-6%;width:clamp(140px,20vw,300px);height:clamp(140px,20vw,300px);
  color:var(--mint-d);opacity:.55}
@media(min-width:1000px){.phero .ast{right:0}}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;font-size:.8125rem;color:var(--muted);margin-bottom:1.2rem}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--green)}
.crumbs .sep{opacity:.5}
.crumbs [aria-current]{color:var(--ink);font-weight:500}

/* ---------- cta band ---------- */
.cta-wrap{padding-block:var(--sect-sm)}
.cta{position:relative;overflow:hidden;background:var(--ink);color:#fff;border-radius:var(--r-xl);
  padding:clamp(38px,5.5vw,76px) clamp(24px,4vw,64px)}
.cta .ast{left:-8%;top:-34%;width:clamp(170px,23vw,330px);height:clamp(170px,23vw,330px);
  color:var(--green);opacity:.75}
.cta .ast--r{left:auto;right:-6%;top:auto;bottom:-38%;color:rgba(255,255,255,.06);opacity:1}
.cta-inner{position:relative;z-index:2;display:grid;gap:2rem;align-items:center}
@media(min-width:920px){.cta-inner{grid-template-columns:1.2fr auto;gap:3rem}}
.cta h2{color:#fff;margin-top:.85rem}
.cta p{color:rgba(255,255,255,.7);margin-top:1.1rem;max-width:52ch}

/* ---------- about ---------- */
.about-grid{display:grid;gap:clamp(28px,4vw,58px);align-items:start}
@media(min-width:960px){.about-grid{grid-template-columns:.85fr 1.15fr}}
.about-grid p+p{margin-top:1.1rem}
.figure-wide{border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh);background:var(--bg-2)}
.figure-wide--lead{margin-bottom:clamp(34px,4.4vw,64px)}
.figure-wide img{width:100%;height:auto}
.figure-wide figcaption{padding:1rem 1.25rem;font-size:.8125rem;color:var(--muted);background:#fff;text-align:center}
/* A grid item defaults to min-width:auto, so a track can never shrink below its
   content's min-content width. The venture logos are wide artwork, which pushed
   each 1fr track past its share and forced the whole grid outside the container.
   min-width:0 lets the tracks do their job, and auto-fit then decides the column
   count from the space actually available rather than from a fixed number. */
.logo-wall{display:grid;gap:clamp(12px,1.8vw,20px);grid-template-columns:1fr}
/* Four ventures, so the column count is chosen deliberately: 1, then 2, then 4.
   auto-fit would leave an orphan card on its own row at tablet widths. */
@media(min-width:430px){.logo-wall{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.logo-wall{grid-template-columns:repeat(4,1fr)}}
.logo-cell{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;
  min-width:0;
  aspect-ratio:3/2;padding:clamp(18px,2.4vw,30px);
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  transition:border-color .3s,transform .4s var(--ease),box-shadow .4s var(--ease)}
.logo-cell:hover{border-color:var(--mint-d);transform:translateY(-3px);box-shadow:var(--sh-sm)}
.logo-cell img{max-height:74%;max-width:92%;width:auto;height:auto;object-fit:contain}
.logo-cell span{font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:center}
.kv{display:grid;gap:clamp(12px,1.6vw,18px);grid-template-columns:repeat(2,1fr);margin-top:2.3rem}
@media(min-width:760px){.kv{grid-template-columns:repeat(4,1fr)}}
.kv div{padding:1.15rem 1.15rem 1.25rem;border:1px solid var(--line);border-radius:var(--r);background:#fff}
.kv b{display:block;font-family:var(--ff-d);font-weight:800;font-size:2.1rem;color:var(--green);line-height:.85}
.kv span{display:block;margin-top:.5rem;font-size:.75rem;color:var(--muted);font-weight:700;letter-spacing:.1em;text-transform:uppercase}

/* ---------- contact ---------- */
.contact-grid{display:grid;gap:clamp(28px,4vw,52px);align-items:start}
@media(min-width:980px){.contact-grid{grid-template-columns:1.15fr .85fr}}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(24px,3vw,40px);box-shadow:var(--sh-sm)}
.form-grid{display:grid;gap:1.05rem}
@media(min-width:620px){.form-grid{grid-template-columns:1fr 1fr}.form-grid .full{grid-column:1/-1}}
.field{position:relative}
.field label{display:block;font-size:.75rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink);margin-bottom:.5rem}
.field .req{color:var(--green)}
.field input,.field select,.field textarea{
  width:100%;font-family:var(--ff-b);font-size:1rem;color:var(--ink);
  padding:.8rem 1rem;min-height:52px;border:1.5px solid var(--line-2);border-radius:var(--r-sm);
  background:#fff;transition:border-color .22s,box-shadow .22s}
.field textarea{min-height:150px;resize:vertical;line-height:1.6}
.field select{appearance:none;-webkit-appearance:none;padding-right:2.6rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234C5854' stroke-width='1.7' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;background-size:12px}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--green);
  box-shadow:0 0 0 3px rgba(13,85,65,.13)}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"],.field select[aria-invalid="true"]{border-color:#C0392B}
.field .err{display:block;margin-top:.4rem;font-size:.8125rem;color:#B3261E;font-weight:500}
.hp-wrap{position:absolute;left:-9999px;top:0;width:1px;height:1px;overflow:hidden}
.form-note{margin-top:1rem;font-size:.8125rem;color:var(--muted)}
.form-msg{margin-bottom:1.35rem;padding:1rem 1.15rem;border-radius:var(--r-sm);font-size:.9375rem}
.form-msg--ok{background:var(--mint);color:var(--green-d);border:1px solid var(--mint-d)}
.form-msg--err{background:#FDECEA;color:#96281B;border:1px solid #F5C6C0}
.btn[aria-busy="true"]{opacity:.65;pointer-events:none}
.info-list{display:flex;flex-direction:column}
.info-item{display:flex;gap:1rem;align-items:flex-start;padding:1.05rem 0;border-bottom:1px solid var(--line)}
.info-item:first-child{padding-top:0}
.info-item:last-child{border-bottom:0}
.info-ico{width:42px;height:42px;flex:none;border-radius:50%;background:var(--mint);display:grid;place-items:center}
.info-ico svg{width:18px;height:18px;stroke:var(--green);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.info-item h4{margin-bottom:.3rem;font-family:var(--ff-b);font-size:.75rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);line-height:1.3}
.info-item a,.info-item p{font-size:1.02rem;color:var(--ink);font-weight:500;line-height:1.5}
.info-item a:hover{color:var(--green)}
.socials{display:flex;gap:.6rem;flex-wrap:wrap}
.socials a{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line-2);transition:background .25s,border-color .25s,transform .3s var(--ease)}
.socials a:hover{background:var(--green);border-color:var(--green);transform:translateY(-2px)}
.socials svg{width:18px;height:18px;fill:var(--ink);transition:fill .25s}
.socials a:hover svg{fill:#fff}

/* ---------- footer (light, as in the template) ---------- */
.site-footer{position:relative;overflow:hidden;background:var(--bg-2);color:var(--body);
  padding-top:clamp(52px,6vw,84px)}
.site-footer .ast{right:-6%;top:4%;width:clamp(180px,24vw,360px);height:clamp(180px,24vw,360px);
  color:#fff;opacity:.75}
.site-footer .container{position:relative;z-index:1}
.site-footer h4{color:var(--ink);font-family:var(--ff-b);font-size:.75rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;margin-bottom:1.15rem}
.foot-grid{display:grid;gap:clamp(30px,4vw,44px);align-items:start}
@media(min-width:720px){.foot-grid{grid-template-columns:repeat(2,1fr)}}
/* The last column carries the address, the call to action and the social icons, so
   it is given a little more room and the brand column a little less. That keeps the
   four columns close to the same height instead of leaving a gap on the right. */
@media(min-width:1000px){.foot-grid{grid-template-columns:1.55fr .9fr .9fr 1fr}}
.foot-brand img{height:70px;width:auto}
.foot-brand p{margin-top:1.25rem;max-width:38ch;font-size:.9375rem;line-height:1.7}
.site-footer a{color:var(--body);font-size:.9375rem;transition:color .22s}
.site-footer a:hover{color:var(--green)}
.foot-list li{position:relative;padding-left:1rem}
.foot-list li+li{margin-top:.62rem}
.foot-list li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;
  background:var(--green);opacity:.55}
.foot-list li.no-dot{padding-left:0}
.foot-list li.no-dot::before{display:none}
/* Sits directly under "Start a project", far enough to read as its own row but
   close enough to still belong to that call to action. */
.foot-start{margin-top:1.15rem}
.site-footer .socials{margin-top:1.5rem}
.foot-bottom{margin-top:clamp(36px,5vw,56px);padding:1.4rem 0;border-top:1px solid var(--line-2);
  display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;align-items:center;justify-content:space-between}
.foot-bottom,.foot-bottom a{font-size:.8125rem;color:var(--muted)}
.foot-bottom a:hover{color:var(--green)}
.foot-bottom ul{display:flex;flex-wrap:wrap;gap:.35rem 1.25rem}

/* ---------- misc ---------- */
.skip-link{position:absolute;left:-9999px;top:0;z-index:300;background:var(--green);color:#fff;
  padding:.85rem 1.4rem;border-radius:0 0 var(--r-sm) 0;font-weight:600}
.skip-link:focus{left:0}
.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
.entry-content{max-width:760px}
.entry-content>*+*{margin-top:1.15rem}
.entry-content h2,.entry-content h3{margin-top:2.4rem;margin-bottom:-.35rem}
.entry-content ul,.entry-content ol{padding-left:1.35rem}
.entry-content li{list-style:disc;margin-top:.5rem}
.entry-content ol li{list-style:decimal}
.entry-content a{text-decoration:underline;text-underline-offset:3px}
.nf{text-align:center}
.nf .code{font-family:var(--ff-d);font-weight:800;font-size:clamp(8rem,26vw,18rem);
  line-height:.75;color:var(--mint-d);letter-spacing:-.04em}
.nf .btn-row{justify-content:center;margin-top:2rem}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* ==========================================================================
   Mobile pass: one gutter, one rhythm, one alignment for every section
   ========================================================================== */
@media(max-width:767px){
  :root{ --gutter:20px; --sect:64px; --sect-sm:52px; }

  /* Type: keep the display face confident but stop it dominating a small screen. */
  h1,.h1{font-size:clamp(2.9rem,13vw,4.1rem);line-height:.86;letter-spacing:-.018em}
  h2,.h2{font-size:clamp(2.15rem,9.2vw,2.9rem);line-height:.88}
  h3,.h3{font-size:1.6rem}
  body{font-size:1rem;line-height:1.66}
  .lead{font-size:1.0625rem;line-height:1.62}

  /* Every block starts on the same left edge, including the ones that were centred. */
  .sect-head{margin-bottom:30px}
  .sect-head--center{text-align:left;margin-inline:0}
  .sect-head--center .lead{margin-inline:0}
  .sect-head--split{gap:1rem}
  .sect-head p{margin-top:.85rem;max-width:100%}

  .figure-wide--lead{margin-bottom:26px}

  .exp-body{padding:20px}
  .exp-body h3{margin-bottom:.6rem}
  .exp-body p{font-size:.9688rem}
  .exp-body .link-arrow{margin-top:1.1rem}

  .stats-grid{gap:26px 18px;text-align:left}
  .stat{padding:0}
  .stat b{font-size:clamp(2.9rem,15vw,4rem)}
  .stat span{margin-top:.4rem;font-size:.6875rem;letter-spacing:.12em}

  .tst{padding:22px 20px}
  .tst blockquote{font-size:.9688rem;line-height:1.68}
  .tst-by{margin-bottom:1.3rem}
  /* The portrait must stay unmistakable on a phone, so it is given a floor rather
     than being allowed to shrink with the card. */
  .tst-photo{width:clamp(168px,54%,210px)}

  .brand-cell{padding:16px}
  .brand-name{font-size:1.05rem}

  .pgrid{gap:38px 12px}
  .pcard-cap{padding-top:.65rem}
  .pcard-zoom{width:28px;height:28px;opacity:1;background:rgba(255,255,255,.9)}

  .vbody{padding:16px 18px 18px}

  .cta{padding:32px 22px 34px;border-radius:var(--r-lg)}
  .cta .btn{width:100%;justify-content:center}
  .cta-inner{gap:1.6rem}
  .cta p{margin-top:.85rem}

  .phero-intro{max-width:100%}
  .crumbs{margin-bottom:1rem}

  .about-grid{gap:22px}
  .about-name{margin-top:.7rem}
  .kv{gap:10px;margin-top:1.9rem}
  .kv div{padding:.9rem .95rem 1rem}
  .kv b{font-size:1.7rem}
  .kv span{font-size:.6875rem;letter-spacing:.08em}
  .logo-wall{gap:10px}
  .logo-cell{padding:16px;gap:.7rem}
  .logo-cell span{font-size:.6875rem;letter-spacing:.07em}
  .figure-wide{margin-top:26px;border-radius:var(--r-lg)}

  .card{padding:22px 20px;border-radius:var(--r-lg)}
  .info-item{padding:.95rem 0;gap:.85rem}
  .info-ico{width:38px;height:38px}

  .foot-grid{gap:28px}
  .foot-brand img{height:60px}
  .foot-brand p{margin-top:1rem;max-width:100%}
  .site-footer h4{margin-bottom:.85rem}
  .foot-bottom{margin-top:30px;padding:1.15rem 0;gap:.35rem}

  .mobile-panel a{font-size:1.55rem;min-height:58px;padding:1rem .1rem .85rem}
}

@media(max-width:400px){
  h1,.h1{font-size:2.7rem}
  h2,.h2{font-size:2rem}
  .btn{padding:.72rem 1.25rem;font-size:.84375rem}
  .exp-body,.card{padding:18px}
  .cta{padding:28px 18px 30px}
  .pgrid{gap:34px 10px}
  .kv{grid-template-columns:repeat(2,1fr)}
}

/* Tablet: two columns everywhere, and headings that do not run too wide. */
@media(min-width:768px) and (max-width:1023px){
  .sect-head{max-width:32ch}
  .pgrid{grid-template-columns:repeat(3,1fr)}
  /* The ventures wall sizes itself with auto-fit; forcing four columns here was
     what pushed it 193px outside the viewport on a tablet. */
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:34px 24px}
}

/* ---------- poster caption block ---------- */
.pcard-txt{display:flex;flex-direction:column;gap:.2rem;min-width:0}
.pcard-txt small{font-size:.6875rem;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.72);font-family:var(--ff-b);font-weight:600}
.about-name{margin-top:.85rem}

/* ---------- lightbox note ---------- */
.lb-note{margin:.55rem auto 0;max-width:60ch;text-align:center;color:rgba(255,255,255,.66);font-size:.875rem;line-height:1.6}

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