:root{color-scheme:light}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#faf9f5;color:#141413}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}

/* ═══════════════════════════════════════════════════════════════
   AVCC — DESIGN EXPRESSION B · "Quiet"          revision 4
   Mobile-first. 40 routes. One system, no one-offs.

   1 · SHAPE — the aperture, three openings
       --r-pill  fully open   → actions and states: things you DO
       --r-card  half open    → surfaces: things you READ
       --r-inset barely open  → controls nested inside surfaces

   2 · COLOR — six domains, each a light/deep/accent triad drawn
       from the Wealthsimple color study in the Option-D kit.
       A page declares data-domain; grounds, hover and press
       states all resolve from that one declaration, so no page
       needs a bespoke color rule.
         money  champagne / forest      care   stone / walnut
         place  sandstone / taupe       time   mist  / ink navy
         people yellow    / espresso    guide  lilac / indigo
       sage and plum stay reserved for STATE and are never grounds.

   3 · TYPE — one 1.25 scale, three weights (300/400/500). No bold.
       Display tracks positive. Mobile sizes lead; clamp scales up.

   4 · MOTION & SOUND — press only, never hover. Micro-sounds are
       synthesised (Web Audio, zero bytes downloaded) from the
       eye-doctor soundboard: lens detents, carriage glides,
       shutter. Off under prefers-reduced-motion; user toggle in
       the footer.

   5 · IMAGES — supplied photography where cleared; every other
       slot is a one-color block carrying a written brief.

   Borrowed as a register, not a layout. Draft figures live in the
   companion verification list, not in inline badges.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* neutrals */
  --black:#1C1B1B; --white:#FCFCFC; --bone:#F5F3EF; --bone-2:#EDEAE3;
  --grey:#686664; --grey-2:#8C8985; --line:#DDD9D4;
  /* state — never grounds */
  --sage:#99B383; --plum:#5F5974;
  /* domain triads */
  --money-l:#E9DBBE; --money-d:#0C330D; --money-a:#0C330D;
  --care-l:#D8CDC1;  --care-d:#3D2E1D;  --care-a:#3D2E1D;
  --place-l:#D9CCBF; --place-d:#564C47;  --place-a:#564C47;
  --time-l:#E9F2F9;  --time-d:#0F1624;   --time-a:#0F1624;
  --people-l:#EEE3B1;--people-d:#190800;  --people-a:#3C231D;
  --guide-l:#F6E7F8; --guide-d:#313B58;  --guide-a:#313B58;
  --home-l:#D3E5F3;  --home-d:#3D576B;   --home-a:#3D576B;   /* slate blue */
  /* resolved per page */
  --dom-l:var(--bone); --dom-d:var(--black); --dom-a:var(--black);

  --r-pill:999px; --r-card:14px; --r-inset:6px;

  /* type — mobile first */
  --t-micro:12px; --t-cap:14px; --t-label:14px; --t-ui:16px;
  --t-body:17px;  --t-lede:19px; --t-h4:22px;   --t-h3:26px;
  --t-h1:34px;    --t-hero:44px;
  --t-section:34px; --t-item:24px; --t-tile:20px;
  --tr-display:.004em; --tr-body:.002em; --tr-label:.09em;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:22px;
  --s6:30px; --s7:42px; --s8:60px; --s9:88px;
  --navh:82px; --pad:20px; --maxw:1180px;
  --font:"Figtree",system-ui,"Helvetica Neue",Helvetica,Arial,sans-serif;
}
@media (min-width:700px){
  :root{ --t-lede:21px; --t-h4:24px; --t-h3:30px; --t-h1:44px; --t-hero:62px;
         --t-section:46px; --t-item:30px; --t-tile:22px;
         --pad:40px; --navh:82px; --s9:96px; }
}
@media (min-width:1100px){
  :root{ --t-body:19px; --t-lede:23px; --t-h4:27px; --t-h3:34px; --t-h1:56px; --t-hero:82px;
         --t-section:62px; --t-item:38px; --t-tile:24px;
         --pad:64px; --navh:84px; --s9:104px; }
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}
body{ margin:0; background:var(--white); color:var(--black); font-family:var(--font);
  font-size:var(--t-body); font-weight:400; line-height:1.5; letter-spacing:var(--tr-body);
  -webkit-font-smoothing:antialiased; overflow-x:hidden; }
h1,h2,h3,h4{ margin:0; font-weight:500; letter-spacing:var(--tr-display); line-height:1.1; text-wrap:balance; }
p,ul,ol,dl{ margin:0; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }
img{ display:block; max-width:100%; }
:focus-visible{ outline:2px solid currentColor; outline-offset:3px; border-radius:var(--r-inset); }
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
/* the honeypot: off-screen for everyone, hidden from assistive technology */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
/* Off-screen until a keyboard reaches it, so a mouse user never sees it and
   a Tab user gets it first. */
.skip{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--black); color:var(--white);
  padding:12px 20px; border-radius:0 0 var(--r-card) 0; font-size:var(--t-ui); font-weight:500; text-decoration:none; }
.skip:focus{ left:0; }
/* The message is the signal; the border only agrees with it. */
.fielderr{ display:block; margin-top:6px; font-size:var(--t-cap); font-weight:500; color:var(--people-a); }
.field input[aria-invalid="true"]{ border-color:var(--people-a); }
[hidden]{ display:none !important; }

/* domain resolution — one declaration drives grounds and states */
[data-domain="money"] { --dom-l:var(--money-l);  --dom-d:var(--money-d);  --dom-a:var(--money-a); }
[data-domain="care"]  { --dom-l:var(--care-l);   --dom-d:var(--care-d);   --dom-a:var(--care-a); }
[data-domain="place"] { --dom-l:var(--place-l);  --dom-d:var(--place-d);  --dom-a:var(--place-a); }
[data-domain="time"]  { --dom-l:var(--time-l);   --dom-d:var(--time-d);   --dom-a:var(--time-a); }
[data-domain="people"]{ --dom-l:var(--people-l); --dom-d:var(--people-d); --dom-a:var(--people-a); }
[data-domain="guide"] { --dom-l:var(--guide-l);  --dom-d:var(--guide-d);  --dom-a:var(--guide-a); }
[data-domain="home"]  { --dom-l:var(--home-l);   --dom-d:var(--home-d);   --dom-a:var(--home-a); }
/* section-scoped grounds so one page can visit more than one domain */
.g-forest{ background:var(--money-d); color:var(--white); }
.g-taupe{ background:var(--place-d); color:var(--white); }
.g-slate{ background:var(--home-d); color:var(--white); }
.g-butterlight{ background:var(--people-l); color:var(--black); }
/* HOMEPAGE EXCEPTION — the clarity section borrows the Guides pair
   (indigo slate ground, pale lilac accents) instead of its own money-domain
   green. Scoped to this class so it cannot leak into the domain map. */
.g-indigo{ background:var(--guide-d); color:var(--white); }
.g-indigo .kicker{ color:var(--guide-l); opacity:.74; }
.g-indigo .lede{ color:rgba(246,231,248,.8); }
.g-indigo.on-dark .btn-fill{ background:var(--guide-l); color:var(--guide-d); }
.g-indigo.on-dark .btn-fill:hover{ background:var(--white); }
.g-indigo .answers{ background:rgba(246,231,248,.18); }
.g-indigo .ans{ background:rgba(246,231,248,.09); }
.g-indigo .ans dt{ color:rgba(246,231,248,.68); }
.g-indigo .ans small{ color:rgba(246,231,248,.66); }
.g-indigo .opill{ border-color:rgba(246,231,248,.42); color:var(--guide-l); }
.g-indigo .opill:hover{ background:rgba(246,231,248,.18); border-color:var(--guide-l); color:var(--white); }

.i{ width:1em; height:1em; flex:none; stroke:currentColor; fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.i.fill{ fill:currentColor; stroke:none; }
.i-xl{ font-size:34px; } .i-lg{ font-size:26px; } .i-md{ font-size:21px; } .i-sm{ font-size:17px; }

/* grounds */
.g-white{ background:var(--white); color:var(--black); }
.g-bone{ background:var(--bone); color:var(--black); }
.g-black{ background:var(--black); color:var(--white); }
.g-light{ background:var(--dom-l); color:var(--black); }
.g-deep{ background:var(--dom-d); color:var(--white); }
.on-dark{ --line:rgba(252,252,252,.2); --grey:rgba(252,252,252,.74); --grey-2:rgba(252,252,252,.58); }

.kicker{ display:flex; align-items:center; gap:var(--s2); font-size:var(--t-label); font-weight:500;
  letter-spacing:var(--tr-label); text-transform:uppercase; color:var(--grey); margin-bottom:var(--s5); }
.kicker .i{ opacity:.6; }
.h-hero{ font-size:var(--t-hero); font-weight:400; line-height:1.02; max-width:13ch; }
.h-1{ font-size:var(--t-h1); max-width:16ch; }
.h-2{ font-size:var(--t-section); max-width:15ch; line-height:1.04; }
.h-3{ font-size:var(--t-h3); }
.h-4{ font-size:var(--t-h4); }
.lede{ margin-top:var(--s5); font-size:var(--t-lede); line-height:1.42; color:var(--grey); max-width:50ch; }
.sub{ margin-top:var(--s3); font-size:var(--t-ui); color:var(--grey); max-width:62ch; }
.cap{ font-size:var(--t-cap); color:var(--grey-2); }

.chapter{ padding:var(--s8) 0; }
@media (min-width:700px){ .chapter{ padding:var(--s9) 0; } }
main > .chapter:first-child{ padding-top:calc(var(--navh) + var(--s7)); }
.stack{ display:flex; flex-direction:column; gap:var(--s7); }
@media (min-width:700px){ .stack{ gap:var(--s8); } }
.chapter.tight .stack{ gap:var(--s6); }
.chapter.tight{ padding-bottom:var(--s7); }
.stack-sm{ display:flex; flex-direction:column; gap:var(--s5); }
/* the list style used inside a policy document: a marker, generous leading,
   and the same measure as the prose beside it */
ul.plain{ list-style:none; margin:var(--s4) 0 0; padding:0; display:grid; gap:12px;
  font-size:var(--t-ui); color:var(--grey); max-width:74ch; }
ul.plain li{ position:relative; padding-left:20px; line-height:1.55; }
ul.plain li::before{ content:""; position:absolute; left:2px; top:.62em;
  width:6px; height:6px; border-radius:50%; background:var(--dom-a); opacity:.55; }
.urgnote{ display:flex; gap:var(--s4); align-items:flex-start; margin-top:var(--s7);
  background:var(--people-l); color:var(--black); border-radius:var(--r-card); padding:var(--s5) var(--s6); }
.urgnote .i{ flex:none; margin-top:2px; opacity:.7; }
.urgnote p{ font-size:var(--t-ui); color:rgba(28,27,27,.76); max-width:74ch; }
.urgnote b{ font-weight:500; color:var(--black); }

/* nav — floats, no band */
.navwrap{ position:fixed; top:0; left:0; right:0; z-index:60; padding:var(--s3) var(--pad); pointer-events:none; }
.nav{ max-width:var(--maxw); margin-inline:auto; background:var(--bone); border-radius:var(--r-pill);
  display:flex; align-items:center; gap:6px; padding:8px 8px 8px 18px; min-height:64px;
  pointer-events:auto; box-shadow:0 2px 14px -6px rgba(28,27,27,.22); }
/* Three complete lockups — ring plus wordmark — all on the same 64-unit
   box and all rendered at 41px, so the ring geometry, baseline and apparent
   TYPE SIZE are identical in every state. Only the words change.
   Rendered widths: full 277px, mid 172px, AVCC 93px.
   Each lockup is held until the gap between its last letter and the Menu pill
   falls under about 40px, which is where the two stop reading as separate
   groups. Measured: the full four words still clear the pill at 546px and the
   gap is 40px at 580; the two words clear at 432px and have 45px at 480. */
.nav .mark{ display:flex; align-items:center; margin-right:auto; text-decoration:none; color:var(--black); }
.nav .mark svg{ height:41px; width:auto; display:block; overflow:visible; }
.wmid,.wavcc{ display:none; }
@media (max-width:579px){ .wfull{ display:none; } .wmid{ display:block; } }
@media (max-width:479px){ .wmid{ display:none; } .wavcc{ display:block; } }
.navlinks{ display:flex; align-items:center; gap:0; }
.navlinks a{ text-decoration:none; font-size:17px; font-weight:500; color:var(--grey);
  padding:9px 10px; border-radius:var(--r-pill); white-space:nowrap; transition:background .15s ease,color .15s ease; }
.navlinks a:hover{ color:var(--white); background:var(--dom-a); }
.navlinks a:active{ transform:translateY(1px); }
.navlinks a[aria-current="page"]{ color:var(--black); background:rgba(28,27,27,.09); }
.navtoggle{ display:none; background:var(--bone-2); border:0; border-radius:var(--r-pill);
  padding:12px 17px; font-size:17px; font-weight:500; cursor:pointer; align-items:center; gap:var(--s2); color:var(--black); }
@media (max-width:1240px){
  .navlinks{ display:none; position:absolute; top:calc(100% + 8px); left:0; right:0; background:var(--bone);
    border-radius:var(--r-card); padding:var(--s3); flex-direction:column; align-items:stretch;
    box-shadow:0 18px 40px -20px rgba(28,27,27,.4); }
  .nav{ position:relative; } .nav.open .navlinks{ display:flex; } .navtoggle{ display:inline-flex; }
}
.lbl-short{ display:none; }
/* The full row needs 1152px, and the nav can only be as wide as the page gutters
   allow (--pad is 64px on desktop). Above 1320 there is room for the long label;
   between 1240 and 1320 the short one keeps the links from pushing the button
   out of the pill; below 1240 the links collapse into the menu. */
@media (max-width:1320px){ .lbl-full{ display:none; } .lbl-short{ display:inline; } }
@media (max-width:660px){ .nav{ padding:7px; gap:6px; flex-wrap:nowrap; } }
/* Under 380px the three pills no longer fit and the Request button was pushed
   out past the rounded edge. The word goes and the rule stays: the button keeps
   its height and becomes a square around the same icon, which buys back about
   60px - enough to hold the row together down to roughly 300px. The button is
   still named Menu for a screen reader. */
@media (max-width:379px){
  .navtoggle .navlbl{ display:none; }
  /* it stretches to the row so it keeps the Request pill's height, and the
     square makes that a circle around the icon - never a smaller button */
  .navtoggle{ padding:0; gap:0; align-self:stretch; min-width:50px; justify-content:center; }
}

/* buttons — hover and press resolve from the page domain */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  font-size:var(--t-ui); font-weight:500; letter-spacing:var(--tr-body); padding:14px 24px;
  border-radius:var(--r-pill); border:1px solid transparent; cursor:pointer; text-decoration:none;
  white-space:nowrap; transition:background .15s ease,color .15s ease,transform .1s ease,border-color .15s ease; }
.btn-sm{ padding:12px 20px; font-size:16px; }
.btn:active{ transform:translateY(1px) scale(.985); }
.btn-fill{ background:var(--black); color:var(--white); }
.btn-fill:hover{ background:var(--dom-a); }
.btn-line{ background:transparent; color:inherit; border-color:rgba(28,27,27,.26); }
.btn-line:hover{ background:var(--dom-a); color:var(--white); border-color:var(--dom-a); }
.on-dark .btn-fill{ background:var(--white); color:var(--black); }
.on-dark .btn-fill:hover{ background:var(--bone-2); }
.on-dark .btn-line{ border-color:rgba(252,252,252,.42); }
.on-dark .btn-line:hover{ background:rgba(252,252,252,.14); color:var(--white); border-color:rgba(252,252,252,.6); }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }
.btnrow{ display:flex; gap:var(--s3); flex-wrap:wrap; }
.arrowbtn{ width:46px; height:46px; border-radius:var(--r-pill); background:var(--white); color:var(--black);
  display:grid; place-items:center; flex:none; transition:transform .16s ease,background .15s ease,color .15s ease; }
@media (min-width:700px){ .arrowbtn{ width:52px; height:52px; } }

/* state pills */
.pill{ display:inline-flex; align-items:center; gap:7px; font-size:var(--t-cap); font-weight:500;
  letter-spacing:.05em; text-transform:uppercase; border-radius:var(--r-pill); padding:5px 13px; white-space:nowrap; }
.pill-sage{ background:var(--sage); color:#16240F; }
.pill-plum{ background:var(--plum); color:var(--white); }
.pill-quiet{ border:1px solid currentColor; color:var(--grey); }

/* surfaces */
.card{ background:var(--white); border-radius:var(--r-card); padding:var(--s6); }
.g-white .card,.g-light .card{ background:var(--bone); }
.g-light .card{ background:rgba(252,252,252,.6); }
.on-dark .card{ background:rgba(252,252,252,.08); }
.grid{ display:grid; gap:var(--s4); }
.g-2{ grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.g-3{ grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.split{ display:grid; grid-template-columns:1fr; gap:var(--s6); align-items:center; }
@media (min-width:880px){ .split{ grid-template-columns:1.05fr .95fr; gap:var(--s8); } }

/* media */
.shot{ border-radius:var(--r-card); overflow:hidden; background:var(--bone-2); }
.shot img{ width:100%; height:100%; object-fit:cover; }
.r43{ aspect-ratio:4/3; } .r11{ aspect-ratio:1/1; } .r219{ aspect-ratio:21/9; } .r169{ aspect-ratio:16/9; }
.fpo{ background:var(--bone-2); color:var(--place-d); display:grid; place-content:center; gap:var(--s2);
  text-align:center; padding:var(--s5); border-radius:var(--r-card); }
.fpo b{ font-size:var(--t-micro); font-weight:500; letter-spacing:.14em; }
.fpo span{ font-size:var(--t-micro); max-width:32ch; line-height:1.45; }
.on-dark .fpo{ background:rgba(252,252,252,.1); color:rgba(252,252,252,.72); }
/* full-bleed content breaker */
.bleed{ position:relative; margin:0; }
.bleed .frame{ aspect-ratio:16/9; overflow:hidden; background:var(--bone-2); }
@media (min-width:700px){ .bleed .frame{ aspect-ratio:21/9; } }
.bleed .frame img{ width:100%; height:100%; object-fit:cover; }
.bleed figcaption{ position:absolute; left:var(--pad); bottom:var(--s4); right:var(--pad);
  font-size:var(--t-micro); color:rgba(252,252,252,.72); max-width:64ch; line-height:1.45;
  text-shadow:0 1px 6px rgba(0,0,0,.6); }

/* breadcrumbs */
.crumbs{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2); font-size:var(--t-cap); color:var(--grey); margin-bottom:var(--s5); }
.crumbs a{ text-decoration:none; } .crumbs a:hover{ text-decoration:underline; }
.crumbs .sep{ opacity:.45; }

/* hero */
.hero{ position:relative; color:var(--white); background:var(--black); overflow:hidden;
  padding:calc(var(--navh) + var(--s8)) 0 var(--s8); }
@media (min-width:700px){ .hero{ padding:calc(var(--navh) + 132px) 0 132px; } }
@media (min-width:1100px){ .hero{ padding:calc(var(--navh) + 168px) 0 168px; } }
.hero-bg{ position:absolute; inset:0; }
.hero-bg img{ width:100%; height:100%; object-fit:cover; object-position:68% 40%; transform:scaleX(-1); }
.hero-bg::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(102deg, rgba(20,29,36,.96) 0%, rgba(20,29,36,.90) 38%, rgba(20,29,36,.46) 100%); }
.hero .wrap{ position:relative; }
.hero .lede{ color:rgba(252,252,252,.82); max-width:44ch; }
.hero-cta{ display:flex; gap:var(--s3); flex-wrap:wrap; margin-top:var(--s7); }

/* big question bubbles — 2-up, larger */
.bubbles{ display:grid; grid-template-columns:1fr; gap:var(--s4); }
@media (min-width:760px){ .bubbles{ grid-template-columns:1fr 1fr; gap:var(--s5); } }
.bubble{ display:flex; flex-direction:column; gap:var(--s3); text-decoration:none; background:var(--bone);
  border-radius:var(--r-card); padding:var(--s6) var(--s5) var(--s5);
  transition:background .16s ease,color .16s ease,transform .1s ease; }
@media (min-width:760px){ .bubble{ padding:var(--s7) var(--s6) var(--s6); } }
.g-bone .bubble,.g-light .bubble{ background:var(--white); }
.bubble .i{ opacity:.5; transition:opacity .16s ease; }
.bubble h3{ font-size:var(--t-item); font-weight:400; line-height:1.08; letter-spacing:0; }
.bubble p{ font-size:var(--t-ui); color:var(--grey); transition:color .16s ease; }
.bubble em{ font-style:normal; font-size:var(--t-ui); font-weight:500; margin-top:auto; padding-top:var(--s4);
  display:inline-flex; align-items:center; gap:7px; }
.bubble:hover{ background:var(--dom-a); color:var(--white); }
.bubble:hover p{ color:rgba(252,252,252,.78); }
.bubble:hover .i{ opacity:.9; }
.bubble:active{ transform:translateY(1px) scale(.995); }

/* four-answer summary */
.answers{ display:grid; grid-template-columns:1fr; gap:1px; background:var(--line);
  border-radius:var(--r-card); overflow:hidden; }
@media (min-width:560px){ .answers{ grid-template-columns:1fr 1fr; } }
@media (min-width:980px){ .answers{ grid-template-columns:repeat(4,1fr); } }
/* a translucent lift of whatever chapter it sits in, so it can never be a
   foreign hue against the section ground */
.ans{ background:rgba(252,252,252,.07); color:var(--white); padding:var(--s5) var(--s5) var(--s6); }
.answers{ background:rgba(252,252,252,.14); }
.g-light .ans,.g-bone .ans,.g-white .ans{ background:rgba(28,27,27,.05); color:var(--black); }
.ans dt{ display:flex; align-items:center; gap:7px; font-size:var(--t-cap); font-weight:500;
  letter-spacing:var(--tr-label); text-transform:uppercase; color:rgba(252,252,252,.6); }
.ans dd{ margin:var(--s3) 0 0; font-size:var(--t-h4); font-weight:400; line-height:1.15; }
.ans small{ display:block; margin-top:10px; font-size:var(--t-cap); line-height:1.5; color:rgba(252,252,252,.64); }
.g-light .ans small,.g-bone .ans small,.g-white .ans small{ color:var(--grey); }
.linkpills{ display:flex; flex-wrap:wrap; gap:7px; }
.lpill{ display:inline-flex; align-items:center; font-size:var(--t-cap); font-weight:500; text-decoration:none;
  border:1px solid var(--line); border-radius:var(--r-pill); padding:7px 15px;
  transition:background .15s ease,color .15s ease,border-color .15s ease,transform .1s ease; }
.lpill:hover{ background:var(--dom-a); color:var(--white); border-color:var(--dom-a); }
.lpill:active{ transform:translateY(1px); }
.officepills{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.opill{ display:inline-flex; align-items:center; font-size:var(--t-cap); font-weight:500; text-decoration:none;
  border:1px solid rgba(252,252,252,.34); border-radius:var(--r-pill); padding:5px 13px; color:var(--white);
  transition:background .15s ease,color .15s ease,border-color .15s ease; }
.opill:hover{ background:rgba(252,252,252,.14); color:var(--white); border-color:rgba(252,252,252,.6); }
.opill:active{ transform:translateY(1px); }
.g-light .opill,.g-bone .opill,.g-white .opill{ border-color:var(--line); color:var(--black); }
.g-light .opill:hover,.g-bone .opill:hover,.g-white .opill:hover{ background:var(--black); color:var(--white); border-color:var(--black); }

/* price */
.bigprice{ display:flex; align-items:baseline; gap:var(--s3); flex-wrap:wrap; }
.bigprice b{ font-size:clamp(52px,13vw,96px); font-weight:300; line-height:.9; letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
.bigprice .u{ font-size:var(--t-lede); color:var(--grey); }
.amt{ margin-top:var(--s5); display:flex; align-items:baseline; gap:var(--s3); flex-wrap:wrap; }
.amt b{ font-size:clamp(42px,9vw,66px); font-weight:300; line-height:1; font-variant-numeric:tabular-nums; }
.amt .u{ font-size:var(--t-ui); color:var(--grey); }
details.disc{ border-top:1px solid var(--line); }
details.disc:first-of-type{ margin-top:var(--s5); }
details.disc summary{ cursor:pointer; list-style:none; padding:14px 0; font-size:var(--t-ui); font-weight:500;
  display:flex; justify-content:space-between; align-items:center; gap:var(--s4); }
details.disc summary::-webkit-details-marker{ display:none; }
details.disc summary:hover{ color:var(--dom-a); }
details.disc summary .chev{ transition:transform .2s ease; opacity:.5; }
details.disc[open] summary .chev{ transform:rotate(180deg); }
details.disc ul{ list-style:none; margin:0 0 var(--s4); padding:0; display:grid; gap:10px; font-size:var(--t-ui); color:var(--grey); }
details.disc li{ display:flex; gap:11px; align-items:flex-start; }
details.disc li .i{ margin-top:4px; flex:none; opacity:.55; }
.arrowlink{ display:inline-flex; align-items:center; gap:8px; font-size:var(--t-ui); font-weight:500;
  text-decoration:none; border-bottom:1.5px solid currentColor; padding-bottom:2px; align-self:flex-start; }
.arrowlink:hover{ color:var(--dom-a); }
/* the same look, but able to wrap inside a sentence */
.inlink{ font-weight:500; text-decoration:none; border-bottom:1.5px solid currentColor; }
.inlink:hover{ color:var(--dom-a); }

/* inputs */
.field > span{ display:flex; align-items:center; gap:6px; font-size:var(--t-cap); font-weight:500;
  letter-spacing:var(--tr-label); text-transform:uppercase; color:var(--grey); margin-bottom:9px; }
input[type=text],input[type=tel],input[type=email],select{ width:100%; font:inherit; font-size:var(--t-ui);
  color:var(--black); background:var(--white); border:1px solid var(--line); border-radius:var(--r-inset); padding:13px 15px; }
.on-dark input,.on-dark select{ background:var(--white); border-color:transparent; }
input:focus-visible,select:focus-visible{ outline:2px solid var(--black); outline-offset:1px; }
.on-dark input:focus-visible,.on-dark select:focus-visible{ outline-color:var(--white); outline-offset:2px; }
.plist{ list-style:none; margin-top:var(--s4); display:grid; gap:11px; font-size:var(--t-ui); }
.plist li{ display:flex; gap:10px; align-items:flex-start; }
.plist li .i{ margin-top:4px; flex:none; opacity:.5; }
.pnote{ font-style:normal; font-size:var(--t-cap); color:var(--grey); }
.chips{ display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s4); }
.chip{ font-size:15px; font-weight:500; background:transparent; color:inherit; border:1px solid var(--line);
  border-radius:var(--r-pill); padding:9px 16px; cursor:pointer; transition:background .15s ease,color .15s ease,border-color .15s ease; }
.chip:hover{ background:var(--dom-a); color:var(--white); border-color:var(--dom-a); }
.chip:active{ transform:translateY(1px); }
.verdict{ margin-top:var(--s5); border-radius:var(--r-card); padding:var(--s5); background:rgba(252,252,252,.1); }
@media (min-width:700px){ .verdict{ padding:var(--s5) var(--s6); } }
.verdict[data-state="match"]{ background:var(--sage); color:#16240F; }
.verdict[data-state="review"]{ background:var(--plum); color:var(--white); }
.verdict[data-state="none"]{ background:var(--people-l); color:var(--black); }
.verdict[data-state="selfpay"]{ background:var(--bone); color:var(--black); }
.verdict .vh{ display:block; margin-top:var(--s3); font-size:var(--t-h4); font-weight:500; }
.verdict .vb{ margin-top:10px; font-size:var(--t-ui); opacity:.82; max-width:62ch; }
.verdict .vlinks{ margin-top:var(--s4); display:flex; gap:var(--s4); flex-wrap:wrap; font-size:var(--t-ui); font-weight:500; }
/* plan combobox */
.cwrap{ position:relative; display:block; color:var(--black); }
.cwrap .mag{ position:absolute; left:17px; top:50%; transform:translateY(-50%); opacity:.4; pointer-events:none; }
#plan,#pay{ padding-left:48px; border-width:1.5px; transition:border-color .14s ease,box-shadow .14s ease; }
#plan::placeholder,#pay::placeholder{ color:#6E6C6A; opacity:1; }
#plan:focus,#pay:focus{ outline:none; border-color:var(--dom-a); box-shadow:0 0 0 3px var(--dom-l); }
.suggest li.paykey{ background:var(--money-l); }
.suggest li.paykey .pn{ font-weight:500; }
.suggest li.paykey .kind{ color:rgba(28,27,27,.6); }
.suggest li.paykey:hover,.suggest li.paykey[aria-selected="true"]{ background:var(--people-l); }
.suggest .grp{ padding:9px 15px 5px; font-size:var(--t-cap); font-weight:500; letter-spacing:var(--tr-label);
  text-transform:uppercase; color:var(--grey); cursor:default; background:var(--bone); }
.suggest .grp + li{ border-top:0; }
.suggest{ position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:30; list-style:none;
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-inset);
  box-shadow:0 18px 44px -16px rgba(28,27,27,.34); max-height:284px; overflow-y:auto;
  color:var(--black); }
.suggest li{ display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
  padding:12px 15px; cursor:pointer; font-size:var(--t-ui); color:var(--black); }
.suggest li + li{ border-top:1px solid var(--line); }
.suggest li:hover,.suggest li[aria-selected="true"]{ background:var(--dom-l); }
.suggest .pn{ min-width:0; }
.suggest .kind{ flex:none; font-size:var(--t-cap); font-weight:500; letter-spacing:var(--tr-label);
  text-transform:uppercase; color:rgba(28,27,27,.72); }
/* narrow: the qualifier sits under the name rather than fighting it for the row */
@media (max-width:620px){
  .suggest li{ flex-direction:column; align-items:flex-start; gap:4px; padding:11px 15px; }
  .suggest .kind{ font-size:12px; }
}
.chiplbl{ align-self:center; margin-right:2px; font-size:var(--t-cap); font-weight:500;
  letter-spacing:var(--tr-label); text-transform:uppercase; color:var(--grey); }

/* the answer says one thing, then which visit it is for, then what happens next */
.verdict:empty{ display:none; }
.verdict .vuse{ display:flex; gap:11px; align-items:flex-start; margin-top:var(--s5);
  padding-top:var(--s5); border-top:1px solid rgba(28,27,27,.18); }
.verdict[data-state="review"] .vuse{ border-top-color:rgba(252,252,252,.24); }
.verdict .vuse .i{ flex:none; margin-top:1px; opacity:.7; }
.verdict .vuse b{ display:block; font-size:var(--t-ui); font-weight:500; }
.verdict .vuse span{ display:block; margin-top:5px; font-size:var(--t-ui); opacity:.78; max-width:52ch; }
.verdict .vlinks{ margin-top:var(--s5); }
.verdict[data-state="match"] .btn-line{ border-color:rgba(22,36,15,.34); }
.verdict[data-state="review"] .btn-fill{ background:var(--white); color:var(--black); }
.verdict[data-state="review"] .btn-line{ border-color:rgba(252,252,252,.4); }

/* coverage types */
.ctitle{ display:flex; align-items:center; gap:10px; }
.ctitle .i{ flex:none; opacity:.5; }
.plabel{ margin-top:var(--s6); font-size:var(--t-cap); font-weight:500;
  letter-spacing:var(--tr-label); text-transform:uppercase; color:var(--grey); }
.listdate{ display:flex; align-items:center; gap:8px; margin-top:var(--s5);
  font-size:var(--t-cap); color:var(--grey); }
.listdate .i{ flex:none; opacity:.6; }

/* location */
.loc{ border-radius:var(--r-card); overflow:hidden; background:var(--bone); display:flex; flex-direction:column; }
.g-bone .loc,.g-light .loc{ background:var(--white); }
.on-dark .loc{ background:rgba(252,252,252,.09); }
.loc-body{ padding:var(--s5) var(--s5) var(--s6); display:flex; flex-direction:column; gap:var(--s3); flex:1; }
.tel{ display:inline-flex; align-items:center; gap:8px; font-size:var(--t-lede); font-weight:500; text-decoration:none; align-self:flex-start; }
.tel:hover{ color:var(--dom-a); text-decoration:underline; }
address{ font-style:normal; color:var(--grey); font-size:var(--t-ui); }
.maplink{ display:inline-flex; align-items:center; gap:7px; font-size:var(--t-cap); font-weight:500;
  border:1px solid var(--line); border-radius:var(--r-pill); padding:6px 13px; align-self:flex-start;
  text-decoration:none; transition:background .15s ease,color .15s ease,border-color .15s ease; }
.maplink:hover{ background:var(--dom-a); color:var(--white); border-color:var(--dom-a); }

/* label/value rows — second column aligns across every row, sitewide */
.rows{ display:grid; grid-template-columns:1fr; }
@media (min-width:620px){ .rows{ grid-template-columns:minmax(120px,max-content) 1fr; column-gap:var(--s5); } }
.rows > div{ display:contents; }
.rows dt{ font-size:var(--t-cap); font-weight:500; letter-spacing:var(--tr-label); text-transform:uppercase;
  color:var(--grey); padding:14px 0 2px; border-bottom:0; }
.rows dd{ margin:0; font-size:var(--t-ui); padding:0 0 14px; border-bottom:1px solid var(--line); }
@media (min-width:620px){
  .rows dt{ padding:15px 0; border-bottom:1px solid var(--line); }
  .rows dd{ padding:15px 0; }
  /* where a label carries a caveat, the values get the wider share so the
     hours can stay on one line instead of being squeezed into stacks */
  .rows.rows-wide{ grid-template-columns:minmax(118px,.66fr) minmax(0,1.34fr); }
}
.rows > div:last-child dt,.rows > div:last-child dd{ border-bottom:0; }

/* wizard */
.shell{ background:var(--bone); border-radius:var(--r-card); overflow:hidden; }
.g-bone .shell,.g-light .shell{ background:var(--white); }
.steps{ display:flex; list-style:none; padding:0; flex-wrap:wrap; background:rgba(28,27,27,.05); }
.steps li{ flex:1 1 110px; }
.step-tab{ display:flex; align-items:center; gap:9px; padding:15px 16px; font-size:15px; font-weight:500; color:var(--grey); }
.steps li[aria-current="step"] .step-tab{ color:var(--black); background:var(--bone); }
.g-bone .steps li[aria-current="step"] .step-tab,.g-light .steps li[aria-current="step"] .step-tab{ background:var(--white); }
.step-n{ width:24px; height:24px; border-radius:var(--r-pill); background:rgba(28,27,27,.14); display:grid; place-items:center; font-size:var(--t-cap); flex:none; }
.steps li[aria-current="step"] .step-n{ background:var(--dom-a); color:var(--white); }
.steps li.done .step-n{ background:var(--sage); color:#16240F; }
.panel{ padding:var(--s6) var(--s5); }
@media (min-width:700px){ .panel{ padding:var(--s7); } }
.q-help{ margin-top:var(--s3); font-size:var(--t-ui); color:var(--grey); max-width:56ch; }
fieldset{ border:0; margin:var(--s6) 0 0; padding:0; }
legend{ display:flex; align-items:center; gap:6px; font-size:var(--t-cap); font-weight:500;
  letter-spacing:var(--tr-label); text-transform:uppercase; color:var(--grey); padding:0; margin-bottom:var(--s3); }
.opts{ display:grid; grid-template-columns:1fr; gap:10px; }
@media (min-width:560px){ .opts{ grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); } }
.opt{ position:relative; }
.opt input{ position:absolute; inset:0; opacity:0; cursor:pointer; }
.opt span{ display:block; background:var(--white); border:1px solid var(--line); border-radius:var(--r-inset);
  padding:16px 18px; font-size:var(--t-ui); cursor:pointer; transition:border-color .15s ease,box-shadow .15s ease; }
.g-bone .opt span,.g-light .opt span{ background:var(--bone); }
.opt small{ display:block; font-size:var(--t-cap); color:var(--grey); margin-top:5px; }
.opt input:checked + span{ border-color:var(--dom-a); box-shadow:inset 0 0 0 1px var(--dom-a); }
.opt input:focus-visible + span{ outline:2px solid var(--black); outline-offset:2px; }
.navrow{ display:flex; gap:var(--s3); align-items:center; margin-top:var(--s6); flex-wrap:wrap; }
.navrow .spacer{ flex:1; }
.back{ background:none; border:0; font-size:var(--t-ui); font-weight:500; color:var(--grey); cursor:pointer;
  padding:10px 2px; display:inline-flex; align-items:center; gap:6px; }
.back:hover{ color:var(--dom-a); }
.fields{ display:grid; grid-template-columns:1fr; gap:var(--s4); margin-top:var(--s5); }
@media (min-width:620px){ .fields{ grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); } }
.safety{ margin-top:var(--s5); background:var(--people-l); color:var(--black); border-radius:var(--r-card);
  padding:var(--s5); display:flex; gap:var(--s4); font-size:var(--t-ui); }
.safety .i{ margin-top:3px; flex:none; }
.safety b{ display:block; font-weight:500; margin-bottom:5px; }
.review{ margin-top:var(--s6); background:var(--white); border-radius:var(--r-card); padding:var(--s5); }
@media (min-width:700px){ .review{ padding:var(--s5) var(--s6); } }
.g-bone .review,.g-light .review{ background:var(--bone); }
.needs{ margin-top:var(--s4); display:flex; align-items:center; gap:8px; font-size:var(--t-ui); color:var(--grey); }
.ref{ margin-top:var(--s5); display:inline-flex; flex-direction:column; gap:4px; background:var(--white);
  border-radius:var(--r-card); padding:var(--s4) var(--s5); }
.g-bone .ref,.g-light .ref{ background:var(--bone); }
.ref span{ font-size:var(--t-cap); letter-spacing:var(--tr-label); text-transform:uppercase; color:var(--grey); font-weight:500; }
.ref b{ font-size:var(--t-h4); font-weight:400; letter-spacing:.02em; font-variant-numeric:tabular-nums; }

/* tiles */
.svc{ display:flex; flex-direction:column; gap:11px; text-decoration:none; background:var(--bone);
  border-radius:var(--r-card); padding:var(--s5); transition:background .16s ease,color .16s ease,transform .1s ease; }
.g-bone .svc,.g-light .svc{ background:var(--white); }
.svc:hover{ background:var(--dom-a); color:var(--white); }
.svc:hover span{ color:rgba(252,252,252,.78); }
.svc:hover .i{ opacity:.9; }
.svc:active{ transform:translateY(1px); }
.svc .i{ opacity:.5; transition:opacity .16s ease; }
.svc b{ font-size:var(--t-tile); font-weight:500; line-height:1.22; }
.svc span{ font-size:var(--t-ui); color:var(--grey); transition:color .16s ease; }
.svc em{ font-style:normal; font-size:15px; font-weight:500; margin-top:auto; padding-top:var(--s2);
  display:inline-flex; align-items:center; gap:6px; }
.points{ list-style:none; margin:0; padding:0; display:grid; gap:var(--s5); }
.point{ display:flex; gap:var(--s4); align-items:flex-start; }
.point .i{ margin-top:4px; opacity:.55; }
.point b{ display:block; font-weight:500; font-size:var(--t-body); }
.point span{ display:block; color:var(--grey); font-size:var(--t-ui); margin-top:4px; }

/* faq */
.qa details{ border-bottom:1px solid var(--line); }
.qa details:first-child{ border-top:1px solid var(--line); }
.qa summary{ cursor:pointer; list-style:none; padding:var(--s5) 0; font-size:var(--t-lede); font-weight:500;
  display:flex; justify-content:space-between; gap:var(--s5); align-items:center; }
.qa summary::-webkit-details-marker{ display:none; }
.qa summary:hover{ color:var(--dom-a); }
/* On a dark ground the page accent can equal the ground itself, which made
   hovered titles vanish. Lift instead of tint. */
.on-dark .qa summary:hover,
.on-dark details.disc summary:hover,
.on-dark .arrowlink:hover,
.on-dark .tel:hover,
.on-dark .back:hover{ color:var(--white); opacity:.82; }
.qa summary .chev{ opacity:.5; transition:transform .2s ease; flex:none; }
.qa details[open] summary .chev{ transform:rotate(180deg); }
.qa p{ padding-bottom:var(--s5); font-size:var(--t-ui); color:var(--grey); max-width:66ch; }

/* articles */
.art{ display:flex; flex-direction:column; gap:10px; text-decoration:none; background:var(--bone);
  border-radius:var(--r-card); padding:var(--s5); transition:background .16s ease,color .16s ease,transform .1s ease; }
.artimg{ aspect-ratio:16/9; margin-bottom:var(--s2); overflow:hidden; border-radius:var(--r-card); background:var(--bone-2); }
.artimg img{ width:100%; height:100%; object-fit:cover; display:block; }
/* hours - two schedules, never blended */
/* Doctor hours and Vision Center hours are the same component, so they always
   look alike. Day and time sit on one line while the column is wide enough for
   it, and both blocks stack together when it is not — they never disagree. */
.hrs{ list-style:none; margin:0; padding:0; display:grid; gap:9px; container-type:inline-size; }
.hrs li{ display:flex; justify-content:space-between; align-items:baseline; gap:var(--s3); font-size:var(--t-ui); }
.hrs li span{ color:var(--grey); }
.hrs li b{ font-weight:500; font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; }
.hrs li b em{ display:block; font-style:normal; font-weight:400; font-size:var(--t-cap); color:var(--grey); margin-top:2px; }
@container (max-width:250px){
  .hrs{ gap:var(--s4); }
  .hrs li{ display:block; }
  .hrs li b{ display:block; text-align:left; margin-top:3px; }
  .hrs li b em{ display:inline; margin-left:7px; }
}
/* no container-query support: keep one line and let the day name wrap instead */
@supports not (container-type:inline-size){ .hrs li span{ min-width:0; } }
/* a caveat that belongs with the row label, not with the values */
.rownote{ display:block; margin-top:6px; font-size:var(--t-cap); font-weight:400; line-height:1.45;
  letter-spacing:0; text-transform:none; color:var(--grey-2); max-width:24ch; }
.pillbox{ font-size:var(--t-ui); padding:9px 16px; }
.artimg b{ font-size:10px; letter-spacing:.16em; }
.artimg span{ font-size:10px; line-height:1.4; max-width:34ch; }
.g-bone .art,.g-light .art{ background:var(--white); }
.art:hover{ background:var(--dom-a); color:var(--white); }
.art:hover span{ color:rgba(252,252,252,.78); }
.art:active{ transform:translateY(1px); }
.art .meta{ display:flex; align-items:center; gap:var(--s2); font-size:var(--t-cap); color:var(--grey-2); transition:color .16s ease; }
.art b{ font-size:var(--t-tile); font-weight:500; line-height:1.22; }
.art span{ font-size:var(--t-ui); color:var(--grey); transition:color .16s ease; }
.figcap{ margin-top:var(--s3); font-size:var(--t-cap); color:var(--grey); line-height:1.5; max-width:74ch; }
.figcap span{ display:block; margin-top:4px; color:var(--grey-2); }
.prose h2{ font-size:var(--t-h3); margin-top:var(--s7); }
.prose p{ margin-top:var(--s4); font-size:var(--t-body); color:var(--grey); max-width:68ch; line-height:1.6; }
.cmp{ margin:var(--s6) 0 0; }
.cmp-grid{ display:grid; gap:var(--s4); grid-template-columns:1fr; }
@media (min-width:760px){ .cmp-grid{ grid-template-columns:repeat(3,1fr); } }
.cmp-card{ background:var(--white); border-radius:var(--r-card); overflow:hidden; }
.g-light .cmp-card,.g-bone .cmp-card{ background:var(--white); }
.cmp-ours{ background:var(--dom-l); }
/* each column is titled in indigo with the lilac reversed out of it */
.cmp-card h3{ background:var(--guide-d); color:var(--guide-l); margin:0;
  font-size:var(--t-ui); font-weight:500; line-height:1.3; letter-spacing:0;
  padding:var(--s4) var(--s5); }
.cmp-card dl{ padding:0 var(--s5) var(--s5); }

.cmp-card dl > div{ padding:var(--s4) 0; border-bottom:1px solid var(--line); }
.cmp-card dl > div:last-child{ border-bottom:0; padding-bottom:0; }
.cmp-card dt{ font-size:var(--t-cap); font-weight:500; letter-spacing:var(--tr-label); text-transform:uppercase;
  color:var(--grey); }
.cmp-card dd{ margin:6px 0 0; font-size:var(--t-ui); line-height:1.45; }
.prose .answer{ background:var(--bone); border-radius:var(--r-card); padding:var(--s5); font-size:var(--t-lede);
  color:var(--black); max-width:none; line-height:1.4; }
@media (min-width:700px){ .prose .answer{ padding:var(--s5) var(--s6); } }
.jumps{ display:flex; flex-wrap:wrap; gap:var(--s2); }
.jumps a{ font-size:15px; font-weight:500; text-decoration:none; border:1px solid var(--line);
  border-radius:var(--r-pill); padding:8px 15px; transition:background .15s ease,color .15s ease,border-color .15s ease; }
.jumps a:hover{ background:var(--dom-a); color:var(--white); border-color:var(--dom-a); }

/* chat */
/* ===== TRUST MARK ====================================================
   One color, always: the eye, the type and any rule are the same ink, and
   that ink is normally the page's own accent (--dom-a), so the mark belongs
   to whatever page it lands on without a second file. */
.tm{ fill:currentColor; flex:none; }
.tm-line{ display:inline-flex; align-items:center; gap:11px; font-size:var(--t-ui); color:inherit; }
.tm-line b{ font-weight:500; font-variant-numeric:tabular-nums; }
/* The words either side sit back; the number never does - it is the claim.
   Only direct spans are dimmed, so the reels nested inside the number cannot
   compound .78 on itself layer after layer while it spins. */
.tm-line > span{ opacity:.78; }
.tm-line b, .tm-line b span{ opacity:1; }
/* the eye blinks from its own center; the sparkles pop from theirs */
.eye-body{ transform-box:view-box; transform-origin:162px 96px; }
.eye-spark{ transform-box:view-box; transform-origin:297px 49px; }
/* The number arrives on reels. The window is as tall as the band allows, so a
   digit shows above and below the one landing, masked to nothing at both edges
   so they emerge from the sky color rather than from a visible box. */
.tm-num{ display:inline-block; transform-origin:50% 55%; }
.tm-num .reel{ --reel-h:4em; --reel-center:1.5em;   /* (--reel-h / 2) - 0.5em */
  display:inline-block; position:relative; vertical-align:baseline;
  -webkit-user-select:none; user-select:none; }
.tm-num .ghost{ visibility:hidden; font-style:normal; }
.tm-num .win{ position:absolute; left:0; right:0; top:50%; height:var(--reel-h);
  margin-top:calc(var(--reel-h) / -2); overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.10) 16%,#000 34%,#000 66%,rgba(0,0,0,.10) 84%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.10) 16%,#000 34%,#000 66%,rgba(0,0,0,.10) 84%,transparent 100%); }
.tm-num .reel-strip{ display:block; will-change:transform;
  transform:translateY(var(--reel-center)); }
.tm-num i{ display:block; font-style:normal; height:1em; line-height:1; text-align:center;
  transition:opacity .38s ease; }
.tm-num .fixed{ display:inline-block; }
.tm-num.seated i{ opacity:0; }
.tm-num.seated i.hit{ opacity:1; }
/* the counted number: it pulses from its own middle and holds the width of
   the finished figure, so nothing around it moves while it counts */
.tm-count{ display:inline-block; transform-origin:50% 55%; }
/* the sky band under the home hero */
.tm-band{ background:var(--home-l); color:var(--home-d); }
.tm-band .wrap{ display:flex; justify-content:center; padding-block:var(--s5); }
/* the bar used under a photograph */
.tm-bar{ display:flex; justify-content:center; border-block:1.5px solid currentColor;
  padding:var(--s5) 0; margin-top:var(--s5); color:var(--dom-a); }
.tm-lock{ display:inline-flex; align-items:center; gap:var(--s4); color:inherit; }
.tm-lock .txt{ display:flex; flex-direction:column; }
.tm-lock .top,.tm-lock .bot{ font-size:10.5px; font-weight:500; letter-spacing:.22em; text-transform:uppercase; opacity:.8; }
.tm-lock .big{ font-size:27px; font-weight:500; line-height:1.06; letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
/* the footer card */
/* On the black footer the guides pair reads best: pale lilac ground, indigo
   ink. Plum and sage are reserved for state, so neither is used as a fill. */
.tm-card{ background:var(--guide-l); color:var(--guide-d); border-radius:var(--r-card);
  padding:var(--s5) var(--s6); display:inline-flex; justify-content:center; }
.tm-card .big{ font-size:30px; }
/* the stacked seal: centered, one ink, the page's accent by default */
.tm-seal{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:var(--s3);
  color:var(--dom-a); }
.tm-seal .top,.tm-seal .bot{ font-size:12px; font-weight:500; letter-spacing:.24em; text-transform:uppercase; opacity:.82; }
.tm-seal .big{ font-size:46px; font-weight:500; line-height:1; letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
.tm-seal .top{ margin-top:var(--s2); }
/* the seal column is the narrower of the two so the photograph keeps its scale */
/* the seal and the photograph hold their row down to a genuinely narrow
   screen, rather than following the site's usual 880px split */
@media (min-width:600px){ .split-seal{ grid-template-columns:.78fr 1.22fr; gap:var(--s6); } }
@media (min-width:880px){ .split-seal{ gap:var(--s8); } }
.loadmore{ display:flex; justify-content:center; margin-top:var(--s5); }
/* floating contact panel - two routes, no pretend chat */
.cp-step[hidden]{ display:none !important; }
.cp-choice{ display:flex; flex-direction:column; gap:10px; margin-top:var(--s4); }
.cp-choice button{ display:flex; align-items:center; gap:10px; text-align:left; background:var(--white); border:1px solid var(--line);
  border-radius:var(--r-inset); padding:14px 16px; font-size:var(--t-ui); font-weight:500; cursor:pointer; }
.cp-choice button:hover{ background:var(--dom-a); color:var(--white); border-color:var(--dom-a); }
.cp-choice small{ display:block; font-weight:400; font-size:var(--t-cap); color:var(--grey); margin-top:3px; }
.cp-choice button:hover small{ color:rgba(252,252,252,.8); }
.chatpanel .field{ display:block; margin-top:var(--s3); }
.chatpanel textarea{ width:100%; font:inherit; font-size:15px; color:var(--black); background:var(--white);
  border:1px solid var(--line); border-radius:var(--r-inset); padding:10px 12px; resize:vertical; min-height:74px; }
.chatpanel .cp-head{ display:flex; align-items:center; justify-content:flex-end; gap:var(--s4); min-height:44px; }
.chatpanel .cp-head + h4{ margin-top:var(--s3); }
/* a real pill: 44px minimum target, its own contrast, and far enough from Close */
.cp-back{ display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:10px 18px 10px 13px;
  margin-right:auto; border:1px solid transparent; border-radius:var(--r-pill); background:var(--black); color:var(--white);
  font-size:var(--t-cap); font-weight:500; cursor:pointer; transition:background .15s ease,transform .1s ease; }
.cp-back span{ line-height:1; }
.cp-back .i{ margin-left:-2px; }
.cp-back:hover{ background:var(--dom-a); }
.cp-back:active{ transform:translateY(1px) scale(.985); }
.cp-back:focus-visible{ outline:2px solid var(--black); outline-offset:3px; }
.cp-close{ min-width:44px; min-height:44px; display:grid; place-items:center; }
.chatpanel .cp-head{ gap:var(--s4); }
.cp-close{ background:none; border:0; color:var(--grey); cursor:pointer; padding:4px; line-height:0; }
.cp-close:hover{ color:var(--black); }
.cp-calls{ display:grid; gap:9px; margin-top:var(--s4); }
.chatbtn{ position:fixed; right:16px; bottom:16px; z-index:70; width:54px; height:54px; border-radius:var(--r-pill);
  background:var(--black); color:var(--white); border:0; cursor:pointer; display:grid; place-items:center;
  box-shadow:0 10px 30px -10px rgba(28,27,27,.6); transition:background .15s ease,transform .1s ease; }
.chatbtn:hover{ background:var(--dom-a); } .chatbtn:active{ transform:translateY(1px); }
@media (min-width:700px){ .chatbtn{ right:20px; bottom:20px; width:60px; height:60px; } }
.chatpanel{ position:fixed; right:16px; bottom:82px; z-index:70; width:min(340px,calc(100vw - 32px));
  background:var(--bone); border-radius:var(--r-card); padding:var(--s5); box-shadow:0 20px 50px -18px rgba(28,27,27,.45);
  max-height:calc(100vh - 104px); overflow-y:auto; }
.chatpanel h4{ font-size:var(--t-lede); }
.chatpanel p{ margin-top:var(--s3); font-size:15px; color:var(--grey); }

/* footer */
footer{ background:var(--black); color:var(--white); padding:var(--s8) 0 var(--s7); }
/* the footer top shares the nav grid below it, so the trust card can line up
   with the Offices and Practice columns rather than floating on its own */
/* .fgrid below is repeat(auto-fit,minmax(150px,1fr)); these breakpoints are
   the widths at which it resolves to 4, 3, 2 and 1 track, so the card can sit
   on the same column line as the nav heading it is meant to align with. */
.foottop{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s6);
  align-items:start; margin-bottom:var(--s8); }
.foottop .footmark{ grid-column:1 / 3; }
.foottop .tm-card{ grid-column:3 / -1; justify-self:start; }   /* Offices */
@media (max-width:769px){                                       /* 3 columns */
  .foottop{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .foottop .footmark{ grid-column:1 / 3; }
  .foottop .tm-card{ grid-column:3 / -1; }                      /* Offices */
}
@media (max-width:549px){                                       /* 2 columns */
  .foottop{ grid-template-columns:repeat(2,minmax(0,1fr)); }   /* gap stays --s6 so the tracks line up */
  .foottop .footmark{ grid-column:1; }
  .foottop .tm-card{ grid-column:2 / -1; }                      /* Costs */
}
@media (max-width:369px){                                       /* 1 column */
  .foottop{ grid-template-columns:minmax(0,1fr); }
  .foottop .footmark,.foottop .tm-card{ grid-column:1; }
}
/* the card never drops below the mark: the two share a row at every width, and
   its top is aligned in script to the first word of the wordmark */
.foottop{ align-items:start; }
.tm-card{ align-items:center; padding:12px var(--s5); }
.tm-card .tm-lock{ gap:16px; }
.tm-card .tm-lock .big{ font-size:31px; line-height:1.05; }
.tm-card .tm-lock .top,.tm-card .tm-lock .bot{ font-size:12.5px; letter-spacing:.2em; }
.tm-card .tm-seal{ gap:3px; }
.tm-card .tm-seal .big{ font-size:19px; line-height:1.05; }
.tm-card .tm-seal .top,.tm-card .tm-seal .bot{ font-size:8px; letter-spacing:.18em; }
.tm-card .tm-seal .top{ margin-top:2px; }
@media (max-width:549px){ .foottop .tm-card{ padding:9px var(--s4); } }
/* the narrow columns cannot hold the full-size lockup, so it steps down
   rather than changing shape */
.tm-card.tm-small .tm-lock{ gap:11px; }
.tm-card.tm-small .tm-lock .big{ font-size:21px; }
.tm-card.tm-small .tm-lock .top,.tm-card.tm-small .tm-lock .bot{ font-size:9px; letter-spacing:.18em; }
/* the brand mark is the stacked lockup: aperture, then the four words */
.footmark{ color:var(--white); display:block; }
.footmark svg{ height:132px; width:auto; display:block; overflow:visible; }
@media (max-width:549px){ .footmark svg{ height:112px; } }
.footbase{ margin-top:var(--s8); padding-top:var(--s5); border-top:1px solid rgba(252,252,252,.16);
  display:flex; gap:var(--s5); flex-wrap:wrap; align-items:flex-start; justify-content:space-between; }
.footctl{ display:flex; gap:var(--s2); flex-wrap:wrap; }
.fgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:var(--s6); }
footer h4{ font-size:var(--t-cap); font-weight:500; letter-spacing:var(--tr-label); text-transform:uppercase; color:rgba(252,252,252,.5); }
footer ul{ list-style:none; margin:var(--s4) 0 0; padding:0; display:grid; gap:10px; font-size:var(--t-ui); }
footer a{ text-decoration:none; color:rgba(252,252,252,.84); }
footer a:hover{ color:var(--white); text-decoration:underline; }
.pref{ display:inline-flex; align-items:center; gap:11px; background:var(--money-l); color:var(--black);
  border-radius:var(--r-pill); padding:14px 24px; font-size:var(--t-ui); font-weight:500; text-decoration:none;
  transition:background .15s ease,transform .1s ease; }
.pref:hover{ background:var(--people-l); color:var(--black); text-decoration:none; }
.pref:active{ transform:translateY(1px) scale(.985); }
.fnote{ font-size:var(--t-cap); color:rgba(252,252,252,.5); max-width:74ch; line-height:1.6; }