/* ============================================================
   HOME - front page only
   ============================================================ */

/* ---------- hero ---------- */
.hero{min-height:100vh;display:grid;place-items:center;text-align:center;position:relative;overflow:hidden;background:radial-gradient(120% 90% at 30% 12%,#6E1C20 0%,var(--m-700) 38%,var(--m-850) 72%,var(--m-950) 100%);padding:130px 20px 90px}
.hero::before{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E");opacity:.06;mix-blend-mode:soft-light;pointer-events:none}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 95% at 50% 28%,transparent 52%,rgba(10,2,3,.42) 100%);pointer-events:none}
.hero-inner{position:relative}
.hero-m{font-family:var(--brand);font-size:clamp(10rem,28vw,21rem);line-height:.86;color:var(--ivory);text-shadow:0 2px 2px rgba(18,4,5,.35),0 12px 30px rgba(14,3,4,.5),0 26px 60px rgba(14,3,4,.35);user-select:none}
.hero-wordmark{font-family:var(--brand);font-size:clamp(1.5rem,3.4vw,2.4rem);letter-spacing:.58em;text-indent:.58em;color:var(--ivory);margin-top:34px;text-shadow:0 2px 6px rgba(14,3,4,.45)}
.hero-rule{width:min(360px,70vw);height:1px;background:linear-gradient(90deg,transparent,rgba(236,225,208,.55),transparent);margin:26px auto}
.hero-sub{font-size:clamp(10px,1.3vw,12.5px);letter-spacing:.52em;text-indent:.52em;text-transform:uppercase;color:#DECFBB}
.hero h1{font-style:italic;font-weight:300;font-size:clamp(1.45rem,2.5vw,2.1rem);color:#EADDCB;margin-top:54px;letter-spacing:.01em}
.hero-keywords{margin-top:20px;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--rose);line-height:2.2}
.hero .hero-actions{margin-top:44px;display:flex;gap:18px;justify-content:center;flex-wrap:wrap}
/* Desktop hero: each button sizes to its own label rather than sharing the
   row equally, so "Request a consultation" reads wider than "View services".
   Mobile keeps the shared stacked treatment from style.css. */
@media (min-width:641px){
  .hero .hero-actions{max-width:none}
  .hero .hero-actions>.btn{flex:0 0 auto;min-width:0}
}
.cue{width:1px;height:64px;margin:56px auto 0;background:linear-gradient(rgba(236,225,208,0),rgba(236,225,208,.45));position:relative}
.cue::after{content:"";position:absolute;left:-2.5px;top:0;width:6px;height:6px;border-radius:50%;background:var(--ivory);animation:drop 2.6s ease-in-out infinite}
@keyframes drop{0%{top:0;opacity:0}25%{opacity:1}85%{opacity:1}100%{top:calc(100% - 6px);opacity:0}}

@keyframes m-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes m-settle{from{opacity:0;letter-spacing:.95em;text-indent:.95em}to{opacity:1;letter-spacing:.58em;text-indent:.58em}}
.js .hero-m{animation:m-rise 1.3s cubic-bezier(.2,.6,.2,1) .1s both}
.js .hero-wordmark{animation:m-settle 1.7s cubic-bezier(.2,.6,.2,1) .35s both}
.js .hero-rule,.js .hero-sub{animation:m-rise 1.1s cubic-bezier(.2,.6,.2,1) .85s both}
.js .hero h1,.js .hero-keywords{animation:m-rise 1.1s cubic-bezier(.2,.6,.2,1) 1.05s both}
.js .hero .hero-actions,.js .cue{animation:m-rise 1.1s cubic-bezier(.2,.6,.2,1) 1.25s both}

/* ---------- intro (light) ---------- */
.intro{background:var(--paper);padding:clamp(80px,10vw,140px) 0}
.intro .container{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(44px,6vw,100px);align-items:start}
.intro .eyebrow{color:var(--m-500)}
.intro h2{font-size:clamp(2.1rem,3.8vw,3.3rem);font-weight:400;color:var(--m-800)}
.intro h2 em{font-style:italic;color:var(--m-500)}
.intro .copy p{color:var(--ink-soft);font-size:16px;margin-bottom:20px}
.intro .copy .division{font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--m-500)}
.intro .copy .division a{color:var(--m-800);border-bottom:1px solid var(--m-500);padding-bottom:3px}
.intro .copy .division a:hover{color:var(--m-500)}

/* ---------- service panels ---------- */
.svc-panel{position:relative;display:grid;grid-template-columns:1.05fr .95fr;min-height:76vh;border-top:1px solid var(--hairline-soft);overflow:hidden}
.svc-text{position:relative;display:flex;flex-direction:column;justify-content:center;padding:clamp(56px,7vw,110px) clamp(24px,6vw,90px)}
.ghost{position:absolute;top:6%;left:2%;font-family:var(--serif);font-size:clamp(7rem,13vw,12rem);color:rgba(236,225,208,.045);line-height:1;pointer-events:none;user-select:none;font-style:italic}
.svc-text .eyebrow{margin-bottom:22px}
.svc-text h2{font-size:clamp(2.3rem,4.2vw,3.7rem);margin-bottom:24px;max-width:14ch}
.svc-text p{color:#D9C4BC;font-size:15.5px;max-width:52ch}
.svc-tags{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0 34px}
.svc-tags span{font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--rose-soft);border:1px solid var(--hairline);padding:8px 15px;border-radius:999px}
.svc-media{position:relative;min-height:340px;overflow:hidden}
.svc-media svg,.svc-media img{position:absolute;inset:0;width:100%;height:100%;transition:transform 1.4s cubic-bezier(.2,.6,.2,1)}
.svc-media img{object-fit:cover}
.svc-panel:hover .svc-media svg,.svc-panel:hover .svc-media img{transform:scale(1.035)}
.svc-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--m-900) 0%,rgba(44,9,11,0) 46%)}
.svc-panel.rev{grid-template-columns:.95fr 1.05fr}
.svc-panel.rev .svc-media{order:-1}
.svc-panel.rev .svc-media::after{background:linear-gradient(270deg,var(--m-900) 0%,rgba(44,9,11,0) 46%)}
.svc-media .media-label{position:absolute;bottom:20px;right:24px;z-index:2;font-size:8.5px;letter-spacing:.26em;text-transform:uppercase;color:rgba(236,225,208,.4)}
.svc-panel.rev .media-label{right:auto;left:24px}

.svc-panel.light{background:var(--paper);border-top:none}
.svc-panel.light + .svc-panel{border-top:none}
.svc-panel.light .eyebrow{color:var(--m-500)}
.svc-panel.light h2{color:var(--m-800)}
.svc-panel.light .svc-text p{color:var(--ink-soft)}
.svc-panel.light .ghost{color:rgba(76,23,29,.055)}
.svc-panel.light .svc-tags span{color:var(--m-600);border-color:var(--hd)}
.svc-panel.light .textlink{color:var(--m-700)}
.svc-panel.light .textlink:hover{color:var(--m-500)}
.svc-panel.light .media-label{color:rgba(76,23,29,.5)}
.svc-panel.light.rev .svc-media::after{background:linear-gradient(270deg,var(--paper) 0%,rgba(247,242,232,0) 46%)}

/* ---------- stats (light) ---------- */
.stats{background:var(--paper-2);display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:clamp(40px,4.5vw,64px) clamp(20px,3vw,44px);border-left:1px solid var(--hd-soft);text-align:center}
.stat:first-child{border-left:none}
.stat b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(1.7rem,2.8vw,2.4rem);color:var(--m-800);margin-bottom:8px}
.stat span{font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--m-500)}

/* ---------- sectors split (dark) ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;min-height:72vh}
.half{position:relative;display:flex;align-items:flex-end;padding:clamp(36px,5vw,70px);overflow:hidden;border-left:1px solid var(--hairline-soft)}
.half:first-child{border-left:none}
.half>svg,.half>img{position:absolute;inset:0;width:100%;height:100%;transition:transform 1.4s cubic-bezier(.2,.6,.2,1),opacity .8s}
.half>img{object-fit:cover}
.half::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(32,7,8,.25) 0%,rgba(32,7,8,.82) 78%)}
.half:hover>svg,.half:hover>img{transform:scale(1.04)}
.half-content{position:relative;z-index:2;max-width:44ch}
.half-content .eyebrow{margin-bottom:16px}
.half-content h3{font-size:clamp(1.9rem,3vw,2.7rem);margin-bottom:16px}
.half-content p{color:#DCC8C0;font-size:15px;margin-bottom:24px}

/* ---------- process (light) ---------- */
.process{background:var(--paper);padding:clamp(80px,10vw,140px) 0}
.process-head{text-align:center;max-width:680px;margin:0 auto clamp(48px,6vw,84px)}
.process-head .eyebrow{color:var(--m-500)}
.process-head h2{font-size:clamp(2.1rem,3.6vw,3.1rem);margin-top:20px;color:var(--m-800)}
.process .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--hd)}
.process .step{padding:36px clamp(18px,2.4vw,36px) 8px;border-left:1px solid var(--hd-soft)}
.process .step:first-child{border-left:none}
.process .step .num{font-family:var(--serif);font-style:italic;font-size:2.4rem;color:var(--m-500);line-height:1}
.process .step h3{font-family:var(--sans);font-weight:500;font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--m-700);margin:20px 0 12px}
.process .step p{font-size:13.5px;color:var(--ink-soft)}

/* ---------- testimonials: Google reviews carousel (dark) ---------- */
.g-reviews{background:radial-gradient(85% 130% at 50% 0%,rgba(236,225,208,.03),transparent 55%),var(--m-900);border-top:1px solid var(--hairline-soft);padding:clamp(80px,10vw,140px) 0}
.gr-head{text-align:center;max-width:680px;margin:0 auto clamp(44px,5vw,72px)}
.gr-head h2{font-size:clamp(2.1rem,3.6vw,3.1rem);margin-top:20px}
.gr-head h2 em{font-style:italic;font-weight:300;color:var(--rose-soft)}
.gr-scoreline{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:22px;flex-wrap:wrap}
.gr-glogo{width:24px;height:24px;flex:none}
.gr-score{font-family:var(--serif);font-weight:600;font-size:1.3rem;color:var(--ivory);line-height:1}
.gr-stars{display:inline-flex;gap:2px}
.gr-stars svg{width:15px;height:15px;fill:#FBBC04}
.gr-count{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--rose)}

.gr-carousel{position:relative}
.gr-track{display:flex;gap:clamp(16px,2vw,24px);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:6px 2px 10px;list-style:none;margin:0;-ms-overflow-style:none;scrollbar-width:none}
.gr-track::-webkit-scrollbar{display:none}
.gr-card{flex:0 0 min(348px,84vw);scroll-snap-align:start;background:#F7F2E8;border:1px solid rgba(78,16,19,.16);padding:clamp(24px,2.6vw,32px);display:flex;flex-direction:column;transition:transform .35s cubic-bezier(.2,.6,.2,1),box-shadow .35s}
.gr-card:hover{transform:translateY(-4px);box-shadow:0 18px 38px rgba(0,0,0,.35)}
.gr-card-top{display:flex;align-items:flex-start;gap:14px}
.gr-avatar{width:42px;height:42px;border-radius:50%;flex:none;display:grid;place-items:center;color:var(--ivory);font-family:var(--serif);font-style:italic;font-weight:500;font-size:1.25rem;user-select:none}
.gr-who{flex:1;min-width:0}
.gr-name{font-family:var(--serif);font-weight:600;font-size:1.15rem;color:var(--m-800);line-height:1.2}
.gr-date{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--rose-deep);margin-top:4px}
.gr-gmark{width:19px;height:19px;flex:none;margin-top:3px}
.gr-card .gr-stars{margin:16px 0 12px}
.gr-card .gr-stars svg{width:14px;height:14px}
.gr-text{font-size:14px;line-height:1.7;color:#5C353B;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;margin:0}
.gr-card.expanded .gr-text{-webkit-line-clamp:unset;display:block;overflow:visible}
.gr-more{margin-top:12px;align-self:flex-start;background:none;border:none;font-family:var(--sans);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--m-500);cursor:pointer;padding:0 0 3px;border-bottom:1px solid var(--rose);display:none;transition:color .3s}
.gr-more:hover{color:var(--m-800)}
.gr-card.clamped .gr-more{display:inline-block}
.gr-nav{display:flex;justify-content:center;gap:14px;margin-top:clamp(26px,3.5vw,40px)}
.gr-arrow{width:46px;height:46px;background:transparent;border:1px solid rgba(236,225,208,.3);display:grid;place-items:center;cursor:pointer;transition:background .3s,border-color .3s,opacity .25s}
.gr-arrow:hover{background:rgba(236,225,208,.08);border-color:rgba(236,225,208,.55)}
.gr-arrow svg{width:20px;height:20px;fill:var(--ivory)}
.gr-arrow[disabled]{opacity:.3;cursor:default;background:transparent;border-color:rgba(236,225,208,.2)}

.quotes-proof{margin-top:clamp(40px,5vw,64px);text-align:center;border-top:1px solid var(--hairline-soft);padding-top:30px}
.quotes-proof p{font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--rose);line-height:2.2}
.quotes-proof a{color:var(--rose-soft);border-bottom:1px solid rgba(169,118,122,.5);padding-bottom:2px;transition:color .3s}
.quotes-proof a:hover{color:var(--ivory)}
.quotes-note{margin-top:12px;font-size:10px;font-style:italic;letter-spacing:.05em;color:var(--rose-deep);text-transform:none}

/* Mobile: full-width cards with a small peek so the swipe is discoverable,
   and comfortable tap targets. The track scrolls inside itself, so this
   never introduces horizontal overflow on the page. */
@media (max-width:640px){
  .gr-head{margin-bottom:clamp(30px,7vw,44px)}
  .gr-scoreline{gap:9px;margin-top:18px}
  .gr-count{width:100%;letter-spacing:.2em}
  .gr-track{gap:12px;scroll-padding-left:2px}
  .gr-card{flex-basis:min(320px,86vw);padding:22px 20px}
  .gr-name{font-size:1.05rem}
  .gr-text{font-size:13.5px;line-height:1.65}
  .gr-avatar{width:38px;height:38px;font-size:1.1rem}
  .gr-more{padding-block:6px;margin-top:10px}
  .gr-nav{gap:16px;margin-top:22px}
  .gr-arrow{width:48px;height:48px}
  .gr-card:hover{transform:none;box-shadow:none}
}

@media (prefers-reduced-motion:reduce){
  .gr-track{scroll-behavior:auto}
  .gr-card{transition:none}
  .gr-card:hover{transform:none;box-shadow:none}
}

/* ---------- recent work (light) ---------- */
.work{background:var(--paper);padding:clamp(80px,10vw,140px) 0}
.work-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:clamp(36px,4.5vw,56px)}
.work-head .eyebrow{color:var(--m-500)}
.work-head h2{font-size:clamp(2.1rem,3.6vw,3.1rem);margin-top:18px;color:var(--m-800)}
.work-head>p{font-size:12.5px;color:var(--ink-soft);max-width:32ch;text-align:right}
.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px)}
.work-item{border:1px solid var(--hd)}
.work-item .media{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--paper-2)}
.work-item .media svg,.work-item .media img{position:absolute;inset:0;width:100%;height:100%;transition:transform 1.2s cubic-bezier(.2,.6,.2,1)}
.work-item .media img{object-fit:cover}
.work-item:hover .media svg,.work-item:hover .media img{transform:scale(1.04)}
.work-cap{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--hd);padding:12px 14px;font-size:8.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--m-500)}
.work-cap span:last-child{color:var(--rose-deep);white-space:nowrap}

/* ---------- faq (dark) ---------- */
.faq{background:radial-gradient(85% 130% at 50% 0%,rgba(236,225,208,.03),transparent 55%),var(--m-850);border-top:1px solid var(--hairline-soft);padding:clamp(80px,10vw,130px) 0}
.faq-head{text-align:center;max-width:640px;margin:0 auto}
.faq-head h2{font-size:clamp(2.1rem,3.6vw,3.1rem);margin-top:20px}
.faq-head p{color:#D9C4BC;font-size:15px;margin-top:16px}
.faq .faq-list{max-width:820px;margin:clamp(36px,5vw,56px) auto 0;border-top:1px solid var(--hairline)}
.faq details{border-bottom:1px solid var(--hairline)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:25px 4px;font-family:var(--serif);font-size:clamp(1.15rem,2vw,1.45rem);color:var(--ivory);transition:color .3s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--rose-soft)}
.faq .fx{font-family:var(--sans);font-weight:200;font-size:22px;color:var(--rose);line-height:1;transition:transform .3s;flex:none}
.faq details[open] .fx{transform:rotate(45deg)}
.faq details p{padding:0 4px 26px;color:#D9C4BC;font-size:15px;max-width:66ch}

/* ---------- service areas (light) ---------- */
.areas{background:var(--paper-2);padding:clamp(80px,10vw,130px) 0}
.areas .container{display:grid;grid-template-columns:1fr 1fr;gap:clamp(44px,6vw,96px);align-items:center}
.areas .eyebrow{color:var(--m-500)}
.areas h2{font-size:clamp(2.1rem,3.6vw,3.1rem);margin-top:18px;color:var(--m-800)}
.areas .copy p{color:var(--ink-soft);font-size:15.5px;margin-top:18px;max-width:52ch}
.areas .copy .aside{font-size:13px;color:var(--m-500);font-style:italic}
.route{list-style:none;position:relative;padding-left:28px}
.route::before{content:"";position:absolute;left:5px;top:16px;bottom:16px;width:1px;background:var(--hd)}
.route li{position:relative;display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:13px 0;border-bottom:1px solid var(--hd-soft)}
.route li:last-child{border-bottom:none}
.route li::before{content:"";position:absolute;left:-28px;top:50%;transform:translateY(-50%);width:11px;height:11px;border:1px solid var(--m-500);border-radius:50%;background:var(--paper-2)}
.route li:first-child::before,.route li:last-child::before{background:var(--m-700);border-color:var(--m-700)}
.route .place{font-family:var(--serif);font-weight:500;font-size:clamp(1.25rem,2vw,1.55rem);color:var(--m-800)}
.route .tag{font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--m-500);text-align:right}

/* ---------- cta (dark) ---------- */
.cta{min-height:68vh;display:grid;place-items:center;text-align:center;background:radial-gradient(70% 110% at 50% 100%,var(--m-600) 0%,var(--m-800) 55%,var(--m-950) 100%);padding:100px 20px}
.cta h2{font-size:clamp(2.6rem,5.2vw,4.4rem);max-width:15ch;margin:22px auto 20px}
.cta h2 em{font-style:italic;color:var(--rose-soft)}
.cta p{color:#D9C4BC;max-width:50ch;margin:0 auto 42px;font-size:15.5px}
.cta .fineprint{margin-top:44px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--rose-deep)}

@media (prefers-reduced-motion:reduce){
  .cue::after{animation:none}
  .svc-panel:hover .svc-media svg,.svc-panel:hover .svc-media img,
  .half:hover>svg,.half:hover>img,
  .work-item:hover .media svg,.work-item:hover .media img{transform:none}
  .js .hero-m,.js .hero-wordmark,.js .hero-rule,.js .hero-sub,.js .hero h1,.js .hero-keywords,.js .hero .hero-actions,.js .cue{animation:none}
}
@media (max-width:980px){
  .svc-panel,.svc-panel.rev{grid-template-columns:1fr;min-height:0}
  .svc-panel.rev .svc-media{order:0}
  .svc-media{min-height:300px}
  .svc-media::after,.svc-panel.rev .svc-media::after{background:linear-gradient(0deg,var(--m-900) 0%,rgba(44,9,11,0) 60%)}
  .svc-panel.light .svc-media::after,.svc-panel.light.rev .svc-media::after{background:linear-gradient(0deg,var(--paper) 0%,rgba(247,242,232,0) 60%)}
  .split{grid-template-columns:1fr}
  .half{min-height:56vh;border-left:none;border-top:1px solid var(--hairline-soft)}
  .half:first-child{border-top:none}
  .intro .container{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .stat:nth-child(3){border-left:none}
  .stat{border-top:1px solid var(--hd-soft)}
  .stat:nth-child(-n+2){border-top:none}
  .process .steps{grid-template-columns:1fr 1fr;border-top:none}
  .process .step{border-top:1px solid var(--hd);border-left:none;padding-left:0;padding-right:24px}
  .work-head{flex-direction:column;align-items:flex-start}
  .work-head>p{text-align:left}
  /* Two up on tablets so the six-card gallery doesn't turn into a very
     long single column; drops to one column on phones below. */
  .work-grid{grid-template-columns:1fr 1fr}
  .areas .container{grid-template-columns:1fr}
}
/* Mobile hero: the sticky CTA bar covers the bottom of the viewport, so the
   hero is sized to the space above it and its rhythm tightened - otherwise
   the hero's own buttons sit behind the bar on load. The scroll cue is kept,
   scaled down so it still lands clear of the bar. */
@media (max-width:767px){
  .hero{min-height:calc(100svh - var(--mobile-cta-h,124px));padding:104px 20px 26px}
  .hero-wordmark{margin-top:22px}
  .hero-rule{margin:18px auto}
  .hero-sub{letter-spacing:.4em;text-indent:.4em}
  .hero h1{margin-top:30px}
  .hero-keywords{margin-top:16px;line-height:2}
  .cue{height:44px;margin:20px auto 0}
}

/* The hero pair is centred under the centred hero text on mobile. These
   need the same specificity as the base .hero .hero-actions rule above,
   which would otherwise win over the shared mobile rules in style.css. */
@media (max-width:640px){
  .hero .hero-actions{gap:14px;max-width:340px;margin-inline:auto;justify-content:center;margin-top:26px}
}
@media (max-width:560px){
  .stats{grid-template-columns:1fr}
  .stat{border-left:none}
  /* In one column every stat except the first needs its divider back. The
     two-column rule above drops the top border on the first *two* items,
     which is right for a 2-up grid but leaves stat 2 with no line here. */
  .stat:nth-child(2){border-top:1px solid var(--hd-soft)}
  .process .steps{grid-template-columns:1fr}
  .work-grid{grid-template-columns:1fr}
}

/* Short phones (iPhone SE / 8 class, 667px tall and under). The hero's
   own height is driven by the "M", whose clamp() floor of 10rem ignores
   the viewport entirely - so on a short screen the buttons and cue end up
   behind the sticky bar. Lower the floor and tighten the rhythm so the
   whole hero still lands above it. Must stay after the 640px block: the
   .hero .hero-actions override relies on source order to win. */
@media (max-width:767px) and (max-height:740px){
  .hero{padding:84px 20px 18px}
  .hero-m{font-size:clamp(6rem,26vw,12rem)}
  .hero-wordmark{font-size:clamp(1.25rem,3.4vw,2rem);margin-top:16px;letter-spacing:.42em;text-indent:.42em}
  .hero-rule{margin:14px auto}
  .hero h1{margin-top:20px;font-size:clamp(1.15rem,4.6vw,1.7rem)}
  .hero-keywords{margin-top:12px;line-height:1.9}
  .hero .hero-actions{margin-top:20px}
  .cue{height:32px;margin:14px auto 0}
}

/* Very short phones (iPhone SE 1st gen class, 568px tall). Same idea, one
   step further, so the hero still resolves above the sticky bar. */
@media (max-width:767px) and (max-height:620px){
  .hero{padding:68px 20px 10px}
  .hero-m{font-size:clamp(4.2rem,23vw,10rem)}
  .hero-wordmark{margin-top:12px}
  .hero-rule{margin:10px auto}
  .hero-sub{font-size:9.5px;letter-spacing:.3em;text-indent:.3em}
  .hero h1{margin-top:16px;font-size:clamp(1.05rem,4.4vw,1.5rem)}
  .hero-keywords{margin-top:10px;font-size:9px;line-height:1.8}
  .hero .hero-actions{margin-top:16px;gap:10px}
  .cue{height:22px;margin:8px auto 0}
}

/* Keep the 650 x 850 client photo close to its native display size on desktop.
   The full-bleed landscape crop previously enlarged it across the whole panel. */
@media (min-width:981px){
  .split .half:nth-child(2){background:#200708}
  .split .half:nth-child(2)>img{
    inset:auto 0 auto auto;
    top:50%;
    width:min(76%,650px);
    height:min(100%,850px);
    object-fit:cover;
    object-position:center;
    transform:translateY(-50%);
  }
  .split .half:nth-child(2):hover>img{transform:translateY(-50%)}
  .split .half:nth-child(2)::after{
    background:linear-gradient(90deg,#200708 0%,rgba(32,7,8,.92) 22%,rgba(32,7,8,.28) 72%,rgba(32,7,8,.08) 100%),linear-gradient(0deg,rgba(32,7,8,.72),transparent 58%);
  }
}