/* Self-hosted Google Fonts (SIL Open Font License 1.1), latin subset only. Variable files, so one file per family and style. */
@font-face{font-family:'Archivo';font-style:italic;font-weight:800 900;font-display:swap;src:url(fonts/archivo-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Archivo';font-style:normal;font-weight:600 900;font-display:swap;src:url(fonts/archivo-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/instrument-sans-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/jetbrains-mono-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* Base reset (the original prototype got this from its hosting skeleton) */
html{-webkit-text-size-adjust:100%}
body{margin:0}
img{max-width:100%}

/* Layout concept: a precision garage. Near-black workshop ground, heavy Archivo headlines, safety-orange for actions,
   scan-blue for mesh data, a live prep-to-CAD part as the hero. Mono is reserved for real data: dimensions, part and file names. */
:root{
  --bg:#0B0B0C; --surface:#141517; --raised:#1C1E21; --line:#26292D;
  --fg:#F2F2F0; --muted:#A7ABB1; --dim:#868B93;
  --copper:#F26B1D; --copper-ink:#0B0B0C; --teal:#4D8DFF; --teal-soft:rgba(77,141,255,.14);
  --warn:#F2B33D; --ok:#4FC28E;
  --display:"Archivo","Arial Black","Helvetica Neue",Arial,sans-serif;
  --body:"Instrument Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --grid:rgba(242,107,29,.16);
  color-scheme:dark;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:#F4F5F6; --surface:#FFFFFF; --raised:#ECEEF0; --line:#D9DCE0;
    --fg:#15171A; --muted:#50555C; --dim:#666C74;
    --copper:#BF4C0A; --copper-ink:#FFFFFF; --teal:#1F5FD6; --teal-soft:rgba(31,95,214,.10);
    --warn:#9A6B07; --ok:#1E8556; --grid:rgba(212,86,14,.10);
    color-scheme:light;
  }
}
:root[data-theme="light"]{
  --bg:#F4F5F6; --surface:#FFFFFF; --raised:#ECEEF0; --line:#D9DCE0;
  --fg:#15171A; --muted:#50555C; --dim:#666C74;
  --copper:#BF4C0A; --copper-ink:#FFFFFF; --teal:#1F5FD6; --teal-soft:rgba(31,95,214,.10);
  --warn:#9A6B07; --ok:#1E8556; --grid:rgba(212,86,14,.10);
  color-scheme:light;
}
[hidden]{display:none!important}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{background:var(--bg);color:var(--fg);font:400 16px/1.6 var(--body);-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:#0B0B0C}
a{color:inherit}
:focus-visible{outline:2px solid var(--copper);outline-offset:3px;border-radius:2px}
h1,h2,h3{font-family:var(--display);font-weight:800;line-height:.95;letter-spacing:.005em;text-wrap:balance;margin:0;text-transform:uppercase}
p{margin:0}
.wrap{max-width:1200px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.mono{font-family:var(--mono);font-size:12.5px;letter-spacing:0}
.muted{color:var(--muted)}
.num{font-variant-numeric:tabular-nums}
.fine{font-size:13px;color:var(--dim)}

/* header */
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
header.top .wrap{display:flex;align-items:center;gap:24px;padding-block:14px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;margin-right:auto}
.brand svg{flex:none}
.brand span{font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:.04em;text-transform:uppercase;line-height:1}
.brand small{display:block;font-size:12px;color:var(--muted);margin-top:3px}
nav.links{display:flex;gap:22px}
nav.links a{text-decoration:none;font-size:14px;color:var(--muted);font-weight:500}
nav.links a:hover{color:var(--fg)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:3px;padding:12px 18px;font:600 14px/1 var(--body);text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform .15s,background .15s,border-color .15s}
.btn-primary{background:var(--copper);color:var(--copper-ink)}
.btn-primary:hover{transform:translateY(-1px)}
.btn-ghost{border-color:var(--line);color:var(--fg);background:transparent}
.btn-ghost:hover{border-color:var(--fg)}
@media (max-width:820px){nav.links{display:none}.brand small{display:none}}

/* hero */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:32px 32px}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:40px;align-items:center;padding-block:56px 64px}
.hero-copy{min-width:0;display:flex;flex-direction:column;gap:22px}
.eyebrow{display:flex;gap:10px;align-items:center;color:var(--teal)}
.eyebrow::before{content:"";width:28px;height:1px;background:currentColor}
.hero h1{font-size:clamp(56px,8.6vw,118px);font-weight:900}
.hero .lede{font-size:19px;color:var(--muted);max-width:34ch}
.hero .ctas{display:flex;gap:12px;flex-wrap:wrap}

.viewer{position:relative;min-width:0;aspect-ratio:1/0.86;max-width:100%;border:1px solid var(--line);background:color-mix(in srgb,var(--surface) 70%,transparent);border-radius:4px}
.viewer canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:pan-y;border-radius:4px}
.viewer canvas:active{cursor:grabbing}
.viewer .corner{position:absolute;width:14px;height:14px;border-color:var(--copper);border-style:solid;pointer-events:none}
.c-tl{top:-1px;left:-1px;border-width:2px 0 0 2px}.c-tr{top:-1px;right:-1px;border-width:2px 2px 0 0}
.c-bl{bottom:-1px;left:-1px;border-width:0 0 2px 2px}.c-br{bottom:-1px;right:-1px;border-width:0 2px 2px 0}
.v-top{position:absolute;top:12px;left:14px;right:14px;display:flex;justify-content:space-between;gap:10px;pointer-events:none;color:var(--muted);font-size:13px}
.v-top b{color:var(--fg);font-weight:600}
.v-bottom{position:absolute;left:12px;right:12px;bottom:12px;display:flex;justify-content:space-between;align-items:end;gap:12px;flex-wrap:wrap}
.modes{display:flex;border:1px solid var(--line);background:var(--bg);border-radius:3px;overflow:hidden}
.modes button{font:600 13px/1 var(--body);padding:10px 12px;background:transparent;color:var(--muted);border:0;cursor:pointer}
.modes button+button{border-left:1px solid var(--line)}
.modes button[aria-pressed="true"]{background:var(--teal);color:var(--bg)}
.modes button[data-mode="cad"][aria-pressed="true"]{background:var(--copper);color:var(--copper-ink)}
.modes button{position:relative}
.modes button::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:currentColor;opacity:.55;transform-origin:left;transform:scaleX(var(--p,0))}
.v-readout{color:var(--muted);text-align:right;pointer-events:none;font-size:13px}
.v-readout b{color:var(--fg);font-weight:600}
.v-fallback{position:absolute;inset:0;display:grid;place-items:center;padding:24px;text-align:center;color:var(--muted)}
.v-hint{position:absolute;top:40px;left:14px;color:var(--dim);font-size:13px}
@media (max-width:900px){.hero .wrap{grid-template-columns:minmax(0,1fr);padding-block:36px 44px}.viewer{aspect-ratio:1/0.95}}
@media (max-width:480px){.v-readout{display:none}.modes button{padding:9px 9px;font-size:11px}}

/* sections */
section.band{border-bottom:0}
section.band>.wrap{padding-block:80px;display:flex;flex-direction:column;gap:40px}
.sheet-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 48px;align-items:end;border-top:1px solid var(--line);padding-top:28px}
.sheet-head .tag{grid-column:1/-1;display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:10px;color:var(--dim)}
.sheet-head h2{font-size:clamp(40px,5.4vw,72px)}
.sheet-head p{color:var(--muted);font-size:17px;max-width:52ch}
@media (max-width:820px){.sheet-head{grid-template-columns:minmax(0,1fr)}section.band>.wrap{padding-block:56px}}

/* services + plate */
.svc-grid{display:block}
.svc-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--line);border-radius:4px;overflow:hidden;min-width:0}
.svc{display:flex;flex-direction:column;gap:12px;padding:24px 22px;background:var(--surface);min-width:0}
.svc+.svc{border-left:1px solid var(--line)}
.svc h3{font-size:28px;order:1}
.svc .price{order:0;display:flex;align-items:baseline;gap:8px;padding-bottom:14px;border-bottom:1px dashed var(--line)}
.svc .price strong{font-family:var(--display);font-size:48px;font-weight:800;line-height:1}
.svc .price span{color:var(--dim);font-size:13px;order:1}
.svc p{order:2;color:var(--muted);font-size:15px}
.svc .ext{order:3;margin-top:auto;padding-top:8px;font-family:var(--mono);font-size:12.5px;color:var(--teal)}
.svc-list .partner-note{grid-column:1/-1;margin:0;border:0;border-top:1px solid var(--line);border-radius:0}
.partner-note{margin-top:20px;display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border:1px dashed var(--line);border-radius:4px;color:var(--muted);font-size:15px}
.partner-note b{color:var(--fg);font-weight:600;white-space:nowrap}
figure.plate{margin:0;display:flex;flex-direction:column;gap:10px;position:sticky;top:calc(env(safe-area-inset-top,0px) + 90px);min-width:0}
figure.plate img{display:block;width:100%;height:auto;max-width:100%;aspect-ratio:4/5;border:1px solid var(--line);border-radius:4px;background:#18232D}
figure.plate figcaption{font-size:13px;color:var(--dim);line-height:1.5}
figure.plate figcaption b{color:var(--fg);font-weight:600}
@media (max-width:900px){.svc-grid{grid-template-columns:minmax(0,1fr)}figure.plate{position:static;max-width:440px}}
@media (max-width:820px){.svc-list{grid-template-columns:minmax(0,1fr)}.svc+.svc{border-left:0;border-top:1px solid var(--line)}}

/* quote */
.quote{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:24px;align-items:stretch}
.qpanel{border:1px solid var(--line);border-radius:4px;background:var(--surface);min-width:0;display:flex;flex-direction:column}
.qhead{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid var(--line);flex-wrap:wrap;color:var(--dim);font-size:14px}
.qbody{padding:28px 24px;display:flex;flex-direction:column;gap:26px;flex:1}
.sentence{font-size:clamp(22px,2.6vw,30px);line-height:1.6;font-weight:400}
.sentence label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.blank{font:700 1em/1.2 var(--display);text-transform:uppercase;letter-spacing:.02em;color:var(--copper);background:transparent;border:0;border-bottom:2px solid var(--copper);padding:0 2px;border-radius:0;font-size:1.15em}
.blank:focus{outline:none;background:color-mix(in srgb,var(--copper) 12%,transparent)}
input.blank{width:3ch;text-align:center}
select.blank{cursor:pointer;-webkit-appearance:none;appearance:none;padding-right:.9em;max-width:100%;
  background-image:linear-gradient(45deg,transparent 50%,var(--copper) 50%),linear-gradient(135deg,var(--copper) 50%,transparent 50%);
  background-size:.26em .26em;background-position:calc(100% - .36em) 60%,calc(100% - .1em) 60%;background-repeat:no-repeat}
select.blank option{color:var(--fg);background:var(--surface);font:400 16px var(--body);text-transform:none}
.ruler{display:flex;flex-direction:column;gap:6px;min-width:0}
.ruler input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:44px;background:transparent;cursor:pointer;margin:0}
.ruler input[type=range]::-webkit-slider-runnable-track{height:26px;border:1px solid var(--muted);border-radius:2px;
  background:repeating-linear-gradient(90deg,var(--muted) 0 1px,transparent 1px 2.5%) bottom/100% 7px no-repeat,
             repeating-linear-gradient(90deg,var(--fg) 0 1px,transparent 1px 25%) bottom/100% 14px no-repeat,var(--bg)}
.ruler input[type=range]::-moz-range-track{height:26px;border:1px solid var(--muted);border-radius:2px;
  background:repeating-linear-gradient(90deg,var(--muted) 0 1px,transparent 1px 2.5%) bottom/100% 7px no-repeat,
             repeating-linear-gradient(90deg,var(--fg) 0 1px,transparent 1px 25%) bottom/100% 14px no-repeat,var(--bg)}
.ruler input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:4px;height:40px;margin-top:-8px;background:var(--copper);border:0;border-radius:1px;box-shadow:0 0 0 3px color-mix(in srgb,var(--copper) 25%,transparent)}
.ruler input[type=range]::-moz-range-thumb{width:4px;height:40px;background:var(--copper);border:0;border-radius:1px}
.r-scale{display:grid;grid-template-columns:repeat(4,1fr);color:var(--dim);font-size:13px}
.r-scale span{padding-left:6px;border-left:1px solid var(--line);display:flex;flex-direction:column;gap:2px}
.r-scale span b{color:var(--muted);font-weight:500}
.r-scale span.on b{color:var(--copper)}
.send{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:start}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field.full{grid-column:1/-1}
.field label{font-size:13px;font-weight:600}
.field label i{font-style:normal;font-weight:400;color:var(--dim)}
.field input[type=email],.field input[type=text]{font:400 15px/1.4 var(--body);color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:3px;padding:11px 12px;width:100%;min-width:0}
.field input:focus{outline:2px solid var(--copper);outline-offset:0;border-color:transparent}
.err{color:var(--copper);font-size:13px}
.drop{position:relative;display:flex;align-items:center;gap:10px;min-height:46px;border:1px dashed var(--muted);border-radius:3px;padding:8px 12px;background:var(--bg);font-size:14px;color:var(--muted)}
.drop input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.drop.over{border-color:var(--copper);background:var(--teal-soft)}
.thumbs{display:flex;flex-wrap:wrap;gap:8px}
.thumbs:empty{display:none}
.thumbs figure{margin:0;position:relative;width:60px;height:60px;border:1px solid var(--line);border-radius:3px;overflow:hidden}
.thumbs img{width:100%;height:100%;object-fit:cover}
.thumbs button{position:absolute;top:2px;right:2px;width:22px;height:22px;border:0;border-radius:2px;background:var(--bg);color:var(--fg);cursor:pointer;font-size:13px;line-height:1}
.q-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.est .qbody{gap:14px}
.est-big{font-family:var(--display);font-weight:900;font-size:68px;line-height:.9}
.est-big.custom{font-size:42px;color:var(--teal)}
.est-lines{display:flex;flex-direction:column;gap:8px;font-size:14px}
.est-lines div{display:flex;justify-content:space-between;gap:12px;color:var(--muted);border-bottom:1px dashed var(--line);padding-bottom:8px}
.est-lines div b{color:var(--fg);font-weight:600;text-align:right}
.est-why{color:var(--muted);font-size:14px}
.disclose{margin-top:auto;font-size:13px;color:var(--dim);border-top:1px dashed var(--line);padding-top:12px}
.sent pre{white-space:pre-wrap;font:400 13px/1.6 var(--mono);background:var(--bg);border:1px solid var(--line);border-radius:3px;padding:14px;margin:0;max-height:300px;overflow:auto}
@media (max-width:980px){.quote{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.send{grid-template-columns:minmax(0,1fr)}.est-big{font-size:56px}.r-scale{font-size:10px}}

/* camden: steps + map */
.local-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start}
.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;counter-reset:s}
.steps li{display:grid;grid-template-columns:64px minmax(0,1fr);gap:4px 16px;padding:18px 0;border-top:1px solid var(--line);counter-increment:s}
.steps li:last-child{border-bottom:1px solid var(--line)}
.steps li::before{content:counter(s);grid-row:1/3;font-family:var(--display);font-weight:900;font-size:44px;line-height:1;color:var(--copper)}
.steps h3{font-size:24px}
.steps p{color:var(--muted);font-size:15px}
.map{border:1px solid var(--line);border-radius:4px;background:var(--surface);aspect-ratio:1/0.8;max-width:100%;position:relative}
.map svg{position:absolute;inset:0;width:100%;height:100%}
.map .lab{font-family:var(--body);font-size:11.5px;fill:var(--muted)}
.map .labh{font-family:var(--display);font-size:17px;font-weight:800;fill:var(--fg);text-transform:uppercase}
@media (max-width:900px){.local-grid{grid-template-columns:minmax(0,1fr)}}

/* prices */
.price-grid{display:flex;flex-direction:column;gap:24px}
.tier-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:2px solid var(--fg)}
.tier{display:flex;flex-direction:column;gap:6px;padding:16px 18px 18px;position:relative;min-width:0}
.tier+.tier{border-left:1px solid var(--line)}
.tier::before{content:"";position:absolute;left:-1px;top:-2px;width:1px;height:14px;background:var(--fg)}
.tier:first-child::before{left:0}
.tier h3{font-size:26px}
.tier .size{font-family:var(--mono);font-size:12.5px;color:var(--teal)}
.tier .parts{color:var(--muted);font-size:14px}
.tier strong{margin-top:auto;padding-top:10px;font-family:var(--display);font-size:34px;font-weight:800;line-height:1}
.tier strong.q{font-size:24px;color:var(--muted)}
@media (max-width:820px){.tier-row{grid-template-columns:repeat(2,minmax(0,1fr))}.tier:nth-child(3){border-left:0}.tier:nth-child(n+3){border-top:1px solid var(--line)}}
.tiers{overflow-x:auto}
.tier-table{width:100%;border-collapse:collapse;font-size:15px;min-width:440px}
.tier-table th,.tier-table td{padding:14px 12px;border-bottom:1px solid var(--line);text-align:left}
.tier-table thead th{font-size:13px;font-weight:600;color:var(--dim)}
.tier-table .r{text-align:right}
.tier-table tbody th{font-family:var(--display);font-size:24px;font-weight:800;text-transform:uppercase}
.tier-table td{color:var(--muted)}
.tier-table td.r{color:var(--fg);font-weight:600;white-space:nowrap}
.rates{border:1px solid var(--line);border-radius:4px;background:var(--surface);padding:22px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 32px;align-items:start}
.rates .fine{grid-column:1/-1}
.rates .rate-row{flex-direction:column-reverse;align-items:flex-start;gap:6px}
.rates .rate-row strong{font-size:40px}
.rates .rate-row span{color:var(--muted);font-size:14px}
@media (max-width:820px){.rates{grid-template-columns:minmax(0,1fr)}}
.rate-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;border-bottom:1px dashed var(--line);padding-bottom:12px}
.rate-row strong{font-family:var(--display);font-size:28px;font-weight:800;line-height:1;white-space:nowrap}
.adj{display:flex;flex-direction:column;gap:8px;font-size:14px;color:var(--muted)}
.adj div{display:flex;justify-content:space-between;gap:12px}
.adj b{color:var(--fg);font-weight:600;white-space:nowrap}
@media (max-width:900px){.price-grid{grid-template-columns:minmax(0,1fr)}}

/* process showcase */
.pr{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px 32px;align-items:center}
.pr-main{margin:0;border:1px solid var(--line);border-radius:4px;overflow:hidden;background:#1F2D39;aspect-ratio:4/3;max-width:100%}
.pr-main img{display:block;width:100%;height:100%;object-fit:cover;transition:opacity .25s}
.pr-info{display:flex;flex-direction:column;gap:14px;min-width:0}
.pr-step{color:var(--teal);font-weight:600;font-size:14px}
.pr-info h3{font-size:clamp(32px,3.4vw,46px)}
.pr-info p{color:var(--muted);font-size:17px;max-width:42ch}
.pr-file{color:var(--fg);border:1px solid var(--line);border-radius:3px;padding:6px 10px;align-self:flex-start}
.pr-nav{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.pr-thumbs{grid-column:1/-1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.pr-thumb{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;gap:6px;min-width:0}
.pr-thumb img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--line);border-radius:3px;opacity:.6;transition:opacity .15s,border-color .15s}
.pr-thumb span{font-size:13px;color:var(--muted)}
.pr-thumb span b{color:var(--copper);font-family:var(--display);font-size:16px;margin-right:4px}
.pr-thumb:hover img{opacity:.9}
.pr-thumb[aria-pressed="true"] img{opacity:1;border-color:var(--copper)}
.pr-thumb[aria-pressed="true"] span{color:var(--fg)}
.pr-thumb:focus-visible img{outline:2px solid var(--copper);outline-offset:2px}
.dots{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:center;border-top:1px solid var(--line);padding-top:40px}
.dots figure{margin:0;border:1px solid var(--line);border-radius:4px;overflow:hidden;aspect-ratio:4/3;max-width:100%;background:#1F2D39}
.dots figure img{display:block;width:100%;height:100%;object-fit:cover}
.dots-copy{display:flex;flex-direction:column;gap:14px;min-width:0}
.dots-copy h3{font-size:36px}
.dots-copy p{color:var(--muted);max-width:52ch}
@media (max-width:900px){.pr,.dots{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.pr-thumbs{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}.pr-thumb{flex:0 0 38%;scroll-snap-align:start}}

/* complexity */
.cx-link{color:inherit;text-decoration:underline;text-decoration-color:var(--copper);text-underline-offset:4px}
.cx{display:flex;flex-direction:column;gap:22px;border-top:1px solid var(--line);padding-top:32px;margin-top:8px}
.cx-what{display:flex;flex-direction:column;gap:12px;max-width:820px}
.cx-what h3{font-size:34px}
.cx-what p{color:var(--muted)}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.chips li{border:1px solid var(--line);background:var(--surface);border-radius:3px;padding:6px 10px;font-size:14px}
.cx-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:2px solid var(--fg)}
.cx-lvl{display:flex;flex-direction:column;gap:6px;padding:16px 18px 18px;min-width:0}
.cx-lvl+.cx-lvl{border-left:1px solid var(--line)}
.cx-lvl h4{margin:0;font-family:var(--display);font-weight:800;font-size:26px;text-transform:uppercase;line-height:1}
.cx-lvl .cnt{font-family:var(--mono);font-size:12.5px;color:var(--teal)}
.cx-lvl strong{font-family:var(--display);font-size:34px;font-weight:800;line-height:1;margin-top:6px}
.cx-lvl i{display:block;height:6px;border-radius:3px;background:var(--line);position:relative;overflow:hidden}
.cx-lvl i::after{content:"";position:absolute;inset:0;width:calc(var(--w)*100%);background:var(--copper)}
.cx-lvl .eg{color:var(--muted);font-size:14px}
.cx-example{font-size:17px;color:var(--muted)}
.cx-example b{color:var(--fg)}
@media (max-width:820px){.cx-row{grid-template-columns:repeat(2,minmax(0,1fr))}.cx-lvl:nth-child(3){border-left:0}.cx-lvl:nth-child(n+3){border-top:1px solid var(--line)}}

/* faq */
.faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px}
details{border-top:1px solid var(--line);padding:16px 0}
summary{cursor:pointer;font-weight:600;font-size:17px;list-style:none;display:flex;justify-content:space-between;gap:12px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:var(--display);font-size:22px;line-height:1;color:var(--copper)}
details[open] summary::after{content:"\2212"}
details p{color:var(--muted);margin-top:10px;font-size:15px;max-width:60ch}
@media (max-width:820px){.faq{grid-template-columns:minmax(0,1fr)}}

/* title block footer */
footer .wrap{padding-block:48px 40px;display:flex;flex-direction:column;gap:20px}
.tblock{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;border:1px solid var(--fg);font-size:14px}
.tblock>div{padding:10px 12px;border-left:1px solid var(--fg);display:flex;flex-direction:column;gap:4px;min-width:0}
.tblock>div:first-child{border-left:0}
.tblock .row2{border-top:1px solid var(--fg)}
.tblock .k{font-size:12px;color:var(--dim)}
.tblock .v{font-weight:600;overflow-wrap:anywhere}
.tblock .v.ph{color:var(--warn)}
.tblock .big{font-family:var(--display);font-size:30px;font-weight:900;text-transform:uppercase;line-height:1}
.copybtn{background:none;border:1px solid var(--line);color:var(--muted);font:600 12px/1 var(--body);padding:5px 8px;border-radius:2px;cursor:pointer;align-self:flex-start}
@media (max-width:820px){.tblock{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.tblock>div:nth-child(odd){border-left:0}.tblock>div:nth-child(n+3){border-top:1px solid var(--fg)}}
.legal{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:var(--dim);font-size:13px}
.legal b{color:var(--warn);font-weight:600}

/* ---- Precision garage restyle ---- */
.tier-img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:4px;background:#F2F3F4;margin-bottom:6px}
.tier{padding:12px 12px 18px}

.nohour{display:flex;gap:18px;align-items:flex-start;border:1.5px solid var(--copper);border-radius:6px;padding:20px 22px;background:color-mix(in srgb,var(--copper) 8%,var(--surface))}
.nohour b{display:block;font-family:var(--display);font-weight:900;font-size:clamp(20px,2.2vw,26px);margin-bottom:6px}
.nohour p{color:var(--muted);max-width:75ch}
.field select.sel{font:400 15px/1.4 var(--body);color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:3px;padding:11px 12px;width:100%;min-width:0}
.field select.sel:focus{outline:2px solid var(--copper);outline-offset:0;border-color:transparent}
.travel{display:flex;flex-direction:column;gap:18px;border-top:1px solid var(--line);padding-top:32px;margin-top:8px}
.travel-head{display:flex;flex-direction:column;gap:10px;max-width:820px}
.travel-head h3{font-size:28px;font-weight:800}
.travel-head p{color:var(--muted)}
.tr-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:2px solid var(--copper)}
.tr{display:flex;flex-direction:column;gap:6px;padding:16px 16px 18px;min-width:0}
.tr+.tr{border-left:1px solid var(--line)}
.tr .d{font-family:var(--mono);font-size:12.5px;color:var(--teal)}
.tr strong{font-family:var(--display);font-size:30px;font-weight:900;line-height:1}
.tr strong.q{font-size:20px;color:var(--muted);padding-block:5px}
.tr .eg{font-size:13px;color:var(--muted)}
@media (max-width:900px){.tr-row{grid-template-columns:repeat(3,minmax(0,1fr))}.tr:nth-child(4){border-left:0}.tr:nth-child(n+4){border-top:1px solid var(--line)}}
@media (max-width:520px){.tr-row{grid-template-columns:repeat(2,minmax(0,1fr))}.tr:nth-child(4){border-left:1px solid var(--line)}.tr:nth-child(3),.tr:nth-child(5){border-left:0}.tr:nth-child(n+3){border-top:1px solid var(--line)}}
h1,h2,h3,h4{font-family:var(--display);letter-spacing:-.015em;line-height:1.02}
h2,h3,h4{text-transform:none}
.hero{background-image:radial-gradient(ellipse 60% 70% at 78% 45%,var(--grid),transparent 70%),linear-gradient(180deg,transparent 60%,color-mix(in srgb,var(--surface) 60%,transparent));background-size:auto}
.hero h1{font-size:clamp(46px,6.4vw,88px);font-weight:900;line-height:.98;text-transform:uppercase}
.hero h1 .hl{color:var(--copper)}
.brand span{font-family:var(--display);font-weight:900;font-size:21px;letter-spacing:.02em;text-transform:uppercase}
.brand small{font-family:var(--display);font-weight:800;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg);margin-top:1px}
.btn{border-radius:4px;font-weight:700}
.btn-ghost{border-color:var(--fg)}
.sheet-head{border-top:0;padding-top:0}
.sheet-head h2{font-size:clamp(32px,4vw,52px);font-weight:800}
.modes button[aria-pressed="true"]{background:var(--teal);color:#fff}
.viewer{background:color-mix(in srgb,var(--surface) 80%,transparent)}
.ic{color:var(--copper);flex:none}
.feats{border-bottom:1px solid var(--line);background:var(--surface)}
.feats .wrap{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));padding-block:28px}
.feat{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:4px 12px;min-width:0}
.feat+.feat{border-left:1px solid var(--line)}
.feat b{font-family:var(--display);font-weight:800;font-size:15px;margin-top:4px}
.feat span{font-size:13px;color:var(--muted)}
@media (max-width:900px){.feats .wrap{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:22px}.feat:nth-child(odd){border-left:0}.feat:first-child{grid-column:1/-1}.feat:nth-child(2n+2){border-left:0}.feat:nth-child(2n+3){border-left:1px solid var(--line)}}
.split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:40px;align-items:center}
.split figure{margin:0;border-radius:6px;overflow:hidden;border:1px solid var(--line);aspect-ratio:16/10;max-width:100%;background:#17191C}
.split figure img{display:block;width:100%;height:100%;object-fit:cover}
.split-copy{display:flex;flex-direction:column;gap:16px;min-width:0}
.split-copy h2{font-size:clamp(32px,4vw,52px);font-weight:800}
.bar{border-left:4px solid var(--copper);padding-left:16px}
.split-copy p{color:var(--muted);font-size:17px;max-width:46ch}
@media (max-width:900px){.split{grid-template-columns:minmax(0,1fr)}}
.svc-list{border-radius:6px}
.svc h3{font-size:24px;font-weight:800}
.svc .price strong{font-size:42px;font-weight:900}
.svc .ext{color:var(--teal)}
.tier-row{border-top:0;gap:14px}
.tier{border:1.5px solid var(--copper);border-radius:6px;background:var(--surface);align-items:center;text-align:center;padding:20px 14px}
.tier+.tier{border-left:1.5px solid var(--copper)}
.tier::before{display:none}
.tier h3{font-size:20px;font-weight:800}
.tier .size{color:var(--muted)}
.tier .parts{font-size:13px}
.tier strong{font-size:34px;font-weight:900}
@media (max-width:820px){.tier-row{grid-template-columns:repeat(2,minmax(0,1fr))}.tier:nth-child(3){border-left:1.5px solid var(--copper)}.tier:nth-child(n+3){border-top:1.5px solid var(--copper)}}
.cx-what h3{font-size:28px;font-weight:800}
.cx-lvl h4{font-size:20px;font-weight:800;text-transform:none}
.cx-lvl strong{font-size:30px;font-weight:900}
.cx-row{border-top:2px solid var(--copper)}
.gal{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.gal figure{margin:0;display:flex;flex-direction:column;gap:8px;min-width:0}
.gal img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:6px;border:1px solid var(--line);background:#17191C}
.gal figcaption{font-size:14px;font-weight:600;display:flex;justify-content:space-between;gap:8px}
.gal figcaption .mono{color:var(--teal);font-weight:500}
@media (max-width:820px){.gal{grid-template-columns:repeat(2,minmax(0,1fr))}}
.flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;counter-reset:f}
.flow li{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;counter-increment:f;min-width:0}
.flow li b{font-family:var(--display);font-weight:800;font-size:17px;margin-top:6px}
.flow li b::before{content:counter(f) ". ";color:var(--copper)}
.flow li span{font-size:14px;color:var(--muted);max-width:22ch}
.flow li+li::before{content:"";position:absolute;left:calc(-50% + 34px);right:calc(50% + 34px);top:15px;height:2px;background:repeating-linear-gradient(90deg,var(--dim) 0 6px,transparent 6px 11px)}
@media (max-width:820px){.flow{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px}.flow li:nth-child(3)::before{display:none}}
.est-big{font-weight:900;font-size:60px}
.blank{font-family:var(--display);font-weight:800;font-size:1em;text-transform:none}
.cta-band{background:linear-gradient(105deg,var(--copper) 0 8px,transparent 8px 22px,var(--copper) 22px 30px,transparent 30px 44px,var(--copper) 44px 52px,transparent 52px),var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cta-band .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding-block:40px;padding-left:max(84px,env(safe-area-inset-left,0px))}
.cta-band h2{font-size:clamp(26px,3vw,38px);font-weight:900}
.cta-band p{color:var(--muted);margin-top:6px}
@media (max-width:560px){.cta-band .wrap{padding-left:max(72px,env(safe-area-inset-left,0px))}}
.tblock{border-color:var(--line)}
.tblock>div{border-color:var(--line)!important}
.tblock .big{font-weight:900;font-size:24px;text-transform:uppercase}
.tier{padding:12px 12px 18px}

/* ---- Garage aesthetic accents ---- */
body{background-color:var(--bg);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");background-size:180px 180px;background-blend-mode:overlay}
.hero h1{font-style:italic;letter-spacing:-.02em}
.hero h1{background:linear-gradient(180deg,#FFFFFF 0%,#D9DCE0 45%,#8E949B 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero h1 .hl{background:none;-webkit-text-fill-color:var(--copper);color:var(--copper)}
:root[data-theme="light"] .hero h1{background:linear-gradient(180deg,#2A2D32,#15171A);-webkit-background-clip:text;background-clip:text}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .hero h1{background:linear-gradient(180deg,#2A2D32,#15171A);-webkit-background-clip:text;background-clip:text}}
.sheet-head h2,.cta-band h2,.cx-what h3,.travel-head h3{font-style:italic;text-transform:uppercase;font-weight:900;letter-spacing:-.01em}
.sheet-head h2::before{content:"// ";color:var(--copper);letter-spacing:-.08em;margin-right:.1em}
.brand span,.brand small{font-style:italic}
.btn{transform:skewX(-10deg);border-radius:2px}
.btn > *{transform:skewX(10deg)}
.btn-primary:hover{transform:skewX(-10deg) translateY(-1px)}
.svc h3,.tier h3,.cx-lvl h4{font-style:italic;text-transform:uppercase;font-weight:900}
.feat{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:14px;row-gap:2px;align-items:center;text-align:left;justify-items:start;padding:4px 18px}
.feat .ic{grid-row:1/3;width:34px;height:34px}
.feat b{font-style:italic;text-transform:uppercase;font-weight:900;font-size:14px;margin:0}
.feat span{font-style:italic}
@media (max-width:900px){.feat{padding:4px 10px}}
.tier{border:1.5px solid var(--line);position:relative;overflow:hidden}
.tier+.tier{border-left:1.5px solid var(--line)}
.tier:last-child{border-color:var(--copper)}
.tier::after{content:"";position:absolute;left:14px;bottom:0;width:56px;height:3px;background:var(--copper)}
.tier strong{font-style:italic;color:var(--copper)}
.tier strong.q{color:var(--copper);font-size:22px;text-transform:uppercase}
@media (max-width:820px){.tier:nth-child(3){border-left:1.5px solid var(--line)}.tier:nth-child(n+3){border-top:1.5px solid var(--line)}.tier:last-child{border-color:var(--copper)}}
.flow li .ic{width:72px;height:72px;padding:18px;border:1.5px solid var(--dim);border-radius:50%;background:var(--bg);color:var(--fg)}
.flow li::after{content:counter(f);position:absolute;top:-4px;left:calc(50% - 44px);width:26px;height:26px;border-radius:50%;background:var(--copper);color:var(--copper-ink);font:900 14px/26px var(--display);text-align:center}
.flow li b{font-style:italic;text-transform:uppercase;font-weight:900;font-size:15px}
.flow li b::before{content:none}
.flow li+li::before{top:36px;left:calc(-50% + 48px);right:calc(50% + 48px)}
.cta-band .wrap{justify-content:center;text-align:center;flex-direction:column;padding-block:56px}
.cta-band h2{font-size:clamp(28px,3.6vw,46px)}

/* ---- Black bands: header, hero, feature strip, process, closing banner and footer stay black in both themes ---- */
.ink{--bg:#0B0B0C; --surface:#141517; --raised:#1C1E21; --line:#26292D; --fg:#F2F2F0; --muted:#A7ABB1; --dim:#868B93;
  --copper:#F26B1D; --copper-ink:#0B0B0C; --teal:#4D8DFF; --teal-soft:rgba(77,141,255,.14); --warn:#F2B33D; --grid:rgba(242,107,29,.18);
  color-scheme:dark; color:var(--fg)}
section.ink,footer.ink{background-color:#0B0B0C}
.feats.ink{background-color:#141517}
header.top.ink{background:rgba(11,11,12,.92)}
:root .hero.ink h1{background:linear-gradient(180deg,#FFFFFF 0%,#D9DCE0 45%,#8E949B 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero.ink{background-color:#0B0B0C}
section.band.ink{border-top:1px solid #26292D;border-bottom:1px solid #26292D}
footer.ink .wrap{padding-block:48px 40px}
.cta-band.ink{background-color:#141517}
.qpanel.ink{background-color:#141517;border-color:#26292D}

/* ---- Brand: C.A.D. monogram ---- */
.brand span{font-size:26px;letter-spacing:.04em}
.brand small b{color:var(--copper);font-weight:900}

/* ---- Motion and polish ---- */
/* Text stays fully visible during the intro (no opacity fade), so the headline counts as painted right away. */
@keyframes rise{from{transform:translateY(28%) skewX(-6deg)}to{transform:none}}
.hero h1 .l{display:block;animation:rise .7s cubic-bezier(.2,.75,.2,1) both}
.hero h1 .l:nth-child(2){animation-delay:.18s}
.hero h1 .l:nth-child(3){animation-delay:.42s}
.hero .lede,.hero .ctas{animation:rise .6s cubic-bezier(.2,.75,.2,1) .6s both}
@keyframes lineIn{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}
.est-lines div.in{animation:lineIn .35s ease-out both}
@keyframes tick{0%{transform:scale(1)}40%{transform:scale(1.12)}100%{transform:scale(1)}}
.r-scale span.tick b{display:inline-block;animation:tick .35s ease-out}
.ruler input[type=range]::-webkit-slider-thumb{transition:box-shadow .15s}
.ruler input[type=range]:active::-webkit-slider-thumb{box-shadow:0 0 0 7px color-mix(in srgb,var(--copper) 30%,transparent)}
.tier{transition:transform .25s cubic-bezier(.2,.75,.2,1),box-shadow .25s}
.tier::after{transition:width .35s cubic-bezier(.2,.75,.2,1)}
.tier:hover,.tier:active{transform:translateY(-5px);box-shadow:0 18px 40px -18px rgba(0,0,0,.6)}
.tier:hover::after,.tier:active::after{width:calc(100% - 28px)}
.tier-ph{overflow:hidden;border-radius:4px;margin-bottom:6px;width:100%}
.tier-ph .tier-img{margin:0;transition:transform .5s cubic-bezier(.2,.75,.2,1)}
.tier:hover .tier-img,.tier:active .tier-img{transform:scale(1.04)}
.flow li+li::before{background:linear-gradient(90deg,var(--dim) 50%,transparent 50%) 0 0/11px 2px repeat-x;transition:clip-path .7s ease}
.flow.pre li+li::before{clip-path:inset(0 100% 0 0)}
.flow.in li+li::before{clip-path:inset(0 0 0 0)}
.flow.in li:nth-child(3)::before{transition-delay:.45s}
.flow.in li:nth-child(4)::before{transition-delay:.9s}
.flow.pre li::after{transform:scale(.4)}
.flow li::after{transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.flow.in li::after{transform:scale(1)}
.flow.in li:nth-child(2)::after{transition-delay:.4s}
.flow.in li:nth-child(3)::after{transition-delay:.85s}
.flow.in li:nth-child(4)::after{transition-delay:1.3s}
.cx-lvl i::after{transition:width .9s cubic-bezier(.2,.75,.2,1)}
.cx-row.pre .cx-lvl i::after{width:0}
.cx-row.in .cx-lvl i::after{width:calc(var(--w)*100%)}
.cx-row.in .cx-lvl:nth-child(3) i::after{transition-delay:.15s}
.cx-row.in .cx-lvl:nth-child(4) i::after{transition-delay:.3s}
header.top{transition:background .25s,box-shadow .25s}
header.top .wrap{transition:padding .25s}
header.top.scrolled{box-shadow:inset 0 -2px 0 var(--copper),0 10px 30px -12px rgba(0,0,0,.7)}
header.top.scrolled .wrap{padding-block:10px}
nav.links a{position:relative;padding-block:4px}
nav.links a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--copper);transform:scaleX(0);transform-origin:left;transition:transform .25s}
nav.links a.on{color:var(--fg)}
nav.links a.on::after,nav.links a:hover::after{transform:scaleX(1)}
.btn-primary{position:relative;overflow:hidden}
.btn-primary::before{content:"";position:absolute;top:-20%;bottom:-20%;width:40%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);pointer-events:none}
.btn-primary:hover::before{left:130%;transition:left .6s ease}
@media (prefers-reduced-motion: reduce){.hero h1 .l,.hero .lede,.hero .ctas{animation:none}.flow.pre li+li::before{clip-path:none}.flow.pre li::after{transform:none}.cx-row.pre .cx-lvl i::after{width:calc(var(--w)*100%)}}

/* ---- Business additions ---- */
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--copper);color:var(--copper-ink);padding:10px 14px;font-weight:700;border-radius:3px;text-decoration:none}
.skip:focus{top:calc(env(safe-area-inset-top,0px) + 10px)}
.pick{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:20px;margin-top:8px;border:1.5px solid var(--line);border-radius:6px;padding:24px;background:var(--surface)}
.pick-q{display:flex;flex-direction:column;gap:10px;min-width:0}
.pick-q h3{font-size:24px;font-weight:900;font-style:italic;text-transform:uppercase}
.pick-q p{color:var(--muted)}
.pick-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:4px}
.pick-opts button{font:600 15px/1.3 var(--body);text-align:left;color:var(--fg);background:var(--bg);border:1.5px solid var(--line);border-radius:4px;padding:14px;cursor:pointer;transition:border-color .15s,transform .15s}
.pick-opts button:hover{border-color:var(--copper);transform:translateY(-2px)}
.pick-opts button[aria-pressed="true"]{border-color:var(--copper);background:color-mix(in srgb,var(--copper) 10%,var(--bg))}
.pick-a{display:flex;flex-direction:column;gap:8px;border-left:3px solid var(--copper);padding-left:20px;min-width:0}
.pick-k{font-size:13px;color:var(--dim);font-weight:600}
.pick-a b{font-family:var(--display);font-size:28px;font-weight:900;font-style:italic;line-height:1.05}
.pick-a .mono{color:var(--teal)}
.pick-a p{color:var(--muted);font-size:15px}
.pick-row{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:auto;flex-wrap:wrap}
.pick-row strong{font-family:var(--display);font-weight:900;font-style:italic;font-size:26px;color:var(--copper)}
@keyframes pop{0%{transform:translateY(6px);opacity:.4}100%{transform:none;opacity:1}}
.pick-a.pop>*{animation:pop .35s ease-out both}
@media (max-width:820px){.pick{grid-template-columns:minmax(0,1fr)}.pick-a{border-left:0;border-top:3px solid var(--copper);padding:16px 0 0}}
@media (max-width:480px){.pick-opts{grid-template-columns:minmax(0,1fr)}}
.who{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.who article{display:flex;flex-direction:column;gap:10px;padding:22px 20px;border:1.5px solid var(--line);border-radius:6px;background:var(--surface);min-width:0}
.who h3{font-size:19px;font-weight:900;font-style:italic;text-transform:uppercase}
.who p{color:var(--muted);font-size:15px}
@media (max-width:900px){.who{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.who{grid-template-columns:minmax(0,1fr)}}
.next{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;counter-reset:n}
.next li{counter-increment:n;border:1px solid var(--line);border-radius:4px;padding:12px 14px;display:flex;flex-direction:column;gap:4px;background:var(--bg)}
.next li b::before{content:counter(n) ". ";color:var(--copper)}
.next li b{font-family:var(--display);font-weight:900;font-style:italic;font-size:15px}
.next li span{font-size:14px;color:var(--muted)}
@media (max-width:620px){.next{grid-template-columns:minmax(0,1fr)}}
.mbar{display:none}
@media (max-width:820px){
  .mbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:55;align-items:center;justify-content:space-between;gap:12px;
    padding:10px max(16px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));
    background:rgba(11,11,12,.96);border-top:2px solid var(--copper);transform:translateY(110%);transition:transform .3s cubic-bezier(.2,.75,.2,1)}
  .mbar.show{transform:none}
  .mbar div{display:flex;flex-direction:column;line-height:1.2;min-width:0}
  .mbar b{font-family:var(--display);font-weight:900;font-style:italic;font-size:22px;color:var(--copper)}
  .mbar span{font-size:12px;color:var(--muted)}
  footer .wrap{padding-bottom:96px}
}

.pick-ctx{font-size:13px;color:var(--dim);margin-top:4px}
/* ---- Selectable size cards ---- */
.tier[data-t]{cursor:pointer}
.tier:last-child{border-color:var(--line)}
.tier.sel{border-color:var(--copper)!important;background:color-mix(in srgb,var(--copper) 10%,var(--surface));box-shadow:0 0 0 3px color-mix(in srgb,var(--copper) 25%,transparent)}
.tier.sel::after{width:calc(100% - 28px)}
.tier-sel{position:absolute;top:18px;right:18px;background:var(--copper);color:var(--copper-ink);font:900 11px/1 var(--display);font-style:italic;text-transform:uppercase;letter-spacing:.04em;padding:6px 8px;border-radius:2px;transform:skewX(-10deg);opacity:0;transition:opacity .2s}
.tier.sel .tier-sel{opacity:1}
.tier:focus-visible{outline:2px solid var(--copper);outline-offset:3px}

/* ---- Technical drawing layer ---- */
.hero,#process,.cta-band{position:relative;overflow:hidden}
.hero>.wrap,#process>.wrap,.cta-band>.wrap{position:relative;z-index:1}
.viewer{background:color-mix(in srgb,var(--surface) 94%,transparent)}
.tech{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;
  --tl:rgba(122,146,170,.30); --tl2:rgba(122,146,170,.16)}
/* Blueprint grid on its own layer. It drifts with transform (compositor only, no repaint)
   instead of animating background-position, and pauses while its band is off screen (.idle). */
#process{background-image:none}
.hero{background-image:radial-gradient(ellipse 60% 70% at 78% 45%,var(--grid),transparent 70%)}
.cta-band{background-image:linear-gradient(105deg,var(--copper) 0 8px,transparent 8px 22px,var(--copper) 22px 30px,transparent 30px 44px,var(--copper) 44px 52px,transparent 52px)}
.hero::before,#process::before,.cta-band::before{content:"";position:absolute;top:-120px;left:-120px;right:0;bottom:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(122,146,170,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(122,146,170,.09) 1px,transparent 1px),
    linear-gradient(rgba(122,146,170,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(122,146,170,.045) 1px,transparent 1px);
  background-size:120px 120px,120px 120px,24px 24px,24px 24px;animation:drift 60s linear infinite;will-change:transform}
@keyframes drift{to{transform:translate(120px,120px)}}
.tech path,.tech circle{fill:none;stroke:var(--tl);stroke-width:1;vector-effect:non-scaling-stroke}
.tech .reg circle,.tech .reg path{stroke:rgba(150,170,190,.45)}
.tech .cl path{stroke:var(--tl2);stroke-dasharray:22 5 3 5}
.tech .con{stroke:var(--tl2);stroke-dasharray:4 6}
.tech .ext{stroke:var(--tl2)}
.tech .arr{fill:var(--tl);stroke:none}
.tech .dot{fill:var(--tl)}
.tech text{font:500 11px/1 var(--mono);fill:rgba(140,162,184,.62);letter-spacing:.06em}
.tech .tag{fill:rgba(140,162,184,.4)}
.tech .draw{stroke:rgba(140,162,184,.5);stroke-dasharray:1;stroke-dashoffset:0;animation:trace 11s ease-in-out infinite}
.tech .dim:nth-of-type(2n) .draw{animation-delay:-3s}
.tech .dim:nth-of-type(3n) .draw{animation-delay:-6s}
.tech .draw.slow{animation-duration:16s}
@keyframes trace{0%{stroke-dashoffset:1}35%,75%{stroke-dashoffset:0}100%{stroke-dashoffset:-1}}
.tech .spin{transform-box:view-box;transform-origin:1060px 330px;animation:spin 140s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.tech .sweep path{stroke:rgba(77,141,255,.35)}
.tech .sweep text{fill:rgba(77,141,255,.55)}
.tech .sweep{animation:sweepY 13s linear infinite}
@keyframes sweepY{from{transform:translateY(-20px)}to{transform:translateY(740px)}}
.tech .sweep.x{animation:sweepX 16s linear infinite}
@keyframes sweepX{from{transform:translateX(-20px)}to{transform:translateX(1460px)}}
@media (max-width:820px){.tech text{font-size:13px}.tech .dim text{display:none}}

.tier .from{margin-top:auto;padding-top:10px;font-size:12px;color:var(--dim);text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.tier .from+strong{margin-top:2px;padding-top:0}
/* ---- Mobile flow ---- */
@media (max-width:980px){.quote>.est{order:-1}.quote>.est .disclose{display:none}.quote>.est .qbody{gap:10px;padding-block:16px}}
@media (max-width:600px){
  section.band>.wrap{padding-block:44px;gap:26px}
  .sheet-head{gap:10px}
  .sheet-head h2{font-size:30px}
  .sheet-head p{font-size:15px}
  .feats .wrap{padding-block:16px;row-gap:14px;grid-template-columns:repeat(2,minmax(0,1fr))}
  .feat{padding:2px 6px;column-gap:10px}
  .feat .ic{width:26px;height:26px}
  .feat span{display:none}
  .feat b{font-size:12.5px}
  .svc{padding:18px 18px;gap:8px}
  .svc .price{padding-bottom:10px}
  .svc .price strong{font-size:34px}
  .svc h3{font-size:20px}
  .svc p{font-size:14px}
  .pick{padding:18px}
  .pick-opts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pick-opts button{padding:11px;font-size:14px}
  .pick-a b{font-size:22px}
  .nohour{padding:14px 16px;gap:12px}
  .nohour svg{width:26px;height:26px}
  .nohour b{font-size:18px}
  .nohour p{font-size:14px}
  .tier{padding:10px 10px 16px}
  .tier h3{font-size:17px}
  .tier .parts{display:none}
  .tier strong{font-size:28px}
  .who{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin-inline:-16px;padding-inline:16px;padding-bottom:6px;scrollbar-width:none}
  .who::-webkit-scrollbar{display:none}
  .who article{flex:0 0 78%;scroll-snap-align:start}
  .chips li{font-size:13px;padding:5px 8px}
  .q-main,.qbody{padding:20px 16px}
}

/* quote form: sending, spam check, sent states */
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.ts:empty{display:none}
.q-actions .err{flex:1 1 220px}
.btn[aria-busy=true]{cursor:progress;opacity:.75}
.privacy{margin-top:-12px}
.sent-h{font-family:var(--display);font-weight:900;font-style:italic;text-transform:uppercase;font-size:22px;line-height:1.15;color:var(--ok);outline:none}
.sent-h.warn{color:var(--copper)}
.sent-h .mono{font-style:normal;text-transform:none;font-weight:600;white-space:nowrap}
#sent-ok,#sent-fallback{display:flex;flex-direction:column;gap:8px}
#sent-to{color:var(--fg);font-weight:600;overflow-wrap:anywhere}

/* =====================================================================
   Polish pass: motion system, parallax, mobile menu, touch targets
   Rules: decorative layers only move with scroll; text never does. Nothing
   waits on an animation to become visible. Reduced motion turns it all off.
   ===================================================================== */
:root{
  --ease-out:cubic-bezier(.2,.75,.2,1);   /* entrances, most UI */
  --ease-io:cubic-bezier(.65,0,.35,1);    /* things that move and stop on screen */
  --t-fast:.12s;                          /* press feedback */
  --t-med:.25s;                           /* hovers, toggles, small UI */
  --t-slow:.45s;                          /* panels, larger surfaces */
}
[id]{scroll-margin-top:calc(env(safe-area-inset-top,0px) + 72px)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Press feedback. Buttons already carry a skew, so scale is a separate property. */
.btn{transition:transform var(--t-med) var(--ease-out),scale var(--t-fast) ease-out,background var(--t-med),border-color var(--t-med)}
.btn:active{scale:.97}
.pick-opts button:active,.modes button:active,.menu-btn:active,.copybtn:active{scale:.96}
.pick-opts button,.modes button,.copybtn{transition:border-color var(--t-med),transform var(--t-med) var(--ease-out),scale var(--t-fast) ease-out,background var(--t-med),color var(--t-med)}

/* Hover only where a real pointer can hover, so effects don't stick after a tap. */
@media (hover:none){
  .btn-primary:hover{transform:skewX(-10deg)}
  .btn-primary:hover::before{left:-60%;transition:none}
  .tier:hover{transform:none;box-shadow:none}
  .tier:hover::after{width:56px}
  .pick-opts button:hover{transform:none;border-color:var(--line)}
  .pick-opts button[aria-pressed="true"]:hover{border-color:var(--copper)}
}

/* Size cards: photo zoom uses the scale property so it composes with the scroll parallax (translate). */
.tier,.tier-ph{overflow:hidden;overflow:clip}
.tier-ph .tier-img{transition:scale var(--t-slow) var(--ease-out)}
.tier:hover .tier-img,.tier:active .tier-img{transform:none;scale:1.04}
.tier-sel{transition:opacity .2s,scale var(--t-med) var(--ease-out);scale:.7}
.tier.sel .tier-sel{scale:1}

/* Touch targets: about 44px on phones */
.modes button{min-height:36px}
details{padding:0}
summary{padding:16px 0;align-items:center;min-height:52px}
details p{margin:0 0 18px}
.copybtn{padding:8px 12px;min-height:34px}
.legal a{display:inline-block;padding:8px 0}
@media (max-width:480px){.modes button{min-height:40px;padding:0 9px}}

/* FAQ: plus turns into minus, and the answer slides open where the browser supports it */
summary::after{content:"";flex:none;width:14px;height:14px;
  background:linear-gradient(var(--copper),var(--copper)) center/100% 2px no-repeat,linear-gradient(var(--copper),var(--copper)) center/2px 100% no-repeat;
  transition:background-size var(--t-med) var(--ease-out),rotate var(--t-med) var(--ease-out)}
details[open] summary::after{content:"";background-size:100% 2px,2px 0;rotate:180deg}
summary:hover{color:var(--copper)}
summary{transition:color var(--t-med)}
@supports selector(::details-content){
  :root{interpolate-size:allow-keywords}
  details::details-content{block-size:0;overflow-y:clip;transition:block-size var(--t-slow) var(--ease-io),content-visibility var(--t-slow) allow-discrete}
  details[open]::details-content{block-size:auto}
}

/* Mobile menu */
.menu-btn{display:none}
.mnav{display:none}
@media (max-width:820px){
  header.top .wrap{gap:10px}
  header.top .btn-primary{padding:11px 14px}
  .menu-btn{display:inline-grid;place-items:center;flex:none;width:44px;height:44px;padding:0;border:1px solid var(--line);border-radius:3px;background:transparent;color:var(--fg);cursor:pointer;transition:border-color var(--t-med),scale var(--t-fast) ease-out}
  .menu-btn[aria-expanded="true"]{border-color:var(--copper)}
  .burger{position:relative;width:20px;height:14px;display:block}
  .burger i{position:absolute;left:0;right:0;height:2px;background:currentColor;transform:skewX(-20deg);transition:translate var(--t-med) var(--ease-out),rotate var(--t-med) var(--ease-out),opacity var(--t-fast)}
  .burger i:nth-child(1){top:0}.burger i:nth-child(2){top:6px}.burger i:nth-child(3){top:12px}
  .menu-btn[aria-expanded="true"] .burger i:nth-child(1){translate:0 6px;rotate:45deg}
  .menu-btn[aria-expanded="true"] .burger i:nth-child(2){opacity:0}
  .menu-btn[aria-expanded="true"] .burger i:nth-child(3){translate:0 -6px;rotate:-45deg}
  .mnav{display:block;position:absolute;left:0;right:0;top:100%;background:#0B0B0C;border-bottom:2px solid var(--copper);
    box-shadow:0 24px 40px -20px rgba(0,0,0,.8);clip-path:inset(0 0 100% 0);transition:clip-path var(--t-slow) var(--ease-out)}
  .mnav.open{clip-path:inset(0 0 -60px 0)}
  header.top .mnav .wrap{display:flex;flex-direction:column;align-items:stretch;gap:0;padding-block:6px 14px}
  .mnav a{display:flex;align-items:center;min-height:52px;border-bottom:1px solid var(--line);text-decoration:none;
    font:900 italic 20px/1 var(--display);text-transform:uppercase;letter-spacing:-.01em;color:var(--fg);
    opacity:0;translate:0 -6px;transition:opacity var(--t-med),translate var(--t-med) var(--ease-out),color var(--t-med)}
  .mnav a:last-child{border-bottom:0}
  .mnav.open a{opacity:1;translate:none}
  .mnav.open a:nth-child(2){transition-delay:.03s}.mnav.open a:nth-child(3){transition-delay:.06s}
  .mnav.open a:nth-child(4){transition-delay:.09s}.mnav.open a:nth-child(5){transition-delay:.12s}.mnav.open a:nth-child(6){transition-delay:.15s}
  .mnav a:active{color:var(--copper)}
  /* Quick-return header: slides away while reading down, comes back on any scroll up */
  header.top{transition:background .25s,box-shadow .25s,translate .3s var(--ease-out)}
  header.top.tuck{translate:0 calc(-100% - env(safe-area-inset-top,0px) - 4px)}
}
@media (max-width:360px){header.top .btn-primary{padding:10px 10px;font-size:13px}}

/* Pause motion (WCAG 2.2.2): stops the viewer's auto-play and the decorative linework */
.v-pause{position:absolute;top:36px;right:12px;z-index:2;display:grid;place-items:center;width:36px;height:36px;padding:0;border:1px solid var(--line);border-radius:3px;
  background:var(--bg);color:var(--muted);cursor:pointer;transition:color var(--t-med),border-color var(--t-med),scale var(--t-fast) ease-out}
.v-pause:hover{color:var(--fg);border-color:var(--muted)}
.v-pause:active{scale:.94}
.v-pause svg path{fill:currentColor}
.v-pause .i-play,.v-pause[aria-pressed="true"] .i-pause{display:none}
.v-pause[aria-pressed="true"] .i-play{display:inline}
.v-pause[aria-pressed="true"]{color:var(--copper);border-color:var(--copper)}
.still .tech *,.still .hero::before,.still #process::before,.still .cta-band::before,
.idle .tech *,.idle::before{animation-play-state:paused!important}

/* Small UI motion */
.field input,.field select.sel,.drop{transition:border-color var(--t-med),background var(--t-med)}
.drop:hover{border-color:var(--copper)}
@keyframes bump{40%{scale:1.08}100%{scale:1}}
.mbar b.bump{display:inline-block;animation:bump .35s var(--ease-out)}
.thumbs figure{animation:lineIn .25s var(--ease-out) both}

/* ---- Scroll-linked parallax and progress (progressive enhancement) ----
   Chrome/Edge 115+ and Safari 26+ get it; other browsers simply show the static page. */
@supports (animation-timeline: view()) and (animation-range: 0% 100%){
  @media (prefers-reduced-motion: no-preference){
    /* Reading progress: the header's orange rule fills as you scroll the page */
    header.top::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--copper);transform-origin:0 50%;
      scale:0 1;animation:progress linear both;animation-timeline:scroll(root block)}
    header.top.scrolled{box-shadow:0 10px 30px -12px rgba(0,0,0,.7)}
    @keyframes progress{to{scale:1 1}}

    /* Bands: the drawing layer moves slower than the page, so it reads as further back */
    .hero{view-timeline:--hero block}
    #process,.cta-band{view-timeline:--band block}
    .hero .tech{animation:plx-hero linear both;animation-timeline:--hero;animation-range:exit 0% exit 100%}
    #process .tech,.cta-band .tech{animation:plx-band linear both;animation-timeline:--band;animation-range:cover 0% cover 100%}
    @keyframes plx-hero{to{translate:0 22%}}
    @keyframes plx-band{from{translate:0 -36px}to{translate:0 36px}}
    /* The 3D viewer sinks a touch as the hero leaves; the copy stays put */
    .hero .viewer{animation:plx-viewer linear both;animation-timeline:--hero;animation-range:exit 0% exit 100%}
    @keyframes plx-viewer{to{translate:0 8%}}

    /* Size-card photos drift a few percent inside their frames */
    .tier-ph .tier-img{scale:1.1;animation:plx-img linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
    .tier:hover .tier-img,.tier:active .tier-img{scale:1.14}
    @keyframes plx-img{from{translate:0 -4%}to{translate:0 4%}}
  }
}

/* Hero headline: each phrase stays on one line. 84px is the largest size where
   "DIGITIZE IT." still fits the hero column (537px at full width). */
.hero h1{font-size:clamp(40px,6.4vw,84px)}
.hero h1 .l{white-space:nowrap}
@media (min-width:360px) and (max-width:900px){.hero h1{font-size:clamp(46px,11vw,84px)}}

/* ---- Pricing formula: size + features + file + travel ---- */
.formula{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line);border-radius:6px;background:var(--surface)}
.formula li{position:relative;min-width:0}
.formula li+li{border-left:1px solid var(--line)}
.formula li+li::before{content:"+";position:absolute;left:-13px;top:50%;translate:0 -50%;z-index:1;width:24px;height:24px;border-radius:50%;
  display:grid;place-items:center;background:var(--copper);color:var(--copper-ink);font:900 16px/1 var(--display)}
.formula a{display:flex;flex-direction:column;gap:4px;height:100%;padding:16px 20px 18px 24px;text-decoration:none;color:inherit;border-radius:6px;transition:background var(--t-med)}
.formula a:hover{background:color-mix(in srgb,var(--copper) 7%,transparent)}
.formula .f-k{font:900 italic 13px/1 var(--display);text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.formula b{font:900 italic clamp(22px,2.4vw,30px)/1.05 var(--display);color:var(--copper)}
.formula .f-n{font-size:13px;color:var(--muted)}
@media (max-width:820px){
  .formula{grid-template-columns:repeat(2,minmax(0,1fr))}
  .formula li:nth-child(3){border-left:0}
  .formula li:nth-child(n+3){border-top:1px solid var(--line)}
  .formula li:nth-child(3)::before{left:50%;top:-13px;translate:-50% 0}
  .formula a{padding:14px 14px 16px 18px}
}

/* "The file you need" uses the travel table style, three across */
.fl-row{grid-template-columns:repeat(3,minmax(0,1fr))}
.fl-row .tr:nth-child(n){border-top:0}
.fl-row .tr+.tr{border-left:1px solid var(--line)}
@media (max-width:520px){.fl-row{grid-template-columns:minmax(0,1fr)}.fl-row .tr+.tr{border-left:0;border-top:1px solid var(--line)}}

/* Service prices read "from $100", not "$100 from" */
.svc .price span{order:0}

/* Formula ends in "= Your price", which links to the calculator */
.formula li.eq::before{content:"="}
.formula li.eq b{color:var(--fg);font-size:clamp(18px,1.9vw,24px);text-transform:uppercase}
.formula li.eq a{background:color-mix(in srgb,var(--copper) 8%,transparent)}
.formula li.eq a:hover{background:color-mix(in srgb,var(--copper) 14%,transparent)}
.price-grid.travel{gap:20px}

/* ---- Selectable complexity levels and travel bands (work like the size cards) ---- */
.cx-lvl[data-cx],.tr[data-where]{position:relative;cursor:pointer;border-radius:4px;transition:background var(--t-med),box-shadow var(--t-med),scale var(--t-fast) ease-out}
.cx-lvl[data-cx]:active,.tr[data-where]:active{scale:.98}
@media (hover:hover){.cx-lvl[data-cx]:hover,.tr[data-where]:hover{background:color-mix(in srgb,var(--copper) 6%,transparent)}}
.cx-lvl.sel,.tr.sel{background:color-mix(in srgb,var(--copper) 10%,var(--surface));box-shadow:inset 0 0 0 2px var(--copper)}
.cx-lvl.sel strong,.tr.sel strong{color:var(--copper)}
.cx-lvl[data-cx]:focus-visible,.tr[data-where]:focus-visible{outline:2px solid var(--copper);outline-offset:2px}
.cx-lvl .tier-sel,.tr .tier-sel{top:10px;right:10px;font-size:10px;padding:5px 7px}
.sel>.tier-sel{opacity:1;scale:1}
.tr-row.tr-pick{grid-template-columns:repeat(6,minmax(0,1fr))}
@media (max-width:900px){.tr-row.tr-pick{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:520px){.tr-row.tr-pick{grid-template-columns:repeat(2,minmax(0,1fr))}.cx-lvl .tier-sel,.tr .tier-sel{display:none}}

/* Running total at the end of the pricing blocks */
.sofar{display:flex;align-items:center;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;margin-top:8px;padding:18px 22px;border-radius:6px;background:#141517;border:1px solid #26292D;color:var(--fg)}
.sofar-t{display:flex;flex-direction:column;gap:4px;min-width:0}
.sofar .f-k{font:900 italic 13px/1 var(--display);text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.sofar b{font:900 italic clamp(30px,3.4vw,42px)/1 var(--display);color:var(--copper)}
.sofar span:last-child{font-size:14px;color:var(--muted)}

/* Complexity cards share the size-card look */
.tier[data-cx]{cursor:pointer}
.tier h4{margin:0;font-family:var(--display);font-size:20px;font-weight:900;font-style:italic;text-transform:uppercase;line-height:1.02}
@media (max-width:600px){.tier h4{font-size:17px}}
.cx-cards+.fine{margin-top:-4px}

/* Quote form: numbered steps (size, features, on-site scanning) */
.qstep{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--line);padding-top:16px;min-width:0}
.qstep:first-child{border-top:0;padding-top:0}
.qstep-k{display:flex;align-items:center;gap:10px;font:700 13px/1 var(--body);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.qstep-k b{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--copper);color:#fff;font-size:12px;letter-spacing:0}
.qstep .sentence{margin:0}
.qstep .fine{margin:0}

/* Footer email: wrap only at the <wbr> points (after the @, before .com), never mid-word */
.tblock #email-ph{overflow-wrap:normal;word-break:keep-all}