/* =============================================================
   GOVERNOR AGBU KEFAS 2027  |  unified site stylesheet
   -------------------------------------------------------------
   TO CHANGE THE SITE'S HEADING FONT:
   edit the ONE line marked  >>> PICK A FONT <<<  below,
   and the tracking line directly under it. Nothing else.
   Body text stays Manrope in every case, for readability.
   ============================================================= */

/* ---- The library. All seven are declared, but a browser only downloads
        the one actually used, so unused faces cost nothing. ---- */

@font-face{ font-family:'Kostel';   src:url('fonts/Kostel.woff2') format('woff2');   font-weight:400 900; font-style:normal; font-display:swap; }
@font-face{ font-family:'Beanzo';   src:url('fonts/Beanzo.woff2') format('woff2');   font-weight:400 900; font-style:normal; font-display:swap; }
@font-face{ font-family:'Biscora';  src:url('fonts/Biscora.woff2') format('woff2');  font-weight:400 900; font-style:normal; font-display:swap; }
@font-face{ font-family:'Grubster'; src:url('fonts/Grubster.woff2') format('woff2'); font-weight:400 900; font-style:normal; font-display:swap; }
@font-face{ font-family:'Salfond';  src:url('fonts/Salfond.woff2') format('woff2');  font-weight:400 900; font-style:normal; font-display:swap; }
@font-face{ font-family:'ResMinevia'; src:url('fonts/ResMinevia.woff2') format('woff2'); font-weight:400 900; font-style:normal; font-display:swap; }

/* Clash Display, Indian Type Foundry via Fontshare.
   Free for personal and commercial use, any media, any scale, worldwide.
   Self-hosted from fonts/ beside this file.

   Two sources are listed. The Variable file is one 29KB download covering
   every weight from 200 to 700, so prose at 500 and headings at 700 both
   render correctly. If it is missing the browser falls back to the Bold
   file, which works but renders everything at 700. Upload the Variable one. */
@font-face{
  font-family:'Clash Display';
  src:url('fonts/ClashDisplay-Variable.woff2') format('woff2'),
      url('fonts/ClashDisplay-Bold.woff2') format('woff2');
  font-weight:200 700; font-style:normal; font-display:swap;
}

/* The naira sign is in neither Clash Display nor Manrope, so a bare
   &#8358; falls through to whatever the device has, and on some phones
   renders as an empty box. These two files are Inter subset down to that
   single character, under 1KB each. Listing them first in the stacks below
   means they serve only U+20A6 and nothing else. */
@font-face{
  font-family:'Naira'; src:url('fonts/naira-400.woff2') format('woff2');
  unicode-range:U+20A6; font-weight:400; font-display:swap;
}
@font-face{
  font-family:'Naira'; src:url('fonts/naira-700.woff2') format('woff2');
  unicode-range:U+20A6; font-weight:700; font-display:swap;
}

/* Doblegh is a real family with seven weights, so each one is registered
   separately and the browser picks the right weight on its own. */
@font-face{ font-family:'Doblegh'; src:url('fonts/Doblegh-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'Doblegh'; src:url('fonts/Doblegh-500.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:'Doblegh'; src:url('fonts/Doblegh-600.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face{ font-family:'Doblegh'; src:url('fonts/Doblegh-700.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face{ font-family:'Doblegh'; src:url('fonts/Doblegh-800.woff2') format('woff2'); font-weight:800; font-style:normal; font-display:swap; }
@font-face{ font-family:'Doblegh'; src:url('fonts/Doblegh-900.woff2') format('woff2'); font-weight:900; font-style:normal; font-display:swap; }

:root{
  /* Each option, with the heading tracking that suits it. */
  --font-kostel:'Kostel','Manrope',Georgia,serif;          --track-kostel:.02em;
  --font-beanzo:'Beanzo','Manrope',Georgia,serif;          --track-beanzo:.005em;
  --font-biscora:'Biscora','Manrope',Georgia,serif;        --track-biscora:.03em;
  --font-grubster:'Grubster','Manrope',Georgia,serif;      --track-grubster:.025em;
  --font-salfond:'Salfond','Manrope',Georgia,serif;        --track-salfond:.01em;
  --font-doblegh:'Doblegh','Manrope',Georgia,serif;        --track-doblegh:-.015em;
  --font-minevia:'ResMinevia','Manrope',Georgia,serif;     --track-minevia:.01em;
  --font-manrope:'Manrope',system-ui,sans-serif;           --track-manrope:-.015em;
  --font-clash:'Naira','Clash Display','Manrope',Georgia,sans-serif; --track-clash:-.005em;

  /* >>> PICK A FONT <<<  swap the word after "--font-" on both lines.
     Options: clash  kostel  beanzo  biscora  grubster  salfond  doblegh  minevia  manrope
     NOTE: only clash and manrope are licensed for use on a website. */
  --kf-display:var(--font-clash);
  --kf-display-track:var(--track-clash);

  /* Body text. Leave this alone unless you want a different reading font. */
  --text:'Naira','Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --navy:#0b1526;
  --navy-2:#042e47;
  --navy-3:#0a3c66;
  --red:#d10000;
  --red-hi:#ff3b30;         /* red for small text on navy (contrast) */
  --red-deep:#a30000;
  --mist:#e2f5f9;
  --mist-dim:rgba(226,245,249,.72);
  --paper:#ffffff;
  --paper-2:#f3f7fa;
  --ink:#1b2330;
  --ink-soft:#4a5561;
  --line-d:rgba(226,245,249,.16);
  --line-l:rgba(4,46,71,.13);

  --r-sm:10px; --r-md:16px; --r-lg:24px; --r-pill:999px;
  --sh-md:0 8px 22px rgba(4,22,44,.10), 0 2px 6px rgba(4,22,44,.06);
  --sh-lg:0 24px 60px rgba(4,22,44,.18), 0 6px 16px rgba(4,22,44,.08);
  --sh-red:0 12px 30px rgba(209,0,0,.32);
  --ease:cubic-bezier(.16,1,.3,1);
  --mw:1200px;
  --gutter:clamp(22px,5vw,72px);
}

*,*::before,*::after{ margin:0; padding:0; box-sizing:border-box; }
/* Several of these faces ship a single weight and no italic: never let the
   browser fake either, and let each one set its own heading tracking. */
.h2,.hero-name,.nav-brand span,.office-title,.facts .k,.stat .n,.row .t,
.ag h3,.signup-form h3,.footer-col h3,.hero-about h1,.hero-about .eyebrow,
.quote blockquote,.legal h2,.legal h3,.tl-body h3,.footer-portrait text{
  font-synthesis:none;
}
html{ scroll-behavior:smooth; scroll-padding-top:84px; }
body{
  font-family:var(--text);
  color:var(--ink);
  background:var(--paper);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,video{ display:block; max-width:100%; }
a{ color:inherit; }
:focus-visible{ outline:2px solid var(--red-hi); outline-offset:3px; border-radius:4px; }
.wrap{ max-width:var(--mw); margin:0 auto; padding:0 var(--gutter); }
.skip{ position:absolute; left:-999px; top:8px; z-index:100; background:#fff; color:var(--navy); padding:.6rem 1rem; border-radius:var(--r-sm); font-weight:700; }
.skip:focus{ left:8px; }

/* =========================== NAV (shared) =========================== */
.site-nav{
  position:fixed; inset:0 0 auto 0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem var(--gutter);
  transition:background .35s var(--ease), padding .35s var(--ease), box-shadow .35s var(--ease);
}
.site-nav.is-solid{
  background:rgba(11,21,38,.88);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  padding-top:.75rem; padding-bottom:.75rem;
  box-shadow:0 1px 0 var(--line-d);
}
.nav-brand{ display:flex; align-items:center; gap:.7rem; text-decoration:none; color:#fff; opacity:0; transform:translateY(-4px); transition:opacity .35s var(--ease), transform .35s var(--ease); }
.site-nav.is-solid .nav-brand,
.about-page .nav-brand{ opacity:1; transform:none; }
.nav-brand img{ width:36px; height:36px; border-radius:9px; box-shadow:0 2px 10px rgba(0,0,0,.35); }
.nav-brand span{ font-family:var(--kf-display); font-weight:800; font-size:1.12rem; letter-spacing:var(--kf-display-track); text-shadow:0 2px 12px rgba(0,0,0,.45); }
.nav-links{ display:flex; gap:clamp(1.1rem,2.2vw,2.2rem); }
.nav-links a{
  text-decoration:none; color:var(--red-hi);
  font-size:.8rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  padding:.35rem 0; border-bottom:2px solid currentColor;
  transition:color .25s var(--ease);
}
.nav-links a:hover, .nav-links a:focus-visible{ color:#fff; }
.nav-links a[aria-current="page"]{ color:#fff; }
.nav-toggle{ display:none; background:none; border:1px solid var(--line-d); color:#fff; width:44px; height:44px; border-radius:var(--r-sm); cursor:pointer; }
.nav-toggle svg{ width:22px; height:22px; margin:auto; }

@media (max-width:720px){
  .nav-toggle{ display:grid; place-items:center; }
  .nav-links{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0; padding:.5rem var(--gutter) 1.2rem;
    background:rgba(11,21,38,.97);
    clip-path:inset(0 0 100% 0); visibility:hidden;
    transition:clip-path .35s var(--ease), visibility .35s;
  }
  .site-nav.is-open .nav-links{ clip-path:inset(0 0 0 0); visibility:visible; }
  .site-nav.is-open{ background:rgba(11,21,38,.97); }
  .nav-links a{ border-bottom:1px solid var(--line-d); padding:1rem 0; font-size:.9rem; }
  .nav-brand{ opacity:1; transform:none; position:absolute; left:50%; top:50%; translate:-50% -50%; }
  .site-nav{ justify-content:flex-end; min-height:76px; }
  .nav-brand span{ font-size:1.22rem; white-space:nowrap; }
}
@media (max-width:380px){ .nav-brand span{ font-size:1.05rem; } .nav-brand img{ width:32px; height:32px; } }

/* =========================== BUTTONS (shared) =========================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  min-height:52px; padding:0 2.1rem; border-radius:var(--r-pill);
  font-family:var(--text); font-size:.86rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  text-decoration:none; white-space:nowrap; cursor:pointer; border:1px solid transparent;
  transition:transform .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.btn-red{ background:var(--red); color:#fff; box-shadow:var(--sh-red); }
.btn-red:hover{ background:var(--red-deep); transform:translateY(-2px); box-shadow:0 18px 38px rgba(209,0,0,.38); }
.btn-ghost{ color:#fff; border-color:rgba(226,245,249,.4); }
.btn-ghost:hover{ border-color:#fff; background:rgba(255,255,255,.06); }
.btn-navy{ background:var(--navy-2); color:var(--mist); }
.btn-navy:hover{ background:var(--navy); transform:translateY(-2px); box-shadow:var(--sh-md); }

/* =========================== HOME HERO =========================== */
.hero-home{
  position:relative; height:100vh; height:100svh; min-height:660px;
  background:var(--navy) url('background.jpg') center/cover no-repeat;
  overflow:hidden; isolation:isolate;
}
.hero-home::before{ /* left-side depth so type always reads */
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to right, rgba(11,21,38,.92) 0%, rgba(11,21,38,.72) 38%, rgba(11,21,38,.25) 62%, rgba(11,21,38,0) 80%);
}
.fabric-video{
  position:absolute; top:30%; right:40%;
  width:var(--video-w,32vw); aspect-ratio:16/9; object-fit:cover;
  z-index:2; pointer-events:none; opacity:.6; mix-blend-mode:screen;
  -webkit-mask-image:radial-gradient(ellipse at center, #000 35%, transparent 72%);
          mask-image:radial-gradient(ellipse at center, #000 35%, transparent 72%);
}
.portrait-image{
  position:absolute; right:0; bottom:0; z-index:3;
  width:52vw; height:92%; object-fit:contain; object-position:bottom right;
  -webkit-mask-image:linear-gradient(to right, transparent 0%, #000 12%);
          mask-image:linear-gradient(to right, transparent 0%, #000 12%);
  filter:url(#defringe);
  animation:rise 1.8s var(--ease) .2s both;
}
.oyo-map-watermark{
  position:absolute; left:4vw; bottom:4vh; z-index:2;
  width:24vw; min-width:180px; pointer-events:none; opacity:.8;
  filter:brightness(0) saturate(100%) invert(14%) sepia(91%) saturate(7180%) hue-rotate(357deg) brightness(90%) contrast(115%);
}
.hero-stack{
  position:absolute; left:26vw; top:52%; transform:translate(-50%,-50%);
  z-index:5; width:max-content; max-width:46vw;
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
.hero-stack > *{ animation:settle 1.1s var(--ease) both; }
.hero-stack > :nth-child(2){ animation-delay:.12s; }
.hero-stack > :nth-child(3){ animation-delay:.24s; }
.hero-stack > :nth-child(4){ animation-delay:.36s; }

.brand-crest{ width:clamp(58px,4.6vw,84px); background:#fff; padding:.45vw; border-radius:var(--r-sm); box-shadow:var(--sh-md); margin-bottom:1.6rem; }
.office{ display:flex; flex-direction:column; align-items:center; gap:.55rem; margin-bottom:1.4rem; }
.office-kicker{ color:var(--mist-dim); font-size:clamp(.72rem,.8vw,.86rem); font-weight:700; letter-spacing:.34em; text-transform:uppercase; }
.office-title{
  display:flex; align-items:center; gap:1em;
  font-family:var(--kf-display); font-weight:600; color:var(--red-hi); font-size:clamp(1rem,1.3vw,1.4rem); letter-spacing:.16em; text-transform:uppercase;
}
.office-title::before,.office-title::after{ content:""; width:clamp(20px,2.2vw,44px); height:1px; background:currentColor; opacity:.7; }

.hero-name{
  font-family:var(--kf-display); font-weight:900; color:var(--red); line-height:.9; text-transform:uppercase;
  text-shadow:0 6px 30px rgba(0,0,0,.45);
  margin-bottom:2.4rem;
}
.hero-name > span{ display:block; width:max-content; max-width:100%; margin-inline:auto; }  /* > so nested spans such as .kern stay inline */
/* Line 2 sets the scale; line 1 is sized from it so the two lines come out
   the same width at normal letter-spacing, instead of being stretched apart.
   --n1-ratio is a safe average across the font options, and the small script
   in index.html measures the chosen font and corrects it. */
.hero-name{ --n2-size:clamp(3.4rem, 10vw, 9rem); --n1-ratio:.58; }
/* Clash Display ships with no kerning: its GPOS carries only mark positioning,
   no kern feature at all, so no browser will ever close a bad pair by itself.
   At 9rem the F+A in KEFAS reads as a word break. This nudges that one pair.
   Reusable: wrap the SECOND letter of any bad pair in <span class="kern">.
   Measured at -.05em; -.07em is already too tight. */
.kern{ display:inline; width:auto; margin-left:-.05em; }

.hero-name .n1{ font-size:calc(var(--n2-size) * var(--n1-ratio)); letter-spacing:var(--kf-display-track); }
.hero-name .n2{ font-size:var(--n2-size); letter-spacing:var(--kf-display-track); margin-top:.04em; }

/* =========================== SECTION SCAFFOLD =========================== */
.band{ padding:clamp(4.5rem,11vh,8.5rem) 0; }
.band-alt{ background:var(--paper-2); }
.band-navy{ background:radial-gradient(120% 120% at 85% 0%, var(--navy-3) 0%, var(--navy-2) 50%, var(--navy) 100%); color:var(--mist); }
.label{ display:inline-flex; align-items:center; gap:.7rem; color:var(--red); font-size:.95rem; font-weight:700; margin-bottom:1rem; }
.label::before{ content:""; width:28px; height:2px; background:currentColor; }
.band-navy .label{ color:var(--red-hi); }
.h2{
  font-family:var(--kf-display); font-weight:700; font-size:clamp(2rem,4vw,3.3rem); line-height:1.12; letter-spacing:var(--kf-display-track);
  color:var(--navy-2); max-width:20ch; text-wrap:balance;
}
.band-navy .h2{ color:#fff; }
.prose p{ font-size:clamp(1.02rem,1.1vw,1.15rem); line-height:1.75; color:var(--ink-soft); max-width:62ch; }
.prose p + p{ margin-top:1.1rem; }
.band-navy .prose p{ color:var(--mist-dim); }
.lead-in{ margin-top:1.5rem; }

/* =========================== NEWS =========================== */
.news-head{ display:flex; align-items:end; justify-content:space-between; gap:2rem; margin-bottom:clamp(2rem,4vh,3rem); }
.news-marquee{
  overflow:hidden; padding:1rem 0 2.5rem;
  -webkit-mask-image:linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
          mask-image:linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
}
.marquee-track{ display:flex; gap:clamp(1.2rem,2vw,2rem); width:max-content; animation:marquee 70s linear infinite; }
.news-marquee:hover .marquee-track, .news-marquee:focus-within .marquee-track{ animation-play-state:paused; }
.news-card{
  width:clamp(280px,24vw,380px); flex-shrink:0;
  background:#fff; border-radius:var(--r-md); overflow:hidden;
  border:1px solid var(--line-l); box-shadow:var(--sh-md);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.news-card:hover{ transform:translateY(-6px); box-shadow:var(--sh-lg); }
.news-card img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.news-card p{ padding:1.2rem 1.35rem 1.45rem; font-size:.98rem; line-height:1.55; color:var(--ink); font-weight:500; }
@keyframes marquee{ to{ transform:translateX(calc(-50% - clamp(1.2rem,2vw,2rem) / 2)); } }

/* =========================== STAY CONNECTED =========================== */
.intro-row{ display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(2rem,4vw,3rem); align-items:start; margin-bottom:clamp(3rem,6vh,4.5rem); }
.text-link{ display:inline-block; margin-top:1.4rem; font-size:.86rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--navy-2); text-decoration:none; border-bottom:2px solid currentColor; padding-bottom:.2rem; transition:color .25s var(--ease); }
.text-link:hover{ color:var(--red); }
.signup-card{ display:grid; grid-template-columns:1fr 1fr; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-lg); min-height:560px; }
.signup-image img{ width:100%; height:100%; object-fit:cover; object-position:center 30%; }
.signup-form{ background:var(--mist); padding:clamp(2rem,4.5vw,4.5rem); display:flex; flex-direction:column; justify-content:center; }
.signup-form h3{ font-family:var(--kf-display); font-weight:700; font-size:clamp(1.7rem,2.4vw,2.4rem); color:var(--navy-2); }
.signup-form > p{ margin:.6rem 0 2rem; color:var(--ink-soft); line-height:1.6; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem 1.2rem; }
.field{ display:flex; flex-direction:column; gap:.45rem; }
.field label{ font-size:.78rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--navy-2); }
.field input{
  min-height:50px; padding:0 1rem; border-radius:var(--r-sm);
  border:1px solid rgba(4,46,71,.3); background:#fff; font:inherit; font-size:.98rem; color:var(--ink);
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field input:focus{ outline:none; border-color:var(--navy-2); box-shadow:0 0 0 3px rgba(4,46,71,.16); }
.form-actions{ margin-top:2rem; display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.4rem; }
.form-note{ font-size:.85rem; color:var(--ink-soft); }
.hp{ position:absolute !important; left:-9999px !important; }

/* =========================== ABOUT PAGE =========================== */
.hero-about{
  position:relative; min-height:100vh; min-height:100svh; display:flex; align-items:center;
  background:var(--navy) url('background.jpg') center/cover no-repeat;
  color:var(--mist); padding:clamp(7rem,16vh,10rem) 0 clamp(4rem,9vh,6rem);
  overflow:hidden; isolation:isolate;
}
.hero-about .bg-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
.hero-about::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(to right, rgba(11,21,38,.94) 0%, rgba(11,21,38,.8) 45%, rgba(11,21,38,.5) 78%, rgba(11,21,38,.35) 100%),
    linear-gradient(to top, rgba(11,21,38,.8) 0%, rgba(11,21,38,0) 45%);
}
.hero-about .wrap{ width:100%; }
.hero-about .eyebrow{ font-family:var(--kf-display); font-style:normal; font-weight:500; letter-spacing:var(--kf-display-track); font-size:clamp(1.05rem,1.6vw,1.35rem); color:var(--mist); margin-bottom:1rem; }
.hero-about h1{
  font-family:var(--kf-display); font-weight:800;   font-size:clamp(2.6rem,6.2vw,5.4rem); line-height:1.04; letter-spacing:var(--kf-display-track); color:#fff; max-width:18ch; text-wrap:balance;
}
.hero-about .lede{ margin-top:1.6rem; max-width:58ch; font-size:clamp(1.05rem,1.3vw,1.24rem); line-height:1.65; color:var(--mist-dim); }
.hero-about .lede b{ color:#fff; font-weight:600; }
.hero-about .wrap > *{ animation:settle 1.1s var(--ease) both; }
.hero-about .wrap > :nth-child(2){ animation-delay:.1s; }
.hero-about .wrap > :nth-child(3){ animation-delay:.2s; }
.hero-about .wrap > :nth-child(4){ animation-delay:.3s; }
.facts{ margin-top:2.6rem; display:grid; grid-template-columns:repeat(4,auto); justify-content:start; border-top:1px solid var(--line-d); max-width:920px; }
.facts .f{ padding:1.15rem 1.8rem 0 0; margin-right:1.8rem; border-right:1px solid var(--line-d); }
.facts .f:last-child{ border-right:0; margin-right:0; }
.facts .k{ font-family:var(--kf-display); font-weight:700; font-size:1.7rem; color:#fff; line-height:1; }
.facts .v{ margin-top:.45rem; font-size:.82rem; color:var(--mist-dim); }

.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,6vw,6rem); align-items:center; }
.split.rev .media{ order:2; }
.media{ aspect-ratio:4/5; border-radius:var(--r-lg); overflow:hidden; background:var(--navy-2); box-shadow:var(--sh-lg); }
.media img{ width:100%; height:100%; object-fit:cover; object-position:center top; }

.rows{ margin-top:2.6rem; border-top:1px solid var(--line-l); }
.row{ display:grid; grid-template-columns:minmax(0,22ch) 1fr; gap:clamp(1.4rem,4vw,4rem); padding:1.9rem 0; border-bottom:1px solid var(--line-l); }
.row .t{ font-family:var(--kf-display); font-weight:700; font-size:clamp(1.15rem,1.7vw,1.5rem); color:var(--navy-2); }
.row .d{ font-size:1.04rem; line-height:1.7; color:var(--ink-soft); max-width:60ch; }

.agenda{ margin-top:2.6rem; display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-l); border:1px solid var(--line-l); border-radius:var(--r-md); overflow:hidden; }
.ag{ background:#fff; padding:1.8rem 1.6rem 2rem; }
.ag h3{ font-family:var(--kf-display); font-weight:700; font-size:1.25rem; color:var(--navy-2); margin-bottom:.55rem; }
.ag h3::before{ content:""; display:block; width:22px; height:3px; background:var(--red); border-radius:2px; margin-bottom:1rem; }
.ag p{ font-size:.97rem; line-height:1.6; color:var(--ink-soft); }

.stats{ margin-top:3rem; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,3vw,3rem); }
.stat{ padding-top:1.3rem; border-top:1px solid var(--line-d); }
.stat .n{ font-family:var(--kf-display); font-weight:800; font-size:clamp(2.4rem,4.4vw,3.8rem); color:#fff; line-height:1; }
.stat .l{ margin-top:.7rem; font-size:.95rem; line-height:1.5; color:var(--mist-dim); max-width:26ch; }

.quote blockquote{
  font-family:var(--kf-display); font-weight:600; font-style:normal; font-size:clamp(1.7rem,3.6vw,3rem); line-height:1.3; color:var(--navy-2); max-width:26ch; letter-spacing:var(--kf-display-track);
}
.quote blockquote::before{ content:""; display:block; width:44px; height:3px; background:var(--red); margin-bottom:2rem; }
.quote .by{ margin-top:1.6rem; color:var(--ink-soft); }

.cta-band{ background:var(--navy); color:var(--mist); text-align:center; padding:clamp(4.5rem,10vh,7rem) 0; }
.cta-band .h2{ color:#fff; margin:0 auto; }
.cta-band .btns{ margin-top:2.2rem; display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

/* =========================== FOOTER (shared) =========================== */
.site-footer{ position:relative; background:var(--navy); color:#fff; padding:96px var(--gutter) 40px; overflow:hidden; }
.footer-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; pointer-events:none; }
.site-footer::before{ content:""; z-index:1; position:absolute; inset:0; background:linear-gradient(to top, rgba(4,22,44,.97) 0%, rgba(4,22,44,.86) 35%, rgba(4,22,44,.6) 70%, rgba(4,22,44,.3) 100%); }
.footer-grid, .footer-bottom{ position:relative; z-index:2; max-width:var(--mw); margin:0 auto; }
.footer-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:48px; margin-bottom:56px; }
.footer-col h3{ font-family:var(--kf-display); font-weight:700; font-size:1.3rem; margin-bottom:22px; padding-bottom:10px; position:relative; }
.footer-col h3::after{ content:""; position:absolute; left:0; bottom:0; width:42px; height:3px; background:var(--red); border-radius:2px; }
.footer-links{ list-style:none; display:grid; gap:14px; }
.footer-links a, .social-links a{ color:rgba(255,255,255,.85); text-decoration:none; transition:color .2s var(--ease); }
.footer-links a:hover, .social-links a:hover{ color:#fff; }
.social-links{ display:grid; gap:12px; }
.social-links a{ display:flex; align-items:center; gap:12px; }
.social-links svg{ width:18px; height:18px; padding:9px; box-sizing:content-box; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15); border-radius:50%; transition:background .25s var(--ease), border-color .25s var(--ease); }
.social-links a:hover svg{ background:var(--red); border-color:var(--red); }
.footer-bottom a{ color:rgba(255,255,255,.85); }
.footer-bottom a:hover{ color:#fff; }
.footer-bottom{ text-align:center; border-top:1px solid rgba(255,255,255,.15); padding-top:22px; font-size:.9rem; color:rgba(255,255,255,.7); }
.footer-portrait{ position:relative; width:200px; height:200px; }
.footer-portrait img{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:150px; height:150px; border-radius:50%; object-fit:cover; border:3px solid var(--red); box-shadow:0 0 0 6px rgba(255,255,255,.12), 0 8px 24px rgba(0,0,0,.35); }
.footer-portrait svg{ position:absolute; inset:0; width:100%; height:100%; animation:spin 32s linear infinite; }
.footer-portrait text{ fill:#fff; font-family:var(--kf-display); font-size:13px; font-weight:700; letter-spacing:1px; }

/* =========================== LEGAL PAGE =========================== */
.legal-page .site-nav{ background:rgba(11,21,38,.96); }
.legal-hero{ background:var(--navy); color:var(--mist); padding:clamp(8rem,18vh,11rem) 0 clamp(3rem,7vh,5rem); }
.legal-hero .h2{ color:#fff; font-size:clamp(2.4rem,5vw,4rem); }
.legal-hero p{ margin-top:1rem; color:var(--mist-dim); }
.legal, .legal-hero .wrap{ max-width:820px; }
.legal-toc{ display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:3rem; }
.legal-toc a{ padding:.55rem 1.1rem; border:1px solid var(--line-l); border-radius:var(--r-pill); text-decoration:none; font-size:.9rem; font-weight:700; color:var(--navy-2); transition:border-color .2s var(--ease), color .2s var(--ease); }
.legal-toc a:hover{ border-color:var(--red); color:var(--red); }
.legal h2{ font-family:var(--kf-display); font-weight:700; font-size:clamp(1.7rem,3vw,2.4rem); color:var(--navy-2); margin:3.5rem 0 1rem; padding-top:1.5rem; border-top:1px solid var(--line-l); }
.legal h2:first-of-type{ margin-top:0; border-top:0; padding-top:0; }
.legal h3{ font-family:var(--kf-display); font-weight:700; font-size:1.2rem; color:var(--navy-2); margin:1.8rem 0 .5rem; }
.legal p a{ color:var(--red); }
.legal p b{ color:var(--ink); }

/* =========================== COOKIE BANNER =========================== */
.cookie-banner{
  position:fixed; left:50%; bottom:clamp(12px,3vw,24px); z-index:60;
  width:min(760px, calc(100% - 24px));
  display:flex; align-items:center; gap:1.2rem 1.6rem; flex-wrap:wrap;
  background:#fff; color:var(--ink); border-radius:var(--r-md); box-shadow:var(--sh-lg);
  border:1px solid var(--line-l); padding:1.1rem 1.3rem 1.1rem 1.5rem;
  transform:translate(-50%, 24px); opacity:0; transition:transform .45s var(--ease), opacity .45s var(--ease);
}
.cookie-banner.is-in{ transform:translate(-50%,0); opacity:1; }
.cookie-banner p{ flex:1 1 300px; font-size:.94rem; line-height:1.55; color:var(--ink-soft); }
.cookie-banner a{ color:var(--navy-2); font-weight:700; }
.cookie-actions{ display:flex; gap:.6rem; margin-left:auto; }
.cookie-actions .btn{ min-height:44px; padding:0 1.4rem; font-size:.78rem; box-shadow:none; }
.btn-ghost-dark{ color:var(--navy-2); border-color:rgba(4,46,71,.3); background:transparent; }
.btn-ghost-dark:hover{ border-color:var(--navy-2); }
@media (max-width:560px){ .cookie-actions{ width:100%; } .cookie-actions .btn{ flex:1; } }

/* =========================== FOOTER MOBILE =========================== */
@media (max-width:560px){
  .site-footer{ padding:64px 22px 28px; }
  .footer-grid{ margin-bottom:36px; }
  .footer-portrait{ width:170px; height:170px; }
  .footer-portrait img{ width:124px; height:124px; }
  .footer-col h3{ font-size:1.05rem; margin-bottom:16px; }
  .footer-links{ gap:12px; font-size:.95rem; }
  .social-links{ grid-template-columns:repeat(2, 44px); gap:12px; }
  .social-links a{ gap:0; }
  .social-links a span{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .social-links svg{ width:18px; height:18px; padding:12px; }
  .footer-bottom{ font-size:.8rem; line-height:1.7; }
  .footer-bottom a{ display:block; }
}

/* =========================== ABOUT LIST ANIMATIONS =========================== */
/* Hidden states only apply when anim.js has confirmed motion is OK */
.anim .rows .row,
.anim .agenda .ag,
.anim .stats .stat,
.anim .facts .f{ opacity:0; }

/* Rows: text glides in, a red line draws across, then settles */
.row{ position:relative; transition:background .4s var(--ease); }
.row::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:var(--red); transform:scaleX(0); transform-origin:left; opacity:0; pointer-events:none;
}
.rows.in .row{ animation:fadeUp .9s var(--ease) both; animation-delay:calc(var(--i) * 130ms); }
.rows.in .row .t{ animation:slideIn .9s var(--ease) backwards; animation-delay:calc(var(--i) * 130ms + 80ms); }
.rows.in .row .d{ animation:fadeUp 1s var(--ease) both; animation-delay:calc(var(--i) * 130ms + 180ms); }
.rows.in .row::after{ animation:drawLine 1.5s var(--ease) both; animation-delay:calc(var(--i) * 130ms + 120ms); }
.row .t{ transition:color .3s var(--ease), transform .4s var(--ease); }
.row:hover .t{ color:var(--red); transform:translateX(6px); }

/* Agenda: cards rise out of a soft blur, accent bar grows */
.anim .agenda{ background:transparent; border-color:transparent; transition:background .8s var(--ease) .7s, border-color .8s var(--ease) .7s; }
.anim .agenda.in{ background:var(--line-l); border-color:var(--line-l); }
.agenda.in .ag{ animation:riseBlur 1s var(--ease) both; animation-delay:calc(var(--i) * 90ms); }
.ag h3::before{ transition:width .5s var(--ease); }
.anim .ag h3::before{ width:0; }
.agenda.in .ag h3::before{ width:22px; transition-delay:calc(var(--i) * 90ms + 450ms); }
.ag{ transition:background .35s var(--ease); }
.agenda.in .ag:hover h3::before, .ag:hover h3::before{ width:44px; transition-delay:0s; }
.ag:hover{ background:var(--paper-2); }

/* Stats: top rule draws, numbers count up */
.stat{ position:relative; border-top-color:transparent; }
.stat::before{
  content:""; position:absolute; left:0; top:-1px; width:100%; height:1px;
  background:var(--line-d); transform-origin:left;
}
.stat::after{
  content:""; position:absolute; left:0; top:-1px; width:48px; height:2px; background:var(--red-hi);
  transform:scaleX(0); transform-origin:left;
}
.anim .stat::before{ transform:scaleX(0); }
.stats.in .stat{ animation:fadeUp .9s var(--ease) both; animation-delay:calc(var(--i) * 150ms); }
.stats.in .stat::before{ animation:grow 1.2s var(--ease) both; animation-delay:calc(var(--i) * 150ms + 100ms); }
.stats.in .stat::after{ animation:grow .8s var(--ease) both; animation-delay:calc(var(--i) * 150ms + 600ms); }
.stat .n{ font-variant-numeric:tabular-nums; }

/* Hero facts: quick stagger after the headline settles */
.facts.in .f{ animation:fadeUp .8s var(--ease) both; animation-delay:calc(.45s + var(--i) * 110ms); }

@keyframes fadeUp{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:none; } }
@keyframes slideIn{ from{ opacity:0; transform:translateX(-24px); } to{ opacity:1; transform:none; } }
@keyframes riseBlur{ from{ opacity:0; transform:translateY(30px) scale(.97); filter:blur(8px); } to{ opacity:1; transform:none; filter:none; } }
@keyframes grow{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
@keyframes drawLine{ 0%{ transform:scaleX(0); opacity:1; } 55%{ transform:scaleX(1); opacity:1; } 100%{ transform:scaleX(1); opacity:0; } }

/* =========================== MOTION =========================== */
@keyframes rise{ from{ transform:translateY(8vh); opacity:0; } to{ transform:none; opacity:1; } }
@keyframes settle{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* =========================== RESPONSIVE =========================== */
@media (max-width:1100px){
  .agenda{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:1024px){
  .hero-stack{ left:var(--gutter); transform:translateY(-50%); align-items:flex-start; text-align:left; max-width:56vw; }
  .office{ align-items:flex-start; }
  .office-title::before, .office-title::after{ display:none; }
}
@media (max-width:820px){
  .intro-row, .signup-card, .split, .stats{ grid-template-columns:1fr; }
  .split.rev .media{ order:0; }
  .signup-image{ height:44vh; }
  .row{ grid-template-columns:1fr; gap:.5rem; }
  .facts{ grid-template-columns:repeat(2,auto); }
  .facts .f:nth-child(2){ border-right:0; }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:40px 28px; }
  .footer-col:first-child{ grid-column:1 / -1; display:flex; justify-content:center; }
}
@media (max-width:768px){
  .hero-home{ height:auto; min-height:100svh; display:flex; flex-direction:column; padding:18vh var(--gutter) 46vh; }
  .hero-stack{ position:static; transform:none; max-width:100%; width:max-content; align-self:center; align-items:center; text-align:center; }
  .hero-stack .office{ align-items:center; }
  .hero-name{ --n2-size:clamp(2.6rem, 15vw, 4.6rem); }
  .portrait-image{ width:auto; height:46vh; }
  .fabric-video{ top:auto; bottom:6vh; right:auto; left:0; width:100vw; }
  .oyo-map-watermark{ width:46vw; opacity:.45; bottom:2vh; }
  .hero-stack .btn{ white-space:normal; text-align:center; }
}
@media (max-width:560px){
  .form-grid, .agenda{ grid-template-columns:1fr; }
  .news-head{ flex-direction:column; align-items:flex-start; }
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation:none !important; transition:none !important; }
  .fabric-video, .bg-video, .footer-bg{ display:none; }
  .news-marquee{ overflow-x:auto; -webkit-mask-image:none; mask-image:none; }
  .news-card[aria-hidden="true"]{ display:none; }
}

/* =========================== UPDATES PAGES =========================== */
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* Read more on the homepage news cards */
.news-card{ display:flex; flex-direction:column; }
.news-card p{ flex-grow:1; padding-bottom:.8rem; }
.news-more{
  display:inline-block; margin:0 1.35rem 1.35rem; align-self:flex-start;
  font-size:.78rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--navy-2); text-decoration:none; border-bottom:2px solid currentColor; padding-bottom:.2rem;
  transition:color .25s var(--ease);
}
.news-more:hover{ color:var(--red); }

/* ---- Hero, shared by the hub and every story page ---- */
.updates-hero{
  background:var(--navy); color:var(--mist);
  padding:clamp(8rem,17vh,11rem) 0 clamp(3.5rem,8vh,5rem);
}
.updates-hero h1{
  font-family:var(--kf-display); font-weight:800; letter-spacing:var(--kf-display-track);
  font-size:clamp(2.8rem,7vw,5.6rem); line-height:1.04; color:#fff; margin-top:.8rem;
}
.updates-lede{ margin-top:1.3rem; max-width:58ch; font-size:clamp(1.05rem,1.3vw,1.24rem); line-height:1.65; color:var(--mist-dim); }

/* story page hero: headline sized as a headline, not a page title */
.updates-hero-story h1{
  font-size:clamp(2rem,4.4vw,3.6rem); line-height:1.12; max-width:22ch; margin-top:1.1rem; text-wrap:balance;
}
.hero-back{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.76rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--red-hi); text-decoration:none; transition:color .2s var(--ease);
}
.hero-back:hover{ color:#fff; }
.hero-back svg{ width:15px; height:15px; }
.story-meta-hero{ margin-top:1.4rem; color:var(--mist-dim); }
.story-meta-hero .story-tag{ background:var(--red); }

/* ---- The clickable list of all updates ---- */
.toc{ background:var(--paper-2); border-bottom:1px solid var(--line-l); padding:clamp(2.4rem,5vh,3.2rem) 0 clamp(2.8rem,5vh,3.6rem); }
.toc-head{ display:flex; align-items:baseline; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; margin-bottom:1.5rem; }
.toc-head h2{ font-size:.86rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--navy-2); }
.toc-head span{ font-size:.9rem; color:var(--ink-soft); }
.toc-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 clamp(2rem,4vw,3.5rem); }
.toc-col{ list-style:none; margin:0; padding:0; }
.toc-item{ border-top:1px solid var(--line-l); }
.toc-col .toc-item:last-child{ border-bottom:1px solid var(--line-l); }
.toc-item a{
  display:flex; gap:1rem; padding:.8rem .7rem .8rem .5rem; text-decoration:none; color:var(--ink);
  border-radius:var(--r-sm); transition:color .2s var(--ease), background .2s var(--ease);
}
.toc-item a:hover{ color:var(--red); background:rgba(4,46,71,.05); }
.toc-num{ color:var(--red); font-weight:800; font-size:.84rem; padding-top:.2rem; min-width:1.6rem; font-variant-numeric:tabular-nums; }
.toc-text{ display:flex; flex-direction:column; gap:.18rem; min-width:0; }
.toc-headline{ font-size:.97rem; line-height:1.4; font-weight:600; }
.toc-date{ font-size:.79rem; color:var(--ink-soft); font-weight:500; }
.toc-item.is-current a{ background:var(--navy-2); color:#fff; }
.toc-item.is-current a:hover{ background:var(--navy-2); color:#fff; }
.toc-item.is-current .toc-num{ color:var(--red-hi); }
.toc-item.is-current .toc-date{ color:rgba(226,245,249,.72); }

/* ---- Hub: all 20 as cards ---- */
.hub{ padding:clamp(3rem,7vh,4.5rem) 0 clamp(4rem,9vh,6rem); }
.hub-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(1.5rem,3vw,2.2rem); }
.hub-card{ border:1px solid var(--line-l); border-radius:var(--r-lg); overflow:hidden; background:#fff; box-shadow:var(--sh-md); transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.hub-card:hover{ transform:translateY(-4px); box-shadow:var(--sh-lg); }
.hub-link{ display:flex; flex-wrap:wrap; text-decoration:none; color:inherit; height:100%; }
.hub-shot{ flex:1 1 220px; min-width:200px; background:var(--paper-2); overflow:hidden; }
.hub-shot img{ width:100%; height:100%; min-height:200px; object-fit:cover; }
.hub-text{ flex:999 1 260px; min-width:0; display:flex; flex-direction:column; gap:.6rem; padding:1.5rem 1.6rem 1.7rem; }
.hub-meta{ display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; font-size:.84rem; color:var(--ink-soft); }
.hub-head{ font-family:var(--kf-display); font-weight:700; letter-spacing:var(--kf-display-track); font-size:1.28rem; line-height:1.26; color:var(--navy-2); }
.hub-lede{ font-size:.96rem; line-height:1.6; color:var(--ink-soft); }
.hub-more{ margin-top:auto; padding-top:.5rem; font-size:.76rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--red); }

/* ---- One story ---- */
.story-single{ padding:clamp(2.4rem,5vh,3.4rem) 0 0; }
.story-body{ max-width:820px; }
.story-meta{ display:flex; align-items:center; gap:.9rem; flex-wrap:wrap; font-size:.9rem; }
.story-tag{
  background:var(--navy-2); color:#fff; font-size:.68rem; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase; padding:.4rem .75rem; border-radius:var(--r-pill);
}
.story-place{ position:relative; padding-left:1.1rem; }
.story-place::before{ content:"\00B7"; position:absolute; left:.38rem; }
.story-body p{ font-size:1.06rem; line-height:1.82; color:var(--ink-soft); }
.story-body p + p{ margin-top:1.05rem; }
.story-credit{ margin-top:1.7rem !important; font-size:.92rem !important; color:var(--navy-2) !important; font-weight:600; }

/* Centring the hero.
   Elementor ships this reset:
     .elementor .elementor-widget:not(...):not(...) figure{ margin:0 }
   Specificity 0,4,1. Our .story-hero is 0,1,0, so Elementor wipes the auto
   margins off the <figure> and it sits flush left with all the slack on the
   right. Load order cannot fix a specificity gap, and matching 0,4,1 would
   mean hard-coding Elementor's own class names into this stylesheet, which
   would break the day they rename them. !important is the honest tool here:
   one declaration, overriding one third-party reset. */
.story-hero{ margin-inline:auto !important; }

/* Story hero.
   Every hero is the same shape, so the pages look like a set rather than a
   pile of different sizes. 4/3 is chosen because that is what the camera
   shoots: a 1280x960 press photo fills this box exactly, with nothing cut.
   Anything not 4:3 is covered from slightly above centre, so faces survive.
   To art-direct one photo, override it on that page only:
     <img ... style="object-position:center 15%;">              */
.story-hero .shot-hero{ width:100%; aspect-ratio:4/3; border-radius:var(--r-lg); }
.story-hero .shot-hero img{ object-position:center 30%; }

.story-body{ padding-top:clamp(1.8rem,3.5vh,2.4rem); }

/* ---- Photographs ---- */
.shot{
  display:block; padding:0; border:1px solid var(--line-l); background:var(--paper-2);
  border-radius:var(--r-md); overflow:hidden; cursor:zoom-in; width:100%;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.shot img{ width:100%; height:100%; object-fit:cover; display:block; }
.shot:hover{ transform:translateY(-3px); box-shadow:var(--sh-md); }
.gallery{ margin-top:2rem; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.75rem; }
.gallery .shot{ aspect-ratio:1/1; }
.gallery-note{ margin-top:.7rem !important; font-size:.84rem !important; }

/* ---- Newer / older ---- */
.pager{ padding:clamp(2.5rem,5vh,3.5rem) 0 clamp(4rem,8vh,5.5rem); }
.pager-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; padding-top:1.6rem; border-top:1px solid var(--line-l); }
.pager a{ text-decoration:none; color:var(--navy-2); font-family:var(--kf-display); font-weight:700; letter-spacing:var(--kf-display-track); font-size:1.12rem; line-height:1.3; transition:color .2s var(--ease); }
.pager a:hover{ color:var(--red); }
.pager span{ display:block; font-family:var(--text); font-size:.7rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--red); margin-bottom:.4rem; }
.pager-next{ text-align:right; }

/* ---- Lightbox ---- */
.lightbox{
  position:fixed; inset:0; z-index:80; background:rgba(11,21,38,.94);
  display:flex; align-items:center; justify-content:center; padding:clamp(1.5rem,5vw,4rem);
}
.lightbox[hidden]{ display:none; }
.lightbox-figure{ max-width:1100px; width:100%; text-align:center; }
.lightbox-figure img{ max-width:100%; max-height:76vh; margin:0 auto; border-radius:var(--r-md); }
.lightbox-figure figcaption{ margin-top:1.1rem; color:var(--mist-dim); font-size:.95rem; line-height:1.5; }
.lightbox-close{
  position:absolute; top:clamp(1rem,3vw,2rem); right:clamp(1rem,3vw,2rem);
  width:52px; height:52px; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.08); border:1px solid rgba(226,245,249,.35); color:#fff;
  display:grid; place-items:center;
}
.lightbox-close:hover{ background:var(--red); border-color:var(--red); }
.lightbox-close svg{ width:22px; height:22px; }

@media (max-width:980px){
  .hub-grid{ grid-template-columns:1fr; }
}
@media (max-width:820px){
  .toc-grid{ grid-template-columns:1fr; }
  .toc-col:first-child .toc-item:last-child{ border-bottom:0; }
  .pager-grid{ grid-template-columns:1fr; gap:1.3rem; }
  .pager-next{ text-align:left; }
}
@media (max-width:560px){
  .gallery{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .news-more{ margin:0 1.1rem 1.2rem; }
  .hub-shot img{ min-height:180px; }
}
.story-body .ref{
  color:inherit;
  text-decoration:underline;
  text-decoration-color:var(--line-l);
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  transition:text-decoration-color .25s var(--ease);
}
.story-body .ref:hover{ text-decoration-color:currentColor; }