/* Golden Scoop Awards — assets/styles.css
   v0.3.0 · 2026-08-25 · Client round one: logo prominence pass.
   v0.2.0 · 2026-08-24 · Art direction upgrade: serif display, image system,
   wave dividers, card variety, overlap, greyscale sponsor wordmarks */

/* ==========================================================================
   GOLDEN SCOOP AWARDS — assets/styles.css
   Single source of truth for all styling across every page.
   Shares the ICA design DNA (type scale, spacing, motion, buttons, gold values)
   but inverts the field: white and warm neutral lead, gold dominant, navy supports.
   Section index:
     01 Tokens
     02 Reset and base
     03 Typography helpers
     04 Buttons and links
     05 Layout, sections, grids
     06 Header, dual navigation, drawer
     07 Footer
     08 Home hero and results banner
     09 Sponsors strip
     10 Star rating device  (the brand signature)
     11 Cards, panels, stats
     12 Judging criteria graphic
     13 Timeline
     14 Judge panel cards
     15 Classes grid
     16 Directory: search, filters, result cards  (collection points, product search)
     17 Tables and rule lists
     18 Forms, multi step entry flow, success states
     19 Store and pricing
     20 Results area
     21 Blog and newsletter
     22 Accordion, tabs, modal
     23 Page header and breadcrumb
     24 Utilities
     25 Motion and reveal
     26 Responsive
     27 Reduced motion and print
   ========================================================================== */

/* ===== 01 Tokens ========================================================= */
:root{
  /* Shared exactly with the ICA site so the two read as a family */
  --navy:#191E3B;
  --navy-1:#242C52;
  --navy-2:#11152C;
  --navy-3:#0A0D1E;
  --gold:#C8A868;
  --gold-soft:#DCC38C;
  --white:#FFFFFF;
  --mist:#F4F5F8;
  --mist-2:#EAECF3;
  --slate:#4A5170;
  --ink:#191E3B;
  --line-l:rgba(25,30,59,.12);
  --line-d:rgba(255,255,255,.16);

  /* Golden Scoop additions: warmer neutrals so gold sits on cream, not clinical white */
  --cream:#FAF7F1;
  --cream-2:#F3EDE1;
  --gold-deep:#A88743;
  --gold-ink:#6E5722;
  --gold-wash:rgba(200,168,104,.12);
  --gold-line:rgba(200,168,104,.34);
  --success:#2E7D5B;
  --alert:#9A3412;

  --max:1200px;
  --wide:1440px;
  --narrow:820px;

  --display:'Space Grotesk',system-ui,sans-serif;
  --body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;

  --shadow:0 26px 54px -28px rgba(17,21,44,.5);
  --shadow-s:0 14px 30px -20px rgba(17,21,44,.55);
  --shadow-gold:0 22px 44px -26px rgba(168,135,67,.55);

  --r:4px;
  --r-md:6px;
  --r-lg:10px;

  --hdr:118px;              /* topbar + header, used for scroll padding */
  --sec:clamp(64px,7vw,110px);
  --sec-sm:clamp(44px,5vw,72px);
}

/* ===== 02 Reset and base ================================================= */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:var(--hdr);-webkit-text-size-adjust:100%}
body{
  font-family:var(--body);color:var(--ink);background:var(--white);
  line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
ul,ol{list-style:none}
:focus-visible{outline:3px solid var(--gold-deep);outline-offset:3px;border-radius:2px}
::selection{background:var(--gold);color:var(--navy)}

.skip{
  position:absolute;left:-9999px;top:0;z-index:300;background:var(--gold);color:var(--navy);
  padding:14px 22px;font-weight:700;border-radius:0 0 var(--r) 0;
}
.skip:focus{left:0}

/* ===== 03 Typography helpers ============================================ */
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.03;letter-spacing:-.02em}
h4,h5,h6{font-family:var(--display);font-weight:600;letter-spacing:-.01em;line-height:1.2}
p{overflow-wrap:break-word}

.h-xl{font-size:clamp(2.6rem,6vw,4.5rem)}
.h-lg{font-size:clamp(2.1rem,4.4vw,3.35rem)}
.h-md{font-size:clamp(1.65rem,3vw,2.4rem)}
.h-sm{font-size:clamp(1.25rem,2vw,1.6rem)}

.lede{font-size:clamp(1.05rem,1.5vw,1.24rem);color:var(--slate);line-height:1.62;max-width:62ch}
.lede-d{color:rgba(255,255,255,.8)}
.prose p{margin-bottom:1.05rem;color:var(--slate)}
.prose p:last-child{margin-bottom:0}
.prose h3{margin:2rem 0 .8rem;font-size:1.35rem}
.prose h4{margin:1.6rem 0 .6rem;font-size:1.08rem}
.prose ul{margin:0 0 1.05rem}
.prose ul li{position:relative;padding-left:1.5rem;margin-bottom:.55rem;color:var(--slate)}
.prose ul li::before{
  content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;background:var(--gold);
  transform:rotate(45deg);
}
.prose strong{color:var(--ink);font-weight:700}
.prose a:not(.btn){color:var(--gold-ink);font-weight:600;border-bottom:1px solid var(--gold-line)}
.prose a:not(.btn):hover{border-bottom-color:var(--gold-deep)}

.eyebrow{
  font-size:.74rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep);
  display:inline-flex;align-items:center;gap:.7rem;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--gold);flex:none}
.eyebrow-d{color:var(--gold)}
.eyebrow-c{justify-content:center}

.kicker{
  font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--slate);
}
.num{font-variant-numeric:tabular-nums}

/* ===== 04 Buttons and links ============================================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--body);font-weight:700;font-size:.95rem;padding:.9rem 1.6rem;
  border:2px solid transparent;cursor:pointer;border-radius:var(--r);white-space:nowrap;text-align:center;
  transition:transform .16s ease,background .16s ease,color .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.btn-gold{background:var(--gold);color:var(--navy)}
.btn-gold:hover{background:var(--gold-soft);transform:translateY(-2px);box-shadow:var(--shadow-gold)}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-1);transform:translateY(-2px)}
.btn-white{background:#fff;color:var(--navy)}
.btn-white:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.btn-ghost-l{background:transparent;color:var(--navy);border-color:var(--line-l)}
.btn-ghost-l:hover{border-color:var(--navy);transform:translateY(-2px)}
.btn-ghost-g{background:transparent;color:var(--gold-ink);border-color:var(--gold-line)}
.btn-ghost-g:hover{border-color:var(--gold-deep);background:var(--gold-wash);transform:translateY(-2px)}
.btn-ghost-d{background:transparent;color:#fff;border-color:var(--line-d)}
.btn-ghost-d:hover{border-color:#fff;transform:translateY(-2px)}
.btn-sm{padding:.62rem 1.05rem;font-size:.85rem}
.btn-lg{padding:1.05rem 2rem;font-size:1.02rem}
.btn-block{width:100%}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;pointer-events:none}
.btn .ico{width:16px;height:16px;flex:none}

.btn-row{display:flex;flex-wrap:wrap;gap:.8rem}
.btn-row-c{justify-content:center}

/* gold underline sweep for inline links, shared with the ICA site */
.swipe{position:relative;display:inline-block;font-weight:700}
.swipe::after{
  content:"";position:absolute;left:0;bottom:-3px;height:2px;width:100%;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.swipe:hover::after,.swipe:focus-visible::after{transform:scaleX(1)}

/* ===== 05 Layout, sections, grids ======================================= */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:26px}
.wrap-wide{width:100%;max-width:var(--wide);margin-inline:auto;padding-inline:26px}
.wrap-narrow{width:100%;max-width:var(--narrow);margin-inline:auto;padding-inline:26px}

.section{padding-block:var(--sec)}
.section-sm{padding-block:var(--sec-sm)}
.section-tight{padding-block:clamp(30px,4vw,52px)}
.bg-white{background:var(--white)}
.bg-cream{background:var(--cream)}
.bg-cream-2{background:var(--cream-2)}
.bg-mist{background:var(--mist)}
.bg-navy{background:var(--navy);color:#fff}
.bg-navy h1,.bg-navy h2,.bg-navy h3,.bg-navy h4{color:#fff}
.bg-navy p{color:rgba(255,255,255,.78)}
.bg-gold-wash{background:var(--gold-wash)}

.sec-head{max-width:70ch;margin-bottom:clamp(30px,4vw,52px)}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head .eyebrow{margin-bottom:1rem}
.sec-head h2{margin-bottom:1rem}

.grid{display:grid;gap:clamp(18px,2.4vw,30px)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.g-5{grid-template-columns:repeat(5,1fr)}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,64px);align-items:center}
.split-wide{grid-template-columns:1.25fr .75fr}
.stack{display:flex;flex-direction:column;gap:1rem}
.row{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.rule{height:1px;background:var(--line-l);border:0;margin-block:clamp(28px,4vw,48px)}
.rule-gold{height:2px;width:56px;background:var(--gold);border:0}

/* ===== 06 Header, dual navigation, drawer =============================== */
.topbar{background:var(--navy);color:#d5d9e6}
.topbar .wrap{
  display:flex;align-items:center;justify-content:space-between;min-height:38px;
  font-size:.78rem;gap:1rem;flex-wrap:wrap;
}
.topbar strong{color:var(--gold);font-weight:600}
.topbar .tb-right{display:flex;gap:1.3rem;align-items:center}
.topbar a{opacity:.85}
.topbar a:hover{opacity:1;color:var(--gold)}

header.site{
  position:sticky;top:0;z-index:60;background:var(--white);
  border-bottom:1px solid var(--line-l);
}
header.site .wrap{
  display:flex;align-items:center;justify-content:space-between;
  min-height:80px;gap:1rem;position:relative;
}
.brand{display:inline-flex;align-items:center;gap:.85rem}
.brand-logo{height:52px;width:auto}
.brand-lockup{
  display:flex;flex-direction:column;gap:2px;padding-left:.85rem;border-left:1px solid var(--line-l);
}
.brand-lockup .l1{
  font-size:.6rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--slate);
}
.brand-lockup .l2{
  font-family:var(--display);font-size:.86rem;font-weight:700;letter-spacing:-.01em;color:var(--navy);
}
.brand-lockup .l2:hover{color:var(--gold-deep)}

/* dual navigation: two labelled audience groups, the site's defining feature */
nav.main{display:flex;align-items:stretch;gap:0}
.nav-group{position:relative;display:flex;align-items:center}
.nav-group + .nav-group{margin-left:.4rem;padding-left:.9rem}
.nav-group + .nav-group::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1px;height:26px;background:var(--line-l);
}
.nav-trigger{
  background:none;border:none;cursor:pointer;color:var(--navy);
  font-size:.82rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:30px .85rem;display:inline-flex;align-items:center;gap:.45rem;position:relative;
  transition:color .16s ease;
}
.nav-trigger .aud{
  font-size:.58rem;font-weight:700;letter-spacing:.16em;color:var(--slate);
  display:block;margin-bottom:2px;text-align:left;
}
.nav-trigger .chev{width:11px;height:11px;transition:transform .22s ease;color:var(--gold-deep)}
.nav-trigger:hover,.nav-trigger[aria-expanded="true"],.nav-trigger.active{color:var(--gold-deep)}
.nav-trigger[aria-expanded="true"] .chev{transform:rotate(180deg)}
.nav-trigger::after{
  content:"";position:absolute;left:.85rem;right:.85rem;bottom:20px;height:2px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform .28s cubic-bezier(.2,.7,.3,1);
}
.nav-trigger:hover::after,.nav-trigger.active::after,.nav-trigger[aria-expanded="true"]::after{transform:scaleX(1)}

.mega{
  position:absolute;top:100%;left:-8px;min-width:300px;background:#fff;border-radius:var(--r-md);
  box-shadow:0 30px 60px -26px rgba(10,13,30,.5);border-top:3px solid var(--gold);
  padding:14px 0 10px;opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .2s ease,transform .2s ease,visibility .2s;z-index:70;
}
.nav-group.open .mega{opacity:1;visibility:visible;transform:none}
.mega .mgroup{
  font-size:.66rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#9aa0b4;
  padding:8px 24px 6px;
}
.mega a{
  display:flex;align-items:flex-start;gap:.7rem;padding:11px 24px;font-size:.94rem;color:var(--navy);
  transition:background .14s ease,padding-left .14s ease;
}
.mega a:hover{background:var(--cream);padding-left:29px}
.mega a b{font-weight:700;font-family:var(--display);letter-spacing:-.01em}
.mega a span.d{
  display:block;font-size:.79rem;color:var(--slate);font-weight:400;margin-top:2px;line-height:1.45;
}
.mega a[aria-current="page"]{background:var(--gold-wash)}
.mega .ext-mark{width:12px;height:12px;color:var(--gold-deep);margin-top:5px;flex:none}

.nav-cta{display:flex;align-items:center;gap:.7rem}
.menu-toggle{
  display:none;background:none;border:2px solid var(--line-l);width:46px;height:46px;
  cursor:pointer;align-items:center;justify-content:center;color:var(--navy);border-radius:var(--r);
}
.menu-toggle svg{width:22px;height:22px}

/* mobile drawer */
.drawer{
  position:fixed;inset:0 0 0 auto;width:min(420px,88vw);background:var(--white);z-index:120;
  transform:translateX(102%);transition:transform .32s cubic-bezier(.2,.7,.3,1);
  display:flex;flex-direction:column;box-shadow:-30px 0 60px -30px rgba(10,13,30,.55);
}
.drawer.open{transform:none}
.drawer-head{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:18px 22px;border-bottom:1px solid var(--line-l);
}
.drawer-close{
  background:none;border:2px solid var(--line-l);width:42px;height:42px;border-radius:var(--r);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
}
.drawer-close svg{width:20px;height:20px}
.drawer-body{overflow-y:auto;padding:10px 0 30px;flex:1}
.drawer-group{
  font-size:.66rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deep);
  padding:20px 22px 8px;
}
.drawer-body a{
  display:block;padding:13px 22px;font-weight:600;font-size:1rem;border-bottom:1px solid var(--line-l);
}
.drawer-body a:hover{background:var(--cream);color:var(--gold-ink)}
.drawer-body a[aria-current="page"]{color:var(--gold-ink);background:var(--gold-wash)}
.drawer-foot{padding:20px 22px;border-top:1px solid var(--line-l);display:grid;gap:.7rem}
.scrim{
  position:fixed;inset:0;background:rgba(10,13,30,.5);opacity:0;visibility:hidden;
  transition:opacity .3s ease,visibility .3s;z-index:110;
}
.scrim.show{opacity:1;visibility:visible}
body.locked{overflow:hidden}

/* ===== 07 Footer ======================================================== */
footer.site{background:var(--navy);color:rgba(255,255,255,.72);padding-block:clamp(48px,6vw,84px) 0}
footer.site a:hover{color:var(--gold)}
.f-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:clamp(26px,3vw,48px)}
.f-brand .brand-logo{height:56px;margin-bottom:1.1rem}
.f-brand p{font-size:.9rem;max-width:34ch;color:rgba(255,255,255,.68)}
.f-col h4{
  color:#fff;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  font-family:var(--body);font-weight:700;margin-bottom:1.05rem;
}
.f-col li{margin-bottom:.62rem;font-size:.92rem}
.f-endorse{
  display:inline-flex;align-items:center;gap:.7rem;margin-top:1.3rem;padding:.7rem 1rem;
  border:1px solid var(--line-d);border-radius:var(--r);font-size:.82rem;color:rgba(255,255,255,.8);
}
.f-endorse strong{color:var(--gold);font-weight:700}
.f-social{display:flex;gap:.6rem;margin-top:1.2rem}
.f-social a{
  width:40px;height:40px;border:1px solid var(--line-d);border-radius:var(--r);
  display:inline-flex;align-items:center;justify-content:center;transition:border-color .16s ease,background .16s ease;
}
.f-social a:hover{border-color:var(--gold);background:rgba(200,168,104,.12)}
.f-social svg{width:18px;height:18px}
.f-bottom{
  margin-top:clamp(34px,4vw,56px);border-top:1px solid var(--line-d);padding-block:22px;
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.82rem;
}
.f-bottom ul{display:flex;gap:1.3rem;flex-wrap:wrap}

/* ===== 08 Home hero and results banner ================================== */
.hero{position:relative;background:var(--cream);overflow:hidden;padding-block:clamp(56px,7vw,104px)}
.hero::before{
  content:"";position:absolute;right:-140px;top:-140px;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(200,168,104,.22),rgba(200,168,104,0) 68%);pointer-events:none;
}
.hero .split{position:relative;z-index:2}
.hero h1{margin-block:1rem 1.2rem}
.hero .lede{margin-bottom:1.8rem}
.hero-facts{display:flex;gap:clamp(18px,3vw,40px);flex-wrap:wrap;margin-top:2.2rem;padding-top:1.6rem;border-top:1px solid var(--gold-line)}
.hero-fact .v{font-family:var(--display);font-size:clamp(1.6rem,2.6vw,2.1rem);font-weight:700;color:var(--gold-deep);line-height:1}
.hero-fact .l{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--slate);margin-top:.45rem}
.hero-media{position:relative}
.hero-media img{width:100%;border-radius:var(--r-lg);box-shadow:var(--shadow)}
.hero-badge{
  position:absolute;left:-18px;bottom:-18px;background:#fff;border-radius:var(--r-lg);
  padding:1rem 1.2rem;box-shadow:var(--shadow);display:flex;align-items:center;gap:.9rem;
  border-top:3px solid var(--gold);
}

.results-banner{background:var(--navy);color:#fff;padding-block:1.1rem}
.results-banner .wrap{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;flex-wrap:wrap}
.results-banner .rb-left{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.results-banner .pill{
  background:var(--gold);color:var(--navy);font-size:.68rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;padding:.42rem .8rem;border-radius:999px;
}
.results-banner p{color:rgba(255,255,255,.85);font-size:.98rem;margin:0}
.results-banner strong{color:#fff}

/* ===== 09 Sponsors strip ================================================ */
.sponsors{border-block:1px solid var(--line-l);background:var(--white)}
.sponsors .lbl{
  text-align:center;font-size:.68rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--slate);margin-bottom:1.5rem;
}
.sponsor-row{
  display:flex;align-items:center;justify-content:center;gap:clamp(24px,4vw,64px);flex-wrap:wrap;
}
.sponsor-row img{
  height:clamp(30px,3.4vw,46px);width:auto;filter:grayscale(1);opacity:.62;
  transition:filter .22s ease,opacity .22s ease,transform .22s ease;
}
.sponsor-row a:hover img,.sponsor-row a:focus-visible img{filter:grayscale(0);opacity:1;transform:translateY(-2px)}

/* ===== 10 Star rating device  (brand signature) ========================= */
/* One component, reused on the tiers explainer, results, product search and
   the consumer pages, so the rating always looks like the same system. */
.stars{display:inline-flex;align-items:center;gap:.22rem}
.stars svg{width:20px;height:20px;flex:none;color:var(--mist-2)}
.stars .on{color:var(--gold)}
.stars-sm svg{width:15px;height:15px}
.stars-lg svg{width:30px;height:30px}
.stars[data-animate="true"] .on{
  opacity:0;transform:scale(.6) rotate(-18deg);
  transition:opacity .34s ease,transform .34s cubic-bezier(.2,.9,.3,1.3);
}
.stars[data-animate="true"].lit .on{opacity:1;transform:none}
.stars[data-animate="true"].lit .on:nth-child(1){transition-delay:.02s}
.stars[data-animate="true"].lit .on:nth-child(2){transition-delay:.10s}
.stars[data-animate="true"].lit .on:nth-child(3){transition-delay:.18s}
.stars[data-animate="true"].lit .on:nth-child(4){transition-delay:.26s}
.stars[data-animate="true"].lit .on:nth-child(5){transition-delay:.34s}

.tier-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(14px,1.6vw,20px)}
.tier{
  background:#fff;border:1px solid var(--line-l);border-radius:var(--r-lg);padding:1.6rem 1.3rem;
  display:flex;flex-direction:column;gap:.85rem;position:relative;overflow:hidden;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.tier::before{
  content:"";position:absolute;inset:0 0 auto 0;height:4px;
  background:linear-gradient(90deg,var(--gold),var(--gold-soft));transform:scaleX(var(--fill,.2));transform-origin:left;
}
.tier:hover{transform:translateY(-4px);box-shadow:var(--shadow-gold);border-color:var(--gold-line)}
.tier .t-name{font-family:var(--display);font-size:1.18rem;font-weight:700;letter-spacing:-.01em}
.tier .t-band{
  font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-deep);
}
.tier p{font-size:.92rem;color:var(--slate);line-height:1.55}
.tier.is-top{background:var(--navy);border-color:var(--navy)}
.tier.is-top .t-name{color:#fff}
.tier.is-top p{color:rgba(255,255,255,.78)}
.tier.is-top .t-band{color:var(--gold)}
.tier.is-top .stars svg{color:rgba(255,255,255,.22)}
.tier.is-top .stars .on{color:var(--gold)}

/* compact rating badge, used inside result and product cards */
.rating-badge{
  display:inline-flex;align-items:center;gap:.55rem;background:var(--gold-wash);
  border:1px solid var(--gold-line);border-radius:999px;padding:.32rem .75rem;
}
.rating-badge .lbl{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-ink)}

/* medals */
.medal{
  display:inline-flex;align-items:center;gap:.4rem;font-size:.72rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;padding:.3rem .68rem;border-radius:999px;
}
.medal::before{content:"";width:9px;height:9px;border-radius:50%}
/* Gold, silver and bronze medals were retired by the ICA in the 2027 rules.
   Recognition is now the star rating, plus a class winner marker. */
.medal-winner{background:rgba(200,168,104,.16);color:var(--gold-ink)}
.medal-winner::before{background:#C8A868}
.medal-champion{background:var(--navy);color:var(--gold)}
.medal-champion::before{background:var(--gold)}

/* ===== 11 Cards, panels, stats ========================================== */
.card{
  background:#fff;border:1px solid var(--line-l);border-radius:var(--r-lg);padding:clamp(1.3rem,2vw,1.9rem);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.card-hover:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--gold-line)}
.card h3{font-size:1.22rem;margin-bottom:.6rem}
.card p{font-size:.95rem;color:var(--slate)}
.card-icon{
  width:52px;height:52px;border-radius:var(--r-md);background:var(--gold-wash);color:var(--gold-deep);
  display:inline-flex;align-items:center;justify-content:center;margin-bottom:1.1rem;
}
.card-icon svg{width:24px;height:24px}
.card-num{
  font-family:var(--display);font-size:2.2rem;font-weight:700;color:var(--gold-soft);line-height:1;
  margin-bottom:.9rem;
}
.panel{background:var(--cream);border-radius:var(--r-lg);padding:clamp(1.5rem,2.4vw,2.4rem)}
.panel-gold{background:var(--gold-wash);border:1px solid var(--gold-line)}
.panel-navy{background:var(--navy);color:#fff;border-radius:var(--r-lg);padding:clamp(1.5rem,2.4vw,2.4rem)}
.note{
  border-left:3px solid var(--gold);background:var(--cream);padding:1rem 1.2rem;border-radius:0 var(--r) var(--r) 0;
  font-size:.94rem;color:var(--slate);
}
.note strong{color:var(--ink)}

.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,28px)}
.stat{text-align:center;padding:1.3rem .6rem;border-right:1px solid var(--line-l)}
.stat:last-child{border-right:0}
.stat .v{font-family:var(--display);font-size:clamp(1.9rem,3.4vw,2.7rem);font-weight:700;color:var(--gold-deep);line-height:1}
.stat .l{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);margin-top:.55rem}
.bg-navy .stat{border-color:var(--line-d)}
.bg-navy .stat .v{color:var(--gold)}
.bg-navy .stat .l{color:rgba(255,255,255,.7)}

/* ===== 12 Judging criteria graphic ===================================== */
.criteria{display:grid;gap:1rem}
.criterion{
  display:grid;grid-template-columns:auto 1fr auto;gap:1.2rem;align-items:center;
  background:#fff;border:1px solid var(--line-l);border-radius:var(--r-lg);padding:1.4rem 1.6rem;
}
.criterion .c-name{font-family:var(--display);font-weight:700;font-size:1.1rem;min-width:11ch}
.criterion .c-bar{position:relative;height:12px;background:var(--mist-2);border-radius:999px;overflow:hidden}
.criterion .c-bar span{
  position:absolute;top:0;bottom:0;border-radius:999px;
  background:linear-gradient(90deg,var(--gold-soft),var(--gold));
  transform:scaleX(0);transform-origin:left;transition:transform .8s cubic-bezier(.2,.7,.3,1);
}
.criterion.lit .c-bar span{transform:scaleX(1)}
.criterion .c-pts{
  font-family:var(--display);font-weight:700;font-size:1rem;color:var(--gold-ink);min-width:10ch;text-align:right;
  font-variant-numeric:tabular-nums;
}
.criterion .c-desc{grid-column:2/-1;font-size:.9rem;color:var(--slate);margin-top:.5rem}
.criteria-total{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  background:var(--navy);color:#fff;border-radius:var(--r-lg);padding:1.2rem 1.6rem;
}
.criteria-total .t-l{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.criteria-total .t-v{font-family:var(--display);font-size:1.5rem;font-weight:700;color:var(--gold)}

/* ===== 13 Timeline ====================================================== */
.timeline{position:relative;display:grid;gap:0}
.timeline::before{
  content:"";position:absolute;left:15px;top:12px;bottom:12px;width:2px;background:var(--gold-line);
}
.tl-item{position:relative;padding:0 0 2rem 3.2rem}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{
  content:"";position:absolute;left:8px;top:6px;width:16px;height:16px;border-radius:50%;
  background:#fff;border:3px solid var(--gold);
}
.tl-item.is-key::before{background:var(--gold);box-shadow:0 0 0 5px var(--gold-wash)}
.tl-date{
  font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);
  margin-bottom:.35rem;
}
.tl-item h4{font-size:1.08rem;margin-bottom:.3rem}
.tl-item p{font-size:.92rem;color:var(--slate)}
.bg-navy .timeline::before{background:var(--line-d)}
.bg-navy .tl-item::before{background:var(--navy);border-color:var(--gold)}
.bg-navy .tl-item p{color:rgba(255,255,255,.75)}

/* ===== 14 Judge panel cards ============================================= */
/* Two panels of four judges. Every entry is scored by one panel of four,
   so the maximum sample score is 400. Profiles are placeholders until the
   ICA confirms the 2026 line up. */
.panel-label{
  display:flex;align-items:center;gap:1rem;margin-bottom:1.4rem;
}
.panel-label .p-tag{
  font-family:var(--display);font-weight:700;font-size:1.1rem;color:var(--navy);
  background:var(--gold-wash);border:1px solid var(--gold-line);border-radius:var(--r);
  padding:.4rem .9rem;
}
.panel-label .p-meta{font-size:.84rem;color:var(--slate)}
.panel-label .p-line{flex:1;height:1px;background:var(--line-l)}

.judge-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,26px)}
.judge{
  background:#fff;border:1px solid var(--line-l);border-radius:var(--r-lg);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.judge:hover{transform:translateY(-4px);box-shadow:var(--shadow-gold);border-color:var(--gold-line)}
.judge-photo{
  aspect-ratio:1/1;background:var(--cream-2);display:flex;align-items:center;justify-content:center;
  position:relative;
}
.judge-photo img{width:100%;height:100%;object-fit:cover}
.judge-initials{
  font-family:var(--display);font-size:2.2rem;font-weight:700;color:var(--gold-deep);opacity:.6;
}
.ph-watermark{
  font-family:var(--display);font-weight:700;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold-deep);opacity:.5;transform:rotate(-18deg);text-align:center;line-height:1.5;
}
.judge-photo::after{
  content:"";position:absolute;inset:auto 0 0 0;height:3px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.judge:hover .judge-photo::after{transform:scaleX(1)}
.judge-body{padding:1.15rem 1.25rem 1.4rem;display:flex;flex-direction:column;gap:.45rem;flex:1}
.judge-body h4{font-size:1.05rem}
.judge-role{font-size:.8rem;font-weight:600;color:var(--gold-ink)}
.judge-body p{font-size:.88rem;color:var(--slate);line-height:1.5}
.judge-tba{
  display:inline-flex;align-self:flex-start;align-items:center;gap:.4rem;margin-top:auto;
  font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);
  background:var(--mist);border-radius:999px;padding:.28rem .65rem;
}

/* ===== 15 Classes grid ================================================== */
.class-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px)}
.class-card{
  background:#fff;border:1px solid var(--line-l);border-radius:var(--r-lg);padding:1.5rem;
  display:flex;flex-direction:column;gap:.7rem;position:relative;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.class-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--gold-line)}
.class-card h3{font-size:1.18rem}
.class-card p{font-size:.92rem;color:var(--slate);flex:1}
.class-meta{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.3rem}
.tag{
  font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:.28rem .62rem;border-radius:999px;background:var(--mist);color:var(--slate);
}
.tag-gold{background:var(--gold-wash);color:var(--gold-ink)}
.tag-navy{background:var(--navy);color:#fff}
.tag-open{background:rgba(46,125,91,.12);color:var(--success)}

/* ===== 16 Directory: search, filters, result cards ====================== */
.finder{
  background:#fff;border:1px solid var(--line-l);border-radius:var(--r-lg);padding:1.3rem;
  box-shadow:var(--shadow-s);margin-bottom:2rem;position:sticky;top:calc(var(--hdr) - 30px);z-index:20;
}
.finder-row{display:grid;grid-template-columns:1.6fr repeat(3,1fr) auto;gap:.8rem;align-items:end}
.search-field{position:relative}
.search-field svg{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--slate);
  pointer-events:none;
}
.search-field input{padding-left:42px}
.filter-chips{display:flex;gap:.55rem;flex-wrap:wrap;margin-top:1rem}
.chip{
  border:1px solid var(--line-l);background:#fff;border-radius:999px;padding:.42rem .95rem;
  font-size:.84rem;font-weight:600;cursor:pointer;transition:all .16s ease;color:var(--slate);
}
.chip:hover{border-color:var(--gold-line);color:var(--gold-ink)}
.chip[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.result-count{font-size:.88rem;color:var(--slate);margin-bottom:1.2rem}
.result-count strong{color:var(--ink)}

.dir-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px)}
.dir-card{
  background:#fff;border:1px solid var(--line-l);border-radius:var(--r-lg);padding:1.4rem;
  display:flex;flex-direction:column;gap:.6rem;
}
.dir-card h3{font-size:1.1rem}
.dir-region{
  font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);
}
.dir-card address{font-style:normal;font-size:.9rem;color:var(--slate);line-height:1.55}
.dir-meta{display:grid;gap:.35rem;font-size:.86rem;color:var(--slate);margin-top:.3rem;padding-top:.8rem;border-top:1px solid var(--line-l)}
.dir-meta .m{display:flex;gap:.6rem;align-items:flex-start}
.dir-meta svg{width:15px;height:15px;flex:none;margin-top:3px;color:var(--gold-deep)}
.dir-card.is-hq{border-color:var(--gold-line);background:var(--gold-wash)}
.empty-state{
  text-align:center;padding:clamp(38px,6vw,70px) 1.5rem;background:var(--cream);border-radius:var(--r-lg);
}
.empty-state h3{margin-bottom:.5rem}
.empty-state p{color:var(--slate);max-width:44ch;margin-inline:auto}

.product-card{
  background:#fff;border:1px solid var(--line-l);border-radius:var(--r-lg);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.product-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--gold-line)}
.product-top{padding:1.25rem 1.35rem;display:flex;flex-direction:column;gap:.55rem}
.product-card h3{font-size:1.08rem}
.product-producer{font-size:.9rem;color:var(--slate)}
.product-foot{
  margin-top:auto;padding:.9rem 1.35rem;border-top:1px solid var(--line-l);background:var(--cream);
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap;
  font-size:.82rem;color:var(--slate);
}

/* ===== 17 Tables and rule lists ========================================= */
.table-wrap{overflow-x:auto;border:1px solid var(--line-l);border-radius:var(--r-lg);background:#fff}
table{width:100%;border-collapse:collapse;font-size:.94rem;min-width:560px}
thead th{
  text-align:left;background:var(--navy);color:#fff;font-family:var(--body);font-weight:700;
  font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;padding:.95rem 1.1rem;
}
tbody td{padding:.95rem 1.1rem;border-top:1px solid var(--line-l);color:var(--slate);vertical-align:top}
tbody tr:nth-child(even){background:var(--cream)}
tbody td strong{color:var(--ink)}
caption{caption-side:bottom;font-size:.82rem;color:var(--slate);padding-top:.8rem;text-align:left}

.rules{counter-reset:rule;display:grid;gap:1rem}
.rule-item{
  counter-increment:rule;display:grid;grid-template-columns:auto 1fr;gap:1.1rem;
  padding-bottom:1rem;border-bottom:1px solid var(--line-l);
}
.rule-item:last-child{border-bottom:0;padding-bottom:0}
.rule-item::before{
  content:counter(rule,decimal-leading-zero);font-family:var(--display);font-weight:700;font-size:.92rem;
  color:var(--gold-deep);background:var(--gold-wash);border-radius:var(--r);
  width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;flex:none;
}
.rule-item p{font-size:.95rem;color:var(--slate);align-self:center}

/* ===== 18 Forms, multi step entry flow, success states ================== */
.field{display:grid;gap:.45rem;margin-bottom:1.1rem}
.field label{font-size:.85rem;font-weight:700;color:var(--ink)}
.field .hint{font-size:.82rem;color:var(--slate)}
input[type=text],input[type=email],input[type=tel],input[type=search],input[type=number],select,textarea{
  width:100%;background:#fff;border:1px solid var(--line-l);border-radius:var(--r);
  padding:.82rem .95rem;font-size:.95rem;transition:border-color .16s ease,box-shadow .16s ease;
}
input:hover,select:hover,textarea:hover{border-color:var(--gold-line)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold-deep);box-shadow:0 0 0 3px var(--gold-wash)}
textarea{min-height:140px;resize:vertical}
select{appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A5170' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:16px;padding-right:38px}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:var(--alert)}
.err{font-size:.82rem;color:var(--alert);font-weight:600;display:none}
.field.invalid .err{display:block}
fieldset{border:0}
legend{font-family:var(--display);font-weight:700;font-size:1.15rem;margin-bottom:1rem}

.check{
  display:flex;gap:.85rem;align-items:flex-start;padding:1rem 1.15rem;border:1px solid var(--line-l);
  border-radius:var(--r-md);background:#fff;cursor:pointer;transition:border-color .16s ease,background .16s ease;
}
.check:hover{border-color:var(--gold-line);background:var(--cream)}
.check input{margin-top:.25rem;accent-color:var(--gold-deep);width:18px;height:18px;flex:none}
.check .c-name{font-weight:700;font-size:.98rem}
.check .c-note{font-size:.85rem;color:var(--slate);margin-top:.2rem}
.check.selected{border-color:var(--gold-deep);background:var(--gold-wash)}
.check.limited .c-limit{font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-ink)}

.steps{display:flex;gap:.4rem;margin-bottom:2rem;flex-wrap:wrap}
.step{
  flex:1;min-width:120px;padding:.85rem 1rem;border-top:3px solid var(--mist-2);
  font-size:.82rem;font-weight:700;color:var(--slate);transition:color .2s ease,border-color .2s ease;
}
.step .s-num{display:block;font-size:.68rem;letter-spacing:.16em;color:var(--slate);margin-bottom:.25rem}
.step[aria-current="step"]{border-top-color:var(--gold);color:var(--ink)}
.step.done{border-top-color:var(--gold-deep);color:var(--gold-ink)}
.step-panel{display:none}
.step-panel.active{display:block;animation:fade .3s ease}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.step-nav{display:flex;justify-content:space-between;gap:.8rem;margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--line-l)}

.summary{display:grid;gap:.7rem}
.summary-row{display:flex;justify-content:space-between;gap:1rem;font-size:.94rem;padding-bottom:.7rem;border-bottom:1px solid var(--line-l)}
.summary-row .k{color:var(--slate)}
.summary-row .v{font-weight:700;text-align:right}
.summary-total{
  display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
  padding-top:.9rem;font-family:var(--display);font-weight:700;font-size:1.35rem;
}
.summary-total .v{color:var(--gold-deep)}

.success{
  text-align:center;padding:clamp(38px,6vw,72px) 1.5rem;background:var(--cream);border-radius:var(--r-lg);
  border-top:4px solid var(--gold);
}
.success .tick{
  width:74px;height:74px;border-radius:50%;background:var(--gold);color:var(--navy);
  display:inline-flex;align-items:center;justify-content:center;margin-bottom:1.4rem;
  animation:pop .4s cubic-bezier(.2,.9,.3,1.3);
}
.success .tick svg{width:34px;height:34px}
@keyframes pop{from{transform:scale(.5);opacity:0}to{transform:none;opacity:1}}
.success h2{margin-bottom:.8rem}
.success p{color:var(--slate);max-width:52ch;margin-inline:auto}
.ref{
  display:inline-block;margin-top:1.4rem;font-family:var(--display);font-weight:700;letter-spacing:.06em;
  background:#fff;border:1px dashed var(--gold-line);border-radius:var(--r);padding:.7rem 1.2rem;
}

.status-bar{
  display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;padding:1rem 1.3rem;border-radius:var(--r-md);
  font-size:.95rem;margin-bottom:1.8rem;
}
.status-open{background:rgba(46,125,91,.1);border:1px solid rgba(46,125,91,.3);color:var(--success)}
.status-closed{background:var(--mist);border:1px solid var(--line-l);color:var(--slate)}
.status-bar strong{font-weight:700}
.status-dot{width:10px;height:10px;border-radius:50%;flex:none}
.status-open .status-dot{background:var(--success)}
.status-closed .status-dot{background:var(--slate)}

/* ===== 19 Store and pricing ============================================= */
.price-card{
  background:var(--navy);color:#fff;border-radius:var(--r-lg);padding:clamp(1.8rem,3vw,2.6rem);
  display:flex;flex-direction:column;gap:1rem;
}
.price-card .p-val{font-family:var(--display);font-size:clamp(2.6rem,5vw,3.6rem);font-weight:700;color:var(--gold);line-height:1}
.price-card .p-unit{font-size:.9rem;color:rgba(255,255,255,.72)}
.price-card ul{display:grid;gap:.6rem;margin-top:.5rem}
.price-card li{display:flex;gap:.65rem;font-size:.94rem;color:rgba(255,255,255,.82)}
.price-card li svg{width:17px;height:17px;color:var(--gold);flex:none;margin-top:3px}
.member-banner{
  display:grid;grid-template-columns:1fr auto;gap:1.5rem;align-items:center;
  background:var(--gold-wash);border:1px solid var(--gold-line);border-radius:var(--r-lg);
  padding:clamp(1.4rem,2.4vw,2rem);
}
.member-banner h3{margin-bottom:.5rem}
.member-banner p{color:var(--slate);font-size:.96rem;max-width:60ch}
.benefit-row{display:flex;gap:2rem;flex-wrap:wrap;margin-top:1.1rem}
.benefit .v{font-family:var(--display);font-size:1.6rem;font-weight:700;color:var(--gold-ink);line-height:1}
.benefit .l{font-size:.8rem;color:var(--slate);margin-top:.3rem}

/* ===== 20 Results area ================================================== */
.champion{
  background:var(--navy);color:#fff;border-radius:var(--r-lg);padding:clamp(1.8rem,3.4vw,3rem);
  display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:center;position:relative;overflow:hidden;
}
.champion::before{
  content:"";position:absolute;right:-90px;top:-90px;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(200,168,104,.26),rgba(200,168,104,0) 70%);
}
.champion .c-inner{position:relative;z-index:2}
.champion h2{font-size:clamp(1.8rem,3.4vw,2.6rem);margin-block:.7rem}
.champion .c-producer{color:var(--gold);font-weight:700;font-size:1.05rem}
.results-list{display:grid;gap:.75rem}
.result-row{
  display:grid;grid-template-columns:auto 1fr auto auto;gap:1.2rem;align-items:center;
  background:#fff;border:1px solid var(--line-l);border-radius:var(--r-md);padding:1rem 1.3rem;
  transition:border-color .16s ease,transform .16s ease;
}
.result-row:hover{border-color:var(--gold-line);transform:translateX(3px)}
.result-row .r-class{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep);min-width:14ch}
.result-row .r-product{font-weight:700}
.result-row .r-producer{font-size:.88rem;color:var(--slate)}

/* ===== 21 Blog and newsletter =========================================== */
.article-card{
  display:grid;grid-template-columns:1fr 1fr;gap:0;background:#fff;border:1px solid var(--line-l);
  border-radius:var(--r-lg);overflow:hidden;
}
.article-card img{width:100%;height:100%;object-fit:cover;min-height:280px}
.article-body{padding:clamp(1.6rem,3vw,2.6rem);display:flex;flex-direction:column;gap:.9rem;justify-content:center}
.article-meta{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--slate)}
.article-body h3{font-size:clamp(1.3rem,2.2vw,1.75rem)}

.newsletter{background:var(--navy);color:#fff;border-radius:var(--r-lg);padding:clamp(1.8rem,3.4vw,3rem)}
.newsletter .split{align-items:center}
.newsletter h2{margin-bottom:.7rem}
.newsletter-form{display:flex;gap:.7rem;flex-wrap:wrap}
.newsletter-form .field{flex:1;min-width:220px;margin:0}
.newsletter-form input{background:rgba(255,255,255,.08);border-color:var(--line-d);color:#fff}
.newsletter-form input::placeholder{color:rgba(255,255,255,.5)}
.newsletter-form input:focus{background:rgba(255,255,255,.14);border-color:var(--gold)}
.newsletter .small{font-size:.8rem;color:rgba(255,255,255,.6);margin-top:.9rem}

/* ===== 22 Accordion, tabs, modal ======================================== */
.acc{border:1px solid var(--line-l);border-radius:var(--r-lg);overflow:hidden;background:#fff}
.acc-item + .acc-item{border-top:1px solid var(--line-l)}
.acc-btn{
  width:100%;background:none;border:0;cursor:pointer;text-align:left;padding:1.15rem 1.4rem;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  font-family:var(--display);font-weight:700;font-size:1.02rem;transition:background .16s ease,color .16s ease;
}
.acc-btn:hover{background:var(--cream);color:var(--gold-ink)}
.acc-btn .plus{width:18px;height:18px;color:var(--gold-deep);transition:transform .24s ease;flex:none}
.acc-btn[aria-expanded="true"] .plus{transform:rotate(45deg)}
.acc-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s ease}
.acc-item.open .acc-body{grid-template-rows:1fr}
.acc-body > div{overflow:hidden}
.acc-body .inner{padding:0 1.4rem 1.3rem;color:var(--slate);font-size:.95rem}

.tabs{display:flex;gap:.3rem;border-bottom:1px solid var(--line-l);margin-bottom:1.8rem;overflow-x:auto}
.tab{
  background:none;border:0;border-bottom:3px solid transparent;padding:.85rem 1.1rem;cursor:pointer;
  font-weight:700;font-size:.92rem;color:var(--slate);white-space:nowrap;transition:all .16s ease;
}
.tab:hover{color:var(--gold-ink)}
.tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--gold)}
.tab-panel[hidden]{display:none}

.modal{
  position:fixed;inset:0;z-index:150;display:flex;align-items:center;justify-content:center;padding:22px;
  opacity:0;visibility:hidden;transition:opacity .24s ease,visibility .24s;
}
.modal.open{opacity:1;visibility:visible}
.modal-box{
  background:#fff;border-radius:var(--r-lg);max-width:640px;width:100%;max-height:86vh;overflow-y:auto;
  padding:clamp(1.6rem,3vw,2.4rem);transform:translateY(14px);transition:transform .26s cubic-bezier(.2,.7,.3,1);
  border-top:4px solid var(--gold);
}
.modal.open .modal-box{transform:none}
.modal-close{
  position:absolute;top:18px;right:18px;background:#fff;border:1px solid var(--line-l);border-radius:var(--r);
  width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
}

/* ===== 23 Page header and breadcrumb ==================================== */
.page-head{background:var(--cream);border-bottom:1px solid var(--line-l);padding-block:clamp(38px,5vw,68px)}
.page-head h1{margin-block:.9rem .9rem;max-width:20ch}
.page-head .lede{max-width:58ch}
.crumb{display:flex;gap:.5rem;align-items:center;font-size:.8rem;color:var(--slate);flex-wrap:wrap}
.crumb a:hover{color:var(--gold-ink)}
.crumb .sep{color:var(--gold-deep)}
.crumb [aria-current="page"]{color:var(--ink);font-weight:600}

/* ===== 24 Utilities ===================================================== */
.center{text-align:center}
.mt-0{margin-top:0}.mt-1{margin-top:.6rem}.mt-2{margin-top:1.2rem}.mt-3{margin-top:2rem}.mt-4{margin-top:3rem}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:.6rem}.mb-2{margin-bottom:1.2rem}.mb-3{margin-bottom:2rem}
.gold{color:var(--gold-deep)}
.muted{color:var(--slate)}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap;border:0;
}
.hide{display:none !important}
.sticky-side{position:sticky;top:calc(var(--hdr) + 10px)}

/* ===== 25 Motion and reveal ============================================= */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}
.reveal-d1{transition-delay:.08s}
.reveal-d2{transition-delay:.16s}
.reveal-d3{transition-delay:.24s}
.reveal-d4{transition-delay:.32s}

/* ===== 26 Responsive ==================================================== */
@media (max-width:1080px){
  .g-5,.tier-grid{grid-template-columns:repeat(3,1fr)}
  .judge-grid{grid-template-columns:repeat(2,1fr)}
  .finder-row{grid-template-columns:1fr 1fr;grid-auto-rows:auto}
  .finder-row .btn{grid-column:1/-1}
  .f-top{grid-template-columns:1fr 1fr}
}
@media (max-width:980px){
  nav.main,.nav-cta .btn{display:none}
  .menu-toggle{display:inline-flex}
  .finder{position:static}
  .split,.g-3,.g-4,.class-grid,.dir-grid{grid-template-columns:1fr}
  .champion,.member-banner{grid-template-columns:1fr}
  .article-card{grid-template-columns:1fr}
  .article-card img{min-height:220px}
  .stat-row{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(2){border-right:0}
  .criterion{grid-template-columns:1fr;gap:.7rem}
  .criterion .c-pts{text-align:left}
  .criterion .c-desc{grid-column:1}
  .result-row{grid-template-columns:1fr;gap:.5rem}
}
@media (max-width:720px){
  :root{--hdr:96px}
  .g-2,.tier-grid,.judge-grid,.finder-row{grid-template-columns:1fr}
  .f-top{grid-template-columns:1fr}
  .stat-row{grid-template-columns:1fr}
  .stat{border-right:0;border-bottom:1px solid var(--line-l)}
  .stat:last-child{border-bottom:0}
  .brand-lockup{display:none}
  .topbar .tb-right{display:none}
  .hero-badge{position:static;margin-top:1rem}
  .btn{width:100%}
  .btn-row .btn{width:auto;flex:1 1 auto}
  .steps .step{min-width:100%}
}

/* ===== 27 Reduced motion and print ===================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{opacity:1;transform:none}
  .stars[data-animate="true"] .on{opacity:1;transform:none}
  .criterion .c-bar span{transform:scaleX(1)}
}
@media print{
  header.site,.topbar,.drawer,.scrim,footer.site,.finder,.newsletter,.btn{display:none !important}
  body{color:#000;background:#fff}
  .card,.panel,.dir-card{border:1px solid #999;break-inside:avoid}
}

/* ===== 28 Image banners (added after brand assets supplied) ============= */
/* Replaces the flat .page-head on pages that have a supplied banner image.
   Navy scrim keeps the display type legible over photography. */
.page-hero{position:relative;background:var(--navy)}
.page-hero .bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
  z-index:0;
}
.page-hero::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(17,21,44,.93) 0%,rgba(17,21,44,.82) 46%,rgba(17,21,44,.42) 100%);
}
.page-hero .wrap{position:relative;z-index:2;padding-block:clamp(52px,7vw,104px);max-width:var(--max)}
.page-hero h1{color:#fff;margin-block:.9rem;max-width:19ch}
.page-hero .lede{color:rgba(255,255,255,.82);max-width:56ch}
.page-hero .eyebrow{color:var(--gold)}
.page-hero .crumb{color:rgba(255,255,255,.62)}
.page-hero .crumb .sep{color:var(--gold)}
.page-hero .crumb [aria-current="page"]{color:#fff}
.page-hero .crumb a:hover{color:var(--gold)}

/* portrait source images need a taller crop anchored higher up */
.page-hero.tall .bg{object-position:center 32%}

/* logo lockup banner: the image is artwork, not photography, so it sits on a
   light field at its natural proportions instead of being cropped */
.page-hero.is-logo{background:var(--cream)}
.page-hero.is-logo .wrap{z-index:2}
.page-hero.is-logo::after{display:none}
.page-hero.is-logo .bg{display:none}
.page-hero.is-logo h1,.page-hero.is-logo .crumb [aria-current="page"]{color:var(--ink)}
.page-hero.is-logo .lede{color:var(--slate)}
.page-hero.is-logo .eyebrow{color:var(--gold-deep)}
.page-hero.is-logo .crumb{color:var(--slate)}
.page-hero.is-logo .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,56px);align-items:center}
.page-hero.is-logo .logo-mark{
  background:#fff;border:1px solid var(--line-l);border-radius:var(--r-lg);
  padding:clamp(1.4rem,3vw,2.6rem);box-shadow:var(--shadow-s);
}
.page-hero.is-logo .logo-mark img{width:100%;height:auto}
@media (max-width:860px){
  .page-hero.is-logo .wrap{grid-template-columns:1fr}
}

/* the circular badge logo needs a light disc behind it on navy surfaces */
footer.site .brand-logo,.drawer-head .brand-logo{background:#fff;border-radius:50%;padding:.06em;box-sizing:content-box}
header.site .brand-logo{height:62px}
footer.site .f-brand .brand-logo{height:74px}
.f-endorse img{background:#fff;border-radius:var(--r);padding:3px}

/* homepage hero photography */
.hero-media img{aspect-ratio:16/9;object-fit:cover}
@media (max-width:980px){.hero-media img{aspect-ratio:2/1}}

/* ==========================================================================
   29  ART DIRECTION LAYER — v0.2.0
   Adds the display serif, the image system, the wave shape language, card
   variety, overlap and the build badge. Structure, content and navigation are
   unchanged; this layer only changes how the site looks.
   ========================================================================== */

:root{
  /* Display serif for headlines. Space Grotesk stays for eyebrows, labels,
     stats and UI so the ICA family resemblance still reads. */
  --serif:'Playfair Display','Iowan Old Style','Palatino Linotype',Palatino,Georgia,'Times New Roman',serif;
  --display:'Space Grotesk','Segoe UI',system-ui,-apple-system,sans-serif;
  --body:'Inter','Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
}

/* ---- 29.1 Awards voice: serif headlines, uppercase, generously tracked --- */
h1,h2{
  font-family:var(--serif);font-weight:700;text-transform:uppercase;
  letter-spacing:.055em;line-height:1.08;
}
.h-xl{font-size:clamp(2.15rem,4.6vw,3.7rem)}
.h-lg{font-size:clamp(1.8rem,3.4vw,2.75rem)}
.h-md{font-size:clamp(1.5rem,2.5vw,2.1rem)}
/* h3 and below stay Space Grotesk, sentence case, so UI still reads as ICA */
h3,h4,h5,h6{text-transform:none;letter-spacing:-.01em}
.champion h2{letter-spacing:.045em}
.article-body h3,.card h3,.class-card h3,.dir-card h3,.tier .t-name,.judge-body h4{font-family:var(--display)}
/* a lighter serif setting where a heading sits inside a card rather than leading a section */
.h-sm{font-family:var(--display);text-transform:none;letter-spacing:-.01em;line-height:1.2}

/* ---- 29.2 The image system ---------------------------------------------
   Four named, fixed aspect slots. Swapping a file can never shift layout.
   Every slot carries a warm base colour, so a missing or slow file degrades
   to a brand colour rather than a white gap. Slots carry data-shot, which
   doubles as the photography brief for the real shoot.                    */
.img-hero,.img-feature,.img-card,.img-portrait{
  position:relative;overflow:hidden;border-radius:var(--r-lg);
  background:var(--cream-2);display:block;
}
.img-hero{aspect-ratio:16/10}
.img-feature{aspect-ratio:4/3}
.img-card{aspect-ratio:3/2}
.img-portrait{aspect-ratio:1/1}
.img-hero img,.img-feature img,.img-card img,.img-portrait img{
  width:100%;height:100%;object-fit:cover;object-position:center;
}
.img-navy{background:var(--navy)}
.img-gold{background:var(--gold-soft)}
.img-square{border-radius:var(--r-lg)}
/* a soft warm wash so photography always sits with the palette */
.img-warm::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(200,168,104,0) 55%,rgba(110,87,34,.24) 100%);
}
.img-caption{
  position:absolute;left:0;right:0;bottom:0;padding:1.5rem 1.4rem .95rem;color:#fff;
  background:linear-gradient(180deg,rgba(17,21,44,0),rgba(17,21,44,.82));
  font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;font-family:var(--display);font-weight:700;
}

/* ---- 29.3 Wave shape language ------------------------------------------
   Navy bands end in a scoop silhouette rather than a straight rule. Used two
   or three times a page, never on every section.                          */
.has-wave{position:relative;padding-bottom:calc(var(--sec) + 3.5vw)}
.wave{
  position:absolute;left:0;right:0;bottom:-1px;width:100%;height:auto;
  display:block;pointer-events:none;z-index:2;
}
.wave path{fill:var(--cream)}
.wave.to-white path{fill:#fff}
.wave.to-cream path{fill:var(--cream)}
.wave.to-navy path{fill:var(--navy)}
.page-hero.has-wave .wrap{padding-bottom:clamp(64px,8vw,120px)}

/* ---- 29.4 Card variety --------------------------------------------------
   Not every block is a white rounded rectangle.                           */
.card-bare{
  background:none;border:0;border-top:2px solid var(--gold);border-radius:0;
  padding:1.5rem 0 0;
}
.card-bare .card-num{color:var(--gold-deep);opacity:.5}
.card-bare:hover{transform:none;box-shadow:none}
.band{
  background:var(--navy);color:#fff;border-radius:var(--r-lg);overflow:hidden;
  display:grid;grid-template-columns:1fr 1fr;align-items:stretch;
}
.band .band-body{padding:clamp(1.7rem,3.4vw,3rem);display:flex;flex-direction:column;justify-content:center;gap:1rem}
.band .img-feature,.band .img-card{border-radius:0;aspect-ratio:auto;min-height:320px}
.band p{color:rgba(255,255,255,.8)}
@media (max-width:860px){.band{grid-template-columns:1fr}}

/* ---- 29.5 Overlap: designed, not assembled ----------------------------- */
.overlap-up{margin-top:clamp(-92px,-6vw,-48px);position:relative;z-index:5}
.tier-grid.overlap-up .tier{box-shadow:var(--shadow)}
.roundel-break{
  position:relative;z-index:6;margin-bottom:clamp(-40px,-3vw,-24px);
  width:clamp(84px,9vw,124px);height:auto;
}
/* the roundel used large, and as a watermark */
.mark-watermark{
  position:absolute;right:-6%;top:50%;transform:translateY(-50%);
  width:min(46%,420px);opacity:.09;pointer-events:none;z-index:0;
}
.champion .c-inner,.champion .stars{position:relative;z-index:2}
.mark-hero{width:clamp(96px,10vw,150px);height:auto;margin-bottom:1.4rem}

/* the five star arc from the roundel, reused as a divider motif */
.star-arc{display:flex;justify-content:center;gap:.5rem;margin-block:clamp(26px,3.4vw,44px)}
.star-arc svg{width:16px;height:16px;color:var(--gold);opacity:.5}
.star-arc svg:nth-child(3){width:24px;height:24px;opacity:1;margin-top:-4px}
.star-arc svg:nth-child(2),.star-arc svg:nth-child(4){width:20px;height:20px;opacity:.75;margin-top:-2px}

/* ---- 29.6 Hero: no dead column ----------------------------------------- */
.hero{padding-block:0;background:var(--cream)}
.hero .wrap.split{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  gap:clamp(28px,4vw,64px);align-items:center;padding-right:0;max-width:none;
  padding-left:max(26px,calc((100vw - var(--max))/2 + 26px));
}
.hero-copy{padding-block:clamp(48px,6vw,92px)}
.hero .hero-media{align-self:stretch}
/* photograph bleeds off the right edge of the viewport */
.hero .hero-media .img-hero{
  height:100%;min-height:clamp(360px,54vw,660px);aspect-ratio:auto;
  border-radius:var(--r-lg) 0 0 var(--r-lg);
}
.hero .hero-media img{box-shadow:none;border-radius:0}
.hero-badge{
  position:absolute;left:-26px;bottom:34px;z-index:4;
}
@media (max-width:980px){
  .hero .wrap.split{grid-template-columns:1fr;padding-left:26px;padding-right:26px}
  .hero .hero-media .img-hero{border-radius:var(--r-lg);min-height:320px}
  .hero-badge{position:static;margin-top:1rem}
}

/* ---- 29.7 Stats band: four across, never three then one ---------------- */
.stat-band{background:var(--navy);color:#fff;border-radius:var(--r-lg);padding:clamp(1.4rem,2.4vw,2.2rem) 1rem}
.stat-band .stat-row{grid-template-columns:repeat(4,1fr)}
.stat-band .stat{border-color:var(--line-d)}
.stat-band .stat .v{color:var(--gold);font-family:var(--display)}
.stat-band .stat .l{color:rgba(255,255,255,.7)}
@media (max-width:860px){
  .stat-band .stat-row{grid-template-columns:repeat(2,1fr)}
  .stat-band .stat:nth-child(2){border-right:0}
  .stat-band .stat:nth-child(1),.stat-band .stat:nth-child(2){border-bottom:1px solid var(--line-d);padding-bottom:1.4rem}
}
@media (max-width:520px){
  .stat-band .stat-row{grid-template-columns:repeat(2,1fr)}
}

/* ---- 29.8 Sponsors: real logo artwork --------------------------------- */
/* Greyscale by default so seven different brand palettes do not fight the
   navy and gold. Full colour on hover. Normalised on height, with per logo
   optical adjustment because a wordmark and a roundel at the same pixel
   height do not read at the same visual weight. */
.sponsor-row{gap:clamp(22px,3.4vw,52px);row-gap:clamp(18px,2.4vw,32px)}
.sponsor-row a{
  display:inline-flex;align-items:center;justify-content:center;
  transition:transform .22s ease;
}
.sponsor-row img{
  height:clamp(30px,3.2vw,44px);width:auto;
  filter:grayscale(1);opacity:.58;
  transition:filter .22s ease,opacity .22s ease;
}
.sponsor-row a:hover img,.sponsor-row a:focus-visible img{filter:grayscale(0);opacity:1}
.sponsor-row a:hover{transform:translateY(-2px)}
/* roundel and stacked marks need more height to match wordmark weight */
.sponsor-row a[data-mark="stacked"] img{height:clamp(44px,4.6vw,64px)}
/* a knockout white logo is invisible on the light strip, so it sits on a
   navy chip until the client supplies a colour on light version */
.sponsor-row a[data-mark="knockout"]{
  background:var(--navy);border-radius:var(--r-md);padding:.5rem .8rem;
}
.sponsor-row a[data-mark="knockout"] img{opacity:.75;height:clamp(38px,3.8vw,52px)}
.sponsor-row a[data-mark="knockout"]:hover img{opacity:1}

/* ---- 29.9 Placeholder imagery ribbon ----------------------------------- */
.ph-ribbon{
  position:fixed;left:50%;transform:translateX(-50%);bottom:18px;z-index:200;
  display:flex;align-items:center;gap:.9rem;max-width:min(620px,92vw);
  background:var(--navy);color:#fff;border-radius:999px;padding:.7rem 1rem .7rem 1.3rem;
  box-shadow:0 22px 44px -22px rgba(10,13,30,.7);font-size:.84rem;
}
.ph-ribbon strong{color:var(--gold);font-weight:700}
.ph-ribbon button{
  background:none;border:1px solid var(--line-d);color:#fff;border-radius:999px;
  width:30px;height:30px;flex:none;cursor:pointer;display:inline-flex;
  align-items:center;justify-content:center;
}
.ph-ribbon button:hover{border-color:var(--gold);color:var(--gold)}
.ph-ribbon svg{width:14px;height:14px}
@media (max-width:600px){.ph-ribbon{font-size:.78rem;padding-left:1rem}}

/* ---- 29.10 Build badge -------------------------------------------------- */
.build-badge{
  font-size:.74rem;color:rgba(255,255,255,.42);letter-spacing:.06em;
  font-variant-numeric:tabular-nums;
}

/* ---- 29.11 Motion: offset entrances ------------------------------------ */
.reveal-x{opacity:0;transform:translateX(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
.reveal-x.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal-x{opacity:1;transform:none}
}


/* ==========================================================================
   30  LOGO PROMINENCE — v0.3.0
   Client feedback: the roundel is the mark the public needs to recognise, so
   it works harder across the site rather than sitting small in the header.
   ========================================================================== */
header.site .brand-logo{height:76px}
header.site .wrap{min-height:96px}
:root{--hdr:134px}
@media (max-width:720px){
  header.site .brand-logo{height:58px}
  header.site .wrap{min-height:76px}
  :root{--hdr:100px}
}
.mark-hero{width:clamp(132px,14vw,200px)}
footer.site .f-brand .brand-logo{height:96px}

/* the roundel sits half over the section boundary on photographic banners */
.page-hero .mark-banner{
  position:absolute;right:clamp(20px,6vw,86px);bottom:0;transform:translateY(38%);
  width:clamp(88px,11vw,152px);height:auto;z-index:6;
  filter:drop-shadow(0 18px 30px rgba(10,13,30,.45));
}
@media (max-width:860px){.page-hero .mark-banner{display:none}}

/* roundel leading a section head */
.mark-section{width:clamp(64px,7vw,96px);height:auto;margin-bottom:1.1rem}
.sec-head.center .mark-section{margin-inline:auto}
.mark-watermark{opacity:.11}


/* ==========================================================================
   31  CLASS ROUNDELS — v0.5.0
   The 2027 class marks, used on the class cards and in the entry form so the
   thing an entrant is competing for is visible while they choose.
   ========================================================================== */
.class-mark{width:clamp(74px,8vw,96px);height:auto;margin-bottom:.9rem}
.class-card{align-items:flex-start}
.class-card .class-mark{align-self:flex-start}

/* in the entry form the mark sits alongside the checkbox */
.check .class-mark{
  width:58px;flex:none;margin:0 .2rem 0 0;align-self:flex-start;
  transition:transform .18s ease;
}
.check:hover .class-mark,.check.selected .class-mark{transform:scale(1.06)}
@media (max-width:520px){.check .class-mark{width:46px}}


/* Food show band collapses on small screens */
@media (max-width:820px){
  .panel[style*="grid-template-columns:auto 1fr auto"]{grid-template-columns:1fr !important;text-align:left}
}


/* Quantity field on unlimited classes. Hidden until the class is selected,
   because a disabled number box next to an unticked box is just noise. */
.check .qty{
  width:74px;flex:none;align-self:center;margin-left:auto;text-align:center;
  padding:.45rem .4rem;font-size:.9rem;
}
.check .qty:disabled{opacity:0;pointer-events:none}
.check.selected .qty:disabled{opacity:.4}