/* Mast Innovations — home page. Every value traces to design-system.md. */

:root{
  --parchment:#F2EDE3; --parchment-raised:#F8F4EB; --parchment-deep:#E8E1D1;
  --ink:#1B1916; --ink-raised:#26221E;
  --body:#555047; --body-inverse:#CFC7B8;
  --muted:#857B69; --muted-inverse:#A79D8B;
  --line:#DAD2C2; --line-inverse:#3A342C;
  --copper:#A96F44; --copper-deep:#8A5836; --copper-inverse:#C08A5E;
  --slate:#3E4A59;
  --dur-hover:180ms; --dur-reveal-s:450ms; --dur-reveal:650ms; --dur-reveal-l:900ms;
  --ease-out:cubic-bezier(0.22,1,0.36,1); --ease-inout:cubic-bezier(0.65,0,0.35,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--parchment);color:var(--body);overflow-x:clip;
  font:400 16px/1.65 "Instrument Sans",Arial,sans-serif}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
.container{max-width:1200px;margin:0 auto;padding:0 32px}
section{padding:128px 0}

.display,.h2,.h3{font-family:"Fraunces",Georgia,serif;font-optical-sizing:auto;color:var(--ink);font-weight:400}
.display{font-size:clamp(44px,3.8vw + 29px,84px);line-height:1.02;letter-spacing:-0.015em}
.h2{font-size:clamp(34px,1.9vw + 27px,54px);line-height:1.08;letter-spacing:-0.01em}
.h3{font-size:32px;line-height:1.2;font-weight:450}
.lead{font-size:20px;line-height:1.55}
.small{font-size:13px;line-height:1.4;letter-spacing:0.14em;text-transform:uppercase;font-weight:600}
.measure{max-width:45ch}
.measure-head{max-width:18ch}
.eyebrow{color:var(--muted);display:block}
.eyebrow-inverse{color:var(--muted-inverse);display:block}

/* ---------- triple-CTA utility bar ---------- */
.utility{background:var(--ink);height:44px;display:flex;align-items:center}
.utility .container{display:flex;justify-content:flex-end;align-items:center;width:100%}
.utility a{font-size:13px;letter-spacing:0.14em;text-transform:uppercase;font-weight:600;
  text-decoration:none;padding:0 24px;color:#F2EDE3;border-left:1px solid var(--line-inverse);
  transition:color var(--dur-hover) var(--ease-out)}
.utility a:first-child{border-left:none}
.utility a.accent{color:var(--copper-inverse)}
.utility a:hover{color:#F8F4EB}

/* ---------- nav ---------- */
nav{background:var(--parchment);border-bottom:1px solid var(--line);position:relative}
nav .container{height:72px;display:flex;align-items:center;justify-content:space-between}
nav .brand img{height:40px;width:auto}
.navlinks{display:flex;gap:32px}
.navlinks a{color:var(--ink);text-decoration:none;font-weight:500;font-size:16px;
  transition:color var(--dur-hover) var(--ease-out)}
.navlinks a:hover{text-decoration:underline;text-underline-offset:4px;
  text-decoration-thickness:1px;text-decoration-color:var(--copper)}
.burger{display:none;flex-direction:column;gap:5px;width:24px;background:none;border:none;cursor:pointer;padding:0}
.burger span{height:2px;background:var(--ink);border-radius:1px;display:block}
.mobile-nav{display:none;background:var(--parchment);border-bottom:1px solid var(--line);
  padding:16px 20px 24px;flex-direction:column;gap:16px}
.mobile-nav a{color:var(--ink);text-decoration:none;font-weight:500;font-size:16px}
body.nav-open .mobile-nav{display:flex}

/* ---------- hero ---------- */
.hero{position:relative;height:min(86vh,800px);min-height:560px;display:flex;align-items:flex-end;overflow:hidden}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 58%}
.hero .grade{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(27,25,22,0.18) 0%,rgba(27,25,22,0) 28%)}
.hero .container{position:relative;padding-top:96px;padding-bottom:96px;width:100%}
/* Text-anchored ink scrim: alpha 0 at 220px above the first text line,
   0.44 at 100px above, 0.88 at the first line, held to the photo's bottom edge. */
.hero .container::before{content:"";position:absolute;left:50%;transform:translateX(-50%);
  width:100vw;top:-124px;bottom:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(27,25,22,0) 0px,rgba(27,25,22,0.44) 120px,rgba(27,25,22,0.88) 220px,rgba(27,25,22,0.88) 100%)}
.hero .container>*{position:relative}
.hero .small{margin-bottom:16px}
.hero h1{color:#F2EDE3;max-width:12ch}
.hero .lead{color:var(--body-inverse);margin-top:24px;max-width:45ch}
.hero .actions{margin-top:32px;display:flex;gap:16px;flex-wrap:wrap}

/* ---------- buttons ---------- */
.btn{display:inline-block;font:600 16px/1 "Instrument Sans",Arial,sans-serif;letter-spacing:0.01em;
  padding:16px 32px;border-radius:2px;text-decoration:none;cursor:pointer;border:none;
  transition:background var(--dur-hover) var(--ease-out),border-color var(--dur-hover) var(--ease-out),color var(--dur-hover) var(--ease-out)}
.btn-primary{background:var(--copper);color:#F8F4EB}
.btn-primary:hover{background:var(--copper-deep)}
.btn-secondary{background:transparent;border:1px solid rgba(27,25,22,0.35);color:var(--ink);padding:15px 31px}
.btn-secondary:hover{border-color:var(--ink)}
.btn-secondary.on-ink{border-color:rgba(242,237,227,0.4);color:#F2EDE3}
.btn-secondary.on-ink:hover{border-color:#F2EDE3}

/* ---------- section heads ---------- */
.sect-head{margin-bottom:64px}
.sect-head .small{display:block;margin-bottom:16px}
.sect-head .h2{margin-bottom:24px}
.tick-eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.tick-eyebrow i{width:20px;height:2px;background:var(--copper)}
.tick-eyebrow .small{color:var(--muted);margin:0}

/* ---------- six reasons ---------- */
.reasons{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{background:var(--parchment-raised);border:1px solid var(--line);border-radius:4px;padding:40px 36px}
.card .h3{margin-bottom:16px}

/* ---------- journey ---------- */
.journey{background:var(--parchment-deep)}
.journey-grid{display:grid;grid-template-columns:5fr 7fr;gap:24px;align-items:start}
.journey-intro{position:sticky;top:48px;padding-right:24px}
.journey-intro .small{display:block;margin-bottom:16px;color:var(--muted)}
.journey-intro .h2{margin-bottom:24px;max-width:14ch}
.journey-intro .lead{max-width:38ch}
.steps{list-style:none}
.step{display:grid;grid-template-columns:96px 1fr;gap:24px;padding:32px 0;border-top:1px solid var(--line)}
.step:last-child{border-bottom:1px solid var(--line)}
.stepnum{color:var(--muted);padding-top:8px}
.step .h3{margin-bottom:8px}
.step p{max-width:45ch}

/* ---------- stat band ---------- */
.stats{background:var(--ink);padding:96px 0}
.stats .rule{border-top:1px solid var(--line-inverse);margin-bottom:48px}
.statgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.stat .num{font-family:"Fraunces",Georgia,serif;font-optical-sizing:auto;
  font-size:clamp(34px,1.9vw + 27px,54px);line-height:1.08;color:var(--copper-inverse);font-weight:400}
.stat .lab{margin-top:8px;color:var(--muted-inverse)}

/* ---------- sketch to reality ---------- */
/* Default layout: the static three-frame strip. It is what no-JS, reduced
   motion and screens under 641px see, and the resting state in renders. */
.sketch{background:var(--parchment);padding:128px 0}
.sketch .s-eyebrow{display:block;margin-bottom:16px;color:var(--muted)}
.sketch .h2{margin-bottom:24px;max-width:18ch}
.sketch .s-lead{max-width:45ch}
.sketch .s-captions{display:none}
.sketch .sketch-stage{max-width:1200px;margin:64px auto 0;padding:0 32px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.s-frame{margin:0}
.s-frame img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:4px}
.s-frame figcaption{margin-top:16px}
.s-frame figcaption .small{display:block;color:var(--ink)}
.s-frame figcaption .small em{font-style:normal;color:var(--muted)}
.s-frame figcaption p{margin-top:8px;max-width:45ch}
.sketch .grade{display:none}

/* Scrub layout: JS adds .is-scrub (GSAP present, motion allowed, width over
   640px), pins the section and crossfades the frames 1:1 with scroll. */
.sketch.is-scrub{padding:0;background:var(--ink)}
.sketch.is-scrub .sketch-pin{position:relative;height:100vh;overflow:hidden}
.sketch.is-scrub .sketch-stage{position:absolute;inset:0;margin:0;padding:0;max-width:none;display:block}
.sketch.is-scrub .s-frame{position:absolute;inset:0}
.sketch.is-scrub .s-frame img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:50% 62%;border-radius:0}
.sketch.is-scrub .f-cgi,.sketch.is-scrub .f-photo{opacity:0}
.sketch.is-scrub .s-frame figcaption{display:none}
.sketch.is-scrub .grade{display:block;position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(27,25,22,0.18) 0%,rgba(27,25,22,0) 28%)}
.sketch.is-scrub .sketch-copy{position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding-top:96px;padding-bottom:96px}
/* Text-anchored ink scrim, same ramp as the hero: alpha 0 at 220px above the
   first text line, 0.44 at 100px above, 0.88 at the line, held to the bottom. */
.sketch.is-scrub .sketch-copy::before{content:"";position:absolute;left:50%;transform:translateX(-50%);
  width:100vw;top:-124px;bottom:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(27,25,22,0) 0px,rgba(27,25,22,0.44) 120px,rgba(27,25,22,0.88) 220px,rgba(27,25,22,0.88) 100%)}
.sketch.is-scrub .sketch-copy>*{position:relative}
.sketch.is-scrub .s-eyebrow{color:var(--muted-inverse)}
.sketch.is-scrub .h2{color:#F2EDE3;margin-bottom:0}
.sketch.is-scrub .s-lead{display:none}
.sketch.is-scrub .s-captions{display:block;position:relative;margin-top:24px;min-height:80px}
.sketch.is-scrub .s-cap{position:absolute;top:0;left:0;right:0}
.sketch.is-scrub .s-cap.c2,.sketch.is-scrub .s-cap.c3{opacity:0}
.sketch.is-scrub .s-cap .small{display:block;color:var(--muted-inverse)}
.sketch.is-scrub .s-cap .small em{font-style:normal;color:var(--copper-inverse)}
.sketch.is-scrub .s-cap p{margin-top:8px;color:var(--body-inverse);font-size:20px;line-height:1.55;max-width:45ch}

/* ---------- bathrooms + kitchens ---------- */
.duo-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.tile .frame{border-radius:4px;overflow:hidden;aspect-ratio:4/5}
.tile .frame img{width:100%;height:100%;object-fit:cover;
  transition:transform var(--dur-hover) var(--ease-out)}
.tile:hover .frame img{transform:scale(1.04)}
.tile .h3{margin-top:16px}
.tile p{margin-top:8px;max-width:45ch}
.tile .caption{margin-top:16px}
.cap-name{color:var(--ink)}
.cap-place{color:var(--muted)}

/* ---------- testimonials ---------- */
.reviews{background:var(--parchment-deep)}
.tcards{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.tcard{background:var(--parchment-raised);border:1px solid var(--line);border-radius:4px;padding:40px 36px}
.tcard .q{font-family:"Fraunces",Georgia,serif;font-size:54px;line-height:0.6;color:var(--copper);
  display:block;height:32px}
.tcard .quote{font-size:20px;line-height:1.55;color:var(--ink);margin-top:16px}
.tcard .attr{margin-top:24px;color:var(--ink)}
.tcard .attr span{color:var(--muted)}
.minis{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px}
.mini{border-top:1px solid var(--line);padding-top:24px}
.mini .attr{margin-top:16px;color:var(--ink)}
.mini .attr span{color:var(--muted)}
.more{margin-top:64px}

/* ---------- CTA band ---------- */
.cta{background:var(--ink);padding:128px 0}
.cta .small{display:block;margin-bottom:16px}
.cta .h2{color:#F2EDE3;max-width:16ch}
.cta .lead{color:var(--body-inverse);margin-top:24px;max-width:45ch}
.cta .actions{margin-top:32px;display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.cta .phone{color:var(--body-inverse);font-size:16px}
.cta .phone a{color:var(--body-inverse);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}

/* ---------- footer ---------- */
footer{background:var(--ink);border-top:1px solid var(--line-inverse);padding:48px 0}
footer .container{display:flex;justify-content:space-between;align-items:center;gap:48px;flex-wrap:wrap}
footer img{height:34px;width:auto}
.foot-text p{font-size:13px;line-height:1.6;color:var(--muted-inverse);letter-spacing:0.01em}
.foot-text a{color:var(--muted-inverse)}
.foot-text .finance{margin:8px 0}

/* ---------- single layout breakpoint ---------- */
@media (max-width:900px){
  section{padding:80px 0}
  .container{padding:0 20px}
  .utility a{padding:0 8px;letter-spacing:0.03em}
  .utility .container{justify-content:center}
  .utility a.hide-m{display:none}
  .navlinks{display:none}
  .burger{display:flex}
  .hero{height:min(78vh,680px);min-height:520px}
  .sketch .sketch-stage{margin-top:48px;padding:0 20px}
  .reasons{grid-template-columns:1fr}
  .journey-grid{grid-template-columns:1fr}
  .journey-intro{position:static;padding-right:0;margin-bottom:48px}
  .statgrid{grid-template-columns:repeat(2,1fr);row-gap:48px}
  .duo-grid{grid-template-columns:1fr}
  .tcards{grid-template-columns:1fr}
  .minis{grid-template-columns:1fr}
  .step{grid-template-columns:1fr;gap:8px;padding:24px 0}
  .stepnum{padding-top:0}
}
@media (max-width:640px){
  .utility a.accent{display:none}
  .utility a{border-left:none}
  .sketch .sketch-stage{grid-template-columns:1fr;gap:48px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:0.01ms !important;animation:none !important}
}

/* Footer finance line - wording is regulatory, sourced verbatim from the live site.
   Quiet, but present on every page. */
.finance-line{margin:16px auto 0;max-width:72ch;color:var(--muted-inverse);
  font-size:12px;letter-spacing:0.02em;text-transform:none;font-weight:400;line-height:1.5}

/* Full wording lockup top left (Paul, 23 Aug) - replaces the lone mark, like the
   previous site. Sized so the tagline reads on desktop; slightly smaller on mobile. */
nav .container{height:122px}
nav .brand img{height:94px}
@media (max-width:640px){nav .container{height:92px}nav .brand img{height:62px}}

/* Contact + map block (mirrors the live site's layout in the house identity). */
.reach{background:var(--parchment-deep)}
.reach-grid{display:grid;grid-template-columns:4fr 8fr;gap:24px;align-items:stretch}
@media (max-width:900px){.reach-grid{grid-template-columns:1fr}}
.reach-item + .reach-item{margin-top:40px}
.reach-item .h3{margin-bottom:8px}
.reach-item p{color:var(--body);max-width:40ch}
.reach-item a{color:var(--ink);font-weight:600}
.reach-map iframe{width:100%;height:100%;min-height:420px;border:0;border-radius:4px;display:block}
#areamap{width:100%;height:100%;min-height:440px;border-radius:4px;background:var(--parchment-deep)}
/* mute the standard OSM palette toward the identity */
#areamap .leaflet-tile-pane{filter:grayscale(0.35) saturate(0.65) contrast(0.97)}
/* .leaflet-tooltip prefix beats leaflet.css's own tooltip skin regardless of
   stylesheet order - the plain class alone lost that cascade fight. */
.leaflet-tooltip.areamap-label{background:var(--ink);color:var(--parchment);border:none;
  border-radius:3px;box-shadow:none;font-family:"Instrument Sans",sans-serif;font-size:12px;
  font-weight:600;padding:3px 8px;letter-spacing:0.03em}
.leaflet-tooltip.areamap-label::before{display:none}
/* town tier labels: bare haloed text, no box */
.leaflet-tooltip.areamap-town{background:transparent;border:none;box-shadow:none;padding:0 2px;
  font-family:"Instrument Sans",sans-serif;font-size:11px;font-weight:500;
  color:#4a453c;letter-spacing:0.02em;
  text-shadow:0 1px 3px rgba(242,237,227,0.95),0 -1px 3px rgba(242,237,227,0.95),1px 0 3px rgba(242,237,227,0.95),-1px 0 3px rgba(242,237,227,0.95)}
.leaflet-tooltip.areamap-town::before{display:none}
.leaflet-tooltip.areamap-town-major{font-size:13px;font-weight:700;color:#1B1916}

/* Footer, restructured to match the live site: lockup + CTA row, links, legal. */
.foot-top{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.foot-brand img{height:134px;width:auto;display:block}
.foot-right{display:flex;align-items:center;gap:24px}
.foot-social{color:var(--parchment);display:block}
.foot-social:hover{color:var(--copper)}
.foot-links{display:flex;gap:28px;flex-wrap:wrap;margin:40px 0 32px;padding-bottom:32px;border-bottom:1px solid var(--line-inverse)}
.foot-links a{color:var(--body-inverse);text-decoration:none;font-size:15px}
.foot-links a:hover{color:var(--parchment)}
.foot-legal{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:16px}

/* The rebuilt footer stacks its rows; the old two-column footer flex no longer applies. */
footer .container{display:block}
.foot-links{border-bottom:none;padding-bottom:0;margin:40px 0 0}
.foot-text{border-top:1px solid var(--line-inverse);margin-top:32px;padding-top:28px}

footer .foot-text{text-align:left}
footer .finance-line{margin:0 0 16px;max-width:72ch}

/* The film hands straight to the consultation ask - no parchment shelf between the
   final beat's melt and the CTA. */
.film-section{padding-bottom:0}

/* Customer film blocks: poster + native controls, nothing autoplays. The button under
   each player is the "link below" the films ask visitors to click. */
.vid-feature{background:var(--parchment-deep)}
.vid-feature .sect-head{margin-bottom:40px}
.vid-card{margin:0}
.vid-card video{width:100%;display:block;border-radius:4px;background:var(--ink)}
.vid-card figcaption{margin-top:16px}
.vid-card figcaption .small{display:block;color:var(--muted)}
.vid-card figcaption .small em{font-style:normal;color:var(--copper)}
.vid-card figcaption p{margin-top:8px;color:var(--body);max-width:52ch}
.vid-cta{margin-top:24px}