:root{--bg:#EEF5F2;--surface:#FFFFFF;--ink:#0B2622;--mute:#45605A;--line:#D2E2DB;--acc:#0B7560;--onacc:#FFFFFF;--tint:#D9EDE5;--tint2:#FBE8E1;--ring:#97CBBC;--deep:#0D3932;--ondeep:#FFFFFF;--deepmute:#A9CCC2;--deepline:#2A5249}
/* Look L "Lens": clinics and practices (dentists, vets, opticians, dermatology, small private clinics), and any
   business that wants to feel calm, exact and easy to book. A lens, being seen clearly: photos in circles inside
   hairline rings, a loupe that magnifies a detail of the photo, section heads on one centred axis, booking always one
   tap away (the dock, the closing band, the Book / Call bar on phones), opening hours on a clear board.
   Figtree is self-hosted from @fontsource-variable/figtree 5.3.0 (OFL, public/fonts/FIGTREE-LICENSE.txt). */
@font-face{font-family:"Figtree L";font-style:normal;font-weight:300 900;font-display:swap;src:url(fonts/figtree-latin-ext-wght-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Figtree L";font-style:normal;font-weight:300 900;font-display:swap;src:url(fonts/figtree-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* headline voice per pairing (family, weight, tracking); the text is Figtree in every pairing */
body{--hf:"Figtree L",var(--fd);--hw:640;--ht:-.032em;--tf:"Figtree L",system-ui,sans-serif}
body.l-f-soft{--hf:var(--fd);--hw:380;--ht:-.022em}
:root{--gap:24px;--r:calc(24px*var(--tune-radius,1));--m-accent:var(--acc);--m-header-bg:color-mix(in srgb,var(--bg) 90%,transparent);
  --g-max:1336px;--g-pad:clamp(20px,4vw,48px);--g-bg:var(--bg);--g-paper:var(--bg);--g-surface:var(--tint);--g-ink:var(--ink);--g-muted:var(--mute);--g-line:var(--line);--g-accent:var(--acc);--g-radius:var(--r);--g-top:84px}
/* the gallery fonts follow the pairing, so they are set where --hf and --tf live */
body{--g-fd:var(--hf);--g-ft:var(--tf)}

/* ---------- base ---------- */
*{box-sizing:border-box;margin:0}
html{scroll-padding-top:104px}
body{background:var(--bg);color:var(--ink);font:400 calc(17px*var(--tune-size,1))/1.6 var(--tf);-webkit-font-smoothing:antialiased;font-variant-numeric:lining-nums}
a{color:inherit}img{display:block;max-width:100%}
.wrap{max-width:1336px;margin:0 auto;padding:0 clamp(20px,4vw,48px)}
h1,h2,h3{font-family:var(--hf);font-weight:var(--hw);letter-spacing:var(--ht);line-height:1.04;text-wrap:balance}
h1,h2,h3,h4,summary,b,p,li,dd,dt,th,td,figcaption,.l-logo,.l-btn{overflow-wrap:anywhere;hyphens:auto}
h1{font-size:calc(clamp(42px,5.4vw,78px)*var(--tune-size,1));line-height:1}
h2{font-size:calc(clamp(30px,3.3vw,48px)*var(--tune-size,1))}
h3{font-size:calc(clamp(20px,1.6vw,23px)*var(--tune-size,1));line-height:1.2;letter-spacing:calc(var(--ht) / 2)}
body.l-f-soft h3{font-weight:500}
.l-lede{font-size:calc(clamp(18px,1.45vw,21px)*var(--tune-size,1));line-height:1.45;color:var(--mute);max-width:36ch;text-wrap:pretty}
:where(main) p{text-wrap:pretty}
.l-sec{padding-top:calc(clamp(80px,9vw,128px)*var(--tune-space,1))}
/* section heads sit on the page's centre axis */
.l-head{max-width:760px;margin:0 auto calc(clamp(36px,4vw,56px)*var(--tune-space,1));text-align:center;display:grid;justify-items:center;gap:14px}
.l-head p{color:var(--mute);font-size:calc(18px*var(--tune-size,1));max-width:52ch;text-wrap:balance}

/* ---------- buttons, links ---------- */
.l-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:52px;padding:0 28px;border-radius:999px;font:600 calc(16px*var(--tune-size,1))/1.2 var(--tf);color:var(--onacc);background:var(--acc);text-decoration:none;text-align:center;border:0;cursor:pointer;transition:background-color .2s ease,color .2s ease,box-shadow .2s ease}
.l-btn:hover{background:var(--ink);color:var(--bg)}
.l-btn:focus-visible,.l-links a:focus-visible,.l-arrow:focus-visible,.l-card h3 a:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.l-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.l-ghost:hover{background:var(--ink);color:var(--bg)}
.l-sm{min-height:44px;padding:0 20px;font-size:calc(15px*var(--tune-size,1))}
.l-cta{display:flex;flex-wrap:wrap;gap:12px}
.l-arrow{position:relative;display:inline-flex;align-items:center;font-weight:600;color:var(--acc);text-decoration:none;min-height:44px;padding-right:40px}
.l-arrow::before,.l-arrow::after{content:"";position:absolute;right:0;top:50%;width:28px;height:28px;margin-top:-14px;border-radius:50%;transition:transform .2s ease}
.l-arrow::before{background:var(--tint)}
.l-arrow::after{background:var(--acc);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M9 14h10m-4-4 4 4-4 4' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M9 14h10m-4-4 4 4-4 4' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.l-arrow:hover::before,.l-arrow:hover::after{transform:translateX(3px)}
.l-arrow:hover{text-decoration:underline;text-underline-offset:.25em}
/* monogram circle: one letter, optically centred (Figtree caps sit a hair high, so 1px more padding on top) */
.l-mono{display:inline-grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:var(--acc);color:var(--onacc);font:650 calc(16px*var(--tune-size,1))/1 var(--tf);letter-spacing:0;padding-top:1px;box-shadow:0 0 0 3px var(--bg),0 0 0 4px var(--ring)}

/* ---------- nav: the reception counter ----------
   One white counter floating just under the top edge, built like the dock: the clinic's plate, the three pages as
   service windows (equal cells between hairline rules, each with the hours board's dot: hollow, filled for the open
   page) centred on the page between four hairline rules, then the phone and the Book button. Not a logo-left link row, not a centred logo and not a side rail. */
.l-nav{position:sticky;top:0;z-index:20;padding:12px 0;pointer-events:none}
.l-nav .wrap{max-width:1440px;padding:0 clamp(12px,2vw,24px)}  /* the counter runs a little wider than the page column */
.l-counter{pointer-events:auto;display:grid;grid-template-columns:minmax(min-content,1fr) auto minmax(min-content,1fr);column-gap:16px;align-items:center;padding:8px;background:var(--surface);border-radius:calc(20px*var(--tune-radius,1));box-shadow:0 0 0 1px var(--line),0 18px 40px -28px rgba(14,27,44,.42)}
.l-logo{display:inline-flex;align-items:center;gap:12px;font:650 calc(18px*var(--tune-size,1))/1.1 var(--tf);letter-spacing:-.01em;text-decoration:none;color:var(--ink);justify-self:start}
.l-counter>.l-logo{max-width:300px;align-self:stretch;padding:0 6px}
.l-links{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;list-style:none;padding:0;margin:0 8px;border-inline:1px solid var(--line);font-size:calc(15px*var(--tune-size,1));font-weight:500}
.l-links li+li{border-left:1px solid var(--line)}
.l-links a{display:flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:0 22px;color:var(--ink);text-decoration:none;white-space:nowrap}
.l-links a::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--acc);transition:background-color .2s ease}
.l-links a:hover::before,.l-links a[aria-current]::before{background:var(--acc)}
.l-nav .nav-end{display:flex;align-items:center;gap:18px;align-self:stretch;justify-self:end;padding-right:0}
.l-navtel{font-weight:600;font-size:15px;text-decoration:none;white-space:nowrap;font-variant-numeric:tabular-nums}
.l-navtel:hover{color:var(--acc)}
.l-counter .l-btn{white-space:nowrap}
@media (max-width:1360px){.l-navtel{display:none}}
.l-counter .l-mono{box-shadow:0 0 0 3px var(--surface),0 0 0 4px var(--ring)}
/* the menu sheet (tablets and phones; <details>, so it works without JavaScript) */
.l-counter{position:relative}
.l-menu{display:none}
.l-menu:not([open]) .l-sheet{display:none}
.l-menu summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px;border-radius:calc(12px*var(--tune-radius,1));font-weight:600;font-size:calc(15px*var(--tune-size,1));color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.l-menu summary::-webkit-details-marker{display:none}
.l-menu summary:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.l-m-ic{position:relative;width:16px;height:10px;border-block:1.5px solid currentColor}
.l-m-close,.l-menu[open] .l-m-open{display:none}
.l-menu[open] .l-m-close{display:inline}
.l-menu[open] .l-m-ic{border-color:transparent}
.l-menu[open] .l-m-ic::before,.l-menu[open] .l-m-ic::after{content:"";position:absolute;left:0;right:0;top:50%;border-top:1.5px solid currentColor;transform:translateY(-50%) rotate(45deg)}
.l-menu[open] .l-m-ic::after{transform:translateY(-50%) rotate(-45deg)}
.l-sheet{position:absolute;z-index:5;left:0;right:0;top:calc(100% + 8px);background:var(--surface);border-radius:calc(18px*var(--tune-radius,1));box-shadow:0 0 0 1px var(--line),0 24px 48px -24px rgba(14,27,44,.45);padding:6px 22px 18px}
.l-sheet-links{list-style:none;padding:0;margin:0}
.l-sheet-links li+li{border-top:1px solid var(--line)}
.l-sheet-links a{display:flex;align-items:center;gap:14px;min-height:60px;font-size:calc(20px*var(--tune-size,1));font-weight:600;letter-spacing:-.01em;color:var(--ink);text-decoration:none}
.l-sheet-links a::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--acc)}
.l-sheet-links a[aria-current]::before{background:var(--acc)}
.l-sheet-end{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding-top:16px;border-top:1px solid var(--line)}
.l-sheet-tel{font-weight:600;font-size:calc(17px*var(--tune-size,1));font-variant-numeric:tabular-nums;text-decoration:none;color:var(--ink)}

/* ---------- the lens: circle photo, rings, loupe, label ---------- */
.l-lens{--d:min(470px,34vw);position:relative;width:calc(var(--d) + 80px);aspect-ratio:1;padding:40px;flex:none}
.l-ring{position:absolute;border-radius:50%;pointer-events:none}
.l-ring2{inset:0;background:var(--tint)}
.l-ring1{inset:18px;border:1px solid var(--ring)}
.l-ring2::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid var(--ring);opacity:.7}
.l-circle{position:relative;width:100%;height:100%;border-radius:50%;overflow:hidden;background:var(--line);isolation:isolate}
.l-circle img,.l-pic img{width:100%;height:100%;object-fit:cover}
.l-loupe{position:absolute;z-index:2;width:34%;aspect-ratio:1;border-radius:50%;overflow:hidden;background:var(--line);border:6px solid var(--bg);box-shadow:0 0 0 1px var(--ring),0 18px 36px -18px rgba(14,27,44,.45)}
.l-loupe img{width:100%;height:100%;object-fit:cover;transform:scale(2.2)}
.l-lens .l-loupe{left:2%;bottom:6%}
.l-chip{position:absolute;z-index:3;top:9%;right:0;display:inline-flex;align-items:center;gap:8px;padding:9px 16px 9px 12px;border-radius:999px;background:var(--surface);color:var(--ink);font-size:calc(14px*var(--tune-size,1));font-weight:600;line-height:1.2;box-shadow:0 0 0 1px var(--line),0 10px 24px -14px rgba(14,27,44,.35);max-width:70%}
.l-chip::before{content:"";width:8px;height:8px;border-radius:50%;flex:none;background:var(--acc);box-shadow:0 0 0 3px var(--tint)}

/* rounded frames, with a loupe on one corner */
.l-frame{position:relative}
.l-pic{position:relative;overflow:hidden;border-radius:var(--r);background:var(--line);isolation:isolate}
.l-frame .l-loupe{width:min(26%,190px)}
.l-lp-tr .l-loupe{top:-28px;right:28px}
.l-lp-br .l-loupe{bottom:-36px;right:6%}
.l-lp-bl .l-loupe{bottom:-36px;left:6%}

/* ---------- heroes: one big photo in a ringed mount, one headline, and the dock as the facts ---------- */
.l-hr-text,.l-pn-text{display:grid;justify-items:center;text-align:center;gap:18px;margin:0 auto}
.l-docked{position:relative;z-index:3;margin:-64px clamp(16px,5vw,72px) 0}
.l-docked .l-dk-act .l-btn{min-height:56px;padding:0 32px;font-size:calc(17px*var(--tune-size,1))}
/* the hero photo sits in an optical mount: a hairline ring a few pixels outside its rounded edge */
.l-pn-pic .l-pic,.l-hr-pic .l-pic{border-radius:calc(calc(var(--r) + 8px)*var(--tune-radius,1));box-shadow:0 0 0 8px var(--bg),0 0 0 9px var(--ring)}
.l-chip.l-fr-label{top:28px;right:auto;left:28px}
.l-panel .wrap,.l-hero .wrap{max-width:1440px;padding:0 clamp(16px,2.4vw,32px)}

/* panel (the reference): a big centred headline, one line under it, then the photo across the whole counter width,
   with the dock on its lower edge */
.l-panel{padding:calc(clamp(28px,3vw,44px)*var(--tune-space,1)) 0 0}
.l-panel h1{font-size:calc(clamp(52px,7.8vw,116px)*var(--tune-size,1));line-height:.98;letter-spacing:-.045em;max-width:12ch}
/* the headline holds the left edge of the photo and the one line sits on its last baseline at the right edge, so the
   two read as the caption plate of the photo below them */
.l-pn-text{grid-template-columns:minmax(0,1fr) auto;align-items:end;justify-items:start;text-align:left;column-gap:clamp(32px,4vw,64px);margin:0 8px calc(clamp(28px,3vw,40px)*var(--tune-space,1));gap:clamp(14px,1.6vw,22px) clamp(32px,4vw,64px)}
.l-pn-text .l-lede{max-width:30ch;text-wrap:pretty;padding-bottom:.55em;border-left:1px solid var(--ring);padding-left:clamp(18px,1.6vw,24px)}
.l-pn-pic .l-pic{height:clamp(360px,40vw,600px)}

/* lens: the reading lens. The photo fills the first screen and the headline sits alone in a ringed white circle laid
   over its lower left corner, like a magnifier on a page; the dock rides the lower edge on the right */
.l-hero{padding:clamp(12px,1.4vw,20px) 0 0}
.l-hero .wrap{position:relative;display:grid}
.l-hr-pic .l-pic{height:clamp(520px,calc(100svh - 128px),820px)}
.l-hr-text{position:absolute;z-index:2;left:calc(clamp(16px,2.4vw,32px) + clamp(24px,3.4vw,56px));bottom:clamp(96px,9vw,136px);width:var(--d);aspect-ratio:1;--d:min(560px,40vw);
  align-content:center;padding:9%;border-radius:50%;background:var(--surface);box-shadow:0 0 0 12px color-mix(in srgb,var(--surface) 55%,transparent),0 0 0 13px var(--ring),0 30px 60px -30px rgba(14,27,44,.45)}
.l-hero h1{font-size:calc(min(clamp(48px,6.6vw,96px),calc(var(--d,560px) * .135))*var(--tune-size,1));overflow-wrap:normal;line-height:.98;letter-spacing:-.045em}
.l-hero .l-docked{justify-self:end;width:min(62%,860px);margin:-64px clamp(24px,3.4vw,56px) 0 0}
.l-hero .l-docked.l-dk-h{grid-template-columns:max-content repeat(var(--m),minmax(0,1fr))}
.l-hero .l-docked .l-dk-act{display:none}  /* the Book button lives in the counter above */

/* one full-bleed room photo between the sections, edge to edge with no frame */
.l-room{padding-top:calc(clamp(80px,9vw,128px)*var(--tune-space,1))}
.l-room .l-pic{border-radius:0;height:clamp(320px,42vw,640px)}

/* ---------- the appointment dock ---------- */
.l-dock{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr)) auto;align-items:center;background:var(--surface);border-radius:var(--r);box-shadow:0 0 0 1px var(--line),0 24px 48px -28px rgba(14,27,44,.32);padding:10px}
.l-dock.l-dk-h{grid-template-columns:max-content repeat(var(--m),minmax(0,1fr)) auto}
.l-dk-cell{padding:14px 24px;display:grid;gap:8px;align-content:start;border-right:1px solid var(--line);align-self:stretch}
.l-dk-k{font-size:calc(13px*var(--tune-size,1));font-weight:500;color:var(--mute);line-height:1.3}
.l-dk-v{font-size:calc(17px*var(--tune-size,1));font-weight:600;line-height:1.35;text-decoration:none;color:var(--ink);font-variant-numeric:tabular-nums}
a.l-dk-v:hover{color:var(--acc)}
.l-dk-hours{list-style:none;padding:0;display:grid;grid-template-columns:max-content max-content;gap:2px 16px;font-size:calc(15px*var(--tune-size,1));line-height:1.4}
.l-dk-hours li{display:contents}
.l-dk-hours span{color:var(--mute)}
.l-dk-hours b{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.l-dk-act{padding:0 14px 0 24px}

/* ---------- stats: rings ---------- */
.l-stats{list-style:none;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(20px,4vw,64px)}
.l-stats li{display:grid;justify-items:center;gap:14px;width:180px;text-align:center}
.l-st-c{display:grid;place-items:center;width:168px;aspect-ratio:1;border-radius:50%;border:1px solid var(--ring);box-shadow:inset 0 0 0 10px var(--bg),inset 0 0 0 11px var(--line)}
.l-st-c b{font:var(--hw) calc(clamp(32px,3vw,42px)*var(--tune-size,1))/1 var(--hf);letter-spacing:var(--ht);font-variant-numeric:tabular-nums}
.l-st-l{color:var(--mute);font-size:calc(15px*var(--tune-size,1));line-height:1.35;max-width:16ch}

/* ---------- services: care cards ---------- */
.l-cards{list-style:none;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--gap)}
.l-card{position:relative;overflow:hidden;background:var(--surface);border-radius:var(--r);box-shadow:0 0 0 1px var(--line);padding:32px 30px 28px;display:flex;flex-direction:column;gap:12px;flex:0 0 calc((100% - 2 * var(--gap)) / 3)}
.l-cards.l-n4 .l-card{flex-basis:calc((100% - 3 * var(--gap)) / 4)}
.l-cards.l-n2 .l-card,.l-cards.l-n1 .l-card{flex-basis:calc((100% - var(--gap)) / 2)}
/* faint lens rings in the card's top corner */
.l-card::after{content:"";position:absolute;top:-72px;right:-72px;width:144px;height:144px;border-radius:50%;background:repeating-radial-gradient(circle,transparent 0 17px,var(--ring) 17px 18px);opacity:.5;pointer-events:none}
.l-card.l-alt::after{opacity:.3}
.l-card h3{padding-right:40px;font-size:calc(clamp(19px,1.45vw,22px)*var(--tune-size,1))}
.l-card h3 a{text-decoration:none}
.l-card h3 a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.l-card h3 a:hover{text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1.5px}
.l-card p{color:var(--mute);font-size:calc(16px*var(--tune-size,1))}
.l-cd-foot{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:baseline;gap:16px;color:var(--mute);font-size:calc(15px*var(--tune-size,1))}
.l-cd-foot b{color:var(--ink);font-size:17px;font-weight:650;font-variant-numeric:tabular-nums;white-space:nowrap}
.l-cd-foot span:empty{display:none}
.l-cd-foot span:empty+b{margin-left:auto}
.l-more{display:flex;justify-content:center;margin-top:32px}

/* ---------- services: tariff table ---------- */
.l-tariff{max-width:1040px;margin:0 auto;background:var(--surface);border-radius:var(--r);box-shadow:0 0 0 1px var(--line);padding:8px 32px}
.l-tariff table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.l-tariff thead th{font-size:calc(13px*var(--tune-size,1));font-weight:500;color:var(--mute);text-align:left;padding:18px 0 14px;border-bottom:1px solid var(--line)}
.l-tariff tbody th,.l-tariff td{padding:20px 0;border-bottom:1px solid var(--line);vertical-align:baseline;text-align:left}
.l-tariff tbody tr:last-child>*{border-bottom:0}
.l-tariff tbody th{font-weight:400;padding-right:24px}
.l-tariff tbody th a{display:block;font:650 calc(19px*var(--tune-size,1))/1.3 var(--tf);text-decoration:none}
.l-tariff tbody th a:hover{color:var(--acc)}
.l-tariff tbody th span{display:block;color:var(--mute);font-size:calc(15px*var(--tune-size,1));margin-top:4px}
.l-tariff td{white-space:nowrap;color:var(--mute);font-size:16px;padding-right:24px;width:1%}
.l-tariff .l-num{text-align:right;padding-right:0}
.l-tariff td.l-num{color:var(--ink);font-weight:650;font-size:calc(18px*var(--tune-size,1))}

/* ---------- first visit: three circles on one axis ---------- */
.l-visit{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);position:relative;max-width:1080px;margin:0 auto;text-align:center}
.l-visit::before{content:"";position:absolute;top:28px;left:calc(100% / 6);right:calc(100% / 6);border-top:1px solid var(--ring)}
.l-visit li{display:grid;justify-items:center;align-content:start;gap:10px;position:relative}
.l-vs-n{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--bg);box-shadow:inset 0 0 0 1.5px var(--acc),0 0 0 8px var(--bg);color:var(--acc);font:650 calc(20px*var(--tune-size,1))/1 var(--tf);font-variant-numeric:tabular-nums;padding-top:1px;margin-bottom:10px}
.l-visit p{color:var(--mute);font-size:calc(16px*var(--tune-size,1));max-width:30ch}

/* ---------- why us ---------- */
.l-why .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,6vw,96px);align-items:center}
.l-why-pic .l-pic{aspect-ratio:1}
.l-why-text{display:grid;gap:28px;justify-items:start}
.l-points{list-style:none;padding:0;display:grid;gap:18px;max-width:46ch}
.l-points li{position:relative;padding-left:40px;font-size:calc(18px*var(--tune-size,1));line-height:1.5}
.l-points li::before{content:"";position:absolute;left:0;top:calc(.75em - 11px);width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--acc);background:radial-gradient(circle,var(--acc) 0 3.5px,transparent 4px)}

/* ---------- reviews ---------- */
.l-quotes{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.l-quotes.l-n2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:900px;margin:0 auto}
.l-quotes .l-card{padding:32px 30px 28px;gap:24px}
.l-quotes .l-card::after{display:none}
.l-quotes blockquote{font-size:calc(18px*var(--tune-size,1));line-height:1.55;color:var(--ink)}
.l-quotes blockquote p{color:var(--ink);font-size:inherit}
.l-qt-who{margin-top:auto;display:flex;align-items:center;gap:12px;font-size:calc(15px*var(--tune-size,1));font-weight:600;color:var(--ink)!important}
.l-mono-q{width:32px;height:32px;font-size:calc(14px*var(--tune-size,1));background:var(--tint);color:var(--ink);box-shadow:none}
.l-qt-focus{max-width:900px;margin:0 auto;text-align:center;display:grid;justify-items:center;gap:28px}
.l-qt-focus blockquote{font:var(--hw) calc(clamp(24px,2.6vw,36px)*var(--tune-size,1))/1.3 var(--hf);letter-spacing:calc(var(--ht) / 1.5);text-wrap:balance}
.l-qt-focus blockquote p{text-wrap:balance}
.l-qt-focus figcaption{display:inline-flex;align-items:center;gap:12px;font-weight:600}
.l-qt-focus blockquote::before{content:"";display:block;width:44px;height:44px;margin:0 auto 24px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--ring);background:radial-gradient(circle,var(--acc) 0 5px,transparent 5.5px)}

/* ---------- gallery (factory/sections/gallery, themed by --g-*) ---------- */
.l-gal .g-sec{padding-bottom:0}
.l-gal .g-head{margin-inline:auto;text-align:center;justify-items:center}
.l-gal .g-title{font-size:calc(clamp(30px,3.3vw,48px)*var(--tune-size,1));font-weight:var(--hw);letter-spacing:var(--ht);line-height:1.04}
.l-gal .g-intro{font-size:calc(18px*var(--tune-size,1));text-wrap:balance}

/* ---------- closing band ---------- */
.l-band{position:relative;overflow:hidden;isolation:isolate;background:var(--deep);color:var(--ondeep);border-radius:calc(calc(var(--r) + 8px)*var(--tune-radius,1));padding:calc(clamp(56px,7vw,104px)*var(--tune-space,1)) clamp(24px,5vw,80px);display:grid;justify-items:center;text-align:center}
.l-band::before{content:"";position:absolute;z-index:-1;left:50%;top:50%;width:1400px;aspect-ratio:1;margin:-700px 0 0 -700px;border-radius:50%;background:repeating-radial-gradient(circle,transparent 0 63px,var(--deepline) 63px 64px);-webkit-mask:radial-gradient(closest-side,#000 30%,transparent);mask:radial-gradient(closest-side,#000 30%,transparent)}
.l-bd-text{display:grid;justify-items:center;gap:18px;max-width:640px}
.l-bd-text p{color:var(--deepmute);font-size:calc(18px*var(--tune-size,1));max-width:46ch}
.l-bd-text .l-cta{justify-content:center;margin-top:10px}
.l-on-deep{background:var(--ondeep);color:var(--deep)}
.l-on-deep:hover{background:var(--acc);color:var(--onacc)}
.l-ghost-deep{background:transparent;color:var(--ondeep);box-shadow:inset 0 0 0 1.5px var(--deepmute);font-variant-numeric:tabular-nums}
.l-ghost-deep:hover{background:var(--ondeep);color:var(--deep)}
.l-band-board{grid-template-columns:minmax(0,1fr) minmax(0,420px);text-align:left;justify-items:stretch;align-items:center;gap:clamp(32px,6vw,96px)}
.l-band-board .l-bd-text{justify-items:start}
.l-band-board .l-bd-text .l-cta{justify-content:flex-start}
.l-band-board::before{left:auto;right:-480px;opacity:.55}
.l-bd-k{font-size:calc(14px*var(--tune-size,1));color:var(--deepmute);margin-bottom:10px}

/* ---------- hours board ---------- */
.l-board{list-style:none;padding:0;display:grid;font-variant-numeric:tabular-nums}
.l-board li{display:grid;grid-template-columns:12px minmax(0,1fr) auto;align-items:center;gap:14px;padding:11px 0;border-bottom:1px solid var(--line);font-size:calc(16px*var(--tune-size,1))}
.l-board li:last-child{border-bottom:0}
.l-board i{width:10px;height:10px;border-radius:50%;background:var(--acc)}
.l-board .off i{background:transparent;box-shadow:inset 0 0 0 1.5px var(--mute)}
.l-board .off{color:var(--mute)}
.l-board b{font-weight:600;text-align:right}
.l-board .off b{font-weight:400}
.l-board-deep li{border-color:var(--deepline);color:var(--ondeep)}
.l-board-deep i{background:var(--ondeep)}
.l-board-deep .off,.l-board-deep .off b{color:var(--deepmute)}
.l-board-deep .off i{box-shadow:inset 0 0 0 1.5px var(--deepmute)}
/* week chart (shared/Week.astro) drawn as calipers: a hairline with a dot at each end */
.wk ol{list-style:none;padding:0;display:grid;gap:4px}
.wk li{display:grid;grid-template-columns:44px minmax(0,1fr) 112px;align-items:center;gap:14px;min-height:36px;font-size:calc(15px*var(--tune-size,1));font-variant-numeric:tabular-nums}
.wk-n{font-weight:600}
.wk-bar{position:relative;height:12px}
.wk-bar::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:1px dashed var(--line)}
.wk-bar i{position:absolute;top:50%;height:2px;margin-top:-1px;background:var(--acc)}
.wk-bar i::before,.wk-bar i::after{content:"";position:absolute;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:var(--acc)}
.wk-bar i::before{left:-5px}.wk-bar i::after{right:-5px}
.wk-t{text-align:right;color:var(--ink);font-weight:600}
.wk .off .wk-t,.wk .off .wk-n{color:var(--mute);font-weight:400}
.wk-scale{display:flex;justify-content:space-between;margin:6px 126px 0 58px;font-size:calc(12px*var(--tune-size,1));color:var(--mute);font-variant-numeric:tabular-nums}
.wk-scale span:first-child{transform:translateX(-50%)}.wk-scale span:last-child{transform:translateX(50%)}  /* each time sits centred under its caliper dot */

/* ---------- page heads (services, team) ---------- */
.l-ph{padding:calc(clamp(56px,7vw,104px)*var(--tune-space,1)) 0 calc(clamp(40px,5vw,64px)*var(--tune-space,1))}
.l-ph .wrap{display:grid;justify-items:center;text-align:center;gap:20px}
.l-ph h1{max-width:16ch}
.l-ph .l-lede{max-width:46ch;text-wrap:balance}
.l-band-pic .l-pic{aspect-ratio:21/8}

/* ---------- services page ---------- */
.l-svc-sec{padding-top:calc(clamp(88px,9vw,136px)*var(--tune-space,1))}
.l-detail{list-style:none;padding:0;max-width:1120px;margin:0 auto}
.l-detail li{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,80px);padding:calc(40px*var(--tune-space,1)) 0;border-top:1px solid var(--line);scroll-margin-top:96px}
.l-detail li:last-child{border-bottom:1px solid var(--line)}
.l-dt-name{display:grid;gap:16px;align-content:start;justify-items:start}
.l-dt-name h2{font-size:calc(clamp(26px,2.4vw,34px)*var(--tune-size,1))}
.l-plate{display:inline-flex;align-items:center;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);background:var(--surface);font-size:calc(15px*var(--tune-size,1));font-variant-numeric:tabular-nums}
.l-plate>*{padding:8px 16px;line-height:1.3}
.l-plate span{color:var(--mute)}
.l-plate span+b{border-left:1px solid var(--line)}
.l-plate b{font-weight:650}
.l-dt-body{display:grid;gap:14px;align-content:start;font-size:calc(17px*var(--tune-size,1));max-width:62ch}
.l-dt-for{color:var(--mute)}
.l-dt-for span{color:var(--ink);font-weight:600}
.l-rates{max-width:1120px;margin:calc(56px*var(--tune-space,1)) auto 0;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,80px)}
.l-rates h2{font-size:calc(clamp(24px,2vw,30px)*var(--tune-size,1))}
.l-rates dl{display:grid;font-variant-numeric:tabular-nums}
.l-rates dl div{display:flex;justify-content:space-between;gap:24px;padding:12px 0;border-bottom:1px solid var(--line)}
.l-rates dd{font-weight:650;white-space:nowrap}

/* ---------- FAQ ---------- */
.l-fq-list{max-width:820px;margin:0 auto;border-top:1px solid var(--line)}
.l-fq-list details{border-bottom:1px solid var(--line)}
.l-fq-list summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) 32px;align-items:center;gap:20px;padding:22px 0;font:600 calc(18px*var(--tune-size,1))/1.4 var(--tf)}
.l-fq-list summary::-webkit-details-marker{display:none}
.l-fq-list summary::after{content:"";width:32px;height:32px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--ring);background:linear-gradient(var(--ink),var(--ink)) center/12px 1.5px no-repeat,linear-gradient(var(--ink),var(--ink)) center/1.5px 12px no-repeat;transition:transform .25s ease}
.l-fq-list details[open] summary::after{transform:rotate(45deg)}
.l-fq-list summary:focus-visible{outline:2px solid var(--acc);outline-offset:4px;border-radius:calc(4px*var(--tune-radius,1))}
.l-fq-list details p{padding:0 52px 24px 0;color:var(--mute);max-width:64ch}
.l-fq-open{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px var(--gap);max-width:1120px;margin:0 auto}
.l-fq-open div{background:var(--surface);border-radius:var(--r);box-shadow:0 0 0 1px var(--line);padding:28px 30px;display:grid;gap:10px;align-content:start}
.l-fq-open dt{font-weight:650;font-size:calc(18px*var(--tune-size,1));line-height:1.35}
.l-fq-open dd{color:var(--mute)}
.l-fq-open div:last-child:nth-child(odd){grid-column:1/-1}

/* ---------- team ---------- */
.l-people{list-style:none;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:48px var(--gap)}
.l-people li{flex:0 0 calc((100% - 2 * var(--gap)) / 3);display:grid;justify-items:center;align-content:start;text-align:center;gap:8px}
.l-people.l-n4 li{flex-basis:calc((100% - 3 * var(--gap)) / 4)}
.l-people li>p:last-child{color:var(--mute);font-size:calc(16px*var(--tune-size,1));max-width:34ch;margin-top:6px}
.l-face{display:grid;place-items:center;width:168px;aspect-ratio:1;border-radius:50%;background:var(--tint);box-shadow:0 0 0 10px var(--bg),0 0 0 11px var(--ring);margin:12px 0 22px}
.l-face span{font:var(--hw) calc(52px*var(--tune-size,1))/1 var(--hf);letter-spacing:-.02em;color:var(--acc);padding-top:2px}
.l-people h2,.l-rows h2{font-size:calc(clamp(22px,1.8vw,26px)*var(--tune-size,1))}
.l-role{color:var(--acc);font-weight:600;font-size:calc(15px*var(--tune-size,1))}
.l-rows{list-style:none;padding:0;max-width:1120px;margin:0 auto}
.l-rows li{display:grid;grid-template-columns:72px minmax(0,4fr) minmax(0,7fr);gap:clamp(20px,3vw,40px);align-items:center;padding:28px 0;border-top:1px solid var(--line)}
.l-rows li:last-child{border-bottom:1px solid var(--line)}
.l-mono-lg{width:64px;height:64px;font-size:calc(24px*var(--tune-size,1));box-shadow:0 0 0 4px var(--bg),0 0 0 5px var(--ring)}
.l-rows .l-mono-lg{margin-left:5px}  /* the outer ring, not the fill, lines up with the row rules */
.l-rw-who{display:grid;gap:4px}
.l-rw-bio{color:var(--mute)}

/* ---------- contact ---------- */
.l-contact .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,96px);align-items:stretch}
.l-ct-info{display:grid;gap:20px}
.l-ct-lede{color:var(--mute);font-size:calc(18px*var(--tune-size,1));max-width:42ch}
.l-ct-hours{margin-top:12px;padding:8px 26px 10px;border-radius:var(--r);background:var(--surface);box-shadow:0 0 0 1px var(--line)}
.l-ct-hours h3{font:600 calc(14px*var(--tune-size,1))/1.3 var(--tf);letter-spacing:0;color:var(--mute);padding:16px 0 4px}
.l-ct-hours .wk{padding:6px 0 14px}
.l-ct-dl{display:grid;gap:0}
.l-ct-dl div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
.l-ct-dl dt{color:var(--mute);font-size:calc(15px*var(--tune-size,1))}
.l-ct-dl dd{font-weight:600}
.l-ct-dl a{text-decoration:none}.l-ct-dl a:hover{color:var(--acc)}
.l-form{display:grid;grid-template-columns:1fr 1fr;gap:20px;background:var(--surface);border-radius:calc(calc(var(--r) + 8px)*var(--tune-radius,1));box-shadow:0 0 0 1px var(--line),0 30px 60px -40px rgba(14,27,44,.35);padding:clamp(24px,3vw,40px)}
.l-form label{display:grid;gap:8px;font-size:calc(14px*var(--tune-size,1));font-weight:600;color:var(--ink)}
.l-form .l-wide{grid-column:1/-1}
.l-form input,.l-form textarea,.l-form select{font:400 calc(16px*var(--tune-size,1))/1.4 var(--tf);color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:calc(14px*var(--tune-radius,1));padding:13px 16px;min-height:50px;width:100%}
.l-form textarea{resize:vertical;min-height:120px}
/* the form and the contact card run the full height of the details column: the message box takes the extra room */
.l-form{grid-template-rows:auto 1fr auto auto}
.l-form label:has(textarea){grid-template-rows:auto 1fr}
.l-form textarea{height:100%}
.l-form :focus-visible{outline:2px solid var(--acc);outline-offset:1px}
.l-fm-end{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.l-fm-end p{color:var(--mute);font-size:calc(14px*var(--tune-size,1));flex:1 1 220px}
.l-reach{display:grid;gap:0;align-content:center;background:var(--deep);color:var(--ondeep);border-radius:calc(calc(var(--r) + 8px)*var(--tune-radius,1));padding:clamp(16px,2vw,24px) clamp(24px,3vw,40px);position:relative;overflow:hidden;isolation:isolate}
.l-reach::before{content:"";position:absolute;z-index:-1;right:-260px;top:-260px;width:620px;aspect-ratio:1;border-radius:50%;background:repeating-radial-gradient(circle,transparent 0 47px,var(--deepline) 47px 48px)}
.l-reach a,.l-reach p{display:grid;gap:6px;padding:22px 0;text-decoration:none;border-bottom:1px solid var(--deepline)}
.l-reach>:last-child{border-bottom:0}
.l-reach span{font-size:calc(14px*var(--tune-size,1));color:var(--deepmute)}
.l-reach b{font:var(--hw) calc(clamp(24px,2.4vw,34px)*var(--tune-size,1))/1.15 var(--hf);letter-spacing:calc(var(--ht) / 1.5);font-variant-numeric:tabular-nums}
.l-reach a:hover b{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.15em}
.l-legal{color:var(--mute);font-size:calc(14px*var(--tune-size,1));padding-top:calc(40px*var(--tune-space,1));text-align:center}

/* ---------- footer ---------- */
.l-foot{margin-top:calc(clamp(80px,9vw,128px)*var(--tune-space,1));border-top:1px solid var(--line);padding:calc(48px*var(--tune-space,1)) 0 calc(56px*var(--tune-space,1));font-size:calc(15px*var(--tune-size,1))}
.l-foot .wrap{display:grid;grid-template-columns:minmax(0,4fr) repeat(3,minmax(0,3fr));gap:32px var(--gap);align-items:start}
.l-foot ul{list-style:none;padding:0;display:grid;gap:6px}
.l-foot a{text-decoration:none}.l-foot a:hover{color:var(--acc);text-decoration:underline}
.l-ft-brand{display:grid;gap:14px;color:var(--mute)}
.l-ft-brand .l-logo{color:var(--ink)}
.l-ft-k{font-weight:600;margin-bottom:10px}
.l-ft-hours li{display:flex;justify-content:space-between;gap:16px;max-width:240px;font-variant-numeric:tabular-nums}
.l-ft-hours span:first-child{color:var(--mute)}
.l-ft-legal{margin-bottom:14px}
.l-foot .langs{display:flex}
.l-ft-note{grid-column:1/-1;color:var(--mute);font-size:calc(13px*var(--tune-size,1));padding-top:24px;border-top:1px solid var(--line)}

/* ---------- the Book / Call bar on phones ---------- */
.l-bar{display:none}

/* ---------- tablet ---------- */
@media (max-width:1080px){
  .l-stats{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));justify-items:center;gap:20px}
  .l-stats li{width:auto}
  .l-st-c{width:min(150px,17vw)}
  .l-st-c b{font-size:calc(min(32px,3.5vw)*var(--tune-size,1))}
  .l-dock{grid-template-columns:repeat(var(--n),minmax(0,1fr))}
  .l-dock.l-dk-h{grid-template-columns:max-content repeat(var(--m),minmax(0,1fr))}
  .l-dk-act{grid-column:1/-1;padding:10px}
  .l-dk-act .l-btn{width:100%}
  .l-dock>.l-dk-cell:nth-last-child(2){border-right:0}
  .l-cards .l-card,.l-cards.l-n4 .l-card{flex-basis:calc((100% - var(--gap)) / 2)}
  .l-cards.l-n3 .l-card:last-child,.l-cards.l-n5 .l-card:last-child{flex-basis:calc((100% - var(--gap)) / 2)}
  .l-quotes,.l-quotes.l-n2{grid-template-columns:minmax(0,1fr);max-width:640px;margin:0 auto}
  .l-why .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .l-people li,.l-people.l-n4 li{flex-basis:calc((100% - var(--gap)) / 2)}
  .l-foot .wrap{grid-template-columns:repeat(2,minmax(0,1fr))}
  .l-contact .wrap{grid-template-columns:minmax(0,1fr)}
  .l-band-board{grid-template-columns:minmax(0,1fr)}
}

/* ---------- tablet: the windows take their own row under the plate ---------- */
@media (max-width:1080px){
  .l-counter{grid-template-columns:minmax(0,1fr) auto auto;column-gap:10px}
  .l-counter>.l-logo{min-height:44px}
  .l-links{display:none}
  .l-menu{display:block}
  .l-hr-text{--d:min(440px,50vw);bottom:150px}
  .l-pn-text{grid-template-columns:minmax(0,1fr)}
  .l-panel h1{max-width:none}
  .l-pn-text .l-lede{max-width:48ch;padding-bottom:0}
  .l-hero .l-docked{justify-self:stretch;width:auto;margin:-64px clamp(16px,5vw,72px) 0}
}

/* ---------- phone ---------- */
@media (max-width:760px){
  body{padding-bottom:calc(calc(84px + env(safe-area-inset-bottom))*var(--tune-space,1))}
  :root{--g-top:84px}
  html{scroll-padding-top:96px}
  .l-nav{padding:8px 0}
  .l-counter{padding:6px;border-radius:calc(18px*var(--tune-radius,1));grid-template-columns:minmax(0,1fr) auto}
  .l-nav .nav-end{display:none}  /* on phones the fixed Book / Call bar is the action */
  .l-logo{font-size:calc(17px*var(--tune-size,1))}
  .l-pn-text{grid-template-columns:minmax(0,1fr);gap:14px;margin:0 4px 24px}
  .l-pn-text .l-lede{padding-bottom:0}
  .l-pn-pic .l-pic,.l-hr-pic .l-pic{height:auto;aspect-ratio:4/5;border-radius:calc(24px*var(--tune-radius,1));box-shadow:0 0 0 6px var(--bg),0 0 0 7px var(--ring)}
  .l-chip.l-fr-label{top:18px;left:18px}
  .l-hero{padding-top:8px}
  .l-hr-text{position:relative;left:auto;bottom:auto;justify-self:center;margin-top:-128px;--d:min(330px,84vw);padding:8%}
  .l-hero h1{font-size:calc(48px*var(--tune-size,1))}
  .l-hero .l-docked{justify-self:stretch;width:auto;margin:32px 0 0}
  .l-hero .l-docked.l-dk-h{grid-template-columns:minmax(0,1fr)}
  .l-docked .l-dk-cell:nth-last-child(2){border-bottom:0}
  .l-docked .l-dk-act{display:none}  /* on phones the fixed Book / Call bar is the action; the dock is the facts */
  .l-ring1{inset:12px}
  .l-chip{font-size:calc(13px*var(--tune-size,1));padding:7px 12px 7px 10px;top:4%}
  .l-docked{margin:-40px 10px 0}
  .l-dock,.l-dock.l-dk-h{grid-template-columns:minmax(0,1fr);padding:6px 6px 10px}
  .l-dk-cell{border-right:0;border-bottom:1px solid var(--line);padding:14px 18px}
  .l-dk-hours{grid-template-columns:max-content minmax(0,1fr)}
  .l-dk-hours b{white-space:normal;overflow-wrap:anywhere}
  .l-cards .l-card,.l-cards.l-n4 .l-card,.l-cards.l-n3 .l-card:last-child,.l-cards.l-n5 .l-card:last-child{flex-basis:100%}
  .l-card{padding:26px 24px 22px}
  .l-stats{grid-template-columns:1fr 1fr;gap:32px 12px}
  .l-stats[style*="--n:3"]{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .l-st-c{width:min(150px,38vw)}
  .l-st-c b{font-size:calc(30px*var(--tune-size,1))}
  .l-stats[style*="--n:3"] .l-st-c b{font-size:calc(22px*var(--tune-size,1))}
  .l-stats[style*="--n:3"] .l-st-c{width:min(104px,27vw)}
  .l-tariff{padding:4px 20px}
  .l-tariff thead{display:none}
  .l-tariff tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 16px;padding:18px 0;border-bottom:1px solid var(--line)}
  .l-tariff tbody tr:last-child{border-bottom:0}
  .l-tariff tbody th{grid-column:1/-1;padding:0;border:0}
  .l-tariff td{padding:0;border:0;width:auto}
  .l-visit{grid-template-columns:minmax(0,1fr);gap:28px;text-align:left;max-width:520px}
  .l-visit::before{top:28px;bottom:28px;left:28px;right:auto;border-top:0;border-left:1px solid var(--ring)}
  .l-visit li{grid-template-columns:56px minmax(0,1fr);justify-items:start;column-gap:20px;row-gap:4px}
  .l-vs-n{grid-row:1/3;margin:0}
  .l-why .wrap{grid-template-columns:minmax(0,1fr)}
  .l-why-pic{margin-right:12px}
  .l-why-pic .l-pic{aspect-ratio:4/3}
  .l-frame .l-loupe{width:30%}
  .l-lp-tr .l-loupe{top:-20px;right:12px}
  .l-lp-br .l-loupe{bottom:-24px}
  .l-band-pic .l-pic{aspect-ratio:4/3}
  .l-detail li,.l-rates{grid-template-columns:minmax(0,1fr);gap:16px}
  .l-detail li{padding:32px 0}
  .l-fq-open{grid-template-columns:minmax(0,1fr)}
  .l-people li,.l-people.l-n4 li{flex-basis:100%}
  .l-rows li{grid-template-columns:69px minmax(0,1fr);align-items:start}
  .l-rw-bio{grid-column:1/-1}
  .l-form{grid-template-columns:minmax(0,1fr);grid-template-rows:none}
  .wk li{grid-template-columns:36px minmax(0,1fr) 100px;gap:10px}
  .wk-scale{margin:6px 110px 0 46px}
  .l-ct-dl div{grid-template-columns:96px minmax(0,1fr)}
  .l-foot .wrap{grid-template-columns:minmax(0,1fr)}
  .l-bd-text .l-cta{display:grid;grid-template-columns:minmax(0,1fr);width:100%}
  .l-bar{display:grid;grid-template-columns:1fr 1fr;gap:8px;position:fixed;z-index:30;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));padding:8px;border-radius:999px;background:var(--surface);box-shadow:0 0 0 1px var(--line),0 16px 40px -12px rgba(14,27,44,.4)}
  .l-nophone .l-bar{grid-template-columns:1fr}
  .l-bar .l-btn{min-height:48px;padding:0 16px}
}

/* ---------- motion (motion library classes in the markup; look-specific bits here) ---------- */
@media (prefers-reduced-motion:no-preference) and (hover:hover){
  .l-card{transition:box-shadow .25s ease,transform .25s ease}
  .l-card:hover{transform:translateY(-3px);box-shadow:0 0 0 1px var(--ring),0 24px 40px -28px rgba(14,27,44,.4)}
  .l-card:hover::after{opacity:.7}
}


/* ---------- Advanced hero moment: "the iris" ----------
   Six aperture blades cover the hero photo and swing open like a lens iris (rotate + translate only); the photo
   settles from 108 %, the rings expand out of the circle, the loupe lands, the label rises. At rest (no JS, reduced
   motion, Basic) the blades sit outside the photo and are invisible; with motion they end exactly there.
   Pointer (engine/shared/wow.js): photo +8 px, rings -6 / -12 px, loupe +16 px; fill mode backwards on those. */
.l-iris{position:absolute;inset:0;z-index:1;pointer-events:none}
.l-iris i{position:absolute;left:50%;top:50%;width:200%;aspect-ratio:1;margin-top:-100%;transform-origin:0 50%;transform:rotate(var(--a)) translateX(27%);opacity:0;background:var(--deep);box-shadow:inset 1.5px 0 0 color-mix(in srgb,var(--ondeep) 28%,transparent)}
.l-iris i:nth-child(even){background:color-mix(in oklab,var(--deep) 86%,var(--ondeep))}
.l-iris-wide i{width:260%;margin-top:-130%}
@media (prefers-reduced-motion:no-preference){
  .m-js [data-wow] .l-iris i{animation:l-iris 1.15s cubic-bezier(.65,0,.25,1) .12s backwards}
  .m-js [data-wow] .l-iris-wide i{animation-name:l-iris-wide}
  .m-js [data-wow] .l-circle img,.m-js [data-wow] .l-pic img{animation:l-settle 1.7s cubic-bezier(.2,.7,.2,1) both}
  .m-js [data-wow] .l-ring1{animation:l-ring .9s cubic-bezier(.2,.7,.2,1) .55s backwards}
  .m-js [data-wow] .l-ring2{animation:l-ring 1s cubic-bezier(.2,.7,.2,1) .7s backwards}
  .m-js [data-wow] .l-loupe{animation:l-loupe .7s cubic-bezier(.3,1,.5,1) 1.05s backwards}
  .m-js [data-wow] .l-chip{animation:l-chip .6s cubic-bezier(.2,.7,.2,1) 1.25s backwards}
  .m-js [data-wow] .l-dock{animation:l-chip .7s cubic-bezier(.2,.7,.2,1) .9s backwards}
  /* the headline comes into focus as the iris opens, instead of the motion library's word rise (A1) */
  [data-wow] .m-words .m-w>span{animation:none}
  [data-wow] .m-words .m-w{overflow:visible}
  .m-js [data-wow] h1{animation:l-focus 1s cubic-bezier(.2,.7,.2,1) .2s backwards}
  .m-js [data-wow] .l-lede{animation:l-chip .7s cubic-bezier(.2,.7,.2,1) .45s backwards}
}
@keyframes l-iris{from{transform:rotate(calc(var(--a) - 80deg)) translateX(0);opacity:1}88%{opacity:1}to{transform:rotate(var(--a)) translateX(27%);opacity:0}}
@keyframes l-iris-wide{from{transform:rotate(calc(var(--a) - 80deg)) translateX(0);opacity:1}88%{opacity:1}to{transform:rotate(var(--a)) translateX(27%);opacity:0}}
@keyframes l-focus{from{transform:scale(1.04);opacity:.35}to{transform:scale(1);opacity:1}}
@keyframes l-settle{from{transform:scale(1.08)}to{transform:scale(1)}}
@keyframes l-ring{from{transform:scale(.88);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes l-loupe{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes l-chip{from{transform:translateY(12px);opacity:0}to{transform:translateY(0);opacity:1}}