/*
Theme Name: Kogan Home Remodeling
Theme URI: https://koganhomeremodelingaz.com
Author: Magnet Marketing SEO (Sonic)
Description: Editorial Serif custom theme for Kogan Home Remodeling — Phoenix & Scottsdale. Built to the locked Design DNA (Storytelling-Driven / Editorial Serif).
Version: 1.0
*/

/* ---- Design DNA tokens: .factory/config/design-dna.json ---- */
:root{
  --paper:#FAFAF9;
  --ink:#1C1917;
  --ink-soft:#26221F;
  --muted:#57534E;
  --muted-2:#78716C;
  --bronze:#A3552B;
  --bronze-lt:#C98B5E;
  --hair:#E7E5E4;
  --hair-dark:#3F3A36;
  --display:"Playfair Display",Georgia,serif;
  --body:"Source Serif 4",Georgia,serif;
  --ui:"Inter",system-ui,-apple-system,sans-serif;
  --wrap:1350px;
}

*,*::before,*::after{box-sizing:border-box;}
body,h1,h2,h3,h4,p,figure,blockquote,ul,ol{margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:18px;line-height:1.68;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px;}
.skip{position:absolute;left:-9999px;}
.skip:focus{left:12px;top:12px;background:var(--ink);color:var(--paper);padding:10px 16px;z-index:99;}

/* ---- type ---- */
h1,h2,h3,h4{font-family:var(--display);font-weight:700;letter-spacing:-.02em;line-height:1.12;}
h1{font-size:clamp(40px,6.2vw,74px);line-height:1.04;}
h2{font-size:clamp(27px,3.4vw,42px);line-height:1.16;}
h3{font-size:clamp(21px,2vw,25px);line-height:1.26;letter-spacing:-.01em;}
p{color:var(--muted);}
.lede{font-size:clamp(17px,1.5vw,20px);line-height:1.6;color:var(--muted);}

.eyebrow{
  font-family:var(--ui);font-size:12px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--bronze);line-height:1.4;
}
.rule{height:1px;background:var(--hair);border:0;}
.rule--dark{background:var(--hair-dark);}

/* ---- underline + button CTAs ---- */
.btn{
  display:inline-block;font-family:var(--ui);font-size:16px;font-weight:600;
  letter-spacing:.02em;padding:17px 34px;background:var(--ink);color:var(--paper);
  text-decoration:none;border:1px solid var(--ink);transition:background .18s,color .18s;
}
.btn:hover,.btn:focus-visible{background:transparent;color:var(--ink);}
.btn--bronze{background:var(--bronze);border-color:var(--bronze);color:#fff;}
.btn--bronze:hover,.btn--bronze:focus-visible{background:transparent;color:var(--bronze-lt);border-color:var(--bronze-lt);}
.ulink{
  font-family:var(--ui);font-size:15px;font-weight:500;color:var(--bronze);
  text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px;
}
.ulink--light{color:#FAFAF9;border-bottom-color:#6B625B;}
:focus-visible{outline:2px solid var(--bronze);outline-offset:3px;}

/* ---- header: see the header block at the end of this file ---- */

/* ---- sections ---- */
.sec{padding:0 0 96px;}
.sec--hero{padding:96px 0 92px;}
.sec--dark{background:var(--ink);color:var(--paper);padding:88px 0;}
.sec--dark p{color:#D6D3D1;}
.sec--dark h2{color:var(--paper);}
.sec--dark .eyebrow{color:var(--bronze-lt);}
.sec-head{display:flex;align-items:baseline;gap:22px;margin-bottom:34px;}
.sec-head h2{margin:0;}

/* ---- hero ---- */
.hero__h1{margin:14px 0 26px;}
.hero__lede{max-width:62ch;margin-bottom:34px;}
.hero__cta{display:flex;align-items:center;gap:26px;flex-wrap:wrap;}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;padding-top:28px;}
.facts .eyebrow{display:block;margin-bottom:8px;}
.facts p{color:var(--ink);font-size:16px;line-height:1.5;}

/* ---- statement ---- */
/* statement sits directly under the hero, so it needs its own top padding —
   .sec only carries bottom padding. */
.statement{padding-top:100px;padding-bottom:100px;}
.statement h2{max-width:22ch;margin-bottom:24px;}
.statement p{max-width:74ch;font-size:19px;line-height:1.72;}

/* ---- service index (hairlines, no cards) ---- */
.idx{border-top:1px solid var(--hair);}
.idx__row{
  display:grid;grid-template-columns:9% 38% 1fr;gap:20px;align-items:start;
  padding:26px 0;border-bottom:1px solid var(--hair);text-decoration:none;color:inherit;
  transition:background .18s;
}
.idx__row:hover{background:#F4F2EF;}
.idx__num{font-family:var(--ui);font-size:13px;font-weight:700;letter-spacing:.1em;color:var(--bronze);padding-top:6px;}
.idx__row h3{margin:0;}
.idx__row p{font-size:17px;line-height:1.6;margin:0;}

/* ---- process ---- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--hair);}
.step{padding:30px 26px 0 0;}
.step__num{font-family:var(--display);font-size:38px;font-weight:700;color:var(--bronze);line-height:1;margin-bottom:14px;}
.step h3{margin-bottom:10px;}
.step p{font-size:17px;line-height:1.62;}

/* ---- proof ---- */
.proof__top{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,56px);
  align-items:center;margin-bottom:36px;}
.proof__shot{margin:0;}
.proof__shot img{width:100%;height:clamp(260px,28vw,380px);object-fit:cover;display:block;}
.proof p.lede{max-width:56ch;margin-bottom:0;}
.proof__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;padding-top:28px;}
.proof__grid .eyebrow{display:block;margin-bottom:8px;}
.proof__grid p{color:var(--paper);font-size:17px;line-height:1.5;}

/* ---- work / photo slots ---- */
.work{display:grid;grid-template-columns:58% 1fr;gap:20px;align-items:stretch;}
.work__col{display:grid;gap:20px;}
.slot{
  border:1px dashed #D6D3D1;background:
    repeating-linear-gradient(45deg,#F4F2EF,#F4F2EF 14px,#EDEAE6 14px,#EDEAE6 28px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:24px;min-height:200px;
}
.slot--tall{min-height:420px;}
.slot__tag{font-family:var(--ui);font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--muted-2);margin-bottom:6px;}
.slot__lbl{font-family:var(--body);font-style:italic;font-size:15px;color:var(--muted-2);}

/* ---- final CTA ---- */
.cta{background:var(--ink-soft);color:var(--paper);text-align:center;padding:92px 0;}
.cta h2{color:var(--paper);margin-bottom:18px;}
.cta p{color:#D6D3D1;font-size:19px;margin:0 auto 32px;max-width:56ch;}
.cta__row{display:flex;gap:26px;align-items:center;justify-content:center;flex-wrap:wrap;}

/* ---- footer ---- */
.ft{background:var(--ink);color:var(--paper);padding:52px 0;}
.ft .rule{margin-bottom:26px;}
.ft__cols{display:grid;grid-template-columns:40% 30% 1fr;gap:24px;align-items:start;}
.ft__mark{font-family:var(--display);font-size:17px;font-weight:700;letter-spacing:.1em;margin-bottom:10px;}
.ft p,.ft a{color:#A8A29E;font-size:15px;line-height:1.7;text-decoration:none;}
.ft a:hover{color:var(--paper);}
.ft .eyebrow{display:block;margin-bottom:8px;color:var(--bronze-lt);}

/* ---- motion ----
   See MOTION-PROFILE.md. Every hiding rule is gated behind .js-reveal, which an inline
   script in <head> sets before paint. No JS -> content is simply visible. Never let copy
   depend on a script running. */
:root{--ease:cubic-bezier(.22,.61,.36,1);}

.js-reveal .rv{opacity:0;transform:translateY(18px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);}
.js-reveal .rv.in{opacity:1;transform:none;}

/* stagger: children offset by index (--i set in the markup) */
.js-reveal .rv-stagger > *{opacity:0;transform:translateY(16px);
  transition:opacity .65s var(--ease),transform .65s var(--ease);
  transition-delay:calc(var(--i,0) * 60ms);}
.js-reveal .rv-stagger.in > *{opacity:1;transform:none;}

/* headline: lines rise independently */
.js-reveal .rv-lines .ln{display:block;opacity:0;transform:translateY(24px);
  transition:opacity .75s var(--ease),transform .75s var(--ease);}
.js-reveal .rv-lines .ln:nth-child(2){transition-delay:90ms;}
.js-reveal .rv-lines.in .ln{opacity:1;transform:none;}

/* hairline rules draw in from the left — the rule IS the design language */
.js-reveal hr.rule{transform:scaleX(0);transform-origin:left center;
  transition:transform .9s var(--ease);}
.js-reveal hr.rule.in{transform:scaleX(1);}

/* images wipe rather than fade */
.js-reveal .rv-wipe img{clip-path:inset(0 100% 0 0);
  transition:clip-path .95s var(--ease);}
.js-reveal .rv-wipe.in img{clip-path:inset(0 0 0 0);}

/* hero background settles, once, slowly enough to be subliminal */
.js-reveal .hero__bg img{transform:scale(1.06);transition:transform 14s linear;}
.js-reveal .hero__bg.in img{transform:scale(1);}

@media(prefers-reduced-motion:reduce){
  .js-reveal .rv,.js-reveal .rv-stagger > *,.js-reveal .rv-lines .ln{
    opacity:1;transform:none;transition:none;}
  .js-reveal hr.rule{transform:none;transition:none;}
  .js-reveal .rv-wipe img{clip-path:none;transition:none;}
  .js-reveal .hero__bg img{transform:none;transition:none;}
}

/* ---- responsive ---- */
@media(max-width:699px){
  .facts,.proof__grid{grid-template-columns:1fr;gap:26px;}
  .steps{grid-template-columns:1fr;}
  .step{padding:26px 0 0;border-bottom:1px solid var(--hair);padding-bottom:26px;}
  .step:last-child{border-bottom:0;}
  .work{grid-template-columns:1fr;}
  .slot--tall{min-height:260px;}
  .idx__row{grid-template-columns:44px 1fr;gap:8px 14px;}
  .idx__row p{grid-column:2;}
  .ft__cols{grid-template-columns:1fr;gap:30px;}
  .sec{padding-bottom:60px;}
  .statement{padding-top:60px;padding-bottom:60px;}
  .sec--hero{padding:60px 0 56px;}
  .sec--dark,.cta{padding:60px 0;}
  .hd__nav{gap:18px;}
}

/* ---- imagery ----
   Square-edged, no rounded corners, no shadows — Editorial Serif shape language. */
.proc__shot{margin:56px 0 0;}
.proc__shot img{width:100%;height:clamp(220px,32vw,420px);object-fit:cover;display:block;}

/* service index thumbnails */
.idx__row{grid-template-columns:6% 12% 30% 1fr;}
.idx__thumb{display:block;overflow:hidden;background:#F0EEEB;aspect-ratio:4/3;}
/* no image for this service yet — show nothing rather than an empty gray box */
.idx__thumb:empty{background:transparent;}
.idx__thumb img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s ease;}
.idx__row:hover .idx__thumb img{transform:scale(1.05);}
@media(prefers-reduced-motion:reduce){.idx__thumb img{transition:none;}
  .idx__row:hover .idx__thumb img{transform:none;}}

/* gallery */
.gal{display:grid;grid-template-columns:58% 1fr;gap:20px;align-items:stretch;}
.gal__col{display:grid;gap:20px;}
.gal__item{margin:0;position:relative;overflow:hidden;background:#F0EEEB;}
.gal__item img{width:100%;height:100%;object-fit:cover;display:block;}
.gal__item--lead img{height:clamp(300px,38vw,460px);}
.gal__col .gal__item img{height:clamp(150px,18vw,220px);}
.gal__item figcaption{
  position:absolute;left:0;bottom:0;
  font-family:var(--ui);font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--paper);background:rgba(28,25,23,.82);padding:8px 14px;}

@media(max-width:699px){
  .idx__row{grid-template-columns:44px 1fr;gap:8px 14px;}
  .idx__thumb{grid-column:1 / -1;order:-1;aspect-ratio:16/9;margin-bottom:4px;}
  .idx__row p{grid-column:2;}
  .gal{grid-template-columns:1fr;}
  .gal__item--lead img,.gal__col .gal__item img{height:clamp(180px,50vw,260px);}
  .proc__shot{margin-top:40px;}
  .proof__top{grid-template-columns:1fr;gap:26px;}
  .proof p.lede{max-width:none;}
  .proof__shot img{height:clamp(200px,50vw,280px);}
}

/* ---- hero with background image + overlay ---- */
.sec--hero-img{position:relative;isolation:isolate;background:var(--ink);
  padding:clamp(88px,11vw,150px) 0 clamp(72px,9vw,120px);overflow:hidden;}
.hero__bg{position:absolute;inset:0;z-index:-2;}
.hero__bg img{width:100%;height:100%;object-fit:cover;display:block;}
.sec--hero-img::after{content:"";position:absolute;inset:0;z-index:-1;
  /* Overlay is a contrast requirement, not decoration: at .42 on the right the
     hero fact text measured ~3.5:1 against the photo, under the 4.5:1 AA floor. */
  background:linear-gradient(100deg,rgba(20,18,16,.92) 0%,rgba(20,18,16,.84) 46%,rgba(20,18,16,.70) 100%);}
.hero__inner{position:relative;}
.sec--hero-img h1{color:var(--paper);}
.sec--hero-img .lede{color:#DAD5D0;}
.eyebrow--light{color:var(--bronze-lt);}
.rule--onimg{background:rgba(250,250,249,.22);}
.facts--light p{color:#E7E3DF;}
.btn--light{background:var(--paper);color:var(--ink);border-color:var(--paper);}
.btn--light:hover,.btn--light:focus-visible{background:transparent;color:var(--paper);}
@media(max-width:699px){
  .sec--hero-img::after{
    background:linear-gradient(180deg,rgba(20,18,16,.86) 0%,rgba(20,18,16,.80) 60%,rgba(20,18,16,.86) 100%);}
}

/* ---- statement: copy beside an image ---- */
.stmt{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,56px);align-items:center;}
.stmt__text h2{max-width:20ch;}
.stmt__text p{max-width:56ch;}
.stmt__shot{margin:0;}
.stmt__shot img{width:100%;height:clamp(300px,32vw,440px);object-fit:cover;display:block;}
@media(max-width:699px){
  .stmt{grid-template-columns:1fr;gap:26px;}
  .stmt__text h2,.stmt__text p{max-width:none;}
  .stmt__shot img{height:clamp(200px,52vw,300px);}
}

/* ---- service page ---- */
.crumb{margin-bottom:18px;font-family:var(--ui);font-size:13px;letter-spacing:.04em;}
.crumb a{color:#C6BFB8;text-decoration:none;border-bottom:1px solid transparent;}
.crumb a:hover,.crumb a:focus-visible{color:var(--paper);border-bottom-color:currentColor;}
.crumb span{color:#8A817A;margin:0 8px;}
/* non-linked index rows (a service's own contents) keep the grid but lose the hover affordance */
.idx__row--static{grid-template-columns:6% 30% 1fr;cursor:default;}
.idx__row--static:hover{background:transparent;}
@media(max-width:699px){.idx__row--static{grid-template-columns:44px 1fr;}
  .idx__row--static p{grid-column:2;}}

/* consecutive paragraphs need air — .stmt/.proof stack multiple <p> on service pages */
.stmt__text p + p,
.proof__text p + p{margin-top:16px;}

/* index rows with no thumbnail (a service's own contents, related links) */
.idx__row--nothumb{grid-template-columns:6% 30% 1fr;}
@media(max-width:699px){
  .idx__row--nothumb{grid-template-columns:44px 1fr;}
  .idx__row--nothumb p{grid-column:2;}
}

/* ---- §04 related services — editorial 3-up, image-led.
   Hairline + whitespace only: no card, no shadow, no rounded corner. ---- */
.rel{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,40px);
  border-top:1px solid var(--hair);}
.rel__item{display:flex;flex-direction:column;text-decoration:none;color:inherit;padding-top:26px;}
.rel__media{display:block;overflow:hidden;background:#F0EEEB;aspect-ratio:4/3;margin-bottom:22px;}
.rel__media img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s var(--ease);}
.rel__item:hover .rel__media img,
.rel__item:focus-visible .rel__media img{transform:scale(1.04);}
/* fallback plate for a service with no photography yet */
.rel__media--plate{background:transparent;border:1px solid var(--hair);
  display:flex;align-items:flex-end;padding:20px;}
.rel__plate-num{font-family:var(--display);font-weight:700;line-height:1;
  font-size:clamp(38px,4.4vw,60px);color:var(--bronze);opacity:.45;}
.rel__num{display:block;font-family:var(--ui);font-size:12px;font-weight:700;
  letter-spacing:.18em;color:var(--bronze);margin-bottom:12px;}
.rel__name{margin:0 0 12px;transition:color .18s;}
.rel__item:hover .rel__name,.rel__item:focus-visible .rel__name{color:var(--bronze);}
.rel__blurb{font-size:16.5px;line-height:1.62;margin:0 0 22px;max-width:34ch;}
/* margin-top:auto pulls every CTA to a shared baseline even when the names wrap
   to different depths — ragged link positions read as sloppy in an editorial grid. */
.rel__go{margin-top:auto;align-self:flex-start;font-family:var(--ui);font-size:14px;
  font-weight:600;color:var(--bronze);border-bottom:1px solid currentColor;padding-bottom:2px;}
.rel__arrow{display:inline-block;transition:transform .22s var(--ease);}
.rel__item:hover .rel__arrow,.rel__item:focus-visible .rel__arrow{transform:translateX(4px);}
@media(prefers-reduced-motion:reduce){
  .rel__media img,.rel__arrow{transition:none;}
  .rel__item:hover .rel__media img{transform:none;}
  .rel__item:hover .rel__arrow{transform:none;}
}
@media(max-width:699px){
  .rel{grid-template-columns:1fr;gap:0;}
  .rel__item{padding:26px 0;border-bottom:1px solid var(--hair);}
  .rel__item:last-child{border-bottom:0;}
  .rel__media{aspect-ratio:16/9;}
  .rel__blurb{max-width:none;}
}

/* A .sec only carries bottom padding, so a light section landing directly under a dark
   band (proof / CTA) or an image hero hugs it. Fourth time this has bitten, so it is fixed
   generically rather than per section.
   .statement already sets its own 100/60 and is what saved the homepage and the service pages
   from this; the values here match it deliberately, so adding .sec--hero-img changes nothing
   on the pages whose next section is a .statement. Do NOT add a tablet override for the
   .sec--hero-img case without checking those pages — .statement has none, so they would move. */
.sec--dark + .sec,
.sec--hero-img + .sec{padding-top:100px;}
@media(max-width:699px){
  .sec--dark + .sec,
  .sec--hero-img + .sec{padding-top:60px;}
}

/* ---- contact page ---- */
.contact{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,5vw,72px);align-items:start;}
.form{display:grid;gap:22px;}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
.field{display:grid;gap:8px;}
.field label{font-family:var(--ui);font-size:12px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);}
.req{color:var(--bronze);}
.field input,.field select,.field textarea{
  font-family:var(--body);font-size:17px;line-height:1.5;color:var(--ink);background:transparent;
  border:0;border-bottom:1px solid var(--hair);border-radius:0;padding:12px 2px;width:100%;
  transition:border-color .18s;}
.field textarea{border:1px solid var(--hair);padding:14px;resize:vertical;}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--muted-2);}
/* focus outline comes from the global :focus-visible rule — color alone is not an indicator */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.form__note{font-size:15px;line-height:1.6;color:var(--muted-2);margin:0;}
.form button.btn{cursor:pointer;font-family:var(--ui);justify-self:start;}
.note{padding:16px 20px;border-left:3px solid var(--bronze);background:#F4F2EF;
  font-size:17px;line-height:1.6;color:var(--ink);}
.note--err{border-left-color:#9A3412;}
.note a{color:var(--bronze);}
.contact__info .cblock{padding:20px 0;}
.contact__info .cblock:first-child{padding-top:0;}
.contact__info .eyebrow{display:block;margin-bottom:8px;}
.contact__info p{color:var(--ink);font-size:17px;line-height:1.6;margin:0;}
.contact__info .rule{margin:0;}

/* ---- projects grid ---- */
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,34px);}
.pgrid__item{margin:0;}
.pgrid__item img{width:100%;height:clamp(210px,19vw,290px);object-fit:cover;display:block;}
.pgrid__item figcaption{padding-top:16px;}
.pgrid__item figcaption .eyebrow{display:block;margin-bottom:6px;}
.pgrid__item p{font-size:16.5px;line-height:1.62;margin:0;}

/* services index: 7 services sit better 4-up than 3-up with one orphan */
.rel--four{grid-template-columns:repeat(4,1fr);}

/* breadcrumb on a light hero (index pages) */
.crumb--dark a{color:var(--muted);}
.crumb--dark a:hover,.crumb--dark a:focus-visible{color:var(--bronze);border-bottom-color:currentColor;}
.crumb--dark span{color:var(--muted-2);}

/* ---- tablet: 700-1023px ----
   Below 1024 the desktop grids get cramped; above 700 the phone stack wastes half the width. */
@media(min-width:700px) and (max-width:1023px){
  .rel,.rel--four,.pgrid{grid-template-columns:repeat(2,1fr);gap:clamp(24px,3vw,34px);}
  .idx__row{grid-template-columns:40px 20% 1fr;gap:4px 18px;}
  .idx__row h3,.idx__row p{grid-column:3;}
  .idx__row--static,.idx__row--nothumb{grid-template-columns:40px 1fr;}
  .idx__row--static h3,.idx__row--static p,
  .idx__row--nothumb h3,.idx__row--nothumb p{grid-column:2;}
  .step{padding:26px 18px 0 0;}
  .facts,.proof__grid{gap:24px;}
  .stmt,.proof__top{grid-template-columns:1fr;gap:28px;}
  .stmt__text h2,.stmt__text p,.proof p.lede{max-width:none;}
  .stmt__shot img,.proof__shot img{height:clamp(240px,34vw,340px);}
  .contact{grid-template-columns:1fr;gap:40px;}
  .ft__cols{grid-template-columns:1fr 1fr;gap:28px;}
  .sec--dark + .sec{padding-top:80px;}
  .gal{grid-template-columns:1fr;}
  .gal__item--lead img,.gal__col .gal__item img{height:clamp(200px,34vw,300px);}
  .gal__col{grid-template-columns:1fr 1fr;grid-auto-flow:column;}
}

/* ---- phone additions ---- */
@media(max-width:699px){
  .form__row{grid-template-columns:1fr;}
  .contact{grid-template-columns:1fr;gap:34px;}
  .pgrid{grid-template-columns:1fr;}
  .rel--four{grid-template-columns:1fr;}
  .pgrid__item img{height:clamp(200px,52vw,260px);}
}

/* the horizontal hero gradient needs to go vertical on anything narrower than a laptop */
@media(max-width:1023px){
  .sec--hero-img::after{
    background:linear-gradient(180deg,rgba(20,18,16,.86) 0%,rgba(20,18,16,.80) 60%,rgba(20,18,16,.86) 100%);}
}

/* Phone: no hover to open a dropdown, so the child links sit inline under the parent. */

/* ---- mobile nav toggle (shown from 960px down; see the HEADER v2 block) ---- */
.hd__toggle{display:none;align-items:center;gap:10px;background:none;border:0;
  padding:8px 0;cursor:pointer;font-family:var(--ui);font-size:13px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink);}
.hd__toggle-bars{display:inline-block;width:20px;}
.hd__toggle-bars span{display:block;height:1.5px;background:var(--ink);margin:4px 0;
  transition:transform .22s var(--ease),opacity .22s var(--ease);}
@media(prefers-reduced-motion:reduce){.hd__toggle-bars span{transition:none;}}

/* ============================================================================
   HEADER v2
   Utility bar (phone + service area + license), lockup, editorial services
   dropdown, sticky condensing bar, scroll hairline, full-screen mobile panel.
   Everything that hides content is gated behind .js-reveal, so with JS off the
   header is a plain, complete, usable header.
   ========================================================================== */
.hd{
  position:sticky;top:0;z-index:60;background:var(--paper);
  border-bottom:1px solid var(--hair);
  transition:box-shadow .25s var(--ease);
}
.hd::after{content:none;}

/* --- utility bar --- */
.hd__util{
  border-bottom:1px solid var(--hair);background:#F4F2EF;
  overflow:hidden;max-height:46px;
  transition:max-height .28s var(--ease),opacity .2s var(--ease);
}
.hd__util-in{display:flex;align-items:center;gap:26px;padding-top:11px;padding-bottom:11px;}
.hd__util-item{
  font-family:var(--ui);font-size:12px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);
}
.hd__util-item--quiet{color:var(--muted-2);}
.hd__util-phone{
  margin-left:auto;display:inline-flex;align-items:center;gap:8px;
  font-family:var(--ui);font-size:13.5px;font-weight:700;letter-spacing:.06em;
  color:var(--bronze);text-decoration:none;
}
.hd__util-phone:hover,.hd__util-phone:focus-visible{color:var(--ink);}
.hd__util-icon{flex:0 0 auto;}

/* --- main bar --- */
.hd__bar{background:var(--paper);}
.hd__in{display:flex;align-items:center;gap:28px;padding-top:20px;padding-bottom:20px;
  transition:padding .25s var(--ease);}

.hd__lockup{display:flex;align-items:center;gap:13px;text-decoration:none;color:inherit;}
.hd__monogram{
  display:grid;place-items:center;width:42px;height:42px;flex:0 0 auto;
  border:1px solid var(--ink);background:var(--ink);color:var(--paper);
  font-family:var(--display);font-size:21px;font-weight:700;line-height:1;padding-bottom:2px;
  transition:background .2s var(--ease),color .2s var(--ease),width .25s var(--ease),height .25s var(--ease);
}
.hd__lockup:hover .hd__monogram,.hd__lockup:focus-visible .hd__monogram{background:var(--bronze);border-color:var(--bronze);}
.hd__names{display:flex;flex-direction:column;}
.hd__mark{font-family:var(--display);font-size:23px;font-weight:700;letter-spacing:.14em;color:var(--ink);line-height:1.05;}
.hd__sub{font-family:var(--ui);font-size:9.5px;font-weight:600;letter-spacing:.3em;color:var(--muted);margin-top:3px;}

/* --- nav --- */
.hd__panel{margin-left:auto;}
.hd__nav{display:flex;gap:30px;align-items:center;list-style:none;margin:0;padding:0;}
.hd__nav li{position:relative;}
.hd__nav > li > a{
  display:inline-block;padding:8px 0;font-family:var(--ui);font-size:14px;font-weight:500;
  letter-spacing:.02em;text-decoration:none;color:var(--ink);position:relative;
}
/* the hairline is the design language, so the nav underline is one too */
.hd__nav > li > a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--bronze);
  transform:scaleX(0);transform-origin:left center;transition:transform .28s var(--ease);
}
.hd__nav > li:hover > a::after,
.hd__nav > li:focus-within > a::after,
.hd__nav > .current-menu-item > a::after,
.hd__nav > .current-menu-ancestor > a::after{transform:scaleX(1);}
.hd__nav a:hover{color:var(--bronze);}
.hd__nav .current-menu-item > a,.hd__nav .current-menu-ancestor > a{color:var(--bronze);}
.hd__nav .menu-item-has-children > a{padding-right:16px;}
.hd__nav .menu-item-has-children > a::before{
  content:"";position:absolute;right:0;top:50%;width:5px;height:5px;
  border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:translateY(-4px) rotate(45deg);opacity:.55;
  transition:transform .22s var(--ease);
}
.hd__nav .menu-item-has-children:hover > a::before,
.hd__nav .menu-item-has-children:focus-within > a::before{transform:translateY(-2px) rotate(-135deg);}

/* --- services dropdown: an editorial index, not a plain list --- */
.hd__nav .sub-menu{
  position:absolute;top:calc(100% + 14px);left:-26px;z-index:70;
  width:min(660px,88vw);margin:0;padding:22px 26px 18px;list-style:none;
  background:var(--paper);border:1px solid var(--hair);
  box-shadow:0 26px 60px -30px rgba(28,25,23,.4);
  display:grid;grid-template-columns:1fr 1fr;gap:0 26px;
  counter-reset:svc;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s;
}
.hd__nav .sub-menu::before{
  content:"Services";grid-column:1 / -1;
  font-family:var(--ui);font-size:11px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--bronze);
  padding-bottom:12px;margin-bottom:6px;border-bottom:1px solid var(--hair);
}
.hd__nav li:hover > .sub-menu,
.hd__nav li:focus-within > .sub-menu{opacity:1;visibility:visible;transform:none;}
.hd__nav .sub-menu li{counter-increment:svc;}
.hd__nav .sub-menu a{
  display:flex;gap:12px;align-items:baseline;padding:11px 10px 11px 8px;
  font-family:var(--body);font-size:16px;line-height:1.35;color:var(--ink);
  text-decoration:none;border-bottom:1px solid transparent;transition:background .18s,color .18s;
}
.hd__nav .sub-menu a::before{
  content:counter(svc,decimal-leading-zero);
  font-family:var(--ui);font-size:11px;font-weight:700;letter-spacing:.12em;
  color:var(--bronze);flex:0 0 auto;
}
.hd__nav .sub-menu a:hover,.hd__nav .sub-menu a:focus-visible{background:#F4F2EF;color:var(--bronze);}

/* --- header CTA --- */
.hd__actions{display:flex;align-items:center;}
.hd__cta{
  display:inline-flex;align-items:center;gap:10px;white-space:nowrap;
  font-family:var(--ui);font-size:14px;font-weight:600;letter-spacing:.02em;
  text-decoration:none;color:var(--paper);background:var(--ink);
  border:1px solid var(--ink);padding:13px 22px;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
}
.hd__cta:hover,.hd__cta:focus-visible{background:var(--bronze);border-color:var(--bronze);color:#fff;}
.hd__cta-arrow{display:inline-block;transition:transform .22s var(--ease);}
.hd__cta:hover .hd__cta-arrow{transform:translateX(4px);}

/* --- scroll progress hairline --- */
.hd__progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:transparent;pointer-events:none;}
.hd__progress-fill{display:block;height:100%;width:0;background:var(--bronze);transition:width .1s linear;}

/* --- condensed state on scroll --- */
.hd.is-stuck{box-shadow:0 10px 30px -22px rgba(28,25,23,.55);}
.hd.is-stuck .hd__util{max-height:0;opacity:0;border-bottom-color:transparent;}
.hd.is-stuck .hd__in{padding-top:12px;padding-bottom:12px;}
.hd.is-stuck .hd__monogram{width:36px;height:36px;font-size:18px;}
.hd.is-stuck .hd__mark{font-size:20px;}

/* --- mobile panel --- */
.hd__panel-foot{display:none;}
@media(max-width:960px){
  .hd__actions{display:none;}
  .hd__util-item{display:none;}
  .hd__util-item--quiet{display:none;}
  .hd__util-phone{margin-left:0;}
  .hd__util-in{justify-content:space-between;}
  .hd__util-in::before{
    content:"Phoenix &middot; Scottsdale";content:"Phoenix · Scottsdale";
    font-family:var(--ui);font-size:11px;font-weight:600;letter-spacing:.14em;
    text-transform:uppercase;color:var(--muted-2);
  }
  .js-reveal .hd__toggle{display:inline-flex;margin-left:auto;}
  .js-reveal .hd__panel{
    position:fixed;inset:0;z-index:80;margin:0;
    display:flex;flex-direction:column;justify-content:center;gap:6px;
    padding:96px 26px 40px;background:var(--paper);
    opacity:0;visibility:hidden;transform:translateY(-10px);
    transition:opacity .26s var(--ease),transform .26s var(--ease),visibility .26s;
    overflow-y:auto;
  }
  .js-reveal .hd__panel.is-open{opacity:1;visibility:visible;transform:none;}
  .hd__panel .hd__nav{flex-direction:column;align-items:stretch;gap:0;}
  .hd__panel .hd__nav > li{border-bottom:1px solid var(--hair);}
  .hd__panel .hd__nav > li > a{
    font-family:var(--display);font-size:30px;font-weight:700;letter-spacing:-.02em;
    padding:18px 0 14px;
  }
  .hd__panel .hd__nav > li > a::after{display:none;}
  .hd__panel .hd__nav .menu-item-has-children > a::before{display:none;}
  .hd__panel .sub-menu{
    position:static;opacity:1;visibility:visible;transform:none;width:auto;
    display:grid;grid-template-columns:1fr;gap:0;border:0;box-shadow:none;
    background:transparent;padding:0 0 16px;
  }
  .hd__panel .sub-menu::before{display:none;}
  .hd__panel .sub-menu a{font-size:15px;padding:7px 0;color:var(--muted);}
  .hd__panel-foot{display:block;padding-top:26px;}
  .hd__panel-cta{display:inline-block;}
  .hd__panel-phone{
    display:block;margin-top:16px;font-family:var(--display);font-size:24px;font-weight:700;
    color:var(--bronze);text-decoration:none;
  }
  .hd__panel-note{
    margin-top:10px;font-family:var(--ui);font-size:11.5px;font-weight:600;
    letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);
  }
  /* the toggle turns into a close control while the panel is open */
  .hd.is-nav-open .hd__toggle{position:fixed;top:22px;right:24px;z-index:90;}
  .hd.is-nav-open .hd__toggle-bars span:nth-child(1){transform:translateY(5.5px) rotate(45deg);}
  .hd.is-nav-open .hd__toggle-bars span:nth-child(2){opacity:0;}
  .hd.is-nav-open .hd__toggle-bars span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg);}
  body.nav-open{overflow:hidden;}
}
@media(max-width:420px){
  .hd__panel .hd__nav > li > a{font-size:26px;}
  .hd__mark{font-size:20px;}
}
@media(prefers-reduced-motion:reduce){
  .hd,.hd__util,.hd__in,.hd__monogram,.hd__panel,.hd__nav .sub-menu,
  .hd__nav > li > a::after,.hd__cta,.hd__cta-arrow,.hd__progress-fill{transition:none;}
}

/* ============================================================================
   CONTACT PAGE v2
   ========================================================================== */
.contact-hero .hero__lede{max-width:60ch;}

/* The contact hero carries a photo now, so the call/form pair has to reverse with it.
   Scoped to .sec--hero-img rather than .contact-hero so any hero that gains an image
   gets the same treatment instead of needing a second rule. */
.sec--hero-img .qa__call,
.sec--hero-img .qa__form{border-top-color:rgba(250,250,249,.30);}
.sec--hero-img .qa__call{border-top-color:var(--bronze-lt);}
.sec--hero-img .qa__num{color:var(--paper);}
.sec--hero-img .qa__call:hover .qa__num,.sec--hero-img .qa__call:focus-visible .qa__num,
.sec--hero-img .qa__form:hover .qa__num,.sec--hero-img .qa__form:focus-visible .qa__num{color:var(--bronze-lt);}
.sec--hero-img .qa__meta{color:#D8D3CE;}
.sec--hero-img .qa__or{color:#D8D3CE;}

/* two ways in, presented as equals */
.qa{display:flex;align-items:stretch;gap:28px;margin-top:38px;flex-wrap:wrap;}
.qa__call,.qa__form{
  display:flex;flex-direction:column;gap:6px;text-decoration:none;color:inherit;
  padding:20px 26px 20px 0;border-top:1px solid var(--hair);min-width:min(300px,100%);
}
.qa__call{border-top-color:var(--bronze);}
.qa__num{font-family:var(--display);font-size:clamp(24px,2.4vw,30px);font-weight:700;
  letter-spacing:-.01em;color:var(--ink);transition:color .18s;}
.qa__call:hover .qa__num,.qa__call:focus-visible .qa__num,
.qa__form:hover .qa__num,.qa__form:focus-visible .qa__num{color:var(--bronze);}
.qa__meta{font-family:var(--ui);font-size:13px;color:var(--muted-2);line-height:1.5;}
.qa__or{align-self:center;font-family:var(--body);font-style:italic;font-size:16px;color:var(--muted-2);}

/* form */
.form__head{margin-bottom:26px;}
.form__head h2{font-size:clamp(24px,2.4vw,30px);margin-bottom:10px;}
.form__head p{font-size:16.5px;line-height:1.6;max-width:52ch;}
.form__foot{display:flex;align-items:center;gap:22px;flex-wrap:wrap;}
.field input::placeholder,.field textarea::placeholder{color:#A8A29E;}
/* :user-invalid only fires after the person has interacted, so nothing is red on arrival */
.field input:user-invalid,.field textarea:user-invalid{border-color:#9A3412;}
.field select{appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
                   linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 14px) 20px,calc(100% - 9px) 20px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:28px;}
.note strong{color:var(--ink);font-weight:600;}
.note--ok{border-left-color:#3F6212;}

/* sidebar */
.contact__info{position:sticky;top:150px;}
.cblock--call .cblock__phone{
  display:inline-block;margin:6px 0 8px;font-family:var(--display);
  font-size:clamp(26px,2.6vw,32px);font-weight:700;letter-spacing:-.01em;
  color:var(--bronze);text-decoration:none;border-bottom:1px solid transparent;
}
.cblock--call .cblock__phone:hover,.cblock--call .cblock__phone:focus-visible{border-bottom-color:currentColor;}
.clist{list-style:none;margin:6px 0 0;padding:0;}
.clist li{position:relative;padding-left:20px;font-size:16.5px;line-height:1.6;color:var(--muted);margin-bottom:8px;}
.clist li::before{content:"";position:absolute;left:0;top:11px;width:9px;height:1px;background:var(--bronze);}
.cblock__aside{margin-top:10px;font-size:15px;font-style:italic;color:var(--muted-2);}

@media(max-width:1023px){
  .contact__info{position:static;}
}
@media(max-width:699px){
  .qa{gap:0;margin-top:28px;}
  .qa__or{display:none;}
  .qa__call,.qa__form{padding:18px 0;min-width:100%;}
  .form__foot{gap:14px;}
  .form__foot .btn{width:100%;text-align:center;}
}

/* 2026-09-28 service FAQ accordion: hairlines only, native <details>, no JS needed */
.faq__list{border-top:1px solid var(--hair);}
.faq__item{border-bottom:1px solid var(--hair);}
.faq__item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding:22px 0;}
.faq__item summary::-webkit-details-marker{display:none;}
.faq__item summary h3{font-family:var(--display);font-size:21px;font-weight:700;letter-spacing:0;word-spacing:.07em;line-height:1.3;margin:0;}
.faq__item summary:focus-visible{outline:2px solid var(--bronze);outline-offset:4px;}
.faq__icon{flex:0 0 14px;height:14px;position:relative;}
.faq__icon::before,.faq__icon::after{content:"";position:absolute;left:0;top:6px;width:14px;height:2px;background:var(--bronze);
  transition:transform .25s var(--ease,ease);}
.faq__icon::after{transform:rotate(90deg);}
.faq__item[open] .faq__icon::after{transform:rotate(0);}
.faq__item p{max-width:760px;color:var(--muted);padding:0 0 24px;}
@media (max-width:699px){.faq__item summary{padding:18px 0;}.faq__item summary h3{font-size:18px;}}

/* Client logo image (2026-10-21) replaces the typeset monogram lockup. SVG, so height alone sets the size. */
.hd__logo{display:block;height:56px;width:auto;transition:height .2s ease;}
.hd.is-stuck .hd__logo{height:46px;}
.ft__logo{display:block;height:72px;width:auto;margin-bottom:16px;}
@media(max-width:699px){.hd__logo{height:44px;}.hd.is-stuck .hd__logo{height:40px;}.ft__logo{height:60px;}}
@media(prefers-reduced-motion:reduce){.hd__logo{transition:none;}}

/* ============================================================================
   REDESIGN 2026-10-21 (client chose mockup A, reference az.123remodeling.com)
   Bright and photo-led: white paper, Playfair 500 headings, Inter body, bronze
   buttons, rounded photography, light bands instead of dark ones. This layer sits
   last and overrides the Editorial Serif rules above it; copy did not change.
   ========================================================================== */
:root{
  --paper:#FFFFFF;
  --soft:#F6F4F1;
  --body:"Inter",system-ui,-apple-system,sans-serif;
  --radius:10px;
  --bronze-dk:#8A4522;
}
body{font-size:17px;line-height:1.7;}
h1,h2,h3,h4{font-weight:500;letter-spacing:-.01em;}
h1{line-height:1.08;}
.sec-head h2,.sec-title{margin:14px 0 0;}
.sec-title{font-size:clamp(30px,3.6vw,46px);line-height:1.14;max-width:24ch;}
.sec-title--wide{max-width:30ch;}

/* buttons: solid bronze, softly rounded */
.btn{border-radius:6px;background:var(--bronze);border-color:var(--bronze);color:#fff;}
.btn:hover,.btn:focus-visible{background:var(--bronze-dk);border-color:var(--bronze-dk);color:#fff;}
.btn--bronze:hover,.btn--bronze:focus-visible{background:var(--bronze-dk);border-color:var(--bronze-dk);color:#fff;}
.ulink{color:var(--ink);font-weight:600;border-bottom:2px solid var(--bronze);padding-bottom:3px;}
.ulink:hover,.ulink:focus-visible{color:var(--bronze);}
.hd__cta{background:var(--bronze);border-color:var(--bronze);border-radius:6px;color:#fff;}
.hd__cta:hover,.hd__cta:focus-visible{background:var(--bronze-dk);border-color:var(--bronze-dk);}
.hd__util{background:var(--soft);}
.hd__panel .hd__nav > li > a{font-weight:500;}

/* rounded photography everywhere */
.stmt__shot img,.proof__shot img,.proc__shot img,.pgrid__item img,
.gal__item,.rel__media,.idx__thumb{border-radius:var(--radius);}
.gal__item figcaption{left:14px;bottom:14px;border-radius:4px;background:#fff;color:var(--ink);}

/* dark bands become light ones */
.sec--dark{background:var(--soft);color:var(--ink);}
.sec--dark h2{color:var(--ink);}
.sec--dark p{color:var(--muted);}
.sec--dark .eyebrow{color:var(--bronze);}
.rule--dark{background:var(--hair);}
.proof__grid p{color:var(--ink);font-family:var(--display);font-size:21px;}
.cta{background:var(--soft);color:var(--ink);}
.cta h2{color:var(--ink);}
.cta p{color:var(--muted);}
.cta .ulink--light{color:var(--ink);border-bottom-color:var(--bronze);}

/* inner-page photo heroes: text on white beside the photo, not text over a dark photo */
.sec--hero-img{display:grid;grid-template-columns:1fr 1.05fr;align-items:stretch;padding:0;
  background:var(--paper);min-height:clamp(460px,46vw,620px);}
.sec--hero-img::after{content:none;}
.sec--hero-img .hero__bg{position:relative;inset:auto;z-index:auto;order:2;min-height:320px;}
.sec--hero-img .hero__bg img{position:absolute;inset:0;}
.sec--hero-img .hero__inner{order:1;align-self:center;max-width:none;width:100%;
  padding:clamp(48px,6vw,96px) clamp(28px,4vw,64px) clamp(48px,6vw,96px) max(28px,calc((100vw - var(--wrap))/2 + 28px));}
.sec--hero-img h1{color:var(--ink);font-size:clamp(36px,4.2vw,58px);}
.sec--hero-img .lede{color:var(--muted);}
.sec--hero-img .eyebrow--light{color:var(--bronze);}
.sec--hero-img .rule--onimg{background:var(--hair);}
.sec--hero-img .facts--light p{color:var(--ink);}
.sec--hero-img .btn--light{background:var(--bronze);border-color:var(--bronze);color:#fff;}
.sec--hero-img .ulink--light{color:var(--ink);border-bottom-color:var(--bronze);}
.sec--hero-img .crumb a{color:var(--muted);}
.sec--hero-img .crumb a:hover,.sec--hero-img .crumb a:focus-visible{color:var(--bronze);}
.sec--hero-img .crumb span{color:var(--muted-2);}
.sec--hero-img .qa__call,.sec--hero-img .qa__form{border-top-color:var(--hair);}
.sec--hero-img .qa__call{border-top-color:var(--bronze);}
.sec--hero-img .qa__num{color:var(--ink);}
.sec--hero-img .qa__meta,.sec--hero-img .qa__or{color:var(--muted-2);}
.js-reveal .sec--hero-img .hero__bg img{transform:none;transition:none;}
@media(max-width:1023px){
  .sec--hero-img{grid-template-columns:1fr;min-height:0;}
  .sec--hero-img::after{content:none;}
  .sec--hero-img .hero__bg{order:0;height:clamp(240px,52vw,420px);min-height:0;}
  .sec--hero-img .hero__inner{padding:40px 28px 48px;}
}
@media(max-width:699px){.sec--hero-img .hero__inner{padding:32px 20px 40px;}}

/* ---- homepage: photo mosaic ---- */
.mos{display:grid;grid-template-columns:1.15fr 1fr;grid-template-rows:repeat(2,clamp(220px,23vw,340px));gap:8px;}
.mos__tile{position:relative;overflow:hidden;display:block;color:#fff;text-decoration:none;background:var(--soft);}
.mos__tile--lead{grid-row:span 2;}
.mos__tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease);}
.mos__tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,16,14,0) 50%,rgba(20,16,14,.62) 100%);}
.mos__tile--quiet::after{content:none;}
.mos__tile:hover img,.mos__tile:focus-visible img{transform:scale(1.03);}
.mos__label{position:absolute;left:clamp(20px,2.6vw,38px);bottom:clamp(16px,2.2vw,30px);z-index:1;
  font-family:var(--display);font-weight:500;font-size:clamp(28px,3.4vw,48px);line-height:1;}
.intro{padding:clamp(48px,6vw,84px) 0 clamp(56px,6vw,90px);}
.intro__grid{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(28px,5vw,72px);align-items:end;}
.intro__h1{font-size:clamp(38px,4.6vw,62px);margin-top:16px;}
.intro__side .lede{margin-bottom:26px;}

/* ---- homepage: service cards ---- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,34px);margin-top:42px;}
.card{display:block;text-decoration:none;color:inherit;}
.card__ph{display:block;aspect-ratio:4/3;overflow:hidden;border-radius:var(--radius);margin-bottom:20px;background:var(--soft);position:relative;}
.card__ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease);}
.card:hover .card__ph img,.card:focus-visible .card__ph img{transform:scale(1.04);}
.card h3{margin-bottom:6px;transition:color .18s;}
.card:hover h3,.card:focus-visible h3{color:var(--bronze);}
.card p{font-size:16px;}
.more{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--hair);margin-top:52px;}
.more__item{display:flex;flex-direction:column;gap:6px;padding:24px 22px 0 0;text-decoration:none;color:inherit;}
.more__item b{font-family:var(--display);font-weight:500;font-size:20px;line-height:1.25;transition:color .18s;}
.more__item span{font-size:15px;color:var(--muted);line-height:1.55;}
.more__item:hover b,.more__item:focus-visible b{color:var(--bronze);}

/* ---- homepage: light band with copy beside a photo ---- */
.band{background:var(--soft);padding:clamp(64px,8vw,110px) 0;}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center;}
.split .lede{margin:20px 0 0;max-width:52ch;}
.split__ph{margin:0;aspect-ratio:5/4;overflow:hidden;border-radius:var(--radius);position:relative;}
.split__ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.band .facts{border-top:1px solid var(--hair);margin-top:40px;gap:28px;}
.band .facts p{font-family:var(--display);font-size:20px;color:var(--ink);line-height:1.3;}

/* ---- homepage: process + work grid ---- */
.sec--top{padding-top:clamp(64px,8vw,110px);}
.sec--top .steps{margin-top:40px;}
.step__num{font-weight:500;}
.work{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:repeat(2,clamp(200px,20vw,300px));gap:14px;margin-top:56px;}
.work__tile{position:relative;overflow:hidden;border-radius:var(--radius);background:var(--soft);display:block;}
.work__tile--lead{grid-row:span 2;}
.work__tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.work__tag{position:absolute;left:16px;bottom:16px;background:#fff;color:var(--ink);border-radius:4px;padding:7px 12px;
  font-family:var(--ui);font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;}

/* ---- homepage: service area chips ---- */
.chips{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px;}
.chip{display:inline-block;border:1px solid var(--hair);border-radius:40px;padding:10px 22px;font-family:var(--ui);
  font-size:15px;font-weight:500;color:var(--ink);text-decoration:none;background:#fff;}
a.chip:hover,a.chip:focus-visible{border-color:var(--bronze);color:var(--bronze);}

@media(min-width:700px) and (max-width:1023px){
  .intro__grid{grid-template-columns:1fr;align-items:start;}
  .cards{grid-template-columns:repeat(3,1fr);gap:18px;}
  .more{grid-template-columns:repeat(2,1fr);}
  .split{grid-template-columns:1fr;}
  .work{grid-template-columns:1fr 1fr;grid-template-rows:auto;}
  .work__tile{aspect-ratio:4/3;}
  .work__tile--lead{grid-row:auto;grid-column:1 / -1;aspect-ratio:16/9;}
}
@media(max-width:699px){
  .mos{grid-template-columns:1fr 1fr;grid-template-rows:clamp(200px,58vw,280px);gap:6px;}
  .mos__tile--lead{grid-row:auto;}
  .mos__tile--quiet{display:none;}
  .mos__label{font-size:26px;left:16px;bottom:14px;}
  .intro__grid{grid-template-columns:1fr;gap:18px;}
  .cards{grid-template-columns:1fr;gap:34px;}
  .more{grid-template-columns:1fr;}
  .more__item{padding:20px 0;border-bottom:1px solid var(--hair);}
  .split{grid-template-columns:1fr;}
  .band .facts{grid-template-columns:1fr;gap:18px;}
  .work{grid-template-columns:1fr 1fr;grid-template-rows:auto;gap:10px;}
  .work__tile{aspect-ratio:1/1;}
  .work__tile--lead{grid-row:auto;grid-column:1 / -1;aspect-ratio:4/3;}
}
@media(prefers-reduced-motion:reduce){.mos__tile img,.card__ph img{transition:none;}
  .mos__tile:hover img,.card:hover .card__ph img{transform:none;}}

/* Utility bar on phones (Bryce 2026-10-21): with large system text the area label and phone wrapped to two lines
   and the fixed 46px bar cut them in half. Keep both on one line; the area label gives way first. */
.hd__util-in{flex-wrap:nowrap;}
.hd__util-phone{white-space:nowrap;flex:0 0 auto;}
@media(max-width:960px){
  .hd__util-in{gap:14px;}
  .hd__util-in::before{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1 1 auto;}
}
/* below ~370px of layout width (small phones, or larger system text) the label cannot fit whole: drop it, keep the phone */
@media(max-width:370px){.hd__util-in::before{content:none;}.hd__util-in{justify-content:flex-end;}}
/* the 46px cap clipped the bar under browser text scaling; size it in em so it grows with the text */
.hd__util{max-height:6em;}

/* homepage: second row of service cards, four across (replaces the text-only .more list) */
.cards--four{grid-template-columns:repeat(4,1fr);gap:clamp(18px,2vw,28px);margin-top:44px;}
.cards--four h3{font-size:clamp(19px,1.6vw,22px);}
.cards--four p{font-size:15px;}
@media(min-width:700px) and (max-width:1023px){.cards--four{grid-template-columns:repeat(2,1fr);}}
@media(max-width:699px){.cards--four{grid-template-columns:1fr;gap:34px;margin-top:34px;}}

/* phones: the utility bar carries the phone number only. With large system text the area label
   either wrapped or truncated mid-word; the service area is repeated in the hero and footer anyway. */
@media(max-width:960px){.hd__util-in::before{content:none;}.hd__util-in{justify-content:center;}}

/* 2026-10-21: the Service area / We build / Pricing strip was removed sitewide (client: redundant), so the
   proof band no longer needs room for it under the photo row. */
.proof__top{margin-bottom:0;}