/* Pentacle v5 · dark-studio layer, loaded after v5.css (which is the v4 system unchanged).
   The art is now solid studio objects (graphite, satin aluminium, rubber, one sky-blue part each), so the filament-only
   effects are off and light becomes subtle: a soft warm key light that follows the pointer, a faint sweep on arrival. */

/* no grain anywhere (owner) */
.stage .grain{display:none}

/* ---------- round 1 fixes (critics + impeccable) ---------- */
/* small labels: readable on the dark glass (≥ 5:1); the status dot is sky, never lime */
:root{--t3:#8b949f;--good:var(--sky)}
:root[data-theme="light"]{--t3:#5f6b77}
.dot{background:var(--sky);box-shadow:0 0 10px rgba(34,181,240,.55)}
/* the floating nav reads as a solid capsule once it is over content, so nothing shows through behind it */
.nav.past .nav-bar{background:rgba(11,14,18,.9)}
:root[data-theme="light"] .nav.past .nav-bar{background:rgba(255,255,255,.93)}
/* phones keep the location in the eyebrow */
@media (max-width:640px){.hero .k .mb{display:inline}}
/* the claim tracker only says "paid" once its Paid step lights */
.c-tracker .pt{opacity:0;transition:opacity .45s var(--E,ease)}
.c-tracker.paid .pt{opacity:1}
/* rolling numbers: one clean digit window, no soft edges that show half-digits */
.odo-d{-webkit-mask-image:none;mask-image:none}

/* ---------- final-round refinements ---------- */
/* the key light is visibly warm and travels across the metal; it never glows on the UI */
.case .art .keylit{filter:brightness(2.3) sepia(.32) saturate(1.35);opacity:calc(var(--lo,0) * 1);
  -webkit-mask-image:radial-gradient(110px 100px at var(--mx,50%) var(--my,40%),#000 0,rgba(0,0,0,.4) 45%,transparent 72%);mask-image:radial-gradient(110px 100px at var(--mx,50%) var(--my,40%),#000 0,rgba(0,0,0,.4) 45%,transparent 72%)}
.case .sweep{display:none!important}
@keyframes num-glow{0%,100%{filter:none}}
.obj.is-pill{box-shadow:0 18px 40px -20px rgba(0,0,0,.6)!important}
/* How it works: inactive steps dim their heading only; their text stays readable */
.step:not(.on){opacity:1}.step h3{transition:opacity .5s}.step:not(.on) h3{opacity:.55}.step p{color:var(--t2)}
/* status "Paid" chips are an outline with a sky dot, so filled sky stays the button's alone */
.ctrack span.paid.on,:root[data-theme="light"] .ctrack span.paid.on{background:transparent;color:var(--t);border-color:rgba(34,181,240,.7)}
.ctrack span.paid.on em::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--sky);margin-right:6px;vertical-align:1px}
/* the people behind the quotes are readable */
.fq .who b{font-size:15px;color:var(--t)}.fq .who span span,.rc .who span span{font-size:13px;color:var(--t2)}.rc .who b{font-size:14px}
.fq figcaption{margin-top:22px}
.revs-grid .rc blockquote{font-size:16.5px;color:var(--t)}
/* display type breathes a touch (no touching glyphs) */
.hero h1{letter-spacing:-.03em}h1,h2,h3,.h2{letter-spacing:-.028em}.fq-q{letter-spacing:-.02em}
/* the loader shows the logo's frame once (the opening window has no outline of its own) */
.lhole{border-color:transparent!important}
/* "+ Add more details" is a grey link with a sky mark, like every other link */
.dyn-toggle{color:var(--t)!important}.dyn-toggle::first-letter{color:var(--sky)}
/* phones: the bottom bar keeps the same gutter on both sides; long addresses wrap */
@media (max-width:640px){.mbar{left:var(--gut);right:var(--gut);box-sizing:border-box}.mbar .btn{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.clist div{overflow-wrap:anywhere}}
/* the small proof tiles give their figures room */
.t-mini .case{width:96px;height:96px}

/* ---------- new-benchmark round (brief, system, craft, motion, impeccable) ---------- */
/* the key light rakes the object's own metal (a brightened copy revealed around the light); no glow on the backdrop */
.case::after{display:none!important}
.case .art .keylit{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen;filter:brightness(1.9) saturate(1.1);opacity:calc(var(--lo,0) * .85);transition:opacity .5s;
  -webkit-mask-image:radial-gradient(130px 120px at var(--mx,50%) var(--my,40%),#000 0,rgba(0,0,0,.35) 45%,transparent 72%);mask-image:radial-gradient(130px 120px at var(--mx,50%) var(--my,40%),#000 0,rgba(0,0,0,.35) 45%,transparent 72%)}
.case:not(.arrived) .keylit{opacity:0}
@media (prefers-reduced-motion:reduce){.case .art .keylit{display:none}}
/* accent rationing: the big proof figure is white; tracker dots are white with only "Paid" in sky; claim chips are a grey trail with only "Paid" in sky */
.t-hero .v{color:var(--t)}
.steps-r div.on::before,:root[data-theme="light"] .steps-r div.on::before{background:#e9edf2;border-color:#e9edf2;box-shadow:none}
.steps-r div:nth-child(4).on::before,:root[data-theme="light"] .steps-r div:nth-child(4).on::before{background:var(--sky);border-color:var(--sky);box-shadow:0 0 0 4px rgba(34,181,240,.18)}
.ctrack span.on{color:var(--t);border-color:var(--line-2)}.ctrack span.on::before{background:rgba(255,255,255,.07)}
:root[data-theme="light"] .ctrack span{color:var(--t2);border-color:rgba(11,26,43,.2)}
:root[data-theme="light"] .ctrack span.on{color:var(--t);border-color:rgba(11,26,43,.32)}:root[data-theme="light"] .ctrack span.on::before{background:rgba(11,26,43,.06)}
/* glow budget: dots and steps get a hairline halo, cases a neutral shadow (light mode keeps the owner's white bezel and pale-blue ring) */
.dot{box-shadow:0 0 6px rgba(34,181,240,.3)!important}
.step.on::before{box-shadow:0 0 0 4px rgba(34,181,240,.16)!important}
.svc:hover .case{box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 22px 46px -26px rgba(0,0,0,.65)!important}
:root[data-theme="light"] .case{box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 0 0 4px #fff,0 0 0 5px rgba(34,181,240,.3),0 14px 30px -16px rgba(11,26,43,.2)!important}
.lhole{box-shadow:none!important;border-color:rgba(127,211,247,.7)!important}
/* How it works: one step speaks at a time; the label inside the case is gone (the rail and the step list carry it) */
.step{transition:opacity .5s}.step:not(.on){opacity:.62}
.how-case .no{display:none}
/* the decision line says "What happens next" calmly, in greys */
.form-foot>p:first-child{background:rgba(255,255,255,.03)!important;border-color:var(--line)!important}
.form-foot>p:first-child b{color:var(--t)!important}
/* the first form step is tiny; more details fold away */
.opt-box{display:none}.opt-box.open{display:contents}
.more-toggle{margin:0}
:root:not([data-theme="light"]) .field select{color-scheme:dark}
:root:not([data-theme="light"]) .field select option{background:#1a1d21;color:#f2f4f7}
input::placeholder,textarea::placeholder{color:#9aa3ad!important}
/* section breathing room after the pinned how-it-works */
#claims{padding-top:170px}
/* the hero eyebrow carries who and where, so it reads clearly */
.hero .k{font-size:13px;color:#a1a9b4}
/* the post box no longer pushes the contact details down */
@media (min-width:1061px){.panel .case{aspect-ratio:auto;height:210px}}
/* the light theme hands over from the night hero cleanly */
:root[data-theme="light"] .hero::after{height:90px;background:linear-gradient(180deg,#07090c,var(--bg))}
@media (max-width:640px){
  .hero .k{letter-spacing:.14em}
  .t-hero{min-height:0!important;aspect-ratio:auto!important}.t-hero .v{font-size:clamp(48px,14vw,64px)!important}
  .svcs>.svc:last-child{grid-column:1 / -1}
  .tags{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;scrollbar-width:none;max-width:100%}.tag{flex:none}
  .panel,.panel>div,.form-card,#quoteForm,#quoteForm fieldset,.fgrid{min-width:0;max-width:100%}
}

/* ---------- bar-v5 pass: the accent is rationed (principle 3) ---------- */
/* sky stays for the primary buttons, the hero accent word, progress/paid and the objects' own parts; links and labels are greys */
.svc .go{color:var(--t2);transition:color .3s}.svc .go i{color:var(--sky)}.svc:hover .go{color:var(--t)}
.link{color:var(--t);border-bottom-color:var(--line-2)}.link:hover{color:var(--sky);border-bottom-color:currentColor}
.assure span::before{background:radial-gradient(circle,#8b949f 0 2.5px,transparent 3px),rgba(255,255,255,.06)}
.join b{color:var(--t)}
@media (max-width:640px){.hero-stats>div>span{font-size:12px!important;letter-spacing:.06em}}

/* ---------- critic-driven pass after round 3 ---------- */
/* the nav slides away while reading and returns on scroll-up; the compact capsule keeps its section links */
.nav{transition:transform .55s var(--E,ease)}
.nav.away{transform:translateY(-130%)}
@media (min-width:1061px){
  .nav.small .nav-bar{max-width:980px}
  .nav.small .nav-links{opacity:1;pointer-events:auto;width:auto;overflow:visible}
}
/* the sky shine word belongs to the hero and the final quote section; elsewhere headings are plain */
.sec:not(#quote) .lit{color:inherit;background:none;-webkit-text-fill-color:currentColor}
/* the hero card is full size on phones (no shrink, so its text stays ≥ 12 px) */
@media (max-width:640px){
  .hero-obj,.hero-obj[style]{transform:none!important;margin:0!important;height:300px}
  .obj{max-width:calc(100vw - 36px)}
  .stage{height:72vw}
  .stage .shot,.stage .vid{left:-30vw;top:-14vw;width:128vw}
}
/* readable small type */
.c-tracker .sub{font-size:14px}
.steps-r div,.ctrack span,.ctrack span em{font-size:12.5px}
.l2-w{font-size:12.5px!important;color:#8b949f!important}
.l2-n{color:#a1a9b4!important}
.field label .req{font-style:normal;color:var(--t3);font-size:13px}
/* form fields read as fields */
.field input,.field select,.field textarea{border-color:rgba(255,255,255,.18)}
:root[data-theme="light"] .field input,:root[data-theme="light"] .field select,:root[data-theme="light"] .field textarea{border-color:rgba(11,26,43,.2)}
.dyn-more{margin:2px 0 4px}.dyn-toggle{font:500 15px "DM Sans";background:none;border:0;padding:0;cursor:pointer;color:var(--sky)}.dyn-toggle i{font-style:normal;color:var(--t3)}
/* reviews: a calm, readable grid (3 columns; phones show three, the rest on request) */
.revs-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:40px}
.revs-grid .rc{width:auto!important;margin:0!important}
.revs-grid .rc blockquote{font-size:17px;line-height:1.55}
.revs-more{display:none;margin-top:18px}
@media (max-width:1060px){.revs-grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.revs-grid{grid-template-columns:1fr}.revs-grid:not(.all) .rc:nth-child(n+4){display:none}.revs-more{display:inline-flex}}
/* phones: services as a compact two-column grid instead of nine full-screen cards */
@media (max-width:640px){
  .svcs{grid-template-columns:1fr 1fr!important;gap:10px}
  .svc{padding:8px 8px 16px}.svc .tx{padding:12px 6px 0}.svc b{font-size:17px;margin-top:4px}.svc .d,.svc .more-q{display:none}.svc .grp{font-size:11.5px;letter-spacing:.14em}.svc .go{font-size:14px;margin-top:10px}
}
/* the pinned how-it-works keeps its button above the fold */
@media (min-width:1061px){.how-case{max-width:min(520px,50vh)}}
/* light mode: a short, neutral hand-over from the night hero to the page (no foggy blue band) */
:root[data-theme="light"] .hero::after{height:70px;background:linear-gradient(180deg,rgba(7,9,12,0),#07090c 10%,#0f1620 45%,#f2f4f7 100%)}

/* ---------- round 3 fixes (applied after the final round, not re-judged) ---------- */
/* the object's square tile melts into the case at its edges, so no plate edge shows when the key light moves */
.case .art img{-webkit-mask-image:radial-gradient(closest-side,#000 78%,transparent 100%);mask-image:radial-gradient(closest-side,#000 78%,transparent 100%)}
/* readable placeholders and fine print (12 px minimum, ≥ the lowest text grey) */
input::placeholder,textarea::placeholder{color:#8b949f;opacity:1}
:root[data-theme="light"] input::placeholder,:root[data-theme="light"] textarea::placeholder{color:#5f6b77}
.legal,.who span,.c-policy .meta,.c-tracker .who-row{font-size:13px}
.obj .k{font-size:12px}

/* ---------- round 2 fixes ---------- */
/* the accent is rationed (action, accent word, progress, paid): section labels are neutral, not sky */
.k.sky,:root[data-theme="light"] .k.sky{color:var(--t2)}
.cta-band .k{font-size:12.5px;letter-spacing:.2em}
/* the Paid pill is the payoff: a solid sky capsule, readable at hero scale */
.obj.is-pill{background:var(--sky)!important;border-color:var(--sky)!important;box-shadow:0 18px 40px -16px rgba(34,181,240,.65)!important}
.obj.is-pill .c-pill{color:#04121c;font-weight:600;font-size:17px}
.obj.is-pill .c-pill .dot{background:#04121c;box-shadow:none}
.obj.is-pill .edge,.obj.is-pill .sheen{opacity:0}

/* ---------- cases: the studio floor is the page colour, so tiles sit seamlessly ---------- */
.case,:root[data-theme="light"] .case{background:#07090c}
.case .art{transform-style:preserve-3d;transition:none}
.svc:hover .case .art{transform:none}
.case .art img{backface-visibility:hidden}
.svc .case img,.svc:hover .case img{transition:filter .5s var(--E,ease);transform:none}
.case .lite,.case .bloom,.case .flash2,.case .scan{display:none!important}
/* a soft warm key light follows the pointer inside the case: visible, never a glow */
.case::after,:root[data-theme="light"] .case::after{z-index:2;mix-blend-mode:screen;background:radial-gradient(150px 130px at var(--mx,50%) var(--my,35%),rgba(255,243,230,.15),rgba(255,243,230,.04) 45%,transparent 72%)}
.case .sweep,:root[data-theme="light"] .case .sweep{z-index:2;background:linear-gradient(115deg,transparent 44%,rgba(255,255,255,.11) 50%,transparent 56%);mix-blend-mode:screen}
.svc:hover .case .art>img{filter:brightness(1.08)}
.svc:hover .case{box-shadow:inset 0 0 0 1px rgba(127,211,247,.24),0 22px 46px -26px rgba(34,181,240,.38)}
/* every object is shown whole and centred in its case, whatever the case's shape (tiles fade into the case colour, so no edges show) */
.case img,.case .art img{object-fit:contain!important;object-position:50% 52%!important}
.t-mini .case .art{transform:none}
.t-mini .case img,.claim .case img{position:absolute;inset:0;width:100%;height:100%}

/* ---------- hero: the studio scene is the subject at full strength; the copy side stays dark ---------- */
.stage .shot{object-position:62% 56%}
@media (min-width:1061px){
  .stage .shot,.stage canvas.shot{opacity:1;filter:none}
  .stage .veil,:root[data-theme="light"] .stage .veil{background:linear-gradient(90deg,rgba(7,9,12,.82) 0%,rgba(7,9,12,.45) 30%,rgba(7,9,12,0) 46%),linear-gradient(0deg,rgba(7,9,12,.7),transparent 22%)}
}
/* desktop: the claim card sits in the dark upper right, clear of the umbrella (glass may pass over the ship's mast) */
@media (min-width:1061px){ .hero-obj{top:17%;right:calc(var(--gut) - 6px)} }

/* phones: copy on clean night, then the studio scene as its own band, then the claim card */
@media (max-width:640px){
  .hero,:root[data-theme="light"] .hero{display:flex;flex-direction:column;align-items:stretch;background:#07090c;color:#f2f4f7}
  .hero>.stage,.hero-copy,.hero-obj{align-self:stretch;width:auto}
  .hero .hero-grid{display:contents}
  .hero-copy{order:1;padding-left:var(--gut);padding-right:var(--gut)}
  .stage{order:2;position:relative;inset:auto;height:62vw;margin:6px 0 -4px;background:#07090c}
  .stage .shot,.stage .vid{position:absolute;inset:auto;left:-38vw;top:-17vw;width:140vw;max-width:none;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:50% 50%}
  .stage .veil,:root[data-theme="light"] .stage .veil{background:linear-gradient(180deg,#07090c 0%,rgba(7,9,12,0) 16%,rgba(7,9,12,0) 82%,#07090c 100%)}
  .hero-obj{order:3;padding-left:var(--gut);padding-right:var(--gut)}
}

/* hero loop video sits exactly over the poster and fades in once it is playing */
.stage .vid{opacity:0;transition:opacity 1.2s var(--E,ease)}
.stage .vid.on{opacity:1}
.stage .beam{background:radial-gradient(520px 420px at var(--bx,78%) var(--by,12%),rgba(127,211,247,.09),transparent 70%)}
.stage .sweep{background:linear-gradient(105deg,transparent 47%,rgba(220,238,255,.06) 50%,transparent 53%)}

/* quote form: consent, bot check, spam trap, reference (form back end, 21 Oct 2026) */
.consent .check{flex-direction:row;display:flex;gap:11px;align-items:flex-start;cursor:pointer;line-height:1.5}
.consent .check input{appearance:auto;-webkit-appearance:checkbox;width:18px;height:18px;margin:2px 0 0;flex:none;accent-color:var(--sky);cursor:pointer}
.consent.err .check input{outline:2px solid var(--warn);outline-offset:2px}
.hp{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}
.ts:not(:empty){margin-top:18px}
.done .ref{margin-top:10px;font-size:14px;color:var(--t3)}.done .ref b{color:var(--t);font-weight:500;letter-spacing:.02em}
.form-alert .link{color:inherit;text-decoration:underline;white-space:nowrap}.form-foot .form-alert{grid-column:1/-1;order:-1;max-width:none;font-size:14px}
/* claim story card: moved from the hero sky to beside "Real claims. Real results." and made smaller (owner, 21 Oct 2026) */
.claims-top{display:grid;grid-template-columns:minmax(0,1fr) 460px;gap:56px;align-items:center}
.claims-top .sec-head{max-width:640px}
#claims .hero-obj,#claims .hero-obj[style]{position:relative!important;top:auto!important;right:auto!important;left:auto!important;width:auto!important;height:330px!important;transform:scale(.86)!important;transform-origin:50% 50%;margin:0!important;padding:0!important;order:0!important}
#claims .obj{top:50%}
/* light theme: the card keeps its night glass, like the art keeps its dark cases */
:root[data-theme="light"] #claims .obj{background:linear-gradient(150deg,#1b232c,#0b0f14 60%,#121920);border-color:rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 0 0 6px #fff,0 0 0 7px rgba(34,181,240,.28),0 40px 70px -30px rgba(10,30,50,.45)}
:root[data-theme="light"] #claims .obj.is-pill{box-shadow:0 18px 40px -16px rgba(34,181,240,.65)!important}
@media (max-width:1060px){.claims-top{grid-template-columns:1fr;gap:20px}#claims .hero-obj,#claims .hero-obj[style]{height:340px!important;transform:none!important}}@media (max-width:640px){#claims .obj .row .k{white-space:nowrap;letter-spacing:.12em;font-size:10.5px}#claims .hero-obj,#claims .hero-obj[style]{height:320px!important}}
/* ---------- polish pass (impeccable, 21 Oct 2026) ---------- */
/* browser surfaces carry the palette: selection, caret, scrollbar, keyboard focus */
::selection{background:rgba(34,181,240,.32);color:#fff}
:root[data-theme="light"] ::selection{background:rgba(8,104,176,.2);color:#062430}
input,textarea{caret-color:var(--sky)}
html{scrollbar-color:#2a323b #07090c}
:root[data-theme="light"]{scrollbar-color:#b9c4cf #f2f4f7}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:#2a323b;border-radius:99px;border:3px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:#3a4550}
:root[data-theme="light"] ::-webkit-scrollbar-thumb{background:#b9c4cf}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible,.svc:focus-visible,summary:focus-visible{outline:2px solid var(--sky);outline-offset:3px}
.consent .check input:focus-visible{outline:2px solid var(--sky);outline-offset:2px}

/* in-between widths (641-1060): the hero copy never sits on the studio scene */
@media (min-width:641px) and (max-width:1060px) and (orientation:landscape){
  .stage .shot{inset:auto;left:30%;bottom:0;width:70%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:50% 50%;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18%),linear-gradient(180deg,transparent 0,#000 14%);-webkit-mask-composite:source-in;
    mask-image:linear-gradient(90deg,transparent 0,#000 18%),linear-gradient(180deg,transparent 0,#000 14%);mask-composite:intersect}
  .stage .veil,:root[data-theme="light"] .stage .veil{background:linear-gradient(90deg,rgba(7,9,12,.88) 0%,rgba(7,9,12,.5) 34%,rgba(7,9,12,0) 54%),linear-gradient(0deg,rgba(7,9,12,.6),transparent 22%)}
}
/* tablets held upright: the phone composition (copy on clean night, then the scene as its own band) */
@media (min-width:641px) and (max-width:1060px) and (orientation:portrait){
  .hero,:root[data-theme="light"] .hero{display:flex;flex-direction:column;align-items:stretch;background:#07090c;color:#f2f4f7;min-height:0}
  .hero>.stage,.hero-copy{align-self:stretch;width:auto}
  .hero .hero-grid{display:contents}
  .hero-copy{order:1;padding-left:var(--gut);padding-right:var(--gut)}
  .stage{order:2;position:relative;inset:auto;height:58vw;margin:10px 0 -4px;background:#07090c;border-radius:0}
  .stage .shot,.stage .vid{position:absolute;inset:auto;left:-14vw;top:-8vw;width:122vw;max-width:none;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:50% 50%}
  .stage .veil,:root[data-theme="light"] .stage .veil{background:linear-gradient(180deg,#07090c 0%,rgba(7,9,12,0) 16%,rgba(7,9,12,0) 82%,#07090c 100%)}
}
/* mid-page bands stack before their copy gets squeezed beside the buttons */
@media (max-width:900px){.cta-band{grid-template-columns:1fr}.cta-acts{justify-content:flex-start}}
/* two-column service grid: the ninth card spans the row, picture beside its text, instead of sitting alone */
@media (min-width:641px) and (max-width:1060px){
  .svcs>.svc:last-child{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:8px}
  .svcs>.svc:last-child .tx{padding:14px 18px}
  /* the post box stays a picture, not a wall */
  .panel .case{aspect-ratio:auto;height:240px}
}/* light theme: one primary button everywhere, bright sky with navy text (8.6:1; the old #0091d4 + white was 3.5:1) */
:root[data-theme="light"] .btn.sky{background:#22b5f0;border-color:#22b5f0;color:#04121c}
/* light theme: link arrows in the logo's royal blue so they read on white */
:root[data-theme="light"] .svc .go i{color:var(--royal)}
/* status dots: a quiet ring, not a glow */
.dot{box-shadow:0 0 0 3px rgba(34,181,240,.14)}
.dot.sky{box-shadow:0 0 0 3px rgba(34,181,240,.2)}
.obj.is-pill .c-pill .dot{box-shadow:none}/* focus ring on plain text links follows the rounded language (buttons keep their own radius) */
a:not(.btn):focus-visible{border-radius:8px}
/* ---------- quote form: cover-specific questions (21 Oct 2026) ---------- */
/* the chosen cover type is brand blue (owner); navy text keeps it readable in both themes */
.tag[aria-checked="true"],:root[data-theme="light"] .tag[aria-checked="true"]{background:#22b5f0;border-color:#22b5f0;color:#04121c;font-weight:600}
.tag:not([aria-checked="true"]):hover{border-color:var(--t2)}
/* answer pills: native radios/checkboxes, drawn as pills; chosen = sky outline with a faint sky wash */
.q-pills legend{font-size:14px;font-weight:400;color:var(--t2);margin-bottom:10px}.q-pills legend i{color:var(--t3);font-style:normal}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pill{position:relative;cursor:pointer}
.pill input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.pill span{display:inline-flex;align-items:center;min-height:40px;padding:8px 15px;border-radius:999px;border:1px solid var(--line-2);background:var(--glass);font-size:14.5px;color:var(--t);transition:border-color .2s,background .2s,box-shadow .2s}
.pill:hover span{border-color:var(--t2)}
.pill input:checked+span{border-color:var(--sky);background:rgba(34,181,240,.14);box-shadow:inset 0 0 0 1px var(--sky)}
:root[data-theme="light"] .pill input:checked+span{background:rgba(34,181,240,.12)}
.pill input:focus-visible+span{outline:2px solid var(--sky);outline-offset:3px}
.dyn-note{margin:0;font-size:14px;color:var(--t2)}
.contact-title{margin-top:18px}
@media (max-width:640px){.pill span{min-height:44px;font-size:14px}}.pills .pill{display:inline-flex;width:auto;margin:0}
.pill input:checked+span{background:rgba(34,181,240,.2)}
:root[data-theme="light"] .pill input:checked+span{background:rgba(34,181,240,.22);border-color:#0091d4;box-shadow:inset 0 0 0 1px #0091d4;color:#04121c;font-weight:500}
p.dyn-note{display:block}/* phones: the quote panel and form card share their padding, so the form gets the width (242 -> 286 px at 390) */
@media (max-width:640px){.panel{padding:22px 14px}.form-card{padding:20px 18px;border-radius:22px}.pill span{padding:7px 13px;font-size:14px}}/* form order: Your details (required) first, then the cover type, then its optional questions */
.fgrid.first{margin-top:0}
.fgrid.first .contact-title{margin-top:0;padding-top:0;border-top:0}
.cover-pick{margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.dyn-title i{font-style:normal;text-transform:none;letter-spacing:0;color:var(--t3)}
p.dyn-sub{margin:-6px 0 2px}.cover-pick{border-top:0;padding-top:0}
.cover-pick legend{float:left;width:100%;padding:22px 0 0;border-top:1px solid var(--line)}
.cover-pick .tags{clear:both}/* form order (owner, 21 Oct 2026): insurance type, then Your details, then the cover's optional questions */
.cover-pick.top{margin-top:0}.cover-pick.top legend{border-top:0;padding-top:0}
.fgrid.first{margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.fgrid.first+.fgrid{margin-top:14px}
/* ---------- form tasks (review, 21 Oct 2026): a new quote, a policy review or claim help, each its own journey ---------- */
.task-pick{margin:0 0 22px;padding:0;border:0}
.task-pick legend{margin-bottom:12px}
.task-seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:4px;border:1px solid var(--line-2);border-radius:16px}
.task-seg button{border:1px solid transparent;background:none;color:var(--t2);border-radius:12px;padding:11px 10px;font:inherit;font-size:14.5px;cursor:pointer;transition:background .25s,color .25s,border-color .25s;line-height:1.25}
.task-seg button:hover{color:var(--t)}
.task-seg button[aria-checked="true"]{background:rgba(34,181,240,.14);border-color:rgba(34,181,240,.6);color:var(--t);font-weight:500}
:root[data-theme="light"] .task-seg button[aria-checked="true"]{background:rgba(8,104,176,.08);border-color:#0868B0;color:#062430}
.task-seg button:focus-visible{outline:2px solid #22b5f0;outline-offset:2px}
.task-pick + .cover-pick.top legend{border-top:1px solid var(--line);padding-top:22px}
@media (max-width:480px){.task-seg button{font-size:13.5px;padding:10px 6px}}

/* claim card without motion (reduced motion, or the animation script didn't load): the layout is correct on its own.
   motion.js adds .mo and then centres the card itself, so this never doubles up with the animation */
:root:not(.mo) #obj{transform:translate(-50%,-50%);opacity:1}

/* hero video pause (review, 21 Oct 2026): a quiet glass control in the scene's lower-right corner */
.vid-pause{position:absolute;right:var(--gut,24px);bottom:24px;z-index:3;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  border:1px solid rgba(255,255,255,.18);background:rgba(7,9,12,.45);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#e8edf2;transition:background .25s,border-color .25s}
.vid-pause:hover{background:rgba(7,9,12,.7);border-color:rgba(255,255,255,.32)}
.vid-pause:focus-visible{outline:2px solid #22b5f0;outline-offset:3px}
.vid-pause svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.vid-pause[aria-pressed="true"] svg{fill:currentColor;stroke-width:1.6}
/* phones and upright tablets: the scene is its own band, so the control sits on that band's corner */
@media (max-width:640px){.vid-pause{position:relative;order:2;align-self:flex-end;right:auto;bottom:auto;margin:-52px 14px 12px 0}}
@media (min-width:641px) and (max-width:1060px) and (orientation:portrait){.vid-pause{position:relative;order:2;align-self:flex-end;right:auto;bottom:auto;margin:-56px 18px 16px 0}}
/* ---------- people and clients (owner, 23 Oct 2026) ---------- */
/* a reviewer's photo, when we have one, goes inside the initials circle: <span class="mono"><img src="assets/people/kunal-jain.webp" alt=""></span> */
.mono{overflow:hidden}.mono img{width:100%;height:100%;object-fit:cover;border-radius:50%}
/* our clients: a slow, endless strip of names (a logo <img> can replace a name later); still when motion is reduced */
.clients{margin-top:clamp(56px,6vw,96px)}
.clients .k{text-align:center;color:var(--t3)}
.cl-track{display:flex;overflow:hidden;margin-top:22px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.cl-row{display:flex;flex:none;gap:clamp(40px,5vw,88px);margin:0;padding:0 clamp(20px,2.5vw,44px);list-style:none;animation:cl-run 48s linear infinite}
.cl-row li{flex:none;white-space:nowrap;font-size:clamp(22px,2vw,34px);font-weight:300;letter-spacing:-.02em;color:var(--t2);opacity:.72;transition:opacity .3s,color .3s}
.cl-row li:hover{opacity:1;color:var(--t)}
.cl-row li img{height:clamp(26px,2.2vw,38px);width:auto;filter:grayscale(1) brightness(1.6);opacity:.8}
.cl-track:hover .cl-row{animation-play-state:paused}
@keyframes cl-run{to{transform:translateX(-100%)}}
@media (prefers-reduced-motion:reduce){.cl-track{-webkit-mask-image:none;mask-image:none;justify-content:center}.cl-row{animation:none;flex-wrap:wrap;justify-content:center;row-gap:14px;flex:1}.cl-row[aria-hidden]{display:none}}
/* reviews: an endless, slow carousel of cards (pauses on hover or keyboard focus); a click opens the review larger */
.rv-track{display:flex;overflow:hidden;margin-top:40px;padding:6px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.rv-row{display:flex;flex:none;gap:16px;padding-right:16px;animation:cl-run 80s linear infinite}
.rv-track:hover .rv-row,.rv-track:focus-within .rv-row{animation-play-state:paused}
.rv-row .rc{flex:none;width:clamp(280px,28vw,430px);margin:0!important;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer;transition:scale .5s var(--E,ease),box-shadow .5s var(--E,ease)}
.rv-row .rc blockquote{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}
/* hover: the card grows very slightly and catches a little sky light ("scale", not "transform", so it never fights the entrance animation) */
.rv-row .rc:hover,.rv-row .rc:focus-visible{scale:1.035!important;z-index:1;box-shadow:inset 0 0 0 1px rgba(127,211,247,.28),0 22px 46px -28px rgba(34,181,240,.45)}
.rv-row .rc:focus-visible{outline:2px solid var(--sky);outline-offset:3px}
.rv-hint{margin:16px 0 0;text-align:center;font-size:13px;color:var(--t3)}
/* the same gentle hover grow on every card across the page (owner, 23 Oct 2026); bigger cards grow less, so the movement feels the same */
.bento .tile,.svc,.claims .claim{transition:scale .5s var(--E,ease),box-shadow .5s var(--E,ease),border-color .3s}
@media (hover:hover){
  .bento .tile:hover{scale:1.02!important;z-index:1}
  .svc:hover{scale:1.025!important;z-index:1}
  .claims .claim:hover{scale:1.012!important;z-index:1;box-shadow:inset 0 0 0 1px rgba(127,211,247,.22),0 26px 54px -30px rgba(34,181,240,.4)}
}
@media (prefers-reduced-motion:reduce){.bento .tile:hover,.svc:hover,.claims .claim:hover{scale:none!important}}
/* the larger review */
.rv-dlg{border:0;padding:0;margin:auto;background:transparent;color:var(--t);width:min(720px,calc(100vw - 32px));max-height:calc(100svh - 48px);overflow:visible}
.rv-dlg::backdrop{background:rgba(3,5,8,.74);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
/* opening: the panel grows out of the card that was clicked, the backdrop fades and blurs in, then the words rise in turn; closing reverses it, quicker */
.rv-dlg[open]{animation:rv-in .6s cubic-bezier(.16,1,.3,1) both}
.rv-dlg[open]::backdrop{animation:rv-fade .45s ease both}
.rv-dlg[open] blockquote{animation:rv-rise .6s cubic-bezier(.16,1,.3,1) .12s both}
.rv-dlg[open] .who{animation:rv-rise .6s cubic-bezier(.16,1,.3,1) .22s both}
.rv-dlg.closing{animation:rv-out .26s cubic-bezier(.4,0,1,1) both}
.rv-dlg.closing::backdrop{animation:rv-fade .26s ease reverse both}
@keyframes rv-in{from{opacity:0;transform:translate(var(--dx,0px),var(--dy,0px)) scale(.82)}to{opacity:1;transform:none}}
@keyframes rv-out{to{opacity:0;transform:translate(calc(var(--dx,0px) * .4),calc(var(--dy,0px) * .4)) scale(.9)}}
@keyframes rv-fade{from{opacity:0}to{opacity:1}}
@keyframes rv-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.rv-dlg-in{position:relative;padding:clamp(28px,4.2vw,52px);border-radius:28px;background:linear-gradient(150deg,#161c23,#0d1116 70%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 40px 90px -30px rgba(0,0,0,.9);max-height:calc(100svh - 48px);overflow:auto}
.rv-dlg blockquote{margin:0;font-size:clamp(20px,2.2vw,28px);line-height:1.45;font-weight:300;letter-spacing:-.01em;padding-right:44px}
.rv-dlg .who{display:flex;align-items:center;gap:14px;margin-top:28px}
.rv-dlg .who b{font-size:16px}.rv-dlg .mono{width:52px;height:52px;font-size:16px}
.rv-dlg .rv-dlg-in>.rv-x{position:absolute;z-index:3;top:14px;right:14px;left:auto;width:42px;height:42px;border-radius:50%;border:1px solid var(--line-2);background:rgba(255,255,255,.04);color:var(--t);font-size:24px;line-height:1;cursor:pointer;display:grid;place-items:center}
.rv-x:hover{background:rgba(255,255,255,.1)}
html.rv-open{overflow:hidden}
@media (max-width:640px){.rv-row .rc{width:82vw}.rv-row{animation-duration:60s}}
@media (prefers-reduced-motion:reduce){.rv-track{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-mask-image:none;mask-image:none}.rv-row{animation:none}.rv-row[aria-hidden]{display:none}.rv-row .rc{scroll-snap-align:start}.rv-dlg[open],.rv-dlg[open]::backdrop,.rv-dlg[open] blockquote,.rv-dlg[open] .who,.rv-dlg.closing{animation:none}.rv-row .rc:hover{scale:none}}
/* ---------- the smallest phones (320-360px, e.g. the first iPhone SE): the menu stays on screen, hero buttons stack ---------- */
@media (max-width:360px){
  .nav-cta .btn.sky{display:none}
  .hero .acts{grid-template-columns:1fr}
  .hero .acts .btn{justify-content:center;min-width:0}
}
/* ---------- big screens use the whole width (owner, 23 Oct 2026): the page spans the screen with a fluid gutter, the hero copy and scene scale up ---------- */
/* the hero and nav span the screen; the sections below grow to a middle ground (82% of the screen, 1360-1800px) */
@media (min-width:1500px){
  :root{--max:clamp(1360px,82vw,1800px);--hgut:clamp(48px,4.4vw,120px)}
  .hero-grid.wrap,.nav-in{max-width:100vw;padding-left:var(--hgut);padding-right:var(--hgut)}
  .nav:not(.small) .nav-bar{max-width:100vw}
  .hero h1{font-size:clamp(104px,5.9vw,150px)}
  .hero-grid{grid-template-columns:minmax(0,min(900px,46vw))}
  .hero .lead{font-size:clamp(18px,1.05vw,22px);max-width:46ch}
  .hero .k{font-size:clamp(13px,.7vw,15px)}
  .hero-stats{gap:clamp(44px,3vw,64px)}.hero-stats b{font-size:clamp(40px,2.4vw,56px)}
  .stage .shot,.stage .vid{left:16%;width:84%}
  /* type grows with the wider sections (82vw over the 1360px base): headings in step with the layout (up to ~1.3x), reading text by about half that (up to ~1.15x) */
  body{font-size:clamp(17px,1.03vw,19.5px)}
  .sec .h2{font-size:clamp(64px,3.86vw,84px)}
  .sec .lead{font-size:clamp(18px,1.1vw,21px)}
  .sec .k{font-size:clamp(12.5px,.76vw,14.5px)}
  .fq .fq-q{font-size:clamp(50px,3vw,66px)}
  .bento .t-hero .v{font-size:clamp(140px,8.45vw,180px)}
  .sec-head{max-width:clamp(760px,46vw,1000px)}
  .claims-top .sec-head{max-width:clamp(640px,40vw,880px)}
  .ctrack span{font-size:clamp(12.5px,.74vw,14.5px)}
  .fq .who b,.rc .who b{font-size:clamp(14px,.85vw,16.5px)}
  .fq .who span span,.rc .who span span{font-size:clamp(13px,.78vw,15px)}
  .rv-hint,.cl-h,.clients .k{font-size:clamp(13px,.75vw,14.5px)}
  .bento .tile:not(.t-hero) .v{font-size:clamp(52px,3.1vw,64px)}
  .bento .tile .d{font-size:clamp(15px,.9vw,17px)}
  .svc b{font-size:clamp(24px,1.45vw,31px)}
  .svc .d,.claim p,.step p{font-size:clamp(16px,.97vw,18.5px)}
  .claims .claim-amt{font-size:clamp(64px,3.86vw,84px)}
  .step h3{font-size:clamp(34px,2.05vw,45px)}
  .cta-copy h3{font-size:clamp(38px,2.3vw,50px)}
  .rv-row .rc blockquote{font-size:clamp(16px,1vw,18.5px)}
  .cl-row li{font-size:clamp(34px,2vw,42px)}
  .field input,.field select,.field textarea{font-size:clamp(16px,.95vw,18px)}
}

/* ===================== light mode: "Glacier" (owner, 23 Oct 2026) =====================
   A pale-blue page (lighter at the top, deeper lower down) with sky and indigo light pooling behind frosted-glass cards.
   The hero stays the dark studio. The art keeps its night backdrop, now framed as a "night window" set into the glass. */
:root[data-theme="light"]{
  --bg:#e9f3fb;--bg-2:#dcebf7;
  --glass:rgba(255,255,255,.5);--glass-2:rgba(255,255,255,.72);--glass-hi:rgba(255,255,255,.9);
  --line:rgba(11,42,74,.08);--line-2:rgba(11,42,74,.16);
  --t:#0a1a2c;--t2:#3d4d5e;--t3:#56657a;
  --shadow:0 26px 54px -34px rgba(11,52,96,.38);--edge:inset 0 1px 0 rgba(255,255,255,.95)}
:root[data-theme="light"] body{background:linear-gradient(180deg,#f4f9fd 0%,#e6f1fa 55%,#d9e9f7 100%) fixed;background-color:#e9f3fb}
:root[data-theme="light"] body::before{background:
  radial-gradient(38% 34% at 88% 8%,rgba(34,181,240,.34),transparent 70%),
  radial-gradient(34% 30% at 4% 58%,rgba(84,104,235,.20),transparent 70%),
  radial-gradient(30% 24% at 50% 30%,rgba(255,255,255,.7),transparent 70%)}
/* the dark hero hands over to the glacier page */
:root[data-theme="light"] .hero::after{height:90px;background:linear-gradient(180deg,rgba(7,9,12,0),#07090c 8%,#3a5b78 46%,#e6f1fa 100%)}
/* frosted glass: every card, band and panel */
:root[data-theme="light"] .glass{
  background:linear-gradient(160deg,rgba(255,255,255,.66),rgba(255,255,255,.42))!important;border:1px solid rgba(255,255,255,.9)!important;
  -webkit-backdrop-filter:blur(26px) saturate(1.6);backdrop-filter:blur(26px) saturate(1.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,1),inset 0 -1px 0 rgba(11,42,74,.04),0 24px 50px -32px rgba(11,52,96,.34)!important}
:root[data-theme="light"] .cta-band.glass{background:radial-gradient(70% 140% at 0% 0%,rgba(34,181,240,.16),transparent 60%),linear-gradient(160deg,rgba(255,255,255,.66),rgba(255,255,255,.42))!important}
:root[data-theme="light"] .claims .claim:hover,:root[data-theme="light"] .rv-row .rc:hover{box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(34,181,240,.28),0 28px 56px -30px rgba(34,181,240,.45)!important}
:root[data-theme="light"] .nav.past .nav-bar{background:rgba(255,255,255,.6);border-color:rgba(255,255,255,.95);-webkit-backdrop-filter:blur(24px) saturate(1.6);backdrop-filter:blur(24px) saturate(1.6)}
/* form fields read as frosted wells */
:root[data-theme="light"] .field input,:root[data-theme="light"] .field select,:root[data-theme="light"] .field textarea{background:rgba(255,255,255,.7);border-color:rgba(11,42,74,.16)}
:root[data-theme="light"] .field input:focus,:root[data-theme="light"] .field select:focus,:root[data-theme="light"] .field textarea:focus{background:#fff;border-color:#0868b0}
:root[data-theme="light"] .tag,:root[data-theme="light"] .pill span,:root[data-theme="light"] .seg{background:rgba(255,255,255,.55)}
/* the art: a night window set into the glass (the objects are photographed on near-black, so the centre stays that colour and the edge deepens to navy) */
:root[data-theme="light"] .case{background:radial-gradient(closest-side,#060a0d 72%,#0b1828 100%)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),inset 0 -40px 60px -40px rgba(34,181,240,.35),0 0 0 4px rgba(255,255,255,.6),0 0 0 5px rgba(11,42,74,.06),0 18px 36px -18px rgba(11,52,96,.5)!important}
:root[data-theme="light"] .svc:hover .case{box-shadow:inset 0 0 0 1px rgba(127,211,247,.3),inset 0 -40px 60px -40px rgba(34,181,240,.5),0 0 0 4px rgba(255,255,255,.8),0 0 0 5px rgba(34,181,240,.3),0 22px 44px -18px rgba(34,181,240,.5)!important}
/* the review pop-out: frosted white panel on a soft blue veil */
:root[data-theme="light"] .rv-dlg::backdrop{background:rgba(14,40,66,.32);-webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3)}
:root[data-theme="light"] .rv-dlg-in{background:linear-gradient(160deg,rgba(255,255,255,.92),rgba(240,247,253,.86));box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(255,255,255,.9),0 40px 90px -30px rgba(11,52,96,.5)}
:root[data-theme="light"] .rv-dlg blockquote{color:var(--t)}
:root[data-theme="light"] .rv-dlg .rv-dlg-in>.rv-x{background:rgba(11,42,74,.05);border-color:rgba(11,42,74,.14);color:var(--t)}
:root[data-theme="light"] .rv-dlg .rv-dlg-in>.rv-x:hover{background:rgba(11,42,74,.1)}
:root[data-theme="light"]{scrollbar-color:#a9c3da #e6f1fa}
:root[data-theme="light"] ::-webkit-scrollbar-thumb{background:#a9c3da}

/* ---------- dark mode: a touch lighter, "S1" graphite (owner, 23 Oct 2026) ---------- */
:root:not([data-theme="light"]){--bg:#0b0e12;--bg-2:#10141a;--glass:rgba(255,255,255,.05);--glass-2:rgba(255,255,255,.08)}
:root:not([data-theme="light"]) body{background:#0b0e12}
:root:not([data-theme="light"]) .hero::after{background:linear-gradient(180deg,rgba(7,9,12,0),#0b0e12)}
:root:not([data-theme="light"]){scrollbar-color:#2a323b #0b0e12}

/* office map card (owner, 23 Oct 2026): Google's embed in a frosted frame; dark mode tones the map down to sit with the page */
.map-card{margin:26px 0 0;padding:8px;border-radius:24px;overflow:hidden}
.map-card iframe{display:block;width:100%;height:260px;border:0;border-radius:18px;background:#1a1f26}
:root:not([data-theme="light"]) .map-card iframe{filter:invert(.9) hue-rotate(180deg) saturate(.75) brightness(.95) contrast(.95)}
.map-card figcaption{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 8px 4px;font-size:14px;color:var(--t2);flex-wrap:wrap}
@media (min-width:1500px){.map-card iframe{height:clamp(260px,16vw,340px)}}
@media (max-width:640px){.map-card iframe{height:220px}}

/* footer social profiles (owner, 23 Oct 2026) */
.social{display:flex;flex-wrap:wrap;align-items:center;gap:10px;list-style:none;margin:22px 0 0;padding:0}
.social a{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;border:1px solid var(--line-2);color:var(--t2);background:var(--glass);transition:color .3s,border-color .3s,background .3s,scale .4s var(--E,ease)}
.social a:hover{color:var(--t);border-color:var(--sky);background:var(--glass-2);scale:1.08}
.social svg{width:18px;height:18px;fill:currentColor}
.social a.social-txt{width:auto;height:42px;padding:0 16px;border-radius:999px;font-size:14px}

/* the map takes the post box's place above the contact details */
.panel .map-card{margin:30px 0 26px}
footer .social,.foot .social{display:flex!important;flex-direction:row!important;flex-wrap:wrap;gap:10px;grid-template-columns:none}footer .social li,.foot .social li{margin:0!important;padding:0!important;display:block}

/* ---------- quote form: optional details live in one inviting panel (owner, 23 Oct 2026) ---------- */
.opt-box{display:grid!important;grid-column:1/-1;grid-template-rows:0fr;transition:grid-template-rows .55s var(--E,ease)}
.opt-box.open{grid-template-rows:1fr}
.opt-in{overflow:hidden;min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:0 2px}
.opt-box.open .opt-in{padding:6px 2px 4px}
@media (max-width:640px){.opt-in{grid-template-columns:1fr}}
.xtra{position:relative;display:flex;align-items:center;gap:14px;width:100%;text-align:left;cursor:pointer;margin:4px 0 0;padding:16px 18px;border-radius:18px;font:inherit;color:var(--t);
  border:1px solid rgba(34,181,240,.35);background:linear-gradient(120deg,rgba(34,181,240,.14),rgba(77,155,224,.06) 55%,rgba(255,255,255,.02));overflow:hidden;
  transition:border-color .3s,box-shadow .4s var(--E,ease),scale .4s var(--E,ease)}
.xtra::after{content:"";position:absolute;inset:-40%;pointer-events:none;background:linear-gradient(110deg,transparent 45%,rgba(255,255,255,.16) 50%,transparent 55%);transform:translateX(-70%);animation:xtra-shine 4.5s ease-in-out 1.2s infinite}
@keyframes xtra-shine{0%,62%{transform:translateX(-70%)}100%{transform:translateX(70%)}}
.xtra:hover{border-color:var(--sky);box-shadow:0 14px 34px -18px rgba(34,181,240,.55);scale:1.01}
.xtra:focus-visible{outline:2px solid var(--sky);outline-offset:3px}
.xtra-ic{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--sky);color:#04121c;box-shadow:0 6px 18px -6px rgba(34,181,240,.8)}
.xtra-ic svg{width:20px;height:20px;fill:currentColor}
.xtra-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.xtra-tx b{font-weight:500;font-size:16px}
.xtra-tx span{font-size:13.5px;color:var(--t2)}
.xtra-n{flex:none;font-size:12.5px;padding:5px 10px;border-radius:999px;border:1px solid var(--line-2);color:var(--t2);white-space:nowrap}
.xtra.some .xtra-n{border-color:rgba(34,181,240,.5);color:var(--sky)}
.xtra-chev{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1px solid var(--line-2);transition:transform .45s var(--E,ease)}
.xtra-chev svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.xtra.open .xtra-chev{transform:rotate(180deg)}
.xtra.nudge{animation:xtra-nudge .9s var(--E,ease)}
@keyframes xtra-nudge{0%{box-shadow:0 0 0 0 rgba(34,181,240,.55)}100%{box-shadow:0 0 0 14px rgba(34,181,240,0)}}
:root[data-theme="light"] .xtra{background:linear-gradient(120deg,rgba(34,181,240,.16),rgba(255,255,255,.55) 60%);border-color:rgba(8,104,176,.3)}
:root[data-theme="light"] .xtra-ic{background:#0868b0;color:#fff}
@media (max-width:480px){.xtra{padding:14px;gap:10px}.xtra-n{display:none}}
@media (prefers-reduced-motion:reduce){.xtra::after,.xtra.nudge{animation:none}.opt-box{transition:none}}
#quoteForm button.xtra{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-start;text-align:left}#quoteForm .xtra-tx{align-items:flex-start;text-align:left}

/* phones: the two service columns can never grow wider than the screen, whatever a card holds (owner report, Brave on iPhone, 23 Oct 2026) */
@media (max-width:640px){.svcs{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}.svcs>.svc,.svc .case,.svc .tx{min-width:0;max-width:100%}.svc .covers{flex-wrap:wrap;max-width:100%}.svc .go{white-space:normal}html,body{max-width:100%;overflow-x:clip}}

/* scrolling: the in-page glass cards sit on a flat or softly glowing page, where a backdrop blur changes nothing you can see
   but costs a blur pass per card on every scrolled frame (choppy trackpad scrolling, owner report 31 Oct 2026).
   The blur stays where something moves behind the glass: the nav, the hero buttons, the claim card, dialogs and the phone bar.
   The cover chips blur only while their card is hovered. */
.tile,.svc,.claim,.rc,.cta-band,.join,.panel,.seg,.map-card,.covers i{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.svc:hover .covers i{-webkit-backdrop-filter:blur(8px)!important;backdrop-filter:blur(8px)!important}
/* the office map fades in once it has loaded (site.js loads it when its card is on screen and the page is at rest) */
.map-card iframe[data-src]{opacity:0;transition:opacity .6s ease}.map-card iframe[data-src].on{opacity:1}
/* while the page scrolls, hover effects wait (motion.js sets html.scrolling for the length of a scroll) */
html.scrolling .svcs,html.scrolling .claims,html.scrolling .rv-track,html.scrolling .cl-track,html.scrolling .events,html.scrolling .top10{pointer-events:none}