/* =========================================================
   SCPC Construction, LLC
   Handcrafted stylesheet. No framework, no generic templates.
========================================================= */

:root{
  --charcoal:#1C1D1F;
  --ink:#242527;
  --muted:#66645F;
  --wood:#A4713F;
  --wood-2:#9B6939;
  --brown:#754A26;
  --cream:#F7F4EF;
  --beige:#E9DFD3;
  --line:#D9D2C8;
  --white:#FFFFFF;

  --shell:1230px;
  --gutter:24px;

  --display:"Barlow Condensed",-apple-system,Segoe UI,sans-serif;
  --body:"Inter",-apple-system,Segoe UI,Roboto,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
html,body{overflow-x:hidden;max-width:100%;}
body{
  margin:0;
  font-family:var(--body);
  color:var(--ink);
  background:var(--white);
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:600;line-height:1.05;letter-spacing:.01em;}
p{margin:0 0 1rem;}
p:last-child{margin-bottom:0;}
ul{margin:0;padding:0;list-style:none;}

.shell{width:100%;max-width:var(--shell);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter);}
.section{padding:96px 0;}
.section--tint{background:var(--cream);}
.section--dark{background:var(--charcoal);color:var(--white);}

/* ---- Kicker / section heads ---- */
.kicker{
  display:inline-block;
  font-family:var(--display);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:.82rem;
  color:var(--brown);
  padding-left:44px;
  position:relative;
  margin-bottom:16px;
}
.kicker::before{
  content:"";position:absolute;left:0;top:50%;width:32px;height:2px;background:var(--wood);transform:translateY(-50%);
}
.kicker--light{color:#E8C9A6;}
.kicker--light::before{background:var(--wood);}

.sectionhead{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:52px;}
.sectionhead__title{font-size:clamp(2rem,3.4vw,3.05rem);text-transform:none;color:inherit;max-width:16ch;}
.sectionhead__intro{max-width:38ch;color:var(--muted);margin:0;}
.sectionhead--center{justify-content:center;text-align:center;}
.sectionhead--center .sectionhead__title{max-width:22ch;}
.sectionhead--onDark .sectionhead__intro{color:#B7B4AE;}

/* ---- Buttons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5ch;
  font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.08em;
  font-size:.98rem;line-height:1;
  padding:16px 30px;border:2px solid transparent;border-radius:2px;cursor:pointer;
  transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease;
}
.btn--lg{padding:19px 38px;font-size:1.05rem;}
.btn--block{width:100%;}
.btn--solid{background:var(--brown);color:var(--white);border-color:var(--brown);}
.btn--solid:hover{background:var(--charcoal);border-color:var(--charcoal);}
.btn--dark{background:var(--charcoal);color:var(--white);border-color:var(--charcoal);}
.btn--dark:hover{background:var(--brown);border-color:var(--brown);}
.btn--outline-light{background:transparent;color:var(--white);border-color:rgba(255,255,255,.55);}
.btn--outline-light:hover{background:var(--white);color:var(--charcoal);border-color:var(--white);}
.btn--ghost{background:transparent;color:var(--charcoal);border-color:var(--line);}
.btn--ghost:hover{background:var(--charcoal);color:var(--white);border-color:var(--charcoal);}

.arrowlink{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:.92rem;
  color:var(--brown);
}
.arrowlink::after{content:"";width:26px;height:2px;background:var(--wood);transition:width .2s ease;}
.arrowlink:hover::after{width:40px;}

/* =========================================================
   TOP BAR + MASTHEAD
========================================================= */
.topbar{background:var(--charcoal);color:#CFCBC4;font-size:.82rem;}
.topbar__inner{display:flex;align-items:center;justify-content:space-between;height:44px;}
.topbar__note{display:flex;align-items:center;gap:14px;margin:0;font-family:var(--display);letter-spacing:.14em;text-transform:uppercase;font-size:.78rem;}
.topbar__dot{width:5px;height:5px;border-radius:50%;background:var(--wood);display:inline-block;}
.topbar__contact{display:flex;align-items:center;gap:22px;}
.topbar__link{color:#CFCBC4;}
.topbar__link:hover{color:#fff;}
.topbar__phone{color:#fff;font-family:var(--display);font-weight:600;letter-spacing:.06em;font-size:1rem;}

.masthead{position:sticky;top:0;z-index:60;background:var(--white);border-bottom:1px solid var(--line);transition:box-shadow .2s ease;}
.masthead.is-stuck{box-shadow:0 10px 30px rgba(28,29,31,.09);}
.masthead__inner{display:flex;align-items:center;gap:32px;height:96px;}
.brand{flex:0 0 auto;}
.brand img{height:58px;width:auto;}
.mainnav{margin-left:auto;}
.mainnav__list{display:flex;align-items:center;gap:34px;}
.mainnav__link{
  font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.09em;font-size:1.02rem;
  color:var(--charcoal);padding:6px 0;position:relative;
}
.mainnav__link::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:2px;background:var(--wood);transition:width .22s ease;}
.mainnav__link:hover::after,.mainnav__link.is-active::after{width:100%;}

/* Demo switcher. Review stage only, hidden by SHOW_DEMO_SWITCHER=false. */
.mainnav__has-sub{position:relative;}
.mainnav__caret{display:inline-block;width:6px;height:6px;margin-left:7px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);opacity:.65;}
.mainnav__sub{
  position:absolute;top:100%;left:-18px;min-width:206px;z-index:70;
  background:var(--white);border:1px solid var(--line);box-shadow:0 16px 40px rgba(28,29,31,.14);
  padding:8px 0;margin-top:14px;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .25s ease,transform .25s ease,visibility .25s;
}
.mainnav__has-sub:hover .mainnav__sub,
.mainnav__has-sub:focus-within .mainnav__sub{opacity:1;visibility:visible;transform:translateY(0);}
.mainnav__sub-tag{display:block;padding:6px 20px 8px;font-family:var(--display);font-size:.7rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);}
.mainnav__sub a{
  display:block;padding:10px 20px;font-family:var(--display);font-weight:600;font-size:.95rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--charcoal);
  transition:background .2s ease,color .2s ease,padding-left .2s ease;
}
.mainnav__sub a:hover{background:var(--cream);color:var(--brown);padding-left:26px;}
.mobilenav__sub{display:flex;flex-direction:column;padding-left:18px;
  border-left:1px solid rgba(255,255,255,.14);margin:2px 0 6px;}
.mobilenav__sub a{font-size:1rem;color:#CFCBC4;padding:9px 0;}
.masthead__actions{display:flex;align-items:center;gap:20px;}
.callchip{display:flex;flex-direction:column;line-height:1.1;}
.callchip__label{font-size:.68rem;text-transform:uppercase;letter-spacing:.18em;color:var(--muted);font-family:var(--display);font-weight:600;}
.callchip__num{font-family:var(--display);font-weight:700;font-size:1.28rem;color:var(--charcoal);}
/* A plain icon rather than a filled button.
   The first version was a near black slab. The bronze fill that replaced it
   still read as a button, because the bars were short lines lost inside a
   solid block. Three charcoal lines on the white header, matching the logo,
   are read as a menu at a glance. The padding keeps the tap target large
   without drawing a box around it. */
.navtoggle{display:none;flex-direction:column;justify-content:center;gap:6px;width:46px;height:44px;padding:10px 6px;
  background:none;border:0;border-radius:4px;cursor:pointer;transition:opacity .2s ease;}
.navtoggle:hover{opacity:.62;}
.navtoggle:focus-visible{outline:2px solid var(--brown);outline-offset:2px;}
.navtoggle span{display:block;height:3px;background:var(--charcoal);border-radius:2px;}

/* Mobile nav */
.mobilenav{position:fixed;top:0;right:0;width:min(86vw,360px);height:100%;background:var(--charcoal);color:#fff;z-index:200;padding:22px;transform:translateX(100%);transition:transform .28s ease;display:flex;flex-direction:column;}
.mobilenav.is-open{transform:translateX(0);}
.mobilenav[hidden]{display:flex;}
.mobilenav__head{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.12);padding-bottom:16px;}
.mobilenav__title{font-family:var(--display);text-transform:uppercase;letter-spacing:.2em;font-size:.9rem;color:#CFCBC4;}
.mobilenav__close{background:none;border:0;color:#fff;font-size:2rem;line-height:1;cursor:pointer;}
.mobilenav__list{flex:1;margin:16px 0;display:flex;flex-direction:column;justify-content:center;gap:2px;}
.mobilenav__list li{display:block;}
.mobilenav__list a{display:block;font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:1.42rem;padding:16px 2px;color:#fff;}
.mobilenav__list a.is-active{color:#E8C9A6;}
.mobilenav__foot{display:flex;flex-direction:column;gap:14px;padding-top:14px;}
.navscrim{position:fixed;inset:0;background:rgba(10,10,11,.55);z-index:150;}
.navscrim[hidden]{display:none;}

/* =========================================================
   HERO
========================================================= */
.hero{position:relative;height:clamp(480px,68vh,620px);display:flex;align-items:center;color:#fff;overflow:hidden;}
.hero__stage{position:absolute;inset:0;z-index:0;}
.hero__slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1s ease;}
.hero__slide.is-active{opacity:1;}
.hero__scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,21,23,.88) 0%,rgba(20,21,23,.6) 46%,rgba(20,21,23,.12) 100%);}
.hero__inner{position:relative;z-index:2;width:100%;}
.hero__content{max-width:600px;}
.hero__title{font-size:clamp(2.3rem,4vw,3.35rem);line-height:1.06;margin:0 0 16px;text-transform:uppercase;}
.hero__lead{font-size:1.1rem;line-height:1.6;color:#EDE9E3;max-width:46ch;margin-bottom:28px;}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px;}
.hero__controls{position:absolute;left:50%;transform:translateX(-50%);bottom:22px;z-index:3;display:flex;align-items:center;justify-content:flex-end;gap:14px;width:100%;}
.hero__arrow{width:52px;height:52px;border:2px solid rgba(255,255,255,.4);background:rgba(20,21,23,.25);color:#fff;font-size:1.6rem;line-height:1;cursor:pointer;border-radius:2px;transition:background .2s,border-color .2s;}
.hero__arrow:hover{background:var(--brown);border-color:var(--brown);}
.hero__dots{display:flex;gap:9px;}
.hero__dot{width:34px;height:4px;border:0;background:rgba(255,255,255,.4);cursor:pointer;padding:0;border-radius:2px;transition:background .2s;}
.hero__dot.is-active{background:var(--wood);}

/* =========================================================
   TRUST STRIP
========================================================= */
.trust{background:var(--charcoal);color:#fff;}
.trust__row{display:flex;flex-wrap:wrap;}
.trust__item{flex:1 1 0;min-width:220px;display:flex;align-items:center;gap:16px;padding:30px 26px;border-right:1px solid rgba(255,255,255,.1);}
.trust__item:last-child{border-right:0;}
.trust__mark{font-family:var(--display);font-weight:700;font-size:1.7rem;color:var(--wood);line-height:1;}
.trust__text{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:1.16rem;line-height:1.15;}

/* =========================================================
   SERVICES
========================================================= */
.svcgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.svc{position:relative;background:var(--white);border:1px solid var(--line);border-radius:3px;overflow:hidden;display:flex;flex-direction:column;}
.svc__media{display:block;overflow:hidden;height:230px;cursor:pointer;}
.svc__media img{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .6s ease;}
.svc:hover .svc__media img{transform:scale(1.05);}
.svc__body{padding:26px 28px 30px;display:flex;flex-direction:column;gap:12px;flex:1;}
.svc__title{font-size:1.6rem;text-transform:uppercase;letter-spacing:.02em;}
.svc__body p{color:var(--muted);margin:0;}
.svc__body .arrowlink{margin-top:auto;padding-top:6px;}

/* Decks is the lead service, so it gets a full-width horizontal card across the
   top with the photo on one side and the copy on the other. The remaining three
   services sit underneath as equal columns. No wasted vertical space. */
.svcgrid{grid-template-columns:repeat(2,1fr);}
.svc--lead{grid-column:1 / -1;flex-direction:row;border-color:var(--wood);}
.svc--lead .svc__media{flex:0 0 52%;height:auto;min-height:360px;}
.svc--lead .svc__body{flex:1;justify-content:center;padding:40px 44px;gap:16px;}
.svc--lead .svc__title{font-size:2.4rem;line-height:1.05;}
.svc--lead .svc__body p{font-size:1.05rem;max-width:46ch;}
.svc--lead .svc__body .arrowlink{margin-top:10px;}
.svc__flag{align-self:flex-start;background:var(--wood);color:#fff;font-family:var(--display);
  font-size:.82rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:5px 12px;}

/* =========================================================
   DECK SHOWCASE
========================================================= */
.deckgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.deckcard{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);
  border-radius:3px;overflow:hidden;text-decoration:none;color:inherit;transition:border-color .25s ease;}
.deckcard:hover{border-color:var(--wood);}
.deckcard__media{display:block;height:210px;overflow:hidden;}
.deckcard__media img{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .6s ease;}
.deckcard:hover .deckcard__media img{transform:scale(1.05);}
.deckcard__body{display:flex;flex-direction:column;gap:8px;padding:20px 22px 24px;}
.deckcard__title{font-family:var(--display);font-size:1.3rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.02em;color:var(--charcoal);}
.deckcard__text{color:var(--muted);font-size:.95rem;line-height:1.55;}
.deckshow__cta{display:flex;align-items:center;gap:28px;flex-wrap:wrap;margin-top:38px;}

/* =========================================================
   REVIEWS
========================================================= */
/* Offset for the sticky masthead so the #reviews anchor does not land under it. */
#reviews{scroll-margin-top:120px;}

.revtop{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin:-18px 0 40px;}
.revtop__score{font-family:var(--display);font-size:2.6rem;font-weight:700;line-height:1;color:var(--charcoal);}
.revtop__stars{color:#F5B72B;font-size:1.5rem;letter-spacing:2px;line-height:1;}
.revtop__count{color:var(--muted);font-size:.95rem;}

/* Carousel: 3 cards visible on desktop, 2 on tablet, 1 on mobile.
   Without JS the track simply scrolls horizontally, so nothing is hidden. */
.revcar{position:relative;}
.revcar__viewport{overflow:hidden;}
.revcar__track{display:flex;gap:24px;transition:transform .45s cubic-bezier(.4,0,.2,1);}
.revcar__track .rev{flex:0 0 calc((100% - 48px) / 3);}
.revcar__arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:46px;height:46px;border:1px solid var(--line);background:var(--white);color:var(--charcoal);
  font-size:1.7rem;line-height:1;border-radius:50%;cursor:pointer;display:flex;align-items:center;
  justify-content:center;transition:background .2s ease,color .2s ease,border-color .2s ease;}
.revcar__arrow:hover{background:var(--brown);color:#fff;border-color:var(--brown);}
.revcar__arrow:disabled{opacity:.35;cursor:default;}
.revcar__arrow:disabled:hover{background:var(--white);color:var(--charcoal);border-color:var(--line);}
.revcar__arrow--prev{left:-23px;}
.revcar__arrow--next{right:-23px;}
.revcar__dots{display:flex;justify-content:center;gap:9px;margin-top:26px;}
.revcar__dots:empty{display:none;}
.revcar__dot{width:9px;height:9px;padding:0;border:0;border-radius:50%;background:var(--line);
  cursor:pointer;transition:background .2s ease,width .2s ease;}
.revcar__dot.is-active{background:var(--brown);width:26px;border-radius:5px;}
html:not(.js) .revcar__viewport{overflow-x:auto;}
html:not(.js) .revcar__arrow{display:none;}

.revgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.rev{margin:0;background:var(--white);border:1px solid var(--line);border-radius:3px;
  padding:28px 28px 26px;display:flex;flex-direction:column;gap:13px;}
.rev__head{display:flex;align-items:center;gap:13px;}
.rev__avatar{flex:0 0 auto;width:44px;height:44px;border-radius:50%;background:var(--brown);color:#fff;
  display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:1.35rem;
  font-weight:700;line-height:1;}
.rev__who{display:flex;flex-direction:column;gap:2px;}
.rev__name{font-family:var(--display);font-size:1.12rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.04em;color:var(--charcoal);line-height:1.1;}
.rev__stars{color:#F5B72B;font-size:.95rem;letter-spacing:2px;line-height:1;}
.rev__title{font-family:var(--display);font-size:1.3rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.02em;color:var(--charcoal);margin:0;line-height:1.2;}
.rev__body{margin:0;color:var(--muted);font-size:1rem;line-height:1.7;quotes:none;}
.rev__meta{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);font-size:.86rem;color:var(--muted);}
.revfoot{display:flex;justify-content:center;align-items:center;gap:16px;flex-wrap:wrap;margin-top:36px;}

/* =========================================================
   WHY
========================================================= */
.why__grid{display:grid;grid-template-columns:1fr 1.08fr;gap:64px;align-items:stretch;}
.why__media{position:relative;min-height:100%;}
.why__media img{width:100%;height:100%;min-height:480px;object-fit:cover;border-radius:3px;display:block;}
.why__stamp{position:absolute;left:-18px;bottom:34px;background:var(--brown);color:#fff;padding:18px 26px;border-radius:2px;box-shadow:0 18px 40px rgba(28,29,31,.22);}
.why__stamp-tag{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:1.3rem;}
.why__lead{font-size:1.12rem;color:var(--muted);margin:6px 0 26px;}
.why__list{display:grid;gap:14px;margin-bottom:34px;}
.why__list li{position:relative;padding-left:38px;font-weight:500;}
.why__list li::before{content:"";position:absolute;left:0;top:9px;width:22px;height:11px;border-left:3px solid var(--wood);border-bottom:3px solid var(--wood);transform:rotate(-45deg);}

/* =========================================================
   BEFORE / AFTER
========================================================= */
.ba{max-width:1000px;margin:0 auto;}
.ba-slider{position:relative;width:100%;aspect-ratio:16/10;overflow:hidden;border-radius:4px;user-select:none;cursor:ew-resize;box-shadow:0 24px 60px rgba(28,29,31,.18);}
.ba-slider img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;}
.ba-before{position:absolute;inset:0;overflow:hidden;}
.ba-label{position:absolute;top:18px;font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:.86rem;color:#fff;background:rgba(20,21,23,.72);padding:7px 15px;border-radius:2px;z-index:4;}
.ba-label--before{left:18px;}
.ba-label--after{right:18px;}
.ba-handle{position:absolute;top:0;bottom:0;left:50%;width:3px;background:#fff;transform:translateX(-50%);z-index:5;}
.ba-handle__grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;background:#fff;box-shadow:0 6px 18px rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center;}
.ba-handle__grip::before,.ba-handle__grip::after{content:"";position:absolute;width:0;height:0;border-top:7px solid transparent;border-bottom:7px solid transparent;}
.ba-handle__grip::before{left:12px;border-right:9px solid var(--brown);}
.ba-handle__grip::after{right:12px;border-left:9px solid var(--brown);}
.ba__hint{text-align:center;margin-top:18px;color:var(--muted);font-size:.95rem;font-family:var(--display);text-transform:uppercase;letter-spacing:.12em;}

/* =========================================================
   FEATURED GALLERY
========================================================= */
.feat__grid{display:grid;grid-template-columns:1.45fr 1fr 1fr;grid-auto-rows:235px;gap:16px;}
.feat__tile{overflow:hidden;border-radius:3px;position:relative;display:block;}
.feat__tile img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease;}
.feat__tile:hover img{transform:scale(1.07);}
.feat__tile--tall{grid-row:span 2;}

/* =========================================================
   PROCESS
========================================================= */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:2px solid var(--line);}
.step{padding:34px 30px 34px 0;border-right:1px solid var(--line);position:relative;}
.step:last-child{border-right:0;}
.step:not(:first-child){padding-left:30px;}
.step__num{font-family:var(--display);font-weight:700;font-size:2.6rem;color:var(--beige);line-height:1;display:block;margin-bottom:16px;}
.step__title{font-size:1.5rem;text-transform:uppercase;letter-spacing:.02em;margin-bottom:10px;}
.step p{color:var(--muted);font-size:.98rem;margin:0;}

/* =========================================================
   CTA BAND
========================================================= */
.ctaband{background:var(--brown);color:#fff;position:relative;}
.ctaband::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.12),transparent 60%);pointer-events:none;}
.ctaband__inner{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:44px;padding-top:66px;padding-bottom:66px;}
.ctaband__title{font-size:clamp(1.9rem,3.2vw,2.9rem);text-transform:uppercase;margin:10px 0 10px;}
.ctaband__text p{color:#F1E4D6;margin:0;max-width:42ch;}
.ctaband__actions{display:flex;align-items:center;gap:28px;flex-shrink:0;}
.ctaband .btn--solid{background:#fff;color:var(--brown);border-color:#fff;}
.ctaband .btn--solid:hover{background:var(--charcoal);color:#fff;border-color:var(--charcoal);}
.ctaband__call{display:flex;flex-direction:column;line-height:1.15;}
.ctaband__call-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.16em;color:#F1E4D6;font-family:var(--display);font-weight:600;}
.ctaband__call-num{font-family:var(--display);font-weight:700;font-size:1.7rem;}

/* =========================================================
   FAQ
========================================================= */
.faq__grid{display:grid;grid-template-columns:0.85fr 1.15fr;gap:64px;align-items:start;}
.faq__intro p{color:var(--muted);}
.faq__intro a{color:var(--brown);font-weight:600;}
.accordion{border-top:1px solid var(--line);}
.acc{border-bottom:1px solid var(--line);}
.acc__q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;text-align:left;background:none;border:0;cursor:pointer;padding:24px 4px;font-family:var(--display);font-weight:600;font-size:1.32rem;color:var(--charcoal);letter-spacing:.01em;}
.acc__icon{position:relative;flex:0 0 auto;width:22px;height:22px;}
.acc__icon::before,.acc__icon::after{content:"";position:absolute;background:var(--brown);transition:transform .25s ease;}
.acc__icon::before{top:10px;left:0;width:22px;height:2px;}
.acc__icon::after{top:0;left:10px;width:2px;height:22px;}
.acc.is-open .acc__icon::after{transform:scaleY(0);}
.acc__a{max-height:0;overflow:hidden;transition:max-height .3s ease;}
.acc__a p{padding:0 4px 24px;color:var(--muted);margin:0;}

/* =========================================================
   FOOTER
========================================================= */
.sitefoot{background:var(--charcoal);color:#B7B4AE;}
.sitefoot__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:44px;padding-top:74px;padding-bottom:56px;}
.sitefoot__logo{display:inline-block;margin-bottom:22px;}
.sitefoot__logo img{height:52px;width:auto;}
.sitefoot__blurb{max-width:34ch;margin-bottom:20px;font-size:.96rem;}
.sitefoot__phone{display:block;font-family:var(--display);font-weight:700;font-size:1.6rem;color:#fff;}
.sitefoot__email{display:block;margin-top:4px;color:#CFCBC4;}
.sitefoot__email:hover,.sitefoot__phone:hover{color:var(--wood);}
.sitefoot__head{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.14em;font-size:1rem;color:#fff;margin-bottom:20px;}
.sitefoot__col ul{display:grid;gap:12px;}
.sitefoot__col a:hover{color:#fff;}
.sitefoot__cta-note{font-size:.95rem;margin-bottom:18px;}
.sitefoot__bar{border-top:1px solid rgba(255,255,255,.1);}
.sitefoot__bar-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:22px;padding-bottom:22px;font-size:.85rem;}
.sitefoot__bar-inner p{margin:0;}
.sitefoot__legal{display:flex;gap:24px;}
.sitefoot__legal a:hover{color:#fff;}

/* =========================================================
   STICKY MOBILE BAR + BACK TO TOP
========================================================= */
.stickybar{position:fixed;left:0;right:0;bottom:0;z-index:80;display:none;grid-template-columns:1fr 1fr;}
.stickybar__btn{display:flex;align-items:center;justify-content:center;padding:16px;font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:1.05rem;color:#fff;}
.stickybar__btn--call{background:var(--charcoal);}
.stickybar__btn--quote{background:var(--brown);}

.to-top{position:fixed;right:22px;bottom:26px;z-index:70;width:48px;height:48px;border:0;border-radius:2px;background:var(--charcoal);color:#fff;font-size:1.3rem;cursor:pointer;opacity:0;transform:translateY(12px);transition:opacity .25s,transform .25s;}
.to-top.is-shown{opacity:1;transform:translateY(0);}
.to-top[hidden]{display:none;}

/* =========================================================
   REVEAL
========================================================= */
/* Reveal only hides when JS is active, so no-JS visitors still see everything. */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease;}
.js .reveal.is-visible{opacity:1;transform:none;}

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width:1024px){
  .section{padding:76px 0;}
  .masthead__inner{height:84px;gap:16px;}
  .mainnav,.masthead__actions .callchip{display:none;}
  /* The menu button must never give up space. It used to have no shrink rule,
     so on a narrow phone the logo pushed it down to a few pixels and the bars
     inside it shrank to nothing. The filled versions still showed a sliver of
     colour, which is why this only became visible once the fill was removed. */
  .navtoggle{display:flex;margin-left:auto;flex-shrink:0;}
  /* The logo is what gives way instead, scaling down rather than pushing. */
  .brand{flex:0 1 auto;min-width:0;}
  .brand img{width:auto;height:auto;max-height:58px;max-width:100%;}
  .masthead__actions .btn{display:none;}
  .svcgrid{grid-template-columns:repeat(2,1fr);gap:18px;}
  .svc__media{height:200px;}
  .svc--lead .svc__media{flex:0 0 46%;min-height:300px;height:auto;}
  .svc--lead .svc__body{padding:30px 30px;}
  .svc--lead .svc__title{font-size:2rem;}
  .deckgrid{grid-template-columns:repeat(2,1fr);}
  .revgrid{grid-template-columns:1fr;gap:20px;}
  .revcar__track .rev{flex:0 0 calc((100% - 24px) / 2);}
  .revcar__arrow--prev{left:-14px;}
  .revcar__arrow--next{right:-14px;}
  #reviews{scroll-margin-top:100px;}
  .why__grid{grid-template-columns:1fr;gap:40px;}
  .faq__grid{grid-template-columns:1fr;gap:36px;}
  .feat__grid{grid-template-columns:1fr 1fr;grid-auto-rows:200px;}
  .steps{grid-template-columns:repeat(2,1fr);}
  .step{border-bottom:1px solid var(--line);}
  .step:nth-child(2){border-right:0;}
}
@media (max-width:760px){
  body{font-size:16px;}
  .topbar{display:none;}
  .section{padding:60px 0;}
  .svcgrid{grid-template-columns:1fr;gap:22px;}
  .svc__media{height:250px;}
  /* Lead card stacks back to image over copy on small screens. */
  .svc--lead{flex-direction:column;}
  .svc--lead .svc__media{flex:none;height:250px;min-height:0;}
  .svc--lead .svc__body{padding:26px 28px 30px;justify-content:flex-start;}
  .svc--lead .svc__title{font-size:1.8rem;}
  .svc--lead .svc__body p{font-size:1rem;}
  .deckgrid{grid-template-columns:1fr;}
  .deckshow__cta{flex-direction:column;align-items:flex-start;gap:18px;}
  .revcar__track{gap:16px;}
  .revcar__track .rev{flex:0 0 100%;}
  .revcar__arrow{width:40px;height:40px;font-size:1.45rem;}
  .revcar__arrow--prev{left:-6px;}
  .revcar__arrow--next{right:-6px;}
  .revtop{gap:10px;margin-bottom:32px;}
  .revtop__score{font-size:2.1rem;}
  .revfoot{flex-direction:column;gap:12px;}
  .revfoot .btn{width:100%;}
  .sectionhead{flex-direction:column;align-items:flex-start;gap:18px;margin-bottom:36px;}
  .sectionhead--center{align-items:center;}
  .hero{height:clamp(440px,72vh,560px);}
  .hero__scrim{background:linear-gradient(180deg,rgba(20,21,23,.4) 0%,rgba(20,21,23,.8) 100%);}
  .hero__title{font-size:clamp(2rem,7vw,2.6rem);}
  .hero__lead{font-size:1.02rem;margin-bottom:22px;}
  .hero__actions{width:100%;}
  .hero__actions .btn{flex:1 1 auto;}
  .hero__controls{justify-content:center;bottom:16px;}
  .trust__item{flex:1 1 100%;border-right:0;border-bottom:1px solid rgba(255,255,255,.1);padding:20px 0;}
  .trust__item:last-child{border-bottom:0;}
  .why__stamp{left:14px;bottom:14px;}
  .feat__grid{grid-template-columns:1fr;grid-auto-rows:220px;}
  .feat__tile--tall{grid-row:auto;}
  .steps{grid-template-columns:1fr;}
  .step,.step:nth-child(2){border-right:0;}
  .ctaband__inner{flex-direction:column;align-items:flex-start;gap:26px;padding-top:48px;padding-bottom:48px;}
  .ctaband__actions{flex-direction:column;align-items:flex-start;gap:18px;width:100%;}
  .ctaband__actions .btn{width:100%;}
  .sitefoot__grid{grid-template-columns:1fr;gap:34px;padding-top:52px;padding-bottom:40px;}
  .sitefoot__bar-inner{flex-direction:column;align-items:flex-start;gap:12px;}
  .stickybar{display:grid;}
  body{padding-bottom:56px;}
  .to-top{bottom:70px;}
}

/* On the smallest phones the logo steps down so the row keeps its breathing
   room and the menu button is never crowded. */
@media (max-width:400px){
  .brand img{max-height:48px;}
  .masthead__inner{gap:12px;}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important;}
  .reveal{opacity:1;transform:none;}
}

/* =========================================================
   HEADER FIT
   Adding the calculator made a seventh menu item, which pushed
   both that label and the phone number onto two lines.
========================================================= */
/* A menu label and a phone number should never break mid item. */
.mainnav__link,.callchip__num{white-space:nowrap;}

/* Slightly tighter spacing buys back the room the new item needs. */
.mainnav__list{gap:26px;}

/* On narrower desktops the call chip is the first thing to go: the same
   number is already sitting in the bar directly above it, and the Free
   Estimate button still carries the action. */
@media (max-width:1200px){
  .callchip{display:none;}
  /* Between here and the burger menu at 1024px the row is at its tightest,
     so the spacing closes up a little further rather than run out of room. */
  .mainnav__list{gap:20px;}
}