/* =================================================================
   MATSON SIGNATURE BUILDERS — Design System (Dark)
   Luxury custom home builder · Surprise & the West Valley, AZ
   ================================================================= */

:root{
  /* Brand — realistic, warm metallic gold (matched to mra.marketplace-revival.com) */
  --gold:#C09048;            /* base gold — borders, accents, outlines */
  --gold-bright:#F8E8B5;     /* champagne highlight */
  --gold-deep:#E9C877;       /* readable warm gold accent on dark (eyebrows, links) */
  --gold-soft:#2A2113;       /* dark gold tint (chips/notes) */
  /* polished-metal gold gradients + glow — realistic antique sheen */
  --gold-metal:linear-gradient(100deg,#906020 0%,#C09048 30%,#F0D088 52%,#C09048 74%,#986828 100%);
  --gold-metal-soft:linear-gradient(100deg,#9C6F2C 0%,#C69447 45%,#EBCB7B 68%,#B07F34 100%);
  --gold-glow:0 3px 22px rgba(192,144,72,.5);

  /* Surfaces (dark) */
  --ink:#0A0A0C;             /* deepest section / hero overlay */
  --charcoal:#1A1A1F;        /* raised band (stats) */
  --charcoal-2:#202026;
  --bg:#121216;              /* page background */
  --bg-2:#0C0C0F;            /* darker alternating band */
  --surface:#1A1B20;         /* cards, inputs, raised rows */
  --surface-2:#212229;       /* hover surface */

  /* Text */
  --heading:#FBFAF7;
  --text:#E7E4DD;
  --text-soft:#C2BFB6;
  --text-invert:#EDEAE3;
  --text-invert-soft:#CAC6BC;
  --line:#2C2C34;
  --line-dark:#2C2C30;

  /* legacy aliases (kept so components resolve) */
  --cream:var(--bg);
  --cream-2:var(--bg-2);
  --paper:var(--surface);

  --maxw:1200px;
  --gutter:clamp(20px,5vw,56px);
  --radius:4px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3), 0 6px 18px rgba(0,0,0,.35);
  --shadow-md:0 10px 30px rgba(0,0,0,.45), 0 30px 70px rgba(0,0,0,.5);

  --font-display:"Cormorant Garamond", "Times New Roman", serif;
  --font-script:"Great Vibes", "Snell Roundhand", cursive;   /* hero signature line */
  --font-ui:"Jost", "Helvetica Neue", Arial, sans-serif;
  --font-body:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font-body);font-size:17px;line-height:1.7;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
::selection{background:var(--gold);color:var(--ink)}

/* ---------- Typography ---------- */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.08;
  letter-spacing:.005em;margin:0 0 .4em;color:var(--heading)}
h1{font-size:clamp(2.6rem,6vw,4.6rem);font-weight:500}
h2{font-size:clamp(2rem,4.2vw,3.2rem);font-weight:500}
h3{font-size:clamp(1.4rem,2.4vw,1.9rem)}
h4{font-size:1.2rem}
p{margin:0 0 1.1em}
.lead{font-size:clamp(1.1rem,1.7vw,1.32rem);line-height:1.65;color:var(--text-soft)}

.eyebrow{font-family:var(--font-ui);font-weight:500;font-size:.74rem;
  letter-spacing:.34em;text-transform:uppercase;color:var(--gold-deep);
  display:inline-flex;align-items:center;gap:.8em;margin:0 0 1.1rem}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--gold);display:inline-block}
.eyebrow.center{justify-content:center}
.eyebrow.center::after{content:"";width:34px;height:1px;background:var(--gold);display:inline-block}
.on-dark .eyebrow, .eyebrow.on-dark{color:var(--gold-bright)}

/* ---------- Layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}
.wrap-wide{max-width:1440px;margin:0 auto;padding-inline:var(--gutter)}
section{position:relative}
.section{padding-block:clamp(64px,9vw,128px)}
.section-sm{padding-block:clamp(48px,6vw,80px)}
.dark{background:var(--ink);color:var(--text-invert)}
.dark h1,.dark h2,.dark h3,.dark h4{color:#fff}
.dark .lead{color:var(--text-invert-soft)}
.charcoal{background:var(--charcoal);color:var(--text-invert)}
.charcoal h1,.charcoal h2,.charcoal h3{color:#fff}
.cream-2{background:var(--bg-2)}
.center{text-align:center}
.mx-auto{margin-inline:auto}
.measure{max-width:64ch}
.measure-sm{max-width:48ch}

.grid{display:grid;gap:clamp(20px,2.4vw,34px)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g-3,.g-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.g-2,.g-3,.g-4{grid-template-columns:1fr}}

.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,80px);align-items:center}
.split.flip>*:first-child{order:2}
@media(max-width:860px){.split{grid-template-columns:1fr;gap:36px}.split.flip>*:first-child{order:0}}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:var(--font-ui);font-weight:500;font-size:.82rem;letter-spacing:.16em;
  text-transform:uppercase;padding:1.05em 2.1em;border:1px solid transparent;
  border-radius:var(--radius);cursor:pointer;transition:.35s var(--ease);white-space:nowrap}
.btn-gold{background-color:var(--gold);background-image:var(--gold-metal-soft);color:#241B07;
  border-color:rgba(255,242,205,.55);
  box-shadow:0 4px 16px rgba(192,144,72,.32),inset 0 1px 0 rgba(255,255,255,.5)}
.btn-gold:hover{background-image:var(--gold-metal);border-color:rgba(255,248,220,.85);
  box-shadow:0 8px 28px rgba(240,208,136,.6),inset 0 1px 0 rgba(255,255,255,.75);transform:translateY(-2px)}
.btn-outline{background:transparent;color:var(--text);border-color:rgba(255,255,255,.26)}
.btn-outline:hover{border-color:var(--gold);background:var(--gold);color:var(--ink)}
.btn-ghost-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.btn-ghost-light:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn-lg{padding:1.2em 2.6em;font-size:.86rem}
.btn-row{display:flex;flex-wrap:wrap;gap:14px}
.btn-row.center{justify-content:center}

.link-gold{font-family:var(--font-ui);font-weight:500;font-size:.8rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-deep);display:inline-flex;align-items:center;gap:.6em;
  transition:.3s var(--ease)}
.link-gold::after{content:"\2192";transition:.3s var(--ease)}
.link-gold:hover{color:var(--gold-bright)}.link-gold:hover::after{transform:translateX(5px)}
.on-dark .link-gold,.link-gold.on-dark{color:var(--gold-bright)}
.on-dark .link-gold:hover{color:#fff}

/* ---------- Header ---------- */
.site-header{position:fixed;top:0;left:0;right:0;z-index:100;
  transition:.4s var(--ease);border-bottom:1px solid transparent}
.site-header .bar{display:flex;align-items:center;justify-content:space-between;
  gap:24px;height:88px;transition:.4s var(--ease)}
.site-header.scrolled{background:rgba(10,10,12,.92);backdrop-filter:blur(12px);
  border-bottom-color:var(--line-dark)}
.site-header.scrolled .bar{height:70px}
.brand-logo{height:46px;width:auto;transition:.4s var(--ease)}
.site-header.scrolled .brand-logo{height:40px}
.nav{display:flex;align-items:center;gap:clamp(18px,2vw,34px)}
.nav a{font-family:var(--font-ui);font-weight:400;font-size:.82rem;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(255,255,255,.86);padding:.4em 0;position:relative;transition:.3s}
.nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--gold);transition:.3s var(--ease)}
.nav a:hover,.nav a.active{color:#fff}.nav a:hover::after,.nav a.active::after{width:100%}
.has-drop{position:relative}
.drop{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);
  min-width:260px;background:rgba(14,14,17,.98);backdrop-filter:blur(12px);
  border:1px solid var(--line-dark);border-top:2px solid var(--gold);
  padding:10px;opacity:0;visibility:hidden;transition:.28s var(--ease);
  display:grid;gap:1px;box-shadow:var(--shadow-md)}
.has-drop:hover .drop,.has-drop:focus-within .drop{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.drop a{padding:.7em 1em;font-size:.74rem;letter-spacing:.1em;color:rgba(255,255,255,.78);white-space:nowrap}
.drop a::after{display:none}
.drop a:hover{background:rgba(192,144,72,.16);color:var(--gold-bright)}
.header-cta{display:flex;align-items:center;gap:18px}
.header-phone{font-family:var(--font-ui);font-weight:500;letter-spacing:.06em;color:#fff;
  display:inline-flex;align-items:center;gap:.5em;font-size:.92rem}
.header-phone .lab{font-size:.6rem;letter-spacing:.2em;color:var(--gold-bright);display:block;line-height:1}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.nav-toggle span{width:26px;height:2px;background:#fff;transition:.3s}

@media(max-width:1100px){
  .header-phone{display:none}
}
@media(max-width:920px){
  .nav,.header-cta .btn{display:none}
  .nav-toggle{display:flex}
}

/* Mobile drawer */
.mobile-nav{position:fixed;inset:0;z-index:200;background:var(--ink);
  transform:translateX(100%);transition:.45s var(--ease);display:flex;flex-direction:column;
  padding:28px var(--gutter);overflow-y:auto}
.mobile-nav.open{transform:translateX(0)}
.mobile-nav .mclose{align-self:flex-end;background:none;border:0;color:#fff;font-size:2rem;cursor:pointer;line-height:1}
.mobile-nav a{font-family:var(--font-display);font-size:1.7rem;color:#fff;padding:.35em 0;
  border-bottom:1px solid var(--line-dark)}
.mobile-nav .sub a{font-family:var(--font-ui);font-size:.86rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-invert-soft);padding-left:16px}
.mobile-nav .mphone{margin-top:auto;padding-top:24px}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:92vh;display:flex;align-items:center;
  color:#fff;overflow:hidden;padding-top:88px}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover}
.hero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,8,10,.76) 0%,rgba(8,8,10,.62) 38%,rgba(8,8,10,.92) 100%)}
.hero-inner{position:relative;z-index:2;padding-block:clamp(40px,8vw,90px)}
.hero h1{color:#fff;max-width:16ch;text-shadow:0 2px 18px rgba(0,0,0,.55)}
.hero .lead{color:rgba(255,255,255,.94);max-width:52ch;text-shadow:0 1px 10px rgba(0,0,0,.55)}
.hero-meta{display:flex;flex-wrap:wrap;gap:14px 38px;margin-top:30px;
  font-family:var(--font-ui);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.8)}
.hero-meta span{display:inline-flex;align-items:center;gap:.6em}
.hero-meta span::before{content:"";width:7px;height:7px;background:var(--gold);transform:rotate(45deg)}

/* page hero (interior pages) */
.page-hero{position:relative;color:#fff;padding-top:148px;padding-bottom:clamp(56px,8vw,96px);overflow:hidden}
.page-hero-bg{position:absolute;inset:0;z-index:0}
.page-hero-bg img{width:100%;height:100%;object-fit:cover}
.page-hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,8,10,.8),rgba(8,8,10,.68))}
.page-hero.solid{background:linear-gradient(180deg,#17171C 0%,#0F0F13 100%);
  padding-top:160px;border-bottom:1px solid var(--line)}
.page-hero-inner{position:relative;z-index:2}
.page-hero h1{color:#fff;max-width:18ch}
.page-hero .lead{color:rgba(255,255,255,.84);max-width:60ch}
.crumbs{font-family:var(--font-ui);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.62);margin-bottom:22px;display:flex;flex-wrap:wrap;gap:.7em}
.crumbs a:hover{color:var(--gold-bright)}.crumbs span{color:var(--gold-bright)}

/* ---------- Cards ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;transition:.4s var(--ease);display:flex;flex-direction:column}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:var(--gold)}
.card .ph{position:relative;aspect-ratio:4/3;overflow:hidden}
.card .ph img{width:100%;height:100%;object-fit:cover;transition:.6s var(--ease)}
.card:hover .ph img{transform:scale(1.05)}
.card .body{padding:26px 26px 30px;display:flex;flex-direction:column;flex:1}
.card .body h3{margin-bottom:.3em}
.card .body p{color:var(--text-soft);font-size:.97rem;flex:1}
.card .num{font-family:var(--font-display);font-style:italic;color:var(--gold-deep);font-size:1.1rem}

/* service mini list */
.svc-tag{font-family:var(--font-ui);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-deep);margin-bottom:.7em}

/* feature stat band */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-dark);
  border:1px solid var(--line-dark)}
.stats .st{background:var(--ink);padding:clamp(28px,4vw,48px) 24px;text-align:center}
.stats .st .n{font-family:var(--font-display);font-size:clamp(2.4rem,5vw,3.6rem);line-height:1;
  background:var(--gold-metal);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.5))}
.stats .st .l{font-family:var(--font-ui);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-invert-soft);margin-top:.8em}
@media(max-width:720px){.stats{grid-template-columns:repeat(2,1fr)}}

/* ---------- Gallery ---------- */
.masonry{columns:3;column-gap:clamp(14px,1.6vw,22px)}
.masonry .mi{break-inside:avoid;margin-bottom:clamp(14px,1.6vw,22px);position:relative;overflow:hidden;border-radius:var(--radius)}
.masonry .mi img{width:100%;transition:.7s var(--ease)}
.masonry .mi::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(8,8,10,.6));opacity:0;transition:.4s}
.masonry .mi .cap{position:absolute;left:0;right:0;bottom:0;padding:18px;color:#fff;z-index:2;
  font-family:var(--font-ui);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  transform:translateY(8px);opacity:0;transition:.4s var(--ease)}
.masonry .mi:hover img{transform:scale(1.06)}
.masonry .mi:hover::after{opacity:1}
.masonry .mi:hover .cap{transform:translateY(0);opacity:1}
@media(max-width:900px){.masonry{columns:2}}
@media(max-width:560px){.masonry{columns:1}}
.filter-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:44px}
.filter-row button{font-family:var(--font-ui);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  padding:.7em 1.3em;border:1px solid var(--line);background:transparent;color:var(--text-soft);
  cursor:pointer;border-radius:99px;transition:.3s}
.filter-row button:hover{border-color:var(--gold);color:var(--heading)}
.filter-row button.active{background:var(--gold);color:var(--ink);border-color:var(--gold)}

/* ---------- Split image ---------- */
.media{position:relative;border-radius:var(--radius);overflow:hidden}
.media img{width:100%;aspect-ratio:4/5;object-fit:cover}
.media.wide img{aspect-ratio:4/3}
.media .badge{position:absolute;bottom:0;left:0;background:var(--ink);color:#fff;padding:18px 26px;
  font-family:var(--font-display);font-style:italic;font-size:1.15rem}
.media .badge b{color:var(--gold-bright);font-style:normal;font-weight:600}
.media-frame{position:relative}
.media-frame::before{content:"";position:absolute;inset:18px -18px -18px 18px;border:1px solid var(--gold);
  border-radius:var(--radius);z-index:-1}

/* ---------- Process steps ---------- */
.steps{display:grid;gap:1px;background:var(--line)}
.steps .step{background:var(--surface);padding:clamp(28px,4vw,46px);display:grid;
  grid-template-columns:auto 1fr;gap:28px;align-items:start}
.dark .steps{background:var(--line-dark)}.dark .steps .step{background:var(--ink)}
.steps .step .k{font-family:var(--font-display);font-size:2.4rem;color:var(--gold);line-height:1;min-width:2ch}
.steps .step h3{margin-bottom:.35em}
.steps .step p{margin:0;color:var(--text-soft)}
.dark .steps .step p{color:var(--text-invert-soft)}

/* ---------- Testimonials ---------- */
.quote{background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--gold);
  padding:clamp(28px,3.4vw,40px);display:flex;flex-direction:column}
.dark .quote{background:var(--charcoal);border-color:var(--line-dark);border-top-color:var(--gold)}
.quote .stars{letter-spacing:3px;margin-bottom:1rem;font-size:1.1rem;
  color:var(--gold);-webkit-text-fill-color:var(--gold);
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.28))}
.quote p{font-family:var(--font-display);font-size:1.32rem;line-height:1.5;color:var(--heading);flex:1}
.dark .quote p{color:#fff}
.quote .who{font-family:var(--font-ui);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-deep);margin-top:1.2rem}

/* ---------- CTA band ---------- */
.cta-band{position:relative;overflow:hidden;background:var(--ink);color:#fff;text-align:center}
.cta-band .wrap{position:relative;z-index:2}
.cta-band::before{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 0%,rgba(192,144,72,.22),transparent 60%)}
.cta-band h2{color:#fff}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.dark .faq{border-color:var(--line-dark)}
.faq details{border-bottom:1px solid var(--line);padding:6px 0}
.dark .faq details{border-color:var(--line-dark)}
.faq summary{list-style:none;cursor:pointer;padding:24px 44px 24px 0;position:relative;
  font-family:var(--font-display);font-size:clamp(1.2rem,2vw,1.5rem);color:var(--heading)}
.dark .faq summary{color:#fff}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);
  font-family:var(--font-ui);font-weight:300;font-size:1.7rem;color:var(--gold);transition:.3s}
.faq details[open] summary::after{content:"\2013"}
.faq .ans{padding:0 44px 26px 0;color:var(--text-soft)}
.dark .faq .ans{color:var(--text-invert-soft)}
.faq .ans p:last-child{margin-bottom:0}

/* ---------- Areas list ---------- */
.area-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
@media(max-width:900px){.area-grid{grid-template-columns:repeat(2,1fr)}}
.area-grid a{background:var(--surface);padding:22px 24px;display:flex;align-items:center;justify-content:space-between;
  font-family:var(--font-ui);letter-spacing:.06em;font-size:.92rem;color:var(--text);transition:.3s}
.area-grid a:hover{background:var(--gold);color:var(--ink)}
.area-grid a span{color:var(--gold);transition:.3s}.area-grid a:hover span{color:var(--ink);transform:translateX(4px)}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{font-family:var(--font-ui);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--line);padding:.6em 1.1em;border-radius:99px;color:var(--text-soft)}
.dark .chip{border-color:var(--line-dark);color:var(--text-invert-soft)}

/* trust row */
.trust{display:flex;flex-wrap:wrap;align-items:center;gap:18px 40px;justify-content:center;
  font-family:var(--font-ui);font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-soft)}
.trust b{color:var(--heading);font-weight:600}
.trust .dot{width:5px;height:5px;border-radius:50%;background:var(--gold)}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,70px)}
@media(max-width:860px){.contact-grid{grid-template-columns:1fr}}
.field{margin-bottom:18px}
.field label{display:block;font-family:var(--font-ui);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-soft);margin-bottom:.6em}
.field input,.field select,.field textarea{width:100%;padding:.95em 1.1em;border:1px solid var(--line);
  background:var(--bg-2);font-family:var(--font-body);font-size:1rem;color:var(--text);border-radius:var(--radius);
  transition:.3s}
.field input::placeholder,.field textarea::placeholder{color:var(--text-soft);opacity:.7}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(192,144,72,.18)}
.field textarea{min-height:140px;resize:vertical}
.field select option{background:var(--surface);color:var(--text)}
.info-line{display:flex;gap:18px;padding:22px 0;border-bottom:1px solid var(--line)}
.info-line .ic{width:46px;height:46px;flex:0 0 auto;border:1px solid var(--gold);border-radius:50%;
  display:grid;place-items:center;color:var(--gold-deep)}
.info-line .lab{font-family:var(--font-ui);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-soft)}
.info-line .val{font-size:1.12rem;color:var(--heading)}
.info-line a.val:hover{color:var(--gold-bright)}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink);color:var(--text-invert-soft);padding-top:clamp(56px,8vw,90px)}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px;
  padding-bottom:54px;border-bottom:1px solid var(--line-dark)}
@media(max-width:900px){.footer-top{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.footer-top{grid-template-columns:1fr}}
.footer-logo{height:96px;width:auto;margin-bottom:20px}
.footer-col h4{font-family:var(--font-ui);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;
  color:#fff;margin-bottom:1.4em;font-weight:500}
.footer-col a{display:block;padding:.4em 0;color:var(--text-invert-soft);font-size:.95rem;transition:.3s}
.footer-col a:hover{color:var(--gold-bright)}
.footer-col p{font-size:.95rem;line-height:1.7}
.social{display:flex;gap:12px;margin-top:18px}
.social a{width:40px;height:40px;border:1px solid var(--line-dark);border-radius:50%;display:grid;place-items:center;
  color:var(--text-invert-soft);transition:.3s}
.social a:hover{border-color:var(--gold);color:var(--gold-bright);transform:translateY(-2px)}
.footer-bottom{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;
  padding:28px 0;font-size:.8rem;color:var(--text-invert-soft)}
.footer-bottom .lic{font-family:var(--font-ui);letter-spacing:.08em}

/* ---------- Reveal animation ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:.9s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  *{scroll-behavior:auto !important}
}

/* utilities */
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.gold{color:var(--gold-deep)}
.divider{width:60px;height:2px;background:var(--gold-metal);border-radius:2px;margin:0 0 28px}
.divider.center{margin-inline:auto}
.pill-note{font-family:var(--font-ui);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-bright);background:var(--gold-soft);padding:.5em 1em;border-radius:99px;display:inline-block;
  border:1px solid rgba(192,144,72,.25)}
.two-col-text{columns:2;column-gap:48px}
@media(max-width:680px){.two-col-text{columns:1}}
.rule-top{border-top:1px solid var(--line);padding-top:40px}
.dark .rule-top{border-color:var(--line-dark)}

/* =================================================================
   SCROLL-BUILD HERO — desert lot builds into a Signature estate
   ================================================================= */
.build-hero{position:relative;background:var(--ink);color:#fff}
.build-hero.bh-active{height:460vh}
.bh-sticky{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;
  display:flex;align-items:center}
.build-hero.bh-active .bh-sticky{position:sticky;top:0}
.bh-canvas,.bh-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.bh-canvas{display:none}
.build-hero.bh-active .bh-canvas{display:block}
/* The cover photo is the first thing on screen. It shares z-index 0 with the
   canvas but sits later in the DOM, so it paints on top, then build-hero.js
   dissolves it away on the first scroll to hand off to the frame sequence.
   With JS off or reduced motion it simply stays — it is the static hero. */
.bh-cover{will-change:opacity}
.bh-shade{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(8,8,10,.72) 0%,rgba(8,8,10,.30) 42%,rgba(8,8,10,.84) 100%)}
.bh-stage{position:absolute;inset:0;z-index:2;display:flex;align-items:center;padding-top:88px}
.bh-stage .wrap{width:100%}
.bh-stage h1{color:#fff;max-width:16ch}
.bh-stage .lead{color:rgba(255,255,255,.86);max-width:52ch}
/* Hero headline: serif first line + gold script signature line.
   Both halves are blocks so the gap between them is set explicitly. Great Vibes
   carries very tall ascender loops (the O and S swashes reach well above cap
   height) and a deep g descender, so it needs its own line-height plus real
   breathing room above and below — at a tight line-height the loops collide
   with the serif line above. Sized in vw rather than em so the script can be
   tuned independently of the h1 across breakpoints. */
.bh-stage h1.hero-h1{max-width:none;line-height:1.04;margin:0 0 .34em}
.hero-h1 .hero-h1-a{display:block}
.hero-sig{
  display:block;font-family:var(--font-script);font-weight:400;
  font-size:clamp(2.5rem,7vw,6rem);
  line-height:1.16;                 /* room for loops above, g descender below */
  margin-top:.07em;
  padding:0 .1em .06em 0;           /* swash overshoots right, g descender below */
  background:var(--gold-metal);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  /* clipped text can't take text-shadow — drop-shadow gives it the dark halo */
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.9)) drop-shadow(0 6px 24px rgba(0,0,0,.65));
}
.bh-stage-2,.bh-stage-3{opacity:0;visibility:hidden}
.build-hero.bh-active .bh-stage{will-change:opacity,transform}
.bh-line{font-family:var(--font-display);font-weight:500;line-height:1.14;
  font-size:clamp(2rem,4.6vw,3.6rem);color:#fff;margin:0;max-width:20ch}
.bh-cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:3;
  display:none;flex-direction:column;align-items:center;gap:12px;
  font-family:var(--font-ui);font-size:.68rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--gold-bright);white-space:nowrap}
.build-hero.bh-active .bh-cue{display:flex}
.bh-cue-line{width:1px;height:44px;background:linear-gradient(180deg,transparent,var(--gold));
  animation:bhCue 2.2s var(--ease) infinite}
@keyframes bhCue{0%{transform:scaleY(.2);transform-origin:top;opacity:0}
  45%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);transform-origin:top;opacity:0}}
@media (prefers-reduced-motion:reduce){
  .build-hero.bh-active{height:auto}
  .build-hero.bh-active .bh-sticky{position:relative}
  .bh-cue{display:none!important}
}
/* Phones never activate the scrub (build-hero.js returns early ≤820px) —
   they keep the cover photo as a static hero. Portrait tablets above 820px
   still scrub, letterboxed to a full-width film strip (see letterboxT in
   build-hero.js); their stage-2 copy moves into the dark band above it. */
@media(orientation:portrait){
  .bh-stage-2{align-items:flex-start;padding-top:clamp(84px,14svh,130px)}
}

/* Faded photo background for content sections (matches page-hero treatment) */
.photo-bg{position:relative;overflow:hidden}
.photo-bg>.section-bg{position:absolute;inset:0;z-index:0}
.photo-bg>.section-bg img{width:100%;height:100%;object-fit:cover}
.photo-bg>.section-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,12,.55),rgba(10,10,12,.62) 45%,rgba(10,10,12,.78))}
.photo-bg>.wrap,.photo-bg>.wrap-wide{position:relative;z-index:2}

/* photo-bg: parallax depth + remove inner boxes, float text with a strong
   stacked-shadow halo so every word pops off the photo. */
.photo-bg>.section-bg img{transform:translate3d(0,0,0) scale(1.6);will-change:transform;transform-origin:center center}

/* reusable heavy dark halo behind floating text — near-solid backing so words
   really punch off the photo */
.photo-bg h2,.photo-bg .eyebrow,.photo-bg>.wrap .lead,
.photo-bg .grid h3,.photo-bg .grid p{
  text-shadow:0 0 6px rgba(0,0,0,1),0 1px 3px rgba(0,0,0,1),0 2px 14px rgba(0,0,0,.98),0 4px 30px rgba(0,0,0,.95),0 8px 60px rgba(0,0,0,.85),0 14px 90px rgba(0,0,0,.7);
}

/* How We Work: elegant dark-glass panels with a polished gold edge */
.photo-bg .steps{background:transparent;gap:clamp(14px,1.8vw,22px)}
.photo-bg .steps .step{
  position:relative;overflow:hidden;
  background:linear-gradient(150deg,rgba(30,25,17,.74),rgba(9,9,12,.66));
  border:1px solid rgba(214,177,90,.22);border-left:0;border-radius:16px;
  padding:clamp(26px,3.2vw,42px);
  backdrop-filter:blur(12px) saturate(1.12);-webkit-backdrop-filter:blur(12px) saturate(1.12);
  box-shadow:0 22px 60px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease);
}
.photo-bg .steps .step::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gold-metal)}
.photo-bg .steps .step:hover{transform:translateY(-4px);border-color:rgba(246,228,166,.5);
  box-shadow:0 30px 74px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.1)}
.photo-bg .steps .step h3{color:#FBFAF7}
.photo-bg .steps .step p{color:#D9D5CB}
.photo-bg .steps .step h3,.photo-bg .steps .step p{
  text-shadow:0 1px 3px rgba(0,0,0,.9),0 2px 16px rgba(0,0,0,.7);
}
/* polished metallic numerals */
.photo-bg .steps .step .k{
  font-size:clamp(2.6rem,3.4vw,3.1rem);
  background:var(--gold-metal);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.85));
}

/* Client Reviews: translucent frosted panel so the words separate from the
   photo, plus heavy halo makes them pop */
.photo-bg .quote{background:rgba(10,10,12,.5);border:1px solid rgba(255,255,255,.09);border-top:3px solid var(--gold);border-radius:14px;padding:clamp(22px,3vw,34px);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 18px 50px rgba(0,0,0,.45)}
.photo-bg .quote p,.photo-bg .quote .who,.photo-bg .quote .stars{
  text-shadow:0 0 6px rgba(0,0,0,1),0 1px 3px rgba(0,0,0,1),0 2px 16px rgba(0,0,0,.99),0 4px 34px rgba(0,0,0,.96),0 8px 68px rgba(0,0,0,.9),0 14px 100px rgba(0,0,0,.75);
}
/* keep the review stars a warm realistic gold on photo panels */
.photo-bg .quote .stars{color:var(--gold-deep);-webkit-text-fill-color:var(--gold-deep);
  text-shadow:0 1px 3px rgba(0,0,0,.85);
  filter:drop-shadow(0 0 8px rgba(192,144,72,.5))}

/* Areas We Serve: no grid boxes, heavy halo behind the city names */
.photo-bg .area-grid{background:transparent;border:0;gap:clamp(2px,1vw,10px)}
.photo-bg .area-grid a{background:transparent;
  text-shadow:0 0 6px rgba(0,0,0,1),0 1px 3px rgba(0,0,0,1),0 2px 14px rgba(0,0,0,.98),0 4px 30px rgba(0,0,0,.95),0 8px 60px rgba(0,0,0,.82);
}
.photo-bg .area-grid a:hover{background:transparent;color:var(--gold-bright)}
.photo-bg .area-grid a:hover span{color:var(--gold-bright)}

/* FAQ: translucent frosted panels so each question separates from the photo */
.photo-bg .faq{border-top:0}
.photo-bg .faq details{background:rgba(10,10,12,.5);border:1px solid rgba(255,255,255,.09);border-radius:14px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 18px 50px rgba(0,0,0,.45);margin-bottom:clamp(10px,1.4vw,16px);padding:4px clamp(18px,2.4vw,26px)}
.photo-bg .faq details:last-child{margin-bottom:0}
.photo-bg .faq summary,.photo-bg .faq .ans{padding-right:44px}
.photo-bg .faq summary,.photo-bg .faq .ans p{
  text-shadow:0 0 6px rgba(0,0,0,1),0 1px 3px rgba(0,0,0,1),0 2px 14px rgba(0,0,0,.98),0 4px 30px rgba(0,0,0,.92);
}

/* Text column scrim: soft frosted panel behind copy so words pop while the parallax photo still shows around it */
.photo-bg .col-scrim{
  background:linear-gradient(180deg,rgba(9,9,11,.66) 0%,rgba(9,9,11,.5) 100%);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  border:1px solid rgba(255,255,255,.07);border-radius:14px;
  padding:clamp(24px,3vw,40px);
  box-shadow:0 18px 50px rgba(0,0,0,.4);
  align-self:start}
.photo-bg .col-scrim .lead{color:rgba(255,255,255,.92)}

@media (prefers-reduced-motion:reduce){.photo-bg>.section-bg img{transform:translate3d(0,0,0) scale(1.6)}}

/* ===== Scrolling gallery marquee (two rows, opposite directions) ===== */
.gallery-marquee{display:flex;overflow:hidden;margin-bottom:18px}
.gallery-marquee:last-child{margin-bottom:0}
.gallery-track{display:flex;gap:18px;padding-right:18px;will-change:transform}
.gallery-track img{height:clamp(300px,36vw,540px);width:auto;flex-shrink:0;border-radius:10px;object-fit:cover;filter:saturate(.95);transition:filter .5s,transform .5s;display:block;background:var(--surface)}
.gallery-track img:hover{filter:saturate(1.12);transform:scale(1.015)}
.gallery-fade{position:relative}
.gallery-fade::before,.gallery-fade::after{content:"";position:absolute;top:0;bottom:0;width:clamp(40px,7vw,120px);z-index:2;pointer-events:none}
.gallery-fade::before{left:0;background:linear-gradient(90deg,var(--ink),transparent)}
.gallery-fade::after{right:0;background:linear-gradient(270deg,var(--ink),transparent)}

/* ===== Site-wide: transparent / frosted boxes to match the home-page feel =====
   Every heavy solid box (service cards, testimonials, process steps, stat
   tiles) becomes a light translucent glass panel so content floats the way it
   does on the home page. Scoped .photo-bg rules above still win over photos. */
.card{background:transparent;border-color:rgba(255,255,255,.10);box-shadow:none}
.card:hover{background:rgba(255,255,255,.035);border-color:var(--gold)}

.quote,.dark .quote{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10);border-top:3px solid var(--gold);border-radius:14px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}

.steps{background:transparent;gap:clamp(10px,1.6vw,18px)}
.steps .step,.dark .steps .step{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10);border-left:3px solid var(--gold);border-radius:14px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.dark .steps{background:transparent}

.stats{background:transparent;gap:14px}
.stats .st{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.10);border-radius:12px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}

/* Interior photo-bg sections: keep any content wrapper above the overlay and
   give loose text a soft shadow so it stays readable over the photo. */
.photo-bg>*:not(.section-bg){position:relative;z-index:2}
.photo-bg h3,.photo-bg .lead,.photo-bg p:not(.eyebrow),.photo-bg li,
.photo-bg .info-line .val,.photo-bg .info-line .lab,
.photo-bg .faq summary,.photo-bg .faq .ans p{
  text-shadow:0 1px 2px rgba(0,0,0,.92),0 2px 14px rgba(0,0,0,.85);
}

/* Over-photo lead text reads bright white, not faded gray (matches the
   heading), so intro lines like "Big project or small…" pop like the rest. */
.photo-bg .lead{color:#F5F2EB}

/* =================================================================
   LIGHT SECTION THEMES (2026-07-18)
   White / light-grey editorial bands mixed into the dark site.
   Opt-in per section via .light (white) or .light-grey. All text,
   buttons, cards, quotes and FAQ inside flip to a light-on-white
   treatment with the realistic metallic gold retained as the accent.
   ================================================================= */
:root{ --gold-ink:#8A6224; }   /* darker gold that reads on white/light-grey */

.section.light{background:#FFFFFF}
.section.light-grey{background:#EAEAEC}

/* About page: header stays solid black at all times, and the first section
   gets top padding to clear the fixed header (the hero was removed). */
.about-page .site-header{background:#0A0A0C;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-dark)}
.about-page main>section:first-child{padding-top:calc(88px + clamp(34px,5vw,66px))}

/* Transparent bands (stats + CTA) — no solid fill, they blend into the dark
   hero/footer frame while their content floats on top. */
.stats-band{background:transparent;padding-block:clamp(30px,4vw,58px)}

/* Hero stat tiles — bright glowing gold border (matches the review cards) */
.stats-band .stats .st{border:2px solid #F7CE57;border-radius:12px;
  box-shadow:0 0 5px rgba(247,206,87,.5),0 0 11px rgba(247,206,87,.28);
  transition:border-color .35s var(--ease),box-shadow .35s var(--ease)}
.stats-band .stats .st:hover{border-color:#FFDD73;
  box-shadow:0 0 7px rgba(255,221,115,.68),0 0 15px rgba(255,221,115,.4)}

/* base text */
.light,.light-grey{color:#3A3A40}
.light h1,.light h2,.light h3,.light h4,
.light-grey h1,.light-grey h2,.light-grey h3,.light-grey h4{color:#141417}
.light .lead,.light-grey .lead{color:#4C4C53}
.light p,.light-grey p{color:#46464C}

/* eyebrow + dividers */
.light .eyebrow,.light-grey .eyebrow,
.light .eyebrow.on-dark,.light-grey .eyebrow.on-dark{color:var(--gold-ink)}
.light .eyebrow::before,.light .eyebrow::after,
.light-grey .eyebrow::before,.light-grey .eyebrow::after{background:var(--gold)}

/* buttons + links */
.light .btn-outline,.light-grey .btn-outline{color:#1A1A1F;border-color:rgba(0,0,0,.28)}
.light .btn-outline:hover,.light-grey .btn-outline:hover{background:var(--gold);border-color:var(--gold);color:#241B07}
.light .link-gold,.light-grey .link-gold,
.light .link-gold.on-dark,.light-grey .link-gold.on-dark{color:var(--gold-ink)}
.light .link-gold:hover,.light-grey .link-gold:hover,
.light .link-gold.on-dark:hover,.light-grey .link-gold.on-dark:hover{color:#6E4C18}

/* cards (What We Build) */
.light .card,.light-grey .card{background:#FFFFFF;border-color:rgba(0,0,0,.08);
  box-shadow:0 2px 4px rgba(0,0,0,.08),0 12px 24px rgba(0,0,0,.12),0 26px 50px rgba(0,0,0,.14)}
.light .card:hover,.light-grey .card:hover{border-color:var(--gold);transform:translateY(-6px);
  box-shadow:0 6px 12px rgba(0,0,0,.12),0 20px 40px rgba(0,0,0,.18),0 40px 72px rgba(0,0,0,.20)}
.light .card .body h3,.light-grey .card .body h3{color:#141417}
.light .card .body p,.light-grey .card .body p{color:#57575D}
.light .card .svc-tag,.light-grey .card .svc-tag,
.light .card .link-gold,.light-grey .card .link-gold{color:var(--gold-ink)}

/* Areas We Serve — white tabs, gold trim, light gold glow, gold fill on hover */
.area-grid.area-gold{background:transparent;border:0;gap:14px}
.area-grid.area-gold a{background:#FFFFFF;border:2px solid var(--gold);border-radius:10px;
  color:#1A1A1F;
  box-shadow:0 0 7px rgba(247,206,87,.42),0 0 15px rgba(247,206,87,.22),0 6px 16px rgba(0,0,0,.06);
  transition:.3s var(--ease)}
.area-grid.area-gold a:hover{background:var(--gold);color:#241B07;transform:translateY(-2px);
  box-shadow:0 0 10px rgba(247,206,87,.6),0 0 22px rgba(247,206,87,.34),0 10px 22px rgba(0,0,0,.12)}
.area-grid.area-gold a span{color:var(--gold)}
.area-grid.area-gold a:hover span{color:#241B07}

/* Service detail pages on light sections: drop the over-photo scrim, turn the
   "What's Included" rows into shadowed hover tiles, fix accent colors. */
.light .col-scrim,.light-grey .col-scrim{background:none;border:0;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;padding:0}
.light .col-scrim .lead,.light-grey .col-scrim .lead{color:#4C4C53}
.light .pill-note,.light-grey .pill-note{background:rgba(192,144,72,.14);color:var(--gold-ink);
  border:1px solid rgba(192,144,72,.4)}
.light .info-line,.light-grey .info-line{background:#FFFFFF;border:1px solid rgba(0,0,0,.08);
  border-radius:12px;padding:16px 18px;margin-bottom:12px;
  box-shadow:0 6px 18px rgba(0,0,0,.08);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.light .info-line:hover,.light-grey .info-line:hover{transform:translateY(-3px);
  border-color:var(--gold);box-shadow:0 12px 28px rgba(0,0,0,.14)}
.light .info-line .val,.light-grey .info-line .val{color:#1A1A1F}
.light .info-line .ic,.light-grey .info-line .ic{color:var(--gold-ink);border-color:var(--gold)}

/* ============================================================
   INTERIOR LIGHT PAGES (gallery, reviews, contact)
   ============================================================ */
/* Keep the header solid so nav stays readable over a light hero */
.solid-header .site-header{background:#0A0A0C;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-dark)}

/* Light page-hero variants (white / light grey) */
.page-hero.hero-white{background:#FFFFFF}
.page-hero.hero-grey{background:#EAEAEC}
.page-hero.hero-white,.page-hero.hero-grey{padding-top:clamp(150px,16vw,180px)}
.page-hero.hero-white h1,.page-hero.hero-grey h1{color:#141417}
.page-hero.hero-white .lead,.page-hero.hero-grey .lead{color:#4C4C53}
.page-hero.hero-white .eyebrow,.page-hero.hero-grey .eyebrow,
.page-hero.hero-white .eyebrow.on-dark,.page-hero.hero-grey .eyebrow.on-dark{color:var(--gold-ink)}
.page-hero.hero-white .eyebrow::before,.page-hero.hero-grey .eyebrow::before{background:var(--gold)}
.page-hero.hero-white .crumbs,.page-hero.hero-grey .crumbs{color:#6A6A70}
.page-hero.hero-white .crumbs a:hover,.page-hero.hero-grey .crumbs a:hover,
.page-hero.hero-white .crumbs span,.page-hero.hero-grey .crumbs span{color:var(--gold-ink)}
.page-hero.hero-white .btn-ghost-light,.page-hero.hero-grey .btn-ghost-light{color:#1A1A1F;border-color:rgba(0,0,0,.28)}
.page-hero.hero-white .btn-ghost-light:hover,.page-hero.hero-grey .btn-ghost-light:hover{background:var(--gold);border-color:var(--gold);color:#241B07}

/* Gallery marquee on light grey: recolor the edge fades + image placeholder */
.light-grey .gallery-fade::before{background:linear-gradient(90deg,#EAEAEC,transparent)}
.light-grey .gallery-fade::after{background:linear-gradient(270deg,#EAEAEC,transparent)}
.light-grey .gallery-track img{background:#DADADD}

/* rule-top divider on light */
.light .rule-top,.light-grey .rule-top{border-color:rgba(0,0,0,.12)}

/* Contact: form fields on a light section */
.light .field label,.light-grey .field label{color:#4C4C53}
.light .field input,.light .field select,.light .field textarea,
.light-grey .field input,.light-grey .field select,.light-grey .field textarea{
  background:#FFFFFF;border:1px solid rgba(0,0,0,.16);color:#1A1A1F}
.light .field input::placeholder,.light .field textarea::placeholder,
.light-grey .field input::placeholder,.light-grey .field textarea::placeholder{color:#8A8A90}
.light .field select option,.light-grey .field select option{background:#fff;color:#1A1A1F}

/* Contact info items → light-grey "How We Work" style tabs with a gold metal edge */
.light .contact-grid .info-line,.light-grey .contact-grid .info-line{
  background:#EAEAEC;border:1px solid rgba(0,0,0,.06);border-left:0;border-radius:12px;
  padding:16px 18px 16px 22px;margin-bottom:12px;position:relative;overflow:hidden;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.light .contact-grid .info-line::before,.light-grey .contact-grid .info-line::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gold-metal)}
.light .contact-grid .info-line:hover,.light-grey .contact-grid .info-line:hover{
  transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,0,0,.14)}
.light .contact-grid .info-line .val,.light-grey .contact-grid .info-line .val{color:#1A1A1F}
.light .contact-grid .info-line .lab,.light-grey .contact-grid .info-line .lab{color:#6A6A70}
.light .contact-grid .info-line .ic,.light-grey .contact-grid .info-line .ic{color:var(--gold-ink);border-color:var(--gold)}
.light .contact-grid .info-line a.val:hover,.light-grey .contact-grid .info-line a.val:hover{color:var(--gold-ink)}

/* Info-lines INSIDE a card (city "Why {City} Chooses Matson" panel) render as
   plain check-rows, not floating tiles. */
.light .card .info-line,.light-grey .card .info-line{background:transparent;border:0;
  border-bottom:1px solid rgba(0,0,0,.08);border-radius:0;box-shadow:none;margin-bottom:0;padding:14px 0}
.light .card .info-line:hover,.light-grey .card .info-line:hover{transform:none;box-shadow:none}
.light .card .info-line:last-of-type{border-bottom:0}

/* Estimate popup modal (contact page) */
.estimate-modal{position:fixed;inset:0;z-index:1000;display:none;align-items:flex-start;justify-content:center;padding:clamp(14px,4vw,48px)}
.estimate-modal.open{display:flex}
.estimate-modal__backdrop{position:fixed;inset:0;background:rgba(8,8,10,.74);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.estimate-modal__dialog{position:relative;z-index:1;background:#FFFFFF;border-radius:14px;
  width:min(640px,100%);max-height:92vh;overflow-y:auto;margin:auto;
  box-shadow:0 30px 90px rgba(0,0,0,.55);padding:clamp(20px,2.6vw,30px)}
.estimate-modal__x{position:absolute;top:8px;right:14px;z-index:2;background:none;border:0;
  font-size:2rem;line-height:1;color:#6A6A70;cursor:pointer;transition:color .2s var(--ease)}
.estimate-modal__x:hover{color:var(--gold-ink)}
body.modal-open{overflow:hidden}

/* Chips + stat tiles on light sections (About page) */
.light .chip,.light-grey .chip{border-color:rgba(0,0,0,.18);color:#46464C}
.light .stats .st,.light-grey .stats .st{background:#FFFFFF;border:1px solid rgba(0,0,0,.08);
  box-shadow:0 6px 18px rgba(0,0,0,.08)}
.light .stats .st .l,.light-grey .stats .st .l{color:#57575D}

/* 3D lifted shadows + hover lift/zoom on images inside light sections */
.light .media,.light-grey .media{box-shadow:0 12px 28px rgba(0,0,0,.20),0 28px 60px rgba(0,0,0,.22);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.light .media img,.light-grey .media img{transition:transform .6s var(--ease)}
.light .media:hover,.light-grey .media:hover{transform:translateY(-6px);
  box-shadow:0 20px 44px rgba(0,0,0,.26),0 44px 84px rgba(0,0,0,.30)}
.light .media:hover img,.light-grey .media:hover img{transform:scale(1.05)}
/* fix: staggered g-2 photos must not stretch and reveal a bg bar below the image */
.light .g-2 .media,.light-grey .g-2 .media{align-self:start}
.light .btn-outline,.light-grey .btn-outline{box-shadow:0 6px 16px rgba(0,0,0,.16),0 12px 30px rgba(0,0,0,.12)}
.light .btn-outline:hover,.light-grey .btn-outline:hover{box-shadow:0 10px 24px rgba(0,0,0,.22),0 18px 40px rgba(0,0,0,.16)}
.light .btn-gold,.light-grey .btn-gold{box-shadow:0 8px 20px rgba(0,0,0,.22),0 4px 16px rgba(192,144,72,.32),inset 0 1px 0 rgba(255,255,255,.5)}
.light .btn-gold:hover,.light-grey .btn-gold:hover{box-shadow:0 14px 32px rgba(0,0,0,.28),0 8px 28px rgba(240,208,136,.6),inset 0 1px 0 rgba(255,255,255,.75)}

/* quotes / reviews — white card, super-bright glowing gold border */
.light .quote,.light-grey .quote{background:#FFFFFF;border:2px solid var(--gold);
  border-radius:14px;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:0 0 6px rgba(214,171,84,.6),0 0 14px rgba(198,148,71,.35),0 12px 32px rgba(0,0,0,.16);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease)}
.light .quote:hover,.light-grey .quote:hover{border-color:var(--gold-deep);transform:translateY(-5px);
  box-shadow:0 0 9px rgba(233,200,119,.7),0 0 18px rgba(214,171,84,.45),0 16px 42px rgba(0,0,0,.20)}
.light .quote p,.light-grey .quote p{color:#141417;text-shadow:none}
.light .quote .who,.light-grey .quote .who{color:var(--gold-ink);text-shadow:none}
.light .quote .stars,.light-grey .quote .stars{text-shadow:none;filter:drop-shadow(0 1px 1px rgba(0,0,0,.15))}

/* 3D white process tiles (A Proven, Stress-Free Process) */
.process-section .steps{background:transparent;gap:clamp(16px,2vw,26px)}
.process-section .steps .step{
  position:relative;overflow:hidden;
  background:rgba(255,255,255,.45);
  border:1px solid rgba(255,255,255,.6);border-left:0;border-radius:16px;
  padding:clamp(26px,3.2vw,42px);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:0 2px 4px rgba(0,0,0,.10),0 14px 30px rgba(0,0,0,.16),
    0 30px 60px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.7);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.process-section .steps .step::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gold-metal)}
.process-section .steps .step:hover{transform:translateY(-6px);
  box-shadow:0 4px 8px rgba(0,0,0,.14),0 24px 48px rgba(0,0,0,.30),
    0 48px 84px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.95)}
.process-section .steps .step h3{color:#141417;text-shadow:none}
.process-section .steps .step p{color:#4C4C53;text-shadow:none}
.process-section .steps .step .k{
  background:var(--gold-metal);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}

/* FAQ — white cards with lifted shadow, black text (works on white or grey) */
.light .faq,.light-grey .faq{border-top:0}
.light .faq details,.light-grey .faq details{background:#FFFFFF;border:1px solid rgba(0,0,0,.08);border-radius:14px;
  box-shadow:0 8px 22px rgba(0,0,0,.12),0 16px 40px rgba(0,0,0,.10);margin-bottom:clamp(10px,1.4vw,16px);
  padding:4px clamp(18px,2.4vw,26px);-webkit-backdrop-filter:none;backdrop-filter:none;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.light .faq details:hover,.light-grey .faq details:hover{transform:translateY(-4px);
  background:var(--gold);border-color:var(--gold);
  box-shadow:0 14px 32px rgba(0,0,0,.20),0 26px 56px rgba(0,0,0,.16)}
.light .faq details:hover summary,.light-grey .faq details:hover summary,
.light .faq details:hover .ans,.light .faq details:hover .ans p,
.light-grey .faq details:hover .ans,.light-grey .faq details:hover .ans p{color:#241B07}
.light .faq details:hover summary::after,.light-grey .faq details:hover summary::after{color:#241B07}
.light .faq details:last-child,.light-grey .faq details:last-child{margin-bottom:0}
.light .faq summary,.light-grey .faq summary{color:#141417;text-shadow:none;padding-right:44px}
.light .faq summary::after,.light-grey .faq summary::after{color:var(--gold-ink)}
.light .faq .ans,.light .faq .ans p,
.light-grey .faq .ans,.light-grey .faq .ans p{color:#141417;text-shadow:none}

/* ============================================================================
   MOBILE PASS (2026-08-01)
   Fixes measured with _imgtool/audit-mobile.mjs at 390px and 360px:
   sideways scroll on /contact/, sub-44px tap targets, sub-12px label text,
   and marquee tiles rendering at near-desktop size on phones.
   ========================================================================== */

/* --- 1. Sideways scroll ---------------------------------------------------
   Grid and flex children default to min-width:auto, so they refuse to shrink
   below their min-content width. On /contact/ the unbreakable email address
   (DMatson@MatsonHomesAZ.com) forced the column to 386px inside a 360px
   viewport, widening the document and dragging the fixed header out with it. */
.contact-grid>*,.split>*,.footer-top>*,.grid>*{min-width:0}
.info-line .val,.info-line .lab{overflow-wrap:anywhere}
/* belt and braces: nothing should ever introduce a horizontal scrollbar.
   Must be clip, NOT hidden — overflow-x:hidden on html stops body's overflow
   propagating to the viewport, which turns body into a scroll container and
   silently kills every position:sticky on the site (the scroll-build hero
   went black mid-scroll). clip clips the same overflow without creating a
   scroll container, so sticky keeps working. */
html,body{overflow-x:clip}

/* --- 2. Tap targets -------------------------------------------------------
   44x44 CSS px is the Apple HIG / WCAG 2.5.8 minimum. Padding is used rather
   than width/height so the visual design is unchanged — only the hit area
   grows. */
@media(max-width:900px){
  .nav-toggle{min-width:44px;min-height:44px;justify-content:center;align-items:center}
  .mobile-nav .mclose{min-width:44px;min-height:44px;display:grid;place-items:center;
    font-size:2.1rem;margin:-4px -8px 4px 0}
  .mobile-nav a{padding:.5em 0;min-height:44px;display:flex;align-items:center}
  .mobile-nav .sub a{min-height:44px;padding-top:0;padding-bottom:0}
  .social a{width:44px;height:44px}
  /* 11px (not 9) — at 9 these land on 43.8px once line-height rounds down.
     footer-col links must keep their display:block — forcing inline-block
     here collapsed the stacked link list into one unbroken run of text. */
  .footer-bottom a{display:inline-block}
  .footer-bottom a,.footer-top a{padding:11px 0}
  .link-gold{display:inline-block;padding:13px 0}
  /* Phone and email on /contact/ are the primary mobile conversions — a
     21px tap target for "call us" is the worst place to be stingy. */
  .info-line .val{display:inline-block;padding:12px 0;min-height:44px}
  .info-line a.val{text-decoration:underline;text-underline-offset:3px}
  /* Breadcrumbs are secondary nav; the negative margin cancels the padding's
     layout growth, so the hit area reaches 44px (Apple HIG) while the page
     hero keeps exactly the same geometry. */
  .crumbs a{display:inline-block;padding:12px 6px;margin:-4px -6px}
}

/* --- 3. Label text under 12px --------------------------------------------
   Eyebrows, service tags, stat labels and the scroll cue are heavily
   letterspaced uppercase, which is the hardest case to read small. Nudged
   above 12px on phones only; desktop sizing is untouched. */
@media(max-width:620px){
  .eyebrow{font-size:.8rem}
  .svc-tag{font-size:.76rem}
  .stats .st .l{font-size:.78rem}
  .bh-cue{font-size:.78rem;letter-spacing:.26em}
  .chip{font-size:.8rem}
  .quote .who{font-size:.78rem}
  .footer-col h4{font-size:.78rem}
  .footer-col a,.footer-bottom{font-size:.82rem}
  .crumbs{font-size:.78rem}
  .info-line .lab{font-size:.78rem}
  .pill-note{font-size:.78rem}
}

/* --- 4. Gallery marquee on phones ----------------------------------------
   Tiles are fixed-height / auto-width. The old clamp floor of 300px meant a
   390px phone still rendered ~530px-wide tiles and downloaded desktop-sized
   files. A lower floor cuts both the pixels and the bytes. */
@media(max-width:820px){
  .gallery-track img{height:clamp(200px,44vw,300px)}
  .gallery-track{gap:12px;padding-right:12px}
  .gallery-marquee{margin-bottom:12px}
}