/* ==========================================================================
   UKCC — Ukrainian-Kosovar Chamber of Commerce
   Design system v2 — "Trade Corridor"
   Deep navy atmosphere · warm paper · gold hairlines · drifting monograms
   ========================================================================== */

/* --------------------------------------------------------------- 1. TOKENS */
:root{
  /* ink & navy family */
  --ink:        #040C1C;
  --navy-950:   #060F26;
  --navy-900:   #081634;
  --navy-850:   #0A1C42;
  --navy-800:   #0C2350;
  --navy-700:   #123066;
  --navy-600:   #18407F;
  --navy-500:   #1F53A0;

  /* azure — light, life, depth */
  --azure:      #2E7DE0;
  --azure-400:  #5AA0F0;
  --azure-300:  #8FC1F7;
  --azure-glow: rgba(46,125,224,.55);

  /* gold — brand accent, taken from the logo */
  --gold:       #FFC41F;
  --gold-600:   #E8A800;
  --gold-300:   #FFD96B;
  --gold-100:   #FFF0C4;

  /* paper — cool, blue-tinted whites */
  --paper:      #F7FAFE;
  --paper-2:    #EEF3FB;
  --paper-3:    #E4EBF7;
  --white:      #FFFFFF;

  /* text on paper */
  --t-1:        #0A1730;
  --t-2:        #3C4A63;
  --t-3:        #5F6A81;   /* AA on paper-3: 4.56:1 */

  /* text on dark */
  --d-1:        rgba(255,255,255,.96);
  --d-2:        rgba(220,232,255,.74);
  --d-3:        rgba(198,214,245,.57);  /* AA on navy-850: 4.56:1 */
  --hair-d:     rgba(255,255,255,.12);
  --hair-l:     rgba(10,23,48,.12);

  /* type */
  --f-display: "Cormorant Garamond", "Times New Roman", serif;
  --f-sans:    "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* fluid scale */
  --fs-mega:  clamp(2.35rem, 1.35rem + 2.9vw, 4.35rem);
  --fs-h1:    clamp(2.2rem, 1.45rem + 2.4vw, 3.9rem);
  --fs-h2:    clamp(1.75rem, 1.25rem + 1.85vw, 2.85rem);
  --fs-h3:    clamp(1.25rem, 1.05rem + .75vw, 1.6rem);
  --fs-lede:  clamp(1.05rem, .96rem + .48vw, 1.32rem);
  --fs-body:  clamp(1rem, .95rem + .22vw, 1.08rem);
  --fs-micro: .715rem;

  /* rhythm */
  --sp-1: .25rem; --sp-2: .5rem;  --sp-3: .75rem; --sp-4: 1rem;
  --sp-5: 1.5rem; --sp-6: 2rem;   --sp-7: 3rem;   --sp-8: 4rem;
  --sp-9: 6rem;   --sp-10: 8rem;  --sp-11: 11rem;

  --shell: 1280px;
  --gut: clamp(1.15rem, .5rem + 2.6vw, 3.5rem);

  --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-xl: 30px;

  --ease: cubic-bezier(.22,.68,.24,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  --sh-1: 0 1px 2px rgba(6,15,38,.06), 0 6px 18px rgba(6,15,38,.05);
  --sh-2: 0 2px 6px rgba(6,15,38,.08), 0 22px 48px rgba(6,15,38,.10);
  --sh-d: 0 30px 80px rgba(0,0,0,.45);

  /* the grain texture, generated once */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.44'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------ 2. RESET */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  overflow-x:hidden;
  max-width:100%;
}
body{
  margin:0;
  overflow-x:hidden;
  max-width:100%;
  background:var(--paper);
  color:var(--t-1);
  font-family:var(--f-sans);
  font-size:var(--fs-body);
  line-height:1.68;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-feature-settings:"kern" 1,"liga" 1;
}
img,svg,video{max-width:100%;height:auto;display:block}
h1,h2,h3,h4,h5{margin:0;font-weight:600;line-height:1.06;letter-spacing:-.015em}
p{margin:0 0 1.05em}
a{color:inherit;text-decoration:none}
ul,ol,dl,dd{margin:0;padding:0}
li{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
table{border-collapse:collapse;width:100%}
::selection{background:var(--gold);color:var(--navy-900)}

.skip{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--gold);color:var(--navy-900);
  padding:.7rem 1.1rem;font-weight:700;border-radius:0 0 var(--r-sm) 0;
}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}

/* ------------------------------------------------- 3. LAYOUT PRIMITIVES */
.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gut)}
.shell-wide{max-width:1520px}
.shell-read{max-width:940px}

section{position:relative}
.band{padding-block:clamp(3.4rem,1.8rem + 5.2vw,7rem);position:relative;overflow:hidden}
.band-tight{padding-block:clamp(3rem,1.6rem + 4.4vw,5.5rem);position:relative;overflow:hidden}

/* dark atmospheric band ---------------------------------------------------- */
.band-dark{
  background:
    radial-gradient(120% 90% at 12% -10%, rgba(31,83,160,.55) 0%, transparent 55%),
    radial-gradient(90% 80% at 88% 8%, rgba(46,125,224,.34) 0%, transparent 58%),
    radial-gradient(120% 120% at 60% 110%, rgba(255,196,31,.10) 0%, transparent 52%),
    linear-gradient(168deg, var(--navy-950) 0%, var(--navy-900) 42%, var(--ink) 100%);
  color:var(--d-1);
  isolation:isolate;
}
.band-dark h1,.band-dark h2,.band-dark h3,.band-dark h4{color:var(--white)}
.band-dark p{color:var(--d-2)}

/* light bands — never flat: layered blue light + a warm gold breath */
.band-paper-2{
  background:
    radial-gradient(80% 60% at 88% 0%, rgba(46,125,224,.10) 0%, transparent 60%),
    radial-gradient(70% 70% at 0% 100%, rgba(255,196,31,.09) 0%, transparent 62%),
    linear-gradient(180deg,var(--paper) 0%,var(--paper-2) 100%);
}
.band-paper-3{
  background:
    radial-gradient(75% 65% at 10% 0%, rgba(46,125,224,.13) 0%, transparent 58%),
    radial-gradient(65% 60% at 100% 90%, rgba(31,83,160,.10) 0%, transparent 60%),
    linear-gradient(180deg,var(--paper-2) 0%,var(--paper-3) 100%);
}
/* hairline seam at the top of every light band */
.band-paper-2::marker,.band-paper-3::marker{content:""}
.seam{position:relative}
.seam::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;z-index:4;
  background:linear-gradient(90deg,transparent,rgba(255,196,31,.55) 22%,rgba(46,125,224,.45) 55%,transparent);
}

/* grain, applied to any positioned element ---------------------------------- */
.grain::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background-image:var(--grain);
  background-size:220px 220px;
  opacity:.20;mix-blend-mode:overlay;
}
.band-paper-2.grain::after,.band-paper-3.grain::after{opacity:.42;mix-blend-mode:multiply}

/* faint blueprint grid ------------------------------------------------------ */
.blueprint::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size:clamp(60px,7vw,110px) clamp(60px,7vw,110px);
  -webkit-mask-image:radial-gradient(75% 65% at 50% 40%, #000 0%, transparent 100%);
  mask-image:radial-gradient(75% 65% at 50% 40%, #000 0%, transparent 100%);
}
.band-paper-2.blueprint::before,.band-paper-3.blueprint::before{
  background-image:
    linear-gradient(to right, rgba(10,23,48,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(10,23,48,.05) 1px, transparent 1px);
}

/* drifting aurora blobs — depth, never flat -------------------------------- */
.aurora{position:absolute;inset:-20% -10%;z-index:0;pointer-events:none;overflow:hidden}
.aurora i{
  position:absolute;display:block;border-radius:50%;
  filter:blur(70px);opacity:.55;
  will-change:transform;
}
.aurora i:nth-child(1){
  width:52vw;height:52vw;left:-8%;top:-14%;
  background:radial-gradient(circle at 40% 40%, rgba(46,125,224,.62), transparent 68%);
  animation:drift-a 34s var(--ease) infinite alternate;
}
.aurora i:nth-child(2){
  width:44vw;height:44vw;right:-6%;top:6%;
  background:radial-gradient(circle at 55% 45%, rgba(31,83,160,.60), transparent 68%);
  animation:drift-b 41s var(--ease) infinite alternate;
}
.aurora i:nth-child(3){
  width:38vw;height:38vw;left:38%;bottom:-18%;
  background:radial-gradient(circle at 50% 50%, rgba(255,196,31,.24), transparent 66%);
  animation:drift-c 47s var(--ease) infinite alternate;
}
@keyframes drift-a{to{transform:translate3d(9%,7%,0) scale(1.16)}}
@keyframes drift-b{to{transform:translate3d(-11%,9%,0) scale(1.1)}}
@keyframes drift-c{to{transform:translate3d(7%,-9%,0) scale(1.2)}}

/* drifting monogram watermark ---------------------------------------------- */
/* The monogram is locked to the viewport: the page scrolls, the mark holds
   still, and each band reveals its own part of it. */
/* The monogram is truly fixed: the layer IS the viewport, so its background can
   never move with the page. main.js clips each layer to the visible part of its
   own band, so a section only ever shows its own mark. Hidden until that runs, so
   the marks can't overlap if the script is blocked. */
.wm{
  position:fixed;inset:0;
  z-index:0;pointer-events:none;
  background-repeat:no-repeat;
  visibility:hidden;
  will-change:clip-path;
}
.wm-light{background-image:url(/assets/img/brand/ukcc-monogram-white-web.png)}
.wm-dark{background-image:url(/assets/img/brand/ukcc-monogram-navy-web.png)}
.wm-a{background-size:auto clamp(300px,66vh,760px);background-position:93% 16%;opacity:.07}
.wm-b{background-size:auto clamp(250px,54vh,620px);background-position:5% 86%;opacity:.06}
.wm-c{background-size:auto clamp(340px,86vh,1000px);background-position:50% 50%;opacity:.035}

@media (max-width:760px){
  .wm-a{background-size:auto clamp(230px,42vh,420px);background-position:106% 12%}
  .wm-b{background-size:auto clamp(200px,36vh,360px);background-position:-8% 90%}
  .wm-c{background-size:auto clamp(260px,54vh,520px)}
}

/* keep real content above every atmospheric layer */
.band > .shell,.band > .shell-wide,.band > .shell-read{position:relative;z-index:3}

/* ------------------------------------------------------- 4. TYPOGRAPHY */
.display{
  font-family:var(--f-display);
  font-weight:600;
  line-height:.98;
  letter-spacing:-.022em;
}
.display em{font-style:italic;font-weight:500}
.t-mega{font-size:var(--fs-mega)}
.t-h1{font-size:var(--fs-h1)}
.t-h2{font-size:var(--fs-h2)}
.t-h3{font-size:var(--fs-h3)}

/* gold-flecked headline for the biggest moments */
.t-shine{
  background:linear-gradient(96deg,#fff 0%,#fff 38%,var(--gold-300) 60%,var(--gold) 74%,#fff 96%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:shine 9s var(--ease) infinite;
}
@keyframes shine{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

.lede{font-size:var(--fs-lede);line-height:1.6;color:var(--t-2);max-width:62ch;font-weight:400}
.band-dark .lede{color:var(--d-2)}

/* eyebrow — mono, tiny, letterspaced, with a gold tick */
.eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--f-mono);font-size:var(--fs-micro);font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--t-2);margin-bottom:1.15rem;
}
.band-dark .eyebrow{color:var(--gold)}
.eyebrow::before{
  content:"";width:clamp(18px,3vw,34px);height:1px;background:var(--gold-600);opacity:1;
}
.band-dark .eyebrow::before{background:currentColor;opacity:.85}
.eyebrow.no-rule::before{display:none}

.mono{font-family:var(--f-mono);font-size:var(--fs-micro);letter-spacing:.16em;text-transform:uppercase}

.hair{height:1px;border:0;margin:0;background:linear-gradient(90deg,transparent,var(--hair-l) 12%,var(--hair-l) 88%,transparent)}
.band-dark .hair{background:linear-gradient(90deg,transparent,var(--hair-d) 12%,var(--hair-d) 88%,transparent)}
.hair-gold{height:1px;border:0;background:linear-gradient(90deg,transparent,var(--gold) 30%,var(--gold) 70%,transparent);opacity:.6}

.measure{max-width:68ch}
.measure-tight{max-width:56ch}

/* section head: index · label · rule that runs to the edge ---------------- */
.sec-head{display:flex;align-items:center;gap:clamp(.8rem,1.6vw,1.4rem);margin-bottom:clamp(1.4rem,2.2vw,2.1rem)}
.sec-ix{
  font-family:var(--f-mono);font-size:.72rem;font-weight:500;letter-spacing:.1em;
  color:var(--t-2);flex:none;
  padding:.28rem .55rem;border:1px solid rgba(232,168,0,.55);border-radius:4px;
}
.sec-lb{
  font-family:var(--f-mono);font-size:var(--fs-micro);font-weight:500;
  letter-spacing:.26em;text-transform:uppercase;color:var(--t-2);flex:none;
}
.sec-rule{flex:1 1 auto;height:1px;background:linear-gradient(90deg,rgba(232,168,0,.5),rgba(10,23,48,.13) 45%,transparent)}
.band-dark .sec-ix{color:var(--gold);border-color:rgba(255,196,31,.4)}
.band-dark .sec-lb{color:var(--d-2)}
.band-dark .sec-rule{background:linear-gradient(90deg,rgba(255,196,31,.6),rgba(255,255,255,.16) 45%,transparent)}

/* --------------------------------------------------------- 5. TICKER */
.ticker{
  position:relative;z-index:4;
  border-block:1px solid var(--hair-d);
  background:rgba(4,12,28,.55);
  overflow:hidden;
  padding-block:.55rem;
}
.band-paper-2 .ticker,.ticker-light{
  border-color:var(--hair-l);background:rgba(251,250,246,.6);
}
.ticker-track{
  display:flex;width:max-content;
  animation:ticker 64s linear infinite;
  will-change:transform;
}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-track span{
  font-family:var(--f-mono);
  font-size:.62rem;font-weight:400;
  letter-spacing:.42em;text-transform:uppercase;
  color:var(--d-3);
  padding-inline:1.4rem;
  white-space:nowrap;
  display:inline-flex;align-items:center;gap:1.4rem;
}
.ticker-light .ticker-track span{color:var(--t-3)}
.ticker-track span::after{
  content:"";width:4px;height:4px;border-radius:50%;
  background:var(--gold);opacity:.8;flex:none;
}
@keyframes ticker{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* ---------------------------------------------------------- 6. HEADER */

/* The frosted glass lives on a pseudo-element, never on .masthead itself:
   backdrop-filter would make the header a containing block for fixed children,
   which trapped the mobile drawer inside the header's own 76px box. */
.masthead{
  position:sticky;top:0;z-index:80;
  border-bottom:1px solid rgba(255,255,255,.09);
}
.masthead::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:rgba(6,15,38,.82);
  backdrop-filter:saturate(160%) blur(18px);
  -webkit-backdrop-filter:saturate(160%) blur(18px);
}
.masthead .shell{
  position:relative;z-index:1;
  display:flex;align-items:center;gap:clamp(1rem,2.4vw,2.4rem);min-height:76px;
}
/* The drawer is a child of .shell, so the header's own controls need to sit
   above it — otherwise the close button ends up underneath the open menu. */
.masthead .brand,.masthead .burger{position:relative;z-index:80}
.brand{display:flex;align-items:center;flex:none;margin-right:auto}
.brand img{height:clamp(30px,3.4vw,40px);width:auto}

.nav{display:flex;align-items:center;gap:clamp(.9rem,1.7vw,1.9rem)}
.nav-cta{flex:none;margin-left:.4rem}
/* The CTA lives inside .nav so it lands in the mobile drawer, but it is a
   button, not a nav link — .nav a must not repaint it. Pale blue at weight
   500 on gold measured 1.3:1. */
.nav .nav-cta{color:var(--navy-900);font-weight:700}
.nav .nav-cta:hover{color:var(--navy-900)}
.nav .nav-cta::after{display:none}
.nav a{
  position:relative;
  font-size:.85rem;font-weight:500;letter-spacing:.005em;
  color:var(--d-2);padding-block:.5rem;
  transition:color .25s var(--ease);
}
.nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:2px;height:1px;
  background:var(--gold);transition:right .38s var(--ease-out);
}
.nav a:hover{color:#fff}
.nav a:hover::after{right:0}
.nav a[aria-current="page"]{color:#fff}
.nav a[aria-current="page"]::after{right:0}

.langs{display:flex;align-items:center;gap:.15rem;margin-left:.4rem;flex:none}
.langs a{
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.1em;
  padding:.34rem .5rem;border-radius:4px;color:var(--d-3);transition:.25s;
}
.langs a:hover{color:#fff;background:rgba(255,255,255,.08)}
.langs a[aria-current]{color:var(--navy-900);background:var(--gold);font-weight:600}

.burger{display:none;flex:none;width:44px;height:44px;align-items:center;justify-content:center;border-radius:8px;border:1px solid rgba(255,255,255,.16)}
.burger span{display:block;width:19px;height:1.5px;background:#fff;position:relative;transition:.3s var(--ease)}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:19px;height:1.5px;background:#fff;transition:.3s var(--ease)}
.burger span::before{top:-6px}
.burger span::after{top:6px}
body.menu-open .burger span{background:transparent}
body.menu-open .burger span::before{top:0;transform:rotate(45deg)}
body.menu-open .burger span::after{top:0;transform:rotate(-45deg)}

.scrim{position:fixed;inset:0;background:rgba(4,12,28,.72);backdrop-filter:blur(4px);opacity:0;visibility:hidden;transition:.35s;z-index:78}
body.menu-open .scrim{opacity:1;visibility:visible}
body.menu-open{overflow:hidden}

/* ---------------------------------------------------------- 7. BUTTONS */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.95rem 1.7rem;border-radius:100px;
  font-size:.86rem;font-weight:700;letter-spacing:.02em;
  transition:transform .32s var(--ease-out),box-shadow .32s var(--ease),background .3s,color .3s,border-color .3s;
  position:relative;overflow:hidden;white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn .arw{transition:transform .34s var(--ease-out)}
.btn:hover .arw{transform:translateX(4px)}

.btn-gold{background:linear-gradient(135deg,var(--gold-300),var(--gold) 55%,var(--gold-600));color:var(--navy-900);box-shadow:0 8px 26px rgba(255,196,31,.28)}
.btn-gold:hover{box-shadow:0 14px 40px rgba(255,196,31,.4)}

.btn-ghost{border:1px solid rgba(255,255,255,.26);color:#fff}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold);background:rgba(255,196,31,.06)}

.btn-ink{background:var(--navy-900);color:#fff;box-shadow:var(--sh-1)}
.btn-ink:hover{background:var(--navy-800);box-shadow:var(--sh-2)}

.btn-line{border:1px solid var(--hair-l);color:var(--t-1)}
.btn-line:hover{border-color:var(--navy-800);background:var(--white)}

/* inline text link with a drawn underline */
.logo-plate{transition:box-shadow .3s var(--ease),transform .3s var(--ease)}
a.logo-plate:hover{box-shadow:var(--sh-2);transform:translateY(-2px)}
/* visible to screen readers only — carries "opens in a new tab" */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.tlink{
  display:inline-flex;align-items:center;gap:.45rem;position:relative;
  font-weight:600;font-size:.88rem;color:var(--navy-700);padding-bottom:2px;
}
.band-dark .tlink{color:var(--gold)}
.tlink::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:currentColor;transition:right .4s var(--ease-out)}
.tlink:hover::after{right:0}
.tlink .arw{transition:transform .34s var(--ease-out)}
.tlink:hover .arw{transform:translateX(4px)}

/* ------------------------------------------------------------ 8. HERO */
.hero{
  position:relative;min-height:clamp(600px,92vh,940px);
  display:flex;align-items:center;
  padding-block:clamp(5rem,10vh,9rem);
  overflow:hidden;
}
.hero-grid{
  position:relative;z-index:3;
  display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(2rem,5vw,5rem);align-items:center;
}
.hero-kicker{
  display:inline-flex;align-items:center;gap:.75rem;
  padding:.5rem 1rem .5rem .6rem;border-radius:100px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.05);
  backdrop-filter:blur(8px);
  font-family:var(--f-mono);font-size:.63rem;letter-spacing:.19em;text-transform:uppercase;
  color:var(--d-2);margin-bottom:1.9rem;
}
.hero-kicker b{
  display:inline-flex;align-items:center;padding:.2rem .5rem;border-radius:100px;
  background:var(--gold);color:var(--navy-900);font-weight:700;letter-spacing:.12em;font-size:.6rem;
}
.hero h1{margin-bottom:1.5rem}
.hero .lede{margin-bottom:2.4rem;max-width:54ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:.85rem}

/* the emblem panel on the right of the hero */
.emblem{
  position:relative;aspect-ratio:1;width:100%;max-width:520px;margin-inline:auto;
  display:grid;place-items:center;
}

/* --- instrument bezel: concentric rings, fine ticks, a slow sweep --- */
.emblem-ring{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(255,255,255,.13)}
.emblem-ring:nth-child(2){inset:11%;border-color:rgba(255,196,31,.20);border-style:dashed;animation:spin-slow 90s linear infinite}
.emblem-ring:nth-child(3){inset:23%;border-color:rgba(255,255,255,.08)}
.emblem-ring:nth-child(4){inset:35%;border-color:rgba(255,255,255,.06)}

/* engraved tick marks around the outer bezel */
.emblem-ticks{
  position:absolute;inset:1%;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,
    rgba(255,255,255,.22) 0deg .22deg, transparent .22deg 4deg);
  -webkit-mask:radial-gradient(circle, transparent 0 47.4%, #000 47.7% 50%, transparent 50.1%);
  mask:radial-gradient(circle, transparent 0 47.4%, #000 47.7% 50%, transparent 50.1%);
  animation:spin-slow 420s linear infinite;
}
/* four cardinal marks — a quiet compass, not a dial face */
.emblem-ticks::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,
    rgba(255,196,31,.42) 0deg .32deg, transparent .32deg 90deg);
  -webkit-mask:radial-gradient(circle, transparent 0 45.4%, #000 45.7% 50%, transparent 50.1%);
  mask:radial-gradient(circle, transparent 0 45.4%, #000 45.7% 50%, transparent 50.1%);
}

/* a soft light that drifts around the dial — no hard edge anywhere */
.emblem-sweep{
  position:absolute;inset:4%;border-radius:50%;
  background:conic-gradient(from 0deg,
    rgba(255,214,110,.16) 0deg,
    rgba(255,196,31,.09) 26deg,
    rgba(46,125,224,.07) 70deg,
    rgba(46,125,224,.02) 130deg,
    transparent 210deg, transparent 340deg,
    rgba(255,214,110,.07) 360deg);
  -webkit-mask:radial-gradient(circle, transparent 0 22%, rgba(0,0,0,.7) 42%, #000 72%, transparent 100%);
  mask:radial-gradient(circle, transparent 0 22%, rgba(0,0,0,.7) 42%, #000 72%, transparent 100%);
  filter:blur(14px);
  animation:spin-slow 44s linear infinite;
}

/* two gilt arcs turning against each other */
.emblem-arc,.emblem-arc-2{
  position:absolute;border-radius:50%;border:1px solid transparent;
  -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
.emblem-arc{
  inset:-5%;
  background:conic-gradient(from 0deg,transparent 0deg,rgba(255,196,31,.8) 34deg,transparent 78deg) border-box;
  animation:spin-slow 26s linear infinite;
}
.emblem-arc-2{
  inset:17%;
  background:conic-gradient(from 0deg,transparent 0deg,rgba(143,193,247,.55) 22deg,transparent 58deg) border-box;
  animation:spin-slow 34s linear reverse infinite;
}
@keyframes spin-slow{to{transform:rotate(360deg)}}

/* the quiet centre: a breathing glow with the wheat-grain lozenge */
.emblem-core{
  position:relative;z-index:3;width:30%;aspect-ratio:1;border-radius:50%;
  display:grid;place-items:center;
  background:radial-gradient(circle at 50% 47%,
    rgba(255,222,138,.34) 0%, rgba(255,196,31,.10) 40%, transparent 66%);
  animation:emblem-breathe 7s ease-in-out infinite;
}
.emblem-core::before{
  content:"";width:13%;aspect-ratio:1;background:var(--gold);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
  box-shadow:0 0 18px 5px rgba(255,196,31,.45);
}
@keyframes emblem-breathe{
  0%,100%{transform:scale(1);opacity:.92}
  50%{transform:scale(1.06);opacity:1}
}

/* points tracing the dial at three radii */
.emblem-orbit{position:absolute;inset:0}
.emblem-orbit:nth-of-type(1){animation:spin-slow 38s linear infinite}
.emblem-orbit:nth-of-type(2){animation:spin-slow 62s linear reverse infinite}
.emblem-orbit b{
  position:absolute;top:50%;left:50%;width:5px;height:5px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 12px 3px rgba(255,196,31,.5);
}
.emblem-orbit b:nth-child(1){transform:translate(-50%,-50%) rotate(0deg) translateX(min(46vw,238px))}
.emblem-orbit b:nth-child(2){transform:translate(-50%,-50%) rotate(137deg) translateX(min(40vw,205px));opacity:.6}
.emblem-orbit b:nth-child(3){transform:translate(-50%,-50%) rotate(255deg) translateX(min(34vw,170px));opacity:.38}

/* ------------------------------------------------------- 9. STAT STRIP */
.stats{
  position:relative;z-index:3;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  border-top:1px solid var(--hair-d);
}
.stat{padding:clamp(1.6rem,3vw,2.6rem) clamp(1rem,2vw,2rem);border-right:1px solid var(--hair-d);position:relative}
.stat:last-child{border-right:0}
.stat-n{
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(2.2rem,1.2rem + 2.9vw,3.6rem);
  line-height:1;color:var(--gold);margin-bottom:.55rem;
  letter-spacing:-.02em;
}
.stat-l{font-size:.82rem;line-height:1.5;color:var(--d-2)}
.band-paper-2 .stat,.band-paper-3 .stat{border-color:var(--hair-l)}
.band-paper-2 .stats,.band-paper-3 .stats{border-color:var(--hair-l)}
.band-paper-2 .stat-n,.band-paper-3 .stat-n{color:var(--navy-700)}
.band-paper-2 .stat-l,.band-paper-3 .stat-l{color:var(--t-2)}

/* --------------------------------------------------------- 10. CARDS */
.grid{display:grid;gap:clamp(1rem,1.8vw,1.7rem)}
.g-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g-3{grid-template-columns:repeat(auto-fit,minmax(272px,1fr))}
.g-4{grid-template-columns:repeat(auto-fit,minmax(226px,1fr))}
/* Hard column counts, for sets whose size is fixed and should stay balanced
   (six briefs read as 3+3, not 4+2). */
.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:940px){.cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.cols-3{grid-template-columns:minmax(0,1fr)}}

.card{
  position:relative;padding:clamp(1.6rem,2.6vw,2.4rem);
  border-radius:var(--r-md);
  background:var(--white);
  border:1px solid var(--hair-l);
  box-shadow:var(--sh-1);
  transition:transform .45s var(--ease-out),box-shadow .45s var(--ease),border-color .35s;
  overflow:hidden;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:rgba(10,23,48,.2)}
.card h2,.card h3{font-size:var(--fs-h3);margin-bottom:.7rem;font-family:var(--f-display);font-weight:600;letter-spacing:-.015em}
.card p{color:var(--t-2);font-size:.96rem;margin-bottom:0}
.card p + p{margin-top:.75rem}

/* numbered card */
.card-n::before{
  content:attr(data-n);
  position:absolute;top:1.1rem;right:1.3rem;
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.12em;
  color:var(--t-3);opacity:1;
}
/* gold top-edge that draws on hover */
.card-edge::after{
  content:"";position:absolute;left:0;top:0;height:2px;width:0;
  background:linear-gradient(90deg,var(--gold),var(--gold-600));
  transition:width .55s var(--ease-out);
}
.card-edge:hover::after{width:100%}

/* glass card on dark bands */
.card-glass{
  background:linear-gradient(155deg,rgba(255,255,255,.085),rgba(255,255,255,.028));
  border:1px solid rgba(255,255,255,.13);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 20px 50px rgba(0,0,0,.28);
  color:var(--d-1);
}
.card-glass:hover{border-color:rgba(255,196,31,.35);box-shadow:0 26px 64px rgba(0,0,0,.36)}
.card-glass h3{color:#fff}
.card-glass p{color:var(--d-2)}

/* institutional corner brackets */
.bracket{position:relative}
.bracket::before,.bracket::after{
  content:"";position:absolute;width:14px;height:14px;pointer-events:none;
  border-color:var(--gold);opacity:.75;
}
.bracket::before{top:10px;left:10px;border-top:1px solid;border-left:1px solid}
.bracket::after{bottom:10px;right:10px;border-bottom:1px solid;border-right:1px solid}

/* ------------------------------------------------------- 11. FEATURES */
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:clamp(2rem,4.5vw,4.5rem);
  /* Both columns start on the same line, full stop. A panel is read by its
     border and a text column by its first line, and with no inset those two
     coincide — which is what the eye checks. Earlier this carried measured
     paddings that matched first baselines instead; that pushed the text column
     down and left every card looking lifted. */
  align-items:start}
/* A panel insets its first line by its own padding, so a bare column beside it
   would start higher. These give the bare column the identical inset, and are
   dropped once the split stacks. Values are measured, not guessed. */
/* A panel beside a text column aligns by its BORDER, not by its first baseline —
   the border is what the eye reads as the start of the block. align-items:start
   already does that, so these carry no inset; only the text|text pairs below
   need a measured nudge. */
.align-deflist,.align-deflist-p,.align-card,.align-callout{padding-top:0}
.align-nudge,.align-nudge-lg{padding-top:0}
@media (max-width:760px){
  .align-deflist,.align-deflist-p,.align-card,.align-callout,.align-nudge,.align-nudge-lg{padding-top:0}
}
.split-head{position:relative}

.deflist{display:grid;gap:1px;background:var(--hair-l);border:1px solid var(--hair-l);border-radius:var(--r-md);overflow:hidden}
.deflist > div{background:var(--white);padding:1.5rem 1.6rem;transition:background .3s}
.deflist > div:hover{background:linear-gradient(100deg,#fff,rgba(255,196,31,.06))}
.deflist dt{font-family:var(--f-mono);font-size:var(--fs-micro);letter-spacing:.17em;text-transform:uppercase;color:var(--t-1);margin-bottom:.4rem}
.deflist dd{margin:0;font-size:1rem;color:var(--t-2);line-height:1.62}
.band-dark .deflist{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.12)}
.band-dark .deflist > div{background:rgba(8,22,52,.72)}
.band-dark .deflist dd{color:var(--d-2)}

/* checklist with gold wheat-tick */
.checks{display:grid;gap:.85rem}
.checks li{position:relative;padding-left:1.95rem;font-size:1rem;color:var(--t-2);line-height:1.62}
.checks li::before{
  content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;
  background:var(--gold);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
}
.band-dark .checks li{color:var(--d-2)}

.plainlist{display:grid;gap:.6rem}
.plainlist li{position:relative;padding-left:1.35rem;font-size:.9rem;color:var(--t-2)}
.plainlist li::before{content:"—";position:absolute;left:0;color:var(--gold-600)}
.band-dark .plainlist li{color:var(--d-2)}
.plainlist a{border-bottom:1px solid rgba(10,23,48,.2);transition:border-color .25s,color .25s}
.plainlist a:hover{color:var(--navy-700);border-color:var(--navy-700)}

/* numbered process steps */
.steps{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:clamp(1.4rem,2.6vw,2.4rem);counter-reset:st;position:relative;
}
.step{position:relative;padding-top:4.6rem;counter-increment:st}
/* big display numeral */
.step::before{
  content:counter(st,decimal-leading-zero);
  position:absolute;top:-.35rem;left:0;
  font-family:var(--f-display);font-weight:600;font-size:3.1rem;line-height:1;
  color:transparent;
  -webkit-text-stroke:1px rgba(232,168,0,.75);
  letter-spacing:-.02em;
}
/* the connecting rail with a node */
.step::after{
  content:"";position:absolute;top:3.55rem;left:0;right:calc(-1 * clamp(1.4rem,2.6vw,2.4rem));height:1px;
  background:linear-gradient(90deg,var(--gold) 0 10px,rgba(10,23,48,.14) 10px);
}
.step:last-child::after{right:0}
.band-dark .step::after{background:linear-gradient(90deg,var(--gold) 0 10px,rgba(255,255,255,.16) 10px)}
.band-dark .step::before{-webkit-text-stroke-color:rgba(255,196,31,.85)}
.step h3{font-size:1.06rem;font-weight:700;margin-bottom:.55rem;letter-spacing:-.005em}
.step p{font-size:.93rem;color:var(--t-2);margin:0}
.band-dark .step p{color:var(--d-2)}

/* ---------------------------------------------------------- 12. PEOPLE */
.people{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(1.1rem,2.2vw,1.9rem)}
.person{position:relative;display:block;border-radius:var(--r-md);overflow:hidden;background:var(--navy-900);isolation:isolate}
.person img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform .8s var(--ease-out),filter .6s;filter:saturate(.92) contrast(1.02)}
.person:hover img{transform:scale(1.045);filter:saturate(1) contrast(1.05)}
.person figcaption{
  position:absolute;inset:auto 0 0 0;z-index:2;
  padding:3.2rem 1.15rem 1.15rem;
  background:linear-gradient(to top,
    rgba(4,12,28,.97) 0%,
    rgba(4,12,28,.92) 28%,
    rgba(4,12,28,.72) 58%,
    rgba(4,12,28,.28) 82%,
    transparent 100%);
}
.person-n{font-family:var(--f-display);font-size:1.22rem;font-weight:600;color:#fff;line-height:1.15;margin-bottom:.28rem}
.person-r{
  font-family:var(--f-mono);font-size:.63rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);display:block;line-height:1.5;
  /* two lines are always reserved, so a long title never lifts the name */
  min-height:1.9rem;
}
.person::after{
  content:"";position:absolute;inset:0;z-index:3;border-radius:var(--r-md);
  border:1px solid transparent;transition:border-color .4s;
}
.person:hover::after{border-color:rgba(255,196,31,.5)}

/* single bio hero */
.bio{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:clamp(1.6rem,4vw,3.4rem);align-items:center}
.bio-photo{border-radius:var(--r-md);overflow:hidden;box-shadow:var(--sh-d);position:relative}
.bio-photo img{width:100%;aspect-ratio:4/5;object-fit:cover}
.bio-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.2rem}
.tag{
  font-family:var(--f-mono);font-size:.63rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.4rem .75rem;border-radius:100px;
  border:1px solid rgba(255,255,255,.2);color:var(--d-2);
}
.band-paper-2 .tag,.band-paper-3 .tag{border-color:var(--hair-l);color:var(--t-2)}

/* ------------------------------------------------------ 13. MEMBER MARKS */
/* typographic member cards — monogram initials, no third-party logo files */
.marks{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(1rem,2vw,1.6rem)}
.mark{
  position:relative;padding:clamp(1.7rem,2.8vw,2.4rem);border-radius:var(--r-md);
  border:1px solid var(--hair-l);
  background:linear-gradient(158deg,#fff 0%,#fff 55%,rgba(238,243,251,.9) 100%);
  transition:transform .45s var(--ease-out),box-shadow .45s,border-color .35s;
  overflow:hidden;
}
.mark:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:rgba(10,23,48,.18)}
.mark-i{
  font-family:var(--f-display);font-size:clamp(3rem,4.6vw,4.1rem);font-weight:600;line-height:.9;
  color:var(--navy-800);letter-spacing:-.045em;margin-bottom:1.2rem;
  padding-bottom:1.1rem;position:relative;
}
.mark-i::after{
  content:"";position:absolute;left:0;bottom:0;width:44px;height:2px;
  background:linear-gradient(90deg,var(--gold),rgba(255,196,31,0));
}
.mark-n{font-size:1.1rem;font-weight:700;margin-bottom:.35rem;color:var(--t-1);letter-spacing:-.005em}
.mark-d{font-size:.93rem;color:var(--t-2);line-height:1.6;margin:0}
.mark::after{
  content:"";position:absolute;right:-30px;bottom:-30px;width:110px;height:110px;
  background:radial-gradient(circle at 30% 30%,rgba(255,196,31,.18),transparent 70%);
  transition:transform .6s var(--ease-out);
}
.mark:hover::after{transform:scale(1.35)}

/* ------------------------------------------- 13b. LOGO CARDS & STRIPS */
/* Member logos are dark artwork on transparency — they only read on light
   plates, so they always sit on white, never directly on a dark band. */
.logos{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:clamp(1rem,2vw,1.6rem)}

.logo-card{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  border-radius:var(--r-md);background:var(--white);
  border:1px solid var(--hair-l);box-shadow:var(--sh-1);
  transition:transform .45s var(--ease-out),box-shadow .45s var(--ease),border-color .35s;
}
.logo-card:hover{transform:translateY(-5px);box-shadow:var(--sh-2);border-color:rgba(10,23,48,.2)}
.logo-card::after{
  content:"";position:absolute;left:0;top:0;height:2px;width:0;z-index:3;
  background:linear-gradient(90deg,var(--gold),var(--gold-600));
  transition:width .55s var(--ease-out);
}
.logo-card:hover::after{width:100%}

.logo-plate{
  display:grid;place-items:center;
  padding:clamp(1.7rem,3vw,2.5rem) clamp(1.4rem,2.6vw,2.2rem);
  min-height:clamp(126px,14vw,172px);
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(46,125,224,.06), transparent 70%),
    linear-gradient(160deg,#fff 0%,#fff 55%,rgba(238,243,251,.85) 100%);
  border-bottom:1px solid var(--hair-l);
}
.logo-plate img{
  max-height:clamp(44px,5.4vw,68px);width:auto;max-width:100%;
  object-fit:contain;
  transition:transform .5s var(--ease-out);
}
.logo-card:hover .logo-plate img{transform:scale(1.035)}

.logo-body{padding:clamp(1.15rem,2vw,1.55rem)}
.logo-name{font-size:1.06rem;font-weight:700;color:var(--t-1);margin-bottom:.35rem;letter-spacing:-.005em}
.logo-desc{font-size:.93rem;color:var(--t-2);line-height:1.6;margin:0}
.logo-tag{
  display:inline-block;margin-bottom:.7rem;
  font-family:var(--f-mono);font-size:var(--fs-micro);letter-spacing:.18em;text-transform:uppercase;
  color:var(--t-2);
}

/* dense strip for sub-brands */
.logo-strip{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));
  gap:1px;background:var(--hair-l);
  border:1px solid var(--hair-l);border-radius:var(--r-md);overflow:hidden;
}
.logo-strip figure{
  margin:0;background:var(--white);display:grid;place-items:center;
  padding:1.5rem 1.15rem;min-height:114px;transition:background .35s;
}
.logo-strip figure:hover{background:linear-gradient(150deg,#fff,rgba(255,196,31,.09))}
.logo-strip img{
  max-height:44px;max-width:100%;width:auto;object-fit:contain;
  filter:saturate(.92);transition:filter .35s,transform .45s var(--ease-out);
}
.logo-strip figure:hover img{filter:saturate(1);transform:scale(1.05)}

/* a single hero logo, for the strategic-partner page */
.logo-hero{
  display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);
  gap:clamp(1.6rem,3.4vw,3rem);align-items:center;
}
.logo-hero .logo-plate{border-bottom:0;border-radius:var(--r-md);border:1px solid var(--hair-l);min-height:190px}
@media (max-width:760px){.logo-hero{grid-template-columns:1fr}}

/* ---------------------------------------------------------- 14. TABLES */
.table-wrap{
  overflow-x:auto;border-radius:var(--r-md);
  border:1px solid var(--hair-l);
  -webkit-overflow-scrolling:touch;
  background:
    linear-gradient(to right, var(--white) 40%, rgba(255,255,255,0)) left / 46px 100% no-repeat local,
    linear-gradient(to left,  var(--white) 40%, rgba(255,255,255,0)) right / 46px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(10,23,48,.16), transparent) left / 15px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(10,23,48,.16), transparent) right / 15px 100% no-repeat scroll,
    var(--white);
}
.band-dark .table-wrap{border-color:rgba(255,255,255,.13);background:rgba(8,22,52,.72);backdrop-filter:blur(10px)}
table.data{font-size:.9rem;min-width:520px}
table.data thead th{
  background:var(--navy-900);color:#fff;
  font-family:var(--f-mono);font-size:var(--fs-micro);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  padding:.85rem .95rem;text-align:left;white-space:nowrap;
}
table.data thead th:not(:first-child){text-align:right}
table.data td{padding:.8rem .95rem;border-top:1px solid var(--hair-l);color:var(--t-2)}
table.data td:not(:first-child){text-align:right;font-variant-numeric:tabular-nums;font-family:var(--f-mono);font-size:.84rem;color:var(--t-1)}
table.data tbody tr{transition:background .25s}
table.data tbody tr:hover{background:var(--paper-2)}
table.data td:first-child{font-weight:600;color:var(--t-1)}
.band-dark table.data td{border-color:rgba(255,255,255,.1);color:var(--d-2)}
.band-dark table.data td:first-child{color:#fff}
.band-dark table.data td:not(:first-child){color:var(--gold-300)}
.band-dark table.data tbody tr:hover{background:rgba(255,255,255,.045)}
.table-note{font-size:.78rem;color:var(--t-3);margin-top:.7rem;line-height:1.55}
.band-dark .table-note{color:var(--d-3)}

/* --------------------------------------------------------- 15. CALLOUT */
.callout{
  position:relative;padding:clamp(1.3rem,2.2vw,1.8rem) clamp(1.4rem,2.4vw,2rem);
  border-radius:var(--r-md);
  background:linear-gradient(135deg,rgba(255,196,31,.10),rgba(255,196,31,.03));
  border:1px solid rgba(255,196,31,.30);
}
.callout::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:2px;background:var(--gold);border-radius:2px}
.callout p:last-child{margin-bottom:0}
.callout p{color:var(--t-2)}
.band-dark .callout{background:linear-gradient(135deg,rgba(255,196,31,.13),rgba(255,196,31,.04));border-color:rgba(255,196,31,.3)}
.band-dark .callout p{color:var(--d-1)}
.callout-title{font-weight:700;color:var(--t-1);margin-bottom:.4rem;display:block}
.band-dark .callout-title{color:#fff}

/* ------------------------------------------------------ 16. PAGE BANNER */
.banner{position:relative;overflow:hidden;padding-block:clamp(4.5rem,4rem + 6vw,8.5rem) clamp(3rem,2.4rem + 3.6vw,5rem)}
.crumbs{
  display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--d-3);margin-bottom:1.6rem;
}
.crumbs a{color:var(--d-3);transition:color .25s}
.crumbs a:hover{color:var(--gold)}
.crumbs span{opacity:.45}
.banner h1{margin-bottom:1.2rem;max-width:20ch}
.banner .lede{max-width:60ch}

/* ------------------------------------------------------- 17. ARTICLE */
.article{display:grid;grid-template-columns:minmax(0,230px) minmax(0,1fr);gap:clamp(2rem,4.5vw,4.5rem);align-items:start}
.toc{position:sticky;top:110px}
.toc-h{font-family:var(--f-mono);font-size:var(--fs-micro);letter-spacing:.2em;text-transform:uppercase;color:var(--t-1);margin-bottom:1rem}
.toc ul{display:grid;gap:.15rem;border-left:1px solid var(--hair-l)}
.toc a{display:block;padding:.5rem .9rem;font-size:.84rem;color:var(--t-2);border-left:2px solid transparent;margin-left:-1px;transition:.28s var(--ease);line-height:1.45}
.toc a:hover{color:var(--navy-700)}
.toc a[aria-current]{color:var(--navy-800);border-left-color:var(--gold);font-weight:600}

.prose h2{font-family:var(--f-display);font-size:clamp(1.7rem,1.2rem + 1.7vw,2.5rem);font-weight:600;margin:var(--sp-8) 0 var(--sp-4);scroll-margin-top:120px;max-width:24ch}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1.15rem;font-weight:700;margin:var(--sp-6) 0 var(--sp-3)}
.prose p{max-width:72ch;color:var(--t-2)}
.prose > ul,.prose > ol{margin-bottom:var(--sp-5);max-width:72ch}
.prose .table-wrap{margin:var(--sp-6) 0;max-width:100%}
.prose .callout{margin:var(--sp-6) 0;max-width:72ch}
.prose .checks,.prose .plainlist{margin-bottom:var(--sp-5);max-width:72ch}

.summary{
  padding:clamp(1.4rem,2.4vw,2rem);border-radius:var(--r-md);
  background:linear-gradient(150deg,var(--white),var(--paper-2));
  border:1px solid var(--hair-l);margin-bottom:var(--sp-7);
}
.summary .eyebrow{margin-bottom:.8rem}
.summary p{margin-bottom:0;color:var(--t-2);font-size:.97rem}

.meta-line{
  display:flex;flex-wrap:wrap;gap:.5rem 1.2rem;align-items:center;
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--d-3);margin-top:1.6rem;
}
.meta-line b{color:var(--gold);font-weight:500}

.back{
  display:inline-flex;align-items:center;gap:.5rem;margin-bottom:var(--sp-6);
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--t-3);
  transition:color .25s;
}
.back:hover{color:var(--navy-700)}
.back .arw{transition:transform .3s var(--ease-out)}
.back:hover .arw{transform:translateX(-4px)}

/* ---------------------------------------------------------- 18. CTA */
.cta{
  position:relative;overflow:hidden;border-radius:var(--r-lg);
  padding:clamp(2.2rem,4vw,4rem);
  background:
    radial-gradient(100% 120% at 8% 0%, rgba(46,125,224,.4), transparent 58%),
    radial-gradient(90% 100% at 100% 100%, rgba(255,196,31,.16), transparent 60%),
    linear-gradient(150deg,var(--navy-900),var(--ink));
  color:var(--d-1);
  box-shadow:var(--sh-d);
}
.cta-grid{position:relative;z-index:3;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(1.6rem,3vw,3rem);align-items:center}
.cta h2{color:#fff;margin-bottom:.9rem}
.cta p{color:var(--d-2);margin-bottom:1.6rem}
.contact-dl{display:grid;gap:1rem}
.contact-dl > div{display:grid;gap:.2rem}
.contact-dl dt{font-family:var(--f-mono);font-size:var(--fs-micro);letter-spacing:.17em;text-transform:uppercase;color:var(--gold)}
.contact-dl dd{margin:0;color:var(--d-1);font-size:.98rem}
.contact-dl a:hover{color:var(--gold)}

/* --------------------------------------------------------- 19. FOOTER */
.foot{position:relative;overflow:hidden;background:var(--ink);color:var(--d-2);padding-block:clamp(3.4rem,3rem + 3vw,5.5rem) 2rem}
.foot-grid{position:relative;z-index:3;display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:clamp(1.8rem,3.4vw,3.4rem)}
.foot-brand img{height:44px;width:auto;margin-bottom:1.3rem}
.foot-brand p{font-size:.86rem;color:var(--d-3);line-height:1.65;max-width:38ch}
.foot h4{font-family:var(--f-mono);font-size:var(--fs-micro);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:1.15rem;font-weight:500}
.foot ul{display:grid;gap:.65rem}
.foot ul a{font-size:.87rem;color:var(--d-2);transition:color .25s,padding-left .25s}
.foot ul a:hover{color:#fff;padding-left:4px}
.foot-base{
  position:relative;z-index:3;
  margin-top:clamp(2.4rem,4vw,3.6rem);padding-top:1.6rem;
  border-top:1px solid rgba(255,255,255,.09);
  display:flex;flex-wrap:wrap;gap:.8rem 1.6rem;justify-content:space-between;align-items:center;
  font-size:.78rem;color:var(--d-3);
}
.foot-base nav{display:flex;flex-wrap:wrap;gap:1.4rem}
.foot-base a:hover{color:var(--gold)}

/* -------------------------------------------------------- 20. MOTION */
.rv{opacity:0;transform:translateY(22px);transition:opacity .85s var(--ease-out),transform .85s var(--ease-out)}
.rv.in{opacity:1;transform:none}
/* A transformed ancestor becomes the containing block for position:fixed, which
   would unpin any watermark inside it for the length of the reveal. Blocks that
   carry a watermark therefore reveal with opacity alone. main.js tags them; the
   :has() rule covers the same case before the script runs. */
.rv-flat,.rv:has(.wm){transform:none!important}
.rv-1{transition-delay:.07s}.rv-2{transition-delay:.14s}.rv-3{transition-delay:.21s}
.rv-4{transition-delay:.28s}.rv-5{transition-delay:.35s}.rv-6{transition-delay:.42s}

/* headline mask-wipe */
.wipe{display:block;overflow:hidden}
.wipe > span{display:block;transform:translateY(105%);transition:transform 1.05s var(--ease-out)}
.rv.in .wipe > span,.wipe.in > span{transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
  .wipe > span{transform:none}
}
@media print{
  .rv{opacity:1!important;transform:none!important}
  .wipe > span{transform:none!important}
  .masthead,.ticker,.aurora,.wm{display:none!important}
}

/* ---------------------------------------------------- 21. RESPONSIVE */
@media (max-width:1080px){
  .hero-grid{grid-template-columns:1fr;gap:3rem}
  .emblem{max-width:380px}
  .article{grid-template-columns:1fr;gap:2.2rem}
  .toc{position:static;padding:1.15rem;border:1px solid var(--hair-l);border-radius:var(--r-md);background:var(--white)}
  .toc ul{border-left:0}
  .toc a{border-left:0;padding-inline:0}
  .toc a[aria-current]{border-left:0;color:var(--navy-800)}
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .burger{display:flex}
  .nav{
    position:fixed;inset:0 0 0 auto;width:min(84vw,340px);z-index:79;
    flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:.2rem;
    /* Top clearance follows the header; the rest of the spacing scales with the
       viewport height so the whole menu fits on a short phone instead of
       pushing the call-to-action below the fold. */
    padding:clamp(5.4rem,calc(76px + 2.4vh),6.5rem) 1.8rem clamp(1.2rem,3vh,2rem);
    overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    background:linear-gradient(170deg,var(--navy-900),var(--ink));
    border-left:1px solid rgba(255,255,255,.1);
    transform:translateX(100%);transition:transform .45s var(--ease-out);
    overflow-y:auto;
  }
  body.menu-open .nav{transform:none}
  .nav a{font-size:1.05rem;padding-block:clamp(.52rem,1.5vh,.85rem);width:100%;border-bottom:1px solid rgba(255,255,255,.07)}
  .nav a::after{display:none}
  .langs{margin:clamp(.7rem,1.9vh,1.4rem) 0 0}
  .nav-cta{width:100%;margin:clamp(.9rem,2.1vh,1.6rem) 0 0;justify-content:center}
  .bio{grid-template-columns:1fr;gap:1.6rem}
  .bio-photo{max-width:260px}
  .stat{border-right:0;border-bottom:1px solid var(--hair-d)}
  .band-paper-2 .stat,.band-paper-3 .stat{border-bottom-color:var(--hair-l)}
}
@media (max-width:640px){
  .foot-grid{grid-template-columns:1fr}
  .hero{min-height:auto}
  .btn{width:100%}
  .hero-cta{flex-direction:column}
}

/* ---------------------------------------------- 20. ANALYTICS CONSENT */
/* A quiet bar, not a modal: it never blocks the page, and it is removed from
   the layout entirely once a decision is stored. */
.consent{
  position:fixed;left:0;right:0;bottom:0;z-index:120;
  background:rgba(6,15,38,.94);
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  border-top:1px solid rgba(255,196,31,.28);
  box-shadow:0 -18px 50px rgba(0,0,0,.4);
  transform:translateY(100%);
  transition:transform .38s var(--ease-out);
}
.consent.in{transform:none}
.consent[hidden]{display:none}
.consent-in{
  max-width:var(--shell);margin:0 auto;padding:1.15rem var(--gut);
  display:flex;align-items:center;gap:clamp(1rem,3vw,2.6rem);flex-wrap:wrap;
}
.consent-txt{flex:1 1 26rem;min-width:0}
.consent-txt h2{
  font-family:var(--f-mono);font-size:var(--fs-micro);letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold);margin-bottom:.4rem;font-weight:500;
}
.consent-txt p{font-size:.9rem;line-height:1.6;color:var(--d-2);margin:0;max-width:74ch}
.consent-txt a{color:var(--azure-300);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(143,193,247,.5);text-decoration-thickness:1px}
.consent-txt a:hover{color:var(--gold);text-decoration-color:var(--gold)}
.consent-act{display:flex;gap:.7rem;flex:none}
.btn-sm,.btn-ghost-sm{
  padding:.62rem 1.35rem;font-size:.8rem;letter-spacing:.04em;border-radius:var(--r-sm);
}
.btn-ghost-sm{border:1px solid rgba(255,255,255,.28);color:#fff;background:none}
.btn-ghost-sm:hover{border-color:var(--gold);color:var(--gold);background:rgba(255,196,31,.07)}
/* the footer control that reopens the bar, styled as the links beside it */
.linkish{
  background:none;border:0;padding:0;font:inherit;cursor:pointer;
  color:inherit;text-decoration:none;
}
@media (max-width:700px){
  .consent-in{padding:1rem var(--gut) 1.15rem}
  .consent-act{width:100%}
  .consent-act .btn-sm,.consent-act .btn-ghost-sm{flex:1 1 0;justify-content:center}
}

/* Gold reads at 11.9:1 on the navy bands, so the labels keep it there. */
.band-dark .sec-ix,.band-dark .logo-tag,.band-dark .toc-h{color:var(--gold)}
.band-dark .deflist dt{color:var(--gold)}
.band-dark .card-n::before{color:var(--gold);opacity:.9}

/* Touch targets: footer and breadcrumb links were 16px tall on a phone. */
@media (max-width:700px){
  /* the micro labels sit at 11.44px on desktop; give them a 12px floor on a phone */
  :root{--fs-micro:.75rem}
  .foot ul a,.foot-base nav a,.foot-base .linkish,.contact-dl a,.crumbs a,
  .back,.consent-txt a,.callout a[href^="mailto"],main p a[href^="mailto"],.deflist dd a{
    display:inline-block;padding-block:.4rem;min-height:24px;
  }
  .foot ul{gap:.1rem}
  .hero-kicker{font-size:.72rem}
}