/* Castle Rock Basement Finishing — site stylesheet (Modernist system).
   Reusable components: .site-header .site-nav .brand | .hero (.hero-copy .hero-form .hero-media) | .quote form (.field .field-row .input .check .hp .fine)
   .btn (.btn-primary .btn-dark .btn-light .btn-call .btn-block) | .section (.section-grid .section-head .sec-num .section-body .prose)
   .cells/.cell | .reqs | .steps | .stat | .note | .callout | .ph placeholder | .cta-band | .sources | .site-footer | .callbar (mobile) */
:root{
  --color-bg:#f3f2f2;--color-surface:#eae9e9;--color-text:#201e1d;--color-accent:#ec3013;--color-on-accent:#ffffff;
  --color-divider:color-mix(in srgb,#201e1d 40%,transparent);
  --color-muted:color-mix(in srgb,var(--color-text) 78%,var(--color-bg));
  --color-neutral-100:#f8f4f4;--color-neutral-300:#d7d3d3;--color-neutral-400:#bab6b6;--color-neutral-700:#605d5d;--color-neutral-800:#444141;--color-neutral-900:#2d2b2b;
  --color-accent-100:#fff2ef;--color-accent-400:#ff9783;--color-accent-600:#dd2b0f;--color-accent-700:#ae1800;--color-accent-800:#7c1405;
  --font-heading:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;--font-body:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-6:24px;--space-8:32px;--space-12:48px;--space-16:64px;--space-24:96px;
  --wrap:1240px;--gutter:20px;--header-h:76px;--callbar-h:68px;
}
@media (min-width:720px){:root{--gutter:32px}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:var(--space-4)}
@media (min-width:1000px){html{scroll-padding-top:calc(var(--header-h) + var(--space-6))}}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--color-bg);color:var(--color-text);font-family:var(--font-body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;padding-bottom:calc(var(--callbar-h) + env(safe-area-inset-bottom))}
@media (min-width:1000px){body{padding-bottom:0}}
h1,h2,h3,h4{font-family:var(--font-heading);font-weight:800;line-height:1.08;letter-spacing:-.02em;margin:0;text-wrap:balance}
p{margin:0 0 var(--space-4);text-wrap:pretty}
p:last-child{margin-bottom:0}
a{color:var(--color-accent-700);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--color-accent-800);text-decoration-thickness:2px}
img{display:block;max-width:100%;height:auto}
figure{margin:0}
sup{line-height:0;font-size:12px}
sup a{font-weight:800;text-decoration:none;padding:0 1px}
sup a:hover{text-decoration:underline}
:focus{outline:none}
:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
::selection{background:color-mix(in srgb,var(--color-accent) 30%,transparent)}
.grayscale{filter:grayscale(1) contrast(1.08)}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.skip{position:absolute;left:var(--gutter);top:-200px;z-index:50;background:var(--color-text);color:var(--color-bg);padding:var(--space-3) var(--space-4);font-weight:700}
.skip:focus{top:var(--space-2);color:var(--color-bg)}

/* — buttons — */
.btn{display:inline-flex;align-items:center;justify-content:flex-start;gap:var(--space-3);min-height:48px;padding:var(--space-3) var(--space-4);font-family:var(--font-heading);font-weight:800;font-size:16px;line-height:1.2;text-align:left;text-decoration:none;color:var(--color-text);background:transparent;border:2px solid transparent;border-radius:0;cursor:pointer}
.btn svg{flex:none;display:block}
.btn .btn-end{margin-left:auto}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--color-accent-600);border-color:var(--color-accent-600);color:var(--color-on-accent)}
.btn-primary:hover{background:var(--color-accent-700);border-color:var(--color-accent-700);color:var(--color-on-accent)}
.btn-primary:active{background:var(--color-accent-800);border-color:var(--color-accent-800)}
.btn-dark{background:var(--color-text);border-color:var(--color-text);color:var(--color-bg)}
.btn-dark:hover{background:var(--color-neutral-800);border-color:var(--color-neutral-800);color:var(--color-bg)}
.btn-dark:active{background:var(--color-neutral-900)}
.btn-light{background:var(--color-on-accent);border-color:var(--color-on-accent);color:var(--color-text)}
.btn-light:hover{background:var(--color-neutral-300);border-color:var(--color-neutral-300);color:var(--color-text)}
.btn-outline-light{border-color:var(--color-on-accent);color:var(--color-on-accent)}
.btn-outline-light:hover{background:color-mix(in srgb,var(--color-on-accent) 14%,transparent);color:var(--color-on-accent)}
.btn-block{display:flex;width:100%}
.btn-call{min-height:76px;padding:var(--space-3) var(--space-6) var(--space-3) var(--space-3);font-size:22px;letter-spacing:-.01em;gap:var(--space-4)}
.btn-call small{display:block;font-family:var(--font-body);font-weight:400;font-size:14px;letter-spacing:0;margin-top:3px}
.btn-call-icon{display:grid;place-items:center;width:48px;height:48px;flex:none;background:color-mix(in srgb,#000 22%,transparent)}
.btn-call-icon svg{width:22px;height:22px}

/* — header — */
.site-header{position:relative;z-index:20;background:var(--color-bg);border-bottom:2px solid var(--color-text)}
@media (min-width:1000px){.site-header{position:sticky;top:0}}
.site-header .wrap{display:flex;flex-wrap:wrap;align-items:center;column-gap:var(--space-6);min-height:var(--header-h)}
.brand{display:flex;align-items:center;gap:var(--space-3);margin-right:auto;padding-block:var(--space-3);color:var(--color-text);text-decoration:none;font-family:var(--font-heading);font-weight:800;font-size:16px;line-height:1.05;letter-spacing:-.01em}
.brand:hover{color:var(--color-text)}
.brand-mark{width:26px;height:26px;flex:none;background:var(--color-accent)}
.brand-name span{display:block}
.site-nav{order:3;flex-basis:calc(100% + var(--gutter) * 2);margin-inline:calc(var(--gutter) * -1);border-top:1px solid var(--color-divider);overflow-x:auto;scrollbar-width:none}
.site-nav::-webkit-scrollbar{display:none}
.site-nav ul{list-style:none;margin:0;padding:0 var(--gutter);display:flex;gap:var(--space-6);white-space:nowrap}
.site-nav a{display:block;padding:var(--space-3) 0 calc(var(--space-3) - 3px);border-bottom:3px solid transparent;color:var(--color-text);text-decoration:none;font-size:15px;font-weight:600}
.site-nav a:hover{color:var(--color-accent-700)}
.site-nav a[aria-current="page"]{border-bottom-color:var(--color-accent)}
.header-call{min-height:44px;padding:var(--space-2) var(--space-3);font-size:15px;gap:var(--space-2)}
@media (max-width:379px){.header-call svg{display:none}}
@media (min-width:1000px){
  .site-nav{order:0;flex-basis:auto;margin:0;border:0;overflow:visible}
  .site-nav ul{padding:0;gap:var(--space-8)}
  .site-nav a{padding:calc(var(--space-6) + 2px) 0 calc(var(--space-6) - 1px)}
  .header-call{min-height:48px;padding-inline:var(--space-4);font-size:16px}
}

/* — hero — */
.hero{padding-block:var(--space-8) var(--space-12)}
.hero-grid{display:grid;gap:var(--space-8);grid-template-areas:"copy" "form" "media"}
.hero-copy{grid-area:copy}
.hero-form{grid-area:form}
.hero-media{grid-area:media}
.hero h1{font-size:clamp(38px,5.4vw + 16px,80px);line-height:.98;letter-spacing:-.035em;margin-bottom:var(--space-6)}
.hero-lead{font-size:19px;line-height:1.55;color:var(--color-muted);max-width:34em;margin-bottom:var(--space-8)}
.hero-call{display:flex}
.hero .or{margin-top:var(--space-4);font-weight:600}
@media (min-width:1000px){
  .hero{padding-block:var(--space-12) var(--space-16)}
  .hero-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-areas:"copy form" "media form";column-gap:var(--space-12);row-gap:var(--space-12);align-items:start}
  .hero .or{display:none}
}

/* — quote form — */
.quote{position:relative;display:grid;gap:var(--space-4);padding:var(--space-6);background:var(--color-surface);border:2px solid var(--color-text)}
@media (min-width:720px){.quote{padding:var(--space-8)}}
.quote-head{display:grid;gap:var(--space-2);padding-bottom:var(--space-4);border-bottom:2px solid var(--color-text)}
.quote h2{font-size:26px;letter-spacing:-.02em}
.field{display:grid;gap:6px;min-width:0}
.field > label{font-size:14px;font-weight:700;line-height:1.3}
.field-row{display:grid;gap:var(--space-4)}
@media (min-width:480px){.field-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
.input{width:100%;min-height:48px;padding:10px 12px;font:inherit;font-size:16px;line-height:1.4;color:var(--color-text);caret-color:var(--color-accent);background:var(--color-neutral-100);border:1px solid var(--color-neutral-700);border-radius:0;-webkit-appearance:none;appearance:none}
.input::placeholder{color:var(--color-neutral-700);opacity:1}
.input:hover{border-color:var(--color-text)}
.input:focus-visible{outline:2px solid var(--color-accent);outline-offset:0;border-color:var(--color-text)}
.input:user-invalid{border-color:var(--color-accent-700);box-shadow:inset 0 0 0 1px var(--color-accent-700)}
select.input{padding-right:44px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23201e1d' stroke-width='2.5' stroke-linecap='square'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:18px}
textarea.input{min-height:96px;resize:vertical}
.check{display:grid;grid-template-columns:24px minmax(0,1fr);gap:var(--space-3);align-items:start;font-size:14px;line-height:1.5;cursor:pointer}
.check input{-webkit-appearance:none;appearance:none;width:24px;height:24px;margin:0;border:2px solid var(--color-text);border-radius:0;background:var(--color-neutral-100);cursor:pointer}
.check input:hover{border-color:var(--color-accent-700)}
.check input:checked{border-color:var(--color-accent-600);background:var(--color-accent-600) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='square'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center/16px no-repeat}
.check input:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
.quote button[type="submit"]{min-height:58px;font-size:18px;padding-inline:var(--space-6) var(--space-4)}
.fine{font-size:14px;line-height:1.5;color:var(--color-muted);margin:0}
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* — sections — */
.section{border-top:2px solid var(--color-text);padding-block:var(--space-12)}
@media (min-width:1000px){.section{padding-block:var(--space-16) var(--space-24)}}
.section-grid{display:grid;gap:var(--space-6)}
@media (min-width:1000px){
  .section-grid{grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:var(--space-12)}
  .section-head{position:sticky;top:calc(var(--header-h) + var(--space-8));align-self:start}
}
.sec-num{display:block;margin-bottom:var(--space-3);font-family:var(--font-heading);font-weight:800;font-size:14px;letter-spacing:.08em;color:var(--color-accent-700)}
.section h2{font-size:clamp(28px,2.2vw + 14px,42px)}
.section-head .ph{margin-top:var(--space-8)}
.section-body > p{max-width:42em}
.section-body > * + .ph{margin-top:var(--space-8)}
.prose ul,.prose ol{padding-left:1.25em;margin:0 0 var(--space-4)}
.prose li + li{margin-top:var(--space-2)}
.prose h3{font-size:22px;margin:var(--space-8) 0 var(--space-3)}

/* services grid */
.cells{list-style:none;margin:0;padding:0;display:grid;border-top:2px solid var(--color-text);border-left:1px solid var(--color-divider)}
@media (min-width:640px){.cells{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cell{position:relative;display:grid;gap:var(--space-2);align-content:start;padding:var(--space-6) var(--space-12) var(--space-8) var(--space-6);border-right:1px solid var(--color-divider);border-bottom:1px solid var(--color-divider);transition:background-color .15s}
.cell:hover{background:var(--color-accent-100)}
.cell-num{font-family:var(--font-heading);font-weight:800;font-size:13px;letter-spacing:.08em;color:var(--color-accent-700)}
.cell-link{font-family:var(--font-heading);font-weight:800;font-size:21px;line-height:1.15;letter-spacing:-.015em;color:var(--color-text);text-decoration:none}
.cell-link::after{content:"";position:absolute;inset:0}
.cell-link:hover,.cell:hover .cell-link{color:var(--color-accent-700);text-decoration:none}
.cell-link:focus-visible{outline:none}
.cell-link:focus-visible::after{outline:2px solid var(--color-accent);outline-offset:-2px}
.cell-desc{font-size:16px;color:var(--color-muted)}
.cell-arrow{position:absolute;top:var(--space-6);right:var(--space-6);color:var(--color-accent);transition:transform .15s}
.cell:hover .cell-arrow{transform:translate(2px,-2px)}

/* requirement rows */
.reqs{list-style:none;margin:var(--space-8) 0 0;padding:0;border-top:2px solid var(--color-text)}
.reqs li{padding:var(--space-6) 0;border-bottom:1px solid var(--color-divider);color:var(--color-neutral-800)}
.reqs strong{display:block;margin-bottom:var(--space-1);font-family:var(--font-heading);font-weight:800;font-size:19px;letter-spacing:-.01em;color:var(--color-text)}

/* steps */
.steps{list-style:none;margin:0 0 var(--space-6);padding:0;display:grid;counter-reset:step;border-top:2px solid var(--color-text)}
@media (min-width:720px){.steps{grid-template-columns:repeat(3,minmax(0,1fr))}}
.steps li{counter-increment:step;padding:var(--space-6) 0 var(--space-8);border-bottom:1px solid var(--color-divider);font-size:18px;line-height:1.5}
.steps li::before{content:counter(step,decimal-leading-zero);display:block;margin-bottom:var(--space-4);font-family:var(--font-heading);font-weight:800;font-size:56px;line-height:1;letter-spacing:-.04em;color:var(--color-accent)}
@media (min-width:720px){.steps li{padding-right:var(--space-6)}.steps li + li{padding-left:var(--space-6);border-left:1px solid var(--color-divider)}}
.callout{background:var(--color-text);color:var(--color-bg);padding:var(--space-4) var(--space-6);font-weight:600}

/* stat */
.stat{display:grid;gap:var(--space-2);margin-bottom:var(--space-6);padding:var(--space-6) 0;border-top:2px solid var(--color-text);border-bottom:1px solid var(--color-divider)}
.stat-value{font-family:var(--font-heading);font-weight:800;font-size:clamp(56px,6vw + 20px,104px);line-height:.95;letter-spacing:-.045em}
.stat-label{font-size:14px;color:var(--color-muted)}

.note{background:var(--color-surface);padding:var(--space-6);font-size:16px;margin-top:var(--space-6)}

/* image placeholder — replace the .ph-label span with <img src alt> */
.ph{position:relative;aspect-ratio:var(--ar,4/3);overflow:hidden;background-color:var(--color-surface);background-image:repeating-linear-gradient(135deg,transparent 0 11px,color-mix(in srgb,var(--color-text) 10%,transparent) 11px 12px);border:1px solid var(--color-divider)}
.ph img{width:100%;height:100%;object-fit:cover}
.ph-label{position:absolute;left:var(--space-3);right:var(--space-3);bottom:var(--space-3);width:max-content;max-width:calc(100% - var(--space-6));padding:6px 10px;background:var(--color-bg);border:1px solid var(--color-text);font-family:var(--font-mono);font-size:12px;line-height:1.4;letter-spacing:.03em;text-transform:uppercase;color:var(--color-text)}

/* CTA band */
.cta-band{background:var(--color-accent-600);color:var(--color-on-accent);padding-block:var(--space-16)}
@media (min-width:1000px){.cta-band{padding-block:var(--space-24)}}
.cta-band h2{font-size:clamp(38px,5vw + 12px,80px);line-height:.98;letter-spacing:-.035em;margin-bottom:var(--space-6);max-width:11em}
.cta-band p{font-size:20px;max-width:34em}
.cta-band a:not(.btn){color:inherit;text-decoration-thickness:2px}
.cta-band a:not(.btn):hover{color:inherit;text-decoration-thickness:3px}
.cta-band :focus-visible{outline-color:var(--color-on-accent)}
.cta-actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-8)}
.cta-actions .btn{min-height:60px;padding-inline:var(--space-6);font-size:18px}

/* sources */
.sources{list-style:none;margin:0;padding:0;counter-reset:src;border-top:2px solid var(--color-text)}
.sources li{position:relative;counter-increment:src;padding:var(--space-4) 0 var(--space-4) var(--space-12);border-bottom:1px solid var(--color-divider);font-size:15px;line-height:1.5;color:var(--color-neutral-800)}
.sources li::before{content:counter(src);position:absolute;left:0;top:var(--space-4);font-family:var(--font-heading);font-weight:800;color:var(--color-accent-700)}
.sources li:target{background:var(--color-accent-100)}
.sources a{font-weight:600}

/* footer */
.site-footer{background:var(--color-text);color:var(--color-neutral-300);padding-block:var(--space-12) var(--space-12);font-size:15px;line-height:1.6}
.site-footer a{color:var(--color-neutral-100)}
.site-footer a:hover{color:var(--color-accent-400)}
.site-footer strong{color:var(--color-neutral-100)}
.site-footer :focus-visible{outline-color:var(--color-accent-400)}
.footer-grid{display:grid;gap:var(--space-8)}
@media (min-width:1000px){.footer-grid{grid-template-columns:minmax(0,6fr) minmax(0,3fr) minmax(0,3fr);column-gap:var(--space-12)}}
.footer-brand{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-6);color:var(--color-neutral-100);text-decoration:none;font-family:var(--font-heading);font-weight:800;font-size:18px;line-height:1.05}
.footer-brand:hover{color:var(--color-neutral-100)}
.footer-brand span span{display:block}
.footer-call{margin-top:var(--space-6)}
.footer-links{list-style:none;margin:0;padding:0;border-top:2px solid var(--color-neutral-700)}
.footer-links a{display:block;padding:var(--space-2) 0;border-bottom:1px solid var(--color-neutral-800);text-decoration:none;font-weight:600}
.footer-area{padding-top:var(--space-4);border-top:2px solid var(--color-neutral-700)}

/* mobile sticky call bar */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:minmax(0,1fr) auto;background:var(--color-text);border-top:2px solid var(--color-text);padding-bottom:env(safe-area-inset-bottom)}
.callbar .btn{min-height:var(--callbar-h);border:0}
.callbar .call{font-size:17px;gap:var(--space-3);padding:var(--space-2) var(--space-4)}
.callbar .call small{display:block;font-family:var(--font-body);font-weight:400;font-size:12px;line-height:1.3;margin-top:2px}
.callbar .cb{padding-inline:var(--space-4);font-size:15px}
@media (min-width:1000px){.callbar{display:none}}

/* — site additions (inner pages): breadcrumbs, page header, FAQ — built on the same tokens — */
.crumbs-nav{padding-top:var(--space-4)}
.crumbs{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--space-2);font-size:14px;font-weight:600;color:var(--color-muted)}
.crumbs li+li::before{content:"/";margin-right:var(--space-2);color:var(--color-neutral-400)}
.crumbs a{color:var(--color-text);text-decoration:none}
.crumbs a:hover{color:var(--color-accent-700);text-decoration:underline}
.page-head{padding-block:var(--space-8) var(--space-12)}
.page-head h1{max-width:16em}
.page-head .hero-call{margin-bottom:0}
.page-head .hero-lead:last-child{margin-bottom:0}
@media (min-width:1000px){.page-head{padding-block:var(--space-12) var(--space-16)}}
main:empty{display:none}
.section-body details{border-bottom:1px solid var(--color-divider)}
.section-body details:first-of-type{border-top:2px solid var(--color-text)}
.section-body summary{position:relative;padding:var(--space-4) var(--space-12) var(--space-4) 0;font-family:var(--font-heading);font-weight:800;font-size:19px;line-height:1.3;letter-spacing:-.01em;cursor:pointer;list-style:none}
.section-body summary::-webkit-details-marker{display:none}
.section-body summary::after{content:"+";position:absolute;right:var(--space-2);top:var(--space-3);font-size:26px;line-height:1.2;color:var(--color-accent)}
.section-body details[open] summary::after{content:"–"}
.section-body summary:hover{color:var(--color-accent-700)}
.section-body details p{padding-bottom:var(--space-6);color:var(--color-neutral-800);max-width:42em}

/* photos (full color on screen) — same frame as the .ph placeholder, image cropped to the frame */
.photo{position:relative;aspect-ratio:var(--ar,4/3);overflow:hidden;background:var(--color-surface);border:1px solid var(--color-divider)}
.photo picture{display:block;width:100%;height:100%}
.photo img{width:100%;height:100%;object-fit:cover}
.section-head .photo{margin-top:var(--space-8)}
.section-body > * + .photo{margin-top:var(--space-8)}