/* ==========================================================================
   Panorama Vision, The Optical Store
   Design system v3. Mobile first, no dependencies.

   Brand tokens are unchanged from the manual: navy, sky, cream, gold.
   Everything else is derived. Every neutral is biased warm or navy.

   FONTS: the manual specifies Columbia Titling, Helvetica Now and Symphony,
   all commercially licensed. Closest free equivalents are self-hosted below.
   To swap in the licensed originals, add their @font-face rules and change
   only the three --font-* variables.
   ========================================================================== */

@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400;font-display:swap;
  src:url('playfair-display-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:500;font-display:swap;
  src:url('playfair-display-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:600;font-display:swap;
  src:url('playfair-display-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:500;font-display:swap;
  src:url('playfair-display-latin-500-italic.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;
  src:url('inter-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;
  src:url('inter-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;
  src:url('inter-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'Pinyon Script';font-style:normal;font-weight:400;font-display:swap;
  src:url('pinyon-script-latin-400-normal.woff2') format('woff2');}

:root{
  /* Brand, from the manual */
  --navy:#162351;
  --sky:#d2e9ff;
  --cream:#f2e7d3;
  --gold:#a37e51;

  /* Derived surfaces */
  --paper:#fbf8f1;
  --paper-2:#fffdf8;
  --navy-deep:#0c1230;
  --navy-soft:#1e2f68;
  --sky-wash:#e8f2fd;
  --sky-deep:#c2ddf7;
  --cream-deep:#e8d9bd;
  --gold-deep:#7d5f3c;
  --gold-light:#c29d70;
  --gold-pale:rgba(163,126,81,0.12);
  --gold-faint:rgba(163,126,81,0.05);

  --ink:#141f47;
  --ink-2:rgba(20,31,71,0.74);
  --ink-3:rgba(20,31,71,0.54);
  --ink-4:rgba(20,31,71,0.38);
  --rule:rgba(22,35,81,0.12);
  --rule-strong:rgba(22,35,81,0.22);

  --on-navy:#f4ecdd;
  --on-navy-2:rgba(244,236,221,0.78);
  --on-navy-3:rgba(244,236,221,0.52);
  --rule-dark:rgba(244,236,221,0.15);

  --font-display:'Playfair Display','Columbia Titling',Georgia,'Times New Roman',serif;
  --font-ui:'Inter','Helvetica Now','Helvetica Neue',Helvetica,Arial,sans-serif;
  --font-script:'Pinyon Script','Symphony','Palatino Linotype',cursive;

  /* Type scale */
  --t-3xs:0.625rem;
  --t-2xs:0.6875rem;
  --t-xs:0.78125rem;
  --t-sm:0.875rem;
  --t-base:1rem;
  --t-md:1.0625rem;
  --t-lg:1.3125rem;
  --t-xl:1.6875rem;
  --t-2xl:2.125rem;
  --t-3xl:2.75rem;

  /* Spacing rhythm, one scale used everywhere */
  --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px; --s-5:22px;
  --s-6:30px; --s-7:40px; --s-8:54px; --s-9:72px; --s-10:96px;

  --shell:1240px;
  --shell-narrow:820px;
  --gutter:20px;
  --bar:44px;
  --radius:3px;
  --radius-lg:6px;

  --shadow-xs:0 1px 3px rgba(22,35,81,0.05);
  --shadow-sm:0 3px 14px rgba(22,35,81,0.07);
  --shadow-md:0 16px 40px rgba(22,35,81,0.11);
  --shadow-lg:0 28px 64px rgba(22,35,81,0.16);
  --shadow-gold:0 10px 26px rgba(163,126,81,0.26);

  --ease:cubic-bezier(.2,.7,.2,1);
}

@media(min-width:760px){:root{--gutter:32px;}}
@media(min-width:1200px){:root{--gutter:44px;}}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-ui);
  font-size:var(--t-base);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  padding-bottom:calc(var(--bar) + 12px);
}
@media(min-width:1000px){body{padding-bottom:0;}}

svg{display:block;max-width:100%;}
img{display:block;max-width:100%;height:auto;}
a{color:inherit;text-decoration:none;}
p{margin:0 0 1.05em;}
p:last-child{margin-bottom:0;}
ul,ol{margin:0;padding:0;list-style:none;}
button{font:inherit;color:inherit;}
strong,b{font-weight:600;}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:500;
  color:var(--ink);
  margin:0 0 0.5em;
  line-height:1.14;
  letter-spacing:-0.008em;
  text-wrap:pretty;
}
/* Balance only where a heading has room to be balanced. On narrow screens
   balancing produces short orphan lines that read as misalignment. */
@media(min-width:760px){h1,h2,h3,h4{text-wrap:balance;}}
h1{font-size:clamp(2.1rem,7vw,3.5rem);line-height:1.06;letter-spacing:-0.02em;}
h2{font-size:clamp(1.6rem,4.4vw,var(--t-2xl));letter-spacing:-0.014em;}
h3{font-size:var(--t-lg);line-height:1.3;letter-spacing:-0.004em;}
h4{font-size:var(--t-base);}

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

/* ==========================================================================
   Layout primitives
   ========================================================================== */
.shell{max-width:var(--shell);margin:0 auto;padding:0 var(--gutter);}
.shell-narrow{max-width:var(--shell-narrow);margin:0 auto;padding:0 var(--gutter);}

.band{padding:var(--s-8) 0;}
@media(min-width:900px){.band{padding:var(--s-10) 0;}}
.band-sm{padding:var(--s-7) 0;}
@media(min-width:900px){.band-sm{padding:var(--s-8) 0;}}
.band-tight{padding-top:0;}

.on-navy{
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(163,126,81,0.16) 0%, transparent 52%),
    radial-gradient(90% 80% at 0% 100%, rgba(210,233,255,0.08) 0%, transparent 55%),
    var(--navy);
  color:var(--on-navy);
}
.on-navy h1,.on-navy h2,.on-navy h3,.on-navy h4{color:var(--on-navy);}
.on-navy p{color:var(--on-navy-2);}
.on-navy .lede{color:var(--on-navy-2);}
.on-sky{background:var(--sky-wash);}
.on-cream{background:var(--cream);}
.on-paper2{background:var(--paper-2);}

.skip{
  position:absolute;left:-9999px;top:0;z-index:300;
  background:var(--navy);color:var(--on-navy);padding:12px 20px;font-size:var(--t-sm);
}
.skip:focus{left:12px;top:12px;}

/* ==========================================================================
   Editorial furniture
   ========================================================================== */
.label{
  display:inline-flex;align-items:center;gap:10px;
  font-size:var(--t-2xs);
  letter-spacing:0.22em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--gold);
  margin:0 0 var(--s-4);
}
.label::before{content:"";display:block;width:24px;height:1px;background:var(--gold);flex:none;}
.on-navy .label{color:var(--gold-light);}
.on-navy .label::before{background:var(--gold-light);}

.lede{font-size:var(--t-md);color:var(--ink-2);max-width:62ch;line-height:1.65;}
.hr{height:1px;background:var(--rule);border:0;margin:0;}

/* Section head. One consistent left-aligned stack, so nothing drifts. */
.head{max-width:70ch;margin:0 0 var(--s-7);}
.head h1,.head h2{margin-bottom:var(--s-3);}
.head .lede{margin:0;}
.head-center{margin-left:auto;margin-right:auto;text-align:center;}
.head-center .label{justify-content:center;}
.head-center .lede{margin-left:auto;margin-right:auto;}
@media(min-width:900px){.head{margin-bottom:var(--s-8);}}

/* Split head: heading left, supporting copy right. Aligned to a real grid. */
.head-split{display:grid;gap:var(--s-4);margin:0 0 var(--s-7);max-width:none;}
@media(min-width:900px){
  .head-split{grid-template-columns:minmax(0,1fr) minmax(0,0.85fr);gap:var(--s-8);align-items:end;margin-bottom:var(--s-8);}
  .head-split .lede{margin:0 0 6px;}
}

/* ==========================================================================
   Buttons and links
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:48px;padding:13px 26px;
  font-family:var(--font-ui);font-size:var(--t-xs);font-weight:600;
  letter-spacing:0.11em;text-transform:uppercase;
  border:1px solid transparent;border-radius:var(--radius);cursor:pointer;
  transition:background-color .18s var(--ease),color .18s var(--ease),
             border-color .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease);
}
.btn svg{width:16px;height:16px;flex:none;}
.btn-gold{background:var(--gold);color:#fff;box-shadow:var(--shadow-gold);}
.btn-gold:hover{background:var(--gold-deep);transform:translateY(-2px);box-shadow:0 16px 32px rgba(163,126,81,0.34);}
.btn-navy{background:var(--navy);color:var(--on-navy);}
.btn-navy:hover{background:var(--navy-deep);transform:translateY(-2px);box-shadow:var(--shadow-md);}
.btn-line{border-color:var(--rule-strong);color:var(--ink);background:transparent;}
.btn-line:hover{border-color:var(--navy);background:var(--navy);color:var(--on-navy);transform:translateY(-2px);}
.btn-line-light{border-color:var(--rule-dark);color:var(--on-navy);background:transparent;}
.btn-line-light:hover{background:var(--on-navy);color:var(--navy);transform:translateY(-2px);}
.btn-sm{min-height:40px;padding:9px 18px;font-size:var(--t-2xs);}
.btns{display:flex;flex-wrap:wrap;gap:var(--s-3);}
/* Below 560px a wrapped button row leaves each button a different width and
   centred in its own line. Stacking full width keeps every edge on one line. */
@media(max-width:559px){
  .btns{flex-direction:column;align-items:stretch;}
  .btns .btn{width:100%;}
}
.btns-center{justify-content:flex-start;}

.tlink{
  display:inline-flex;align-items:center;gap:7px;position:relative;
  font-size:var(--t-xs);font-weight:600;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--gold);padding-bottom:3px;white-space:nowrap;
}
.tlink::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--gold);transform:scaleX(0.3);transform-origin:left;
  transition:transform .28s var(--ease);
}
.tlink:hover::after{transform:scaleX(1);}
.tlink .arw{transition:transform .28s var(--ease);}
.tlink:hover .arw{transform:translateX(3px);}
.on-navy .tlink{color:var(--gold-light);}
.on-navy .tlink::after{background:var(--gold-light);}

.inline-link{color:var(--gold-deep);border-bottom:1px solid var(--gold-pale);transition:border-color .18s;}
.inline-link:hover{border-bottom-color:var(--gold);}
.on-navy .inline-link{color:var(--gold-light);}

/* ==========================================================================
   Live open/closed status
   ========================================================================== */
.status{
  display:inline-flex;align-items:center;gap:8px;
  font-size:var(--t-2xs);letter-spacing:0.12em;text-transform:uppercase;font-weight:600;
}
.status .dot{width:6px;height:6px;border-radius:50%;background:var(--gold);flex:none;}
.status.is-open .dot{background:#3f8f6b;box-shadow:0 0 0 3px rgba(63,143,107,0.18);}
.status.is-shut .dot{background:var(--gold);opacity:0.8;}

/* ==========================================================================
   Top line
   ========================================================================== */
.topline{
  background:var(--navy-deep);color:var(--on-navy-2);
  font-size:var(--t-2xs);letter-spacing:0.06em;
  border-bottom:1px solid rgba(163,126,81,0.24);
}
.topline-in{
  max-width:var(--shell);margin:0 auto;padding:8px var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
}
.topline .status{color:var(--on-navy);}
.topline a{color:var(--on-navy-2);transition:color .16s;}
.topline a:hover{color:var(--gold-light);}
.topline-right{display:none;}
@media(min-width:760px){.topline-right{display:flex;gap:var(--s-5);align-items:center;}}
.topline-right a{display:inline-flex;align-items:center;gap:6px;}
.topline-right svg{width:12px;height:12px;opacity:0.7;}

/* ==========================================================================
   Masthead
   ========================================================================== */
.masthead{
  position:sticky;top:0;z-index:120;
  background:rgba(251,248,241,0.94);
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--rule);
  transition:box-shadow .22s var(--ease),background-color .22s;
}
.masthead.is-stuck{box-shadow:0 2px 20px rgba(22,35,81,0.08);}
.masthead-in{
  max-width:var(--shell);margin:0 auto;padding:0 var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-5);
  min-height:72px;
  transition:min-height .22s var(--ease);
}
.masthead.is-stuck .masthead-in{min-height:60px;}

.wordmark{display:flex;flex-direction:column;line-height:1;padding:8px 0;flex:none;}
.wordmark b{
  font-family:var(--font-display);font-weight:600;
  font-size:1.1875rem;letter-spacing:0.085em;text-transform:uppercase;color:var(--ink);
}
.wordmark span{
  font-size:0.5rem;letter-spacing:0.34em;text-transform:uppercase;
  color:var(--gold);font-weight:600;margin-top:5px;
}

.masthead-actions{display:flex;align-items:center;gap:var(--s-2);}
.masthead .btn{min-height:42px;padding:10px 20px;}
.desk-only{display:none;}
@media(min-width:1080px){.desk-only{display:inline-flex;}}

.burger{
  width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--rule-strong);border-radius:var(--radius);cursor:pointer;
  transition:border-color .16s,background-color .16s;
}
.burger:hover{border-color:var(--navy);background:var(--gold-faint);}
.burger i{position:relative;display:block;width:18px;height:1.5px;background:var(--ink);}
.burger i::before,.burger i::after{
  content:"";position:absolute;left:0;width:18px;height:1.5px;background:var(--ink);
}
.burger i::before{top:-5.5px;}
.burger i::after{top:5.5px;}
@media(min-width:1080px){.burger{display:none;}}

/* ==========================================================================
   Desktop navigation, full-width mega panels
   ========================================================================== */
.nav{display:none;}
@media(min-width:1080px){
  .nav{display:block;}
  .nav > ul{display:flex;align-items:stretch;gap:0;}
  .nav > ul > li{display:flex;}
  .navlink{
    display:inline-flex;align-items:center;gap:6px;
    padding:0 14px;min-height:44px;
    font-size:var(--t-xs);font-weight:500;letter-spacing:0.09em;text-transform:uppercase;
    background:transparent;border:0;cursor:pointer;
    color:var(--ink);position:relative;white-space:nowrap;
    transition:color .16s;
  }
  .navlink::after{
    content:"";position:absolute;left:14px;right:14px;bottom:8px;height:1px;
    background:var(--gold);transform:scaleX(0);transform-origin:left;
    transition:transform .26s var(--ease);
  }
  .navlink:hover{color:var(--gold-deep);}
  .navlink:hover::after,
  .navlink[aria-current="page"]::after,
  .navlink[aria-expanded="true"]::after{transform:scaleX(1);}
  .navlink[aria-current="page"]{color:var(--gold-deep);}
  .navlink .chev{
    width:6px;height:6px;border-right:1.4px solid currentColor;border-bottom:1.4px solid currentColor;
    transform:rotate(45deg) translateY(-2px);transition:transform .22s var(--ease);opacity:0.55;
  }
  .navlink[aria-expanded="true"] .chev{transform:rotate(-135deg) translateY(0);}

  /* Panel spans the full masthead width, so columns line up with the page grid */
  .megawrap{
    position:absolute;left:0;right:0;top:100%;
    background:var(--paper-2);
    border-top:1px solid var(--gold);
    border-bottom:1px solid var(--rule);
    box-shadow:0 24px 48px rgba(22,35,81,0.12);
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s;
    z-index:130;
  }
  .megawrap[data-open="true"]{opacity:1;visibility:visible;transform:translateY(0);}
  .mega{
    max-width:var(--shell);margin:0 auto;padding:var(--s-7) var(--gutter);
    display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:var(--s-8);
  }
  .mega-cols{display:grid;gap:var(--s-6) var(--s-7);}
  .mega-2{grid-template-columns:repeat(2,minmax(0,1fr));}
  .mega-3{grid-template-columns:repeat(3,minmax(0,1fr));}
  .mega-4{grid-template-columns:repeat(4,minmax(0,1fr));}
  .mega h4{
    font-family:var(--font-ui);
    font-size:var(--t-2xs);letter-spacing:0.2em;text-transform:uppercase;
    color:var(--gold);font-weight:600;margin:0 0 var(--s-3);
    padding-bottom:var(--s-2);border-bottom:1px solid var(--rule);
  }
  .mega-item{
    display:flex;gap:12px;align-items:flex-start;
    padding:9px 12px;margin:0 -12px;border-radius:var(--radius);
    transition:background-color .16s;
  }
  .mega-item:hover{background:var(--gold-pale);}
  .mega-item .mi-ico{
    width:34px;height:19px;flex:none;color:var(--gold);margin-top:5px;
  }
  .mega-item b{
    display:block;font-family:var(--font-display);font-weight:500;
    font-size:var(--t-base);color:var(--ink);margin-bottom:1px;line-height:1.3;
  }
  .mega-item span{display:block;font-size:var(--t-xs);color:var(--ink-3);line-height:1.5;}
  .mega-list li{margin-bottom:2px;}
  .mega-list a{
    display:block;padding:4px 10px;margin:0 -10px;border-radius:var(--radius);
    font-size:var(--t-sm);color:var(--ink-2);transition:color .14s,background-color .14s;
  }
  .mega-list a:hover{color:var(--gold-deep);background:var(--gold-pale);}
  .mega-aside{
    background:var(--cream);border:1px solid var(--cream-deep);
    padding:var(--s-5);border-radius:var(--radius);align-self:start;
  }
  .mega-aside h4{border:0;padding:0;margin-bottom:var(--s-2);}
  .mega-aside p{font-size:var(--t-xs);color:var(--ink-2);line-height:1.6;margin:0 0 var(--s-4);}
}

/* ==========================================================================
   Mobile drawer
   ========================================================================== */
.drawer{
  position:fixed;inset:0;z-index:200;
  background:var(--paper);
  display:flex;flex-direction:column;
  transform:translateY(-100%);
  transition:transform .34s var(--ease);
  overflow-y:auto;overscroll-behavior:contain;
}
.drawer[data-open="true"]{transform:translateY(0);}
.drawer-top{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
  padding:14px var(--gutter);border-bottom:1px solid var(--rule);
  position:sticky;top:0;background:var(--paper);z-index:2;
}
.drawer-close{
  width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--rule-strong);border-radius:var(--radius);cursor:pointer;
  font-size:22px;line-height:1;
}
.drawer-body{padding:var(--s-2) var(--gutter) var(--s-6);flex:1;}
.drawer-body > ul > li{border-bottom:1px solid var(--rule);}
.drawer-row{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 2px;background:transparent;border:0;cursor:pointer;text-align:left;
  font-family:var(--font-display);font-size:var(--t-lg);color:var(--ink);
}
.drawer-row[aria-current="page"]{color:var(--gold-deep);}
.drawer-row .chev{
  width:8px;height:8px;border-right:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);
  transform:rotate(45deg);transition:transform .22s var(--ease);flex:none;
}
.drawer-row[aria-expanded="true"] .chev{transform:rotate(-135deg);}
.drawer-sub{display:none;padding:0 0 var(--s-4) 2px;}
.drawer-sub[data-open="true"]{display:block;}
.drawer-sub > li + li{margin-top:2px;}
.drawer-sub a{display:block;padding:9px 0;font-size:var(--t-sm);color:var(--ink-2);}
.drawer-sub a:hover{color:var(--gold-deep);}
.drawer-sub .sub-note{display:block;font-size:var(--t-xs);color:var(--ink-3);line-height:1.5;}
.drawer-sub .sub-head{
  font-size:var(--t-2xs);letter-spacing:0.2em;text-transform:uppercase;color:var(--gold);
  font-weight:600;margin:var(--s-3) 0 var(--s-1);
}
.drawer-foot{
  border-top:1px solid var(--rule);padding:var(--s-5) var(--gutter) var(--s-6);
  display:grid;gap:var(--s-3);background:var(--cream);
}
.drawer-foot .status{color:var(--ink);}
@media(min-width:1080px){.drawer,.drawer-top{display:none;}}

/* ==========================================================================
   Breadcrumb
   ========================================================================== */
.crumbs{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-size:var(--t-xs);color:var(--ink-3);padding:var(--s-5) 0 0;
}
.crumbs li{display:flex;align-items:center;gap:8px;}
.crumbs li + li::before{content:"/";color:var(--ink-4);}
.crumbs a:hover{color:var(--gold-deep);}
.crumbs [aria-current]{color:var(--ink-2);}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  padding:var(--s-7) 0 var(--s-6);position:relative;overflow:hidden;
  background:
    radial-gradient(110% 150% at 100% 0%, var(--sky-wash) 0%, transparent 58%),
    var(--paper);
}
.hero::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--navy) 0%,var(--gold) 48%,var(--navy) 100%);
}
@media(min-width:960px){
  .hero{padding:var(--s-9) 0 var(--s-8);}
  .hero-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,0.9fr);gap:var(--s-9);align-items:center;}
}
.hero h1{
  font-size:clamp(2.15rem,6.2vw,3.6rem);
  line-height:1.05;letter-spacing:-0.022em;margin-bottom:var(--s-5);
  text-wrap:pretty;
}
.hero h1 em{font-style:italic;font-weight:500;color:var(--gold-deep);}
.hero .btns{margin-top:var(--s-6);}
.hero-meta{
  display:flex;flex-wrap:wrap;gap:10px var(--s-6);align-items:center;
  margin:var(--s-6) 0 0;padding-top:var(--s-5);border-top:1px solid var(--rule);
  font-size:var(--t-xs);color:var(--ink-3);letter-spacing:0.03em;
}
.hero-meta span{position:relative;padding-left:16px;}
.hero-meta span::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:6px;height:6px;border-radius:50%;background:var(--gold);
}

/* Snellen chart, the signature graphic. Built only from type. */
.snellen{
  margin:var(--s-7) 0 0;
  border:1px solid var(--rule);
  background:var(--paper-2);
  box-shadow:var(--shadow-md);
  padding:var(--s-6) var(--s-5) var(--s-5);
  position:relative;border-radius:var(--radius);
}
@media(min-width:960px){.snellen{margin:0;padding:var(--s-7) var(--s-7) var(--s-6);}}
.snellen::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--gold) 0%,var(--navy) 100%);
  border-radius:var(--radius) 0 0 var(--radius);
}
.snellen-cap{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font-size:var(--t-2xs);letter-spacing:0.2em;text-transform:uppercase;
  color:var(--gold);font-weight:600;margin-bottom:var(--s-5);
}
.snellen-cap span:last-child{
  font-family:var(--font-display);font-size:var(--t-lg);color:var(--navy);
  letter-spacing:0;font-weight:600;
}
.snellen ol{display:grid;gap:13px;}
.snellen li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:14px;align-items:baseline;}
.snellen .acuity{
  font-size:var(--t-2xs);color:var(--ink-4);
  font-variant-numeric:tabular-nums;letter-spacing:0.04em;
}
.snellen .row{
  font-family:var(--font-display);font-weight:600;color:var(--ink);
  text-transform:uppercase;line-height:1;
}
.snellen li:nth-child(1) .row{font-size:clamp(1.65rem,5.4vw,2.4rem);letter-spacing:0.02em;color:var(--navy);}
.snellen li:nth-child(2) .row{font-size:clamp(1.18rem,3.6vw,1.6rem);letter-spacing:0.06em;}
.snellen li:nth-child(3) .row{font-size:clamp(0.8rem,2.4vw,1.05rem);letter-spacing:0.13em;}
.snellen li:nth-child(4) .row{font-size:clamp(0.62rem,1.7vw,0.75rem);letter-spacing:0.2em;color:var(--ink-2);}
.snellen li:nth-child(5) .row{
  font-size:clamp(0.5rem,1.3vw,0.6rem);letter-spacing:0.26em;color:var(--gold-deep);
  font-family:var(--font-ui);font-weight:600;line-height:1.5;
}
.snellen-off li:nth-child(n+3) .row{filter:blur(2.4px);opacity:0.55;}
.snellen.is-clear li .row{filter:blur(0);opacity:1;transition:filter .9s var(--ease),opacity .9s var(--ease);}
.snellen.is-clear li:nth-child(3) .row{transition-delay:.15s;}
.snellen.is-clear li:nth-child(4) .row{transition-delay:.3s;}
.snellen.is-clear li:nth-child(5) .row{transition-delay:.45s;}
.snellen-foot{
  margin-top:var(--s-5);padding-top:var(--s-4);border-top:1px solid var(--rule);
  font-size:var(--t-xs);color:var(--ink-3);
}

/* Page hero for interior pages */
.phero{
  position:relative;
  background:
    radial-gradient(100% 140% at 100% 0%, var(--sky-wash) 0%, transparent 62%),
    var(--paper);
  border-bottom:1px solid var(--rule);
  padding:0 0 var(--s-8);
}
.phero .head{margin-bottom:0;}
.phero-in{padding-top:var(--s-6);}
@media(min-width:900px){.phero{padding-bottom:var(--s-9);}}
.phero-grid{display:grid;gap:var(--s-6);}
@media(min-width:960px){
  .phero-grid{grid-template-columns:minmax(0,1.25fr) minmax(0,0.75fr);gap:var(--s-9);align-items:end;}
}
.phero-side{
  border-left:2px solid var(--gold);padding-left:var(--s-5);
}
.phero-side dl{display:grid;gap:0;margin:0;}
.phero-side dd + dt{margin-top:var(--s-4);}
.phero-side dt{
  font-size:var(--t-2xs);letter-spacing:0.18em;text-transform:uppercase;
  color:var(--gold);font-weight:600;margin-bottom:2px;
}
.phero-side dd{margin:0;font-size:var(--t-sm);color:var(--ink-2);line-height:1.55;}

/* ==========================================================================
   Marquee strip of brand names
   ========================================================================== */
.strip{
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  background:var(--paper-2);overflow:hidden;position:relative;
}
.strip-in{display:flex;align-items:center;gap:0;padding:var(--s-4) 0;position:relative;}
.strip-label{
  flex:none;padding:0 var(--s-5) 0 var(--gutter);
  position:relative;z-index:2;background:var(--paper-2);
  font-size:var(--t-2xs);letter-spacing:0.2em;text-transform:uppercase;
  color:var(--gold);font-weight:600;border-right:1px solid var(--rule);
  align-self:stretch;display:flex;align-items:center;
}
.strip-track{
  display:flex;gap:var(--s-7);min-width:max-content;
  animation:slide 46s linear infinite;padding-left:var(--s-7);
}
.strip:hover .strip-track{animation-play-state:paused;}
.strip-track span{
  font-family:var(--font-display);font-size:var(--t-base);
  letter-spacing:0.16em;text-transform:uppercase;color:var(--ink-3);
  white-space:nowrap;
}
@keyframes slide{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media(max-width:600px){.strip-label{display:none;}}

/* ==========================================================================
   Stat row
   ========================================================================== */
.stats{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  border-top:1px solid var(--rule);
}
@media(min-width:820px){.stats{grid-template-columns:repeat(4,minmax(0,1fr));}}
.stat{
  padding:var(--s-5) var(--s-4);border-bottom:1px solid var(--rule);
  border-right:1px solid var(--rule);
}
.stat:nth-child(2n){border-right:0;}
@media(min-width:820px){
  .stat{border-bottom:0;padding:var(--s-6) var(--s-5);}
  .stat:nth-child(2n){border-right:1px solid var(--rule);}
  .stat:last-child{border-right:0;}
  .stat:first-child{padding-left:0;}
}
.stat b{
  display:block;font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.9rem,5vw,2.5rem);line-height:1;color:var(--navy);
  font-variant-numeric:tabular-nums;margin-bottom:var(--s-2);
}
.on-navy .stat b{color:var(--gold-light);}
.stat span{
  display:block;font-size:var(--t-xs);color:var(--ink-3);
  letter-spacing:0.06em;line-height:1.5;
}
.on-navy .stat{border-color:var(--rule-dark);}
.on-navy .stat span{color:var(--on-navy-3);}

/* ==========================================================================
   Card grid, the main content workhorse
   ========================================================================== */
.grid{display:grid;gap:var(--s-4);}
@media(min-width:700px){.grid-2{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(min-width:700px){.grid-3{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(min-width:1000px){.grid-3{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media(min-width:700px){.grid-4{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(min-width:1080px){.grid-4{grid-template-columns:repeat(4,minmax(0,1fr));}}

.card{
  display:flex;flex-direction:column;gap:var(--s-3);
  background:var(--paper-2);border:1px solid var(--rule);border-radius:var(--radius);
  padding:var(--s-6) var(--s-5);position:relative;overflow:hidden;
  transition:transform .24s var(--ease),box-shadow .24s var(--ease),border-color .24s var(--ease);
}
.card::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform .32s var(--ease);
}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--rule-strong);}
.card:hover::before{transform:scaleX(1);}
.glyph{color:var(--gold);width:46px;height:26px;flex:none;display:block;}
.on-navy .glyph{color:var(--gold-light);}
.head-split .glyph{margin-bottom:var(--s-3);}
.card .glyph{margin-bottom:var(--s-2);}
.card h3{margin:0;}
.card p{margin:0;font-size:var(--t-sm);color:var(--ink-2);}
.card .tlink{margin-top:auto;padding-top:var(--s-3);align-self:flex-start;}
.card-flat{background:transparent;box-shadow:none;}
.on-cream .card{background:var(--paper-2);border-color:var(--cream-deep);}
.on-sky .card{background:var(--paper-2);border-color:var(--sky-deep);}
.on-navy .card{background:rgba(244,236,221,0.045);border-color:var(--rule-dark);}
.on-navy .card p{color:var(--on-navy-2);}
.on-navy .card:hover{background:rgba(244,236,221,0.075);border-color:rgba(244,236,221,0.28);}

.card-tag{
  align-self:flex-start;
  font-size:var(--t-3xs);letter-spacing:0.16em;text-transform:uppercase;font-weight:600;
  color:var(--gold-deep);background:var(--gold-pale);
  padding:4px 9px;border-radius:999px;
}

/* Bullet list used inside cards and prose */
.ticks{display:grid;gap:9px;margin:0;}
.ticks li{
  position:relative;padding-left:22px;font-size:var(--t-sm);color:var(--ink-2);line-height:1.6;
}
.ticks li::before{
  content:"";position:absolute;left:0;top:0.62em;
  width:8px;height:8px;border-radius:50%;
  border:1.5px solid var(--gold);
}
.on-navy .ticks li{color:var(--on-navy-2);}
.on-navy .ticks li::before{border-color:var(--gold-light);}

/* ==========================================================================
   Feature rows, for lists where copy carries the weight
   ========================================================================== */
.rows{border-top:1px solid var(--rule);}
.row-item{
  display:grid;gap:var(--s-3);
  padding:var(--s-5) var(--s-4);margin:0 calc(var(--s-4) * -1);
  border-bottom:1px solid var(--rule);
  border-radius:var(--radius);transition:background-color .2s var(--ease);
}
.row-item:hover{background:var(--gold-faint);}
.row-item .glyph{color:var(--gold);width:46px;height:26px;}
.row-item h3{margin:0 0 var(--s-2);}
.row-item p{margin:0;font-size:var(--t-sm);color:var(--ink-2);max-width:66ch;}
.row-item .ticks{margin-top:var(--s-4);}
@media(min-width:860px){
  .row-item{
    grid-template-columns:64px minmax(0,1fr) 150px;
    gap:var(--s-6);align-items:start;padding:var(--s-6) var(--s-4);
  }
  .row-item .row-side{text-align:right;padding-top:4px;}
}
.rows .tier-count{padding-top:6px;}

/* Numbered rows, used only where order genuinely matters */
.steps{display:grid;gap:0;border-top:1px solid var(--rule);counter-reset:step;}
.step{
  display:grid;gap:var(--s-3);padding:var(--s-5) 0;border-bottom:1px solid var(--rule);
}
@media(min-width:820px){
  .step{grid-template-columns:80px minmax(0,1fr);gap:var(--s-6);align-items:start;padding:var(--s-6) 0;}
}
.step-n{
  counter-increment:step;
  font-family:var(--font-display);font-size:var(--t-xl);color:var(--gold);line-height:1;
  font-variant-numeric:tabular-nums;
}
.step-n::before{content:"0" counter(step);}
.step h3{margin:0 0 var(--s-2);}
.step p{margin:0;font-size:var(--t-sm);color:var(--ink-2);max-width:64ch;}
.on-navy .step{border-color:var(--rule-dark);}
.on-navy .steps{border-color:var(--rule-dark);}
.on-navy .step-n{color:var(--gold-light);}
.on-navy .step p{color:var(--on-navy-2);}

/* ==========================================================================
   Brand tiers and filter
   ========================================================================== */
.filter{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-bottom:var(--s-6);}
.chip{
  padding:9px 18px;min-height:42px;
  background:transparent;border:1px solid var(--rule-strong);border-radius:999px;
  font-size:var(--t-xs);font-weight:600;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--ink-2);cursor:pointer;
  transition:background-color .16s,color .16s,border-color .16s;
}
.chip:hover{border-color:var(--navy);color:var(--ink);}
.chip[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:var(--on-navy);}

.tiers{display:grid;gap:var(--s-4);}
.tier{
  border:1px solid var(--rule);background:var(--paper-2);padding:var(--s-6) var(--s-5);
  position:relative;overflow:hidden;border-radius:var(--radius);
  transition:box-shadow .24s var(--ease),transform .24s var(--ease),border-color .24s var(--ease);
}
.tier::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gold);
  transform:scaleY(0);transform-origin:top;transition:transform .3s var(--ease);
}
.tier:hover{box-shadow:var(--shadow-md);border-color:var(--rule-strong);transform:translateY(-2px);}
.tier:hover::before{transform:scaleY(1);}
.tier[hidden]{display:none;}
.tier-top{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:8px var(--s-5);margin-bottom:var(--s-2);
}
.tier h3{margin:0;}
.tier-count{
  font-size:var(--t-2xs);letter-spacing:0.14em;text-transform:uppercase;
  color:var(--gold);font-weight:600;font-variant-numeric:tabular-nums;
}
.tier > p{font-size:var(--t-sm);color:var(--ink-2);margin:0 0 var(--s-5);max-width:66ch;}
.tier ul{display:flex;flex-wrap:wrap;gap:var(--s-2);}
.tier li{
  font-size:var(--t-xs);letter-spacing:0.09em;text-transform:uppercase;font-weight:600;
  color:var(--ink);background:var(--cream);border:1px solid transparent;
  padding:9px 14px;border-radius:var(--radius);
  transition:border-color .16s,background-color .16s,transform .16s;
}
.tier li:hover{border-color:var(--gold);background:var(--paper-2);transform:translateY(-1px);}

/* Brand detail list, name plus one-line note */
.blist{display:grid;gap:0;border-top:1px solid var(--rule);}
.blist li{
  display:grid;gap:2px;padding:var(--s-4) 0;border-bottom:1px solid var(--rule);
}
@media(min-width:760px){
  .blist li{grid-template-columns:200px minmax(0,1fr);gap:var(--s-5);align-items:baseline;}
}
.blist b{
  font-family:var(--font-display);font-size:var(--t-md);font-weight:500;color:var(--ink);
}
.blist span{font-size:var(--t-sm);color:var(--ink-2);}

/* ==========================================================================
   Comparison table
   ========================================================================== */
.tablewrap{overflow-x:auto;border:1px solid var(--rule);border-radius:var(--radius);background:var(--paper-2);}
.ctable{width:100%;border-collapse:collapse;font-size:var(--t-sm);min-width:640px;}
.ctable th,.ctable td{
  text-align:left;padding:var(--s-4) var(--s-5);border-bottom:1px solid var(--rule);
  vertical-align:top;
}
.ctable thead th{
  font-family:var(--font-ui);font-size:var(--t-2xs);letter-spacing:0.16em;
  text-transform:uppercase;color:var(--gold);font-weight:600;
  background:var(--cream);border-bottom:1px solid var(--cream-deep);white-space:nowrap;
}
.ctable tbody th{font-weight:500;font-family:var(--font-display);font-size:var(--t-md);color:var(--ink);}
.ctable td{color:var(--ink-2);}
.ctable tbody tr:last-child th,.ctable tbody tr:last-child td{border-bottom:0;}
.ctable tbody tr:hover{background:var(--gold-faint);}

/* ==========================================================================
   Review themes
   ========================================================================== */
.themes{display:grid;gap:var(--s-4);}
@media(min-width:820px){.themes{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s-8);}}
.theme{display:grid;gap:7px;}
.theme-top{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  font-size:var(--t-sm);
}
.theme-top b{font-weight:500;}
.theme-top span{
  color:var(--gold-deep);font-size:var(--t-xs);font-weight:600;
  font-variant-numeric:tabular-nums;letter-spacing:0.06em;
}
.theme-bar{height:6px;background:var(--rule);position:relative;overflow:hidden;border-radius:3px;}
.theme-bar i{
  position:absolute;inset:0 auto 0 0;
  background:linear-gradient(90deg,var(--gold) 0%,var(--gold-deep) 100%);
  width:100%;border-radius:3px;
  transform:scaleX(0);transform-origin:left;
  transition:transform .9s var(--ease);
}
.is-in .theme-bar i{transform:scaleX(var(--v,0));}

/* Pull quote */
.pull{
  margin:0;padding:var(--s-7) 0;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  position:relative;
}
.pull blockquote{
  margin:0 0 var(--s-5);max-width:48ch;
  font-family:var(--font-display);font-style:italic;
  font-size:clamp(1.3rem,3vw,1.9rem);line-height:1.38;color:var(--ink);
}
.pull figcaption{font-size:var(--t-xs);}
.pull figcaption b{
  display:block;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--gold-deep);font-weight:600;
}
.pull figcaption span{display:block;color:var(--ink-3);margin-top:3px;}

/* Quote cards */
.quotes{display:grid;gap:var(--s-4);}
@media(min-width:760px){.quotes{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(min-width:1080px){.quotes{grid-template-columns:repeat(3,minmax(0,1fr));}}
figure.q{
  margin:0;padding:var(--s-6) var(--s-5);
  background:var(--paper-2);border:1px solid var(--rule);border-radius:var(--radius);
  display:flex;flex-direction:column;gap:var(--s-4);
  transition:box-shadow .22s var(--ease),transform .22s var(--ease);
}
figure.q:hover{box-shadow:var(--shadow-sm);transform:translateY(-2px);}
figure.q.lead{background:var(--cream);border-color:var(--gold);}
figure.q .qstars{color:var(--gold);letter-spacing:3px;font-size:var(--t-sm);line-height:1;}
figure.q blockquote{
  margin:0;font-family:var(--font-display);font-style:italic;
  font-size:var(--t-md);line-height:1.52;color:var(--ink);
}
figure.q.lead blockquote{font-size:var(--t-lg);}
figure.q figcaption{margin-top:auto;font-size:var(--t-xs);}
figure.q figcaption b{
  display:block;letter-spacing:0.1em;text-transform:uppercase;color:var(--gold-deep);font-weight:600;
}
figure.q figcaption span{display:block;color:var(--ink-3);margin-top:3px;}

.score{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3) var(--s-5);
  padding:var(--s-5) 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  font-size:var(--t-sm);color:var(--ink-2);
}
.score b{
  font-family:var(--font-display);font-size:var(--t-3xl);font-weight:600;
  color:var(--navy);line-height:1;font-variant-numeric:tabular-nums;
}
.score .stars{color:var(--gold);letter-spacing:3px;}

/* ==========================================================================
   Founder note
   ========================================================================== */
.note{max-width:64ch;margin:0;}
.note p{font-size:var(--t-md);}
.note .sig{
  font-family:var(--font-script);font-size:2.2rem;color:var(--gold-light);
  margin:var(--s-6) 0 2px;line-height:1.1;
}
.note .sig-role{
  font-size:var(--t-2xs);letter-spacing:0.18em;text-transform:uppercase;color:var(--on-navy-3);
}
.creed{display:grid;gap:0;margin-top:var(--s-2);}
.creed li{
  padding:var(--s-4) 0;border-bottom:1px solid var(--rule-dark);
  font-family:var(--font-display);font-size:var(--t-lg);color:var(--on-navy);
}
.creed li:first-child{border-top:1px solid var(--rule-dark);}
.creed li span{
  display:block;font-family:var(--font-ui);font-size:var(--t-sm);
  color:var(--on-navy-2);margin-top:3px;
}

/* Pillars */
.pillars{display:grid;gap:0;border-top:1px solid var(--rule);}
.pillar{padding:var(--s-5) 0;border-bottom:1px solid var(--rule);}
.pillar b{
  display:block;font-family:var(--font-display);font-size:var(--t-lg);
  font-weight:500;margin-bottom:var(--s-2);
}
.pillar p{margin:0;font-size:var(--t-sm);color:var(--ink-2);max-width:54ch;}
@media(min-width:820px){.pillars{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s-8);}}
@media(min-width:1100px){
  .pillar{display:grid;grid-template-columns:210px minmax(0,1fr);gap:var(--s-6);align-items:start;}
  .pillar b{margin:0;}
}
.on-navy .pillars,.on-navy .pillar{border-color:var(--rule-dark);}
.on-navy .pillar p{color:var(--on-navy-2);}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{border-top:1px solid var(--rule);}
.faq details{border-bottom:1px solid var(--rule);}
.faq summary{
  cursor:pointer;list-style:none;position:relative;
  padding:var(--s-5) 48px var(--s-5) 0;
  font-family:var(--font-display);font-size:var(--t-lg);
  transition:color .18s;
}
.faq summary:hover{color:var(--gold-deep);}
.faq details[open] summary{color:var(--navy);}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{
  content:"";position:absolute;right:8px;top:50%;margin-top:-9px;
  width:10px;height:10px;
  border-right:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);
  transform:rotate(45deg);transition:transform .22s var(--ease);
}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:-3px;}
.faq .a{padding:0 0 var(--s-5);max-width:72ch;}
.faq .a p{font-size:var(--t-sm);color:var(--ink-2);}
.faq .a a{color:var(--gold-deep);border-bottom:1px solid var(--gold-pale);}
.faq-group + .faq-group{margin-top:var(--s-7);}
.faq-group > h3{
  font-family:var(--font-ui);font-size:var(--t-2xs);letter-spacing:0.2em;
  text-transform:uppercase;color:var(--gold);font-weight:600;margin:0 0 var(--s-3);
}

/* ==========================================================================
   Prose, for policy pages and guides
   ========================================================================== */
.prose{max-width:72ch;}
.prose h2{margin-top:1.9em;font-size:var(--t-xl);}
.prose h2:first-of-type{margin-top:0.5em;}
.prose h3{margin-top:1.6em;}
.prose p,.prose li{font-size:var(--t-sm);color:var(--ink-2);}
.prose ul{display:grid;gap:8px;margin:0 0 1.05em;}
.prose ul li{position:relative;padding-left:20px;}
.prose ul li::before{
  content:"";position:absolute;left:0;top:0.66em;width:6px;height:6px;
  border-radius:50%;background:var(--gold);
}
.prose a{color:var(--gold-deep);border-bottom:1px solid var(--gold-pale);}

/* ==========================================================================
   In-page sub navigation
   ========================================================================== */
.subnav{
  position:sticky;top:72px;z-index:90;
  background:rgba(251,248,241,0.95);
  backdrop-filter:saturate(140%) blur(8px);
  -webkit-backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--rule);
}
.masthead.is-stuck ~ main .subnav{top:60px;}
.subnav-in{
  max-width:var(--shell);margin:0 auto;padding:0 var(--gutter);
  display:flex;gap:var(--s-5);overflow-x:auto;scrollbar-width:none;
}
.subnav-in::-webkit-scrollbar{display:none;}
.subnav a{
  padding:var(--s-4) 0;white-space:nowrap;position:relative;
  font-size:var(--t-xs);font-weight:500;letter-spacing:0.09em;text-transform:uppercase;
  color:var(--ink-3);transition:color .16s;
}
.subnav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--gold);
  transform:scaleX(0);transition:transform .24s var(--ease);
}
.subnav a:hover{color:var(--ink);}
.subnav a.is-active{color:var(--gold-deep);}
.subnav a.is-active::after{transform:scaleX(1);}

/* ==========================================================================
   Visit page
   ========================================================================== */
.visit{display:grid;gap:var(--s-7);}
@media(min-width:960px){.visit{grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr);gap:var(--s-8);align-items:start;}}
.facts{display:grid;gap:0;border-top:1px solid var(--rule);margin:0 0 var(--s-6);}
.fact{padding:var(--s-4) 0;border-bottom:1px solid var(--rule);}
.fact dt{
  font-size:var(--t-2xs);letter-spacing:0.17em;text-transform:uppercase;
  color:var(--gold);font-weight:600;margin-bottom:5px;
}
.fact dd{margin:0;font-size:var(--t-sm);color:var(--ink-2);}
.fact dd a:hover{color:var(--gold-deep);}
.hours{width:100%;border-collapse:collapse;font-size:var(--t-sm);}
.hours th,.hours td{
  text-align:left;padding:10px 0;border-bottom:1px solid var(--rule);font-weight:400;
}
.hours td{text-align:right;color:var(--ink-2);font-variant-numeric:tabular-nums;}
.hours tr.shut td{color:var(--gold-deep);}
.hours tr.today th,.hours tr.today td{color:var(--ink);font-weight:600;}
.hours tr.today th::before{
  content:"";display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--gold);margin-right:8px;vertical-align:middle;
}
.mapwrap{border:1px solid var(--rule);background:var(--sky-wash);line-height:0;border-radius:var(--radius);overflow:hidden;}
.mapwrap iframe{width:100%;height:340px;border:0;display:block;}
@media(min-width:960px){.mapwrap iframe{height:100%;min-height:560px;}}

.landmarks{display:grid;gap:0;border-top:1px solid var(--rule);}
.landmark{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-4);
  padding:var(--s-3) 0;border-bottom:1px solid var(--rule);font-size:var(--t-sm);
}
.landmark span:last-child{color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap;}

/* ==========================================================================
   Closing CTA
   ========================================================================== */
/* Body copy is never centred: a ragged left edge breaks the eye's return
   sweep, and on a phone a four line centred paragraph is what reads as
   "sentences here and there". On wide screens the block would look dumped
   against the left margin, so it takes the same two column head-split
   structure the rest of the site uses. One system, one left edge. */
.close-cta{text-align:left;}
.close-cta .label{justify-content:flex-start;display:inline-flex;}
.close-cta .btns{justify-content:flex-start;margin-top:var(--s-6);}
.close-cta h2{max-width:20ch;margin-bottom:var(--s-4);}
.close-cta p{max-width:56ch;margin-left:0;margin-right:0;}
@media(min-width:900px){
  .close-cta{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,0.85fr);
    column-gap:var(--s-8);
    grid-template-areas:
      "label    ."
      "title    lede"
      "btns     btns";
    align-items:end;
  }
  .close-cta .label{grid-area:label;align-self:start;}
  .close-cta h2{grid-area:title;margin-bottom:0;}
  .close-cta .lede{grid-area:lede;margin:0 0 6px;}
  .close-cta .btns{grid-area:btns;margin-top:var(--s-6);align-self:start;}
}

/* Split CTA, used mid page */
.cta-split{
  display:grid;gap:var(--s-5);align-items:center;
  border:1px solid var(--gold);background:var(--paper-2);
  padding:var(--s-6) var(--s-5);border-radius:var(--radius);
}
@media(min-width:860px){
  .cta-split{grid-template-columns:minmax(0,1fr) auto;gap:var(--s-7);padding:var(--s-7);}
}
.cta-split h3{margin:0 0 var(--s-2);font-size:var(--t-xl);}
.cta-split p{margin:0;font-size:var(--t-sm);color:var(--ink-2);max-width:60ch;}

/* ==========================================================================
   Footer
   ========================================================================== */
.foot{background:var(--navy);color:var(--on-navy-2);font-size:var(--t-sm);}
.foot-grid{display:grid;gap:var(--s-6);padding:var(--s-8) 0 var(--s-6);}
@media(min-width:700px){.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-7) var(--s-7);}}
@media(min-width:1040px){.foot-grid{grid-template-columns:1.6fr 0.9fr 0.9fr 1.3fr;gap:var(--s-8);}}
.foot h4{
  font-family:var(--font-ui);color:var(--on-navy);
  font-size:var(--t-2xs);letter-spacing:0.18em;text-transform:uppercase;
  font-weight:600;margin:0 0 var(--s-4);
}
.foot .wordmark b{color:var(--on-navy);}
.foot-about p{margin:var(--s-4) 0 0;font-size:var(--t-sm);color:var(--on-navy-2);max-width:36ch;}
.foot ul li{margin-bottom:10px;}
.foot a{transition:color .16s;}
.foot a:hover{color:var(--gold-light);}
.foot address{font-style:normal;line-height:1.65;margin-bottom:var(--s-3);color:var(--on-navy-2);}
.foot .status{color:var(--on-navy);margin-bottom:var(--s-3);}
.foot-social{display:flex;gap:var(--s-3);margin-top:var(--s-4);}
.foot-social a{
  width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--rule-dark);border-radius:var(--radius);
  transition:border-color .16s,background-color .16s,color .16s;
}
.foot-social a:hover{border-color:var(--gold);background:var(--gold);color:#fff;}
.foot-social svg{width:17px;height:17px;}
.foot-bottom{
  border-top:1px solid var(--rule-dark);
  padding:var(--s-5) 0 var(--s-6);
  display:flex;flex-wrap:wrap;gap:10px var(--s-6);justify-content:space-between;align-items:center;
  font-size:var(--t-xs);color:var(--on-navy-3);
}
.foot-bottom ul{display:flex;flex-wrap:wrap;gap:var(--s-5);}
@media(max-width:999px){.foot-bottom{padding-bottom:var(--s-4);}}

/* ==========================================================================
   Mobile action bar
   ========================================================================== */
.actionbar{
  position:fixed;left:0;right:0;bottom:0;z-index:150;
  display:grid;grid-template-columns:repeat(3,1fr);
  background:var(--navy-deep);border-top:1px solid rgba(163,126,81,0.32);
}
.actionbar a{
  display:flex;align-items:center;justify-content:center;gap:7px;
  min-height:var(--bar);padding:11px 6px;
  font-size:var(--t-2xs);font-weight:600;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--on-navy);
}
.actionbar a + a{border-left:1px solid rgba(244,236,221,0.14);}
.actionbar a:hover{background:rgba(163,126,81,0.24);}
.actionbar svg{width:15px;height:15px;flex:none;}
.actionbar .wa{color:var(--gold-light);}
@media(min-width:1000px){.actionbar{display:none;}}

/* ==========================================================================
   404
   ========================================================================== */
.oops{
  min-height:52vh;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  text-align:left;padding:var(--s-9) 0;
}
.oops .lede{max-width:56ch;}
.oops .code{
  font-family:var(--font-display);font-size:clamp(3rem,13vw,5.5rem);
  line-height:1;color:var(--gold);margin-bottom:var(--s-3);
}

/* ==========================================================================
   Motion
   ========================================================================== */
/* Scroll reveal, progressive enhancement.
   Content must never depend on a script to become visible. An earlier build set
   .reveal{opacity:0} unconditionally, so any page where IntersectionObserver did
   not fire (blocked or slow JS, print, PDF export, social preview, screenshot,
   fast scroll) rendered whole sections blank. Content now paints with the
   document, and the fade is layered on only once the script confirms it is
   running by setting .js on the root element. */
.reveal{opacity:1;transform:none;}
/* The fade was removed deliberately: content must never be invisible. */
.reveal-d1.is-in{transition-delay:.07s;}
.reveal-d2.is-in{transition-delay:.14s;}
.reveal-d3.is-in{transition-delay:.21s;}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important;animation:none !important;}
  html{scroll-behavior:auto;}
  .reveal,.js .reveal{opacity:1 !important;transform:none !important;}
  .snellen li .row{filter:none !important;opacity:1 !important;}
  .strip-track{animation:none;}
}

@media print{
  .topline,.masthead,.actionbar,.drawer,.mapwrap,.subnav,.strip{display:none;}
  body{background:#fff;color:#000;padding-bottom:0;}
  /* never send a blank section to the printer */
  .reveal,.js .reveal{opacity:1 !important;transform:none !important;}
  .snellen li .row{filter:none !important;opacity:1 !important;}
}

/* ---------- Brand name grid (labels without descriptions) ---------- */
/* Used where a collection carries many labels and a description line for each
   would add length without adding information. */
.blist-names{
  display:flex;flex-wrap:wrap;gap:8px;
  border-top:1px solid var(--rule);padding-top:var(--s-4);
}
.blist-names li{
  display:inline-flex;align-items:center;
  padding:8px 14px;border:1px solid var(--rule);border-radius:2px;
  background:var(--paper);
  font-family:var(--font-ui);font-size:var(--t-sm);font-weight:500;
  color:var(--ink);letter-spacing:0.01em;
  grid-template-columns:none;gap:0;
  transition:border-color .18s ease,color .18s ease,transform .18s ease;
}
.blist-names li:hover{border-color:var(--gold);color:var(--gold-deep,var(--gold));transform:translateY(-1px);}

/* Two-column brand list on wide screens, for the lens houses. */
@media(min-width:900px){
  .blist-cols{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s-6);}
  .blist-cols li{border-top:1px solid var(--rule);}
}

/* ---------- Founder widget ---------- */
.founder-w{display:grid;gap:var(--s-6);}
@media(min-width:900px){
  .founder-w{grid-template-columns:1.25fr 0.9fr;gap:var(--s-7);align-items:center;}
}
.founder-text h2{margin:6px 0 var(--s-3);}
.founder-text .btn{margin-top:var(--s-4);}
.founder-card{
  margin:0;padding:var(--s-6);background:var(--paper);
  border:1px solid var(--rule);border-left:3px solid var(--gold);
  box-shadow:var(--shadow-md,0 10px 30px rgba(22,35,81,.07));
}
.founder-card blockquote{
  margin:0;font-family:var(--font-display);font-style:italic;
  font-size:var(--t-lg);line-height:1.45;color:var(--ink);
}
.founder-card figcaption{margin-top:var(--s-4);display:flex;flex-direction:column;gap:2px;}
.founder-card figcaption b{font-family:var(--font-ui);font-size:var(--t-sm);letter-spacing:.04em;}
.founder-card figcaption span{font-size:var(--t-xs);color:var(--ink-2);letter-spacing:.14em;text-transform:uppercase;}

/* ---------- Lead / call back form ---------- */
.lead-w{display:grid;gap:var(--s-6);}
@media(min-width:900px){
  .lead-w{grid-template-columns:1fr 1fr;gap:var(--s-7);align-items:start;}
}
.lead-intro h2{margin:6px 0 var(--s-3);}
.lead-intro .note a{color:var(--gold);text-decoration:underline;text-underline-offset:2px;}
.lead-form{display:grid;gap:var(--s-3);}
.lead-form .field{display:flex;flex-direction:column;gap:6px;}
.lead-form label{
  font-family:var(--font-ui);font-size:var(--t-2xs);font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--on-navy,#fff);
}
.lead-form label .opt{opacity:.6;font-weight:400;letter-spacing:.08em;text-transform:none;}
.lead-form input,.lead-form select,.lead-form textarea{
  font:inherit;font-size:var(--t-sm);color:var(--ink);
  background:var(--paper);border:1px solid transparent;border-radius:2px;
  padding:11px 13px;width:100%;
  transition:border-color .16s ease,box-shadow .16s ease;
}
.lead-form textarea{resize:vertical;min-height:84px;}
.lead-form input:focus-visible,.lead-form select:focus-visible,.lead-form textarea:focus-visible{
  outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(163,126,81,.35);
}
.lead-form .btn{margin-top:4px;justify-self:start;}
.form-note{font-size:var(--t-xs);color:var(--on-navy-2,rgba(255,255,255,.7));margin:0;}

/* ---------- Gallery ---------- */
.gallery{
  column-count:2;column-gap:var(--s-5,32px);max-width:1100px;margin-inline:auto;
}
@media(max-width:820px){.gallery{column-count:1;}}

/* Each tile keeps the photo's own proportions - no forced crop. */
.gal-item{
  margin:0 0 var(--s-5,32px);break-inside:avoid;-webkit-column-break-inside:avoid;
  display:flex;flex-direction:column;gap:10px;
}
.gal-item img{
  width:100%;height:auto;display:block;
  border:1px solid var(--rule);background:var(--sky-wash,#eef4fb);
  transition:transform .4s ease,box-shadow .4s ease;
}
.gal-item:hover img{transform:translateY(-3px);box-shadow:0 10px 28px rgba(16,32,64,.13);}
.gal-ph{
  aspect-ratio:4/3;border:1px solid var(--rule);background:
    repeating-linear-gradient(45deg,var(--sky-wash,#eef4fb) 0 12px,transparent 12px 24px);
}
.gal-item figcaption{
  font-family:var(--font-ui);font-size:var(--t-sm,.9rem);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-2);line-height:1.6;
}
@media(prefers-reduced-motion:reduce){
  .gal-item img{transition:none;}
  .gal-item:hover img{transform:none;}
}

/* ---------- Journal ---------- */
.post-media{display:block;overflow:hidden;background:var(--sky-wash,#eef4fb);}
.post-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease,ease);}
.post-card:hover .post-media img,.post-feature:hover .post-media img{transform:scale(1.03);}

.post-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;
  font-family:var(--font-ui);font-size:var(--t-2xs);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-2);
}
.post-meta .dot{opacity:.45;}
.post-cat{color:var(--gold);font-weight:600;}

/* Lead article */
.post-feature{
  display:grid;gap:0;border:1px solid var(--rule);background:var(--paper);
  margin-bottom:var(--s-6);overflow:hidden;
  transition:box-shadow .2s ease,transform .2s ease;
}
.post-feature:hover{transform:translateY(-2px);box-shadow:var(--shadow-md,0 14px 36px rgba(22,35,81,.09));}
.post-feature .post-media{aspect-ratio:16/10;}
.post-feature .post-body{padding:var(--s-6);display:flex;flex-direction:column;gap:var(--s-3);}
.post-feature h2{margin:0;font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.18;}
@media(min-width:860px){
  /* Cap the feature so the image never towers over its own copy. */
  .post-feature{grid-template-columns:1.1fr 1fr;align-items:stretch;max-height:420px;}
  .post-feature .post-media{aspect-ratio:auto;height:100%;min-height:340px;}
  .post-feature .post-body{padding:var(--s-6) var(--s-7);justify-content:center;}
}
/* A lone card in the grid should not stretch to half the page and stop. */
.post-grid:has(> :only-child){grid-template-columns:minmax(0,1fr);}
@media(min-width:760px){
  .post-grid:has(> :only-child) .post-card{
    display:grid;grid-template-columns:1fr 1.05fr;align-items:stretch;
  }
  .post-grid:has(> :only-child) .post-card .post-media{aspect-ratio:auto;min-height:240px;}
  .post-grid:has(> :only-child) .post-card .post-body{padding:var(--s-6);justify-content:center;}
}

/* Grid cards */
.post-grid{display:grid;gap:var(--s-5);}
@media(min-width:760px){.post-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-6);}}
.post-grid-1{max-width:720px;}
.post-card{
  display:flex;flex-direction:column;border:1px solid var(--rule);background:var(--paper);
  overflow:hidden;transition:transform .18s ease,box-shadow .18s ease;
}
.post-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md,0 12px 30px rgba(22,35,81,.08));}
.post-card .post-media{aspect-ratio:16/10;}
.post-card .post-body{padding:var(--s-5);display:flex;flex-direction:column;gap:10px;flex:1;}
.post-card h3{margin:0;font-size:var(--t-lg);line-height:1.24;}
.post-card h3 a,.post-feature h2 a{color:inherit;text-decoration:none;}
.post-card h3 a:hover,.post-feature h2 a:hover{color:var(--gold);}
.post-card p,.post-feature .lede{margin:0;color:var(--ink-2);}
.post-card p{font-size:var(--t-sm);}
.post-more{
  margin-top:auto;padding-top:2px;align-self:flex-start;
  font-family:var(--font-ui);font-size:var(--t-2xs);font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink);
  border-bottom:1px solid var(--gold);
}
.post-card:hover .post-more,.post-feature:hover .post-more{color:var(--gold);}

/* ---------- Article ---------- */
.article-hero{padding:var(--s-7) 0 var(--s-5);}
.crumb{
  display:flex;gap:8px;margin:0 0 var(--s-3);
  font-family:var(--font-ui);font-size:var(--t-2xs);letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-2);
}
.crumb a{color:var(--gold);}
.article-hero h1{max-width:20ch;margin:0 0 var(--s-3);}
.article-hero .lede{max-width:60ch;margin:0 0 var(--s-4);}
.article-img{margin:0 0 var(--s-7);}
.article-img img{width:100%;aspect-ratio:21/9;object-fit:cover;display:block;border:1px solid var(--rule);}

.prose{max-width:66ch;margin:0 auto;}
.prose h2{
  font-family:var(--font-display);font-size:clamp(1.3rem,2.2vw,1.65rem);
  line-height:1.25;margin:var(--s-7) 0 var(--s-3);
}
.prose p{margin:0 0 var(--s-4);}
.prose .drop{font-size:var(--t-lg);line-height:1.55;color:var(--ink);}
.prose ul{margin:0 0 var(--s-4);padding:0;list-style:none;display:grid;gap:10px;}
.prose li{position:relative;padding-left:22px;}
.prose li::before{
  content:"";position:absolute;left:0;top:.62em;width:8px;height:1.5px;background:var(--gold);
}
.pullq{
  margin:var(--s-6) 0;padding:0 0 0 var(--s-5);
  border-left:3px solid var(--gold);
  font-family:var(--font-display);font-style:italic;
  font-size:clamp(1.15rem,2vw,1.4rem);line-height:1.42;color:var(--ink);
}
.founder-card img{width:100%;height:auto;display:block;margin-bottom:var(--s-4);border:1px solid var(--rule);}

/* ---------- Highlighted problem/solution block ---------- */
.alert-block{max-width:70ch;border-top:3px solid var(--gold);padding-top:var(--s-5);}
.alert-block h2{margin:8px 0 var(--s-3);}
.alert-block h3{
  font-family:var(--font-ui);font-size:var(--t-2xs);font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold);
  margin:var(--s-5) 0 var(--s-3);
}
.check-list{margin:0 0 var(--s-4);padding:0;list-style:none;display:grid;gap:10px;}
.check-list li{position:relative;padding-left:26px;font-size:var(--t-sm);}
.check-list li::before{
  content:"";position:absolute;left:0;top:.55em;
  width:11px;height:6px;border-left:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);
  transform:rotate(-45deg);
}
.alert-block .btn-row{margin-top:var(--s-5);}
/* Honeypot: off-screen, never shown to a person. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;}
.form-status{margin:6px 0 0;font-size:var(--t-sm);}
.form-status:empty{display:none;}
.form-status.is-ok{color:#bfe6c8;}
.form-status.is-err{color:#f3c2c2;}
.form-status a{color:var(--gold);text-decoration:underline;}
/* Call back form actions: WhatsApp primary, email secondary. */
.form-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px;}
.form-actions .btn{display:inline-flex;align-items:center;gap:8px;}
.btn-onnavy{color:var(--on-navy,#fff);border-color:rgba(255,255,255,.35);}
.btn-onnavy:hover{border-color:var(--gold);color:var(--gold);}
/* In the centred feature body the auto top-margin pushes the link out of the
   capped box, so it sits directly under the copy instead. */
.post-feature .post-body .post-more{margin-top:var(--s-2);}


/* ---------- Lightbox ---------- */
.gal-item img{cursor:zoom-in;}
.lb{
  position:fixed;inset:0;z-index:9999;display:none;
  align-items:center;justify-content:center;padding:clamp(12px,4vw,48px);
  background:rgba(10,18,36,.94);
}
.lb[data-open="true"]{display:flex;}
.lb-fig{margin:0;max-width:100%;max-height:100%;display:flex;flex-direction:column;gap:14px;align-items:center;}
.lb-fig img{
  max-width:100%;max-height:78vh;width:auto;height:auto;display:block;
  border:1px solid rgba(255,255,255,.16);background:#0a1224;
}
.lb-cap{
  font-family:var(--font-ui);font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.74);text-align:center;max-width:60ch;line-height:1.6;
}
.lb-btn{
  position:absolute;top:0;bottom:0;width:22%;border:0;background:none;cursor:pointer;
  color:#fff;font-size:34px;line-height:1;opacity:.55;transition:opacity .2s;
}
.lb-btn:hover,.lb-btn:focus-visible{opacity:1;}
.lb-prev{left:0;} .lb-next{right:0;}
.lb-close{
  position:absolute;top:14px;right:18px;width:44px;height:44px;border:0;background:none;
  color:#fff;font-size:30px;line-height:1;cursor:pointer;opacity:.7;transition:opacity .2s;
}
.lb-close:hover,.lb-close:focus-visible{opacity:1;}
.lb-count{
  position:absolute;bottom:18px;left:50%;transform:translateX(-50%);
  font-family:var(--font-ui);font-size:var(--t-xs);letter-spacing:.16em;color:rgba(255,255,255,.6);
}
body.lb-lock{overflow:hidden;}
@media(max-width:640px){.lb-btn{font-size:26px;width:26%;}}
/* The everyday collection carries far more labels than the other two, so it
   runs in two columns rather than one very tall list. */
.mega-list-2{columns:2;column-gap:var(--s-5);}
.mega-list-2 li{break-inside:avoid;}
/* The "who we are" paragraph now opens the founder note, so it carries a touch
   more weight than the body copy around it. */
.note .who-lede{font-size:var(--t-lg);line-height:1.55;color:var(--on-navy,#fff);}


/* ---------- Text contrast on light grounds ----------
   The brand gold #a37e51 sits at roughly 3:1 against cream and paper, which is
   below the 4.5:1 needed for small text and is why gold labels looked washed
   out. --gold-deep (#7d5f3c) is the same hue carried darker and clears 4.5:1
   on every light surface we use. The brighter gold stays for rules, borders
   and anything decorative, where contrast rules do not apply. */
.label,
.post-cat,
.strip-label,
.tlink,
.stars,
.qstars,
.crumb a,
.inline-link,
.mega-h,
.post-meta .post-cat,
.foot .wordmark span,
.wordmark span,
th{
  color:var(--gold-deep);
}
/* Gold buttons: white on #a37e51 is 3.71:1, so the fill goes darker too. */
.btn-gold{background:var(--gold-deep);border-color:var(--gold-deep);}
.btn-gold:hover{background:#6d5233;border-color:#6d5233;}
/* On navy the bright gold has plenty of contrast, so it is kept there. */
.on-navy .label,
.on-navy .tlink,
.alert-block .label,
.lead-intro .label,
.foot .label{color:var(--gold);}
.foot .wordmark span{color:var(--gold);}

/* Higher-specificity pass: these selectors were being outranked by earlier
   rules, so the darker gold never applied. */
body .stars,
body .qstars,
body .card-tag,
body .fact dt,
body .phero-side dt,
body table th,
body .idx th{
  color:var(--gold-deep);
}
/* The gold button keeps white text on the darker fill. */
body .btn-gold,
body a.btn-gold,
body button.btn-gold{color:#fff;background:var(--gold-deep);border-color:var(--gold-deep);}
body .btn-gold:hover{color:#fff;background:#6d5233;border-color:#6d5233;}
/* card-tag sits on a pale gold wash, so it needs a darker ink still. */
body .card-tag{color:#5f4729;}

/* ---------- Colours inside navy bands ----------
   Buttons and small type inherited light-ground colours here, so an outline
   button rendered navy-on-navy and effectively vanished. Everything that sits
   on a navy band is given an explicit light colour. */
.on-navy .btn-line,
.band.on-navy .btn-line,
.alert-block .btn-line,
.lead-w .btn-line{
  color:#fff;border-color:rgba(255,255,255,.42);background:transparent;
}
.on-navy .btn-line:hover,
.alert-block .btn-line:hover,
.lead-w .btn-line:hover{color:var(--gold-light);border-color:var(--gold-light);}

.on-navy .btn-navy{color:#fff;background:transparent;border-color:rgba(255,255,255,.42);}
.on-navy .btn-navy:hover{color:var(--gold-light);border-color:var(--gold-light);}

/* Bright gold is only ~4:1 on navy, so labels there use the lighter tone. */
.on-navy .label,
.alert-block .label,
.lead-intro .label,
.note .label{color:var(--gold-light);}
.on-navy .stars,.on-navy .qstars{color:var(--gold-light);}

/* Stars and table headers on light grounds, resolved at higher specificity. */
body .band .stars,body .band .qstars,
body .band-sm .stars,body .band-sm .qstars,
body .faq-group > h3,
body .idx table th,body .table th{color:var(--gold-deep);}
/* Final sweep for the remaining low-contrast gold on light and navy grounds. */
body span.stars,body span.qstars{color:var(--gold-deep);}
body .on-navy span.stars,body .on-navy span.qstars{color:var(--gold-light);}
body th{color:var(--gold-deep);}
body .btn-navy{color:#fff;}
body .on-navy .btn-navy,body .band.on-navy a.btn-navy{color:#fff;border-color:rgba(255,255,255,.42);}
body .topline .label,body .topline span{color:rgba(255,255,255,.86);}
body .on-navy .label::before,body .alert-block .label::before{background:var(--gold-light);}
/* Stars inside the score block and bare table headers were still resolving to
   the bright gold; these win on specificity. */
.score .stars,.score span.stars{color:var(--gold-deep);}
.on-navy .score .stars{color:var(--gold-light);}
table th,thead th,tbody th,.idx th,.hours th{color:var(--gold-deep);}
.on-navy table th{color:var(--gold-light);}
.ctable th,.ctable thead th{color:var(--gold-deep);}
.snellen-cap span,.snellen-cap{color:var(--gold-deep);}
/* Wordmark sub-line on navy: bright gold is 4.06:1 there, just under AA. */
.on-navy .wordmark span,.foot .wordmark span,.drawer .wordmark span{color:var(--gold-light);}
/* Links on navy grounds (footer, drawer, navy bands). */
.on-navy a,.foot a,.drawer a{color:inherit;}
.on-navy a:hover,.foot a:hover,.drawer a:hover{color:var(--gold-light);}
.foot a[href^="mailto"],.foot a[href^="tel"],.on-navy .inline-link{color:var(--gold-light);}
.on-navy .note a,.lead-intro .note a{color:var(--gold-light);}
/* Definition lists and headings placed on a navy band. */
.on-navy .fact dt,.lead-intro .fact dt{color:var(--gold-light);}
.on-navy .fact dd,.lead-intro .fact dd{color:rgba(255,255,255,.86);}
.on-navy .fact dd a,.lead-intro .fact dd a{color:#fff;}
.on-navy .fact dd a:hover,.lead-intro .fact dd a:hover{color:var(--gold-light);}
.on-navy h3,.alert-block h3{color:var(--gold-light);}