/* Fonts embedded locally: no external request, no Segoe fallback. */
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/dmsans.woff2') format('woff2-variations'),url('../fonts/dmsans.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Outfit';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/outfit.woff2') format('woff2-variations'),url('../fonts/outfit.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* ==========================================================================
   UNIQUE HARDWOOD FLOORS - home page
   Structure after dedicatedroofingsolutions: utility bar, full-bleed hero with
   a credential strip, split section headers, image mosaics with text on the
   photo, a dark process section, a full-bleed pull quote, town pills.
   Palette from the client's own logo navy and graphite, on warm cream, with
   oak as the single accent. One light world, painted explicitly.
   Photography is interim AI, replaced by Greg's own photos before launch.
   ========================================================================== */
:root{
  --ink:#101726; --navy:#0A1A45; --navy-2:#16295C;
  --cream:#F6F3ED; --cream-2:#EBE6DC; --white:#fff;
  --oak:#B5762E; --oak-2:#C98F47;
  --graphite:#55555A; --graphite-2:#8A8A90;
  --line:#DFD9CD; --line-d:rgba(255,255,255,.14);
  --d:"Outfit","Helvetica Neue",Arial,sans-serif;
  --b:"DM Sans","Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--graphite);font:400 17px/1.65 var(--b);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
.w{max-width:1240px;margin:0 auto;padding:0 44px}
h1,h2,h3,h4{font-family:var(--d);color:var(--navy);margin:0;letter-spacing:-.03em;font-weight:600;text-wrap:balance}
.eb{font-family:var(--b);font-size:12px;font-weight:700;letter-spacing:.19em;text-transform:uppercase;color:var(--oak);display:flex;align-items:center;gap:9px}
.eb::before{content:"";width:16px;height:2px;background:var(--oak)}
.btn{display:inline-flex;align-items:center;gap:10px;font:500 15.5px/1 var(--d);padding:17px 28px;
  border:0;border-radius:40px;cursor:pointer;text-decoration:none;transition:.2s ease}
.btn-o{background:var(--oak);color:#fff}
.btn-o:hover{background:var(--oak-2)}
.btn-l{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.42)}
.btn-l:hover{background:rgba(255,255,255,.1)}
.btn-n{background:var(--navy);color:#fff}
.btn-n:hover{background:var(--navy-2)}
.btn::after{content:"\2192";font-size:15px}
.btn:focus-visible{outline:2px solid var(--oak);outline-offset:3px}
.tl{font-family:var(--d);font-size:14.5px;font-weight:500;text-decoration:none;display:inline-flex;gap:8px;align-items:center;transition:gap .18s}
.tl::after{content:"\2192"}
.tl:hover{gap:13px}

/* utility bar */
.util{background:var(--ink);color:#93A0BC;font-size:13.5px;padding:10px 0}
.util .in{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.util a{text-decoration:none;color:#93A0BC}
.util a:hover{color:#fff}
.util .hi{color:var(--oak-2);font-weight:500}

/* nav */
.nav{background:var(--white);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
.nav .in{display:flex;align-items:center;justify-content:space-between;gap:26px;padding-top:14px;padding-bottom:14px;flex-wrap:wrap}
.nav img{height:56px;width:auto}
.nav ul{display:flex;gap:30px;list-style:none;margin:0;padding:0;align-items:center;flex-wrap:wrap}
.nav ul a:not(.btn){font-family:var(--d);font-size:15.5px;font-weight:500;color:var(--navy);text-decoration:none;position:relative;padding-bottom:3px}
.nav ul a:not(.btn)::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--oak);transition:width .2s}
.nav ul a:not(.btn):hover::after,.nav ul a:not(.btn).on::after{width:100%}

/* hero */
.hero{position:relative;background:var(--ink);color:#fff;overflow:hidden}
.hero .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .still{display:none}
/* phones get a 42KB poster instead of a megabyte of video, and so does anyone
   who has asked the OS to reduce motion. */
@media (max-width:760px){
  .hero video.bg{display:none}
  .hero .still{display:block}
}
@media (prefers-reduced-motion:reduce){
  .hero video.bg{display:none}
  .hero .still{display:block}
}
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(86deg,rgba(16,23,38,.93) 0%,rgba(16,23,38,.74) 30%,rgba(16,23,38,.34) 60%,rgba(16,23,38,.12) 100%)}
.hero::before{content:"";position:absolute;left:0;right:0;bottom:0;height:210px;z-index:1;
  background:linear-gradient(to top,rgba(16,23,38,.88) 0%,rgba(16,23,38,.5) 55%,rgba(16,23,38,0) 100%)}
.hero .in{position:relative;z-index:2;padding-top:92px}
.hero h1{font-size:70px;line-height:1.02;color:#fff;margin:22px 0 0;max-width:15ch;letter-spacing:-.04em}
.hero .sub{font-size:19.5px;line-height:1.6;color:#fff;margin:24px 0 0;max-width:50ch}
.hero .cta{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}
.stars{display:flex;align-items:center;gap:11px;margin-top:26px;font-size:14.5px;color:#fff}
.stars .s{color:var(--oak-2);letter-spacing:2px;font-size:15px}
.creds{position:relative;z-index:2;margin-top:56px;border-top:1px solid var(--line-d);
  display:grid;grid-template-columns:repeat(4,1fr);gap:0 34px;padding:22px 0 26px;font-size:13.5px;
  line-height:1.5;color:#DCE3F0}
.creds span{display:block}
.creds b{color:#fff;font-weight:500}

/* strip under hero */
.strip{background:var(--cream-2);border-bottom:1px solid var(--line)}
.strip .in{padding-top:18px;padding-bottom:18px}
.strip p{margin:0;font-size:15.5px;color:var(--navy);line-height:1.5}
.strip b{font-weight:700}
.strip .r{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.strip .tel{font-family:var(--d);font-size:17px;font-weight:600;color:var(--navy);text-decoration:none}

/* sections */
.sec{padding:104px 0}
.sec.cream{background:var(--cream)}
.sec.dark{background:var(--ink);color:#B6C0D6}
.shead{display:grid;grid-template-columns:1fr 1.15fr;gap:56px;align-items:end;margin-bottom:52px}
.shead h2{font-size:45px;line-height:1.06;max-width:22ch}
.shead p{margin:0;font-size:16.5px;line-height:1.7;color:var(--graphite);max-width:62ch}
.sec.dark .shead h2{color:#fff}
.sec.dark .shead p{color:#93A0BC}

/* mosaic */
.mos{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
.mc{position:relative;overflow:hidden;border-radius:4px;display:flex;align-items:flex-end;text-decoration:none}
.mc{min-height:430px}
.mc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.mc:hover img{transform:scale(1.05)}
.mc::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(16,23,38,.94) 0%,rgba(16,23,38,.72) 40%,rgba(16,23,38,.12) 80%)}
.mc .t{position:relative;z-index:2;padding:26px 26px 24px;color:#fff}
.mc h3{color:#fff;font-size:24px;line-height:1.16;margin:0 0 8px}
.mc p{margin:0 0 12px;font-size:14.5px;line-height:1.55;color:#C9D2E4;max-width:34ch}
.mc .tl{color:var(--oak-2)}

/* dark process */
.proc{display:grid;grid-template-columns:1fr 1.1fr;gap:64px;align-items:stretch}
.proc .shot{position:relative;border-radius:4px;overflow:hidden;min-height:100%}
.proc .shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.proc .num{position:absolute;left:26px;bottom:22px;font-family:var(--d);font-size:56px;font-weight:700;
  color:#fff;line-height:.86;letter-spacing:-.05em;text-shadow:0 2px 26px rgba(0,0,0,.5)}
.proc .num small{display:block;font-size:13px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#D7DEEE;text-shadow:none;margin-top:8px}
.plist{margin-top:32px;border-top:1px solid var(--line-d)}
.pi{display:grid;grid-template-columns:52px 1fr;gap:20px;padding:20px 0;border-bottom:1px solid var(--line-d);align-items:baseline}
.pi .n{font-family:var(--b);font-size:11.5px;font-weight:700;letter-spacing:.16em;color:var(--oak-2)}
.pi b{display:block;font-family:var(--d);font-size:19px;font-weight:500;color:#fff;margin-bottom:5px;letter-spacing:-.02em}
.pi span{font-size:15.5px;line-height:1.6;color:#93A0BC}

/* trust grid */
.tg{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);background:var(--cream)}
.tg div{padding:28px 26px 30px;border-left:1px solid var(--line)}
.tg div:nth-child(4n+1){border-left:0}
.tg div:nth-child(n+5){border-top:1px solid var(--line)}
.tg b{display:block;font-family:var(--d);font-size:18px;font-weight:600;color:var(--navy);margin-bottom:7px;letter-spacing:-.02em}
.tg p{margin:0;font-size:14px;line-height:1.5;color:var(--graphite)}

/* voice: pull quote + rating, one band */
.voice{display:grid;grid-template-columns:1.45fr 1fr;gap:0;border-top:1px solid var(--line);align-items:stretch}
.voice .say{padding:52px 64px 52px 0;border-right:1px solid var(--line)}
.voice blockquote{margin:22px 0 0;font-family:var(--d);font-size:38px;font-weight:500;line-height:1.22;
  letter-spacing:-.032em;color:var(--navy);max-width:20ch;position:relative}
.voice blockquote::before{content:"";position:absolute;left:-28px;top:10px;width:4px;height:calc(100% - 20px);background:var(--oak)}
.voice .say{padding-left:28px}
.voice .attr{display:flex;align-items:baseline;gap:12px;margin:26px 0 0;font-size:15px}
.voice .attr b{font-family:var(--d);font-weight:600;color:var(--navy);font-size:16.5px}
.voice .attr span{color:var(--graphite-2)}
.voice .more{margin:22px 0 0;font-size:16.5px;line-height:1.7;color:var(--graphite);max-width:46ch}
.voice .score{padding:52px 0 52px 64px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.voice .big{font-family:var(--d);font-size:92px;font-weight:700;color:var(--navy);line-height:.84;letter-spacing:-.05em}
.voice .st{color:var(--oak);font-size:21px;letter-spacing:4px;margin-top:14px}
.voice .c{margin:14px 0 26px;font-size:15.5px;line-height:1.6;color:var(--graphite);max-width:30ch}
.voice .c b{color:var(--navy);font-weight:700}

/* area */
.area{display:grid;grid-template-columns:1fr 1.05fr;gap:60px;align-items:center}
.pills{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}
.pills span{font-size:14.5px;color:var(--navy);border:1px solid var(--line);border-radius:40px;padding:9px 17px;background:var(--white)}
.area img{border-radius:4px;width:100%;height:100%;object-fit:cover;min-height:330px}
.area p{font-size:16.5px;line-height:1.72;color:var(--graphite);margin:18px 0 0;max-width:54ch}
.area p:first-child{margin-top:0}
.area p b{color:var(--navy);font-weight:700}
.sec.dark .area p{color:#93A0BC}
.sec.dark .area p b{color:#fff}

/* final cta */
.fin{position:relative;background:var(--ink);color:#fff;overflow:hidden}
.fin img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fin::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(16,23,38,.95),rgba(16,23,38,.72))}
.fin .in{position:relative;z-index:2;padding-top:96px;padding-bottom:96px}
.fin h2{font-size:48px;color:#fff;line-height:1.06;max-width:16ch}
.fin p{font-size:18px;color:#fff;margin:20px 0 0;max-width:48ch;line-height:1.6}
.fin .cta{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap;align-items:center}
.fin .tel{font-family:var(--d);font-size:21px;font-weight:600;color:#fff;text-decoration:none}

/* footer */
.ft{background:var(--ink);color:#8390AE;padding:74px 0 30px;border-top:1px solid var(--line-d)}
.ft .cols{display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr;gap:46px}
.ft img{height:66px;width:auto}
.ft h3{font-family:var(--b);font-size:11.5px;font-weight:700;letter-spacing:.19em;text-transform:uppercase;color:#fff;margin:0 0 18px}
.ft ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.ft a{text-decoration:none;font-size:15px;transition:color .16s}
.ft a:hover{color:var(--oak-2)}
.ft .tel{font-family:var(--d);font-size:27px;font-weight:600;color:#fff;text-decoration:none;display:block;margin-top:20px}
.ft .bar{border-top:1px solid var(--line-d);margin-top:52px;padding-top:22px;font-size:13px;color:#5F6B88;
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}

@media (max-width:1040px){
  .w{padding:0 28px}
  .mos{grid-template-columns:1fr 1fr}.mc{min-height:330px}
  .shead,.proc,.area{grid-template-columns:1fr;gap:28px}
  .tg{grid-template-columns:1fr 1fr}
  .tg div:nth-child(odd){border-left:0}
  .tg div:nth-child(n+3){border-top:1px solid var(--line)}
  .voice{grid-template-columns:1fr}
  .voice .say{border-right:0;border-bottom:1px solid var(--line);padding:0 0 40px 28px}
  .voice .score{padding:40px 0 0}
  .ft .cols{grid-template-columns:1fr 1fr}
  .hero h1{font-size:46px}.sec{padding:72px 0}
  .creds{grid-template-columns:1fr 1fr;gap:16px 34px}
}
@media (max-width:640px){
  .mos,.tg,.ft .cols,.voice{grid-template-columns:1fr}
  .hero h1{font-size:36px}.shead h2{font-size:31px}
  /* the 86deg gradient clears the text at desktop but the bright part of the photo
     sits directly behind the copy on a narrow screen. Go vertical and heavier. */
  .hero::after{background:linear-gradient(180deg,rgba(16,23,38,.86) 0%,rgba(16,23,38,.9) 45%,rgba(16,23,38,.95) 100%)}
  .fin h2{font-size:31px}.voice .big{font-size:64px}.voice blockquote{font-size:27px}.proc .num{font-size:40px}
  .creds{grid-template-columns:1fr;gap:14px}
  .hero .in{padding-top:56px}.fin .in{padding-top:64px;padding-bottom:64px}
}

/* ==========================================================================
   Shared page components. Used by every inner page, defined once.
   ========================================================================== */

/* inner hero, shorter than the home hero and always a still */
.phero{position:relative;background:var(--ink);color:#fff;overflow:hidden}
.phero img,.phero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.phero .still{display:none}
/* same deal as the home hero: phones and reduce-motion get the poster, not the video */
@media (max-width:760px){ .phero video{display:none} .phero .still{display:block} }
@media (prefers-reduced-motion:reduce){ .phero video{display:none} .phero .still{display:block} }
.phero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(86deg,rgba(16,23,38,.94) 0%,rgba(16,23,38,.8) 32%,rgba(16,23,38,.42) 66%,rgba(16,23,38,.2) 100%)}
.phero .in{position:relative;z-index:2;padding-top:76px;padding-bottom:76px}
.phero h1{font-size:58px;line-height:1.04;color:#fff;margin:20px 0 0;max-width:17ch;letter-spacing:-.04em}
.phero .sub{font-size:19px;line-height:1.6;color:#fff;margin:22px 0 0;max-width:52ch}
.phero .cta{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap;align-items:center}
.phero .tel{font-family:var(--d);font-size:18px;font-weight:600;color:#fff;text-decoration:none}
.crumb{font-size:13.5px;color:#D3DCEC}
.crumb a{color:#D3DCEC;text-decoration:none}
.crumb a:hover{color:#fff}

/* In Short. A short paragraph in a bordered box, folded into the section above
   it. Prose, not line items: an answer engine quotes a coherent passage and can
   do nothing useful with a list of stubs. */
.ins{border:1px solid var(--line);border-radius:4px;padding:20px 24px;background:var(--white);
  display:grid;grid-template-columns:auto 1fr;gap:0 28px;align-items:start}
.sec.cream .ins{background:var(--cream-2)}
.ins .k{font-family:var(--b);font-size:10.5px;font-weight:700;letter-spacing:.17em;
  text-transform:uppercase;color:var(--oak);white-space:nowrap;padding-top:4px}
.ins p{margin:0;font-family:var(--b);font-size:15px;line-height:1.68;color:var(--graphite);max-width:92ch}
.ins p b{color:var(--navy);font-weight:700}
/* a section that leads with this box does not spend its full top padding on it */
.sec:has(> .w > .ins:first-child){padding-top:48px}


/* 3-up material / species cards */
.tri{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:46px}
.tri .card{background:var(--white)}
.tri .card img{width:100%;height:230px;object-fit:cover;border-radius:4px}
.tri .card h3{font-family:var(--d);font-size:21px;font-weight:600;color:var(--navy);margin:20px 0 8px;letter-spacing:-.02em}
.tri .card p{margin:0;font-size:15.5px;line-height:1.62;color:var(--graphite)}
.sec.cream .tri .card{background:transparent}

/* two column image + copy. The picture stretches to the height of the copy
   beside it, so a long block never leaves a short image floating. */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:stretch}
.duo.flip .pic{order:2}
.duo .pic{position:relative;border-radius:4px;overflow:hidden;min-height:420px}
.duo .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.duo > div:not(.pic){display:flex;flex-direction:column;justify-content:center}
.duo h2{font-size:38px;line-height:1.1;max-width:24ch}
.duo p{font-size:16.5px;line-height:1.72;color:var(--graphite);margin:18px 0 0;max-width:52ch}
.duo p b{color:var(--navy);font-weight:700}
.sec.dark .duo h2{color:#fff}
.sec.dark .duo p{color:#93A0BC}
.sec.dark .duo p b{color:#fff}

/* numbered process */
.steps{margin-top:46px;border-top:1px solid var(--line)}
.step{display:grid;grid-template-columns:96px 280px 1fr;gap:32px;padding:26px 0;
  border-bottom:1px solid var(--line);align-items:start}
.step .n{font-family:var(--d);font-size:34px;font-weight:700;color:var(--line);line-height:.9;
  letter-spacing:-.04em;transition:color .22s}
.step:hover .n{color:var(--oak)}
.step .t{font-family:var(--d);font-size:19px;font-weight:600;color:var(--navy);line-height:1.3;letter-spacing:-.015em}
.step .d{font-size:16px;line-height:1.7;color:var(--graphite)}
/* narrow variant: number in column one, title over body in column two */
.steps.narrow .step{grid-template-columns:56px 1fr;gap:5px 18px;padding:22px 0}
.steps.narrow .step .n{font-size:28px}
.steps.narrow .step .t{grid-column:2;font-size:17px}
.steps.narrow .step .d{grid-column:2;font-size:15.5px}
.sec.dark .steps,.sec.dark .step{border-color:var(--line-d)}
.sec.dark .step .n{color:#2A3350}
.sec.dark .step .t{color:#fff}
.sec.dark .step .d{color:#93A0BC}

/* spec cards, hairline grid */
.spec{display:grid;grid-template-columns:repeat(3,1fr);margin-top:46px;border:1px solid var(--line);border-radius:4px;overflow:hidden;background:var(--white)}
.spec > div{padding:32px 30px 34px;border-left:1px solid var(--line)}
.spec > div:first-child{border-left:0}
.sec.cream .spec > div{background:var(--cream)}
.spec .n{font-family:var(--b);font-size:11.5px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--oak)}
.spec h3{font-family:var(--d);font-size:20px;font-weight:600;color:var(--navy);margin:13px 0 10px;line-height:1.26;letter-spacing:-.02em}
.spec p{margin:0;font-size:15.5px;line-height:1.62;color:var(--graphite)}

/* note line under a spec grid */
.note{margin-top:22px;padding-left:20px;border-left:3px solid var(--oak);font-size:16px;
  line-height:1.66;color:var(--graphite);max-width:62ch}
.note b{color:var(--navy);font-weight:700}
/* A bold run in a note on a dark band would otherwise be navy on ink. */
.sec.dark .note{color:#93A0BC}
.sec.dark .note b{color:#fff}
.steps + .note{margin-top:36px;margin-left:440px;max-width:68ch}
@media(max-width:1000px){.steps + .note{margin-left:0}}

/* google reviews, three up */
.revs{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.revs .r{background:var(--white);border:1px solid var(--line);border-radius:4px;
  padding:30px 30px 30px;display:flex;flex-direction:column}
.revs .st{display:flex;gap:4px;margin-bottom:18px}
.revs .st i{width:14px;height:14px;background:var(--oak);
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.revs blockquote{margin:0;font-size:15.5px;line-height:1.68;color:var(--graphite);flex:1}
.revs .who{margin:22px 0 0;padding-top:18px;border-top:1px solid var(--line);
  font-size:14px;color:var(--graphite-2)}
.revs .who b{display:block;font-family:var(--d);font-size:16px;font-weight:600;
  color:var(--navy);margin-bottom:3px;letter-spacing:-.01em}
.rmore{display:inline-flex;align-items:center;gap:9px;margin-top:30px;font-family:var(--d);
  font-size:15.5px;font-weight:500;color:var(--navy);text-decoration:none;
  border-bottom:1px solid var(--oak);padding-bottom:5px}
.rmore::after{content:"\2192";font-size:15px;color:var(--oak)}
.rmore:hover{color:var(--oak)}
.sec.dark .revs .r{background:transparent;border-color:var(--line-d)}
.sec.dark .revs blockquote{color:#B6C0D6}
.sec.dark .revs .who{border-color:var(--line-d)}
.sec.dark .revs .who b{color:#fff}
.sec.dark .rmore{color:#fff}
@media (max-width:1000px){.revs{grid-template-columns:1fr}}

/* estimate form */
.fw{display:grid;grid-template-columns:1fr 1.12fr;gap:68px;align-items:start}
.fw .lead p{font-size:16.5px;line-height:1.72;color:var(--graphite);margin:18px 0 0;max-width:46ch}
.fw .big{display:flex;align-items:baseline;gap:14px;margin-top:28px;text-decoration:none}
.fw .big b{font-family:var(--d);font-size:37px;font-weight:700;color:var(--navy);letter-spacing:-.035em;line-height:1}
.fw .big span{font-size:13.5px;color:var(--graphite-2)}
.fw .big:hover b{color:var(--oak)}
.fw .pts{list-style:none;margin:32px 0 0;padding:0;border-top:1px solid var(--line)}
.fw .pts li{padding:15px 0 15px 26px;border-bottom:1px solid var(--line);font-size:15.5px;
  line-height:1.6;color:var(--graphite);position:relative}
.fw .pts li::before{content:"";position:absolute;left:0;top:23px;width:9px;height:2px;background:var(--oak)}
.fw .pts b{color:var(--navy);font-weight:700}

.frm{background:var(--white);border:1px solid var(--line);border-radius:4px;padding:34px 36px 36px}
.frm .g{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.frm .f{display:flex;flex-direction:column;min-width:0}
.frm .f.full{grid-column:1/-1}
.frm label{font-family:var(--b);font-size:11.5px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--graphite-2);margin-bottom:9px}
.frm label i{font-style:normal;color:var(--oak)}
.frm input,.frm select,.frm textarea{width:100%;box-sizing:border-box;font-family:var(--b);
  font-size:16px;color:var(--ink);background:var(--white);border:1px solid var(--line);
  border-radius:4px;padding:13px 14px;line-height:1.45;transition:border-color .15s,box-shadow .15s}
.frm textarea{resize:vertical;min-height:100px}
.frm input:focus,.frm select:focus,.frm textarea:focus{outline:0;border-color:var(--oak);
  box-shadow:0 0 0 3px rgba(181,118,46,.15)}
.frm input::placeholder,.frm textarea::placeholder{color:var(--graphite-2)}
.frm .sel{position:relative}
.frm select{appearance:none;-webkit-appearance:none;padding-right:40px;cursor:pointer}
.frm .sel::after{content:"";position:absolute;right:17px;top:50%;margin-top:-7px;width:8px;height:8px;
  border-right:2px solid var(--oak);border-bottom:2px solid var(--oak);transform:rotate(45deg);
  pointer-events:none}
.frm button{width:100%;justify-content:center;margin-top:26px;border:0;cursor:pointer;font-size:16px}
.frm .fine{margin:15px 0 0;font-size:13.5px;line-height:1.55;color:var(--graphite-2);text-align:center}
.frm .done{margin:26px 0 0;padding:18px 20px;border:1px solid var(--line);border-left:3px solid var(--oak);
  border-radius:4px;background:var(--cream);font-size:15px;line-height:1.6;color:var(--navy)}
@media (max-width:980px){.fw{grid-template-columns:1fr;gap:44px}}
@media (max-width:560px){.frm .g{grid-template-columns:1fr}.frm{padding:26px 22px 28px}
  .fw .big b{font-size:31px}}

/* FAQ */
.faq{margin-top:44px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:24px 56px 24px 0;position:relative;
  font-family:var(--d);font-size:21px;font-weight:600;color:var(--navy);line-height:1.32;
  letter-spacing:-.02em;transition:color .18s}
.faq summary:hover{color:var(--oak)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:8px;top:35px;width:15px;height:2px;background:var(--oak)}
.faq summary::before{content:"";position:absolute;right:14.5px;top:28px;width:2px;height:15px;
  background:var(--oak);transition:transform .22s}
.faq details[open] summary::before{transform:rotate(90deg)}
.faq summary:focus-visible{outline:2px solid var(--oak);outline-offset:3px}
.faq .a{padding:0 80px 26px 0;font-size:16.5px;line-height:1.72;color:var(--graphite);max-width:76ch}

@media (max-width:1040px){
  .phero h1{font-size:40px}
  .duo,.tri{grid-template-columns:1fr;gap:28px}
  .spec{grid-template-columns:1fr}
  .spec > div{border-left:0;border-top:1px solid var(--line)}
  .spec > div:first-child{border-top:0}
  .duo .pic{min-height:300px}
  .ins{grid-template-columns:1fr;gap:10px}
  .duo.flip .pic{order:0}
  .step{grid-template-columns:64px 1fr;row-gap:8px}
  .step .d{grid-column:2}
}
@media (max-width:640px){
  .phero h1{font-size:31px}
  .duo h2{font-size:28px}
  .faq summary{font-size:18px}
}

/* proof tiles, 4-up hairline grid. Used on every page except Gallery. */
.sec.tight{padding:64px 0}
.pf{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:4px;overflow:hidden;background:var(--white)}
.pf > div{padding:30px 26px 32px;border-left:1px solid var(--line)}
.pf > div:nth-child(4n+1){border-left:0}
.sec.cream .pf > div{background:var(--cream)}
.pf b{display:block;font-family:var(--d);font-size:20px;font-weight:600;color:var(--navy);
  margin-bottom:9px;letter-spacing:-.02em;line-height:1.24}
.pf p{margin:0;font-size:14.5px;line-height:1.55;color:var(--graphite)}
@media (max-width:1040px){ .pf{grid-template-columns:1fr 1fr}
  .pf > div:nth-child(odd){border-left:0}
  .pf > div:nth-child(n+3){border-top:1px solid var(--line)} }
@media (max-width:640px){ .pf{grid-template-columns:1fr}
  .pf > div{border-left:0;border-top:1px solid var(--line)}
  .pf > div:first-child{border-top:0} }

@media (max-width:640px){
  .tg div{border-left:0;border-top:1px solid var(--line)}
  .tg div:first-child{border-top:0}
}

/* =============================================================================
 * Mobile navigation and the sticky call bar.
 *
 * The desktop nav simply wrapped below 860px: logo, then the links on their own
 * line, then the button, 210px of chrome before the hero even started. Below the
 * breakpoint the links move into a slide-in panel.
 *
 * The panel lives OUTSIDE <header> on purpose. A sticky header creates its own
 * stacking context, and a fixed panel nested inside one is trapped behind the
 * page no matter how high its z-index goes.
 * ========================================================================== */

.navtools{display:none;align-items:center;gap:10px}
.navtools .icall{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  border:1px solid var(--line);border-radius:100px;color:var(--navy);text-decoration:none}
.navtools .icall svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.burger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;
  padding:0 10px;background:var(--navy);border:0;border-radius:100px;cursor:pointer}
.burger span{display:block;height:2px;background:#fff;border-radius:2px;transition:transform .22s,opacity .18s}
.nav-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-open .burger span:nth-child(2){opacity:0}
.nav-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.burger:focus-visible{outline:2px solid var(--oak);outline-offset:3px}

.mnav{position:fixed;inset:0;z-index:90;visibility:hidden;pointer-events:none}
.mnav .scrim{position:absolute;inset:0;background:rgba(16,23,38,.55);opacity:0;transition:opacity .25s}
.mnav .panel{position:absolute;top:0;right:0;bottom:0;width:min(86vw,360px);background:var(--white);
  transform:translateX(100%);transition:transform .28s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;padding:22px 26px 28px;overflow-y:auto;
  box-shadow:-18px 0 44px rgba(16,23,38,.18)}
.nav-open .mnav{visibility:visible;pointer-events:auto}
.nav-open .mnav .scrim{opacity:1}
.nav-open .mnav .panel{transform:translateX(0)}

.mnav .top{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px}
.mnav .top img{height:46px;width:auto}
.mnav .x{width:42px;height:42px;border:1px solid var(--line);background:transparent;border-radius:100px;
  cursor:pointer;position:relative}
.mnav .x::before,.mnav .x::after{content:"";position:absolute;left:12px;top:20px;width:17px;height:2px;
  background:var(--navy);border-radius:2px}
.mnav .x::before{transform:rotate(45deg)}
.mnav .x::after{transform:rotate(-45deg)}
.mnav .x:focus-visible{outline:2px solid var(--oak);outline-offset:3px}

.mnav ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.mnav li{border-bottom:1px solid var(--line)}
.mnav li a{display:block;padding:17px 2px;font-family:var(--d);font-size:19px;font-weight:600;
  color:var(--navy);text-decoration:none;letter-spacing:-.02em}
.mnav li a.on{color:var(--oak)}
.mnav .acts{margin-top:26px;display:flex;flex-direction:column;gap:12px}
.mnav .acts .btn{justify-content:center}
.mnav .tel{display:flex;flex-direction:column;gap:3px;margin-top:22px;padding-top:20px;
  border-top:1px solid var(--line);text-decoration:none}
.mnav .tel b{font-family:var(--d);font-size:26px;font-weight:700;color:var(--navy);letter-spacing:-.03em}
.mnav .tel span{font-size:13px;color:var(--graphite-2)}

/* The sticky bar. A phone visitor should never have to scroll to find the call. */
.callbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:rgba(255,255,255,.94);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  gap:10px}
.callbar a{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--d);font-size:15px;font-weight:600;text-decoration:none;
  padding:14px 10px;border-radius:100px}
.callbar .c{background:var(--navy);color:#fff}
.callbar .e{background:var(--oak);color:#fff}
.callbar svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}

@media (max-width:860px){
  .nav .in{flex-wrap:nowrap;gap:14px}
  .nav img{height:46px}
  .nav ul{display:none}
  .navtools{display:flex}
  .util .in{justify-content:center}
  .util .in > span:first-child{display:none}
  .callbar{display:flex}
  /* Clear the sticky bar so the footer's last line is never sitting under it. */
  body{padding-bottom:74px}
  .nav-open{overflow:hidden}
}

@media (min-width:861px){
  .mnav{display:none}
}

/* A visitor who asked for less motion gets the panel with no slide. */
@media (prefers-reduced-motion:reduce){
  .mnav .panel{transition:none}
  .mnav .scrim{transition:none}
}

/* Keyboard users need to see where they are, on every interactive thing. */
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--oak);outline-offset:3px;border-radius:2px}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--navy);color:#fff;
  padding:12px 20px;font-family:var(--d);font-size:15px;text-decoration:none;border-radius:0 0 4px 0}
.skip:focus{left:0}

/* The form's live status region, announced to screen readers. */
.frm .done[data-state="error"]{border-left-color:#B3261E;background:#FCF1F0;color:#7A1C16}

/* Two-up variants.
   These are classes, not inline styles, for one reason: an inline
   grid-template-columns beats every media query, so a grid set to two columns
   inline stays two columns on a 390px phone. Anything that needs a non-default
   column count must go through a class or it cannot be made responsive. */
.revs.two,.tri.two,.spec.two{grid-template-columns:1fr 1fr}
@media (max-width:1040px){
  .revs.two,.tri.two,.spec.two{grid-template-columns:1fr}
}

/* Touch targets.
   Phone links and the reviews link measured 30 to 35px tall, under the 44px a
   thumb needs. The padding grows the hit area without moving anything: the
   negative margin cancels the visual offset so desktop layout is unchanged. */
@media (max-width:860px){
  .phero .tel,.hero .tel,.fin .tel,.area .tel,a.tel{
    display:inline-flex;align-items:center;min-height:44px;padding:6px 2px;margin:-6px -2px}
  .rmore{min-height:44px;align-items:center;padding-top:10px}
  .faq summary{padding-top:20px;padding-bottom:20px}
  .mnav li a{padding:19px 2px}
  .crumb a{display:inline-block;padding:6px 0;margin:-6px 0}
}

/* ==========================================================================
   Gallery
   Every photo here is one of Greg's own jobs. The grid is deliberately quiet:
   the photos carry the page, so the chrome around them stays out of the way.
   ========================================================================== */

/* Mid-job band: the frames with the old floor and the new floor in one shot.
   Three columns on the dark band, each figure a fixed height so the portrait
   frame and the two landscape ones read as one row rather than a stagger. */
.mid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.mid figure{margin:0}
.mid img{width:100%;height:340px;object-fit:cover;border-radius:4px}
.mid figcaption{margin-top:14px;font-size:14.5px;line-height:1.55;color:#93A0BC;max-width:34ch}

/* Filter buttons. Pills, not tabs: they change the view, they are not links. */
.gfil{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 34px}
.gfil button{font:500 14.5px/1 var(--d);color:var(--navy);background:var(--white);
  border:1px solid var(--line);border-radius:40px;padding:12px 22px;cursor:pointer;
  transition:background .18s,border-color .18s,color .18s;min-height:44px}
.gfil button:hover{border-color:var(--oak);color:var(--oak)}
.gfil button.on{background:var(--navy);border-color:var(--navy);color:#fff}
.gfil button.on:hover{color:#fff}

/* The grid itself. */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:22px 20px}
.gal figure{margin:0;display:flex;flex-direction:column}
/* [hidden] loses to display:flex above, so the filter needs this to bite. */
.gal figure[hidden]{display:none}
/* height:auto is load-bearing. WordPress emits width and height attributes on
   every image, and for <img> those are presentational hints that set the CSS
   height property. A definite height plus a definite width makes the browser
   ignore aspect-ratio entirely, so without this every tile rendered 750px tall
   in a 371px column. */
.gal img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:4px;background:var(--cream-2)}
.gal figcaption{margin-top:12px;font-size:14.5px;line-height:1.5;color:var(--graphite)}
.gnone{margin:0;padding:40px 0;font-size:16px;color:var(--graphite-2)}

@media (max-width:980px){
  .mid{grid-template-columns:1fr 1fr}
  .mid figure:first-child{grid-column:1 / -1}
  .mid figure:first-child img{height:420px}
  .gal{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  .mid{grid-template-columns:1fr}
  .mid figure:first-child{grid-column:auto}
  .mid img,.mid figure:first-child img{height:260px}
  .mid figcaption{max-width:none}
  .gal{grid-template-columns:1fr;gap:26px}
  .gfil{gap:8px;margin-bottom:26px}
  .gfil button{padding:12px 18px}
}