:root{
  --ink:#14212b;
  --ink-soft:#263642;
  --muted:#66737d;
  --blue:#1457a6;
  --blue-dark:#0f3d75;
  --blue-pale:#dce8f4;
  --page:#eef1f4;
  --surface:#f4f6f8;
  --surface-2:#e8edf1;
  --surface-3:#dde4ea;
  --line:#c9d1d8;
  --line-strong:#aeb9c3;
  --success:#206b4d;
  --warning:#9a6818;
  --danger:#963d3d;
  --radius-sm:10px;
  --radius-md:16px;
  --radius-lg:24px;
  --shell:min(1220px,calc(100% - 48px));
  --clay-shadow:0 5px 0 #b8c2cb, 0 16px 32px rgba(37,53,66,.07);
  --clay-shadow-small:0 3px 0 #bcc6ce,0 8px 18px rgba(37,53,66,.05);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--page);color:var(--ink);font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;line-height:1.6;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button,input,select,textarea{font:inherit}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid rgba(20,87,166,.28);outline-offset:3px}
.shell{width:var(--shell);margin-inline:auto}

.site-header{width:var(--shell);margin:18px auto 0;min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:22px;padding:10px 12px 10px 16px;background:rgba(244,246,248,.98);border:1px solid var(--line);border-bottom:4px solid #b8c2cb;border-radius:var(--radius-md);position:sticky;top:12px;z-index:30;box-shadow:0 10px 24px rgba(28,43,55,.05)}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand img{width:58px;height:44px;object-fit:contain}
.brand span{display:grid;line-height:1.15}
.brand strong{font-size:.96rem;letter-spacing:.055em;white-space:nowrap}
.brand small{color:var(--muted);font-size:.72rem;margin-top:4px;white-space:nowrap}
.main-nav{display:flex;align-items:center;gap:2px}
.main-nav a{padding:9px 11px;border-radius:9px;font-size:.9rem;color:#33444f;transition:background-color .16s ease,color .16s ease}
.main-nav a:hover{background:#e5eaee;color:var(--ink)}
.main-nav a.active{background:#dce4eb;color:var(--blue-dark);font-weight:750}
.main-nav .admin-link{margin-left:8px;border:1px solid #b9c3cc;background:#edf0f3;font-weight:700}
.menu-toggle{display:none;border:1px solid var(--line-strong);background:#e8edf1;color:var(--ink);padding:9px 12px;border-radius:9px;font-weight:750;cursor:pointer}

.hero{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(360px,.88fr);gap:72px;align-items:center;padding:104px 0 82px}
.eyebrow{margin:0 0 14px;font-size:.73rem;letter-spacing:.18em;font-weight:850;color:var(--blue-dark)}
.hero h1,.page-hero h1{font-size:clamp(2.85rem,5.7vw,5.35rem);line-height:.98;letter-spacing:-.052em;margin:0;max-width:920px;font-weight:780}
.hero-copy>p:not(.eyebrow){font-size:1.12rem;color:var(--muted);max-width:680px;margin:28px 0 0}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:32px}
.button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 18px;border:1px solid var(--line-strong);border-bottom:4px solid #aab5be;border-radius:11px;font-weight:780;cursor:pointer;transition:transform .14s ease,border-color .14s ease,background-color .14s ease}
.button:hover{transform:translateY(-1px)}
.button.primary{background:var(--blue);border-color:#0f4789;border-bottom-color:#0c3b74;color:#fff}
.button.primary:hover{background:#124f98}
.button.secondary{background:#e7ebee;color:var(--ink)}
.button.secondary:hover{background:#dde3e8}
.hero-facts{display:flex;gap:22px;flex-wrap:wrap;margin-top:40px;padding-top:22px;border-top:1px solid #cbd3da}
.hero-facts div{display:grid;gap:1px;min-width:110px}
.hero-facts strong{font-size:.94rem}
.hero-facts span{font-size:.78rem;color:var(--muted)}

.hero-clay{position:relative;min-height:430px;display:grid;place-items:center}
.clay-panel{width:min(450px,100%);background:var(--surface-2);border:1px solid #bfc8d0;border-bottom:8px solid #adb9c3;border-right:4px solid #b7c1c9;border-radius:26px;padding:36px 34px;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 20px 38px rgba(28,44,57,.06)}
.panel-kicker{font-size:.75rem;letter-spacing:.12em;font-weight:850;color:var(--blue-dark)}
.clay-panel>strong{display:block;font-size:1.65rem;line-height:1.15;margin:10px 0 30px;letter-spacing:-.02em}
.metric-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:13px 0;border-top:1px solid #c3ccd4}
.metric-row span{color:var(--muted);font-size:.9rem}
.metric-row b{font-size:.9rem;text-align:right}
.clay-chip{position:absolute;right:0;bottom:10%;background:#d7e0e7;border:1px solid #b1bdc6;border-bottom:5px solid #a6b2bc;border-radius:12px;padding:10px 14px;color:var(--blue-dark);font-size:.76rem;font-weight:850;letter-spacing:.05em;box-shadow:0 10px 18px rgba(40,54,65,.05)}

.section{padding:78px 0}
.section-head{max-width:780px;margin-bottom:36px}
.section-head h2{font-size:clamp(2.05rem,4vw,3.6rem);line-height:1.03;letter-spacing:-.042em;margin:0;font-weight:760}
.section-head>p:last-child{color:var(--muted);max-width:690px;margin:18px 0 0}

.service-stack{display:grid;gap:12px}
.clay-row{display:grid;grid-template-columns:68px 1fr;gap:22px;align-items:center;background:var(--surface-2);border:1px solid #c2cbd3;border-bottom:5px solid #b3bec7;border-radius:16px;padding:22px 24px;box-shadow:0 8px 20px rgba(36,52,64,.035)}
.clay-row>span{font-size:.9rem;font-weight:850;color:var(--blue);letter-spacing:.08em}
.clay-row h2,.clay-row h3{margin:0 0 3px;font-size:1.18rem}
.clay-row p{margin:0;color:var(--muted)}

.process{border-top:1px solid #cbd3da}
.process-list{list-style:none;margin:0;padding:0;border-top:1px solid #c1cad2}
.process-list li{display:grid;grid-template-columns:70px 1fr;gap:24px;padding:23px 0;border-bottom:1px solid #c1cad2}
.process-list b{color:var(--blue);font-size:.9rem;letter-spacing:.08em}
.process-list span{display:grid;grid-template-columns:minmax(130px,.28fr) 1fr;gap:24px;color:var(--muted)}
.process-list strong{color:var(--ink);font-size:1.05rem}

.estimator-wrap{background:#e5eaee;border-top:1px solid #c4ccd3;border-bottom:1px solid #c4ccd3;padding:82px 0}
.estimator-title{margin-bottom:32px}
.estimator{display:grid;grid-template-columns:minmax(0,1fr) 326px;gap:22px;align-items:start}
.wizard-main,.estimate-preview{background:var(--surface);border:1px solid #bcc6ce;border-bottom:6px solid #aeb9c3;border-radius:20px;box-shadow:0 14px 30px rgba(35,51,64,.05)}
.wizard-main{padding:30px}
.wizard-progress{display:flex;align-items:center;gap:16px;margin-bottom:32px;font-size:.82rem;font-weight:780;color:#3b4a55}
.wizard-progress>div{height:6px;background:#d2d9df;flex:1;border-radius:999px;overflow:hidden}
.wizard-progress i{display:block;height:100%;background:var(--blue);width:14%;border-radius:999px;transition:width .2s ease}
.wizard-step{display:none}
.wizard-step.active{display:block}
.wizard-step.invalid{animation:softShake .18s linear 2}
@keyframes softShake{50%{transform:translateX(3px)}}
.wizard-step h3{font-size:1.45rem;line-height:1.2;margin:0 0 22px;letter-spacing:-.015em}
.choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.choice-card,.option-pill{display:block;cursor:pointer}
.choice-card input,.option-pill input{position:absolute;opacity:0;pointer-events:none}
.choice-card span,.option-pill span{display:grid;background:#e9edf0;border:1px solid #c1cad2;border-bottom:4px solid #b5c0c8;border-radius:13px;padding:17px;min-height:88px;transition:border-color .14s ease,background-color .14s ease,transform .14s ease}
.choice-card:hover span,.option-pill:hover span{background:#e4e9ed;transform:translateY(-1px)}
.choice-card input:checked+span,.option-pill input:checked+span{background:#dce7f1;border-color:#6f96bd;border-bottom-color:#4776a5;color:#103d6d}
.choice-card small,.option-pill small{color:var(--muted);margin-top:4px;font-size:.83rem;line-height:1.4}
.field{display:grid;gap:8px;font-weight:750;margin-bottom:22px}
.field input{font:inherit;padding:12px 13px;background:#e8ecef;border:1px solid #b8c2cb;border-bottom:3px solid #aeb8c1;border-radius:10px;max-width:220px;color:var(--ink)}
.option-group{border:0;padding:0;margin:0 0 24px}
.option-group legend{font-weight:800;margin-bottom:10px;color:#2c3b46}
.option-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.option-pill span{min-height:72px;padding:13px 14px}
.final-note{font-size:.86rem;color:var(--muted);border-top:1px solid #ccd4db;padding-top:17px;margin-top:10px}
.wizard-actions{display:flex;gap:9px;margin-top:30px;justify-content:flex-end}
#calculate-button{display:none}
.estimate-preview{position:sticky;top:108px;padding:26px}
.estimate-preview>span{color:var(--muted);font-size:.8rem;font-weight:760;letter-spacing:.08em;text-transform:uppercase}
.estimate-preview>strong{display:block;font-size:2.05rem;line-height:1.05;margin:10px 0 7px;letter-spacing:-.035em}
.estimate-preview p{color:var(--muted);font-size:.92rem;margin:0}
.clay-mini{margin-top:28px;padding:14px;background:#e1e6ea;border:1px solid #bcc6ce;border-bottom:4px solid #aeb9c3;border-radius:11px;display:grid}
.clay-mini small{color:var(--muted);font-size:.74rem}
.clay-mini b{font-size:.88rem}
.notice{background:#e8ecef;border:1px solid #bec7cf;border-bottom:4px solid #b0bac3;border-radius:14px;padding:18px;color:#45535e}

.cta{display:flex;justify-content:space-between;align-items:end;gap:34px}
.cta h2{margin:0;font-size:clamp(2rem,3.2vw,3rem);letter-spacing:-.035em}
.cta p:last-child{color:var(--muted);max-width:670px}

.site-footer{width:var(--shell);margin:34px auto 22px;padding:28px 0 20px;border-top:1px solid #c6ced5;display:grid;grid-template-columns:1fr auto;gap:22px}
.site-footer p{color:var(--muted);margin:5px 0;max-width:640px}
.site-footer small{grid-column:1/-1;color:#75818a}
.footer-links{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-start;font-size:.9rem;color:#3f4d58}
.footer-links a:hover{color:var(--blue-dark)}

.page-hero{padding:94px 0 42px;border-bottom:1px solid #cbd3da}
.page-hero h1{font-size:clamp(2.7rem,5vw,4.8rem);max-width:1000px}
.page-hero>p:last-child{color:var(--muted);font-size:1.05rem}
.prose-layout,.contact-grid,.result-layout{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.prose-card,.result-summary{background:var(--surface-2);border:1px solid #c1cad2;border-bottom:5px solid #b3bec7;border-radius:16px;padding:28px;box-shadow:0 10px 22px rgba(36,52,64,.035)}
.prose-card h2{margin:0 0 12px;font-size:1.45rem;letter-spacing:-.02em}
.prose-card p{color:#50606b;margin:0 0 16px}
.prose-card p:last-child{margin-bottom:0}
.contact-list{display:grid;gap:0;margin:0}
.contact-list div{display:grid;grid-template-columns:130px 1fr;gap:18px;padding:13px 0;border-top:1px solid #c7d0d7}
.contact-list div:first-child{border-top:0}
.contact-list dt{color:var(--muted)}
.contact-list dd{margin:0;font-weight:750}
.result-hero h1{color:var(--blue-dark)}
.result-summary{display:grid;gap:10px;align-content:start}
.result-summary div{background:#e0e6ea;border:1px solid #bcc6ce;border-bottom:4px solid #aeb9c3;border-radius:12px;padding:16px;display:grid}
.result-summary small{color:var(--muted);font-size:.76rem}
.result-summary b{font-size:1.15rem}
.breakdown>div{display:flex;justify-content:space-between;gap:20px;padding:14px 0;border-top:1px solid #c5ced5}
.breakdown>div:first-child{border-top:0}
.breakdown span{display:grid}
.breakdown small{color:var(--muted);font-size:.8rem}

@media(max-width:960px){
  :root{--shell:min(100% - 32px,1220px)}
  .site-header{position:relative;top:auto}
  .menu-toggle{display:block}
  .main-nav{display:none;position:absolute;top:78px;left:0;right:0;background:#f0f3f5;border:1px solid #bdc7cf;border-bottom:5px solid #aeb9c3;border-radius:14px;padding:8px;flex-direction:column;align-items:stretch;box-shadow:0 16px 28px rgba(30,45,57,.08)}
  .main-nav.open{display:flex}
  .main-nav .admin-link{margin-left:0}
  .hero{grid-template-columns:1fr;gap:42px;padding-top:72px}
  .hero-copy{max-width:850px}
  .hero-clay{min-height:330px;justify-content:start}
  .clay-panel{max-width:560px}
  .clay-chip{left:min(410px,65%);right:auto}
  .estimator{grid-template-columns:1fr}
  .estimate-preview{position:static}
  .prose-layout,.contact-grid,.result-layout{grid-template-columns:1fr}
  .cta{align-items:flex-start;flex-direction:column}
}
@media(max-width:650px){
  :root{--shell:calc(100% - 22px)}
  .site-header{margin-top:8px;border-radius:13px;padding-left:12px}
  .brand span{display:none}
  .brand img{width:52px}
  .hero{padding:58px 0 48px;gap:28px}
  .hero h1,.page-hero h1{font-size:2.65rem}
  .hero-copy>p:not(.eyebrow){font-size:1rem;margin-top:20px}
  .hero-actions{margin-top:24px}
  .hero-facts{gap:16px;margin-top:28px}
  .hero-clay{min-height:auto;display:block}
  .clay-panel{padding:24px 20px;border-radius:18px}
  .clay-chip{display:none}
  .section{padding:56px 0}
  .section-head{margin-bottom:26px}
  .clay-row{grid-template-columns:44px 1fr;gap:12px;padding:17px 16px}
  .process-list li{grid-template-columns:44px 1fr;gap:12px}
  .process-list span{grid-template-columns:1fr;gap:3px}
  .estimator-wrap{padding:58px 0}
  .choice-grid,.option-list{grid-template-columns:1fr}
  .wizard-main{padding:18px 15px}
  .wizard-actions{justify-content:stretch}
  .wizard-actions .button{flex:1;padding-inline:10px}
  .page-hero{padding:62px 0 28px}
  .prose-card,.result-summary{padding:20px}
  .contact-list div{grid-template-columns:1fr;gap:2px}
  .site-footer{grid-template-columns:1fr;padding-top:22px}
  .footer-links{gap:10px 16px}
}
