/* Cozy House Renovation & Landscaping — "The Widened Driveway"
   Petrona (display) + Red Hat Text (body). Stone #ECE6DC, charcoal #2B2A28, leaf #3F6B3A (Call only).
   Type scale 1.25 from 17px. Spacing on an 8px base. */
@font-face{font-family:"Petrona";src:url(../fonts/petrona.woff2) format("woff2");font-weight:400 800;font-display:swap}
@font-face{font-family:"Red Hat Text";src:url(../fonts/redhattext.woff2) format("woff2");font-weight:400 700;font-display:swap}
:root{--stone:#ECE6DC;--stone2:#E2DACC;--char:#2B2A28;--char2:#4A4844;--leaf:#3F6B3A;--leaf-d:#2F5229;--paper:#F7F4EE;
--s1:8px;--s2:16px;--s3:24px;--s4:32px;--s6:48px;--s8:64px;--s12:96px;
--f0:1.0625rem;--f1:1.328rem;--f2:1.66rem;--f3:2.075rem;--f4:2.594rem;--f5:3.242rem}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px;scroll-padding-bottom:96px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--stone);color:var(--char);font:400 var(--f0)/1.6 "Red Hat Text",system-ui,sans-serif;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.nowrap{white-space:nowrap}
h1,h2,h3{font-family:"Petrona",Georgia,serif;font-weight:700;line-height:1.1;margin:0 0 var(--s2);letter-spacing:-.01em}
p{margin:0 0 var(--s2)}
.wrap{max-width:1200px;margin:0 auto;padding:0 var(--s3)}
.skip{position:fixed;left:-999px;top:8px;background:var(--char);color:#fff;padding:12px 16px;z-index:100}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--char);outline-offset:3px}
.eyebrow{font-size:.85rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--char2);margin:0 0 var(--s1)}
.eyebrow--h{font-family:"Red Hat Text",sans-serif;font-size:.85rem;line-height:1.4}

/* buttons: leaf green is reserved for Call */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4em;min-height:48px;padding:12px 22px;border-radius:2px;font-weight:700;text-decoration:none;border:2px solid transparent;transition:transform .15s,background .15s}
.btn--call{background:var(--leaf);color:#fff}
.btn--call:hover{background:var(--leaf-d);transform:translateY(-1px)}
.btn--ghost{border-color:var(--char);color:var(--char)}
.btn--ghost:hover{background:var(--char);color:var(--stone)}
.btn--big{font-size:var(--f1);min-height:56px;padding:14px 28px}

/* header */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:var(--s2);padding:var(--s1) var(--s3);background:rgba(236,230,220,.96);border-bottom:2px solid var(--char)}
.brand{display:flex;align-items:center;gap:10px;min-height:44px;text-decoration:none;font-family:"Petrona",serif;font-weight:800;font-size:var(--f1)}
.brand__mark{width:34px;height:34px}
.top nav{margin-left:auto}
.top ul{list-style:none;display:flex;margin:0;padding:0;gap:2px}
.top nav a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;padding:0 12px;text-decoration:none;font-weight:600}
.top nav a:hover{text-decoration:underline;text-underline-offset:4px}
.top__call{min-height:44px;padding:8px 16px}
@media (max-width:860px){.top nav{display:none}.top__call{margin-left:auto}}
@media (max-width:400px){.top__call .nowrap{display:none}.brand{font-size:var(--f0)}}

/* hero */
.hero{display:grid;grid-template-columns:1fr;gap:var(--s4);padding:var(--s6) 0 0}
.hero__copy{padding:0 var(--s3);max-width:640px}
.hero h1{font-size:var(--f4)}
.hero h1 em{font-style:normal;color:var(--leaf-d);font-weight:600}
.lede{font-size:var(--f1);line-height:1.5;color:var(--char2)}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3)}
.hero__photo{margin:0;border-top:8px solid var(--char);border-bottom:8px solid var(--char)}
.hero__photo img{width:100%;aspect-ratio:20/9;object-fit:cover}
.band{grid-column:1/-1;position:relative;height:90px;margin:0 0 var(--s8)}
.band__svg{display:block;height:90px;width:var(--w,100%);transition:width .12s linear}
.band__label{position:absolute;right:var(--s3);top:50%;transform:translateY(-50%);font:600 .85rem/1 "Red Hat Text",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--char2)}
.band.is-wide .band__label,.band:not(.js-widen) .band__label{display:none}
@media (min-width:960px){
  .hero{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;padding-top:var(--s8)}
  .hero__copy{padding-left:max(var(--s3),calc((100vw - 1200px)/2 + var(--s3)))}
  .hero h1{font-size:var(--f5)}
  .hero__photo{border-left:8px solid var(--char);border-right:0}
  .hero__photo img{aspect-ratio:14/9}
}

/* section heads */
.sec-head{max-width:720px;margin-bottom:var(--s6)}
.sec-head h2{font-size:var(--f3)}
@media (min-width:960px){.sec-head h2{font-size:var(--f4)}}
.sec-head p:last-child{color:var(--char2);font-size:var(--f1);line-height:1.5}

/* outside grid: asymmetric, offset like laid pavers */
.outside{padding-bottom:var(--s12)}
.grid{display:grid;gap:var(--s2);grid-template-columns:1fr}
.tile{margin:0;background:var(--paper);border:2px solid var(--char)}
.tile img{width:100%;aspect-ratio:4/3;object-fit:cover}
.tile figcaption{padding:var(--s2) var(--s3) var(--s3);color:var(--char2)}
.tile figcaption strong{display:block;font-family:"Petrona",serif;font-size:var(--f2);color:var(--char);line-height:1.2;margin-bottom:4px}
.tile--night{background:var(--char);border-color:var(--char)}
.tile--night figcaption{color:#DDD6CA}.tile--night figcaption strong{color:#fff}
@media (min-width:720px){
  .grid{grid-template-columns:repeat(6,1fr)}
  .tile{grid-column:span 3}
  .tile--wide{grid-column:span 4}.tile--tall{grid-column:span 2;grid-row:span 2}
  .tile--tall img{aspect-ratio:auto;height:calc(100% - 110px)}
  .tile--wide.tile--night{grid-column:2 / span 5}
  .tile--night img{aspect-ratio:16/7}
}

/* inside strip: charcoal, photos in a running bond */
.inside{background:var(--char);color:#EFEAE1;padding:var(--s12) 0}
.sec-head--light .eyebrow{color:#CFC7B9}
.sec-head--light p:last-child{color:#DDD6CA}
.strip{display:grid;gap:var(--s2);grid-template-columns:1fr}
.strip img{width:100%;aspect-ratio:4/3;object-fit:cover;border:2px solid #6E6A63}
@media (min-width:720px){.strip{grid-template-columns:5fr 4fr 3fr;align-items:end}.strip img:nth-child(2){margin-bottom:var(--s6)}.strip img:nth-child(3){aspect-ratio:3/4}}

/* reviews */
.words{padding:var(--s12) 0}
.quotes{display:grid;gap:var(--s4);margin-top:var(--s3)}
@media (min-width:860px){.quotes{grid-template-columns:1fr 1fr}.quotes blockquote:nth-child(2){margin-top:var(--s8)}}
blockquote{margin:0;padding:var(--s3) var(--s3) var(--s3) var(--s4);border-left:8px solid var(--leaf);background:var(--paper)}
blockquote p{font-family:"Petrona",serif;font-size:var(--f2);line-height:1.35;font-weight:500}
blockquote footer{font-weight:600;color:var(--char2)}

/* call */
.call{background:var(--stone2);border-top:8px solid var(--char);padding:var(--s12) 0 calc(var(--s12) + 40px)}
.call__wrap{display:grid;gap:var(--s6)}
.call h2{font-size:var(--f4)}
.call p{font-size:var(--f1)}
@media (min-width:860px){.call__wrap{grid-template-columns:3fr 2fr;align-items:start}}
.facts{margin:0;display:grid;gap:var(--s3)}
.facts dt{font-size:.85rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--char2)}
.facts dd{margin:4px 0 0;font-size:var(--f1)}
.facts a{display:inline-flex;align-items:center;min-height:44px}

.foot{background:var(--char);color:#EFEAE1;text-align:center;padding:var(--s4) var(--s3) calc(var(--s4) + 72px)}
.foot p{margin:0}
@media (min-width:861px){.foot{padding-bottom:var(--s4)}}

/* sticky call bar on phones */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:30;padding:10px var(--s2) calc(10px + env(safe-area-inset-bottom));background:rgba(43,42,40,.96)}
.callbar .btn{width:100%}
@media (min-width:861px){.callbar{display:none}}