/* =========================================================
   SCPC Construction, LLC  |  Inner pages
========================================================= */

/* ---- Page hero + breadcrumbs ---- */
.pagehero{position:relative;background-size:cover;background-position:center;color:#fff;display:flex;align-items:center;min-height:clamp(240px,34vh,350px);}
.pagehero__scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,21,23,.88) 0%,rgba(20,21,23,.6) 70%,rgba(20,21,23,.4) 100%);}
.pagehero__inner{position:relative;z-index:2;padding-top:44px;padding-bottom:44px;}
.pagehero__title{font-size:clamp(2.1rem,4vw,3.1rem);text-transform:uppercase;margin:14px 0 0;}
.pagehero__sub{margin-top:14px;max-width:56ch;color:#EDE9E3;font-size:1.08rem;}
.crumbs{display:flex;gap:10px;align-items:center;font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.14em;font-size:.78rem;color:#CFCBC4;}
.crumbs a{color:#E8C9A6;}
.crumbs a:hover{color:#fff;}
.crumbs__sep{opacity:.55;}

/* ---- Services page ---- */
.svcrow{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;padding:78px 0;border-bottom:1px solid var(--line);}
.svcrow:last-of-type{border-bottom:0;}
.svcrow--flip .svcrow__media{order:2;}
.svcrow__media{position:relative;}
.svcrow__media img{width:100%;height:100%;min-height:380px;max-height:520px;object-fit:cover;border-radius:3px;}
.svcrow__num{position:absolute;top:-18px;left:-18px;font-family:var(--display);font-weight:700;font-size:3.2rem;color:var(--white);background:var(--brown);width:78px;height:78px;display:flex;align-items:center;justify-content:center;border-radius:2px;box-shadow:0 14px 34px rgba(28,29,31,.25);}
.svcrow__body .kicker{margin-bottom:12px;}
.svcrow__title{font-size:clamp(1.8rem,2.6vw,2.4rem);text-transform:uppercase;margin-bottom:16px;}
.svcrow__body p{color:var(--muted);margin-bottom:16px;}
.svcrow__points{display:grid;gap:11px;margin:0 0 24px;}
.svcrow__points li{position:relative;padding-left:34px;font-weight:500;color:var(--ink);}
.svcrow__points li::before{content:"";position:absolute;left:0;top:8px;width:20px;height:10px;border-left:3px solid var(--wood);border-bottom:3px solid var(--wood);transform:rotate(-45deg);}
.guidance{background:var(--charcoal);color:#fff;border-radius:4px;padding:52px 56px;display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap;}
.guidance__title{font-size:clamp(1.6rem,2.4vw,2.1rem);text-transform:uppercase;margin:8px 0 10px;}
.guidance__text{max-width:52ch;}
.guidance__text p{color:#C4C1BB;margin:0;}

/* ---- Gallery ---- */
.gallery-filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:40px;}
.gfilter{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:.92rem;padding:11px 22px;border:2px solid var(--line);background:#fff;color:var(--charcoal);border-radius:2px;cursor:pointer;transition:all .2s ease;}
.gfilter:hover{border-color:var(--brown);color:var(--brown);}
.gfilter.is-active{background:var(--brown);border-color:var(--brown);color:#fff;}
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.gitem{position:relative;overflow:hidden;border-radius:3px;background:var(--charcoal);cursor:pointer;aspect-ratio:4/3;border:0;padding:0;display:block;}
.gitem img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease;}
.gitem:hover img{transform:scale(1.06);}
.gitem__cap{position:absolute;left:0;right:0;bottom:0;padding:38px 18px 15px;background:linear-gradient(180deg,transparent,rgba(20,21,23,.85));color:#fff;font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.04em;font-size:1rem;text-align:left;opacity:0;transform:translateY(8px);transition:opacity .25s,transform .25s;}
.gitem:hover .gitem__cap{opacity:1;transform:none;}
.gitem[hidden]{display:none;}
.gallery-ba{margin-top:56px;}
.gallery-ba__head{text-align:center;margin-bottom:28px;}

/* Lightbox */
.lightbox{position:fixed;inset:0;z-index:300;background:rgba(15,15,16,.93);display:none;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:56px 30px;}
.lightbox.is-open{display:flex;}
.lightbox__img{max-width:90vw;max-height:74vh;object-fit:contain;border-radius:3px;box-shadow:0 30px 80px rgba(0,0,0,.5);}
.lightbox__cap{position:static;margin:0;text-align:center;color:#fff;font-family:var(--display);text-transform:uppercase;letter-spacing:.1em;font-size:1.05rem;}
.lightbox__close,.lightbox__nav{position:absolute;background:rgba(255,255,255,.12);border:0;color:#fff;cursor:pointer;border-radius:2px;transition:background .2s;}
.lightbox__close{top:22px;right:22px;width:46px;height:46px;font-size:1.7rem;}
.lightbox__nav{top:50%;transform:translateY(-50%);width:52px;height:64px;font-size:2rem;}
.lightbox__nav--prev{left:20px;}
.lightbox__nav--next{right:20px;}
.lightbox__close:hover,.lightbox__nav:hover{background:var(--brown);}

/* ---- About ---- */
.about-story{display:grid;grid-template-columns:1.05fr 0.95fr;gap:64px;align-items:center;}
.about-story__media img{width:100%;height:100%;min-height:440px;object-fit:cover;border-radius:3px;}
/* The story is three stacked paragraphs, so the lead keeps its extra breathing
   room but not its own size or colour. When it kept both, the first paragraph
   sat at 17.92px in muted grey above two at 17px in near-black, and the shift
   part way down one block read as a second typeface. */
.about-story__body p{color:var(--muted);}
.about-story__body .why__lead{font-size:inherit;margin-bottom:22px;}
.values-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;margin-top:8px;}
.valuecard{background:#fff;border:1px solid var(--line);border-radius:3px;padding:30px 30px 32px;}
.valuecard__mark{width:46px;height:46px;border-radius:2px;background:var(--cream);display:flex;align-items:center;justify-content:center;margin-bottom:16px;font-family:var(--display);font-weight:700;color:var(--brown);font-size:1.4rem;}
.valuecard h3{font-size:1.3rem;text-transform:uppercase;margin-bottom:10px;}
.valuecard p{color:var(--muted);margin:0;font-size:.98rem;}
.about-split{display:grid;grid-template-columns:0.95fr 1.05fr;gap:64px;align-items:center;}
.about-split--flip .about-split__media{order:2;}
.about-split__media img{width:100%;min-height:360px;object-fit:cover;border-radius:3px;}

/* ---- Contact / Estimate ---- */
.contact-grid{display:grid;grid-template-columns:0.85fr 1.15fr;gap:56px;align-items:start;}
.contact-info__block{margin-bottom:30px;}
.contact-info__label{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.14em;font-size:.78rem;color:var(--muted);margin-bottom:6px;}
.contact-info__value{font-family:var(--display);font-weight:700;font-size:1.5rem;color:var(--charcoal);}
.contact-info__value a:hover{color:var(--brown);}
.contact-info__email{display:block;font-size:1.05rem;color:var(--ink);word-break:break-word;}
.contact-info__email + .contact-info__email{margin-top:5px;}
.contact-info__email:hover{color:var(--brown);}
.next-steps{background:var(--cream);border-radius:4px;padding:34px 34px 36px;margin-top:8px;}
.next-steps h2{font-size:1.4rem;text-transform:uppercase;margin-bottom:18px;}
.next-steps ol{counter-reset:ns;display:grid;gap:16px;}
.next-steps li{position:relative;padding-left:46px;color:var(--muted);list-style:none;}
.next-steps li::before{counter-increment:ns;content:counter(ns);position:absolute;left:0;top:-2px;width:30px;height:30px;background:var(--brown);color:#fff;border-radius:2px;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:700;font-size:1rem;}

.formcard{background:#fff;border:1px solid var(--line);border-radius:4px;padding:40px 40px 44px;box-shadow:0 18px 50px rgba(28,29,31,.06);}
.form-note{color:var(--muted);font-size:.95rem;margin-bottom:26px;}
.field{margin-bottom:20px;}
.field__row{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.field label{display:block;font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:.82rem;color:var(--charcoal);margin-bottom:8px;}
.field label .req{color:var(--brown);}
.field input,.field select,.field textarea{width:100%;font-family:var(--body);font-size:1rem;color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:2px;padding:13px 15px;transition:border-color .2s;}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--brown);}
.field textarea{min-height:130px;resize:vertical;}
.field input.has-error,.field select.has-error,.field textarea.has-error{border-color:#B4442E;}
.field__err{color:#B4442E;font-size:.85rem;margin-top:6px;}
.field--check{display:flex;align-items:flex-start;gap:11px;}
.field--check input{width:auto;margin-top:3px;}
.field--check label{text-transform:none;letter-spacing:0;font-family:var(--body);font-weight:400;font-size:.92rem;color:var(--muted);margin:0;}
.form-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.form-submit{width:100%;margin-top:6px;}
.form-reassure{text-align:center;color:var(--muted);font-size:.88rem;margin-top:14px;}
.form-alert{background:#FBEEEA;border:1px solid #E3B4A8;color:#7A2E1B;padding:14px 18px;border-radius:2px;margin-bottom:24px;font-size:.95rem;}
.form-success{background:#EAF3EC;border:1px solid #BBD9C2;color:#2C5138;padding:16px 20px;border-radius:2px;margin-bottom:24px;}

/* ---- Success page ---- */
.thanks{text-align:center;max-width:640px;margin:0 auto;}
.thanks__mark{width:84px;height:84px;border-radius:50%;background:var(--brown);color:#fff;display:flex;align-items:center;justify-content:center;font-size:2.4rem;margin:0 auto 26px;}
.thanks__title{font-size:clamp(2rem,3.4vw,2.8rem);text-transform:uppercase;margin-bottom:16px;}
.thanks p{color:var(--muted);margin-bottom:12px;}

/* ---- Legal (Terms / Privacy) ---- */
.legal{max-width:860px;}
.legal__updated{color:var(--muted);font-size:.9rem;font-family:var(--display);text-transform:uppercase;letter-spacing:.1em;margin-bottom:30px;}
.legal h2{font-size:1.4rem;text-transform:uppercase;margin:34px 0 12px;color:var(--charcoal);}
.legal h3{font-size:1.1rem;margin:24px 0 8px;font-family:var(--display);font-weight:600;}
/* Body copy on light backgrounds is muted grey everywhere else on the site.
   These pages were the last ones still on near-black. */
.legal p{color:var(--muted);margin-bottom:14px;}
.legal ul{list-style:disc;padding-left:22px;margin:0 0 16px;}
.legal li{margin-bottom:7px;color:var(--muted);}
.legal__intro{background:var(--cream);border-left:4px solid var(--wood);padding:22px 26px;border-radius:2px;margin-bottom:30px;}
.legal__intro p{color:var(--muted);margin:0;}

/* ---- 404 ---- */
.err404{text-align:center;max-width:620px;margin:0 auto;}
.err404__code{font-family:var(--display);font-weight:700;font-size:clamp(5rem,14vw,9rem);line-height:1;color:var(--beige);}
.err404__title{font-size:clamp(1.6rem,3vw,2.4rem);text-transform:uppercase;margin:6px 0 16px;}
.err404 p{color:var(--muted);margin-bottom:26px;}

/* ---- Inner pages responsive ---- */
@media (max-width:1024px){
  .gallery-grid{grid-template-columns:repeat(2,1fr);}
  .contact-grid{grid-template-columns:1fr;gap:40px;}
  .about-story,.about-split{grid-template-columns:1fr;gap:36px;}
  .about-split--flip .about-split__media{order:0;}
  .svcrow{grid-template-columns:1fr;gap:32px;padding:56px 0;}
  .svcrow--flip .svcrow__media{order:0;}
  .values-grid{gap:20px;}
}
@media (max-width:760px){
  .svcrow{padding:44px 0;}
  .svcrow__media img{min-height:260px;}
  .svcrow__num{width:60px;height:60px;font-size:2.4rem;top:-14px;left:-8px;}
  .guidance{padding:34px 26px;flex-direction:column;align-items:flex-start;gap:22px;}
  .gallery-grid{grid-template-columns:1fr;}
  .gitem{aspect-ratio:16/10;}
  .gitem__cap{opacity:1;transform:none;}
  .values-grid{grid-template-columns:1fr;}
  .formcard{padding:26px 22px 30px;}
  .field__row{grid-template-columns:1fr;gap:0;}
  .contact-info__email{font-size:1rem;}
  .lightbox__nav{width:42px;height:54px;font-size:1.6rem;}
  .about-story__media img,.about-split__media img{min-height:280px;}
}

/* =========================================================
   ESTIMATE CALCULATOR
   The rate card lives on the server, so this page only ever
   renders labels and whatever range the server sends back.
========================================================= */
.calc{max-width:1080px;margin:0 auto;}

.calc__tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:26px;}
.calc__tab{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:.95rem;
  padding:12px 26px;border:2px solid var(--line);background:#fff;color:var(--charcoal);border-radius:2px;cursor:pointer;transition:all .2s ease;}
.calc__tab:hover{border-color:var(--brown);color:var(--brown);}
.calc__tab.is-active{background:var(--brown);border-color:var(--brown);color:#fff;}

.calc__grid{display:grid;grid-template-columns:1.25fr .75fr;gap:28px;align-items:start;}

.calc__form{background:#fff;border:1px solid var(--line);border-radius:4px;padding:32px 32px 24px;box-shadow:0 18px 50px rgba(28,29,31,.06);}
.calc__panel{display:none;}
.calc__panel.is-active{display:block;}

.calc__addon{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 0;border-top:1px solid var(--line);}
.calc__check{display:flex;align-items:center;gap:10px;margin:0;cursor:pointer;
  font-family:var(--body);font-weight:400;font-size:.95rem;color:var(--muted);text-transform:none;letter-spacing:0;}
.calc__check input{width:auto;margin:0;}
.calc__addon input[type="number"]{width:88px;font-family:var(--body);font-size:1rem;color:var(--ink);background:#fff;
  border:1.5px solid var(--line);border-radius:2px;padding:9px 11px;}
.calc__addon input[type="number"]:focus{outline:none;border-color:var(--brown);}
.calc__addon-unit{font-size:.9rem;color:var(--muted);}

.calc__result{position:sticky;top:96px;}
.calc__result-inner{background:var(--charcoal);color:#fff;border-radius:4px;padding:30px 28px 26px;}
.calc__result-label{margin:0 0 8px;font-family:var(--display);font-weight:600;text-transform:uppercase;
  letter-spacing:.18em;font-size:.72rem;color:#B7B4AE;}
.calc__range{margin:0 0 20px;font-family:var(--display);font-weight:700;font-size:clamp(1.9rem,4vw,2.6rem);
  line-height:1.05;letter-spacing:-.01em;color:#fff;}
.calc__range.is-busy{opacity:.45;}

.calc__summary{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:9px;}
.calc__summary li{display:flex;justify-content:space-between;gap:14px;font-size:.86rem;line-height:1.45;
  padding-bottom:9px;border-bottom:1px solid rgba(255,255,255,.12);}
.calc__summary li:last-child{border-bottom:0;padding-bottom:0;}
.calc__summary span:first-child{color:#B7B4AE;flex-shrink:0;}
.calc__summary span:last-child{color:#fff;text-align:right;}

.calc__cta{margin-bottom:14px;}

.calc__mini{display:flex;flex-wrap:wrap;gap:8px 16px;}
.calc__mini-btn{background:none;border:0;padding:0;cursor:pointer;font-family:var(--body);font-size:.82rem;
  color:#E8C9A6;text-decoration:underline;text-underline-offset:3px;}
.calc__mini-btn:hover{color:#fff;}

.calc__email{margin-top:16px;}
.calc__email label{display:block;font-family:var(--display);font-weight:600;text-transform:uppercase;
  letter-spacing:.1em;font-size:.72rem;color:#B7B4AE;margin-bottom:7px;}
.calc__email-row{display:flex;gap:8px;}
.calc__email-row input{flex:1;min-width:0;font-family:var(--body);font-size:.95rem;color:var(--ink);
  background:#fff;border:1.5px solid transparent;border-radius:2px;padding:11px 13px;}
.calc__email-row input:focus{outline:none;border-color:var(--wood);}
.calc__email-row .btn{padding-left:20px;padding-right:20px;}

.calc__note{margin:12px 0 0;font-size:.82rem;line-height:1.5;color:#E8C9A6;min-height:1px;}

.calc__disclaimer{margin:26px 0 0;font-size:.85rem;line-height:1.65;color:var(--muted);max-width:78ch;}

@media (max-width:900px){
  .calc__grid{grid-template-columns:1fr;}
  .calc__result{position:static;}
  .calc__form{padding:24px 22px 18px;}
}

@media (max-width:520px){
  .calc__tab{flex:1;text-align:center;padding:11px 12px;font-size:.86rem;}
  .calc__addon{align-items:flex-start;}
}

/* People do print these and take them to a meeting, so give them
   the numbers and the selections without the site furniture. */
@media print{
  .topbar,.masthead,.mobilenav,.navscrim,.stickybar,.to-top,.sitefoot,.ctaband,.pagehero,
  .calc__tabs,.calc__mini,.calc__email,.calc__cta,.calc__note{display:none !important;}
  .calc__panel:not(.is-active){display:none !important;}
  .section{padding:0 !important;}
  .calc__grid{grid-template-columns:1fr !important;}
  .calc__form{border:1px solid #ccc;box-shadow:none;page-break-inside:avoid;}
  .calc__result-inner{background:#fff !important;color:#000 !important;border:2px solid #000;}
  .calc__result-label,.calc__summary span:first-child{color:#444 !important;}
  .calc__range,.calc__summary span:last-child{color:#000 !important;}
  .calc__summary li{border-bottom:1px solid #ddd !important;}
}

/* Estimate carried over from the calculator, shown above the enquiry form. */
.estimate-carry{background:var(--cream);border-left:4px solid var(--wood);border-radius:2px;padding:20px 22px;margin-bottom:26px;}
.estimate-carry__label{margin:0 0 4px;font-family:var(--display);font-weight:600;text-transform:uppercase;
  letter-spacing:.14em;font-size:.72rem;color:var(--brown);}
.estimate-carry__range{margin:0 0 14px;font-family:var(--display);font-weight:700;font-size:1.7rem;color:var(--charcoal);line-height:1.1;}
.estimate-carry__list{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:6px;}
.estimate-carry__list li{display:flex;justify-content:space-between;gap:14px;font-size:.85rem;line-height:1.45;}
.estimate-carry__list span:first-child{color:var(--muted);flex-shrink:0;}
.estimate-carry__list span:last-child{color:var(--ink);text-align:right;}
.estimate-carry__note{margin:0;font-size:.82rem;line-height:1.55;color:var(--muted);}

/* Sits under the stairs row, so nobody counts staircases instead of steps. */
.calc__addon-hint{flex-basis:100%;margin:2px 0 0;font-size:.8rem;line-height:1.5;color:var(--muted);}