/* ============================================================
   The Evolution of Korea — shared stylesheet
   Used by index / team / advisors / sponsorship / about
   No build step. Plain CSS.
   ============================================================ */

:root{
  /* --- dark side: header, hero, the story sequence ---------- */
  --ink:#0A0E15;
  --ink-raised:#141A24;
  --ink-deep:#05070B;

  /* --- light side: every content page ----------------------- */
  --paper:#FAF7F1;
  --paper-raised:#FFFFFF;
  --paper-sink:#F0EBE1;

  /* --- type ------------------------------------------------- */
  --on-dark:#F6F3EC;
  --on-dark-dim:#C3C9D4;
  --on-light:#171A20;
  --on-light-dim:#4E5663;

  /* --- accents, taken off the logo and the tiger map -------- */
  --gold:#D4A537;
  --gold-deep:#A87F1E;
  --gold-soft:#F0CE72;
  --crimson:#C8102E;
  --azure:#0F4C8A;
  --jade:#1B8C7C;
  --amber:#E08A2B;

  --rule-dark:rgba(212,165,55,.30);
  --rule-light:rgba(23,26,32,.14);

  --font-display:"Anton",Impact,"Haettenschweiler","Arial Narrow Bold",sans-serif;
  --font-body:"Source Sans 3",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  --fs-body:1.125rem;
  --fs-small:1rem;
  --lh-body:1.65;

  --radius:4px;
  --tap:44px;
  --header-h:72px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --dur:600ms;

  --pad-x:clamp(1.15rem,4vw,3rem);
  --sec-y:clamp(3.5rem,9vh,7rem);
  --wrap:1180px;

  /* photographs now render in full colour — only a light lift */
  --img-treat:saturate(1.08) contrast(1.04);
  --grain-opacity:.04;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--paper);color:var(--on-light);
  font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{margin:0;line-height:1.05;font-weight:400}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
a{color:inherit}

:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:2px}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--gold);color:var(--ink-deep);padding:.85rem 1.25rem;font-weight:700;text-decoration:none}
.skip:focus{left:.5rem;top:.5rem}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad-x)}
.wrap--narrow{max-width:780px}

/* ============================================================
   DISPLAY TYPE — Anton, matched to the logo lettering
   ============================================================ */
.display{
  font-family:var(--font-display);
  text-transform:uppercase;
  letter-spacing:.005em;
  line-height:.94;
  font-weight:400;
}
.h-hero{font-size:clamp(2.9rem,10vw,7.5rem)}
.h-page{font-size:clamp(2.4rem,6.5vw,4.5rem)}
.h-sec {font-size:clamp(1.9rem,4.6vw,3.1rem)}
.h-card{font-size:clamp(1.35rem,2.4vw,1.75rem)}

.eyebrow{
  font-family:var(--font-body);font-size:var(--fs-small);font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep);margin:0 0 1rem;
}
.eyebrow--on-dark{color:var(--gold)}
.lede{font-size:clamp(1.2rem,2.1vw,1.45rem);line-height:1.5}
.dim{color:var(--on-light-dim)}
.dim-dark{color:var(--on-dark-dim)}

/* ============================================================
   HEADER — logo left, menu right. Dark, because the logo file
   has a solid black background and no alpha channel.
   ============================================================ */
.site-header{
  position:sticky;top:0;z-index:100;
  background:var(--ink);
  border-bottom:1px solid rgba(212,165,55,.22);
}
.site-header__in{
  max-width:var(--wrap);margin-inline:auto;padding:0 var(--pad-x);
  min-height:var(--header-h);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.brand{display:flex;align-items:center;flex:none;text-decoration:none;padding:.5rem 0}
.brand img{height:38px;width:auto}

.nav__list{display:flex;align-items:center;gap:.15rem}
.nav__item{position:relative}
.nav__link{
  display:flex;align-items:center;min-height:var(--tap);
  padding:.5rem .8rem;
  color:var(--on-dark);text-decoration:none;
  font-size:var(--fs-small);font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  border-bottom:2px solid transparent;
  transition:color 180ms var(--ease),border-color 180ms var(--ease);
}
.nav__link:hover{color:var(--gold-soft)}
.nav__link[aria-current="page"]{color:var(--gold);border-bottom-color:var(--gold)}

.nav__group{display:flex;align-items:center}
.nav__caret{
  display:grid;place-items:center;
  width:32px;min-height:var(--tap);
  background:none;border:0;cursor:pointer;color:var(--on-dark);
  padding:0;margin-left:-.5rem;
}
.nav__caret svg{width:11px;height:11px;transition:transform 220ms var(--ease)}
.nav__caret[aria-expanded="true"] svg{transform:rotate(180deg)}
.nav__caret:hover{color:var(--gold-soft)}

.submenu{
  position:absolute;top:100%;left:0;min-width:250px;
  background:var(--ink-raised);
  border:1px solid rgba(212,165,55,.28);
  border-radius:var(--radius);
  padding:.4rem;
  box-shadow:0 18px 40px rgba(0,0,0,.5);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity 200ms var(--ease),transform 200ms var(--ease),visibility 200ms;
}
.nav__item:hover .submenu,
.submenu.is-open{opacity:1;visibility:visible;transform:none}
.submenu a{
  display:block;min-height:var(--tap);
  padding:.65rem .8rem;
  color:var(--on-dark);text-decoration:none;font-size:var(--fs-small);line-height:1.35;
  border-radius:3px;
  transition:background 160ms var(--ease),color 160ms var(--ease);
}
.submenu a:hover{background:rgba(212,165,55,.14);color:var(--gold-soft)}
/* 16px floor applies here too — this audience skews elderly and a
   13px subtitle in a navigation menu is genuinely hard to read */
.submenu__role{display:block;font-size:var(--fs-small);line-height:1.25;color:var(--on-dark-dim);margin-top:.15rem}

.nav-toggle{
  display:none;
  align-items:center;gap:.55rem;
  min-height:var(--tap);padding:.5rem .75rem;
  background:transparent;border:1px solid rgba(212,165,55,.4);border-radius:var(--radius);
  color:var(--on-dark);font-family:var(--font-body);font-size:var(--fs-small);font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;cursor:pointer;
}
.nav-toggle__bars{display:grid;gap:3px}
.nav-toggle__bars span{display:block;width:17px;height:2px;background:currentColor;transition:transform 220ms var(--ease),opacity 220ms var(--ease)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

@media (max-width:900px){
  .nav-toggle{display:inline-flex}
  .nav{
    position:absolute;left:0;right:0;top:100%;
    background:var(--ink);
    border-bottom:1px solid rgba(212,165,55,.25);
    max-height:0;overflow:hidden;
    transition:max-height 320ms var(--ease);
  }
  .nav.is-open{max-height:80vh;overflow-y:auto}
  .nav__list{flex-direction:column;align-items:stretch;gap:0;padding:.5rem var(--pad-x) 1.25rem}
  .nav__item{border-bottom:1px solid rgba(255,255,255,.07)}
  .nav__group{justify-content:space-between}
  .nav__link{flex:1;padding:.9rem .25rem;font-size:1.0625rem}
  .nav__caret{width:var(--tap)}
  .submenu{
    position:static;opacity:1;visibility:visible;transform:none;
    min-width:0;background:transparent;border:0;box-shadow:none;padding:0 0 .5rem .75rem;
    display:none;
  }
  .submenu.is-open{display:block}
  .nav__item:hover .submenu:not(.is-open){display:none}
  .submenu a{padding:.6rem .25rem}
}

/* ============================================================
   IMAGE TREATMENT — full colour now, only a scrim for legibility
   ============================================================ */
.tw{position:relative;overflow:hidden;background:var(--ink-raised)}
.tw>picture>img,.tw>img{filter:var(--img-treat);width:100%;height:100%;object-fit:cover}
.tw::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:var(--grain);opacity:var(--grain-opacity);mix-blend-mode:overlay}
.tw--scrim-b::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,var(--ink) 2%,rgba(10,14,21,.72) 32%,rgba(10,14,21,.14) 70%,transparent 100%)}
.tw--scrim-l::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,var(--ink) 3%,rgba(10,14,21,.86) 34%,rgba(10,14,21,.28) 64%,transparent 88%)}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  min-height:calc(100svh - var(--header-h));
  display:flex;align-items:flex-end;
  padding:clamp(3rem,10vh,6rem) 0 clamp(2rem,6vh,3.5rem);
  overflow:hidden;background:var(--ink);
}
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.hero__in{position:relative;z-index:2;width:100%}
.hero__title{color:var(--on-dark);margin:0 0 1.1rem;text-wrap:balance}
.hero__title .gold{color:var(--gold)}
/* mirrors the logo's own hierarchy: THE small, EVOLUTION large,
   OF small, KOREA large — so title and logo read as one system */
.t-sm{font-size:.4em;letter-spacing:.05em;vertical-align:.22em}
.hero__sub{
  font-size:clamp(1.1rem,2.2vw,1.5rem);line-height:1.4;color:var(--on-dark);
  max-width:34ch;margin:0 0 2rem;font-weight:400;
}
.hero__scroll{
  position:absolute;right:var(--pad-x);bottom:1rem;z-index:2;
  color:var(--on-dark-dim);font-size:var(--fs-small);letter-spacing:.2em;text-transform:uppercase;
  display:flex;flex-direction:column;align-items:center;gap:.4rem;
}
.hero__scroll span{display:block;width:1px;height:1.9rem;background:linear-gradient(var(--gold),transparent)}
@media (max-height:600px){
  .hero{min-height:auto;padding-top:2rem;padding-bottom:2rem}
  .hero__sub{margin-bottom:1rem;max-width:60ch}
  .hero__scroll{display:none}
}

/* ============================================================
   STORY SEQUENCE — dark, cinematic, full-colour photographs
   ============================================================ */
.story{background:var(--ink);padding:var(--sec-y) 0;color:var(--on-dark)}
.story__win{width:min(94vw,1180px);margin-inline:auto}

.scene{position:relative;margin-bottom:clamp(2rem,6vh,4.5rem);overflow:hidden;border-radius:var(--radius)}
.scene:last-child{margin-bottom:0}
.scene--bleed{min-height:min(88svh,780px);display:flex;align-items:flex-end}
.scene__media{position:absolute;inset:0;z-index:0}
.scene__body{position:relative;z-index:2;padding:clamp(1.4rem,4vw,3rem);max-width:54ch}
.scene__text{font-size:clamp(1.1rem,1.9vw,1.4rem);line-height:1.5;text-wrap:pretty}
.scene__cap{
  margin-top:1.1rem;padding-top:.85rem;border-top:1px solid var(--rule-dark);
  font-size:var(--fs-small);color:var(--on-dark-dim);
}

.scene--plate{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);
  gap:clamp(1.4rem,4vw,3.5rem);align-items:center;
  background:var(--ink-raised);border:1px solid rgba(255,255,255,.07);
  padding:clamp(1.4rem,4vw,3.5rem);
}
.scene--plate .scene__body{grid-column:1;grid-row:1;padding:0}
.plate{grid-column:2;grid-row:1;width:100%;padding:9px;background:linear-gradient(var(--ink-deep),var(--ink));border:1px solid var(--rule-dark)}
.plate--emperor{max-width:440px}
.plate--alliance{max-width:520px}
/* per-asset display ceilings — half the source pixel width, so
   nothing is ever upscaled on a retina screen.
   haengju 1900px source → 950 · flag 2200px source → 1100 */
.scene--haengju{max-width:950px;margin-inline:auto}

/* scene 4 — skyline full bleed, copy on the right and vertically
   centred against the photograph. */
.scene--city{max-width:1180px;margin-inline:auto;align-items:center;justify-content:flex-end}
.scene--city .scene__body{max-width:min(46ch,52%)}
/* scrim weighted to the right, under the copy */
.tw--scrim-r::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(280deg,var(--ink) 3%,rgba(10,14,21,.88) 34%,rgba(10,14,21,.30) 64%,transparent 88%)}
@media (max-width:900px){
  .scene--city{justify-content:flex-start}
  .scene--city .scene__body{max-width:none}
}

/* FLAG SCENE — copy centred over the image, large, bold, and
   lifted off the flag by a soft dark halo plus a text shadow. */
.scene--flag{max-width:1100px;margin-inline:auto;align-items:center;justify-content:center}
.scene--flag .scene__body{
  max-width:min(94%,860px);margin-inline:auto;text-align:center;
  position:relative;padding:clamp(1.75rem,4vw,3rem);
}
.scene--flag .scene__body::before{
  /* generous inset so the gradient reaches full transparency well
     inside the box — otherwise it clips and shows a hard seam */
  content:"";position:absolute;inset:-85% -30%;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at center,
    rgba(5,7,11,.90) 0%, rgba(5,7,11,.80) 22%, rgba(5,7,11,.55) 34%, rgba(5,7,11,.22) 44%, transparent 56%);
}
.scene--flag .scene__text{
  font-size:clamp(1.25rem,2.3vw,1.95rem);
  font-weight:700;line-height:1.38;
  text-shadow:0 2px 4px rgba(5,7,11,.95), 0 6px 34px rgba(5,7,11,.9);
}

/* ============================================================
   LIGHT CONTENT SECTIONS
   ============================================================ */
.section{padding:var(--sec-y) 0}
.section--sink{background:var(--paper-sink)}
.section--dark{background:var(--ink);color:var(--on-dark)}
.section--dark .dim{color:var(--on-dark-dim)}

.rule-gold{width:64px;height:4px;background:var(--gold);border:0;margin:0 0 1.5rem}

.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;background:var(--rule-light);border:1px solid var(--rule-light);margin-top:2.5rem}
.facts>div{background:var(--paper);padding:1.35rem 1.4rem}
.facts dt{font-size:var(--fs-small);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:.45rem}
.facts dd{margin:0;font-size:var(--fs-small);line-height:1.5}

/* ============================================================
   CARDS — people, used on team.html and advisors.html
   ============================================================ */
.people{display:grid;gap:clamp(1.25rem,3vw,2rem)}
.people--3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.person{background:var(--paper-raised);border:1px solid var(--rule-light);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.person__pic{width:100%;aspect-ratio:4/5;background:var(--paper-sink)}
.person__pic img{width:100%;height:100%;object-fit:cover;filter:var(--img-treat)}
.person__body{padding:1.4rem;display:flex;flex-direction:column;flex:1}
.person__name{margin-bottom:.3rem}
.person__role{font-size:var(--fs-small);font-weight:700;color:var(--gold-deep);letter-spacing:.03em;line-height:1.35;margin-bottom:.9rem}
.person__sum{font-size:var(--fs-small);line-height:1.55;flex:1}

details{margin-top:1rem}
summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.5rem;min-height:var(--tap);
  font-size:var(--fs-small);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-deep)}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:1.15em;line-height:1}
details[open] summary::after{content:"–"}
summary:hover{color:var(--amber)}
.bio{margin-top:.4rem;padding-top:1rem;border-top:1px solid var(--rule-light);font-size:var(--fs-small);line-height:1.6}
.bio p+p{margin-top:.85rem}
.bio ul{margin-top:.6rem}
.bio li{padding-left:1rem;position:relative;margin-bottom:.3rem}
.bio li::before{content:"";position:absolute;left:0;top:.72em;width:.4rem;height:2px;background:var(--gold)}

/* ============================================================
   CONTENT SLOT — {{DISTRIBUTION_BLOCK}}
   Hidden until the producer supplies approved language, so an
   unfinished token can never appear on a live page.
   To publish: change `none` to `block` on the line below.
   ============================================================ */
.slot{display:none}

/* ============================================================
   PAGE BANNER — the strip under the header on interior pages
   ============================================================ */
.pagehead{background:var(--ink);color:var(--on-dark);padding:clamp(2.5rem,7vh,4.5rem) 0}
.pagehead__title{color:var(--on-dark)}
.pagehead .rule-gold{margin-top:1.25rem}
.pagehead__intro{max-width:62ch;margin-top:1.25rem;color:var(--on-dark-dim);font-size:clamp(1.1rem,1.9vw,1.3rem);line-height:1.5}

/* ============================================================
   PERSON SECTION — name and title on top, photograph one side,
   bio the other, and any remaining paragraphs full width below.
   ============================================================ */
.psection{padding:clamp(2.75rem,7vh,4.5rem) 0;border-top:1px solid var(--rule-light)}
.psection:first-of-type{border-top:0}
.psection:nth-of-type(even){background:var(--paper-sink)}
.psection__head{margin-bottom:clamp(1.5rem,3vw,2.25rem)}
.psection__name{margin-bottom:.5rem}
.psection__role{
  font-size:clamp(1rem,1.5vw,1.15rem);font-weight:700;color:var(--gold-deep);
  letter-spacing:.02em;line-height:1.35;
}
.psection__grid{
  /* 320px keeps every portrait inside its resolution ceiling
     (the smallest source is 800px wide) and stops a tall photo
     opening a large empty gap beside a short bio */
  display:grid;grid-template-columns:minmax(220px,320px) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,3rem);align-items:start;
}
.psection__pic{width:100%}
.psection__pic .tw{aspect-ratio:4/5;border:1px solid var(--rule-light);border-radius:var(--radius)}
.psection__pic img{width:100%;height:100%;object-fit:cover}
.psection__bio p+p{margin-top:1.1rem}
.psection__more{margin-top:clamp(1.25rem,3vw,2rem)}
.psection__more p+p{margin-top:1.1rem}
.psection__more ul{margin-top:.9rem;columns:2;column-gap:2.5rem}
.psection__more li{padding-left:1.05rem;position:relative;margin-bottom:.45rem;break-inside:avoid}
.psection__more li::before{content:"";position:absolute;left:0;top:.72em;width:.42rem;height:2px;background:var(--gold)}
@media (max-width:820px){
  .psection__grid{grid-template-columns:1fr}
  .psection__pic{max-width:340px}
  .psection__more ul{columns:1}
}

/* per-portrait framing, set against each actual photograph */
.p-scaparrotti img{object-position:48% 16%}
.p-tucker img     {object-position:50% 12%}
/* source is now wider than the 4:5 frame, so cover crops the sides,
   not the top — only the horizontal value has any effect here */
.p-heeeun img     {object-position:50% 50%}
.p-garlauskas img {object-position:50% 10%}
.p-seth img       {object-position:44% 22%}
.p-maxwell img    {object-position:50% 12%}
/* cropped to exactly 4:5, so it fills the frame with no crop at all */
.p-lee img        {object-position:50% 50%}
.p-hammond img    {object-position:50% 14%}
.p-winship img    {object-position:50% 14%}

/* ============================================================
   CONTACT LINKS — mailto: and tel: are the links a visitor
   actually taps to reach the production. As inline text they
   render ~23px tall, well under the 44px tap target, which is
   the worst place on the site to be hard to hit on a phone.
   ============================================================ */
a[href^="mailto:"],a[href^="tel:"]{
  display:inline-block;
  padding:.72rem 0;
  line-height:1.3;
}

/* ============================================================
   SPONSORSHIP — pitch beside the inquiry form.
   Defined here, not inline, so the media query can collapse it.
   ============================================================ */
.sponsor__grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(2rem,5vw,4rem);align-items:start;
}
@media (max-width:900px){
  .sponsor__grid{grid-template-columns:1fr}
}

/* ============================================================
   LEGAL PAGES — long-form prose (privacy, terms)
   ============================================================ */
.legal{max-width:75ch}
.legal h2{
  font-family:var(--font-display);text-transform:uppercase;letter-spacing:.005em;
  font-size:clamp(1.3rem,2.4vw,1.7rem);line-height:1.1;
  margin:2.75rem 0 .35rem;padding-top:1.75rem;border-top:1px solid var(--rule-light);
}
.legal h2:first-of-type{margin-top:1.5rem}
.legal h3{
  font-family:var(--font-body);font-weight:700;font-size:1.0625rem;
  letter-spacing:.04em;text-transform:uppercase;color:var(--gold-deep);
  margin:1.75rem 0 .5rem;
}
.legal p{margin-top:1rem}
.legal ul{margin-top:.9rem}
.legal li{padding-left:1.15rem;position:relative;margin-bottom:.55rem;line-height:1.6}
.legal li::before{content:"";position:absolute;left:0;top:.72em;width:.45rem;height:2px;background:var(--gold)}
.legal a{color:var(--gold-deep);text-decoration:underline;text-underline-offset:3px}
.legal a:hover{color:var(--amber)}
.legal__meta{
  font-size:var(--fs-small);color:var(--on-light-dim);
  padding:1rem 1.25rem;background:var(--paper-sink);border-left:4px solid var(--gold);
  margin-bottom:1rem;
}
.legal__toc{
  background:var(--paper-raised);border:1px solid var(--rule-light);border-radius:var(--radius);
  padding:1.35rem 1.5rem;margin:2rem 0;
}
.legal__toc p{margin:0 0 .65rem;font-weight:700}
.legal__toc ol{margin:0;padding-left:1.35rem;columns:2;column-gap:2rem}
.legal__toc li{padding-left:0;margin-bottom:.1rem;list-style:decimal}
.legal__toc li::before{display:none}
/* jump links are the densest cluster of tap targets on the site —
   fifteen stacked in one column on a phone */
.legal__toc a{display:inline-block;padding:.68rem 0;line-height:1.3;text-decoration:none}
.legal__toc a:hover{text-decoration:underline}
@media (max-width:640px){.legal__toc ol{columns:1}}

/* ============================================================
   RECOGNITION / QUIET STATEMENT BLOCK
   ============================================================ */
.recog{border:1px solid var(--rule-light);border-left:4px solid var(--gold);
  background:var(--paper-raised);padding:clamp(1.5rem,4vw,2.5rem);max-width:860px}
.recog li{padding:1.2rem 0;border-bottom:1px solid var(--rule-light);font-size:var(--fs-small);line-height:1.6}
.recog li:first-child{padding-top:0}
.recog li:last-child{border-bottom:0;padding-bottom:0}

/* ============================================================
   FORMS
   ============================================================ */
.formwrap{background:var(--paper-raised);border:1px solid var(--rule-light);border-radius:var(--radius);padding:clamp(1.35rem,4vw,2.25rem)}
.formwrap--dark{background:rgba(20,26,36,.86);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-color:var(--rule-dark)}
.formwrap--hero{max-width:640px;min-height:168px;padding:clamp(1rem,3vw,1.35rem)}
.formwrap--news{min-height:500px}
.formwrap--sponsor{min-height:700px}

form{margin:0}
.field{margin-bottom:1rem}
label{display:block;font-size:var(--fs-small);font-weight:700;margin-bottom:.35rem}
.formwrap--dark label{color:var(--on-dark)}
label .req{color:var(--crimson)}
.formwrap--dark label .req{color:var(--gold)}
input,select,textarea{
  width:100%;min-height:var(--tap);padding:.65rem .85rem;
  font-family:var(--font-body);font-size:var(--fs-body);
  color:var(--on-light);background:var(--paper-raised);
  border:1px solid rgba(23,26,32,.28);border-radius:var(--radius);
  transition:border-color 170ms var(--ease),box-shadow 170ms var(--ease);
}
.formwrap--dark input,.formwrap--dark select,.formwrap--dark textarea{
  color:var(--on-dark);background:rgba(5,7,11,.72);border-color:rgba(212,165,55,.34);
}
textarea{min-height:120px;resize:vertical;line-height:1.5}
input:focus,select:focus,textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(212,165,55,.22);outline-offset:1px}
::placeholder{color:var(--on-light-dim);opacity:1}
.formwrap--dark ::placeholder{color:var(--on-dark-dim)}
.err{display:none;margin-top:.35rem;font-size:var(--fs-small);color:var(--crimson);line-height:1.4}
.formwrap--dark .err{color:var(--gold-soft)}
.err.is-on{display:block}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:var(--tap);padding:.75rem 1.6rem;
  font-family:var(--font-body);font-size:var(--fs-body);font-weight:700;letter-spacing:.05em;
  color:var(--ink-deep);background:var(--gold);
  border:2px solid var(--gold);border-radius:var(--radius);cursor:pointer;text-decoration:none;
  transition:background 180ms var(--ease),border-color 180ms var(--ease),transform 180ms var(--ease);
}
.btn:hover{background:var(--gold-soft);border-color:var(--gold-soft);transform:translateY(-2px)}
.btn--wide{width:100%}
.btn--ghost{background:transparent;color:var(--gold-deep);border-color:var(--gold-deep)}
.formwrap--dark .btn--ghost{color:var(--gold);border-color:var(--gold)}
.btn--ghost:hover{background:var(--gold);color:var(--ink-deep);border-color:var(--gold)}

.inline-form{display:flex;gap:.6rem;flex-wrap:wrap}
.inline-form .field{flex:1 1 15rem;margin-bottom:0}
@media (max-width:560px){
  .inline-form{flex-direction:column}
  .inline-form .field{flex:0 0 auto}
  .inline-form .btn{width:100%}
}
.microcopy{margin-top:.8rem;font-size:var(--fs-small);line-height:1.45;color:var(--on-light-dim)}
.formwrap--dark .microcopy{color:var(--on-dark-dim)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:560px){.grid-2{grid-template-columns:1fr;gap:0}}

.success{display:none;padding:1.4rem 0}
.success.is-on{display:block}
.success__title{font-family:var(--font-display);text-transform:uppercase;font-size:1.6rem;line-height:1.1;margin-bottom:.5rem}
.success__mark{width:2.2rem;height:2.2rem;margin-bottom:.9rem;border:2px solid var(--jade);border-radius:50%;display:grid;place-items:center;color:var(--jade);font-weight:700}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{background:var(--ink);color:var(--on-dark-dim);padding:clamp(2.5rem,6vh,3.5rem) 0;font-size:var(--fs-small)}
.foot__in{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;justify-content:space-between}
.foot img{height:30px;width:auto}
.foot__links{display:flex;flex-wrap:wrap;gap:1.25rem}
.foot a{color:var(--on-dark-dim);text-decoration:none;display:inline-flex;align-items:center;min-height:var(--tap)}
.foot a:hover{color:var(--gold-soft)}

/* ============================================================
   MOTION — reveal on entry, once per element, never on a timer
   ============================================================ */
.rv{opacity:0;transform:translateY(20px);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.rv.is-in{opacity:1;transform:none}
.rv-d1{transition-delay:90ms}
.rv-d2{transition-delay:180ms}
.rv-d3{transition-delay:270ms}
.rv-zoom img{transform:scale(1.06);transition:transform 1200ms var(--ease)}
.rv-zoom.is-in img{transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
  .rv{opacity:1;transform:none}
  .rv-zoom img{transform:none}
  .scene--bleed{min-height:0}
  .scene--bleed .scene__media{position:static}
  .scene--bleed .scene__media img{height:auto;aspect-ratio:3/2}
  .scene--bleed .scene__body{background:var(--ink)}
}

@media (max-width:900px){
  .scene--plate{grid-template-columns:1fr}
  .scene--plate .scene__body{grid-column:1;grid-row:2}
  .plate{grid-column:1;grid-row:1;max-width:420px;margin-inline:auto}
}
@media (max-width:560px){
  :root{--header-h:64px}
  .brand img{height:30px}
  .scene--bleed{min-height:74svh}
}

/* ============================================================
   HIGHLEVEL FORM STYLING REFERENCE
   Reproduce inside HighLevel's builder to match this site.

   Form background ...... #FFFFFF   (dark variant: rgba(20,26,36,.86))
   Page background ...... #FAF7F1   (--paper)
   Input border ......... rgba(23,26,32,.28)
   Input border focus ... #D4A537 + 3px rgba(212,165,55,.22) glow
   Label / input text ... #171A20   (--on-light)
   Placeholder .......... #4E5663   (--on-light-dim)
   Error text ........... #C8102E   (--crimson)
   Button background .... #D4A537   (--gold)
   Button text .......... #05070B   (--ink-deep)
   Button hover ......... #F0CE72   (--gold-soft)

   Body / inputs ........ "Source Sans 3" 400 — 18px / 1.65
   Labels ............... "Source Sans 3" 700 — 16px
   Button ............... "Source Sans 3" 700 — 18px, letter-spacing .05em
   Headings ............. "Anton" 400, uppercase

   Input height (min) ... 44px      Border radius ... 4px
   Input padding ........ 10px 14px Field margin .... 16px

   Iframe min-heights: hero 168px · newsletter 500px · sponsor 700px
   ============================================================ */