/* Sydney Marble Care. One stylesheet. The stone is the page. */

@font-face{font-family:'Schibsted Grotesk';src:url('../fonts/schibsted-grotesk-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Schibsted Grotesk';src:url('../fonts/schibsted-grotesk-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Schibsted Grotesk';src:url('../fonts/schibsted-grotesk-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Schibsted Grotesk';src:url('../fonts/schibsted-grotesk-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('../fonts/ibm-plex-mono-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('../fonts/ibm-plex-mono-500.woff2') format('woff2');font-weight:500;font-display:swap}

@property --pos{syntax:'<percentage>';inherits:true;initial-value:50%}

:root{
  color-scheme:only light;
  --ground:#ECEBE6;--surface:#F5F4F0;--surface-2:#E1E0DA;
  --ink:#16181A;--ink-2:#5B6065;--hair:#D3D2CC;--hair-2:#C4C3BC;
  --teal:#22BCBA;--teal-deep:#0E6362;--teal-ink:#0A4A49;
  --dark:#131518;--dark-2:#1B1E22;--bone:#F1F0EB;--bone-2:#C9CCC8;--hair-d:rgba(241,240,235,.13);
  --sans:'Schibsted Grotesk',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --ease-out:cubic-bezier(.23,1,.32,1);--ease-drawer:cubic-bezier(.32,.72,0,1);--ease-inout:cubic-bezier(.77,0,.175,1);
  --shadow-lift:0 1px 2px rgba(22,24,26,.05),0 18px 44px -22px rgba(22,24,26,.28);
  --shadow-float:0 2px 6px rgba(22,24,26,.06),0 40px 90px -36px rgba(22,24,26,.45);
  --nav-h:60px;--wrap:1280px;--gutter:clamp(18px,4vw,48px);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-padding-top:calc(var(--nav-h) + 30px);background:var(--dark)}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{background:var(--ground);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
p a,li a,.answer a,.artbody a{color:var(--teal-deep);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.16em}
h1,h2,h3,h4{font-weight:600;letter-spacing:-.025em;line-height:1.02;text-wrap:balance}
p,li{text-wrap:pretty}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--bone);padding:10px 14px;z-index:100}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--teal-deep);outline-offset:3px}
.dark :focus-visible{outline-color:var(--teal)}

/* ---------- type ---------- */
.t-mega{font-size:clamp(54px,10.5vw,152px);font-weight:700;letter-spacing:-.05em;line-height:.9}
.t-hero{font-size:clamp(42px,7.4vw,104px);font-weight:700;letter-spacing:-.04em;line-height:.94}
.t-1{font-size:clamp(38px,6vw,84px);font-weight:700;letter-spacing:-.04em;line-height:.94}
.t-2{font-size:clamp(28px,3.8vw,52px);letter-spacing:-.03em}
.t-3{font-size:clamp(21px,2.2vw,28px);letter-spacing:-.015em}
.lead{font-size:clamp(17px,1.6vw,21px);line-height:1.45;color:var(--ink-2);max-width:52ch}
.small{font-size:14px;line-height:1.5}
.label{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.dark .label{color:var(--bone-2)}

/* ---------- buttons: monochrome, inverting, pressable ---------- */
.btn{display:inline-flex;align-items:center;gap:12px;font-weight:600;font-size:15.5px;padding:16px 22px;border:1px solid transparent;cursor:pointer;line-height:1;white-space:nowrap;transition:transform 160ms var(--ease-out),background 180ms ease,border-color 180ms ease,color 180ms ease}
.btn:active{transform:scale(.97)}
.btn-ink{background:var(--ink);color:var(--bone)}
.btn-line{background:transparent;color:var(--ink);border-color:var(--hair-2)}
.dark .btn-ink,.btn-bone{background:var(--bone);color:var(--ink)}
.dark .btn-line{color:var(--bone);border-color:rgba(241,240,235,.35)}
.btn .arrow{width:30px;height:30px;display:grid;place-items:center;background:rgba(241,240,235,.12);margin:-8px -10px -8px 0;font-family:var(--mono);font-weight:500;font-size:15px;transition:transform 200ms var(--ease-out)}
.btn-line .arrow,.btn-bone .arrow{background:rgba(22,24,26,.07)}
@media(hover:hover) and (pointer:fine){
  .btn-ink:hover{background:#000}.btn-line:hover{border-color:var(--ink)}.dark .btn-line:hover{border-color:var(--bone)}
  .btn-bone:hover,.dark .btn-ink:hover{background:#fff}.btn:hover .arrow{transform:translate(2px,-1px)}
}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.call{font-family:var(--mono);font-size:15px;font-weight:500;display:inline-flex;align-items:center;gap:8px;padding:14px 6px}
.call::before{content:"";width:8px;height:8px;background:var(--teal);flex:none}

/* ---------- floating glass nav ---------- */
header.site{position:fixed;top:12px;left:0;right:0;z-index:40;pointer-events:none;padding:0 12px}
.nav{pointer-events:auto;max-width:var(--wrap);margin:0 auto;height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 8px 0 18px;background:rgba(236,235,230,.82);border:1px solid rgba(22,24,26,.09);box-shadow:0 1px 2px rgba(22,24,26,.06),0 14px 40px -18px rgba(22,24,26,.35);backdrop-filter:blur(16px) saturate(1.5);-webkit-backdrop-filter:blur(16px) saturate(1.5)}
@supports not (backdrop-filter:blur(1px)){.nav{background:var(--ground)}}
.brand{display:flex;align-items:center;flex:none}
.brand img{height:44px;width:auto}
nav.links{display:flex;gap:clamp(12px,1.8vw,24px);align-items:center;font-size:14.5px;font-weight:500}
nav.links a{position:relative;padding:6px 0;color:var(--ink-2)}
nav.links a[aria-current]{color:var(--ink)}
@media(hover:hover) and (pointer:fine){
  nav.links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--ink);transition:right 220ms var(--ease-out)}
  nav.links a:hover::after{right:0}nav.links a:hover{color:var(--ink)}
}
.nav-right{display:flex;align-items:center;gap:6px}
.nav-right .call{display:none}
@media(min-width:1100px){.nav-right .call{display:inline-flex}}
.nav .btn{padding:12px 14px;font-size:14px}
.burger{display:none;width:44px;height:44px;border:0;background:none;cursor:pointer;position:relative}
.burger span{position:absolute;left:12px;right:12px;height:2px;background:var(--ink);transition:transform 260ms var(--ease-drawer),opacity 160ms ease;top:50%}
.burger span:nth-child(1){transform:translateY(-6px)}.burger span:nth-child(3){transform:translateY(5px)}
.burger.open span:nth-child(1){transform:rotate(45deg)}.burger.open span:nth-child(2){opacity:0}.burger.open span:nth-child(3){transform:rotate(-45deg)}
.menu-only{display:none}
@media(max-width:900px){
  nav.links{position:fixed;inset:0;background:var(--dark);color:var(--bone);flex-direction:column;align-items:stretch;justify-content:center;gap:0;padding:80px var(--gutter) 40px;transform:translateY(-100%);visibility:hidden;transition:transform 420ms var(--ease-drawer),visibility 420ms;overflow-y:auto;overscroll-behavior:contain;z-index:39}
  nav.links.open{transform:none;visibility:visible}
  nav.links a{padding:14px 0;border-bottom:1px solid var(--hair-d);font-size:clamp(30px,8vw,44px);font-weight:700;letter-spacing:-.03em;color:var(--bone);opacity:0;transform:translateY(14px);transition:opacity 320ms var(--ease-out),transform 320ms var(--ease-out)}
  nav.links.open a{opacity:1;transform:none}
  nav.links.open a:nth-child(1){transition-delay:120ms}nav.links.open a:nth-child(2){transition-delay:160ms}nav.links.open a:nth-child(3){transition-delay:200ms}nav.links.open a:nth-child(4){transition-delay:240ms}nav.links.open a:nth-child(5){transition-delay:280ms}nav.links.open a:nth-child(6){transition-delay:320ms}nav.links.open a:nth-child(7){transition-delay:360ms}
  .menu-only{display:block}
  nav.links .menu-only.call{font-size:18px;font-weight:500;padding:26px 0 0;border-bottom:0;color:var(--teal);letter-spacing:0}
  .nav .btn{display:none}
  .burger{display:block;z-index:41}
  header.site.menu-open .nav{background:transparent;border-color:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
  header.site.menu-open .burger span{background:var(--bone)}
  header.site.menu-open .brand{visibility:hidden}
}

/* ---------- sections + bookends ---------- */
main > :first-child:not(.hero-full):not(article){padding-top:calc(var(--nav-h) + 56px)}
main > article:first-child > :first-child:not(.chapter){padding-top:calc(var(--nav-h) + 56px)}
section{padding:clamp(72px,10vw,150px) 0}
.sec-h{max-width:20ch}
.sec-sub{margin-top:18px;color:var(--ink-2);max-width:56ch;font-size:clamp(16px,1.35vw,19px)}
.dark{background:var(--dark);color:var(--bone);position:relative;isolation:isolate}
.dark::before{content:"";position:absolute;inset:0;background:var(--grain);opacity:.05;pointer-events:none;z-index:-1;mix-blend-mode:screen}
.dark .sec-sub,.dark .lead{color:var(--bone-2)}
.dark p a,.dark li a{color:var(--teal)}
.surface{background:var(--surface)}
.hr{border:0;border-top:1px solid var(--hair);margin:0}

/* ---------- full-bleed hero: the stone is the page ---------- */
.hero-full{position:relative;min-height:100dvh;display:grid;align-items:end;overflow:clip;padding:calc(var(--nav-h) + 40px) 0 clamp(40px,7vh,84px)}
.hero-full .bg{position:absolute;inset:0;z-index:-2}
.hero-full .bg img{width:100%;height:100%;object-fit:cover;object-position:center 60%}
.hero-full .scrim{position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,rgba(19,21,24,.86) 0%,rgba(19,21,24,.62) 38%,rgba(19,21,24,.18) 70%,rgba(19,21,24,.05) 100%),linear-gradient(to top,rgba(19,21,24,.7) 0%,rgba(19,21,24,0) 40%)}
.hero-full::before{opacity:.06}
.hero-full h1{color:var(--bone);max-width:9ch;margin-top:14px}
.hero-full .lead{color:var(--bone-2);margin-top:26px;max-width:46ch}
.hero-full .cta-row{margin-top:34px}
.hero-full .call{color:var(--bone)}
.hero-full .foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:clamp(40px,7vh,80px);padding-top:16px;border-top:1px solid rgba(241,240,235,.18);font-family:var(--mono);font-size:12.5px;color:var(--bone-2)}
@media(max-width:700px){.hero-full{min-height:100svh}.hero-full .bg img{object-position:center 45%}}

/* ---------- split hero (inner pages) ---------- */
.hero{padding-bottom:clamp(40px,6vw,80px);overflow:clip}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,80px);align-items:center}
.hero h1{margin-top:12px}
.hero .lead{margin-top:22px}
.hero .cta-row{margin-top:32px}
.hero-im .shell{background:var(--surface-2);padding:8px;box-shadow:var(--shadow-float)}
.hero-im img{width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--surface-2)}
.hero-im picture{display:block}
.hero-im .cap{margin-top:12px;display:flex;justify-content:space-between;gap:14px;font-family:var(--mono);font-size:12.5px;color:var(--ink-2);flex-wrap:wrap}
@media(max-width:860px){.hero .wrap{grid-template-columns:1fr;align-items:start}.hero-im{order:-1;max-width:460px}.hero-im img{aspect-ratio:4/3}}

/* ---------- marquee: the damage, in the customer's words ---------- */
.marquee{overflow:clip;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);padding:18px 0;background:var(--surface)}
.marquee .track{display:flex;gap:0;width:max-content}
.marquee .track span{font-family:var(--mono);font-size:clamp(15px,1.5vw,20px);white-space:nowrap;padding:0 28px;color:var(--ink-2);display:inline-flex;align-items:center;gap:28px}
.marquee .track span::after{content:"";width:9px;height:9px;background:var(--teal)}
@media(prefers-reduced-motion:no-preference){.marquee .track{animation:slide 48s linear infinite}}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- monumental proof ---------- */
.proof{padding:clamp(56px,8vw,110px) 0 clamp(40px,6vw,80px)}
.proof .row{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--hair)}
.proof .cell{padding:clamp(22px,3vw,40px) clamp(16px,2vw,28px) clamp(22px,3vw,40px) 0;border-left:1px solid var(--hair);padding-left:clamp(16px,2vw,28px)}
.proof .cell:first-child{border-left:0;padding-left:0}
.proof b{display:block;font-family:var(--mono);font-weight:500;font-size:clamp(56px,8.5vw,136px);letter-spacing:-.05em;line-height:.92}
.proof span{display:block;margin-top:14px;font-size:15px;color:var(--ink-2);max-width:18ch}
@media(max-width:760px){.proof .row{grid-template-columns:1fr 1fr}.proof .cell{border-left:0;border-top:1px solid var(--hair);padding-left:0}.proof .cell:nth-child(-n+2){border-top:0}.proof .cell:nth-child(even){padding-left:16px;border-left:1px solid var(--hair)}}

/* ---------- pinned scrubbed chapter: the polish happens as you scroll ---------- */
.chapter{height:260vh;position:relative;view-timeline:--chapter block;padding:0}
.chapter-pin{position:sticky;top:0;height:100vh;height:100dvh;display:grid;grid-template-rows:auto 1fr auto;padding:calc(var(--nav-h) + 28px) 0 24px;overflow:clip}
.chapter-pin > .wrap{width:100%}
.chapter-head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap}
.chapter-head p{color:var(--bone-2);max-width:40ch;font-size:clamp(15px,1.3vw,18px)}
.chapter-stage{position:relative;min-height:0;margin-top:18px}
.chapter-stage .compare{position:absolute;inset:0;aspect-ratio:auto}
.chapter-foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:16px;font-family:var(--mono);font-size:12.5px;color:var(--bone-2)}
.chapter .word{font-family:var(--sans);font-weight:700;font-size:clamp(28px,4vw,56px);letter-spacing:-.04em;color:var(--bone);line-height:1}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .chapter .compare.scrub{animation:wipe linear both;animation-timeline:--chapter;animation-range:contain 8% contain 92%}
    .chapter .compare.scrub input{display:none}
  }
}
@keyframes wipe{from{--pos:97%}to{--pos:3%}}
@media(max-width:700px){.chapter{height:220vh}.chapter-pin{grid-template-rows:auto 1fr auto}}
@media(max-height:720px){.chapter-head .t-1{font-size:clamp(26px,4.2vw,44px)}.chapter-head p{display:none}.chapter-stage{min-height:46vh}.chapter-pin{padding-top:calc(var(--nav-h) + 16px)}}

/* ---------- before / after ---------- */
.compare{position:relative;aspect-ratio:4/5;background:var(--surface-2);overflow:hidden;user-select:none;-webkit-user-select:none;touch-action:pan-y;--pos:50%}
.compare.wide{aspect-ratio:3/2}
.compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.compare .before{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.compare .cut{position:absolute;top:0;bottom:0;left:0;width:100%;pointer-events:none;transform:translateX(var(--pos))}
.compare .cut::before{content:"";position:absolute;top:0;bottom:0;left:-1px;width:2px;background:var(--bone);box-shadow:0 0 0 1px rgba(19,21,24,.3)}
.compare .cut::after{content:"";position:absolute;top:50%;left:0;width:48px;height:48px;transform:translate(-50%,-50%);background:var(--bone);border:1px solid var(--hair-2);box-shadow:0 8px 24px -8px rgba(0,0,0,.5);background-image:linear-gradient(90deg,var(--ink) 0,var(--ink) 1.5px,transparent 1.5px,transparent calc(100% - 1.5px),var(--ink) calc(100% - 1.5px));background-size:18px 12px;background-repeat:no-repeat;background-position:center}
.compare .tag{position:absolute;bottom:16px;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;padding:7px 10px;background:rgba(19,21,24,.74);color:var(--bone);pointer-events:none}
.compare .tag.b{left:16px}.compare .tag.a{right:16px}
.compare input[type=range]{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:ew-resize;-webkit-appearance:none;appearance:none}
.compare input[type=range]:focus-visible{opacity:1;outline:3px solid var(--teal);outline-offset:-3px;background:transparent}
.compare input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:48px;height:100%}
.compare-cap{margin-top:12px;display:flex;justify-content:space-between;gap:14px;font-family:var(--mono);font-size:12.5px;color:var(--ink-2);flex-wrap:wrap}
.dark .compare-cap{color:var(--bone-2)}

/* ---------- damage: full-bleed snap strip of tall photo cards ---------- */
.dmg .snap{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:36px var(--gutter) 12px;scroll-padding-left:var(--gutter);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.dmg .snap::-webkit-scrollbar{display:none}
.card{flex:0 0 min(78vw,400px);aspect-ratio:4/5;scroll-snap-align:start;position:relative;overflow:hidden;background:var(--surface-2);color:var(--bone);display:flex;align-items:flex-end;box-shadow:var(--shadow-lift);transition:transform 320ms var(--ease-out)}
.card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 900ms var(--ease-out)}
.card .tx{position:relative;padding:26px 24px;width:100%;background:linear-gradient(to top,rgba(19,21,24,.92) 0%,rgba(19,21,24,.7) 50%,rgba(19,21,24,0) 100%);padding-top:80px}
.card .verdict{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);margin-bottom:12px;display:block}
.card h3{font-size:clamp(26px,3vw,38px);letter-spacing:-.03em}
.card p{margin-top:8px;font-size:15px;color:var(--bone-2);max-width:30ch}
@media(hover:hover) and (pointer:fine){.card:hover img{transform:scale(1.04)}.card:hover{transform:translateY(-4px)}}
.dmg .hint{display:flex;justify-content:space-between;gap:16px;font-family:var(--mono);font-size:12.5px;color:var(--ink-2);margin-top:14px}

/* ---------- editorial index rows ---------- */
.index{margin-top:44px;border-top:1px solid var(--hair)}
.dark .index{border-color:var(--hair-d)}
.index-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:clamp(18px,4vw,64px);align-items:center;padding:clamp(24px,3.4vw,44px) 0;border-bottom:1px solid var(--hair);color:inherit}
.dark .index-row{border-color:var(--hair-d)}
.index-row h3{font-size:clamp(28px,4vw,56px);letter-spacing:-.035em}
.index-row p{color:var(--ink-2);margin-top:10px;max-width:44ch;font-size:16px}
.dark .index-row p{color:var(--bone-2)}
.index-row .thumb{width:min(100%,340px);aspect-ratio:3/2;object-fit:cover;justify-self:end;background:var(--surface-2);box-shadow:var(--shadow-lift);transition:transform 500ms var(--ease-out)}
.index-row .go{font-family:var(--mono);font-size:17px;width:52px;height:52px;border:1px solid var(--hair-2);display:grid;place-items:center;transition:transform 220ms var(--ease-out),background 180ms ease,color 180ms ease}
.dark .index-row .go{border-color:rgba(241,240,235,.3)}
@media(hover:hover) and (pointer:fine){
  .index-row:hover .go{background:var(--ink);color:var(--bone);transform:translateX(4px)}
  .dark .index-row:hover .go{background:var(--bone);color:var(--ink)}
  .index-row:hover .thumb{transform:translateY(-4px) scale(1.02)}
}
@media(max-width:760px){.index-row{grid-template-columns:1fr auto;grid-template-areas:"t go" "img img"}.index-row .thumb{grid-area:img;width:100%;justify-self:stretch;aspect-ratio:16/9}.index-row .tx{grid-area:t}.index-row .go{grid-area:go}}

/* ---------- job plate + ledger ---------- */
.plate{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.8fr);gap:clamp(24px,4vw,64px);align-items:start}
.ledger{font-family:var(--mono);font-size:13.5px;border-top:1px solid var(--hair);display:grid;grid-template-columns:auto 1fr;gap:0 18px}
.dark .ledger{border-color:var(--hair-d)}
.ledger dt,.ledger dd{padding:12px 0;border-bottom:1px solid var(--hair)}
.dark .ledger dt,.dark .ledger dd{border-color:var(--hair-d)}
.ledger dt{color:var(--ink-2);text-transform:uppercase;font-size:11.5px;letter-spacing:.06em;padding-top:14px}
.dark .ledger dt{color:var(--bone-2)}
.ledger .tbc{color:var(--teal-deep);border-bottom:1px dashed var(--teal-deep)}
.dark .ledger .tbc{color:var(--teal);border-color:var(--teal)}
.frames{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-top:32px}
.frame{background:var(--surface-2);display:block;box-shadow:var(--shadow-lift)}
.frame img{width:100%;aspect-ratio:4/5;object-fit:cover}
.frame figcaption{font-family:var(--mono);font-size:12px;color:var(--ink-2);padding:10px 4px 0;display:flex;justify-content:space-between;gap:10px}
.dark .frame figcaption{color:var(--bone-2)}
.steps{list-style:none;counter-reset:s;margin-top:28px;border-top:1px solid var(--hair)}
.dark .steps{border-color:var(--hair-d)}
.steps li{counter-increment:s;display:grid;grid-template-columns:72px 1fr;gap:18px;padding:22px 0;border-bottom:1px solid var(--hair);align-items:start}
.dark .steps li{border-color:var(--hair-d)}
.steps li::before{content:counter(s,decimal-leading-zero);font-family:var(--mono);font-size:clamp(24px,3vw,40px);font-weight:500;letter-spacing:-.04em;color:var(--teal-deep);line-height:1}
.dark .steps li::before{color:var(--teal)}
.cant{border-left:3px solid var(--teal);padding:4px 0 4px 22px;margin-top:28px}
.cant .label{margin-bottom:6px}
.cant p{max-width:56ch}
@media(max-width:820px){.plate{grid-template-columns:1fr}}

/* ---------- answer blocks ---------- */
.answers{margin-top:40px;border-top:1px solid var(--hair);columns:2;column-gap:clamp(28px,5vw,80px)}
.answer{break-inside:avoid;padding:24px 0;border-bottom:1px solid var(--hair)}
.answer h3{font-size:20px;letter-spacing:-.015em}
.answer p{margin-top:10px;color:var(--ink-2);font-size:15.5px;max-width:52ch}
.answer .ref{margin-top:10px;font-family:var(--mono);font-size:12px}
@media(max-width:800px){.answers{columns:1}}

.status{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;padding:9px 12px;border:1px solid var(--hair-2);margin-top:18px}
.status::before{content:"";width:9px;height:9px;flex:none;background:var(--teal)}
.status.assess::before{background:var(--ink-2)}
.status.no::before{background:transparent;border:1.5px solid var(--ink-2)}

/* ---------- price shape ---------- */
.bands{margin-top:32px;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:var(--hair);border:1px solid var(--hair)}
.band{background:var(--surface);padding:26px 24px 24px}
.band h3{font-size:18px}
.band .from{font-family:var(--mono);font-size:clamp(26px,2.8vw,38px);font-weight:500;margin-top:14px;letter-spacing:-.03em}
.band .from small{font-size:13px;font-weight:400;color:var(--ink-2);display:block;margin-top:6px;letter-spacing:0}
.band p{margin-top:12px;font-size:14px;color:var(--ink-2)}
.band .tbc{color:var(--teal-deep);border-bottom:1px dashed var(--teal-deep)}
.minimum{margin-top:22px;padding:20px 24px;border:1px solid var(--ink);display:flex;gap:18px;align-items:baseline;flex-wrap:wrap}
.minimum b{font-family:var(--mono);font-size:26px;font-weight:500;letter-spacing:-.03em}
.minimum span{color:var(--ink-2);font-size:15px}
.anchor{margin-top:36px;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--hair);border:1px solid var(--hair)}
.anchor > div{background:var(--ground);padding:28px 26px}
.anchor .label{margin-bottom:12px}
.anchor .n{font-family:var(--mono);font-size:clamp(32px,4vw,56px);font-weight:500;letter-spacing:-.04em;line-height:1}
.anchor .n.tbc{color:var(--teal-deep)}
.anchor p{margin-top:12px;font-size:14.5px;color:var(--ink-2);max-width:34ch}
@media(max-width:640px){.anchor{grid-template-columns:1fr}}

/* ---------- forms ---------- */
.form{max-width:640px}
.field{display:grid;gap:8px;margin-top:24px}
.field label{font-weight:600;font-size:15px}
.field .hint{font-size:13.5px;color:var(--ink-2)}
.field input[type=text],.field input[type=tel],.field input[type=email],.field input[type=date],.field textarea{width:100%;font:inherit;font-size:16px;padding:15px 16px;background:var(--surface);border:1px solid var(--hair-2);color:var(--ink);border-radius:0;-webkit-appearance:none;appearance:none;transition:border-color 160ms ease,box-shadow 160ms ease}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(34,188,186,.28)}
.field textarea{min-height:120px;resize:vertical}
.field .err{display:none;font-size:13.5px;color:#8F2D1F}
.field.bad .err{display:block}
.field.bad input,.field.bad textarea{border-color:#8F2D1F}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label{position:relative}
.chips input{position:absolute;opacity:0;width:1px;height:1px}
.chips span{display:inline-block;padding:12px 16px;border:1px solid var(--hair-2);background:var(--surface);font-size:15px;font-weight:500;cursor:pointer;transition:transform 140ms var(--ease-out),background 140ms ease,color 140ms ease,border-color 140ms ease}
.chips input:checked + span{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.chips input:focus-visible + span{outline:2px solid var(--teal-deep);outline-offset:2px}
.chips span:active{transform:scale(.97)}
.drop{border:1px dashed var(--hair-2);background:var(--surface);padding:24px;display:grid;gap:10px;justify-items:start;cursor:pointer;transition:border-color 160ms ease,background 160ms ease}
.drop.over{border-color:var(--teal-deep);background:var(--ground)}
.drop input{position:absolute;opacity:0;width:1px;height:1px}
.drop .big{font-weight:600;font-size:16px}
.thumbs{display:flex;gap:8px;flex-wrap:wrap}
.thumbs img{width:64px;height:64px;object-fit:cover;background:var(--surface-2)}
.honey{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.form-foot{margin-top:30px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.form-status{margin-top:16px;font-size:15px;min-height:1.4em}
.form-status.ok{color:var(--teal-ink)}.form-status.bad{color:#8F2D1F}
.sending{pointer-events:none}.sending .btn-ink{background:var(--ink-2)}

/* ---------- decision tree ---------- */
.tree{margin-top:32px;border-top:1px solid var(--hair)}
.tree > li{list-style:none;padding:24px 0;border-bottom:1px solid var(--hair)}
.tree h3{font-size:22px}
.tree ul{margin-top:14px;padding-left:0;list-style:none;display:grid;gap:8px}
.tree ul li{display:grid;grid-template-columns:auto 1fr;gap:12px;font-size:15.5px;color:var(--ink-2)}
.tree ul li b{font-family:var(--mono);font-size:12.5px;color:var(--ink);text-transform:uppercase;letter-spacing:.05em;padding-top:3px;min-width:52px}

/* ---------- split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px);align-items:center}
.split .im{aspect-ratio:4/5;object-fit:cover;width:100%;background:var(--surface-2)}
.split .tx p{margin-top:16px;color:var(--ink-2);max-width:50ch}
.dark .split .tx p{color:var(--bone-2)}
.split .tx .cta-row{margin-top:26px}
@media(max-width:820px){.split{grid-template-columns:1fr}.split.rev .im{order:-1}}

/* ---------- long-form ---------- */
.artwrap{max-width:720px}
.artbody h2{font-size:clamp(26px,3vw,38px);margin-top:48px;letter-spacing:-.03em}
.artbody h3{font-size:20px;margin-top:30px}
.artbody p{margin-top:16px;color:var(--ink-2);font-size:17px;line-height:1.62}
.artbody p.lead-p{color:var(--ink);font-size:clamp(19px,1.7vw,23px);line-height:1.45}
.artbody ul,.artbody ol{margin-top:14px;padding-left:22px;color:var(--ink-2)}
.artbody li{margin-top:8px}
.artbody table{width:100%;border-collapse:collapse;margin-top:18px;font-size:15px}
.artbody th,.artbody td{text-align:left;padding:10px 12px 10px 0;border-bottom:1px solid var(--hair);vertical-align:top}
.artbody th{font-family:var(--mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2);font-weight:500}

.mesh{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.mesh a{font-size:14.5px;font-weight:500;padding:10px 14px;border:1px solid var(--hair-2);transition:background 140ms ease,color 140ms ease,border-color 140ms ease}
.dark .mesh a{border-color:rgba(241,240,235,.28)}
@media(hover:hover) and (pointer:fine){.mesh a:hover{background:var(--ink);color:var(--bone);border-color:var(--ink)}.dark .mesh a:hover{background:var(--bone);color:var(--ink);border-color:var(--bone)}}

/* ---------- CTA band ---------- */
.ctaband .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,80px);align-items:center}
.ctaband h2{max-width:14ch}
.ctaband p{margin-top:20px;color:var(--bone-2);max-width:44ch;font-size:18px}
.ctaband .cta-row{margin-top:32px}
.ctaband .call{color:var(--bone)}
.ctaband .im{width:100%;box-shadow:var(--shadow-float)}
.ctaband .im img{width:100%;aspect-ratio:4/5;object-fit:cover;max-height:560px}
@media(max-width:820px){.ctaband .wrap{grid-template-columns:1fr}.ctaband .im img{aspect-ratio:4/3;max-height:none}}

/* ---------- footer ---------- */
footer.site{background:var(--dark);color:var(--bone);border-top:1px solid var(--hair-d);padding:clamp(56px,7vw,96px) 0 40px}
footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:clamp(24px,4vw,64px)}
footer .cols h3{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--bone-2);font-weight:500;margin-bottom:16px;line-height:1.4}
footer .cols a{display:block;padding:5px 0;color:var(--bone-2);font-size:15px}
footer .cols p{color:var(--bone-2);font-size:15px;max-width:34ch;margin-top:16px}
footer .brand-d img{height:44px;width:auto}
footer .base{margin-top:56px;padding-top:22px;border-top:1px solid var(--hair-d);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:12.5px;color:var(--bone-2)}
footer .teal{color:var(--teal)}
@media(hover:hover) and (pointer:fine){footer .cols a:hover{color:var(--bone)}}
@media(max-width:820px){footer .cols{grid-template-columns:1fr 1fr}}
@media(max-width:480px){footer .cols{grid-template-columns:1fr}}

/* ---------- mobile sticky call bar ---------- */
.stickycall{display:none}
@media(max-width:760px){
  .stickycall{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:38;background:rgba(236,235,230,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--hair);padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom))}
  .stickycall .btn{justify-content:center;padding:15px 12px;font-size:15px}
  body{padding-bottom:80px}
}

/* ---------- entrances: visible at rest, animate where supported ---------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .rv{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 36%}
    .rv-im{animation:rise-im linear both;animation-timeline:view();animation-range:entry 0% entry 44%}
    .rv-stagger > *{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 38%}
    .rv-stagger > *:nth-child(2){animation-range:entry 8% entry 46%}
    .rv-stagger > *:nth-child(3){animation-range:entry 16% entry 54%}
    .rv-stagger > *:nth-child(4){animation-range:entry 24% entry 62%}
    .rv-stagger > *:nth-child(n+5){animation-range:entry 30% entry 68%}
  }
}
@keyframes rise{from{opacity:0;transform:translateY(26px);filter:blur(8px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes rise-im{from{opacity:0;transform:translateY(16px) scale(.985);filter:blur(10px)}to{opacity:1;transform:none;filter:blur(0)}}
@media (prefers-reduced-motion: no-preference){
  .enter{transition:opacity 800ms var(--ease-out),transform 800ms var(--ease-out),filter 800ms var(--ease-out)}
  .enter:nth-child(2){transition-delay:90ms}.enter:nth-child(3){transition-delay:180ms}.enter:nth-child(4){transition-delay:270ms}
  @starting-style{.enter{opacity:0;transform:translateY(22px);filter:blur(8px)}}
    .hero-im .shell{transition:opacity 900ms var(--ease-out),transform 900ms var(--ease-out);transition-delay:120ms}
  @starting-style{.hero-im .shell{opacity:0;transform:translateY(18px) scale(.985)}}
}

/* ---------- life: nav that knows what is beneath it ---------- */
.nav{transition:background 320ms ease,border-color 320ms ease,box-shadow 320ms ease;view-transition-name:nav}
header.site.on-dark .nav{background:rgba(19,21,24,.58);border-color:rgba(241,240,235,.14);box-shadow:0 1px 2px rgba(0,0,0,.3),0 14px 40px -18px rgba(0,0,0,.7)}
@supports not (backdrop-filter:blur(1px)){header.site.on-dark .nav{background:var(--dark-2)}}
header.site.on-dark nav.links a{color:var(--bone-2)}
header.site.on-dark nav.links a[aria-current]{color:var(--bone)}
@media(hover:hover) and (pointer:fine){header.site.on-dark nav.links a:hover{color:var(--bone)}header.site.on-dark nav.links a::after{background:var(--bone)}}
header.site.on-dark .nav .call{color:var(--bone)}
header.site.on-dark .nav .btn-ink{background:var(--bone);color:var(--ink)}
header.site.on-dark .nav .btn-ink .arrow{background:rgba(22,24,26,.08)}
header.site.on-dark .burger span{background:var(--bone)}
header.site.on-dark .brand img{filter:invert(1) hue-rotate(180deg) saturate(1.15)}
.brand img{transition:filter 320ms ease}
.stickycall{view-transition-name:stickycall}

/* ---------- life: hero parallax + one sweep of light across the stone ---------- */
@media (prefers-reduced-motion: no-preference){
  .hero-full .bg{transition:opacity 900ms ease,transform 2400ms var(--ease-out)}
  @starting-style{.hero-full .bg{opacity:0;transform:scale(1.06)}}
  @supports (animation-timeline: view()){
    .hero-full .bg img{animation:par linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
    .ctaband .im{overflow:hidden}
    .ctaband .im img{animation:par2 linear both;animation-timeline:view();animation-range:entry 0% exit 100%;scale:1.12}
  }
  .hero-full::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;mix-blend-mode:screen;background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.16) 50%,transparent 58%);background-size:260% 100%;background-position:130% 0;animation:sheen 2.8s var(--ease-inout) 600ms 1 both}
  .hero-full h1 .w{display:inline-block;transition:opacity 720ms var(--ease-out),transform 720ms var(--ease-out),filter 720ms var(--ease-out);transition-delay:calc(140ms + var(--i,0) * 75ms)}
  @starting-style{.hero-full h1 .w{opacity:0;transform:translateY(.32em);filter:blur(8px)}}
  .compare:not(.scrub) .cut::after{animation:nudge 1500ms var(--ease-inout) 1400ms 2}
  .marquee:hover .track{animation-play-state:paused}
}
@keyframes par{to{transform:translateY(16%) scale(1.06)}}
@keyframes par2{from{transform:translateY(-6%)}to{transform:translateY(6%)}}
@keyframes sheen{from{background-position:130% 0}to{background-position:-30% 0}}
@keyframes nudge{0%,100%{transform:translate(-50%,-50%)}30%{transform:translate(calc(-50% - 9px),-50%)}65%{transform:translate(calc(-50% + 9px),-50%)}}

/* ---------- life: damage cards tilt and light toward the pointer ---------- */
@media(hover:hover) and (pointer:fine){
  .card{transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0));transition:transform 420ms var(--ease-out),box-shadow 420ms var(--ease-out);transform-style:preserve-3d}
  .card:hover{--ty:-6px;box-shadow:var(--shadow-float)}
  .card::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity 320ms ease;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(241,240,235,.22),transparent 62%);mix-blend-mode:screen}
  .card:hover::after{opacity:1}
}

/* ---------- life: pages crossfade, the nav stays put ---------- */
@media (prefers-reduced-motion: no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:280ms;animation-timing-function:var(--ease-out)}
}

/* ---------- print ---------- */
@media print{
  header.site,.stickycall,footer.site,.ctaband,.burger,.nav-right,.marquee{display:none!important}
  body{background:#fff;color:#000;padding:0}
  .chapter{height:auto}.chapter-pin{position:static;height:auto}
  .compare .before{clip-path:none;position:static}.compare .after{display:none}.compare .cut,.compare .tag,.compare input{display:none}
  a::after{content:" (" attr(href) ")";font-size:.85em;color:#555}
  .index-row .go{display:none}.hero-full{min-height:0}.hero-full .scrim,.hero-full .bg{display:none}.hero-full h1,.hero-full .lead{color:#000}
}