:root{--ink:#1e211e;--paper:#f7f5ef;--accent:#DE6600;--muted:#52534b;--line:#d9d7cd;--dark:#222722;--white:#fffdf7}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:120px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:1.55}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;height:auto}
figure,p,h1,h2,h3{margin:0}
button,input,textarea,select{font:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:5px}
.dark :focus-visible{outline-color:var(--accent)}
::selection{background:var(--accent);color:var(--ink)}
.wrap{width:min(100% - 96px,1320px);margin-inline:auto}
.skip{position:fixed;z-index:4;top:10px;left:10px;padding:12px;background:white;transform:translateY(-150%)}
.skip:focus{transform:none}
.header{position:sticky;top:0;z-index:3;background:#f7f5eff7;border-bottom:1px solid var(--line);backdrop-filter:blur(12px)}
.header-inner{min-height:83px;display:flex;align-items:center;justify-content:space-between;gap:25px}
.brand{display:flex;align-items:center;gap:11px;font-size:23px;font-weight:900;letter-spacing:-.09em;line-height:1}
.brand img{width:41px;height:41px;object-fit:contain}
.brand span span{color:var(--accent)}
.brand small{display:block;font-size:8px;letter-spacing:.18em;margin-top:5px}
nav{display:flex;gap:clamp(15px,3vw,42px);align-items:center;font-size:14px;font-weight:700}
nav a{padding-block:9px;border-bottom:2px solid transparent}
nav a:hover,nav a[aria-current]{border-color:var(--accent)}
.nav-cta{border:1px solid var(--ink);border-radius:100px;padding:10px 18px;font-size:13px;font-weight:700;white-space:nowrap}
.nav-cta:hover{background:var(--ink);color:var(--white)}
.hero{min-height:min(685px,82svh);display:grid;grid-template-columns:1fr 1.04fr;gap:25px;align-items:center;padding-block:40px}
.hero-copy{padding-block:35px;animation:enter .75s ease-out both}
.eyebrow{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.eyebrow i{display:inline-block;width:8px;height:8px;margin-right:6px;background:var(--accent);border-radius:50%}
h1,h2,h3{line-height:.99;letter-spacing:-.065em}
h1{font-size:clamp(3.55rem,7.65vw,8rem);font-weight:850;margin-block:22px 27px}
h2{font-size:clamp(2.5rem,5.1vw,5.15rem);font-weight:830}
h3{font-size:clamp(1.4rem,2.3vw,2.25rem);line-height:1.05}
em{font-style:normal;color:var(--accent)}
.lead{font-size:clamp(1rem,1.55vw,1.26rem);max-width:500px;color:var(--muted)}
.actions{display:flex;align-items:center;gap:21px;flex-wrap:wrap;margin-top:31px}
.button{display:inline-flex;align-items:center;justify-content:space-between;gap:18px;padding:13px 17px 13px 19px;border:0;border-radius:100px;background:var(--accent);color:#211a14;font-size:14px;font-weight:800;cursor:pointer;transition:background .2s,transform .2s}
.button span{display:grid;place-items:center;width:28px;height:28px;background:#24221d;color:#fff;border-radius:50%}
.button:hover{box-shadow:0 5px 15px #21140935;transform:translateY(-3px)}
.text-link{font-size:14px;font-weight:800;text-decoration:underline;text-underline-offset:5px}
.text-link:hover{text-decoration:underline;text-decoration-color:var(--accent)}
.hero-image{height:clamp(390px,46vw,615px);position:relative;overflow:hidden;border-radius:7px;background:#c8bca8;animation:enter .95s .08s ease-out both}
.hero-image img{height:100%;object-fit:cover;object-position:48% center;animation:zoom 1.35s ease-out both}
.hero-image figcaption{position:absolute;inset:auto 0 0;display:flex;justify-content:space-between;gap:10px;background:linear-gradient(transparent,#141611d9);padding:44px 22px 18px;color:white;font-size:12px}
.hero-image figcaption span:first-child{font-weight:800;letter-spacing:.1em}
.rail{border-block:1px solid var(--line);background:#efede4}
.rail .wrap{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;padding-block:17px;font-size:12px;font-weight:800}
.section{padding-block:clamp(65px,9vw,128px)}
.section-title{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:34px}
.section-title .eyebrow,.faq .eyebrow,.banner .eyebrow{margin-bottom:15px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.card{position:relative;min-height:325px;display:flex;align-items:end;overflow:hidden;border-radius:5px;background:#36362d;color:#fff}
.card img{position:absolute;inset:0;height:100%;object-fit:cover;transition:transform .55s}
.card:hover img{transform:scale(1.065)}
.card div{position:relative;width:100%;padding:63px 19px 23px;background:linear-gradient(transparent,#101210ef)}
.card h3{padding-right:25px}
.card small{display:block;margin-bottom:7px;letter-spacing:.08em}
.card span{position:absolute;right:17px;bottom:20px}
.dark{background:var(--dark);color:var(--white)}
.dark .lead{color:#deded2}
.dark .lead a{text-decoration:underline;text-underline-offset:4px}
.dark .eyebrow{color:var(--white)}
.swatches{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.swatches figure{position:relative;overflow:hidden;border-radius:4px;background:#343932}
.swatches img{aspect-ratio:1;object-fit:cover;transition:transform .35s}
.swatches figure:hover img{transform:scale(1.07)}
.swatches figcaption{position:relative;padding:10px 12px;font-size:13px;font-weight:700}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.steps article{border-top:1px solid var(--line);padding-top:19px}
.steps span,.project-list article>span{font-weight:800;color:var(--muted)}
.steps h3{margin:12px 0}
.steps p,.service p:not(.eyebrow),.project-list p{color:var(--muted)}
.banner{display:grid;grid-template-columns:1fr minmax(100px,260px);align-items:center;min-height:295px;overflow:hidden;padding:35px clamp(18px,6vw,75px);background:#eae5d8;border-radius:6px}
.banner p:not(.eyebrow){margin:13px 0 22px}
.banner img{max-height:260px;object-fit:contain;transition:transform .35s;transform:rotate(3deg)}
.banner:hover img{transform:rotate(0deg) translateY(-5px)}
.intro{padding-block:clamp(54px,9vw,125px) 55px;animation:enter .65s ease-out both}
.intro h1{max-width:1050px}
.services{padding-bottom:60px}
.service{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(25px,6vw,90px);padding-block:24px;border-top:1px solid var(--line)}
.service:nth-child(even)>div:first-child{order:2}
.service img{aspect-ratio:1.65;object-fit:cover;border-radius:5px}
.service h2{margin:12px 0 16px;font-size:clamp(2.2rem,4vw,4rem)}
.service .button{margin-top:22px}
.faq h2{margin-bottom:25px}
details{border-top:1px solid var(--line);padding:17px 0}
details:last-child{border-bottom:1px solid var(--line)}
summary{cursor:pointer;font-weight:750}
details p{margin-top:12px;max-width:650px}
.project-list article{display:grid;grid-template-columns:55px 1fr auto;gap:17px;border-top:1px solid var(--line);padding:24px 0;align-items:baseline}
.project-list p{margin-top:8px}
.project-list small{font-weight:800;letter-spacing:.1em}
.gallery{display:grid;grid-template-columns:1.5fr 1fr;grid-template-rows:260px 240px;gap:12px}
.gallery figure{overflow:hidden;position:relative;border-radius:5px;background:#433d35}
.gallery figure:first-child{grid-row:span 2}
.gallery img{height:100%;object-fit:cover;transition:transform .4s}
.gallery figure:first-child img{object-fit:contain}
.gallery figure:hover img{transform:scale(1.035)}
.gallery figcaption{position:absolute;inset:auto 0 0;padding:32px 14px 12px;background:linear-gradient(transparent,#161712f0);color:white;font-size:13px}
.contact{display:grid;grid-template-columns:1fr 1fr;align-items:start;gap:clamp(28px,6vw,90px)}
.contact h1{font-size:clamp(3.5rem,7.2vw,7.2rem)}
.contact-copy{animation:enter .65s ease-out both}
.contact-links{margin-block:27px;display:grid;gap:0}
.contact-links a{border-top:1px solid var(--line);padding:12px 0;font-size:17px;font-weight:800}
.contact-links a:last-child{border-bottom:1px solid var(--line)}
.contact-links small{display:block;font-size:9px;letter-spacing:.16em;color:var(--muted)}
.contact-links span{color:var(--accent)}
.mascot{display:flex;gap:16px;align-items:center;font-size:14px;color:var(--muted)}
.mascot img{width:72px;height:105px;object-fit:contain}
form{padding:clamp(19px,3.3vw,45px);background:var(--white);border:1px solid var(--line);border-radius:7px;animation:enter .8s ease-out both}
form h2{font-size:clamp(2rem,3.6vw,3.8rem);margin:12px 0 25px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
form label{display:block;font-size:13px;font-weight:800}
form>label{margin-top:17px}
input,textarea,select{width:100%;margin-top:5px;display:block;padding:10px 11px;border:1px solid #bdbbad;border-radius:4px;background:#fff;color:var(--ink);font-size:16px;font-weight:400}
textarea{resize:vertical}
form .button{margin-top:19px}
.form-note{margin-top:11px;color:var(--muted);font-size:12px}
footer{border-top:1px solid var(--line);background:#efede4;padding:30px 0 18px}
.footer-top,.footer-bottom,.suppliers{display:flex;justify-content:space-between;align-items:center;gap:19px;flex-wrap:wrap}
.footer-top p,.footer-bottom,.suppliers{font-size:13px;color:var(--muted)}
.footer-top strong{font-size:23px;letter-spacing:-.07em}
.footer-bottom{border-top:1px solid var(--line);margin-top:21px;padding-top:16px}
footer a:hover{text-decoration:underline}
.suppliers img{width:108px;height:26px;object-fit:contain}
.reveal.pending{opacity:.01;transform:translateY(23px)}
.reveal{transition:opacity .65s,transform .65s}
@keyframes enter{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes zoom{from{transform:scale(1.07)}to{transform:scale(1)}}
@media(max-width:950px){.wrap{width:min(100% - 48px,1320px)}.hero{gap:18px}.hero-image{height:470px}.card{min-height:270px}.form-grid{grid-template-columns:1fr}}
@media(max-width:700px){.wrap{width:calc(100% - 34px)}.header-inner{flex-wrap:wrap;gap:7px 12px;min-height:0;padding-block:10px 6px}.brand img{width:31px;height:31px}.brand{font-size:20px}.nav-cta{order:1;padding:6px 10px}.header nav{order:2;width:100%;justify-content:space-between;gap:4px;font-size:12px}.hero{display:block;padding-block:24px}.hero-copy{padding-block:12px 27px}.hero-image{height:clamp(260px,72vw,480px)}h1{font-size:clamp(3.2rem,12vw,5.5rem);margin-block:15px 20px}.section-title{align-items:start;flex-direction:column}.cards,.steps,.service,.contact{grid-template-columns:1fr}.service:nth-child(even)>div:first-child{order:0}.service{gap:16px;padding-block:22px 30px}.rail .wrap{gap:7px 18px}.swatches{grid-template-columns:repeat(3,1fr)}.gallery{grid-template-columns:1fr;grid-template-rows:none}.gallery figure:first-child{grid-row:auto}.gallery img{height:auto;aspect-ratio:1.5}.project-list article{grid-template-columns:29px 1fr;gap:10px}.project-list small{grid-column:2}.banner{grid-template-columns:1fr minmax(55px,28%)}.contact{padding-top:40px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.reveal.pending{opacity:1;transform:none}}

.detail-copy { padding-top: 0; }
.detail-sections { max-width: 70ch; }
.detail-sections article + article { margin-top: 2rem; }
.detail-sections h2 { font-size: clamp(1.5rem, 3vw, 2.3rem); }
.detail-copy .actions { margin-top: 2rem; }

.project-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.project-photos figure { margin: 0; }
.project-photos img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: var(--line); border-radius: 6px; }
.project-photos figcaption { margin-top: 8px; color: var(--muted); }
.photo-heading { margin-top: 40px; }
.detail-photos { margin-bottom: 35px; }
.detail-photos h2 { margin-bottom: 16px; }
@media (max-width: 560px) { .project-photos { grid-template-columns: 1fr; } }

.bc-feature { display:grid; grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr); gap:clamp(20px, 6vw, 80px); align-items:center; }
.bc-feature p:not(.eyebrow) { margin:14px 0; color:var(--muted); }
.bc-comparison { background:var(--white); border:1px solid var(--line); border-radius:14px; padding:clamp(12px, 2vw, 24px); }
.bc-comparison:has(.bc-switch:not([hidden])) .project-photos { grid-template-columns:1fr; }
.bc-switch { display:flex; gap:6px; margin-bottom:12px; }
.bc-switch[hidden] { display:none; }
.bc-switch button, .bc-topics button { padding:8px 13px; background:var(--white); border:1px solid var(--line); border-radius:999px; color:var(--ink); cursor:pointer; }
.bc-switch button[aria-pressed="true"] { background:var(--ink); color:var(--white); border-color:var(--ink); }
.bc-assistant { position:fixed; z-index:5; right:clamp(12px, 3vw, 28px); bottom:clamp(12px, 3vw, 28px); max-width:calc(100vw - 24px); }
.bc-assistant summary { list-style:none; display:flex; align-items:center; gap:8px; margin-left:auto; width:max-content; padding:10px 17px; background:var(--accent); color:var(--ink); font-weight:800; border-radius:999px; cursor:pointer; box-shadow:0 5px 24px #21140930; }
.bc-assistant summary::-webkit-details-marker { display:none; }
.bc-assistant[open] summary { margin-top:8px; }
.bc-assistant-panel { position:absolute; bottom:calc(100% + 9px); right:0; width:min(410px, calc(100vw - 40px)); max-height:calc(100dvh - 88px); overflow:auto; padding:16px; background:var(--white); color:var(--ink); border:1px solid var(--line); border-radius:16px; box-shadow:0 12px 42px #21140935; }
.bc-assistant-heading { display:flex; align-items:center; gap:11px; margin-bottom:12px; }
.bc-assistant-heading img { width:40px; height:48px; object-fit:contain; }
.bc-assistant-heading p { font-size:13px; color:var(--muted); }
.bc-topics { display:flex; flex-wrap:wrap; gap:6px; }
.bc-topics button { font-size:13px; }
.bc-topics button:hover { border-color:var(--accent); }
.bc-question { padding:0; border:0; border-radius:0; background:none; animation:none; margin-top:13px; }
.bc-question > label { margin:0; }
.bc-question > div { display:flex; flex-wrap:wrap; align-items:stretch; gap:7px; margin-top:5px; }
.bc-question input { margin:0; flex:1 1 170px; min-width:0; width:auto; }
.bc-question button { border:0; border-radius:6px; background:var(--ink); color:var(--white); padding:8px 10px; font-size:13px; cursor:pointer; }
.bc-answer { margin-top:12px; padding:10px; border-radius:8px; background:var(--paper); font-size:14px; }
.bc-answer a,.bc-human { display:inline-block; margin-top:8px; font-size:13px; }
.bc-human { text-decoration:underline; }
@media (max-width:700px) { .bc-feature { grid-template-columns:1fr; } }

.contact-form-panel { min-width:0; padding:clamp(12px, 3vw, 32px); border:1px solid var(--line); border-radius:10px; background:var(--white); }
.quote-embed { display:block; width:100%; border:0; }
.quote-fallback { margin-top:16px; }
.quote-fallback summary { cursor:pointer; font-weight:700; }
.quote-fallback form { margin-top:12px; }

.site-tip { display:flex; align-items:flex-start; gap:12px; margin-block:20px; padding:15px 18px; border-inline-start:4px solid var(--accent); border-radius:0 8px 8px 0; background:#f6ede3; color:var(--ink); }
.site-tip-icon { display:grid; place-items:center; flex:none; width:24px; height:24px; border-radius:50%; background:var(--accent); color:var(--ink); font-weight:800; }
.site-tip p { margin-top:3px; max-width:68ch; }
.contact-form-panel .site-tip { margin-top:0; }
@media (max-width:420px) { .site-tip { padding:12px; gap:9px; } }
