/* Archivo variable, latin subset (incl. å ä ö), self-hosted: widths 75 to 125 %, weights 400 to 900 */
@font-face{font-family:"Archivo";font-style:normal;font-weight:400 900;font-stretch:75% 125%;font-display:swap;src:url(../fonts/archivo-latin.woff2) format("woff2")}
:root{
  --concrete:#ECEDEA;--plaster:#FAFAF8;--ink:#1E2421;--graphite:#4A524E;
  --spruce:#23443A;--spruce-deep:#16302A;--mist:#C4D2CC;--rule:#EFC22E;--line:#C9CCC6;--red:#B3261E;
  --max:1240px;--pad:clamp(20px,4vw,48px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{font-family:"Archivo",system-ui,sans-serif;background:var(--concrete);color:var(--ink);font-size:18px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--rule);outline-offset:3px;border-radius:2px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:10px 14px;z-index:99}
.skip:focus{left:8px}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Header */
header{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--concrete) 88%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .2s}
header.scrolled{border-bottom-color:var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;height:72px;gap:24px}
.mark{display:flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none;font-weight:800;font-size:22px;font-stretch:125%;letter-spacing:-.01em;white-space:nowrap}
.mark{gap:0;align-items:baseline;font-size:30px}
.mark .logo-a{flex:none;height:.8em;width:auto;margin-right:.05em;align-self:baseline;overflow:visible}
nav ul{display:flex;gap:28px;list-style:none}
nav a{text-decoration:none;font-size:16px;color:var(--graphite);white-space:nowrap}
nav a:hover,nav a[aria-current]{color:var(--ink)}
.bar-right{display:flex;align-items:center;gap:20px}
.tel{text-decoration:none;font-weight:700;font-stretch:90%;font-size:16px;white-space:nowrap}
.tel:hover{text-decoration:underline;text-underline-offset:4px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-weight:700;font-size:16px;text-decoration:none;cursor:pointer;border:0;border-radius:6px;padding:14px 22px;transition:background .15s,color .15s}
.btn-primary{background:var(--spruce);color:var(--plaster)}
.btn-primary:hover{background:var(--spruce-deep)}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--plaster)}
.btn-rule{background:var(--rule);color:var(--ink)}
.btn-rule:hover{background:#F5CF4E}
.menu-toggle{display:none;background:none;border:0;font-weight:700;font-size:16px;padding:10px 0;cursor:pointer}

/* Hero */
.hero{padding:clamp(56px,8vw,112px) 0 0;overflow:hidden}
.hero-eyebrow{display:block;font-size:clamp(15px,1.3vw,18px);font-weight:700;font-stretch:100%;letter-spacing:0;color:var(--graphite);margin-bottom:18px}
.service h3 a{color:inherit;text-decoration:none}
.service h3 a:hover{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px}
.hero h1{font-weight:800;font-stretch:115%;font-size:clamp(40px,5.6vw,84px);line-height:1;letter-spacing:-.03em;max-width:16ch;text-wrap:balance}
.hero-sub{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:end;margin-top:clamp(28px,4vw,48px)}
.hero-sub p{font-size:clamp(18px,1.6vw,21px);max-width:48ch;color:var(--graphite)}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.proof{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:36px;list-style:none;font-size:15px;color:var(--graphite);font-stretch:90%}
.proof li{display:flex;align-items:center;gap:8px}
.proof svg{flex:none}

/* Folding rule */
.hero-work{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:clamp(36px,5vw,64px)}
.shot{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:6px;border:0;padding:0;cursor:zoom-in;background:var(--concrete);text-align:left}
.shot img,.shot .tex{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.shot:hover img{transform:scale(1.03)}
.shot span{position:absolute;left:0;right:0;bottom:0;padding:32px 14px 12px;color:#fff;font-weight:700;font-size:16px;line-height:1.2;background:linear-gradient(transparent,rgba(16,22,19,.7))}
.rule-stage{margin-top:clamp(44px,6vw,80px);height:118px;position:relative;container-type:inline-size}
.rule{--n:10;--seg:calc(100cqw / var(--n));position:absolute;left:0;top:30px}
.seg{position:absolute;left:0;top:0;width:var(--seg);height:56px;transform-origin:0 50%;
  background:
    linear-gradient(var(--ink),var(--ink)) 0 0/1px 100% no-repeat,
    repeating-linear-gradient(90deg,var(--ink) 0 1px,transparent 1px calc(var(--seg)/20)) 0 0/100% 10px no-repeat,
    repeating-linear-gradient(90deg,var(--ink) 0 1px,transparent 1px calc(var(--seg)/4)) 0 0/100% 18px no-repeat,
    repeating-linear-gradient(90deg,var(--ink) 0 1px,transparent 1px calc(var(--seg)/20)) 0 100%/100% 10px no-repeat,
    var(--rule);
  border-radius:2px;box-shadow:0 1px 0 rgba(30,36,33,.25);transition:transform 1.1s cubic-bezier(.65,0,.25,1)}
.seg>.seg{left:100%}
.seg::before{content:"";position:absolute;left:-5px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:#B8B9B2;box-shadow:inset 0 0 0 2px #8E908A}
.rule>.seg::before{display:none}
.seg span{position:absolute;bottom:13px;right:6px;font-size:15px;font-weight:700;font-stretch:75%;line-height:1}
.seg span.red{color:var(--red)}
.rule-caption{position:absolute;right:0;bottom:0;font-size:14px;color:var(--graphite);font-stretch:85%}

/* Audience strip */
.audience{border-top:1.5px solid var(--ink);border-bottom:1px solid var(--line)}
.audience ul{display:grid;grid-template-columns:repeat(3,1fr);list-style:none}
.audience li{padding:26px 24px 26px 0;font-weight:700;font-stretch:112%;font-size:clamp(18px,1.8vw,24px);letter-spacing:-.01em}
.audience li+li{padding-left:24px;border-left:1px solid var(--line)}
.audience small{display:block;font-weight:400;font-stretch:90%;font-size:15px;color:var(--graphite);letter-spacing:0;margin-top:4px}

/* Sections */
section.block{padding:clamp(80px,10vw,140px) 0}
.sec-head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,80px);align-items:start;margin-bottom:clamp(40px,6vw,72px)}
h2{font-weight:800;font-stretch:115%;font-size:clamp(34px,4.6vw,62px);line-height:1;letter-spacing:-.025em}
.sec-head p{font-size:clamp(18px,1.5vw,20px);color:var(--graphite);max-width:52ch;padding-top:8px}

/* Services */
.services{border-top:1.5px solid var(--ink)}
.service{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,5fr) minmax(0,2fr);gap:clamp(20px,4vw,64px);padding:clamp(28px,3.4vw,44px) 0;border-bottom:1px solid var(--line);align-items:start}
.service h3{font-weight:750;font-stretch:110%;font-size:clamp(24px,2.4vw,32px);line-height:1.1;letter-spacing:-.015em}
.service p{color:var(--graphite);max-width:48ch}
.service .rot{display:inline-block;font-size:14px;font-weight:700;font-stretch:90%;background:var(--rule);padding:3px 8px;border-radius:3px;justify-self:start}
.service .rot.no{background:transparent;box-shadow:inset 0 0 0 1px var(--line);color:var(--graphite);font-weight:600}

/* Gallery */
.gallery{background:var(--plaster);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.filters button{border:0;cursor:pointer;padding:10px 16px;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--line);font-size:16px;font-weight:600;background:transparent;transition:background .15s}
.filters button[aria-pressed="true"]{background:var(--ink);color:var(--plaster);box-shadow:none}
.grid{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:clamp(120px,14vw,190px);gap:12px}
.tile{position:relative;overflow:hidden;border-radius:6px;cursor:zoom-in;border:0;padding:0;background:var(--concrete);text-align:left}
.tile:nth-child(6n+1){grid-column:span 7;grid-row:span 2}
.tile:nth-child(6n+2){grid-column:span 5;grid-row:span 2}
.tile:nth-child(6n+3),.tile:nth-child(6n+4),.tile:nth-child(6n+5){grid-column:span 4;grid-row:span 2}
.tile:nth-child(6n+6){grid-column:span 12;grid-row:span 2}
.tile:nth-child(6n+3):last-child{grid-column:span 12}
.tile img,.tile .tex{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile figcaption{position:absolute;left:0;right:0;bottom:0;padding:40px 18px 16px;color:#fff;background:linear-gradient(transparent,rgba(16,22,19,.72));font-weight:700;font-stretch:105%;font-size:18px;line-height:1.2}
.tile figcaption small{display:block;font-weight:500;font-stretch:90%;font-size:14px;opacity:.85;margin-top:2px}
.tile[hidden]{display:none}
/* Material textures, shown until a real photo is in /media */
.tex.wood{background:repeating-linear-gradient(90deg,#B98B5C 0 2px,#C99A68 2px 26px,#B4855A 26px 28px,#D2A676 28px 64px),#C99A68}
.tex.tile-w{background:linear-gradient(#DADDD8 2px,transparent 2px) 0 0/48px 48px,linear-gradient(90deg,#DADDD8 2px,transparent 2px) 0 0/48px 48px,#F4F5F2}
.tex.plaster{background:radial-gradient(circle at 30% 20%,#F2F1EC,#D9D8D1 70%)}
.tex.roof{background:repeating-linear-gradient(0deg,#3A3F3C 0 3px,#4E5450 3px 34px)}
.tex.spruce{background:repeating-linear-gradient(90deg,#23443A 0 54px,#1B3830 54px 58px)}
.tex.concrete{background:radial-gradient(#0000 60%,#0001),repeating-radial-gradient(circle at 70% 40%,#C9CBC6 0 1px,#BDBFBA 1px 3px)}
.tex.setts{background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80'><rect width='80' height='80' fill='%2355595A'/><rect x='2' y='2' width='36' height='36' rx='6' fill='%239A9C97'/><rect x='42' y='2' width='36' height='36' rx='6' fill='%23898C87'/><rect x='-18' y='42' width='36' height='36' rx='6' fill='%23A5A6A0'/><rect x='22' y='42' width='36' height='36' rx='6' fill='%238F918B'/><rect x='62' y='42' width='36' height='36' rx='6' fill='%23A5A6A0'/></svg>") 0 0/56px 56px}
.tex.pavers{background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='60'><rect width='120' height='60' fill='%23474A48'/><rect x='2' y='2' width='56' height='26' rx='2' fill='%23706F6B'/><rect x='62' y='2' width='56' height='26' rx='2' fill='%237C7B76'/><rect x='-28' y='32' width='56' height='26' rx='2' fill='%23767570'/><rect x='32' y='32' width='56' height='26' rx='2' fill='%23696864'/><rect x='92' y='32' width='56' height='26' rx='2' fill='%23767570'/></svg>") 0 0/90px 45px}
.tex.slate{background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='160'><rect width='200' height='160' fill='%23474A47'/><path d='M3 3h70l-4 58H3z' fill='%23807C73'/><path d='M77 3h60l6 46-72 8z' fill='%23948F85'/><path d='M147 3h50v62l-48-12z' fill='%23736F67'/><path d='M3 65h64l8 50H3z' fill='%238A867D'/><path d='M71 61l74-8 52 16v40l-120 4z' fill='%237A766E'/><path d='M3 119h76l4 38H3z' fill='%239A958A'/><path d='M83 117l114-4v44H87z' fill='%23858177'/></svg>") 0 0/280px 224px}
.tex.gravel{background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><rect width='40' height='40' fill='%23BDB7AA'/><g fill='%23A39D90'><circle cx='5' cy='6' r='3'/><circle cx='20' cy='3' r='2.4'/><circle cx='33' cy='10' r='3.2'/><circle cx='12' cy='20' r='2.6'/><circle cx='27' cy='24' r='3'/><circle cx='6' cy='33' r='2.8'/><circle cx='19' cy='35' r='2.2'/><circle cx='35' cy='34' r='2.6'/></g><g fill='%23D6D1C5'><circle cx='14' cy='9' r='1.8'/><circle cx='30' cy='17' r='1.6'/><circle cx='4' cy='22' r='1.6'/><circle cx='26' cy='37' r='1.5'/></g></svg>") 0 0/40px 40px}
.tex.wall{background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='80'><rect width='160' height='80' fill='%233E413E'/><rect x='3' y='3' width='58' height='34' rx='12' fill='%23928D82'/><rect x='65' y='3' width='42' height='34' rx='10' fill='%23A39E92'/><rect x='111' y='3' width='46' height='34' rx='12' fill='%23857F74'/><rect x='-20' y='41' width='50' height='36' rx='12' fill='%239C978B'/><rect x='34' y='41' width='62' height='36' rx='12' fill='%23888276'/><rect x='100' y='41' width='40' height='36' rx='10' fill='%23ABA699'/><rect x='144' y='41' width='50' height='36' rx='12' fill='%239C978B'/></svg>") 0 0/240px 120px}
.tex.grass{background:radial-gradient(ellipse at 30% 60%,#BDB7AA 0 22%,transparent 23%),radial-gradient(ellipse at 75% 30%,#B3AD9F 0 14%,transparent 15%),repeating-linear-gradient(80deg,#6F7F55 0 2px,#7D8D60 2px 5px,#667650 5px 7px)}
.media-note{margin-top:20px;font-size:14px;color:var(--graphite)}

/* Before / after */
.ba{margin-top:clamp(56px,7vw,96px);display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,5vw,72px);align-items:center}
.ba h3{font-weight:800;font-stretch:115%;font-size:clamp(28px,3vw,40px);line-height:1.05;letter-spacing:-.02em;margin-bottom:12px}
.ba p{color:var(--graphite)}
.compare{position:relative;aspect-ratio:16/10;border-radius:6px;overflow:hidden;--pos:50%;user-select:none;touch-action:pan-y}
.compare .layer{position:absolute;inset:0}
.compare .layer img,.compare .layer .tex{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.compare .after{clip-path:inset(0 0 0 var(--pos))}
.compare .tag{position:absolute;top:14px;padding:5px 10px;border-radius:4px;font-size:14px;font-weight:700;background:rgba(250,250,248,.9)}
.compare .before .tag{left:14px}.compare .after .tag{right:14px}
.handle{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:var(--plaster);pointer-events:none}
.handle::after{content:"";position:absolute;top:50%;left:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:var(--rule) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%231E2421' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l-6 6 6 6M15 6l6 6-6 6'/%3E%3C/svg%3E") center/22px no-repeat;box-shadow:0 2px 10px rgba(0,0,0,.25)}
.compare input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.compare:has(input:focus-visible) .handle::after{outline:3px solid var(--ink);outline-offset:2px}

/* Process */
.process{background:var(--spruce);color:var(--plaster)}
.process .sec-head p{color:var(--mist)}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid rgba(250,250,248,.25);list-style:none}
.step{padding:32px 28px 8px 0}
.step+.step{padding-left:28px;border-left:1px solid rgba(250,250,248,.18)}
.step b{display:block;font-weight:850;font-stretch:125%;font-size:56px;line-height:1;color:var(--rule);margin-bottom:28px;letter-spacing:-.03em}
.step h3{font-weight:700;font-stretch:105%;font-size:22px;margin-bottom:10px}
.step p{font-size:16px;color:var(--mist)}

/* ROT calculator */
.rot-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:start}
.rot-grid > div > p{color:var(--graphite);margin-top:20px;max-width:44ch}
.calc{background:var(--plaster);border:1px solid var(--line);border-radius:10px;padding:clamp(24px,3.4vw,44px)}
.calc label{display:block;font-size:15px;font-weight:600;color:var(--graphite);margin-bottom:10px}
.amount{display:flex;align-items:baseline;gap:10px;margin-bottom:14px}
.amount input{font:inherit;font-weight:800;font-stretch:115%;font-size:clamp(32px,4vw,48px);letter-spacing:-.02em;width:7.5ch;border:0;border-bottom:2px solid var(--ink);background:transparent;padding:0 0 4px}
.amount input:focus{outline:none;border-bottom-color:var(--spruce)}
.amount span{font-weight:700;font-size:22px}
input[type=range]{width:100%;accent-color:var(--spruce);height:28px}
.owners{display:flex;gap:8px;margin:22px 0 28px}
.owners button{flex:1;border:0;cursor:pointer;padding:12px;border-radius:6px;box-shadow:inset 0 0 0 1.5px var(--line);background:transparent;font-weight:600;font-size:16px}
.owners button[aria-pressed="true"]{background:var(--ink);color:var(--plaster);box-shadow:none}
.result{display:grid;grid-template-columns:1fr 1fr;border-top:1.5px solid var(--ink)}
.result div{padding:18px 16px 0 0}
.result div+div{padding-left:16px;border-left:1px solid var(--line)}
.result dt{font-size:15px;color:var(--graphite)}
.result dd{font-weight:800;font-stretch:115%;font-size:clamp(26px,3vw,36px);letter-spacing:-.02em;margin-top:2px}
.result .save dd{color:var(--spruce)}
.calc small{display:block;margin-top:20px;font-size:14px;color:var(--graphite)}
.cap{display:none;margin-top:12px;font-size:14px;font-weight:600;color:var(--red)}
.cap.show{display:block}

/* About */
.about-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:start}
.about-grid h2{position:sticky;top:110px}
.about-body p{font-size:clamp(19px,1.7vw,23px);line-height:1.5;max-width:42ch}
.about-body p+p{margin-top:1em}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:56px;border-top:1.5px solid var(--ink)}
.facts div{padding:20px 20px 0 0}
.facts dt{font-size:15px;color:var(--graphite);font-stretch:88%}
.facts dd{font-weight:750;font-stretch:110%;font-size:21px;margin-top:4px}

/* FAQ */
.faq{background:var(--plaster);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.faq-list{border-top:1.5px solid var(--ink)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 0;font-weight:700;font-stretch:108%;font-size:clamp(19px,1.8vw,24px);letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:28px;height:28px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--ink);background:linear-gradient(var(--ink),var(--ink)) center/12px 2px no-repeat,linear-gradient(var(--ink),var(--ink)) center/2px 12px no-repeat;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 26px;color:var(--graphite);max-width:64ch}

/* Contact */
.contact-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px)}
.direct{margin-top:36px;display:grid;gap:24px}
.direct a,.direct div{text-decoration:none;display:block}
.direct small{display:block;font-size:15px;color:var(--graphite);font-stretch:88%}
.direct strong{font-weight:750;font-stretch:115%;font-size:clamp(24px,2.4vw,32px);letter-spacing:-.015em;line-height:1.15;display:block;overflow-wrap:anywhere}
.direct a:hover strong{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.direct .addr strong{font-size:clamp(20px,1.8vw,24px)}
.direct .addr a{display:inline;font-size:15px;color:var(--spruce);font-weight:600}
form{background:var(--plaster);border:1px solid var(--line);border-radius:10px;padding:clamp(24px,3.4vw,44px);display:grid;grid-template-columns:1fr 1fr;gap:20px}
.field{display:grid;gap:8px;align-content:start}
.field.full{grid-column:1/-1}
.field label,legend{font-size:15px;font-weight:600;color:var(--graphite)}
.field input,textarea{font:inherit;font-size:17px;color:var(--ink);background:var(--concrete);border:1.5px solid transparent;border-radius:6px;padding:13px 14px;width:100%}
.field input:focus,textarea:focus{outline:none;border-color:var(--spruce);background:#fff}
textarea{min-height:130px;resize:vertical}
fieldset{border:0;grid-column:1/-1}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.chips label{position:relative;cursor:pointer}
.chips input{position:absolute;opacity:0;width:1px;height:1px}
.chips span{display:inline-block;padding:10px 16px;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--line);font-size:16px;font-weight:600;transition:background .15s}
.chips input:checked+span{background:var(--ink);color:var(--plaster);box-shadow:none}
.chips input:focus-visible+span{outline:3px solid var(--rule);outline-offset:2px}
.drop{grid-column:1/-1;display:flex;align-items:center;gap:14px;padding:16px;border-radius:6px;border:1.5px dashed var(--line);cursor:pointer;font-size:16px;color:var(--graphite)}
.drop:hover,.drop.over{border-color:var(--spruce);background:#fff}
.drop input{position:absolute;opacity:0;width:1px;height:1px}
.drop b{color:var(--ink)}
.privacy{grid-column:1/-1;font-size:14px;color:var(--graphite);max-width:60ch}
.privacy a{color:var(--ink)}
.form-foot{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.form-foot small{color:var(--graphite);font-size:14px;max-width:38ch}
.sent{grid-column:1/-1;display:none;padding:28px 0}
.sent h3{font-weight:800;font-stretch:115%;font-size:32px;margin-bottom:8px}
form.done>:not(.sent){display:none}
form.done .sent{display:block}
.error{color:var(--red);font-size:14px;display:none}
.field.invalid .error{display:block}
.field.invalid input{border-color:var(--red)}

footer{background:var(--ink);color:#B5BCB8;padding:64px 0 40px;font-size:15px}
.foot{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px}
footer .mark{color:var(--plaster);margin-bottom:14px}
footer h2{color:var(--plaster);font-size:15px;font-weight:700;font-stretch:100%;letter-spacing:0;line-height:1.5;margin-bottom:10px}
footer ul{list-style:none;display:grid;gap:6px}
footer a{text-decoration:none}
footer a:hover{color:var(--plaster)}
.foot-base{margin-top:48px;padding-top:20px;border-top:1px solid #343B37;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}


/* Stone showcase */
.stone-ui{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(20px,3vw,40px);align-items:stretch}
.stone-tabs{display:flex;flex-direction:column;border-top:1.5px solid var(--ink)}
.stone-tabs button{display:flex;align-items:center;gap:14px;border:0;background:none;cursor:pointer;text-align:left;padding:16px 0;border-bottom:1px solid var(--line);font-weight:700;font-stretch:108%;font-size:clamp(18px,1.6vw,22px);color:var(--graphite);transition:color .15s}
.stone-tabs button:hover{color:var(--ink)}
.stone-tabs button[aria-selected="true"]{color:var(--ink)}
.stone-tabs .chip{position:relative;flex:none;width:40px;height:40px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.stone-tabs button[aria-selected="true"] .chip{box-shadow:0 0 0 3px var(--concrete),0 0 0 5px var(--ink)}
.stone-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:var(--plaster);border:1px solid var(--line);border-radius:10px;overflow:hidden;min-height:400px}
.stone-swatch{position:relative;min-height:260px}
.stone-swatch img,.stone-swatch .tex{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.stone-info{padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;gap:16px;align-items:flex-start;container-type:inline-size;min-width:0}
.stone-info h3{font-weight:800;font-stretch:115%;font-size:clamp(24px,10cqi,36px);line-height:1.05;letter-spacing:-.02em;max-width:100%;overflow-wrap:break-word;hyphens:auto}
.stone-info p{color:var(--graphite)}
.stone-info ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.stone-info li{font-size:15px;font-weight:600;padding:6px 12px;border-radius:999px;background:var(--concrete)}
.stone-info .btn{margin-top:auto}

/* Gallery hover affordance */
.tile figcaption span{display:inline-block}
.tile:hover figcaption span,.tile:focus-visible figcaption span{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}

/* Project story dialog */
dialog.case{border:0;padding:0;background:transparent;width:min(1120px,94vw);max-width:none;max-height:92vh;margin:auto}
dialog.case::backdrop{background:rgba(16,22,19,.82)}
.case-inner{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);background:var(--plaster);border-radius:10px;overflow:hidden;max-height:92vh}
.case-media{background:var(--ink);display:flex;flex-direction:column}
.case-main{position:relative;flex:1;min-height:420px}
.case-main img,.case-main .tex{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.case-thumbs{display:flex;gap:8px;padding:10px;overflow-x:auto}
.case-thumbs:empty{display:none}
.case-thumbs button{position:relative;flex:none;width:72px;height:54px;border:0;border-radius:4px;overflow:hidden;cursor:pointer;opacity:.6;padding:0}
.case-thumbs button[aria-current="true"]{opacity:1;box-shadow:0 0 0 2px var(--rule)}
.case-thumbs img,.case-thumbs .tex{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.case-body{position:relative;padding:clamp(24px,3vw,40px);overflow-y:auto;display:flex;flex-direction:column;gap:14px}
.case-close{position:absolute;top:16px;right:16px;border:0;background:var(--concrete);border-radius:6px;padding:8px 12px;font-weight:700;font-size:15px;cursor:pointer}
.case-cat{font-size:15px;font-weight:600;color:var(--spruce)}
.case-body h3{font-weight:800;font-stretch:115%;font-size:clamp(28px,3vw,40px);line-height:1.02;letter-spacing:-.02em;padding-right:70px}
.case-meta{display:flex;gap:28px}
.case-meta dt{font-size:14px;color:var(--graphite)}
.case-meta dd{font-weight:700}
.case-body > p{color:var(--graphite)}
.case-body h4{font-size:15px;font-weight:700;margin-top:6px}
.case-body ul{list-style:none;border-top:1.5px solid var(--ink)}
.case-body li{padding:9px 0;border-bottom:1px solid var(--line);font-size:16px}
.case-nav{display:flex;gap:8px;margin-top:8px}
.case-nav .btn{flex:1;padding:12px}
.case-cta{width:100%}

/* Reviews */
.rev-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(24px,3vw,48px);border-top:1.5px solid var(--ink);padding-top:32px}
.rev blockquote{font-size:clamp(20px,1.8vw,24px);line-height:1.4;font-stretch:96%}
.rev figcaption{margin-top:16px;font-size:15px;color:var(--graphite)}
.rev figcaption strong{display:block;color:var(--ink)}

/* Honeypot */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
nav a[aria-current]{color:var(--ink);text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}

@media (min-width:961px) and (max-width:1180px){
  nav ul{gap:20px}
  .bar-right .tel{display:none}
}
@media (max-width:960px){
  .stone-ui{grid-template-columns:1fr}
  .stone-tabs{flex-direction:row;overflow-x:auto;border-top:0;gap:8px;padding-bottom:4px;scrollbar-width:none}
  .stone-tabs button{flex:none;border:0;padding:8px 14px 8px 8px;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--line);font-size:16px;gap:10px}
  .stone-tabs button[aria-selected="true"]{background:var(--ink);color:var(--plaster);box-shadow:none}
  .stone-tabs .chip{width:28px;height:28px}
  .stone-tabs button[aria-selected="true"] .chip{box-shadow:none}
  .stone-panel{grid-template-columns:1fr;min-height:0}
  .stone-swatch{min-height:220px}
  .case-inner{grid-template-columns:1fr;overflow-y:auto}
  .case-main{min-height:240px;flex:none;aspect-ratio:4/3}
  .case-body{overflow:visible}
  .case-close{position:fixed;top:calc(4vh + 12px);right:calc(3vw + 12px);z-index:2}
}

/* Mobile action bar */
.actionbar{display:none}

@media (max-width:960px){
  nav{position:fixed;inset:72px 0 auto 0;background:var(--concrete);border-bottom:1px solid var(--line);padding:16px var(--pad) 24px;display:none}
  nav.open{display:block}
  nav ul{flex-direction:column;gap:4px}
  nav a{display:block;padding:12px 0;font-size:20px;color:var(--ink)}
  .menu-toggle{display:inline-flex}
  .bar-right .btn,.bar-right .tel{display:none}
  .hero-sub,.sec-head,.about-grid,.contact-grid,.rot-grid,.ba{grid-template-columns:1fr}
  .about-grid h2{position:static}
  .service{grid-template-columns:1fr;gap:12px}
  .steps{grid-template-columns:1fr 1fr}
  .step:nth-child(3){padding-left:0;border-left:0}
  .step{border-bottom:1px solid rgba(250,250,248,.18);padding-bottom:28px}
  .rule{--n:5}
  .grid{grid-auto-rows:150px}
  .tile:nth-child(n){grid-column:span 6;grid-row:span 1}
  .tile:nth-child(3n+1){grid-column:span 12;grid-row:span 2}
  .foot{grid-template-columns:1fr 1fr}
  .foot>div:first-child{grid-column:1/-1}
  .actionbar{display:grid;grid-template-columns:1fr 1fr;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--concrete) 92%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line);transform:translateY(110%);transition:transform .25s}
  .actionbar.show{transform:none}
  .actionbar .btn{padding:14px 10px}
  body{padding-bottom:76px}
}
@media (max-width:600px){
  .tile figcaption{font-size:15px;padding:28px 10px 10px;hyphens:auto;overflow-wrap:break-word}
  .hero-work{grid-template-columns:1fr 1fr}
  .hero-work .shot:first-child{grid-column:1/-1}
  body{font-size:17px}
  .audience ul{grid-template-columns:1fr}
  .audience li{padding:18px 0}
  .audience li+li{padding-left:0;border-left:0;border-top:1px solid var(--line)}
  .steps{grid-template-columns:1fr}
  .step+.step{padding-left:0;border-left:0}
  form{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr 1fr}
  .result{grid-template-columns:1fr}
  .result div+div{padding-left:0;border-left:0}
  .rule-caption{display:none}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.seg,.actionbar,.shot img{transition:none}.shot:hover img{transform:none}}
/* Simple pages (privacy, 404, thank you) */
.page-top{padding:20px 0;border-bottom:1px solid var(--line)}
.prose{max-width:calc(68ch + 2*var(--pad));margin-left:0;padding-block:clamp(48px,7vw,96px)}
.prose h1{font-weight:850;font-stretch:125%;font-size:clamp(36px,5.6vw,64px);line-height:1;letter-spacing:-.03em;margin-bottom:24px}
.prose h2{font-weight:800;font-stretch:115%;font-size:22px;margin:36px 0 8px}
.prose p,.prose li{color:var(--graphite)}
.prose ul{padding-left:20px;display:grid;gap:4px}
.prose a{color:var(--ink)}
/* Service links on the home page */
.service .more{display:inline-block;margin-top:12px;font-weight:700;font-size:15px;text-underline-offset:4px}
/* Service landing pages */
.svc-bar{display:flex;align-items:center;justify-content:space-between;gap:16px}
.crumbs{font-size:14px;font-stretch:90%;color:var(--graphite);margin-bottom:28px}
.crumbs a{color:var(--graphite);text-underline-offset:3px}
.svc-hero{padding:clamp(48px,7vw,96px) 0 clamp(40px,5vw,64px);border-bottom:1px solid var(--line)}
.svc-hero h1{font-weight:850;font-stretch:120%;font-size:clamp(38px,5.4vw,76px);line-height:1;letter-spacing:-.03em;max-width:16ch;text-wrap:balance}
.svc-lead{font-size:clamp(18px,1.6vw,22px);color:var(--graphite);max-width:56ch;margin-top:24px}
.svc-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:32px}
.svc-cta .rot{font-size:14px;font-weight:700;font-stretch:90%;background:var(--rule);padding:3px 8px;border-radius:3px}
.svc-cta .rot.no{background:transparent;box-shadow:inset 0 0 0 1px var(--line);color:var(--graphite);font-weight:600}
.svc-body{padding:clamp(56px,7vw,104px) 0}
.svc-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(32px,6vw,96px);align-items:start}
.svc-text h2{font-weight:800;font-stretch:112%;font-size:clamp(22px,2vw,28px);line-height:1.15;letter-spacing:-.01em;margin:44px 0 12px}
.svc-text h2:first-child{margin-top:0}
.svc-text p{color:var(--graphite);max-width:64ch}
.svc-text p+p{margin-top:14px}
.svc-aside{position:sticky;top:96px;background:var(--plaster);border-top:1.5px solid var(--ink);padding:28px}
.svc-aside h2{font-weight:800;font-stretch:110%;font-size:19px;margin-bottom:12px}
.svc-aside h2+p{color:var(--graphite)}
.svc-aside ul{list-style:none;margin-bottom:28px}
.svc-aside li{padding:10px 0;border-bottom:1px solid var(--line)}
.svc-aside .btn{margin-top:24px;width:100%}
.svc-work{padding:0 0 clamp(56px,7vw,104px)}
.svc-work h2{font-weight:800;font-stretch:115%;font-size:clamp(26px,2.6vw,36px);margin-bottom:24px}
.svc-shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:12px;margin-bottom:20px}
.svc-shot img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:6px;background:var(--line)}
.svc-shot figcaption{font-weight:700;margin-top:10px}
.svc-work p a{font-weight:700;text-underline-offset:4px}
.svc-end{padding:clamp(64px,8vw,112px) 0;background:var(--spruce);color:var(--plaster)}
.svc-end h2{font-weight:850;font-stretch:120%;font-size:clamp(32px,4vw,52px);line-height:1.05;letter-spacing:-.02em}
.svc-end .wrap>p{color:var(--mist);max-width:56ch;margin-top:16px}
.svc-end .btn-ghost{color:var(--plaster);box-shadow:inset 0 0 0 1.5px var(--plaster)}
.svc-end .btn-ghost:hover{background:var(--plaster);color:var(--ink)}
.svc-end h3{font-size:15px;font-weight:700;margin:56px 0 12px;color:var(--mist)}
.svc-more{list-style:none;display:flex;flex-wrap:wrap;gap:8px 28px}
.svc-more a{color:var(--plaster);font-weight:700;text-underline-offset:4px}
@media (max-width:960px){
  .svc-grid{grid-template-columns:1fr}
  .svc-aside{position:static}
  .svc-bar .bar-right .btn,.svc-bar .bar-right .tel{display:none}
}