/* ==========================================================
   SUPREME DENTURE STUDIO
   Structure follows the sister clinic's site; the visual system
   is rebuilt on the Supreme logo palette (crimson + near-black).

   Order of this file:
     1. tokens and base
     2. buttons
     3. header / footer / call bar        (every page)
     4. home page sections                (home only)
     5. sub-page patterns                 (every page except home)
     6. responsive
   ========================================================== */

/* ---------------------------------------------------------- 1. tokens */
:root{
  --ink:#16181A;
  --ink-2:#22262A;
  --paper:#FFFFFF;
  --shell:#F7F5F3;
  --band:#EFEAE6;
  --line:#E3DCD6;
  --line-2:#EFE9E4;
  --red:#D51E2D;        /* brand red, sampled from the logo */
  --red-deep:#A50F1C;
  --red-text:#B3121F;   /* red as text on light grounds (AA) */
  --muted:#5C6165;
  --display:'Archivo','Helvetica Neue',Arial,sans-serif;
  --body:'Inter','Helvetica Neue',Arial,sans-serif;
  --wrap:1280px;
  --r:3px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--shell);color:var(--ink);font-family:var(--body);
  font-size:17px;line-height:1.72;font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--display);color:var(--ink);font-weight:600;line-height:1.08;letter-spacing:-.02em}
p{max-width:70ch}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px}

h1{font-size:clamp(2.55rem,5vw,4.5rem)}
h2{font-size:clamp(1.95rem,3.3vw,3rem);letter-spacing:-.025em}
h3{font-size:clamp(1.15rem,1.35vw,1.45rem);letter-spacing:-.015em}

.eyebrow{font-family:var(--display);font-size:13px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--red-text);display:block;margin-bottom:18px}
.eyebrow.on-dark{color:#F2949C}
.rule{width:52px;height:3px;background:var(--red);border-radius:2px;margin:22px 0 0}
.rule.mid{margin:24px auto 0}
.lead{font-size:clamp(1.05rem,1.35vw,1.28rem);line-height:1.62;color:var(--muted);max-width:56ch}
.lead.on-dark{color:#C9CCCE}

/* --------------------------------------------------------- 2. buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--display);font-size:16px;font-weight:600;letter-spacing:.01em;
  padding:19px 34px;border-radius:var(--r);text-decoration:none;border:0;cursor:pointer;min-height:60px;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease,transform .18s ease}
.btn:hover{transform:translateY(-1px)}
.btn-red{background:var(--red);color:#fff;box-shadow:0 8px 22px rgba(213,30,45,.22)}
.btn-red:hover{background:var(--red-deep)}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:var(--ink-2)}
.btn-outline{background:transparent;color:var(--ink);border:1.5px solid var(--ink);}
.btn-outline:hover{background:var(--ink);color:#fff}
.btn-light{background:#fff;color:var(--ink)}
.btn-light:hover{background:var(--band)}
.btn-ghost-dark{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.45)}
.btn-ghost-dark:hover{background:rgba(255,255,255,.1);border-color:#fff}
.btn:focus-visible{outline:3px solid var(--red);outline-offset:3px}
/* Available to screen readers, invisible on screen. Used where a section needs
   a heading for the document outline but the design doesn't show one. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:200;background:#fff;padding:14px 20px;outline:3px solid var(--red)}

/* ---------------------------------------------------------- 3. header */
.topbar{background:var(--ink);color:#D8DADC;font-size:14.5px}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:24px;min-height:44px}
.topbar a{color:#fff;text-decoration:none;font-weight:500;display:inline-flex;align-items:center;
  gap:8px;min-height:44px}
.topbar a:hover{color:#F2949C}

.site-head{background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(10px);
  position:sticky;top:0;z-index:70;border-bottom:1px solid var(--line-2)}
.site-head .wrap{height:104px;display:flex;align-items:center;justify-content:space-between;gap:28px;
  transition:height .22s ease}
.site-head.small .wrap{height:76px}
.brand{display:flex;align-items:center;min-height:56px}
.brand img{height:60px;width:auto;transition:height .22s ease}
.site-head.small .brand img{height:44px}
.nav{display:flex;align-items:center;gap:4px}
.nav > ul{display:flex;list-style:none;align-items:center;gap:2px}
.nav a,.nav button.sub-t{font-family:var(--display);font-size:16px;font-weight:500;color:var(--ink);
  text-decoration:none;padding:14px 16px;min-height:52px;display:flex;align-items:center;gap:7px;
  background:none;border:0;cursor:pointer;position:relative}
.nav a::after{content:"";position:absolute;left:16px;right:16px;bottom:10px;height:2px;background:var(--red);
  transform:scaleX(0);transform-origin:left;transition:transform .2s ease}
.nav a:hover::after,.nav a[aria-current]::after{transform:scaleX(1)}
.nav button.sub-t:hover{color:var(--red-text)}
.chev{width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px)}
.hassub{position:relative}
.hassub > ul{position:absolute;top:100%;left:0;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);list-style:none;min-width:288px;padding:8px 0;display:none;
  box-shadow:0 18px 44px rgba(22,24,26,.13)}
.hassub:hover > ul,.hassub:focus-within > ul{display:block}
.hassub > ul a{padding:13px 22px;font-weight:400;font-family:var(--body);font-size:16px;min-height:50px}
.hassub > ul a::after{display:none}
.hassub > ul a:hover{background:var(--shell);color:var(--red-text)}
.nav a.cta{background:var(--red);color:#fff;border-radius:var(--r);padding:15px 26px;margin-left:12px;
  font-weight:600;min-height:52px;box-shadow:0 8px 20px rgba(213,30,45,.22)}
.nav a.cta::after{display:none}
.nav a.cta:hover{background:var(--red-deep)}
.burger{display:none;background:none;border:0;cursor:pointer;width:52px;height:52px;
  align-items:center;justify-content:center;flex-direction:column;gap:6px}
.burger span{display:block;width:26px;height:2.5px;background:var(--ink);border-radius:2px;transition:.2s}

/* ================================================== 4. HOME PAGE ONLY */

/* ---------- 1. hero ---------- */
.hero{position:relative;background:var(--shell);overflow:hidden;border-bottom:1px solid var(--line-2)}
.hero .bg{position:absolute;inset:0}
.hero .bg img{width:100%;height:100%;object-fit:cover;object-position:64% 48%}
.hero .veil{position:absolute;inset:0;
  /* Rebalanced when the copy was inset 112px. At the old stops the lead ended
     where the veil had fallen to .66, and rasterising the band at 1585x717 put
     it at 2.54 against --muted — under AA. Holding .98 to 44% and .88 to 58%
     brings the lead to 4.91 and the meta row to 5.27. The transparent point
     stays at 78%, so the denture is revealed exactly where it was; only the
     middle of the wash got heavier, and slightly MORE of the photograph reads
     clear than before (25.4% of the band vs 27.8% — the loss is all in the
     already-washed middle). */
  background:linear-gradient(96deg,var(--shell) 0%,rgba(247,245,243,.98) 44%,rgba(247,245,243,.88) 58%,rgba(247,245,243,0) 78%)}
.hero .wrap{position:relative;padding:112px 32px 168px;max-width:var(--wrap)}
.hero .inner{max-width:640px}
.hero h1{margin-bottom:26px}
.hero h1 em{font-style:normal;color:var(--red)}
.hero .lead{margin-bottom:38px}
.hero .ctas{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:30px}
.hero .meta{display:flex;gap:28px;flex-wrap:wrap;font-size:15.5px;color:var(--muted)}
.hero .meta span{display:inline-flex;align-items:center;gap:9px}
.hero .meta svg{flex:none}

/* ---------- home hero: copy inset ----------
   The home page keeps the full-bleed photograph with the veil; the inner pages
   are the ones with the ink title block, so the two stay distinct.

   The copy is inset further than the site gutter on purpose. Sitting at the
   gutter (x=185 measured at 1585) it read as shoved against the left edge,
   because unlike every other page there is a photograph behind it rather than
   a plain band, and nothing between the text and the frame edge. 112px of extra
   inset gives it a margin to sit in without pushing the lead past the halfway
   point, where the veil starts letting the picture through. */
@media (min-width:1001px){
  .hero .wrap{padding-left:112px;justify-content:center}
  .hero .inner{max-width:600px}
}

/* ---------- 2. three cards ---------- */
.cards{margin-top:-96px;position:relative;z-index:5}
.cards .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{background:#fff;border:1px solid var(--line-2);border-radius:var(--r);padding:38px 34px 40px;
  box-shadow:0 18px 44px rgba(22,24,26,.07);transition:transform .22s ease,box-shadow .22s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 26px 60px rgba(22,24,26,.11)}
.card .ic{width:54px;height:54px;border-radius:var(--r);background:#FCEEF0;
  display:flex;align-items:center;justify-content:center;margin-bottom:24px}
.card h3{margin-bottom:12px}
.card p{font-size:16.5px;color:var(--muted);line-height:1.65}

/* ---------- 3. why choose ---------- */
.why{padding:120px 0 110px;text-align:center}
.why .head{max-width:920px;margin:0 auto 20px}
.why h2{margin-bottom:26px}
.why p{max-width:800px;margin:0 auto 20px;color:var(--muted)}
.ba{max-width:900px;margin:52px auto 44px}
.ba .pane{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:2/1;
  border:1px solid var(--line);box-shadow:0 20px 50px rgba(22,24,26,.09);
  --split:50%;background:#EDE8E4;touch-action:pan-y}
.ba .pane img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;user-select:none;
  -webkit-user-drag:none;pointer-events:none}
/* clip-path, not a width: both frames stay the same size at every viewport,
   so the two halves line up instead of drifting apart on small screens */
.ba .pane .clip{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--split)) 0 0)}
.ba .mid{position:absolute;top:0;bottom:0;left:var(--split);width:2px;background:var(--red);
  transform:translateX(-50%);pointer-events:none;box-shadow:0 0 0 1px rgba(255,255,255,.5)}
.ba .handle{position:absolute;top:50%;left:var(--split);transform:translate(-50%,-50%);width:52px;height:52px;
  border-radius:50%;background:#fff;color:var(--red);display:flex;align-items:center;justify-content:center;
  font-size:16px;box-shadow:0 6px 20px rgba(22,24,26,.3);pointer-events:none;font-family:var(--display);font-weight:700}
.ba .range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.ba .range:focus-visible + .mid{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--red)}
.ba .tag{position:absolute;bottom:18px;background:rgba(22,24,26,.82);color:#fff;font-family:var(--display);
  font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:8px 14px;border-radius:2px;
  pointer-events:none}
.ba .tag.b{left:18px}
.ba .tag.a{right:18px}
.ba .note{font-size:14px;color:#6A6560;margin-top:16px;line-height:1.6;max-width:760px;margin-left:auto;margin-right:auto}

/* ---------- 4. figure band ---------- */
.figband{position:relative;overflow:hidden;background:var(--ink);color:#fff;text-align:center}
.figband .bg{position:absolute;inset:0}
.figband .bg img{width:100%;height:100%;object-fit:cover;object-position:50% 45%;opacity:.62}
.figband .veil{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(22,24,26,.80) 0%,rgba(22,24,26,.66) 50%,rgba(22,24,26,.84) 100%)}
.figband .wrap{position:relative;padding:112px 32px 118px}
.figband h2{color:#fff;max-width:20ch;margin:0 auto 18px}
.figband h2 .n{color:var(--red);font-size:1.32em;font-weight:700;letter-spacing:-.03em}
.figband p{color:#C9CCCE;max-width:60ch;margin:0 auto 34px;font-size:clamp(1.02rem,1.25vw,1.2rem)}

/* ---------- 5. services ---------- */
.services{background:var(--band);padding:118px 0 124px}
.services .head{text-align:center;max-width:760px;margin:0 auto 60px}
.services .head p{color:var(--muted);margin:22px auto 0}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.tile{background:#fff;border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden;
  text-decoration:none;display:flex;flex-direction:column;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.tile:hover{transform:translateY(-5px);box-shadow:0 26px 56px rgba(22,24,26,.12);border-color:var(--line)}
.tile .ph{aspect-ratio:1/1;overflow:hidden;background:#F2EEEA}
.tile .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.tile:hover .ph img{transform:scale(1.055)}
.tile .body{padding:26px 26px 30px;display:flex;flex-direction:column;gap:8px;flex:1}
.tile h3{color:var(--ink)}
.tile .go{margin-top:auto;padding-top:14px;font-family:var(--display);font-size:14px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--red-text);display:inline-flex;align-items:center;gap:8px}
.tile .go i{width:7px;height:7px;border-top:2px solid currentColor;border-right:2px solid currentColor;
  transform:rotate(45deg);transition:transform .22s ease}
.tile:hover .go i{transform:rotate(45deg) translate(3px,-3px)}
.tile.cta{background:var(--ink);border-color:var(--ink);justify-content:center;padding:40px 30px}
.tile.cta h3{color:#fff;margin-bottom:10px}
.tile.cta p{color:#C9CCCE;font-size:16px}
.tile.cta .go{color:#F2949C;margin-top:20px;padding-top:0}

/* ---------- 6. payment ---------- */
.payment{position:relative;overflow:hidden;background:var(--shell)}
.payment .bg{position:absolute;inset:0}
.payment .bg img{width:100%;height:100%;object-fit:cover;opacity:.5}
.payment .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(247,245,243,.82),rgba(247,245,243,.94))}
.payment .wrap{position:relative;padding:112px 32px 118px}
.payment .head{text-align:center;max-width:700px;margin:0 auto 56px}
.payment .grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.paycard{background:#fff;border:1px solid var(--line-2);border-radius:var(--r);padding:40px 38px 42px;
  box-shadow:0 16px 40px rgba(22,24,26,.06)}
.paycard .t{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.paycard h3{margin:0}
.paycard p{color:var(--muted);font-size:16.5px}
.tick{flex:none;width:34px;height:34px;border-radius:50%;background:var(--red);
  display:flex;align-items:center;justify-content:center}

/* ---------- 7. funds ---------- */
.funds{padding:104px 0 110px;background:var(--paper);border-top:1px solid var(--line-2);
  border-bottom:1px solid var(--line-2)}
.funds .head{text-align:center;max-width:720px;margin:0 auto 48px}
.fundgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.fundgrid span{border:1px solid var(--line-2);border-radius:var(--r);min-height:92px;display:flex;
  align-items:center;justify-content:center;padding:14px 16px;background:#fff;overflow:hidden;
  transition:border-color .2s ease,box-shadow .2s ease}
.fundgrid span:hover{border-color:var(--line);box-shadow:0 10px 26px rgba(22,24,26,.08)}
.fundgrid img{width:100%;height:auto;max-height:58px;object-fit:contain;
  filter:grayscale(1);opacity:.72;transition:filter .25s ease,opacity .25s ease}
.fundgrid span:hover img{filter:none;opacity:1}
/* p carries a global max-width:70ch, so a centred note without auto margins
   sits as a 70ch box pinned left and only its text centres inside it. That
   reads as copy skewed to the left of the section. Auto margins centre the box. */
.funds .note{margin:28px auto 0;font-size:14.5px;color:#6A6E71;text-align:center}

/* ---------- government schemes ----------
   Sits directly above the fund wall so the two funding answers read as one
   block. --shell here against the wall's --paper keeps them separable. */
.schemes{padding:96px 0 100px;background:var(--shell)}
.schemes .head{text-align:center;max-width:720px;margin:0 auto 44px}
.schemegrid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.scheme{background:#fff;border:1px solid var(--line-2);border-radius:var(--r);
  padding:34px 34px 36px;box-shadow:0 14px 34px rgba(22,24,26,.05)}
.scheme h3{margin-bottom:14px}
.scheme p{color:var(--muted);font-size:16.5px;line-height:1.65}
.schemenote{margin:28px auto 0;text-align:center;color:var(--muted);font-size:16px}
@media (max-width:820px){
  .schemes{padding:64px 0 68px}
  .schemegrid{grid-template-columns:1fr;gap:18px}
  .scheme{padding:26px 24px 28px}
}
/* the one-line version the inner pages carry instead */
.schemestrip{background:var(--band);border-top:1px solid var(--line-2);
  border-bottom:1px solid var(--line-2);padding:26px 0}
.schemestrip p{text-align:center;color:var(--muted);font-size:16.5px;margin:0 auto;max-width:none}
.schemestrip strong{color:var(--ink)}
.schemestrip a{color:var(--red-text)}

/* ---------- 8. contact ---------- */
.contact{position:relative;overflow:hidden;background:var(--ink);color:#fff}
.contact .bg{position:absolute;inset:0}
.contact .bg img{width:100%;height:100%;object-fit:cover;opacity:.4}
.contact .veil{position:absolute;inset:0;
  background:linear-gradient(110deg,rgba(18,20,22,.95) 0%,rgba(18,20,22,.88) 46%,rgba(18,20,22,.7) 100%)}
.contact .wrap{position:relative;padding:118px 32px 124px}
.contact .grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start}
.contact h2{color:#fff}
.bigphone{font-family:var(--display);font-size:clamp(2.1rem,3.4vw,3.1rem);font-weight:700;color:#fff;
  text-decoration:none;display:inline-block;margin:28px 0 10px;letter-spacing:-.03em;min-height:56px}
.bigphone:hover{color:#F2949C}
.steps{margin-top:38px;border-top:1px solid rgba(255,255,255,.16);padding-top:30px;list-style:none}
.steps li{position:relative;padding-left:46px;margin-bottom:16px;color:#C9CCCE;font-size:16.5px;max-width:48ch}
.steps li b{position:absolute;left:0;top:0;font-family:var(--display);font-size:14px;
  font-weight:700;color:#F2949C;letter-spacing:.08em}
.formcard{background:#fff;border-radius:var(--r);padding:44px 44px 46px;color:var(--ink);
  box-shadow:0 30px 70px rgba(0,0,0,.3)}
.formcard h3{margin-bottom:26px}
.formcard label{display:block;font-family:var(--display);font-size:14.5px;font-weight:600;
  color:var(--ink);margin-bottom:9px}
.formcard label .req{color:var(--red)}
.formcard input,.formcard textarea{width:100%;border:1px solid var(--line);border-radius:var(--r);
  padding:15px 16px;font-family:var(--body);font-size:16.5px;color:var(--ink);min-height:56px;background:var(--shell)}
.formcard textarea{min-height:120px;resize:vertical}
.formcard input:focus,.formcard textarea:focus{outline:3px solid var(--red);outline-offset:2px;background:#fff}
.formcard .field{margin-bottom:20px}
.formcard .btn{width:100%}
.formnote{font-size:14.5px;color:var(--muted);margin-top:14px;text-align:center;max-width:none}
/* honeypot — a real person never sees or fills this; bots usually do */
.formcard .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formstatus{margin-top:16px;padding:14px 16px;border-radius:var(--r);font-size:16px;display:none}
.formstatus.show{display:block}
.formstatus.ok{background:#EAF6EE;color:#1B5E2A;border:1px solid #BFE0C9}
.formstatus.bad{background:#FCEEF0;color:#8E0F1A;border:1px solid #F2C4CA}

/* ---------------------------------------------------------- footer */
footer{background:var(--ink);color:#B9BDC0;padding:96px 0 34px}
.fgrid{display:grid;grid-template-columns:1.25fr 1fr 1fr 1.15fr;gap:44px;padding-bottom:60px;
  border-bottom:1px solid rgba(255,255,255,.13)}
footer .flogo{height:74px;width:auto;margin-bottom:24px}
footer h4{font-family:var(--display);font-size:13px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:#fff;margin-bottom:18px}
footer h2{font-family:var(--display);font-size:13px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:#fff;margin-bottom:18px}
footer ul{list-style:none}
footer a{color:#B9BDC0;text-decoration:none;display:inline-block;padding:10px 0;font-size:16px}
footer a:hover{color:#fff}
footer p{font-size:16px;margin-bottom:6px;color:#B9BDC0}
footer .fdesc{max-width:34ch;font-size:15.5px;line-height:1.65}
.fsocial{display:flex;gap:10px;margin-top:16px}
.fsocial a{width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.22);
  display:flex;align-items:center;justify-content:center;padding:0}
.fsocial a:hover{background:var(--red);border-color:var(--red)}
.copyright{padding-top:30px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-size:15px;color:#8A8F93}
.copyright a{padding:10px 0;font-size:15px}

/* ---------------------------------------------- mobile call bar */
.callbar{display:none}

/* ---------------------------------------------------------- reveal */
.rv{opacity:0;transform:translateY(14px)}
.rv.in{opacity:1;transform:none;transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.3,1)}

/* ============================================ 5. SUB-PAGE PATTERNS
   Everything below is used by the inner pages. The home page above is
   left exactly as it was so it keeps rendering identically.
   ================================================================= */

/* ---------- page hero: the banner every inner page opens with ----------
   A light band with the photograph carried at full strength on the right and
   the copy sitting on an opaque wash on the left. The earlier version dimmed
   the image to 42% under a dark veil, which meant the photograph was doing
   almost nothing. */
/* ---------- page hero: banner photograph with the title in a solid block ----------
   Follows the sister clinic's inner pages. The picture runs full width and the
   H1 sits in an opaque block that overlaps its lower edge.

   This replaced a veil. The old band laid the photograph behind the copy and
   washed its left side out so dark text could sit on it, which cost twice: half
   the picture was hidden, and the object in every banner had to be positioned to
   dodge a text column whose width changed with the viewport. An opaque block
   needs neither. The photograph is shown whole and the title is legible because
   it has its own ground.

   It also fixes narrow windows for free. The picture is a block in normal flow,
   so there is nothing behind the copy that could fail contrast — which is what
   the measured 1.00 on the mobile lead was. */
.pagehero{position:relative;background:var(--shell);color:var(--ink);
  border-bottom:1px solid var(--line-2)}
.pagehero .bg{position:relative;height:clamp(240px,32vw,430px);overflow:hidden}
.pagehero .bg img{width:100%;height:100%;object-fit:cover;object-position:62% 45%}
.pagehero .wrap{position:relative;padding-bottom:60px}
.pagehero .titlebox{background:var(--ink);color:#fff;display:inline-block;
  padding:34px 52px 36px;margin-top:clamp(-100px,-6.5vw,-58px);max-width:100%}
.pagehero .titlebox h1{color:#fff;font-size:clamp(2rem,3.8vw,3.3rem)}
.pagehero .crumbs{color:#A9AEB2;margin-bottom:16px}
.pagehero .crumbs a{color:#A9AEB2}
.pagehero .crumbs a:hover{color:#fff}
.pagehero .crumbs [aria-current]{color:#fff}
.pagehero .crumbs li+li::before{color:#6A6E71}
.pagehero .lead{margin-top:34px;color:#3F4448;max-width:56ch}
.pagehero .ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
/* the ghost button is built for the dark CTA band, so it needs the light
   treatment when it lands on this light ground instead */
.pagehero .btn-ghost-dark{color:var(--ink);border-color:var(--ink)}
.pagehero .btn-ghost-dark:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
/* pages with no photograph (privacy) drop the overlap and just sit on the band */
.pagehero.plain .titlebox{margin-top:0}
.pagehero.plain .wrap{padding-top:64px}

/* The home hero keeps its own full-bleed treatment, so it still needs the
   narrow-window stacking: behind the copy at 375px the lead measured 1.00. */
@media (max-width:1000px){
  .hero .bg{position:relative;inset:auto;display:block;
    aspect-ratio:16/10;border-bottom:1px solid var(--line-2)}
  .hero .bg img{object-position:62% 50%}
  .hero .veil{display:none}
  .hero .wrap{padding-top:56px}
}
@media (max-width:820px){
  .pagehero .bg{height:clamp(180px,44vw,250px)}
  .pagehero .titlebox{padding:24px 26px 26px;margin-top:-44px}
  .pagehero .wrap{padding-bottom:44px}
  .pagehero .lead{margin-top:26px}
}

.crumbs{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-size:14.5px;color:var(--muted);margin-bottom:20px}
.crumbs a{color:var(--muted);text-decoration:none;padding:6px 0}
.crumbs a:hover{color:var(--red-text);text-decoration:underline}
.crumbs li+li::before{content:"\203A";margin-right:8px;color:var(--line)}
.crumbs [aria-current]{color:var(--ink)}

/* ---------- prose: the body copy column on inner pages ---------- */
.prose{padding:92px 0 96px;background:var(--shell)}
.prose .wrap{max-width:1280px}
/* The reading measure is capped at 74ch for legibility, but the wrap around it
   is the full 1280, so a left-aligned column left a third of the page empty on
   the right and read as a layout mistake rather than a choice. Centring the
   column puts the white space on both sides, which is what an article column is
   supposed to look like. */
.prose .col{max-width:74ch;margin-inline:auto}
.prose h2{margin-bottom:22px}
.prose h2:not(:first-child){margin-top:52px}
.prose h3{margin:38px 0 12px}
.prose p{color:#3F4448;margin-bottom:20px}
.prose ul,.prose ol{margin:0 0 24px 0;padding-left:0;list-style:none;max-width:70ch}
.prose li{position:relative;padding-left:30px;margin-bottom:12px;color:#3F4448}
.prose ul li::before{content:"";position:absolute;left:4px;top:.62em;width:8px;height:8px;
  border-radius:50%;background:var(--red)}
.prose ol{counter-reset:n}
.prose ol li{counter-increment:n}
.prose ol li::before{content:counter(n);position:absolute;left:0;top:0;
  font-family:var(--display);font-size:14px;font-weight:700;color:var(--red-text)}
.prose .callout{border-left:3px solid var(--red);background:#fff;border-radius:0 var(--r) var(--r) 0;
  padding:24px 28px;margin:34px 0;box-shadow:0 10px 30px rgba(22,24,26,.05)}
.prose .callout p:last-child{margin-bottom:0}
.prose .inline-cta{margin-top:40px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
/* Not scoped to .prose: the contact page puts a figure in its details column,
   and without these rules the width/height attributes fight width:100% and
   squash the picture out of proportion. */
.figure{margin:38px 0}
.figure img{width:100%;height:auto;border-radius:var(--r);border:1px solid var(--line)}
.figure figcaption{font-size:14.5px;color:var(--muted);margin-top:12px}
/* Portrait figures (design screens, certificates) would otherwise run the full
   column width and tower over the text. */
.figure.portrait{max-width:460px}
/* A figure sitting in the right-hand track of .split, beside the prose, rather
   than stranded under it leaving the column empty. */
.figure.aside-figure{margin:0;position:sticky;top:128px}

/* two-column split used by service pages: copy left, quick facts right */
.split{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:64px;align-items:start}
.aside{background:#fff;border:1px solid var(--line-2);border-radius:var(--r);
  padding:32px 30px 34px;box-shadow:0 16px 40px rgba(22,24,26,.06);position:sticky;top:128px}
.aside h3{margin-bottom:18px}
.aside dl{margin:0}
.aside dt{font-family:var(--display);font-size:13px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--red-text);margin-top:20px}
.aside dt:first-of-type{margin-top:0}
.aside dd{font-size:16.5px;color:#3F4448;margin-top:6px;line-height:1.6}
.aside .btn{width:100%;margin-top:26px}
.aside .callnote{font-size:14.5px;color:var(--muted);text-align:center;margin-top:12px;max-width:none}

/* ---------- FAQ accordion ---------- */
.faq{padding:100px 0 106px;background:var(--paper);border-top:1px solid var(--line-2)}
.faq .head{text-align:center;max-width:720px;margin:0 auto 48px}
.faq .list{max-width:860px;margin:0 auto}
.faq details{border:1px solid var(--line-2);border-radius:var(--r);background:#fff;margin-bottom:12px;
  transition:border-color .2s ease,box-shadow .2s ease}
.faq details[open]{border-color:var(--line);box-shadow:0 14px 36px rgba(22,24,26,.07)}
.faq summary{list-style:none;cursor:pointer;padding:24px 60px 24px 26px;position:relative;
  font-family:var(--display);font-size:clamp(1.02rem,1.2vw,1.16rem);font-weight:600;
  color:var(--ink);min-height:64px;display:flex;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--red-text)}
.faq summary:focus-visible{outline:3px solid var(--red);outline-offset:-3px;border-radius:var(--r)}
.faq summary::after{content:"";position:absolute;right:26px;top:50%;width:10px;height:10px;
  border-right:2.5px solid var(--red);border-bottom:2.5px solid var(--red);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s ease}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq .answer{padding:0 26px 26px}
.faq .answer p{color:#3F4448;margin-bottom:14px}
.faq .answer p:last-child{margin-bottom:0}

/* ---------- shared closing CTA band ---------- */
.ctaband{background:var(--ink);color:#fff}
.ctaband .wrap{padding:92px 32px 96px}
.ctaband .inner{max-width:760px}
.ctaband h2{color:#fff;max-width:20ch}
.ctaband .lead{margin-top:20px}
.ctaband .bigphone{margin:26px 0 6px}
.ctaband .ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:22px}
.ctaband .fineprint{margin-top:26px;font-size:15px;color:#9BA0A4;max-width:62ch}

/* ---------- services grid, cross-link variant ---------- */
.services.alt{background:var(--shell);padding:96px 0 100px}
.services.alt .head{margin-bottom:48px}

/* Current service hides its own card in the cross-link grid, so the visitor is
   never offered a link to the page they are already on. The body class is set
   per page in its @page comment. */
body.svc-digital-dentures            .tile.svc-digital-dentures,
body.svc-full-dentures               .tile.svc-full-dentures,
body.svc-partial-dentures            .tile.svc-partial-dentures,
body.svc-immediate-dentures          .tile.svc-immediate-dentures,
body.svc-implant-retained-dentures   .tile.svc-implant-retained-dentures,
body.svc-sport-mouthguards           .tile.svc-sport-mouthguards,
body.svc-repair-and-reline           .tile.svc-repair-and-reline{display:none}

/* ---------- filmstrip: looping clips of the actual lab ---------- */
.filmstrip{padding:100px 0 106px;background:var(--ink);color:#fff}
.filmstrip .head{max-width:760px;margin:0 auto 52px;text-align:center}
.filmstrip h2{color:#fff}
/* --red-text is tuned for light grounds; on the ink band it drops to 2.56:1 */
.filmstrip .eyebrow{color:#F2949C}
.filmstrip .head p{color:#C9CCCE;margin:20px auto 0;font-size:clamp(1rem,1.2vw,1.15rem)}
.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;list-style:none;counter-reset:clip}
.strip figure{margin:0}
.strip video{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;border-radius:var(--r);
  background:#22262A;border:1px solid rgba(255,255,255,.12)}
.strip figcaption{padding:20px 2px 0}
.strip figcaption b{font-family:var(--display);font-size:13px;font-weight:700;letter-spacing:.14em;
  color:#F2949C;display:block;margin-bottom:8px}
.strip figcaption strong{font-family:var(--display);font-size:clamp(1.05rem,1.25vw,1.25rem);
  font-weight:600;color:#fff;display:block;margin-bottom:8px;letter-spacing:-.015em}
.strip figcaption span{font-size:16px;line-height:1.6;color:#B9BDC0;display:block}
.filmstrip .note{margin:44px auto 0;text-align:center;font-size:14.5px;color:#8A8F93}

/* ---------- the full process film ---------- */
.labfilm{padding:100px 0 106px;background:var(--band);border-top:1px solid var(--line-2)}
.labfilm .grid{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:64px;align-items:center}
.labfilm .player{position:relative;border-radius:var(--r);overflow:hidden;background:var(--ink);
  box-shadow:0 26px 60px rgba(22,24,26,.18);border:1px solid var(--line)}
/* height:auto for the same reason as the prose figures — the width/height
   attributes on the element would otherwise pin it to 1280px tall. */
/* color is for the fallback text inside the element — if a browser cannot play
   the file it shows that sentence, and inheriting --ink on an --ink background
   would render the one message that matters invisible. */
.labfilm video{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;
  background:var(--ink);color:#fff;padding:0}
.labfilm h2{margin-bottom:22px}
.labfilm p{color:#3F4448;margin-bottom:18px}
.labfilm .runtime{font-family:var(--display);font-size:13px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--red-text);margin-bottom:16px;display:block}
/* --muted, not the lighter note grey: this band is --band, which is dark
   enough that the lighter grey lands at 4.31 and misses AA. */
.labfilm .fineprint{font-size:14.5px;color:var(--muted);margin-top:26px;max-width:56ch}

/* ---------- premises: real photographs of the place ---------- */
.premises{padding:100px 0 106px;background:var(--paper);border-top:1px solid var(--line-2)}
.premises .head{max-width:760px;margin:0 auto 52px;text-align:center}
/* Equal square tiles. The subject of each photograph is centred in the crop
   itself (the sign is a tall object, so a landscape band always beheaded it). */
.premises .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.premises figure{margin:0;position:relative;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line-2);background:var(--band)}
.premises img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.premises figure:hover img{transform:scale(1.04)}
/* The scrim has to carry the text on its own: these are real photographs and
   some of them (the reception, white walls in sunlight) are almost white where
   the caption sits. Ramping to .92 keeps white legible whatever is underneath. */
.premises figcaption{position:absolute;left:0;right:0;bottom:0;padding:44px 20px 16px;color:#fff;
  font-family:var(--display);font-size:15px;font-weight:600;letter-spacing:.01em;
  background:linear-gradient(180deg,rgba(18,20,22,0) 0%,rgba(18,20,22,.62) 42%,rgba(18,20,22,.92) 100%)}
.premises .tall img{aspect-ratio:4/5}

/* ---------- feature grid (About, Our Lab) ---------- */
.featgrid{padding:96px 0 100px;background:var(--paper);border-top:1px solid var(--line-2)}
.featgrid .head{max-width:760px;margin:0 auto 52px;text-align:center}
.featgrid .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.feat{background:var(--shell);border:1px solid var(--line-2);border-radius:var(--r);padding:32px 30px 34px}
.feat .ic{width:48px;height:48px;border-radius:var(--r);background:#FCEEF0;
  display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.feat h3{margin-bottom:10px}
.feat p{font-size:16.5px;color:var(--muted);line-height:1.62}

/* ---------- practitioner bio ---------- */
.bio{padding:96px 0 100px;background:var(--shell)}
.bio .grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:64px;align-items:start}
.bio .portrait{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
  box-shadow:0 22px 54px rgba(22,24,26,.1);background:var(--band);aspect-ratio:4/5}
.bio .portrait img{width:100%;height:100%;object-fit:cover}
.bio h2{margin-bottom:8px}
.bio .role{font-family:var(--display);font-size:15px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--red-text);margin-bottom:24px}
.bio p{color:#3F4448;margin-bottom:18px}
.creds{list-style:none;margin:28px 0 0;padding:26px 0 0;border-top:1px solid var(--line)}
.creds li{position:relative;padding-left:32px;margin-bottom:14px;color:#3F4448;font-size:16.5px}
.creds li::before{content:"";position:absolute;left:0;top:.52em;width:16px;height:9px;
  border-left:2.5px solid var(--red);border-bottom:2.5px solid var(--red);transform:rotate(-45deg)}
.creds .reg{font-size:14.5px;color:#6A6E71;padding-left:0;margin-top:20px}
.creds .reg::before{display:none}

/* ---------- process steps on a light ground ---------- */
.process{padding:96px 0 100px;background:var(--band)}
.process .head{max-width:760px;margin:0 auto 52px;text-align:center}
.process .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;counter-reset:step}
.step{background:#fff;border:1px solid var(--line-2);border-radius:var(--r);padding:30px 26px 32px;
  counter-increment:step;position:relative}
.step::before{content:"0" counter(step);font-family:var(--display);font-size:13px;font-weight:700;
  letter-spacing:.14em;color:var(--red-text);display:block;margin-bottom:14px}
.step h3{margin-bottom:10px}
.step p{font-size:16.5px;color:var(--muted);line-height:1.62}
/* --muted, not the lighter grey used for notes on white: this band's background
   is --band, which is dark enough that the lighter grey drops below AA. */
.process .note{max-width:70ch;margin:38px auto 0;text-align:center;font-size:15.5px;color:var(--muted)}

/* ---------- contact page ---------- */
.contactpage{padding:92px 0 96px;background:var(--shell)}
/* the reset zeroes heading margins, so the clinic name sat straight on the
   first row of the detail list */
.contactpage h2{margin-bottom:34px}
.contactpage .grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:start}
.detail{list-style:none;margin:0 0 34px}
.detail li{display:flex;gap:16px;padding:20px 0;border-bottom:1px solid var(--line);align-items:flex-start}
.detail li:first-child{padding-top:0}
.detail .ic{flex:none;width:40px;height:40px;border-radius:var(--r);background:#FCEEF0;
  display:flex;align-items:center;justify-content:center}
.detail .k{font-family:var(--display);font-size:13px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--red-text);display:block;margin-bottom:4px}
.detail .v{font-size:17px;color:var(--ink);line-height:1.55}
.detail .v a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.detail .v a:hover{color:var(--red-text);border-color:var(--red)}
.mapwrap{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
  box-shadow:0 18px 44px rgba(22,24,26,.08);background:var(--band);margin-top:8px}
.mapwrap iframe{display:block;width:100%;height:340px;border:0}
.contactpage .formcard{box-shadow:0 22px 54px rgba(22,24,26,.1);border:1px solid var(--line-2)}
/* The sign, the building and the map used to stack down the left column under
   the contact details, which left the right column empty below a short form.
   They run as their own full-width row instead, so both halves of the grid end
   together and the three pieces read as one "how to find us" band. */
.findus{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:60px;align-items:start}
.findus .figure{margin:0}
.findus .figure img{aspect-ratio:4/3;object-fit:cover}
.findus .mapwrap{margin-top:0;aspect-ratio:4/3}
.findus .mapwrap iframe{height:100%}

/* ---------- legal / long-form text (privacy) ---------- */
.legal{padding:80px 0 96px;background:var(--paper)}
.legal .col{max-width:76ch}
.legal h2{font-size:clamp(1.4rem,2vw,1.85rem);margin:46px 0 16px}
.legal h2:first-child{margin-top:0}
.legal p,.legal li{color:#3F4448;font-size:16.5px}
.legal p{margin-bottom:16px}
.legal ul{list-style:none;margin:0 0 20px}
.legal li{position:relative;padding-left:26px;margin-bottom:10px}
.legal li::before{content:"";position:absolute;left:2px;top:.62em;width:7px;height:7px;
  border-radius:50%;background:var(--red)}
.legal .updated{font-size:15px;color:#6A6E71;padding-bottom:26px;border-bottom:1px solid var(--line);margin-bottom:34px}

/* ============================================================ 6. responsive */
@media (max-width:1240px){
  .tiles{grid-template-columns:repeat(3,1fr)}
  .fundgrid{grid-template-columns:repeat(6,1fr)}
  .contact .grid{gap:48px}
  .split{gap:44px}
  .process .grid{grid-template-columns:repeat(2,1fr)}
  .premises .grid{grid-template-columns:1fr 1fr}
}
@media (max-width:1060px){
  /* The closed nav has to leave the flex row entirely, not just empty itself.
     Hiding only its children left a zero-width .nav sitting at the end of a
     justify-content:space-between header, which made it the third item and
     pushed the burger to the middle of the bar instead of the right edge.
     .nav.open is position:absolute, so it never rejoins the row. */
  .nav{display:none}
  .nav > ul,.nav a.cta{display:none}
  .burger{display:flex}
  .nav.open{display:flex;position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;
    align-items:stretch;padding:12px 24px 24px;border-bottom:1px solid var(--line);
    box-shadow:0 24px 40px rgba(22,24,26,.14)}
  .nav.open > ul{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .nav.open a{min-height:56px;font-size:17px;padding:14px 4px}
  .nav.open a::after{display:none}
  .nav.open .hassub > ul{position:static;display:block;border:0;box-shadow:none;padding:0 0 8px 16px;min-width:0}
  .nav.open a.cta{display:flex;margin:12px 0 0;justify-content:center}
  .site-head{position:relative}
  .site-head .wrap{height:84px}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .contact .grid{grid-template-columns:1fr;gap:44px}
  .fgrid{grid-template-columns:1fr 1fr;gap:34px}
  .split{grid-template-columns:1fr;gap:40px}
  .aside{position:static}
  .figure.aside-figure{position:static;max-width:460px}
  .bio .grid{grid-template-columns:1fr;gap:40px}
  .bio .portrait{max-width:420px;aspect-ratio:4/3}
  .labfilm .grid{grid-template-columns:1fr;gap:36px}
  .labfilm .player{max-width:340px}
  .featgrid .grid{grid-template-columns:repeat(2,1fr)}
  .contactpage .grid{grid-template-columns:1fr;gap:44px}
}
@media (max-width:820px){
  body{font-size:16.5px}
  .wrap{padding:0 22px}
  .hero .wrap{padding:64px 22px 132px}
  /* the picture is a block above the copy now, not a ground behind it, so it
     is shown at full strength instead of dimmed to 55% */
  .hero .ctas{gap:12px}
  .hero .ctas .btn{width:100%}
  .cards{margin-top:-88px}
  .cards .grid{grid-template-columns:1fr;gap:16px}
  .card{padding:30px 26px 32px}
  .why{padding:76px 0 72px}
  .figband .wrap,.payment .wrap,.contact .wrap{padding:74px 22px 80px}
  .services{padding:76px 0 82px}
  .funds{padding:70px 0 74px}
  .payment .grid{grid-template-columns:1fr;gap:18px}
  .paycard{padding:30px 26px 32px}
  .formcard{padding:30px 24px 32px}
  .fundgrid{grid-template-columns:repeat(3,1fr)}
  .fgrid{grid-template-columns:1fr;gap:30px;padding-bottom:40px}
  footer{padding:64px 0 24px}
  .ba{margin:34px auto 30px}

  /* sub-page rhythm on phones */
  /* No top padding here: the title block is pulled up into the picture with a
     negative margin, and 52px of padding above it cancelled the overlap out to
     an 8px gap. Left/right stay at the narrow-window gutter. */
  .pagehero .wrap{padding:0 22px 44px}
  .pagehero .ctas{gap:12px}
  .pagehero .ctas .btn{width:100%}
  .prose{padding:60px 0 64px}
  .faq{padding:64px 0 68px}
  .faq summary{padding:20px 52px 20px 20px}
  .faq .answer{padding:0 20px 22px}
  .ctaband .wrap{padding:64px 22px 68px}
  .ctaband .ctas .btn{width:100%}
  .services.alt{padding:64px 0 68px}
  .featgrid,.bio,.process,.contactpage,.filmstrip,.premises,.labfilm{padding:64px 0 68px}
  .featgrid .grid,.process .grid{grid-template-columns:1fr;gap:16px}
  .strip{grid-template-columns:1fr 1fr;gap:14px}
  .strip figcaption{padding:14px 2px 0}
  .strip figcaption span{font-size:15px}
  .premises .grid{grid-template-columns:1fr;gap:14px}
  .premises img,.premises .tall img{aspect-ratio:4/3}
  .aside{padding:26px 22px 28px}
  .legal{padding:56px 0 64px}
  .mapwrap iframe{height:280px}

  .callbar{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;height:68px;
    background:#fff;border-top:1px solid var(--line);z-index:90;box-shadow:0 -8px 26px rgba(22,24,26,.12)}
  .callbar a{display:flex;align-items:center;justify-content:center;margin:7px;min-height:54px;
    text-decoration:none;font-family:var(--display);font-weight:600;font-size:16px;border-radius:var(--r)}
  .callbar .c1{background:var(--red);color:#fff}
  .callbar .c2{border:1.5px solid var(--ink);color:var(--ink)}
  body{padding-bottom:68px}
}
@media (max-width:560px){
  .tiles{grid-template-columns:1fr}
  .fundgrid{grid-template-columns:repeat(2,1fr)}
  .topbar .meta{display:none}
  .hero .meta{gap:8px 20px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  .rv{opacity:1;transform:none}
}

@media (max-width:820px){
  .findus{grid-template-columns:1fr;gap:20px;margin-top:40px}
}