/* Twin Lights Sharpening — v5 (Iris). Tokens per ../../design/SPEC.md */
@font-face{font-family:"Shoulders";src:url(fonts/bigshoulders.woff2) format("woff2");font-weight:700 900;font-display:swap}
@font-face{font-family:"Kaushan";src:url(fonts/kaushan.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Hanken";src:url(fonts/hanken.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"DM Mono";src:url(fonts/dmmono.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Cormorant SC";src:url(fonts/cormorantsc.woff2) format("woff2");font-weight:700;font-display:swap}
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}

:root{
 --night:#0b1a2e;--harbor:#12263f;--deep:#07111e;--ink:#1c2b4a;
 --gold:#f2c14e;--gold-2:#d9a531;--cream:#f4efe4;--paper:#ece4d3;--steel:#9aa4b1;--sea:#4a86c5;
 --copper:#c99a5b;
 --display:"Shoulders","Arial Narrow",Impact,sans-serif;--brush:"Kaushan","Brush Script MT",cursive;
 --body:"Hanken",system-ui,sans-serif;--mono:"DM Mono",ui-monospace,monospace;--sc:"Cormorant SC",Georgia,serif;
 --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;--s10:144px;
 --ease:cubic-bezier(.2,.7,.2,1);--spring:cubic-bezier(.34,1.56,.64,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--night);color:var(--cream);font:400 16px/1.6 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
@media(min-width:900px){body{font-size:18px}}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:800;text-transform:uppercase;line-height:.9;letter-spacing:.005em}
h2{font-size:clamp(44px,6.4vw,92px)}
h3{font-size:clamp(32px,3vw,44px)}
p{margin:0 0 var(--s4)}
.br{display:block;font-family:var(--brush);text-transform:none;font-weight:400;color:var(--gold);letter-spacing:0;line-height:1.05;font-size:.52em;margin-top:.14em;transform:rotate(-2.5deg);transform-origin:left center}
.wrap{width:min(1240px,100% - 40px);margin-inline:auto}
@media(min-width:900px){.wrap{width:min(1240px,100% - 96px)}}
.label{font:400 12px/1.4 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:var(--s4)}
.lede{font-size:1.1em;color:#d5dbe3;max-width:34em}
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--gold);color:var(--night);padding:8px 14px;border-radius:6px;font-weight:600}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.sec{padding:var(--s9) 0;position:relative}
@media(min-width:900px){.sec{padding:var(--s10) 0}}
.sec-head{margin-bottom:var(--s8)}
.sec.first{padding-top:var(--s8)}

/* ---------- header ---------- */
header.site{position:fixed;inset:0 0 auto;z-index:50;transition:padding .35s;padding:18px 0}
header.site::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(7,17,30,.9);box-shadow:0 1px 0 rgba(242,193,78,.18);opacity:0;transition:opacity .35s}
header.site.solid::before{opacity:1}
@supports(backdrop-filter:blur(1px)){header.site::before{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}}
header.site.solid{padding:10px 0}
header.site .wrap{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:var(--s5)}
.brand{position:relative;z-index:3;display:flex;align-items:center;gap:12px;text-decoration:none}
.brand img{width:58px;height:58px;border-radius:50%;box-shadow:0 0 0 2px rgba(242,193,78,.55),0 6px 20px rgba(0,0,0,.4);transition:width .35s,height .35s,transform .6s var(--spring)}
.brand:hover img{transform:rotate(-8deg) scale(1.05)}
header.solid .brand img{width:44px;height:44px}
.brand b{display:block;font:800 26px/1 var(--display);text-transform:uppercase;letter-spacing:.02em}
.brand small{display:block;font:400 11px/1 var(--mono);letter-spacing:.32em;text-transform:uppercase;color:var(--gold);margin-top:4px}
#nav{display:flex;align-items:center;gap:var(--s6)}
#nav .nav-book{margin-left:var(--s2)}
#nav ul{display:flex;gap:var(--s6);list-style:none;margin:0;padding:0}
#nav ul a{font:400 13px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;text-decoration:none;color:#dfe4ea;padding:10px 0;position:relative}
#nav ul a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
#nav ul a:hover::after,#nav ul a[aria-current]::after{transform:scaleX(1)}
#nav ul a[aria-current]{color:var(--cream)}
.menu{display:none}
@media(max-width:899px){
 .menu{display:flex;align-items:center;gap:10px;background:none;border:1px solid rgba(242,193,78,.5);color:var(--cream);font:400 12px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;padding:12px 14px;border-radius:8px;position:relative;z-index:2;min-height:44px}
 .menu i{width:18px;height:2px;background:var(--gold);position:relative;transition:.3s}
 .menu i::before,.menu i::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--gold);transition:.3s}
 .menu i::before{top:-6px}.menu i::after{top:6px}
 .menu[aria-expanded=true] i{background:transparent}
 .menu[aria-expanded=true] i::before{top:0;transform:rotate(45deg)}.menu[aria-expanded=true] i::after{top:0;transform:rotate(-45deg)}
 #nav{position:fixed;inset:0;z-index:1;padding-top:84px;background:var(--deep);flex-direction:column;justify-content:center;gap:var(--s7);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
 #nav.open{opacity:1;visibility:visible}
 #nav ul{flex-direction:column;align-items:center;gap:var(--s5)}
 #nav ul a{font:800 48px/1 var(--display);letter-spacing:.02em}
 #nav.open .nav-book{display:inline-flex}
 #nav .nav-book{margin:0}
 #nav ul a::after{display:none}
 #nav ul a[aria-current]{color:var(--gold)}
 .brand img{width:48px;height:48px}.brand b{font-size:22px}
}

/* ---------- beams (twin lights) ---------- */
.beams{position:absolute;inset:0;pointer-events:none;overflow:hidden;mix-blend-mode:screen;z-index:1}
.beams i{position:absolute;left:var(--bx1,68%);top:var(--by1,31%);width:150vmax;height:34vmax;margin-top:-17vmax;transform-origin:0 50%;
 background:linear-gradient(90deg,rgba(255,214,120,.42),rgba(255,214,120,.1) 32%,transparent 72%);clip-path:polygon(0 49.4%,100% 8%,100% 92%,0 50.6%);-webkit-mask:linear-gradient(0deg,transparent 8%,#000 40%,#000 60%,transparent 92%);mask:linear-gradient(0deg,transparent 8%,#000 40%,#000 60%,transparent 92%);
 transform:rotate(180deg);animation:sweep 14s ease-in-out infinite;filter:blur(6px)}
.beams i:nth-child(2){left:var(--bx2,87.7%);top:var(--by2,28.3%);animation-delay:-7s;opacity:.85}
@keyframes sweep{0%,100%{transform:rotate(158deg)}50%{transform:rotate(206deg)}}
.page-head .beams i,.cta-band .beams i{opacity:.6}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;isolation:isolate;padding:140px 0 120px}
.hero-bg,.ph-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:53% 50%;z-index:-2;transform:scale(calc(1.06 + var(--hp,0) * .06)) translateY(calc(var(--hp,0) * 40px));transform-origin:70% 40%}
.hero::before,.page-head::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(90deg,rgba(7,17,30,.92) 0%,rgba(7,17,30,.72) 38%,rgba(7,17,30,.1) 70%),linear-gradient(0deg,var(--night) 0%,transparent 28%)}
.hero-in{position:relative;z-index:2}
.hero-label{display:flex;align-items:center;gap:10px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--gold)}
.hero h1{font-size:clamp(76px,13.5vw,196px);line-height:.84;margin-bottom:var(--s6)}
.hero h1 .br{font-size:.34em;position:relative;display:block;width:max-content;max-width:100%;padding:0 .2em .3em 0;margin-top:.1em}
.bri{font-family:var(--brush);text-transform:none;font-weight:400;color:var(--gold);font-size:.82em;letter-spacing:0;display:inline-block;transform:rotate(-4deg) translateY(-.04em);padding:0 .06em}
.rise{display:block;overflow:hidden;padding-bottom:.04em}
\.rise>span{display:block;color:var(--cream)}
.js .rise>span{transform:translateY(105%);animation:up 1s .15s var(--ease) forwards}
@keyframes up{to{transform:none}}
.js .hero h1 .br,.js .page-head h1 .br{opacity:0;animation:fadein .8s .7s forwards}
@keyframes fadein{to{opacity:1}}
.brush{position:absolute;left:-2%;bottom:-.05em;width:104%;height:.5em;overflow:visible}
.brush path{fill:none;stroke:var(--gold);stroke-width:7;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1s 1.1s var(--ease) forwards}
.brush .thin{stroke-width:3;opacity:.6;animation-delay:1.35s}
@keyframes draw{to{stroke-dashoffset:0}}
.no-js .brush path,html:not(.js) .brush path{stroke-dashoffset:0}
.hero .lede{max-width:30em;margin-bottom:var(--s6)}
.hero-cta{display:flex;flex-wrap:wrap;gap:var(--s4);margin-bottom:var(--s6)}
.hero-pills{display:flex;flex-wrap:wrap;gap:10px}
@media(max-width:700px){
 .hero{align-items:flex-end;padding:120px 0 96px}
 .hero-bg{object-position:100% 40%}
 .hero::before{background:linear-gradient(0deg,rgba(7,17,30,.97) 0%,rgba(7,17,30,.82) 52%,rgba(7,17,30,.25) 80%,rgba(7,17,30,.5) 100%)}
 .hero h1{font-size:clamp(68px,21vw,110px)}
}

/* page heads */
.page-head{position:relative;isolation:isolate;overflow:hidden;padding:200px 0 var(--s9)}
.page-head .wrap{position:relative;z-index:2}
.page-head h1{font-size:clamp(64px,10vw,150px)}
.page-head h1 .br{font-size:.36em}
.page-head .lede{margin-top:var(--s6)}
.page-head .ph-bg{object-position:70% 35%}
@media(max-width:700px){.page-head{padding:150px 0 var(--s8)}}

/* ---------- pills ---------- */
.pill{display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 10px;border-radius:999px;font:500 14px/1 var(--body);border:1px solid rgba(242,193,78,.28);background:rgba(18,38,63,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:transform .3s var(--spring),border-color .3s}
.pill svg{width:18px;height:18px;fill:currentColor;color:var(--gold)}
.pill.gold{background:linear-gradient(180deg,#ffd979,var(--gold) 60%,var(--gold-2));color:var(--night);border-color:#ffe7a6;--hole:var(--gold)}
.pill.gold svg{color:var(--night)}
.pill:hover{transform:translateY(-2px);border-color:var(--gold)}

/* =========================================================
   BUTTONS — reactive. --mx/--my = pointer position (0–100%)
   ========================================================= */
.plq,.ob,.tile{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
[data-react]{--mx:50%;--my:50%;--tx:0px;--ty:0px}

/* plaque */
.plq{position:relative;display:inline-flex;align-items:center;gap:16px;min-height:72px;padding:12px 22px 12px 14px;min-width:300px;text-decoration:none;cursor:pointer;border:0;font:inherit;
 clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 14px,100% calc(100% - 14px),calc(100% - 14px) 100%,14px 100%,0 calc(100% - 14px),0 14px);
 transform:translate(var(--tx),var(--ty));transition:transform .45s var(--spring),filter .3s,box-shadow .3s;isolation:isolate;overflow:hidden}
.plq::before{content:"";position:absolute;inset:0;z-index:-1}
.plq::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(160px 90px at var(--mx) var(--my),rgba(255,255,255,.55),transparent 70%);opacity:0;transition:opacity .3s;mix-blend-mode:soft-light}
.plq:hover::after,.plq.is-press::after{opacity:1}
.plq .rv{position:absolute;inset:7px;pointer-events:none;z-index:1;--rivet:rgba(60,56,50,.75)}
.plq .rv{background:
 radial-gradient(circle at 4px 4px,var(--rivet) 2.4px,transparent 3px),radial-gradient(circle at calc(100% - 4px) 4px,var(--rivet) 2.4px,transparent 3px),
 radial-gradient(circle at 4px calc(100% - 4px),var(--rivet) 2.4px,transparent 3px),radial-gradient(circle at calc(100% - 4px) calc(100% - 4px),var(--rivet) 2.4px,transparent 3px)}
.plq-ic{position:relative;z-index:1;flex:none;width:46px;height:46px;display:grid;place-items:center}
.plq-ic svg{width:34px;height:34px;fill:currentColor;transition:transform .5s var(--spring)}
.plq-t{position:relative;z-index:1;display:flex;flex-direction:column;gap:5px;flex:1;text-align:left}
.plq-t b{font:800 24px/1 var(--display);text-transform:uppercase;letter-spacing:.06em}
.plq-t small{font:400 10.5px/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;opacity:.82}
.plq-ar{position:relative;z-index:1;width:28px;height:2px;background:currentColor;transition:transform .4s var(--spring)}
.plq-ar::after{content:"";position:absolute;right:0;top:-5px;width:10px;height:10px;border:solid currentColor;border-width:2px 2px 0 0;transform:rotate(45deg)}
.plq:hover .plq-ar{transform:translateX(6px)}
.plq.is-press,.plq:active{transform:translate(var(--tx),calc(var(--ty) + 2px)) scale(.985)}

/* steel */
.plq.steel{color:#16202e;filter:drop-shadow(0 10px 18px rgba(0,0,0,.45))}
.plq.steel::before{background:
 linear-gradient(115deg,transparent 30%,rgba(255,255,255,.6) 45%,transparent 60%) calc(var(--sh,-120%)) 0/220% 100% no-repeat,
 repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 1px,rgba(0,0,0,.04) 1px 3px),
 linear-gradient(180deg,#f1ede4 0%,#cdc8bd 46%,#b7b2a7 54%,#ddd8ce 100%);
 box-shadow:inset 0 0 0 2px rgba(255,255,255,.55),inset 0 0 0 3px rgba(90,84,76,.45),inset 0 -6px 12px rgba(0,0,0,.18);transition:background-position .9s var(--ease)}
.plq.steel:hover::before,.plq.steel:focus-visible::before{--sh:120%;background-position:120% 0,0 0,0 0}
.plq.steel:hover .plq-ic svg{transform:rotate(-14deg) translateX(-2px)}
.plq.steel:hover .plq-ic svg{animation:hone .6s var(--ease)}
@keyframes hone{0%{transform:translateX(0) rotate(0)}40%{transform:translateX(6px) rotate(-10deg)}100%{transform:translateX(-2px) rotate(-14deg)}}

/* navy medallion */
.plq.navy{color:var(--cream);filter:drop-shadow(0 10px 18px rgba(0,0,0,.5))}
.plq.navy::before{background:radial-gradient(240px 120px at var(--mx) var(--my),rgba(74,134,197,.35),transparent 70%),repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px),linear-gradient(180deg,#1d3b62,#0f2442 60%,#0b1a2e);
 box-shadow:inset 0 0 0 2px var(--gold-2),inset 0 0 0 3px rgba(0,0,0,.4),inset 0 0 0 4px rgba(242,193,78,.25)}
.plq.navy .rv{--rivet:var(--gold)}
.plq.navy:hover::before{box-shadow:inset 0 0 0 2px var(--gold),inset 0 0 0 3px rgba(0,0,0,.4),inset 0 0 0 4px rgba(242,193,78,.5),inset 0 0 30px rgba(242,193,78,.18)}
.medal{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;color:var(--night);position:relative;
 background:radial-gradient(circle at 35% 30%,#ffe9a8,var(--gold) 45%,#a87b1c);box-shadow:0 0 0 2px #0b1a2e,0 0 0 3px var(--gold-2),0 4px 10px rgba(0,0,0,.5)}
.medal::before{content:"";position:absolute;inset:-14px;border-radius:50%;background:conic-gradient(from var(--a),transparent 0 70%,rgba(255,224,138,.7) 80%,transparent 90%);opacity:0;transition:opacity .3s;mix-blend-mode:screen;z-index:-1}
.plq.navy:hover .medal::before,.plq.navy.is-press .medal::before{opacity:1;animation:spin 2.2s linear infinite}
@keyframes spin{to{--a:360deg}}
.medal svg{width:30px;height:30px;fill:currentColor}
.medal .lamp-beam{opacity:.35;transition:opacity .3s}
.plq.navy:hover .lamp-beam{opacity:1;animation:blink 1.1s steps(2) infinite}
@keyframes blink{50%{opacity:.35}}
@media(max-width:480px){.plq{min-width:0;width:100%}.plq-t small{letter-spacing:.14em}.page-head .beams i,.hero .beams i{opacity:.55}}

/* outline / tertiary (Book online · Call us) */
.ob{--bd:rgba(201,154,91,.75);position:relative;display:inline-flex;align-items:center;gap:14px;min-height:60px;padding:10px 26px 10px 14px;border-radius:10px;text-decoration:none;cursor:pointer;
 background:radial-gradient(180px 80px at var(--mx) var(--my),rgba(242,193,78,.16),transparent 70%),linear-gradient(180deg,#2a2218,#17130e 60%,#120f0b);
 box-shadow:inset 0 0 0 1px var(--bd),inset 0 1px 0 rgba(255,230,180,.25),0 10px 24px rgba(0,0,0,.4);color:var(--cream);font:inherit;border:0;
 transform:translate(var(--tx),var(--ty));transition:transform .45s var(--spring),box-shadow .3s;isolation:isolate}
.ob::before{content:"";position:absolute;inset:-1px;border-radius:11px;padding:1.5px;background:conic-gradient(from var(--a),transparent 0 60%,#ffe08a 75%,var(--copper) 82%,transparent 92%);
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .3s;pointer-events:none}
.ob:hover::before,.ob:focus-visible::before,.ob.is-press::before{opacity:1;animation:spin 2.4s linear infinite}
.ob-ic{width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:8px;background:linear-gradient(180deg,rgba(242,193,78,.18),rgba(242,193,78,.05));box-shadow:inset 0 0 0 1px rgba(242,193,78,.35);color:var(--gold)}
.ob-ic svg{width:22px;height:22px;fill:currentColor}
.ob-ic .i-cal{fill:none}
.ob-t{font:700 19px/1 var(--sc);letter-spacing:.08em;white-space:nowrap}
.ob:hover .i-phone,.ob.is-press .i-phone{animation:ring .9s ease-in-out}
@keyframes ring{0%,100%{transform:rotate(0)}10%,30%,50%{transform:rotate(-16deg)}20%,40%,60%{transform:rotate(16deg)}70%{transform:rotate(0)}}
.i-cal .d{opacity:.35;transition:opacity .2s}
.ob:hover .i-cal .d{animation:days .9s forwards}
.ob:hover .i-cal .d2{animation-delay:.1s}.ob:hover .i-cal .d3{animation-delay:.2s}.ob:hover .i-cal .d4{animation-delay:.3s}.ob:hover .i-cal .d5{animation-delay:.4s;animation-name:pick}
@keyframes days{to{opacity:.6}}
@keyframes pick{to{opacity:1;fill:#ffe08a}}
.ob.is-press,.ob:active{transform:translate(var(--tx),calc(var(--ty) + 2px)) scale(.98)}
.ob.sm{min-height:48px;padding:6px 18px 6px 8px;gap:10px}
.ob.sm .ob-ic{width:32px;height:32px}.ob.sm .ob-ic svg{width:19px;height:19px}.ob.sm .ob-t{font-size:16px}


/* press ripple (touch + mouse) */
.ripple{position:absolute;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(255,236,170,.55),transparent 65%);transform:translate(-50%,-50%) scale(0);animation:rip .7s var(--ease) forwards;z-index:2;width:240px;height:240px;mix-blend-mode:screen}
@keyframes rip{to{transform:translate(-50%,-50%) scale(1.4);opacity:0}}

/* tiles */
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media(min-width:700px){.tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1100px){.tile-nav .tiles{grid-template-columns:repeat(6,minmax(0,1fr))}}
.tile{position:relative;display:block;text-decoration:none;cursor:pointer;border-radius:12px;transform:translate(var(--tx),var(--ty));transition:transform .45s var(--spring)}
.tile input{position:absolute;opacity:0;pointer-events:none}
.tile>span{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:112px;padding:16px 10px;border-radius:12px;text-align:center;
 background:radial-gradient(140px 90px at var(--mx) var(--my),rgba(74,134,197,.28),transparent 70%),linear-gradient(180deg,var(--harbor),#0c1d33);box-shadow:inset 0 0 0 1px rgba(154,164,177,.28);transition:box-shadow .3s,background .3s}
.tile svg{width:36px;height:36px;fill:currentColor;color:var(--gold);transition:transform .45s var(--spring)}
.tile b{font:600 14px/1.2 var(--body)}
.tile:hover>span{box-shadow:inset 0 0 0 1px var(--gold)}
.tile:hover svg{transform:translateY(-3px) rotate(-6deg) scale(1.08)}
.tile input:checked+span{background:linear-gradient(180deg,#ffd979,var(--gold) 60%,var(--gold-2));color:var(--night);box-shadow:inset 0 0 0 1px #fff0c0,0 8px 22px rgba(242,193,78,.25)}
.tile input:checked+span svg{color:var(--night)}
.tile input:focus-visible+span{outline:2px solid var(--gold);outline-offset:3px}

/* ---------- grit gauge ---------- */
.grit{padding-top:var(--s9);background:radial-gradient(900px 500px at 20% 30%,rgba(74,134,197,.12),transparent 60%),var(--night)}
.grit-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s7)}
@media(min-width:1000px){.grit-grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:var(--s8);align-items:center}.grit-head{grid-column:1/-1}}
.grit-head h2{margin-bottom:var(--s5)}
.grit-dial{display:flex;flex-direction:column;align-items:center;gap:var(--s5)}
.gauge{width:min(420px,100%);aspect-ratio:1;touch-action:none;cursor:grab;border-radius:50%;filter:drop-shadow(0 30px 50px rgba(0,0,0,.55))}
.gauge:active{cursor:grabbing}
.gauge:focus-visible{outline:3px solid var(--gold);outline-offset:6px}
.gauge svg{width:100%;height:100%;overflow:visible}
.screw{fill:#4a4a48;stroke:#d6d1c6;stroke-width:1}
.g-track{fill:none;stroke:rgba(154,164,177,.18);stroke-width:10}
.g-hot{fill:none;stroke:rgba(242,193,78,.35);stroke-width:10}
.g-fill{fill:none;stroke:var(--gold);stroke-width:10;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--t,0));}
.tk{stroke:rgba(244,239,228,.5);stroke-width:1.5}.tk.big{stroke:var(--cream);stroke-width:3}
.nums text{font:800 22px var(--display);fill:var(--cream);text-anchor:middle}.nums .hot{fill:var(--gold)}
.g-cap{font:400 11px var(--mono);letter-spacing:.24em;fill:var(--steel)}
.needle{transform-origin:200px 200px;transform:rotate(calc(-135deg + var(--t,0) * 270deg))}
.gauge.anim .needle{transition:transform .9s var(--spring)}
.needle path{fill:var(--gold);}
.needle circle{fill:#1e2f47;stroke:var(--gold);stroke-width:2}.needle .hub{fill:var(--gold)}
.g-read{font:900 52px var(--display);fill:var(--cream)}
.g-stage{font:400 12px var(--mono);letter-spacing:.3em;fill:var(--gold)}
.grit-read{display:flex;flex-direction:column;gap:var(--s5)}
.bench{width:100%;height:auto;border-radius:14px;background:radial-gradient(400px 200px at 40% 60%,rgba(74,134,197,.18),transparent),linear-gradient(180deg,#0f2138,#0a1626);box-shadow:inset 0 0 0 1px rgba(154,164,177,.2)}
.bench .h{fill:#2b1f17;stroke:#5a4330}.bench .rv2{fill:#c8b48a}
.bench .bev{fill:none;stroke:rgba(255,255,255,.35);stroke-width:1}
.bench .glint{fill:none;stroke:#fff3c4;stroke-width:5;stroke-linecap:round;opacity:calc(1 - var(--t,0) * 1.15)}
.bench .chips path{fill:#0f2138;opacity:calc(1 - var(--t,0) * 3)}
.paper path{transition:transform .8s var(--spring),opacity .4s}
.paper .p-a,.paper .p-b{fill:var(--paper);opacity:.92}
.paper .p-cut{stroke:var(--gold);stroke-width:3;stroke-linecap:round;opacity:0;stroke-dasharray:260;stroke-dashoffset:260}
.grit.proven .p-a{transform:translate(-6px,-14px) rotate(-3deg);transform-origin:352px 20px}
.grit.proven .p-b{transform:translate(10px,18px) rotate(4deg);transform-origin:560px 250px}
.grit.proven .p-cut{opacity:1;transition:stroke-dashoffset .5s var(--ease),opacity .2s;stroke-dashoffset:0}
.stages{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.stages li{padding:12px 8px 0;border-top:3px solid rgba(154,164,177,.25);transition:border-color .3s,opacity .3s;opacity:.45}
.stages li.on,.stages li.past{opacity:1;border-color:var(--gold)}
.stages li.past{opacity:.7}
.stages b{display:block;font:800 26px/1 var(--display);color:var(--cream)}
.stages strong{display:block;font:400 11px/1.4 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin:4px 0 6px}
.stages span{display:none;font-size:14px;color:#cdd4dd;line-height:1.45}
@media(min-width:700px){.stages span{display:block}}
.verdict{min-height:1.6em;font:400 1.3em/1.2 var(--brush);color:var(--gold);margin:0}
@media(max-width:699px){.stages{grid-template-columns:repeat(5,minmax(0,1fr))}.stages b{font-size:20px}}

/* ---------- trades ---------- */
.trades-sec{background:linear-gradient(180deg,var(--night),#0d1f36)}
.jobs{border-top:1px solid rgba(154,164,177,.25)}
.job{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s6);padding:var(--s8) 0;border-bottom:1px solid rgba(154,164,177,.25);scroll-margin-top:90px;align-items:center}
@media(min-width:900px){.job{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s9);padding:var(--s9) 0}.job.flip{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}.job.flip .job-img{order:2}}
.job-img{overflow:hidden;border-radius:4px;aspect-ratio:3/2;box-shadow:0 30px 60px rgba(0,0,0,.4)}
.job-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.job:hover .job-img img{transform:scale(1.04)}
.job-body h3{font-size:clamp(48px,5.4vw,84px);margin-bottom:var(--s3)}
.from{display:inline-block;font:400 clamp(24px,2.4vw,32px)/1 var(--brush);color:var(--gold);margin:0 0 var(--s5);transform:rotate(-2deg)}
.job-lede{font-size:1.08em;color:#dbe1e8;max-width:28em}
.ticks{list-style:none;margin:0 0 var(--s5);padding:0;display:grid;gap:8px;font-size:.94em}
.ticks li{display:flex;gap:10px;align-items:baseline}
.ticks li::before{content:"";flex:none;width:12px;height:2px;background:var(--gold);transform:translateY(-4px)}
.note{margin-top:var(--s7);color:var(--steel);font-size:.95em}

/* ---------- cream / why ---------- */
.cream{background:var(--cream);color:var(--ink)}
.cream .label{color:#7a5a12}
.cream .br{color:#2f5f96}
.wave{position:absolute;left:0;width:100%;height:70px;display:block}
.wave.top{top:-69px}
.wave .w1{fill:var(--cream)}.wave .w2{fill:none;stroke:var(--sea);stroke-width:5;stroke-linecap:round}.wave .w3{fill:none;stroke:var(--gold);stroke-width:3;stroke-linecap:round}
.why-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s8);align-items:center}
@media(min-width:1000px){.why-grid{grid-template-columns:minmax(0,4fr) minmax(0,7fr)}}
.seal{position:relative;width:min(380px,80%);aspect-ratio:1;margin-inline:auto}
.seal svg{position:absolute;inset:0;width:100%;height:100%}
@keyframes turn{to{transform:rotate(360deg)}}
.seal text{font:400 13px var(--mono);letter-spacing:.34em;fill:#1c2b4a}
.seal img{position:absolute;inset:14%;width:72%;height:72%;border-radius:50%;box-shadow:0 0 0 3px var(--gold),0 20px 40px rgba(28,43,74,.25);transition:transform .8s var(--spring)}
.seal:hover img{transform:rotate(-6deg) scale(1.03)}
.why h2{color:var(--ink);margin-bottom:var(--s7)}
.why h2 .br{font-size:.44em;margin-top:.3em}
.proof{list-style:none;margin:0;padding:0}
@media(min-width:700px){.proof li{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--s5);align-items:baseline}.proof span{margin:0}}
.proof li{padding:var(--s4) 0;border-top:2px solid rgba(28,43,74,.15)}
.proof b{display:block;font:800 28px/1.05 var(--display);text-transform:uppercase;letter-spacing:.02em}
.proof span{font-size:.95em;color:#3c4a63;margin-top:4px}

/* ---------- route ---------- */
.how{background:radial-gradient(800px 400px at 80% 0,rgba(74,134,197,.14),transparent 60%),var(--night)}
.route{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s6)}
@media(min-width:900px){.route{grid-template-columns:repeat(4,minmax(0,1fr));padding-top:110px}}
.route-line{display:none}
@media(min-width:900px){.route-line{display:block;position:absolute;left:0;top:0;width:100%;height:120px}}
.route-line path{fill:none;stroke:var(--gold);stroke-width:2.5;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--draw,1))}
.route li{position:relative;padding-left:44px;color:#cdd4dd}
@media(min-width:900px){.route li{padding-left:0}}
.route b{display:block;font:400 12px var(--mono);letter-spacing:.2em;color:var(--gold);margin-bottom:6px}
.route strong{display:block;font:800 30px/1 var(--display);text-transform:uppercase;color:var(--cream);margin-bottom:8px}
.buoy{position:absolute;left:0;top:2px;width:26px;height:26px;border-radius:50%;background:var(--harbor);box-shadow:inset 0 0 0 2px rgba(242,193,78,.4);transition:background .4s,box-shadow .4s}
@media(min-width:900px){.buoy{position:relative;display:block;margin-bottom:var(--s5)}}
.route li.lit .buoy{background:var(--gold);box-shadow:0 0 0 6px rgba(242,193,78,.18),0 0 24px rgba(242,193,78,.7)}

/* ---------- CTA band ---------- */
.cta-band{position:relative;overflow:hidden;isolation:isolate;padding:var(--s10) 0 200px;background:radial-gradient(600px 400px at 85% 10%,rgba(242,193,78,.12),transparent 70%),var(--deep)}
.cta-band .beams{--bx1:92%;--by1:0%;--bx2:100%;--by2:20%}
.cta-band .wrap{position:relative;z-index:2}
.cta-band h2{font-size:clamp(56px,9vw,140px);margin-bottom:var(--s7)}
.cta-band h2 .br{font-size:.4em}
.cta-row{display:flex;flex-wrap:wrap;gap:var(--s4);align-items:center}
.foot-wave{position:absolute;bottom:0;top:auto}
.foot-wave .w1{fill:var(--deep)}
.cta-band .foot-wave .w1{fill:#060e18}

/* ---------- story / about ---------- */
.story-grid,.split{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s7)}
@media(min-width:1000px){.story-grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}.split{grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:var(--s8)}}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4);margin:var(--s6) 0}
.facts div{border-top:2px solid var(--gold);padding-top:10px}
.facts dt{font:400 11px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.facts dd{margin:4px 0 0;font:800 22px/1.1 var(--display);text-transform:uppercase}
@media(max-width:600px){.facts{grid-template-columns:minmax(0,1fr)}}
.row{display:flex;flex-wrap:wrap;gap:var(--s4);align-items:center}

/* ---------- form ---------- */
form{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s5)}
@media(min-width:700px){form{grid-template-columns:repeat(2,minmax(0,1fr))}.wide{grid-column:1/-1}}
form label:not(.tile)>span,.flabel{display:block;font:400 12px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
fieldset{border:0;margin:0;padding:0;min-width:0}
input,textarea{width:100%;font:400 16px/1.4 var(--body);color:var(--cream);background:var(--harbor);border:1px solid rgba(154,164,177,.35);border-radius:10px;padding:14px 16px;transition:border-color .2s,box-shadow .2s}
input:focus,textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(242,193,78,.2)}
.qty{display:flex;align-items:stretch;border:1px solid rgba(154,164,177,.35);border-radius:10px;overflow:hidden;width:max-content;background:var(--harbor)}
.qty button{width:52px;background:none;border:0;color:var(--gold);font:600 24px var(--body);cursor:pointer;transition:background .2s}
.qty button:hover{background:rgba(242,193,78,.12)}
.qty button:active{transform:scale(.92)}
.qty input{width:64px;border:0;border-radius:0;text-align:center;-moz-appearance:textfield;font-weight:600}
.qty input::-webkit-inner-spin-button{-webkit-appearance:none}
#ok{margin-top:var(--s4);color:var(--gold)}
.direct h2{font-size:clamp(40px,4vw,60px);margin-bottom:var(--s5)}
.direct .pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s6)}
.direct .row{margin-bottom:var(--s4)}
.tile-nav{position:relative;z-index:2;margin-top:calc(-1 * var(--s7))}

/* ---------- footer ---------- */
.foot{background:#060e18;padding:var(--s8) 0 var(--s6);color:#c4ccd6}
.foot-top{display:flex;align-items:center;gap:var(--s5);margin-bottom:var(--s7)}
.foot-top img{width:84px;height:84px;border-radius:50%;box-shadow:0 0 0 2px var(--gold)}
.foot-mark{font:900 clamp(48px,8vw,110px)/.85 var(--display);text-transform:uppercase;color:var(--cream);margin:0}
.foot-mark .br{font-size:.32em}
.foot .cols{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s6);padding:var(--s6) 0;border-top:1px solid rgba(154,164,177,.2)}
@media(min-width:800px){.foot .cols{grid-template-columns:2fr 1fr 1fr}}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.foot a{text-decoration:none;transition:color .2s}.foot a:hover{color:var(--gold)}
.legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s3);font:400 12px var(--mono);letter-spacing:.12em;color:var(--steel);border-top:1px solid rgba(154,164,177,.2);padding-top:var(--s5);margin:0}

/* ---------- reveals ---------- */
.js [data-rv]{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js [data-rv].in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important}
 .js .rise>span{transform:none}.js [data-rv]{opacity:1;transform:none}
 .js .hero h1 .br,.js .page-head h1 .br{opacity:1}.brush path{stroke-dashoffset:0}
 .beams{display:none}
}


/* ---------- v5c: sell the call ---------- */
.hero{--cut:clamp(36px,6vw,96px);clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut)),0 100%);padding-bottom:calc(120px + var(--cut))}
.hero::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:var(--gold);clip-path:polygon(0 calc(100% - 5px),100% calc(100% - var(--cut) - 5px),100% calc(100% - var(--cut)),0 100%)}
.hero h1{font-size:clamp(70px,12vw,176px)}
.rise.gold>span{color:var(--gold)}
.hero .br{color:var(--cream)}
.hero h1 .br{font-size:.3em}
.hero-cta{margin-bottom:var(--s5)}
.price-strip{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px var(--s6);font:400 13px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#cdd4dd}
.price-strip li{display:flex;align-items:baseline;gap:8px}
.price-strip b{font:800 34px/1 var(--display);letter-spacing:.01em;color:var(--gold)}
.price-strip .from-note{color:var(--steel);align-self:center}
.price-strip li+li:not(.from-note){position:relative;padding-left:var(--s6)}
.price-strip li+li:not(.from-note)::before{content:"";position:absolute;left:0;top:2px;width:2px;height:30px;background:var(--gold);transform:skewX(-20deg);opacity:.7}
.wave.top{top:-69px}
.wave .w1{fill:var(--cream)}.wave .w3{fill:none;stroke:var(--gold);stroke-width:5;stroke-linecap:butt;vector-effect:non-scaling-stroke}
.foot-wave .w1{fill:#060e18}.cta-band .foot-wave .w1{fill:#060e18}
.callbar{display:none}
@media(max-width:899px){
 body{padding-bottom:72px}
 .callbar{position:fixed;left:0;right:0;bottom:0;z-index:45;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(242,193,78,.5);padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -10px 30px rgba(0,0,0,.45)}
 .cb{display:flex;align-items:center;justify-content:center;gap:10px;min-height:64px;text-decoration:none;font:800 22px/1 var(--display);letter-spacing:.06em;text-transform:uppercase}
 .cb svg{width:24px;height:24px}
 .cb.call{background:linear-gradient(180deg,#ffd979,var(--gold) 60%,var(--gold-2));color:var(--night)}
 .cb.call svg{fill:var(--night)}
 .cb.book{background:#0b1a2e;color:var(--cream)}
 .cb.book svg{color:var(--gold)}
 body:has(#nav.open) .callbar{display:none}
 .price-strip b{font-size:28px}
 .price-strip{gap:10px var(--s5)}
 .price-strip li+li:not(.from-note){padding-left:var(--s5)}
}
@media(max-width:899px){.price-strip li+li:not(.from-note){padding-left:0}.price-strip li+li:not(.from-note)::before{display:none}.price-strip .from-note{flex-basis:100%}}

/* =========================================================
   v5d — real plate buttons, bench photo, no flat blue
   ========================================================= */
:root{--char:#0a0d12;--char-2:#10151c;
 --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
body{background:var(--char)}
.trades-sec,.how,.sec.ink{background:var(--char)}
.trades-sec{background:radial-gradient(900px 520px at 85% 0%,rgba(201,154,91,.10),transparent 60%),var(--char)}
.trades-sec::before,.how::after,.cta-band::after{content:"";position:absolute;inset:0;background:var(--grain);opacity:.05;pointer-events:none;z-index:0;mix-blend-mode:screen}
.trades-sec .wrap{position:relative;z-index:1}
.job-img{border-radius:2px;box-shadow:0 0 0 1px rgba(201,154,91,.35),0 30px 60px rgba(0,0,0,.55)}
.cta-band{background:radial-gradient(700px 420px at 85% 10%,rgba(242,193,78,.14),transparent 70%),#070a0f}
.foot,.cta-band .foot-wave .w1,.foot-wave .w1{background:#05080c;fill:#05080c}

/* ---- plaque buttons: real plates, 9-sliced so any size works ---- */
.plq{--bw:24px;border:var(--bw) solid transparent;padding:0 6px 0 0;min-height:96px;min-width:320px;background:none;
 clip-path:polygon(9px 0,calc(100% - 9px) 0,100% 9px,100% calc(100% - 9px),calc(100% - 9px) 100%,9px 100%,0 calc(100% - 9px),0 9px);
 filter:drop-shadow(0 12px 16px rgba(0,0,0,.55));overflow:visible;transition:transform .45s var(--spring),filter .3s}
.plq.steel{border-image:url(img/plate-steel.webp) 90 fill/var(--bw) stretch;color:#10161e}
.plq.navy{border-image:url(img/plate-navy.webp) 90 fill/var(--bw) stretch;color:var(--cream)}
.plq::before{inset:calc(-1 * var(--bw));z-index:0;box-shadow:none!important;background:none!important}
.plq.steel::before{background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 48%,transparent 62%) var(--sh,-130%) 0/260% 100% no-repeat!important;mix-blend-mode:soft-light;transition:background-position .9s var(--ease)}
.plq.steel:hover::before{--sh:130%;background-position:130% 0!important}
.plq::after{inset:calc(-1 * var(--bw))}
.plq .plq-t b{font-size:26px;letter-spacing:.05em}
.plq.steel .plq-t b{text-shadow:0 1px 0 rgba(255,255,255,.35)}
.plq.steel .plq-t small{opacity:1;color:#1b2430;font-weight:500;letter-spacing:.2em}
.plq.steel .plq-ar,.plq.steel .plq-ar::after{border-color:#10161e}
.plq.steel .plq-ar{background:#10161e}
.plq.navy .plq-t b{text-shadow:0 2px 6px rgba(0,0,0,.6)}
.plq.navy .plq-t small{color:#e8d9a8;opacity:1}
.plq.navy:hover{filter:drop-shadow(0 12px 16px rgba(0,0,0,.55)) drop-shadow(0 0 14px rgba(242,193,78,.35))}
.plq.steel:hover{filter:drop-shadow(0 12px 16px rgba(0,0,0,.55)) drop-shadow(0 0 12px rgba(255,255,255,.18))}
@media(max-width:480px){.plq{min-width:0;min-height:88px;--bw:22px}.plq .plq-t b{font-size:23px}}

/* outline buttons on a dark bronze plate */
.ob{--bw:16px;border:var(--bw) solid transparent;border-image:url(img/plate-bronze.webp) 80 fill/var(--bw) stretch;background:none;border-radius:0;box-shadow:none;min-height:70px;padding:0 10px 0 0;gap:12px;
 filter:drop-shadow(0 10px 14px rgba(0,0,0,.5));transition:transform .45s var(--spring),filter .3s}
.ob::before{inset:calc(-1 * var(--bw));border-radius:0;padding:0;-webkit-mask:none;mask:none;background:radial-gradient(180px 90px at var(--mx) var(--my),rgba(255,214,140,.38),transparent 70%);opacity:0;animation:none!important;transition:opacity .3s}
.ob:hover::before,.ob.is-press::before,.ob:focus-visible::before{opacity:1}
.ob:hover{filter:drop-shadow(0 10px 14px rgba(0,0,0,.5)) drop-shadow(0 0 10px rgba(201,154,91,.5))}
.ob-ic{width:34px;height:34px;background:none;box-shadow:none;color:#e3b478}
.ob-ic svg{width:26px;height:26px}
.ob-t{font:800 22px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--cream)}
.ob.sm{--bw:12px;border-image:url(img/plate-bronze.webp) 80 fill/var(--bw) stretch;min-height:58px;padding:0 6px 0 0}
.ob.sm .ob-ic{width:28px;height:28px}.ob.sm .ob-ic svg{width:22px;height:22px}.ob.sm .ob-t{font-size:18px}
.ob:focus-visible,.plq:focus-visible{outline-offset:6px}

/* ---- Try it yourself: workbench photo + live edge macro ---- */
.grit{position:relative;overflow:hidden;isolation:isolate;background:var(--char);padding:var(--s9) 0}
.grit-bg{position:absolute;inset:0;z-index:-2}
.grit-bg img{width:100%;height:100%;object-fit:cover;object-position:72% 50%}
.grit::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(10,13,18,.92) 0%,rgba(10,13,18,.78) 45%,rgba(10,13,18,.35) 100%),linear-gradient(0deg,var(--char),transparent 25%,transparent 75%,var(--char))}
.grit-head h2{font-size:clamp(52px,7.4vw,112px)}
.grit-head .br{font-size:.34em;margin-top:.22em}
.gauge{filter:drop-shadow(0 30px 40px rgba(0,0,0,.7))}
.edge{position:relative;margin:0;aspect-ratio:3/2;overflow:hidden;border-radius:2px;box-shadow:0 0 0 1px rgba(201,154,91,.45),0 30px 60px rgba(0,0,0,.6);background:#000}
.edge img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.e-sharp{clip-path:inset(0 calc((1 - var(--t,0)) * 100%) 0 0)}
.gauge.anim~*,.grit .e-sharp{transition:clip-path .35s var(--ease)}
.grit.dragging .e-sharp,.grit.dragging .e-line{transition:none}
.e-line{position:absolute;top:0;bottom:0;left:calc(var(--t,0) * 100%);width:3px;margin-left:-1.5px;background:var(--gold);transition:left .35s var(--ease);opacity:calc(.2 + var(--t,0) * 4)}
.e-line::after{content:"";position:absolute;top:50%;left:50%;width:34px;height:34px;margin:-17px;border-radius:50%;background:var(--gold) center/18px no-repeat url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18'><path d='M6 3 2 9l4 6M12 3l4 6-4 6' fill='none' stroke='%230a0d12' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>")}
.e-tag{position:absolute;top:12px;font:400 11px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;padding:7px 10px;background:rgba(10,13,18,.78);color:var(--cream)}
.e-tag.a{left:12px;color:var(--gold)}.e-tag.b{right:12px}
.grit.proven .edge{box-shadow:0 0 0 2px var(--gold),0 30px 60px rgba(0,0,0,.6)}
.grit-read{gap:var(--s5)}
.stages li{background:rgba(10,13,18,.55)}

/* how it works over the shoreline */
.how{position:relative;overflow:hidden;isolation:isolate}
.how-bg{position:absolute;inset:0;z-index:-2}
.how-bg img{width:100%;height:100%;object-fit:cover;transform:scaleX(-1);filter:blur(3px) brightness(.5) saturate(.8)}
.how::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,var(--char) 0%,rgba(10,13,18,.55) 35%,rgba(10,13,18,.55) 70%,var(--char) 100%)}
.stages li{background:rgba(10,13,18,.82);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding-bottom:12px}
.stages span{color:#dfe4ea}
.how-bg img{filter:blur(2px) brightness(.8) saturate(.9)}
.how::before{background:linear-gradient(0deg,var(--char) 0%,rgba(10,13,18,.35) 30%,rgba(10,13,18,.35) 72%,var(--char) 100%)}
@media(min-width:900px){.route-line{top:122px;height:4px}}
.route-line path{stroke-width:2;stroke-dasharray:1;vector-effect:non-scaling-stroke}
.ob.lg{--bw:20px;border-image:url(img/plate-bronze.webp) 80 fill/var(--bw) stretch;min-height:96px;min-width:300px;padding:0 18px 0 6px;gap:14px}
.ob.lg .ob-ic{width:46px;height:46px}.ob.lg .ob-ic svg{width:34px;height:34px}.ob.lg .ob-t{font-size:26px}
.grit-dial{gap:0}
@media(max-width:480px){.ob.lg{min-width:0;width:100%;min-height:88px}}

/* v5e: no dial, no bottom bar. The picture is the control. */
.callbar{display:none!important}
@media(max-width:899px){body{padding-bottom:0}}
.grit-grid{grid-template-columns:minmax(0,1fr)!important}
.grit-read{max-width:1100px}
.edge{aspect-ratio:16/9;cursor:ew-resize;touch-action:pan-y;user-select:none;-webkit-user-select:none}
@media(max-width:700px){.edge{aspect-ratio:4/3}}
.edge:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
.edge img{pointer-events:none;-webkit-user-drag:none}
.e-sharp,.e-line{transition:none}
.e-read{position:absolute;left:16px;bottom:14px;display:flex;align-items:baseline;gap:14px;padding:10px 16px;background:rgba(10,13,18,.78);pointer-events:none}
.e-read .g-read{font:900 clamp(40px,6vw,72px)/1 var(--display);color:var(--cream)}
.e-read .g-stage{font:400 12px/1 var(--mono);letter-spacing:.3em;color:var(--gold)}
.e-hint{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;display:flex;align-items:center;gap:12px;padding:12px 20px;background:rgba(10,13,18,.82);color:var(--cream);font:800 22px/1 var(--display);letter-spacing:.1em;text-transform:uppercase;pointer-events:none;transition:opacity .4s}
.e-hint i{width:36px;height:2px;background:var(--gold);position:relative;animation:nudge 1.6s ease-in-out infinite}
.e-hint i::after{content:"";position:absolute;right:0;top:-5px;width:10px;height:10px;border:solid var(--gold);border-width:2px 2px 0 0;transform:rotate(45deg)}
@keyframes nudge{50%{transform:translateX(10px)}}
.grit.touched .e-hint{opacity:0}
.e-tag.b{right:12px}
.grit-head h2{font-size:clamp(48px,6.6vw,100px)}

/* v5f: dull left, sharp right; pull the sharp edge across. No numbers. */
.e-sharp{clip-path:inset(0 0 0 calc((1 - var(--t,0)) * 100%))}
.e-line{left:calc((1 - var(--t,0)) * 100%);opacity:calc(.25 + var(--t,0) * 4)}
.e-tag.a{left:12px;right:auto;color:var(--cream)}
.e-tag.b{right:12px;left:auto;color:var(--gold)}
.e-read,.stages{display:none!important}
.e-hint i{transform:scaleX(-1);animation-name:nudgeL}
@keyframes nudgeL{50%{transform:scaleX(-1) translateX(10px)}}
.e-done{position:absolute;left:50%;bottom:18px;transform:translate(-50%,12px);margin:0;display:flex;align-items:center;gap:12px;padding:14px 26px;background:linear-gradient(180deg,#ffd979,var(--gold) 60%,var(--gold-2));color:var(--night);font:800 clamp(22px,3vw,34px)/1 var(--display);letter-spacing:.08em;text-transform:uppercase;opacity:0;pointer-events:none;transition:opacity .35s,transform .45s var(--spring);clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px)}
.e-done i{width:22px;height:12px;border:solid var(--night);border-width:0 0 4px 4px;transform:rotate(-45deg) translateY(-3px)}
.grit.proven .e-done{opacity:1;transform:translate(-50%,0)}
.verdict{margin-top:var(--s4)}

/* mobile: both hero buttons share one row */
@media(max-width:700px){
 .hero-cta{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}
 .hero-cta .plq,.hero-cta .ob{min-width:0;width:100%;min-height:76px;--bw:16px;padding:0 4px 0 0;gap:6px;justify-content:center}
 .hero-cta .plq-t small,.hero-cta .plq-ar{display:none}
 .hero-cta .plq-t b{font-size:19px;letter-spacing:.03em;white-space:nowrap}
 .hero-cta .plq-ic{width:30px;height:30px}.hero-cta .plq-ic svg{width:24px;height:24px}
 .hero-cta .ob.lg{border-image:url(img/plate-bronze.webp) 80 fill/var(--bw) stretch}
 .hero-cta .ob-ic{width:28px;height:28px}.hero-cta .ob-ic svg{width:22px;height:22px}
 .hero-cta .ob-t{font-size:19px;letter-spacing:.03em;white-space:nowrap}
 .hero-cta .plq-t{flex:none}
}
@media(max-width:700px){
 .hero-cta .plq-t b,.hero-cta .ob-t{font-size:17px}
 .hero-cta .ob.lg{padding-right:10px}
 .e-done{white-space:nowrap;font-size:22px;padding:12px 20px}
}
@media(max-width:700px){.hero-cta .ob.lg .ob-t{font-size:17px;letter-spacing:.03em}.hero-cta .ob.lg .ob-ic{width:28px;height:28px}.hero-cta .ob.lg .ob-ic svg{width:22px;height:22px}}

/* v5g: request form is the booking path */
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
#ok.bad{color:#ff9d8a}
#ok:empty{display:none}
.form-end{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3)}
.form-end button:disabled{opacity:.6;pointer-events:none}
.how-list{list-style:none;margin:0 0 var(--s5);padding:0;display:grid;gap:var(--s4)}
.how-list li{display:grid;grid-template-columns:44px 1fr;align-items:baseline;border-top:1px solid rgba(154,164,177,.25);padding-top:var(--s3)}
.how-list b{font:400 12px var(--mono);letter-spacing:.2em;color:var(--gold)}
.sent-msg h2{font-size:clamp(48px,6vw,84px);margin-bottom:var(--s4)}
form.sent{display:block}
@media(max-width:700px){.hero-cta .plq-t b{font-size:16px;letter-spacing:.02em}.hero-cta .plq-ic{width:26px}.form-end .plq-t small{letter-spacing:.1em;white-space:nowrap;font-size:9.5px}.form-end .plq{min-width:0;width:100%}}

/* v5h: flat, set-in-type buttons (the generated plates read as AI) */
.plq,.ob{border:0!important;border-image:none!important;background:none!important;filter:none!important;box-shadow:none!important;border-radius:3px;min-height:56px!important;min-width:0!important;padding:0 28px!important;gap:0!important;justify-content:center;transition:background-color .2s,color .2s,border-color .2s,transform .15s}
.plq::before,.plq::after,.ob::before,.ob::after,.plq .rv,.plq-ic,.ob-ic,.plq-t small,.plq-ar,.ripple,.plq .medal{display:none!important}
.plq-t{flex:none;display:block}
.plq-t b,.ob-t{font:800 19px/1 var(--display)!important;letter-spacing:.12em!important;text-transform:uppercase;text-shadow:none!important;white-space:nowrap}
.plq.steel,.plq.navy{background:var(--gold)!important;color:var(--night)!important}
.plq.steel:hover,.plq.navy:hover,.plq:focus-visible{background:#ffd979!important}
.ob{border:1.5px solid rgba(244,239,228,.7)!important;color:var(--cream)!important;background:transparent!important}
.ob:hover,.ob:focus-visible{background:var(--cream)!important;color:var(--night)!important;border-color:var(--cream)!important}
.ob.sm{min-height:44px!important;padding:0 20px!important}.ob.sm .ob-t{font-size:15px!important}
.ob.nav-book{min-height:40px!important;padding:0 16px!important}
.plq:active,.ob:active,.plq.is-press,.ob.is-press{transform:translateY(1px)!important}
.hero-cta,.cta-row{gap:12px}
.form-end .plq{min-height:60px!important}

/* trades: tabs + swipe on phones */
.trade-tabs,.swipe-hint{display:none}
@media(max-width:700px){
 .trade-tabs{display:flex;gap:0;margin:0 0 var(--s4);border-bottom:1px solid rgba(154,164,177,.3)}
 .trade-tabs button{flex:1;appearance:none;background:none;border:0;border-bottom:3px solid transparent;margin-bottom:-1px;padding:12px 4px;color:var(--steel);font:800 15px/1.1 var(--display);letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
 .trade-tabs button[aria-selected=true]{color:var(--gold);border-bottom-color:var(--gold)}
 .jobs[data-swipe]{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;border-top:0;overscroll-behavior-x:contain}
 .jobs[data-swipe]::-webkit-scrollbar{display:none}
 .jobs[data-swipe] .job{flex:0 0 100%;min-width:0;scroll-snap-align:start;scroll-snap-stop:always;padding:var(--s5) 0;border-bottom:0;gap:var(--s5)}
 .swipe-hint{display:block;margin:var(--s3) 0 0;text-align:center;font:400 11px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--steel)}
}
.plq,.ob{clip-path:none!important;-webkit-mask:none!important;mask:none!important}
@media(max-width:700px){
 .hero-cta .plq,.hero-cta .ob{padding:0 8px!important;min-height:54px!important}
 .hero-cta .plq-t b,.hero-cta .ob-t{font-size:15px!important;letter-spacing:.08em!important}
}

/* v5i: photo tiles for "What needs sharpening" */
.tile.photo>span{display:block;position:relative;min-height:0;padding:0;overflow:hidden;border-radius:6px;aspect-ratio:4/3;background:var(--deep);box-shadow:0 0 0 1px rgba(154,164,177,.3)}
.tile.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease),filter .3s;filter:saturate(.9) brightness(.8)}
.tile.photo b{position:absolute;left:0;right:0;bottom:0;padding:26px 12px 10px;text-align:left;font:800 15px/1.1 var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--cream);background:linear-gradient(0deg,rgba(7,17,30,.92),transparent)}
.tile.photo:hover img{transform:scale(1.05);filter:saturate(1) brightness(.95)}
.tile.photo input:checked+span{background:var(--deep);color:var(--cream);box-shadow:0 0 0 3px var(--gold)}
.tile.photo input:checked+span img{filter:none}
.tile.photo input:checked+span b{color:var(--gold)}
.tile.photo input:checked+span::after{content:"";position:absolute;top:10px;right:10px;width:26px;height:26px;border-radius:50%;background:var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b1a2e' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/16px no-repeat}

/* v5j: label colour follows the button on hover/press (was cream-on-cream) */
.ob .ob-t{color:inherit!important}
.ob:hover,.ob:focus-visible,.ob.is-press,.ob:active{background:var(--cream)!important;color:var(--night)!important}
@media(hover:none){.ob:hover,.ob:focus:not(:focus-visible){background:transparent!important;color:var(--cream)!important;border-color:rgba(244,239,228,.7)!important}.ob:active,.ob.is-press{background:var(--cream)!important;color:var(--night)!important}}

/* v5l: the CSS-drawn grey light wedges looked fake over the photo (which has its own lamp glow). Removed. */
.beams{display:none!important}

/* v5n: buttons drawn to match the blade-angle section edges. Cut corners, bevelled edge, a glint that runs along the blade on hover. */
.plq,.ob{--c:14px;position:relative;isolation:isolate;overflow:hidden;border-radius:0!important;
 clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,var(--c) 100%,0 calc(100% - var(--c)))!important;
 min-height:58px!important;padding:0 30px!important;transition:transform .15s,color .2s,background-color .2s}
.plq.steel,.plq.navy{background:linear-gradient(180deg,#f8d06a 0%,#f2c14e 48%,#dfa930 100%)!important;color:#0b1a2e!important;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -3px 0 rgba(120,78,6,.45)!important}
.plq.steel:hover,.plq.navy:hover,.plq:focus-visible{background:linear-gradient(180deg,#ffdc82 0%,#f7cb5c 48%,#e6b238 100%)!important}
.plq::after,.ob::after{content:""!important;display:block!important;position:absolute;top:0;bottom:0;left:-40%;width:28%;z-index:1;pointer-events:none;
 background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent)!important;transform:skewX(-20deg) translateX(0);opacity:0;mix-blend-mode:soft-light;filter:none}
.plq:hover::after,.ob:hover::after,.plq:focus-visible::after{opacity:1;animation:glint .7s ease-out}
@keyframes glint{from{left:-40%}to{left:130%}}
.plq-t,.ob-t{position:relative;z-index:2}
.plq .plq-ar{display:block!important;position:relative;z-index:2;width:18px;height:2px;margin-left:14px;background:currentColor;transition:transform .3s}
.plq .plq-ar::after{display:block!important;content:"";position:absolute;right:0;top:-4px;width:8px;height:8px;border:solid currentColor;border-width:2px 2px 0 0;transform:rotate(45deg);background:none}
.plq:hover .plq-ar{transform:translateX(5px)}
/* outline: cream rim, navy face, both cut at the same corners */
.ob{background:#f4efe4!important;border:0!important;color:#f4efe4!important;box-shadow:none!important}
.ob::before{content:""!important;display:block!important;position:absolute;inset:1.5px;z-index:0;background:#0b1a2e!important;opacity:1!important;
 clip-path:polygon(0 0,calc(100% - 12.9px) 0,100% 12.9px,100% 100%,12.9px 100%,0 calc(100% - 12.9px));transition:opacity .2s;animation:none!important;-webkit-mask:none;mask:none;border-radius:0;padding:0}
.ob:hover::before,.ob:focus-visible::before,.ob:active::before,.ob.is-press::before{opacity:0!important}
.ob:hover,.ob:focus-visible,.ob:active,.ob.is-press{background:#f4efe4!important;color:#0b1a2e!important}
.ob::after{z-index:1}
.ob.sm{--c:10px;min-height:46px!important;padding:0 20px!important}
.ob.sm::before{clip-path:polygon(0 0,calc(100% - 8.9px) 0,100% 8.9px,100% 100%,8.9px 100%,0 calc(100% - 8.9px))}
.ob.nav-book{min-height:40px!important;padding:0 16px!important;--c:8px}
.ob.nav-book::before{clip-path:polygon(0 0,calc(100% - 6.9px) 0,100% 6.9px,100% 100%,6.9px 100%,0 calc(100% - 6.9px))}
@media(hover:none){.ob:hover::before{opacity:1!important}.ob:hover{color:#f4efe4!important;background:#f4efe4!important}.ob:active::before{opacity:0!important}.ob:active{color:#0b1a2e!important}.plq:hover::after,.ob:hover::after{opacity:0;animation:none}}
@media(max-width:700px){.hero-cta .plq-ar{display:none!important}.plq,.ob{--c:12px}.hero-cta .ob::before{clip-path:polygon(0 0,calc(100% - 10.9px) 0,100% 10.9px,100% 100%,10.9px 100%,0 calc(100% - 10.9px))}}
@media(prefers-reduced-motion:reduce){.plq::after,.ob::after{display:none!important}}

/* v5o: calmer phone hero. One idea per line, the towers get room above the headline. */
.lede-m{display:none}
@media(max-width:700px){
 .hero .hero-label,.hero .lede-d{display:none}
 .hero .lede-m{display:block;margin:0 0 var(--s5);font-size:1rem}
 .hero{padding:96px 0 calc(48px + var(--cut))}
 .hero-bg{object-position:100% 50%}
 .hero h1{margin-bottom:var(--s5)}
 .hero .hero-cta{margin-bottom:var(--s5)}
 .price-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:4px 10px;font-size:10px;letter-spacing:.1em}
 .price-strip li{flex-direction:column;align-items:flex-start;gap:4px}
 .price-strip li+li:not(.from-note){padding-left:0}
 .price-strip b{font-size:26px}
 .price-strip .from-note{grid-column:1/-1;font-size:10px;opacity:.8}
}

/* v5p: county line under the wordmark */
.brand em{display:block;font:400 9.5px/1 var(--mono);font-style:normal;letter-spacing:.24em;text-transform:uppercase;color:var(--steel);margin-top:5px;white-space:nowrap}
@media(max-width:700px){.brand em{font-size:8.5px;letter-spacing:.2em}}

/* v5q: add-ons and pricing policy */
.addons{background:var(--deep)}
.addon-grid{display:grid;gap:var(--s7);grid-template-columns:minmax(0,1fr)}
@media(min-width:900px){.addon-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s9);align-items:start}}
.addon-list{margin:0;border-top:1px solid rgba(154,164,177,.3)}
.addon-list>div{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s4);padding:18px 0;border-bottom:1px solid rgba(154,164,177,.3)}
.addon-list dt{font:800 22px/1.1 var(--display);letter-spacing:.04em;text-transform:uppercase}
.addon-list dt small{display:block;margin-top:6px;font:400 11px var(--mono);letter-spacing:.16em;color:var(--steel)}
.addon-list dd{margin:0;font:800 24px/1 var(--display);color:var(--gold);white-space:nowrap;text-align:right}
.addon-list>div:last-child dd{font:400 12px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;white-space:normal;max-width:9em}
.policy h3{font-size:clamp(30px,3.4vw,44px);margin-bottom:var(--s4)}
@media(max-width:700px){.addon-list dt{font-size:18px}.addon-list dd{font-size:20px}}
.addon-list dd span{display:block}
.addon-list dd span+span{margin-top:6px}

/* ---------- v5s: price card (kept from the v6 comp) ---------- */
@font-face{font-family:"Fraunces";src:url(fonts/fraunces.woff2) format("woff2");font-weight:100 900;font-display:swap}
.addons.cream{background:var(--cream);color:var(--ink)}
.addons .ticks li::before{background:#7a5a12}
.pcard{position:relative;border:1px solid rgba(11,26,46,.28);padding:44px 52px 36px;background:#f7f3ea}
.pcard::before{content:"";position:absolute;inset:6px;border:1px solid rgba(11,26,46,.13);pointer-events:none}
.pc-h{font:500 11px/1 var(--body);letter-spacing:.26em;text-transform:uppercase;color:#7a5a12;margin:0 0 6px}
.pc-list+.pc-h{margin-top:36px}
.pc-list{margin:0}
.pc-list>div{display:flex;align-items:baseline;gap:12px;padding:15px 0;border-bottom:1px solid rgba(11,26,46,.12)}
.pc-list>div:last-child{border-bottom:0}
.pc-list>div::after{content:"";order:1;flex:1;min-width:24px;border-bottom:1px dotted rgba(11,26,46,.4);transform:translateY(-5px)}
.pc-list dt{order:0;font:500 16px/1.3 var(--body);color:var(--ink)}
.pc-list dt small{display:block;margin-top:3px;font:400 13px/1.3 var(--body);color:#56606e;letter-spacing:0;text-transform:none}
.pc-list dd{order:2;margin:0;font:400 24px/1.1 "Fraunces",Georgia,serif;color:var(--ink);white-space:nowrap;text-align:right}
.pc-list dd span{display:block;font-size:19px}.pc-list dd span+span{margin-top:6px}
.pc-list dd em{font:italic 400 17px/1.2 "Fraunces",Georgia,serif;white-space:normal;display:block;max-width:9em}
.addons .policy h3{color:var(--ink)}
@media(max-width:700px){.pcard{padding:28px 20px 22px}.pc-list dt{font-size:15px}.pc-list dd{font-size:21px}.pc-list dd span{font-size:16px}.pc-list>div::after{min-width:12px}}
@media(max-width:700px){.pc-list>div:has(em){flex-wrap:wrap}.pc-list>div:has(em)::after{display:none}.pc-list>div:has(em) dd{flex-basis:100%;text-align:left;margin-top:6px}.pc-list dd em{max-width:none}}

/* ---------- v5s: sharpen slider fixes ---------- */
/* image and handle move together: same timing for keyboard, none while dragging */
.grit .e-sharp,.grit .e-line{transition:clip-path .25s var(--ease),left .25s var(--ease)}
.grit.dragging .e-sharp,.grit.dragging .e-line{transition:none}
.e-sharp{will-change:clip-path}
.e-line{opacity:1;width:2px;margin-left:-1px;box-shadow:0 0 12px rgba(242,193,78,.6)}
.e-line::after{width:44px;height:44px;margin:-22px;box-shadow:0 4px 14px rgba(0,0,0,.5)}
.edge{touch-action:pan-y pinch-zoom;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}
.e-done{bottom:auto;top:18px}
.grit.proven .e-tag{opacity:0}
.e-tag{transition:opacity .3s}

/* ---------- v5s: home trade teaser (full detail lives on Services) ---------- */
.teaser{list-style:none;margin:0;padding:0;display:grid;gap:var(--s5);grid-template-columns:minmax(0,1fr)}
@media(min-width:800px){.teaser{grid-template-columns:repeat(3,minmax(0,1fr))}}
.teaser a{display:flex;flex-direction:column;gap:8px;height:100%;text-decoration:none;color:var(--cream);padding-bottom:var(--s4);border-bottom:1px solid rgba(154,164,177,.3)}
.tz-img{display:block;aspect-ratio:4/3;overflow:hidden;margin-bottom:var(--s3)}
.tz-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.teaser a:hover .tz-img img,.teaser a:focus-visible .tz-img img{transform:scale(1.04)}
.teaser .label{margin:0}
.teaser b{font:800 clamp(30px,3vw,40px)/1 var(--display);text-transform:uppercase;letter-spacing:.01em}
.teaser .from{font:400 12px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.tz-go{margin-top:auto;padding-top:var(--s3);font:500 13px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--cream)}
.tz-go::after{content:" \2192";color:var(--gold);display:inline-block;transition:transform .3s var(--ease)}
.teaser a:hover .tz-go::after,.teaser a:active .tz-go::after{transform:translateX(6px)}
@media(max-width:799px){.tz-img{aspect-ratio:16/9}}

/* ---------- v5t: slider starts dull, swipe RIGHT to sharpen ---------- */
.e-sharp{clip-path:inset(0 calc((1 - var(--t,0)) * 100%) 0 0)}
.e-line{left:calc(var(--t,0) * 100%)}
.e-tag.a{left:auto;right:12px;color:var(--cream)}
.e-tag.b{right:auto;left:12px;color:var(--gold)}
.grit:not(.touched) .e-tag.b{opacity:0}
.e-hint i{transform:none;animation-name:nudge}

/* v6: legal pages + footer credit */
.doc{max-width:760px}
.doc-date{font:400 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--steel);margin:0 0 var(--s5)}
.doc h2{font:800 clamp(24px,3vw,32px)/1.1 var(--display);text-transform:uppercase;letter-spacing:.02em;margin:var(--s6) 0 var(--s3)}
.doc p{margin:0 0 var(--s3);line-height:1.7}
.doc a{color:var(--gold);text-underline-offset:3px}
.legal a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(154,164,177,.5)}
.legal a{white-space:nowrap}

/* v6: hero text + header logo sit further left on desktop */
@media(min-width:1000px){header.site .wrap,.hero .wrap{width:min(1320px,100% - 120px)}}

.has-err input:not([type=checkbox]),.has-err textarea{border-color:#ff9d8a;background:rgba(255,157,138,.08);box-shadow:0 0 0 3px rgba(255,157,138,.22)}
.has-err>span:first-child,.has-err>.flabel,fieldset.has-err>legend{color:#ff9d8a}
.fmsg{margin:8px 0 0;font:500 14px/1.4 var(--body);color:#ff9d8a}
.fmsg::before{content:"! ";font-weight:700}