@import url('https://fonts.googleapis.com/css2?family=Geologica:wght@400;500;600;700&family=Golos+Text:wght@400;500;600&family=JetBrains+Mono:wght@500&display=swap');

/* ---------- tokens ---------- */
:root{
  --font-display:'Geologica','Golos Text',system-ui,sans-serif;
  --font-body:'Golos Text',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,Consolas,monospace;

  /* light */
  --bg:#eceee4;--card:#f6f7f0;--field:#ffffff;
  --ink:#10201a;--muted:#4d5c50;--line:rgba(16,32,26,.14);
  --surface:#14271f;--on-surface:#e9eede;--on-surface-muted:#a9b9a8;
  --accent:#d7f654;--on-accent:#10201a;--accent-text:#3f5a00;
  --shadow:0 24px 60px -30px rgba(20,39,31,.45);

  --r-sm:8px;--r-md:12px;--r-lg:22px;--r-xl:28px;
  --gutter:clamp(16px,4vw,56px);--max:1400px;--header:68px;
  --ease:cubic-bezier(.16,1,.3,1);
  --z-header:40;--z-float:50;--z-grain:60;--z-skip:70;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0b1712;--card:#11231b;--field:#0d1c16;
  --ink:#e9eede;--muted:#9aab9b;--line:rgba(233,238,222,.12);
  --accent-text:#d7f654;
  --shadow:0 30px 70px -30px rgba(0,0,0,.7);
  color-scheme:dark;
}}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header) + 16px);overflow-x:clip;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.55 var(--font-body);overflow-x:clip;-webkit-font-smoothing:antialiased}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:var(--z-grain);opacity:.07;mix-blend-mode:overlay;background-image: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")}
::selection{background:var(--accent);color:var(--on-accent)}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
button:disabled{opacity:.45;cursor:not-allowed}
img,canvas{display:block;max-width:100%}
h1,h2,h3{font-family:var(--font-display);font-weight:600;margin:0;text-wrap:balance}
p{margin:0;text-wrap:pretty}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.skip-link{position:fixed;left:16px;top:-60px;z-index:var(--z-skip);background:var(--accent);color:var(--on-accent);padding:10px 16px;border-radius:var(--r-sm);font-weight:600;transition:top .2s}
.skip-link:focus{top:12px}
.eyebrow{font:500 12px/1.3 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent-text);margin:0 0 18px}
.accent-text{color:var(--accent-text)}
.section-title{font-size:clamp(36px,4.6vw,72px);line-height:1;letter-spacing:-.035em;max-width:18ch}
main>section{padding-inline:max(var(--gutter),calc((100% - var(--max)) / 2))}

/* ---------- header ---------- */
.site-header,.seo-page>header{position:sticky;top:0;z-index:var(--z-header);height:var(--header);display:flex;align-items:center;justify-content:space-between;gap:24px;padding-inline:var(--gutter);isolation:isolate}
.site-header::before,.seo-page>header::before{content:"";position:absolute;inset:0;z-index:-1;background:color-mix(in srgb,var(--bg) 84%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    .site-header::before{animation:header-solid linear both;animation-timeline:scroll();animation-range:0 140px}
  }
}
@keyframes header-solid{from{opacity:0}to{opacity:1}}
.logo{display:inline-flex;align-items:center;gap:2px;font:700 20px/1 var(--font-display);letter-spacing:-.03em;white-space:nowrap}
.mark{font-size:26px;margin-right:8px;color:var(--accent-text);display:inline-block;transition:transform .8s var(--ease)}
.logo:hover .mark{transform:rotate(180deg)}
.slash{color:var(--muted);margin:0 3px}
.site-header nav,.seo-page>header nav{display:flex;gap:30px;font-size:14px;font-weight:500}
.site-header nav a,.seo-page>header nav a{position:relative;padding-block:6px}
.site-header nav a::after,.seo-page>header nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease)}
.site-header nav a:hover::after,.seo-page>header nav a:hover::after{transform:scaleX(1);transform-origin:left}
.nav-cta{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:var(--r-sm);background:var(--ink);color:var(--bg);font-size:14px;font-weight:600;white-space:nowrap;transition:transform .25s var(--ease)}
.nav-cta:hover{transform:translateY(-1px)}
.nav-cta:active{transform:scale(.98)}

/* ---------- buttons ---------- */
.button{display:inline-flex;align-items:center;justify-content:space-between;gap:28px;padding:17px 22px;border-radius:var(--r-md);font-weight:600;font-size:15px;line-height:1.2;white-space:nowrap;transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s}
.button span{display:inline-block;transition:transform .35s var(--ease)}
.button:hover:not(:disabled){transform:translateY(-2px)}
.button:hover:not(:disabled) span{transform:translate(3px,-3px)}
.button:active:not(:disabled){transform:scale(.98)}
.button.accent,.button.lime{background:var(--accent);color:var(--on-accent);box-shadow:0 14px 30px -18px rgba(120,150,20,.9)}
.button.ink,.button.dark{background:var(--ink);color:var(--bg)}
.button.full{width:100%}
.secondary-action{display:block;margin:10px auto 0;padding:8px;font-size:14px;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.secondary-action:hover{color:var(--ink)}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);grid-template-areas:"text card" "visual card";grid-template-rows:auto 1fr;gap:28px clamp(28px,4vw,64px);min-height:calc(100dvh - var(--header));padding-block:clamp(24px,5vh,56px) 40px}
.hero-text{grid-area:text}
.kinetic{font-size:clamp(44px,5.3vw,86px);line-height:.98;letter-spacing:-.045em;font-weight:700}
.kinetic .line{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.kinetic .line>span{display:inline-block}
.kinetic .accent{color:var(--accent-text)}
.hero-sub{margin-top:22px;font-size:clamp(17px,1.35vw,20px);line-height:1.5;color:var(--muted);max-width:34ch}
.hero-visual{grid-area:visual;position:relative;min-height:260px;border-radius:var(--r-xl);overflow:hidden;background:var(--surface);box-shadow:var(--shadow)}
.hero-visual canvas{position:absolute;inset:0;width:100%;height:100%}
.motion-toggle{position:absolute;left:16px;bottom:16px;padding:8px 14px;border-radius:999px;font-size:13px;font-weight:500;color:var(--on-surface);background:rgba(10,20,16,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(233,238,222,.16)}
.motion-toggle:hover{background:rgba(10,20,16,.8)}

/* hero entrance */
html.js:not(.is-ready) .kinetic .line>span{transform:translateY(110%)}
html.js:not(.is-ready) :is(.hero .eyebrow,.hero-sub,.hero-visual,.quote-card){opacity:0}
@media (prefers-reduced-motion:no-preference){
  html.is-ready .kinetic .line>span{animation:rise 1s var(--ease) both}
  html.is-ready .kinetic .line:nth-of-type(2)>span{animation-delay:.08s}
  html.is-ready .kinetic .line:nth-of-type(3)>span{animation-delay:.16s}
  html.is-ready .hero .eyebrow{animation:fade-up .8s var(--ease) both}
  html.is-ready .hero-sub{animation:fade-up .9s .32s var(--ease) both}
  html.is-ready .hero-visual{animation:visual-in 1.3s .22s var(--ease) both}
  html.is-ready .quote-card{animation:card-in 1.1s .38s var(--ease) both}
}
@keyframes rise{from{transform:translateY(110%)}to{transform:none}}
@keyframes fade-up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes visual-in{from{opacity:0;transform:scale(.92) translateY(30px)}to{opacity:1;transform:none}}
@keyframes card-in{from{opacity:0;transform:translateX(48px)}to{opacity:1;transform:none}}

/* ---------- quote card ---------- */
.quote-card{grid-area:card;align-self:start;background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);padding:clamp(20px,2vw,28px);box-shadow:var(--shadow)}
.card-header{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.card-header h2{font-size:22px;letter-spacing:-.02em}
#step-count{font:500 12px var(--font-mono);color:var(--muted);letter-spacing:.04em;white-space:nowrap}
.steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:0;margin:16px 0 18px;font-size:13px;color:var(--muted)}
.steps li{padding-top:10px;border-top:3px solid var(--line);transition:border-color .4s var(--ease),color .4s}
.steps li.active{border-color:var(--accent);color:var(--ink);font-weight:600}
.steps li.done{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.dropzone{display:grid;justify-items:center;gap:6px;text-align:center;padding:28px 18px;border:1.5px dashed color-mix(in srgb,var(--ink) 28%,transparent);border-radius:var(--r-lg);cursor:pointer;transition:border-color .3s,background .3s,transform .4s var(--ease)}
.dropzone:hover{border-color:var(--accent-text);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.dropzone.dragover{border-style:solid;border-color:var(--accent-text);background:color-mix(in srgb,var(--accent) 18%,transparent);transform:scale(1.015)}
.upload-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--accent);color:var(--on-accent);font-size:22px;font-weight:700;margin-bottom:6px;transition:transform .4s var(--ease)}
.dropzone:hover .upload-icon{transform:translateY(-4px)}
.dropzone strong{font:600 17px/1.3 var(--font-display);word-break:break-word}
.dropzone span{font-size:14px;color:var(--muted)}
.dropzone small{font:500 12px var(--font-mono);color:var(--muted);margin-top:6px}
.quote-card.has-file .dropzone{padding:16px;grid-template-columns:auto 1fr;justify-items:start;text-align:left;column-gap:14px}
.quote-card.has-file .dropzone .upload-icon{grid-row:span 2;margin:0}
.quote-card.has-file .dropzone small{display:none}
.file-actions{display:flex;justify-content:space-between;gap:12px;margin-top:10px}
.file-actions button{font-size:14px;font-weight:500;color:var(--accent-text);padding:6px 0;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;transition:text-decoration-color .3s}
.file-actions button:hover{text-decoration-color:currentColor}
#remove{color:var(--muted)}
.file-message{font-size:14px;color:var(--muted);margin:6px 0 0}
.file-message:empty{display:none}
.file-message.error{color:#d9544a}
.upload-promise{margin:14px 0 6px;font-size:14px;color:var(--muted)}
.upload-promise b{color:var(--ink);font-weight:600}
.privacy{font-size:12.5px;color:var(--muted);margin:10px 0 0;line-height:1.45}
#calculate{margin-top:18px}
#configuration{margin-top:18px}
.field-label{font-size:13px;font-weight:600;margin:0 0 8px}
.segmented{display:grid;grid-template-columns:repeat(3,1fr);padding:4px;gap:4px;border-radius:var(--r-md);background:var(--field);border:1px solid var(--line)}
.segmented button{padding:10px 6px;border-radius:9px;font-size:14px;font-weight:600;color:var(--muted);transition:background .3s var(--ease),color .3s}
.segmented button:hover{color:var(--ink)}
.segmented button.selected{background:var(--accent);color:var(--on-accent)}
.control-hint{font-size:13px;color:var(--muted);margin:8px 0 0;line-height:1.45}
.control-hint:empty{display:none}
.fields{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:12px;margin-top:14px}
.fields label,.notes-field,.dimension-fields label{display:grid;gap:6px;font-size:13px;font-weight:500;color:var(--muted)}
select,input[type=number],input:not([type]),input[type=text],input[type=email],textarea{width:100%;min-height:44px;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--field);color:var(--ink);transition:border-color .25s}
select:hover,input:hover,textarea:hover{border-color:color-mix(in srgb,var(--ink) 30%,transparent)}
select:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
textarea{min-height:88px;resize:vertical}
::placeholder{color:color-mix(in srgb,var(--muted) 85%,transparent)}
.quantity{display:grid;grid-template-columns:44px 1fr 44px;border:1px solid var(--line);border-radius:10px;background:var(--field);overflow:hidden}
.quantity input{border:0;border-radius:0;text-align:center;min-height:42px;padding:0;-moz-appearance:textfield;font-family:var(--font-mono)}
.quantity input::-webkit-inner-spin-button{-webkit-appearance:none}
.quantity button{font-size:18px;color:var(--ink);transition:background .2s}
.quantity button:hover{background:color-mix(in srgb,var(--accent) 22%,transparent)}
#dimensions{margin-top:14px}
.dimension-fields{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.advanced{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.advanced summary{cursor:pointer;font-size:14px;font-weight:500;list-style:none;display:flex;justify-content:space-between;gap:12px}
.advanced summary::-webkit-details-marker{display:none}
.advanced summary::after{content:"+";font-size:18px;line-height:1;transition:transform .3s var(--ease)}
.advanced[open] summary::after{transform:rotate(45deg)}
.notes-field{margin-top:12px}
#estimate{margin-top:18px;padding:20px;border-radius:var(--r-lg);background:var(--surface);color:var(--on-surface)}
.estimate-status{font:500 12px var(--font-mono);letter-spacing:.06em;color:var(--on-surface-muted);margin:0}
.total{font:600 clamp(34px,3.4vw,48px)/1.05 var(--font-display);letter-spacing:-.03em;margin:8px 0 4px;font-variant-numeric:tabular-nums;color:var(--accent)}
.total.review-total{font-size:26px;color:var(--on-surface)}
#estimate .control-hint{color:var(--on-surface-muted)}
.progress{height:3px;margin:14px 0;background:rgba(233,238,222,.14);border-radius:3px;overflow:hidden}
.progress i{display:block;height:100%;width:0;background:var(--accent)}
.cost-row{display:flex;justify-content:space-between;gap:16px;padding:9px 0;font-size:14px;border-top:1px solid rgba(233,238,222,.1);animation:row-in .5s var(--ease) both}
.cost-row span:last-child{font-family:var(--font-mono);font-size:13px;white-space:nowrap}
.cost-row:last-child{font-weight:600;color:var(--on-surface)}
.cost-row:nth-child(2){animation-delay:.06s}.cost-row:nth-child(3){animation-delay:.12s}.cost-row:nth-child(4){animation-delay:.18s}.cost-row:nth-child(5){animation-delay:.24s}
@keyframes row-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
#checkout-button{margin-top:16px;background:var(--accent);color:var(--on-accent)}
#estimate small{display:block;margin-top:12px;font-size:12px;color:var(--on-surface-muted);line-height:1.45}

/* ---------- ticker (the one marquee) ---------- */
.ticker{overflow:hidden;border-block:1px solid var(--line);padding-block:clamp(18px,2.4vw,28px);margin-top:clamp(24px,4vw,48px)}
.ticker-track{display:flex;width:max-content;gap:clamp(20px,2.6vw,40px);align-items:center;font:600 clamp(28px,4.2vw,60px)/1 var(--font-display);letter-spacing:-.03em;white-space:nowrap}
.ticker-track b{color:var(--accent-text);font-weight:400;font-size:.7em}
@media (prefers-reduced-motion:no-preference){
  .ticker-track{animation:marquee 46s linear infinite}
  .ticker:hover .ticker-track{animation-play-state:paused}
}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- technologies: sticky stack ---------- */
.tech{padding-block:clamp(90px,11vw,150px) clamp(60px,8vw,110px)}
.stack{display:grid;gap:clamp(20px,3vw,36px);margin-top:clamp(40px,5vw,64px);timeline-scope:--c0,--c1,--c2}
.stack-card{position:sticky;top:calc(var(--header) + 18px + var(--n)*16px);min-height:min(76vh,680px);display:grid;grid-template-columns:minmax(0,1.3fr) minmax(300px,.7fr);border-radius:var(--r-xl);overflow:hidden;background:var(--surface);color:var(--on-surface);border:1px solid rgba(233,238,222,.1);box-shadow:0 -24px 60px -20px rgba(0,0,0,.45);transform-origin:center top}
.stack-card:nth-child(1){view-timeline-name:--c0}
.stack-card:nth-child(2){view-timeline-name:--c1}
.stack-card:nth-child(3){view-timeline-name:--c2}
.stack-card::after{content:"";position:absolute;inset:0;background:#050b08;opacity:0;pointer-events:none}
.stack-media{position:relative;min-height:320px}
.stack-media canvas{position:absolute;inset:0;width:100%;height:100%}
.fluid-pause{position:absolute;left:16px;bottom:16px;width:40px;height:40px;border-radius:999px;color:var(--on-surface);background:rgba(10,20,16,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(233,238,222,.16);font-size:13px}
.fluid-fallback{position:absolute;inset:0;display:grid;place-items:center;font:600 28px var(--font-display);color:var(--on-surface-muted)}
.fluid-unavailable .fluid-pause{display:none}
.stack-body{display:flex;flex-direction:column;justify-content:flex-end;gap:18px;padding:clamp(24px,3vw,44px)}
.stack-body h3{font-size:clamp(30px,3.2vw,48px);line-height:1;letter-spacing:-.035em}
.stack-body p{color:var(--on-surface-muted);font-size:17px;line-height:1.55;max-width:38ch}
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0}
.chips li{padding:6px 12px;border-radius:999px;border:1px solid rgba(233,238,222,.2);font-size:13px}
.tech-link{align-self:flex-start;display:inline-flex;gap:10px;align-items:center;margin-top:6px;padding:14px 18px;border-radius:var(--r-md);background:var(--accent);color:var(--on-accent);font-weight:600;font-size:15px;transition:transform .3s var(--ease)}
.tech-link span{transition:transform .35s var(--ease)}
.tech-link:hover{transform:translateY(-2px)}
.tech-link:hover span{transform:translate(3px,-3px)}
.tech-link:active{transform:scale(.98)}
@supports (animation-timeline:view()) and (timeline-scope:--a){
  @media (prefers-reduced-motion:no-preference) and (min-width:768px){
    .stack-card:nth-child(1){animation:stack-out linear both;animation-timeline:--c1;animation-range:entry 0% entry 100%}
    .stack-card:nth-child(2){animation:stack-out linear both;animation-timeline:--c2;animation-range:entry 0% entry 100%}
    .stack-card:nth-child(1)::after{animation:stack-dim linear both;animation-timeline:--c1;animation-range:entry 0% entry 100%}
    .stack-card:nth-child(2)::after{animation:stack-dim linear both;animation-timeline:--c2;animation-range:entry 0% entry 100%}
  }
}
@keyframes stack-out{to{transform:scale(.93)}}
@keyframes stack-dim{to{opacity:.6}}

/* ---------- materials ---------- */
.materials{padding-block:clamp(70px,9vw,130px)}
.materials-head p{margin-top:18px;font-size:18px;color:var(--muted);max-width:52ch}
.material-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:36px}
.material-tabs button{padding:12px 20px;border-radius:999px;border:1px solid var(--line);font-weight:600;font-size:15px;color:var(--muted);transition:background .3s var(--ease),color .3s,border-color .3s}
.material-tabs button:hover{color:var(--ink);border-color:color-mix(in srgb,var(--ink) 35%,transparent)}
.material-tabs button.selected{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.material-library{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;margin-top:20px}
.material-tile{display:flex;flex-direction:column;justify-content:space-between;gap:22px;min-height:124px;padding:20px;text-align:left;border-radius:var(--r-lg);background:var(--card);border:1px solid var(--line);transition:transform .4s var(--ease),border-color .3s,background .3s}
.material-tile strong{font:600 18px/1.2 var(--font-display);letter-spacing:-.015em}
.material-tile span{font-size:13px;color:var(--muted);transition:color .3s}
.material-tile:hover{transform:translateY(-4px);border-color:var(--accent-text)}
.material-tile:hover span{color:var(--accent-text)}
.material-tile:active{transform:scale(.98)}
@media (prefers-reduced-motion:no-preference){
  .material-tile{animation:tile-in .6s var(--ease) both}
  .material-tile:nth-child(2){animation-delay:.03s}.material-tile:nth-child(3){animation-delay:.06s}.material-tile:nth-child(4){animation-delay:.09s}.material-tile:nth-child(5){animation-delay:.12s}.material-tile:nth-child(6){animation-delay:.15s}.material-tile:nth-child(7){animation-delay:.18s}.material-tile:nth-child(8){animation-delay:.21s}.material-tile:nth-child(9){animation-delay:.24s}.material-tile:nth-child(n+10){animation-delay:.27s}
}
@keyframes tile-in{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
.material-help{margin-top:20px;font-size:15px;color:var(--muted)}
.material-help b{color:var(--ink)}

/* ---------- cases: asymmetric bento ---------- */
.cases{padding-block:clamp(70px,9vw,130px)}
.cases-note{margin-top:18px;font-size:15px;color:var(--muted);max-width:60ch}
.bento{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);grid-template-rows:minmax(260px,auto) minmax(260px,auto);gap:14px;margin-top:40px}
.case{position:relative;display:flex;flex-direction:column;gap:18px;padding:clamp(22px,2.6vw,36px);border-radius:var(--r-xl);overflow:hidden;isolation:isolate}
.case-a{grid-row:span 2;background:var(--surface);color:var(--on-surface);min-height:540px}
.case-a::before{content:"";position:absolute;inset:auto -20% -30% auto;width:80%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(215,246,84,.28),transparent 65%);z-index:-1}
.case-b{background:var(--accent);color:var(--on-accent)}
.case-c{background:var(--card);border:1px solid var(--line);background-image:repeating-linear-gradient(135deg,transparent 0 14px,color-mix(in srgb,var(--ink) 5%,transparent) 14px 15px)}
.case-kind{font-size:14px;font-weight:500;opacity:.75}
.case-art{font:700 clamp(56px,7.5vw,124px)/.88 var(--font-display);letter-spacing:-.05em;margin-top:auto;transition:transform .8s var(--ease)}
.case-a .case-art{color:var(--accent)}
.case-b .case-art,.case-c .case-art{font-size:clamp(44px,4.6vw,76px)}
.case-c .case-art{color:transparent;-webkit-text-stroke:1.5px var(--ink)}
.case:hover .case-art{transform:translateX(10px)}
.case-copy h3{font-size:clamp(22px,1.9vw,28px);letter-spacing:-.02em;line-height:1.15;margin-bottom:10px}
.case-copy p{font-size:15px;line-height:1.5;margin-top:4px;opacity:.85;max-width:46ch}

/* ---------- process: scroll-drawn timeline ---------- */
.process{padding-block:clamp(70px,9vw,130px)}
.timeline{position:relative;list-style:none;margin-top:clamp(36px,5vw,60px);padding:0 0 0 clamp(40px,5vw,72px);max-width:900px;margin-left:0}
.timeline::before,.timeline::after{content:"";position:absolute;left:9px;top:8px;bottom:8px;width:2px;border-radius:2px}
.timeline::before{background:var(--line)}
.timeline::after{background:var(--accent);transform-origin:top}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .timeline::after{animation:draw linear both;animation-timeline:view();animation-range:entry 40% cover 65%}
  }
}
@keyframes draw{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.timeline li{position:relative;padding-block:clamp(20px,3vw,34px)}
.timeline li::before{content:"";position:absolute;left:calc(-1 * clamp(40px,5vw,72px) + 2px);top:calc(clamp(20px,3vw,34px) + .45em);width:16px;height:16px;border-radius:5px;background:var(--bg);border:2px solid var(--accent-text)}
.timeline h3{font-size:clamp(28px,3.4vw,50px);letter-spacing:-.035em;line-height:1.05}
.timeline p{margin-top:10px;font-size:17px;color:var(--muted);max-width:50ch}

/* ---------- faq: side by side ---------- */
.faq{padding-block:clamp(70px,9vw,130px)}
.faq-list{margin:clamp(30px,4vw,50px) auto 0}
.faq-list>div{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(16px,4vw,64px);padding-block:26px;border-top:1px solid var(--line)}
.faq-list dt{font:500 clamp(19px,1.6vw,23px)/1.3 var(--font-display);letter-spacing:-.015em}
.faq-list dd{margin:0;font-size:17px;line-height:1.6;color:var(--muted);max-width:60ch}

/* ---------- service directory ---------- */
.directory{padding-block:clamp(70px,9vw,130px)}
.dir-list{display:block;margin-top:clamp(30px,4vw,50px)}
.dir-list a{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:clamp(12px,3vw,40px);padding:clamp(18px,2.2vw,28px) 14px;border-top:1px solid var(--line);isolation:isolate;overflow:hidden;transition:color .45s var(--ease),padding .45s var(--ease)}
.dir-list a:last-child{border-bottom:1px solid var(--line)}
.dir-list a::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--accent);transform:scaleY(0);transform-origin:bottom;transition:transform .5s var(--ease)}
.dir-list strong{font:600 clamp(26px,3.6vw,54px)/1.05 var(--font-display);letter-spacing:-.035em}
.dir-list span{font-size:15px;color:var(--muted);transition:color .45s}
.dir-list b{font-size:clamp(22px,2.4vw,34px);font-weight:400;transition:transform .5s var(--ease)}
.dir-list a:hover{color:var(--on-accent);padding-inline:26px}
.dir-list a:hover::before{transform:scaleY(1)}
.dir-list a:hover span{color:var(--on-accent)}
.dir-list a:hover b{transform:rotate(45deg)}

/* ---------- closing ---------- */
.closing{padding-block:clamp(90px,12vw,180px)}
.closing-kicker{font-size:clamp(17px,1.4vw,21px);color:var(--muted)}
.closing-title{font-size:clamp(56px,10vw,168px);line-height:.92;letter-spacing:-.055em;font-weight:700;margin:18px 0 44px;max-width:12ch;color:var(--ink)}
@media (prefers-reduced-motion:no-preference){
  html.motion-ok .closing-title{color:transparent;-webkit-text-stroke:1.5px var(--ink);transition:color 1.1s .25s var(--ease),-webkit-text-stroke-color 1.1s .25s}
  html.motion-ok .closing-title.is-in{color:var(--ink);-webkit-text-stroke-color:transparent}
  @supports (animation-timeline:view()){
    .closing-title{animation:swell linear both;animation-timeline:view();animation-range:entry 0% cover 45%}
  }
}
@keyframes swell{from{transform:scale(.86);transform-origin:left bottom}to{transform:none;transform-origin:left bottom}}

/* ---------- footer ---------- */
.site-footer,.seo-page>footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;padding:36px var(--gutter) 40px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
.site-footer .logo,.seo-page>footer .logo{color:var(--ink)}

/* ---------- scroll reveals ---------- */
html.motion-ok [data-reveal]:not(.is-in){opacity:0;transform:translateY(34px)}
html.motion-ok [data-reveal]{transition:opacity .9s var(--ease),transform 1s var(--ease);transition-delay:calc(var(--i,0) * 80ms)}

/* ---------- checkout dialog ---------- */
dialog#checkout{width:min(540px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:clamp(24px,3vw,34px);border:1px solid var(--line);border-radius:var(--r-xl);background:var(--card);color:var(--ink);box-shadow:var(--shadow)}
dialog#checkout::backdrop{background:rgba(5,12,9,.66);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
@media (prefers-reduced-motion:no-preference){dialog#checkout[open]{animation:dialog-in .5s var(--ease) both}}
@keyframes dialog-in{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}
dialog#checkout h2{font-size:clamp(24px,2.4vw,30px);letter-spacing:-.025em;line-height:1.1;padding-right:44px}
dialog#checkout .close{position:absolute;right:16px;top:16px;width:40px;height:40px;border-radius:999px;font-size:22px;border:1px solid var(--line);transition:transform .3s var(--ease)}
dialog#checkout .close:hover{transform:rotate(90deg)}
#order-summary{margin:18px 0;padding:14px 16px;border-radius:var(--r-md);background:var(--field);border:1px solid var(--line);font-size:14px;line-height:1.55}
#checkout-form{display:grid;gap:14px}
#checkout-form>label{display:block;font-size:14px;font-weight:500}
#checkout-form>label>input,#checkout-form>label>textarea{display:block;margin-top:6px}
.optional{color:var(--muted);font-weight:400}
.consent{display:flex!important;align-items:flex-start;gap:10px;font-weight:400!important;color:var(--muted);font-size:13px!important;line-height:1.45}
.consent input{width:18px;height:18px;margin-top:1px;flex:none;accent-color:#8fb31a}
.checkout-notice{padding:12px 14px;border-radius:var(--r-md);background:color-mix(in srgb,var(--accent) 16%,transparent);font-size:13.5px;line-height:1.45}
#payment{text-align:center;padding-top:14px}
.payment-icon{display:grid;place-items:center;width:56px;height:56px;margin:0 auto 14px;border-radius:16px;background:var(--accent);color:var(--on-accent);font-size:24px}
#payment h3{font-size:22px;margin-bottom:10px}
#payment p{color:var(--muted);margin-bottom:20px}

/* ---------- mobile bar ---------- */
.mobile-upload{display:none}

/* ---------- responsive ---------- */
@media (max-width:1023px){
  .site-header nav{display:none}
  .hero{grid-template-columns:1fr;grid-template-areas:"text" "card" "visual";grid-template-rows:auto;min-height:0}
  .hero-sub{max-width:44ch}
  .hero-visual{min-height:clamp(260px,50vw,420px)}
  .stack-card{grid-template-columns:1fr;min-height:0}
  .stack-media{min-height:clamp(260px,46vw,420px)}
}
@media (max-width:767px){
  :root{--header:60px}
  .nav-cta{display:none}
  .kinetic{font-size:clamp(40px,11.4vw,56px)}
  .fields{grid-template-columns:1fr}
  .stack-card{position:relative;top:auto}
  .bento{grid-template-columns:1fr;grid-template-rows:none}
  .case-a{grid-row:auto;min-height:420px}
  .faq-list>div{grid-template-columns:1fr;gap:8px}
  .dir-list a{grid-template-columns:minmax(0,1fr) auto}
  .dir-list span{display:none}
  .mobile-upload{position:fixed;left:12px;right:12px;bottom:12px;z-index:var(--z-float);display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-radius:var(--r-md);background:var(--accent);color:var(--on-accent);font-weight:600;box-shadow:0 18px 40px -16px rgba(0,0,0,.5)}
  .site-footer{padding-bottom:96px}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
  .ticker-track{animation:none!important}
  html.js:not(.is-ready) .kinetic .line>span{transform:none}
  html.js:not(.is-ready) :is(.hero .eyebrow,.hero-sub,.hero-visual,.quote-card){opacity:1}
}