/* ============================================================
   S&S Construction — shared design system
   Renovation contractor · Southwest Virginia
   ============================================================ */
:root{
  --bone:#f6f3ee;
  --cream:#fffdf9;
  --ink:#1a1613;
  --charcoal:#2c2723;
  --stone:#6f675e;
  --stone-lt:#8c847a;
  --line:#e5ded3;
  --line-dk:#d6cdbf;
  --clay:#b0562f;
  --clay-dk:#8d4222;
  --clay-lt:#c76a41;
  --forest:#2f3a33;
  --shadow:0 24px 60px -28px rgba(26,22,19,.5);
  --shadow-sm:0 10px 30px -16px rgba(26,22,19,.4);
  --radius:6px;
  --maxw:1180px;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --serif:'Fraunces','Georgia','Times New Roman',serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);color:var(--ink);background:var(--bone);
  line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden;font-size:17px;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px}
.eyebrow{font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;font-weight:600;color:var(--clay)}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.1;letter-spacing:-.015em}
.serif{font-family:var(--serif)}

/* ---------- BUTTONS ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 28px;border-radius:100px;
  font-family:var(--sans);font-weight:600;font-size:.97rem;cursor:pointer;border:0;
  transition:transform .18s ease,box-shadow .2s,background .2s,color .2s;letter-spacing:.01em}
.btn-clay{background:var(--clay);color:#fff;box-shadow:0 14px 30px -14px rgba(176,86,47,.8)}
.btn-clay:hover{background:var(--clay-dk);transform:translateY(-2px)}
.btn-dark{background:var(--ink);color:var(--bone)}
.btn-dark:hover{background:var(--charcoal);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line-dk)}
.btn-ghost:hover{border-color:var(--ink);transform:translateY(-2px)}
.btn-ghost-lt{background:rgba(255,255,255,.08);color:#fff;border:1.5px solid rgba(255,255,255,.35)}
.btn-ghost-lt:hover{background:rgba(255,255,255,.16);transform:translateY(-2px)}

/* ---------- NAV ---------- */
header.nav{position:sticky;top:0;z-index:60;background:rgba(246,243,238,.85);
  backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid var(--line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:74px}
.brand{display:flex;align-items:center;gap:13px}
.brand .mark{width:44px;height:44px;border-radius:8px;flex:0 0 auto;
  background:linear-gradient(150deg,var(--charcoal),var(--ink));color:var(--clay-lt);
  display:grid;place-items:center;font-family:var(--serif);font-weight:600;font-size:1.15rem;box-shadow:var(--shadow-sm)}
.brand b{font-family:var(--serif);font-weight:600;font-size:1.32rem;letter-spacing:.01em;line-height:1;color:var(--ink)}
.brand small{display:block;font-family:var(--sans);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--stone);font-weight:600;margin-top:3px}
.nav-links{display:flex;align-items:center;gap:28px}
.nav-links a{font-size:.93rem;font-weight:500;color:var(--charcoal);transition:color .2s}
.nav-links a:hover{color:var(--clay)}
.nav-phone{font-weight:600;color:var(--ink)!important;display:inline-flex;align-items:center;gap:7px}
.nav-cta{background:var(--ink);color:var(--bone)!important;padding:11px 20px;border-radius:100px;
  font-weight:600;font-size:.9rem;transition:background .2s,transform .18s}
.nav-cta:hover{background:var(--clay);transform:translateY(-1px)}
.menu-btn{display:none;background:none;border:0;cursor:pointer;font-size:1.6rem;color:var(--ink)}
@media(max-width:940px){
  .nav-links{position:absolute;top:74px;left:0;right:0;flex-direction:column;gap:0;align-items:stretch;
    background:var(--bone);border-bottom:1px solid var(--line);max-height:0;overflow:hidden;transition:max-height .3s ease}
  .nav-links.open{max-height:520px}
  .nav-links a{padding:16px 26px;border-top:1px solid var(--line)}
  .nav-links .nav-cta{margin:14px 26px;text-align:center}
  .menu-btn{display:block}
}

/* ---------- IMAGE PLACEHOLDERS ----------
   Swap any .ph background for a real photo:
   .ph{background:url('images/your-photo.jpg') center/cover no-repeat;}
   --------------------------------------------------------- */
.ph{position:relative;background:
    repeating-linear-gradient(135deg,#efe9df 0 22px,#eae3d7 22px 44px);
  display:grid;place-items:center;color:var(--stone-lt);overflow:hidden}
.ph:after{content:attr(data-label);position:absolute;bottom:14px;left:16px;
  font-family:var(--sans);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
  color:var(--stone-lt);background:rgba(255,255,255,.7);padding:5px 10px;border-radius:4px}
.ph svg{opacity:.35;width:46px;height:46px}

/* ---------- SECTIONS ---------- */
.sec{padding:96px 0}
.sec.tight{padding:74px 0}
.alt{background:linear-gradient(180deg,var(--cream),var(--bone))}
.dark{background:var(--ink);color:var(--bone)}
.dark h2,.dark h3{color:var(--cream)}
.sec-head{max-width:60ch}
.sec-head.center{margin:0 auto;text-align:center}
.sec-head h2{font-size:clamp(2rem,4vw,3rem);margin:16px 0 16px}
.sec-head p{font-size:1.1rem;color:var(--stone)}
.dark .sec-head p{color:#c9c2b8}

/* ---------- HERO ---------- */
.hero{position:relative;min-height:88vh;display:flex;align-items:flex-end;color:#fff;overflow:hidden}
.hero .ph{position:absolute;inset:0;background:
    linear-gradient(180deg,rgba(20,17,14,.35) 0%,rgba(20,17,14,.15) 35%,rgba(20,17,14,.82) 100%),
    repeating-linear-gradient(135deg,#3a332c 0 26px,#332d27 26px 52px)}
.hero .ph:after{background:rgba(0,0,0,.4);color:#e8e0d4}
.hero-inner{position:relative;z-index:2;padding-bottom:70px}
.hero .eyebrow{color:#f0b48c}
.hero h1{font-size:clamp(2.6rem,6vw,4.6rem);font-weight:500;margin:20px 0 22px;max-width:15ch;color:#fff}
.hero p.lede{font-size:clamp(1.08rem,2vw,1.32rem);max-width:52ch;color:#eee7dc;font-weight:400}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.trust-strip{display:flex;flex-wrap:wrap;gap:10px 30px;margin-top:40px;padding-top:26px;
  border-top:1px solid rgba(255,255,255,.2);font-size:.92rem;color:#e3dbcf;font-weight:500}
.trust-strip span{display:inline-flex;align-items:center;gap:9px}
.trust-strip .d{width:7px;height:7px;border-radius:50%;background:var(--clay-lt)}

/* ---------- TRUST BAR ---------- */
.trustbar{background:var(--ink);color:var(--bone);padding:22px 0}
.trustbar .wrap{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 44px;text-align:center}
.trustbar b{display:inline-flex;align-items:center;gap:11px;font-family:var(--sans);font-weight:500;font-size:.98rem;color:#efe8dc}
.trustbar svg{color:var(--clay-lt);flex:0 0 auto}

/* ---------- INTRO SPLIT ---------- */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:40px}}
.split .ph{aspect-ratio:4/5;border-radius:var(--radius);box-shadow:var(--shadow)}
.intro p{font-size:1.12rem;color:var(--charcoal);margin-bottom:18px}
.intro p strong{color:var(--ink)}
.sign{font-family:var(--serif);font-style:italic;font-size:1.28rem;color:var(--clay-dk);margin-top:26px;line-height:1.4}
.sign b{display:block;font-family:var(--sans);font-style:normal;font-size:.82rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--stone);font-weight:600;margin-top:8px}

/* ---------- SERVICES ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:26px}
.svc{background:var(--cream);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow-sm);transition:transform .22s,box-shadow .22s;display:flex;flex-direction:column}
.svc:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.svc .ph{aspect-ratio:16/11}
.svc-body{padding:28px 28px 26px;display:flex;flex-direction:column;flex:1}
.svc h3{font-size:1.5rem;margin-bottom:10px}
.svc p{color:var(--stone);font-size:1rem;margin-bottom:18px}
.svc ul{list-style:none;margin:0 0 22px}
.svc ul li{position:relative;padding-left:22px;font-size:.94rem;color:var(--charcoal);margin-bottom:8px}
.svc ul li:before{content:"";position:absolute;left:0;top:10px;width:8px;height:8px;background:var(--clay);transform:rotate(45deg)}
.svc .more{margin-top:auto;font-weight:600;color:var(--clay);font-size:.95rem;display:inline-flex;align-items:center;gap:8px;transition:gap .2s}
.svc:hover .more{gap:13px}

/* wide feature card */
.svc.wide{grid-column:1/-1;flex-direction:row;align-items:stretch}
.svc.wide .ph{aspect-ratio:auto;width:38%;min-height:220px}
.svc.wide .svc-body{width:62%;justify-content:center}
@media(max-width:760px){.svc.wide{flex-direction:column}.svc.wide .ph,.svc.wide .svc-body{width:100%}.svc.wide .ph{aspect-ratio:16/11}}

/* ---------- GALLERY ---------- */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;gap:14px}
.gallery .ph{border-radius:var(--radius)}
.gallery .g1{grid-column:span 2;grid-row:span 2}
.gallery .g4{grid-column:span 2}
@media(max-width:760px){.gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px}.gallery .g1{grid-column:span 2;grid-row:span 1}.gallery .g4{grid-column:span 2}}

/* ---------- PROCESS ---------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:28px}
.step{position:relative}
.step .n{font-family:var(--serif);font-size:2.7rem;color:var(--clay);line-height:1}
.step h3{font-size:1.28rem;margin:14px 0 8px}
.step p{color:var(--stone);font-size:.98rem}
.dark .step p{color:#c4bcb1}
.step:after{content:"";position:absolute;top:20px;left:calc(50% + 44px);right:-18px;height:2px;
  background:repeating-linear-gradient(90deg,var(--line-dk) 0 7px,transparent 7px 14px)}
.dark .step:after{background:repeating-linear-gradient(90deg,rgba(255,255,255,.22) 0 7px,transparent 7px 14px)}
.step:last-child:after{display:none}
@media(max-width:760px){.step:after{display:none}}

/* ---------- WHY ---------- */
.why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:24px}
.why{background:var(--cream);border:1px solid var(--line);border-top:3px solid var(--clay);
  border-radius:var(--radius);padding:28px 26px;box-shadow:var(--shadow-sm)}
.why .ic{color:var(--clay);margin-bottom:14px}
.why h3{font-size:1.24rem;margin-bottom:9px}
.why p{color:var(--stone);font-size:.98rem}

/* ---------- FAQ ---------- */
.faq{max-width:820px;margin:0 auto}
.faq details{border-bottom:1px solid var(--line-dk);padding:8px 0}
.faq summary{list-style:none;cursor:pointer;padding:20px 44px 20px 4px;position:relative;
  font-family:var(--serif);font-size:1.22rem;color:var(--ink);font-weight:500}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";position:absolute;right:8px;top:16px;font-size:1.7rem;color:var(--clay);
  font-family:var(--sans);font-weight:300;transition:transform .25s}
.faq details[open] summary:after{transform:rotate(45deg)}
.faq p{padding:0 44px 22px 4px;color:var(--stone);font-size:1.03rem}

/* ---------- CTA / FORM ---------- */
.cta-band{background:
    linear-gradient(180deg,rgba(20,17,14,.72),rgba(20,17,14,.9)),
    repeating-linear-gradient(135deg,#3a332c 0 26px,#332d27 26px 52px);
  color:#fff;padding:96px 0;text-align:center}
.cta-band .ph:after{display:none}
.cta-band h2{font-size:clamp(2.1rem,4.4vw,3.2rem);max-width:20ch;margin:16px auto 18px;color:#fff}
.cta-band p{color:#e2dacd;font-size:1.14rem;max-width:52ch;margin:0 auto 32px}

.form-wrap{max-width:660px;margin:0 auto;background:var(--cream);border:1px solid var(--line);
  border-radius:12px;padding:40px 38px;box-shadow:var(--shadow);text-align:left}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:560px){.form-grid{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:7px}
.field.full{grid-column:1/-1}
.field label{font-size:.82rem;font-weight:600;letter-spacing:.04em;color:var(--charcoal);text-transform:uppercase}
.field input,.field select,.field textarea{font-family:var(--sans);font-size:1rem;padding:13px 15px;
  border:1.5px solid var(--line-dk);border-radius:var(--radius);background:#fff;color:var(--ink);transition:border-color .2s,box-shadow .2s}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--clay);box-shadow:0 0 0 3px rgba(176,86,47,.15)}
.field textarea{resize:vertical;min-height:110px}
.form-note{font-size:.86rem;color:var(--stone);margin-top:22px;text-align:center;position:relative;z-index:1}
.form-wrap .btn-clay{width:100%;justify-content:center;margin-top:6px;box-shadow:0 10px 22px -14px rgba(176,86,47,.7)}

/* ---------- CONTACT ROW ---------- */
.contact-row{display:flex;flex-wrap:wrap;justify-content:center;gap:16px 40px;margin-top:38px;
  padding-top:30px;border-top:1px solid rgba(255,255,255,.18);color:#d8d0c4;font-size:1rem}
.contact-row a,.contact-row span{display:inline-flex;align-items:center;gap:11px;font-weight:500}
.contact-row a:hover{color:var(--clay-lt)}

/* ---------- FOOTER ---------- */
footer{background:var(--ink);color:#9a9188;padding:60px 0 34px;font-size:.94rem}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:34px;padding-bottom:32px;
  border-bottom:1px solid rgba(255,255,255,.1)}
@media(max-width:820px){.foot-top{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.foot-top{grid-template-columns:1fr}}
.foot-brand{display:flex;align-items:center;gap:12px;color:var(--cream);font-family:var(--serif);font-size:1.28rem;font-weight:600;margin-bottom:14px}
.foot-top p{max-width:34ch;color:#9a9188}
.foot-col h4{color:var(--cream);font-family:var(--sans);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:14px;font-weight:700}
.foot-col a,.foot-col p{display:block;color:#9a9188;margin-bottom:9px}
.foot-col a:hover{color:var(--clay-lt)}
.foot-legal{margin-top:22px;font-size:.83rem;color:#6f675e;display:flex;flex-wrap:wrap;gap:6px 20px;justify-content:space-between}

/* ---------- REAL PHOTOS ---------- */
.ph.photo:after{display:none}
.ph.photo svg{display:none}

/* ---------- BEFORE / AFTER SLIDER ---------- */
.ba-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}
@media(max-width:820px){.ba-grid{grid-template-columns:1fr}}
.ba{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);
  aspect-ratio:4/3;user-select:none;--p:50%}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.ba img.ba-after{clip-path:inset(0 0 0 var(--p))}
.ba .ba-line{position:absolute;top:0;bottom:0;left:var(--p);width:3px;background:#fff;
  box-shadow:0 0 12px rgba(0,0,0,.5);pointer-events:none}
.ba .ba-line:after{content:"⟷";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:40px;height:40px;border-radius:50%;background:#fff;color:var(--ink);display:grid;place-items:center;
  font-size:1rem;font-weight:700;box-shadow:0 4px 14px rgba(0,0,0,.4)}
.ba input[type=range]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.ba .ba-tag{position:absolute;bottom:12px;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;padding:5px 11px;border-radius:4px;background:rgba(20,17,14,.75);color:#fff;pointer-events:none}
.ba .ba-tag.l{left:12px}.ba .ba-tag.r{right:12px}
.ba-caption{margin-top:12px;font-size:.95rem;color:var(--stone);text-align:center}

/* ---------- REVEAL ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* ---------- SUB-PAGE HERO ---------- */
.page-hero{position:relative;color:#fff;min-height:52vh;display:flex;align-items:flex-end;overflow:hidden}
.page-hero .ph{position:absolute;inset:0;background:
    linear-gradient(180deg,rgba(20,17,14,.4),rgba(20,17,14,.85)),
    repeating-linear-gradient(135deg,#3a332c 0 26px,#332d27 26px 52px)}
.page-hero .ph:after{background:rgba(0,0,0,.4);color:#e8e0d4}
.page-hero-inner{position:relative;z-index:2;padding-bottom:54px}
.page-hero h1{font-size:clamp(2.4rem,5.4vw,4rem);color:#fff;margin:16px 0 14px;max-width:18ch}
.page-hero p{max-width:56ch;color:#eee7dc;font-size:1.14rem}
.breadcrumb{font-size:.86rem;color:#cabfae}
.breadcrumb a:hover{color:#fff}
.prose{max-width:760px}
.prose h2{font-size:clamp(1.7rem,3.2vw,2.3rem);margin:44px 0 16px}
.prose h2:first-child{margin-top:0}
.prose p{color:var(--charcoal);font-size:1.1rem;margin-bottom:18px}
.checklist{list-style:none;margin:20px 0 8px}
.checklist li{position:relative;padding-left:34px;margin-bottom:14px;color:var(--charcoal);font-size:1.05rem}
.checklist li svg{position:absolute;left:0;top:4px;color:var(--clay)}

/* ============================================================
   MOBILE OPTIMIZATION
   ============================================================ */

/* Touch + tap behavior everywhere */
a, button, summary, input, select, textarea { -webkit-tap-highlight-color: rgba(176,86,47,.18); }
.btn, .nav-cta, summary { touch-action: manipulation; }
/* Let vertical scrolling pass through the before/after sliders */
.ba input[type=range] { touch-action: pan-y; }

/* Menu button: 44x44 minimum touch target (Apple/WCAG guidance) */
.menu-btn { min-width: 44px; min-height: 44px; display: none; place-items: center; line-height: 1; }
@media (max-width: 940px) { .menu-btn { display: grid; } }

/* Comfortable tap areas for secondary links on touch devices */
@media (hover: none) and (pointer: coarse) {
  .foot-col a { padding: 7px 0; margin-bottom: 2px; }
  .svc.wide .more { padding: 8px 0; }
  .nav-phone { padding: 6px 0; }
  .breadcrumb a { padding: 6px 2px; }
}

/* ---------- TABLET ---------- */
@media (max-width: 900px) {
  .sec { padding: 68px 0; }
  .sec.tight { padding: 54px 0; }
  .cta-band { padding: 72px 0; }
  .sec-head { margin-bottom: 34px !important; }
  /* sub-page body images: no sticky, shorter crop */
  .split .ph[style*="sticky"] { position: static !important; aspect-ratio: 16/10 !important; top: auto !important; }
}

/* ---------- PHONE ---------- */
@media (max-width: 640px) {
  body { font-size: 16px; }
  .wrap { padding-left: 20px; padding-right: 20px; }
  .sec { padding: 56px 0; }
  .sec.tight { padding: 44px 0; }
  .cta-band { padding: 60px 0; }

  /* Nav */
  .nav-inner { height: 64px; }
  .nav-links { top: 64px; }
  .brand .mark { width: 38px; height: 38px; border-radius: 7px; font-size: 1rem; }
  .brand b { font-size: 1.12rem; }
  .brand small { font-size: .55rem; letter-spacing: .16em; }

  /* Hero — dvh avoids mobile browser-chrome jump; cap so content is reachable */
  .hero { min-height: 86dvh; }
  .hero-inner { padding-bottom: 48px; }
  .hero h1 { font-size: clamp(2.1rem, 10vw, 2.9rem); max-width: 18ch; margin: 14px 0 16px; }
  .hero p.lede { font-size: 1.02rem; max-width: none; }
  .eyebrow { font-size: .66rem; letter-spacing: .18em; }

  /* Full-width stacked CTAs = bigger tap targets */
  .hero-actions { flex-direction: column; gap: 11px; margin-top: 26px; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .btn { padding: 15px 22px; font-size: .95rem; }
  .cta-band .btn { width: 100%; max-width: 420px; justify-content: center; }

  .trust-strip { gap: 8px 0; margin-top: 28px; padding-top: 20px; flex-direction: column; font-size: .88rem; }

  /* Trust bar → 2 columns, left-aligned so it reads cleanly */
  .trustbar { padding: 18px 0; }
  .trustbar .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; text-align: left; }
  .trustbar b { font-size: .82rem; gap: 8px; align-items: flex-start; }
  .trustbar svg { width: 16px; height: 16px; margin-top: 2px; }

  /* Headings */
  .sec-head h2 { font-size: clamp(1.65rem, 7.5vw, 2.1rem); margin: 12px 0 12px; }
  .sec-head p { font-size: 1rem; }
  .split { gap: 30px; }
  .intro p { font-size: 1rem; }
  .sign { font-size: 1.1rem; }

  /* Portrait/intro images: less vertical hogging */
  .split .ph { aspect-ratio: 4/3 !important; }

  /* Services */
  .svc-grid { grid-template-columns: 1fr; gap: 18px; }
  .svc-body { padding: 22px 22px 20px; }
  .svc h3 { font-size: 1.32rem; }
  .svc .ph { aspect-ratio: 16/10; }

  /* Gallery — 2-up with a featured lead tile */
  .gallery { grid-template-columns: 1fr 1fr; grid-auto-rows: 118px; gap: 10px; }
  .gallery .g1 { grid-column: span 2; grid-row: span 2; }
  .gallery .g4 { grid-column: span 2; }

  /* Before/after */
  .ba-grid { gap: 20px; }
  .ba { aspect-ratio: 3/2; }
  .ba .ba-tag { font-size: .6rem; padding: 4px 8px; bottom: 10px; }
  .ba .ba-line:after { width: 34px; height: 34px; font-size: .9rem; }
  .ba-caption { font-size: .88rem; }

  /* Process */
  .steps { gap: 22px; }
  .step .n { font-size: 2.2rem; }
  .step h3 { font-size: 1.14rem; }

  /* Why / FAQ */
  .why-grid { gap: 16px; }
  .why { padding: 22px 20px; }
  .faq summary { font-size: 1.08rem; padding: 17px 40px 17px 2px; }
  .faq summary:after { top: 13px; right: 4px; }
  .faq p { font-size: .98rem; padding: 0 40px 18px 2px; }

  /* Form — 16px inputs prevent iOS auto-zoom on focus */
  .form-wrap { padding: 26px 20px; border-radius: 10px; }
  .form-grid { grid-template-columns: 1fr; gap: 15px; }
  .field input, .field select, .field textarea { font-size: 16px; padding: 14px 14px; }
  .field label { font-size: .76rem; }
  .cta-band h2 { font-size: clamp(1.75rem, 8vw, 2.3rem); }
  .cta-band p { font-size: 1rem; }
  .contact-row { flex-direction: column; align-items: center; gap: 14px; margin-top: 28px; font-size: .95rem; }

  /* Sub-page hero */
  .page-hero { min-height: 48dvh; }
  .page-hero-inner { padding-bottom: 40px; }
  .page-hero h1 { font-size: clamp(1.95rem, 9vw, 2.6rem); max-width: 20ch; }
  .page-hero p { font-size: 1rem; }
  .prose h2 { font-size: clamp(1.5rem, 7vw, 1.9rem); margin: 32px 0 12px; }
  .prose p { font-size: 1rem; }
  .checklist li { font-size: .98rem; padding-left: 30px; }

  /* Footer */
  footer { padding: 44px 0 26px; }
  .foot-top { grid-template-columns: 1fr; gap: 26px; }
  .foot-legal { flex-direction: column; gap: 8px; }
}

/* ---------- SMALL PHONE ---------- */
@media (max-width: 380px) {
  .wrap { padding-left: 16px; padding-right: 16px; }
  .brand small { display: none; }
  .trustbar .wrap { grid-template-columns: 1fr; }
  .gallery { grid-auto-rows: 104px; }
  .hero h1 { font-size: 1.95rem; }
}

/* ---------- LANDSCAPE PHONE ---------- */
@media (max-height: 480px) and (orientation: landscape) {
  .hero { min-height: 100dvh; }
  .hero-inner { padding-top: 84px; padding-bottom: 34px; }
  .page-hero { min-height: 82dvh; }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}