/* ============================================================
   SOS Full Service Website - shared stylesheet
   Pairs with styles.css (design tokens) + site.js (shared chrome).
   ============================================================ */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 84px; }
body { margin:0; background:var(--surface-page); color:var(--text-body); font-family:var(--font-body); -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4,h5 { margin:0; color:var(--text-strong); font-family:var(--font-head); letter-spacing:-0.02em; }
p { margin:0; }
a { color:inherit; text-decoration:none; }
img { display:block; }
/* Responsive <picture> wrappers (img-manifest.js SOS_PIC) must be layout-invisible:
   display:contents makes the inner img lay out exactly as a bare img did, so
   absolute fills and hover zooms keep working. */
picture { display:contents; }
/* ...except where the img is sized with height:100%: percentage heights do not
   reliably resolve through display:contents (grid-centered boxes fall back to
   auto), so those contexts get a real 100%-sized block wrapper instead. */
.post .ph picture, .rthumb picture, .ba picture, .pj-stepimg picture, .wlb-thumb picture { display:block; width:100%; height:100%; }
.wrap { max-width:1200px; margin:0 auto; padding:0 32px; }
.eyebrow { font-family:var(--font-head); font-weight:700; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-accent); }
.lead { font-size:18px; line-height:1.6; color:var(--text-body); }
.lucide { width:1em; height:1em; stroke-width:2; }
.sos-hp { position:absolute !important; left:-9999px !important; top:auto; width:1px; height:1px; overflow:hidden; opacity:0; pointer-events:none; }

/* ---------- Buttons ---------- */
.btn { display:inline-flex; align-items:center; gap:9px; font-family:var(--font-head); font-weight:700; font-size:15px; letter-spacing:.02em; border-radius:var(--radius-md); padding:13px 26px; cursor:pointer; border:1.5px solid transparent; transition:all var(--dur-fast) var(--ease-out); }
.btn:active { transform:translateY(1px); }
.btn-primary { background:var(--accent); color:var(--accent-contrast); border-color:var(--accent); }
.btn-primary:hover { background:var(--accent-hover); border-color:var(--accent-hover); box-shadow:var(--shadow-gold); }
.btn-outline-d { background:transparent; color:#fff; border-color:rgba(255,255,255,.32); }
.btn-outline-d:hover { border-color:var(--sos-gold-bright); color:var(--sos-gold-bright); }
.btn-outline { background:transparent; color:var(--text-accent); border-color:var(--accent); }
.btn-outline:hover { background:var(--accent); color:var(--accent-contrast); }
.btn-lg { font-size:17px; padding:16px 32px; }

/* ---------- Top bar ---------- */
div[data-site-header] { display:contents; }
header.bar { position:sticky; top:0; z-index:100; background:rgba(14,14,14,.94); backdrop-filter:blur(8px); border-bottom:1px solid rgba(255,255,255,.08); }
.bar-in { display:flex; align-items:center; justify-content:space-between; height:90px; }
.bar img.logo { height:72px; }
nav.main { display:flex; gap:26px; }
nav.main a { font-family:var(--font-head); font-weight:600; font-size:14px; color:#D9D7D2; letter-spacing:.01em; transition:color var(--dur-fast); }
nav.main a:hover, nav.main a.active { color:var(--sos-gold-bright); }
.bar-right { display:flex; align-items:center; gap:18px; }
.bar-phone { display:flex; align-items:center; gap:8px; color:#fff; font-family:var(--font-head); font-weight:700; font-size:15px; white-space:nowrap; text-decoration:none; transition:color var(--dur-fast); }
.bar-phone:hover { color:var(--sos-gold-bright); }
.bar-phone .lucide { color:var(--sos-gold-bright); }
.burger { display:none; width:46px; height:46px; align-items:center; justify-content:center; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.18); border-radius:var(--radius-sm); color:#fff; cursor:pointer; padding:0; flex:none; transition:background var(--dur-fast), border-color var(--dur-fast); }
.burger .lucide { width:26px; height:26px; }
.bar-call { display:none; width:46px; height:46px; align-items:center; justify-content:center; border-radius:var(--radius-sm); background:rgba(205,163,73,.14); border:1px solid rgba(205,163,73,.35); color:var(--sos-gold-bright); flex:none; }
.bar-call .lucide { width:22px; height:22px; }
.burger:hover, .burger:focus-visible { background:rgba(255,255,255,.14); border-color:var(--sos-gold-bright); }

/* mobile drawer */
.drawer { position:fixed; inset:0; z-index:200; background:rgba(14,14,14,.98); display:none; flex-direction:column; padding:24px 32px calc(24px + env(safe-area-inset-bottom)); overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }
.drawer.open { display:flex; }
.drawer-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:30px; }
.drawer-top img { height:40px; }
.drawer a { font-family:var(--font-head); font-weight:700; font-size:24px; color:#fff; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.08); }
.drawer a:hover { color:var(--sos-gold-bright); }
.drawer .btn { margin-top:24px; justify-content:center; }
.drawer a.btn { font-size:16px; color:var(--accent-contrast); padding:15px 24px; border-bottom:0; }
.drawer .drawer-call { display:flex; align-items:center; gap:11px; font-size:18px; }
.drawer .drawer-call .lucide { color:var(--sos-gold-bright); width:20px; height:20px; }

/* Inline lead-field validation */
.field input.err, .field select.err, .field textarea.err { border-color:var(--sos-danger); box-shadow:0 0 0 3px rgba(163,45,45,.12); }
.field .ferr, .ferr { color:var(--sos-danger); font-family:var(--font-head); font-weight:600; font-size:12.5px; margin:6px 0 0; }
.qcard .callrow a { color:inherit; text-decoration:underline; text-underline-offset:3px; }
.qcard .callrow a:hover { color:var(--text-accent); }

/* ---------- Page hero (inner pages) ---------- */
.phero { background:var(--sos-black); color:#fff; position:relative; overflow:hidden; }
.phero .wrap { position:relative; z-index:2; padding:104px 32px 64px; }
.phero .eyebrow { color:var(--sos-gold-bright); }
.phero h1 { color:#fff; font-size:clamp(36px,5.4vw,64px); font-weight:800; line-height:1.04; margin:18px 0 0; max-width:18ch; }
.phero h1 .gold { color:var(--sos-gold-bright); }
.phero .lead { color:#C7C5C0; max-width:60ch; margin-top:20px; }
.phero .bracket { position:absolute; top:38px; left:32px; width:52px; height:52px; border-top:2px solid var(--sos-gold-bright); border-left:2px solid var(--sos-gold-bright); opacity:.8; z-index:2; }
/* Watermark is a masked pseudo-element, not an <img>: keeps the big hero glyph
   out of LCP candidacy on mobile (PageSpeed flagged the old img) and saves a
   render-blocking-adjacent request. White fill via background + mask replaces
   the old filter:invert(1) trick. SVG is 672x1013, hence the aspect-ratio. */
.phero::after { content:''; position:absolute; right:-50px; top:50%; transform:translateY(-50%); height:150%; aspect-ratio:672/1013; background:#fff; opacity:.05; z-index:1; pointer-events:none; -webkit-mask:url('assets/logos/SOS_symbol_only_black.svg') center / contain no-repeat; mask:url('assets/logos/SOS_symbol_only_black.svg') center / contain no-repeat; }
.crumb { display:flex; flex-wrap:wrap; gap:6px 8px; align-items:center; font-family:var(--font-head); font-weight:600; font-size:13px; color:#8C8A85; letter-spacing:.04em; }
.crumb a:hover { color:var(--sos-gold-bright); }
.crumb .sep { opacity:.5; }

/* ---------- Sections ---------- */
section.block { padding:84px 0; }
section.block.tight { padding:60px 0; }
.why { background:var(--surface-card); }
.sec-head { max-width:62ch; margin-bottom:44px; }
.sec-head.center { margin-left:auto; margin-right:auto; text-align:center; }
.sec-head h2 { font-size:clamp(28px,3.6vw,42px); font-weight:800; margin-top:12px; }
.sec-head p { margin-top:14px; }

/* ---------- Cards / grids ---------- */
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.svc { background:var(--surface-card); border:1px solid var(--border-subtle); border-radius:var(--radius-card); padding:26px; box-shadow:var(--shadow-sm); transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
a.svc:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); }
.svc .ic { width:46px; height:46px; border-radius:var(--radius-sm); background:rgba(176,133,44,.12); display:grid; place-items:center; color:var(--accent); margin-bottom:16px; }
.svc .ic .lucide { width:24px; height:24px; }
.svc h3 { font-size:18px; font-weight:700; margin-bottom:7px; }
.svc p { font-size:14px; line-height:1.55; color:var(--text-muted); }
.svc .more { margin-top:14px; font-family:var(--font-head); font-weight:700; font-size:13px; color:var(--text-accent); display:inline-flex; align-items:center; gap:6px; }

/* feature item (gold bar) */
.feat { padding-left:20px; border-left:3px solid var(--accent); }
.feat h3, .feat h4 { font-size:21px; font-weight:700; margin-bottom:8px; }
.feat p { font-size:15px; line-height:1.55; color:var(--text-body); }

/* stats */
.stats-row { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.stat .v { font-family:var(--font-display); font-weight:700; font-size:46px; line-height:1; color:var(--text-accent); }
.stat .l { margin-top:8px; font-family:var(--font-head); font-weight:600; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); }

/* photo placeholder */
.photo { aspect-ratio:4/3; border-radius:var(--radius-card); background:var(--sos-charcoal); position:relative; overflow:hidden; display:grid; place-items:center; }
.photo.tall { aspect-ratio:3/4; }
.photo.wide { aspect-ratio:16/9; }
.photo img.sym { height:42%; opacity:.10; filter:invert(1); }
.photo .ph-label { position:absolute; left:16px; bottom:14px; font-family:var(--font-head); font-weight:600; font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:#8C8A85; }
.photo .tag { position:absolute; top:14px; left:14px; background:var(--sos-gold-bright); color:#0E0E0E; font-family:var(--font-head); font-weight:700; font-size:11px; padding:4px 10px; border-radius:999px; z-index:2; }
.photo img.real { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.photo .ph-grad { position:absolute; inset:0; background:linear-gradient(to top, rgba(14,14,14,.5), transparent 45%); z-index:1; }

/* chips */
.chips { display:flex; gap:10px; flex-wrap:wrap; }
.chip { font-family:var(--font-head); font-weight:600; font-size:13px; padding:8px 16px; border-radius:999px; border:1px solid var(--border-subtle); background:var(--surface-card); color:var(--text-body); cursor:pointer; transition:all var(--dur-fast) var(--ease-out); }
.chip:hover { border-color:var(--accent); color:var(--text-accent); }
.chip.active { background:var(--accent); color:var(--accent-contrast); border-color:var(--accent); }

/* ---------- FAQ accordion ---------- */
.faq { max-width:820px; margin:0 auto; }
.faq-item { border-bottom:1px solid var(--border-subtle); }
.faq-q { width:100%; text-align:left; background:none; border:0; cursor:pointer; padding:22px 0; display:flex; justify-content:space-between; align-items:center; gap:20px; font-family:var(--font-head); font-weight:700; font-size:18px; color:var(--text-strong); }
.faq-q .ico { color:var(--accent); transition:transform var(--dur-base) var(--ease-out); flex:none; }
.faq-item.open .faq-q .ico { transform:rotate(45deg); }
.faq-a { max-height:0; overflow:hidden; transition:max-height var(--dur-slow) var(--ease-out); }
.faq-a p { padding:0 0 22px; font-size:15px; line-height:1.6; color:var(--text-body); max-width:70ch; }

/* ---------- CTA band ---------- */
.cta { background:var(--sos-black); color:#fff; text-align:center; }
.cta .wrap { padding:80px 32px; }
.cta h2 { color:#fff; font-size:clamp(30px,4.2vw,52px); font-weight:800; }
.cta h2 .gold { color:var(--sos-gold-bright); }
.cta p { color:#C7C5C0; max-width:48ch; margin:18px auto 30px; font-size:17px; line-height:1.6; }

/* ---------- Footer ---------- */
footer.site { background:#080808; color:#9A988F; }
footer.site .wrap { padding:60px 32px 28px; }
.foot-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:40px; }
footer.site img.logo { height:50px; margin-bottom:16px; }
footer.site .blurb { font-size:14px; line-height:1.6; max-width:32ch; }
/* .foot-h looks like the old h5 but is not a heading: h5 under the page's h2/h3
   sections broke heading order in the a11y audit */
footer.site .foot-h { color:#fff; font-family:var(--font-head); font-weight:700; font-size:13px; letter-spacing:.1em; text-transform:uppercase; margin:0 0 16px; }
footer.site ul { list-style:none; margin:0; padding:0; }
footer.site li { margin-bottom:10px; font-size:14px; }
footer.site li a:hover { color:var(--sos-gold-bright); }
.foot-bottom { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin-top:44px; padding-top:22px; border-top:1px solid rgba(255,255,255,.08); font-size:12px; letter-spacing:.04em; }

/* ---------- Quote modal ---------- */
.overlay { position:fixed; inset:0; background:rgba(14,14,14,.72); backdrop-filter:blur(4px); z-index:300; display:none; align-items:center; justify-content:center; padding:24px; }
.overlay.open { display:flex; }
.modal { background:var(--surface-card); border-radius:var(--radius-xl); max-width:520px; width:100%; padding:36px; box-shadow:var(--shadow-lg); position:relative; max-height:92vh; overflow:auto; }
.modal .close { position:absolute; top:6px; right:6px; width:44px; height:44px; display:grid; place-items:center; background:none; border:0; border-radius:var(--radius-sm); cursor:pointer; color:var(--text-muted); }
.modal .close:hover { color:var(--text-strong); background:var(--surface-wash); }
.modal h3 { font-size:25px; font-weight:800; margin-bottom:6px; }
.modal .sub { font-size:14px; color:var(--text-muted); margin-bottom:22px; }
.field { display:flex; flex-direction:column; gap:7px; margin-bottom:15px; }
.field label { font-family:var(--font-head); font-weight:600; font-size:13px; color:var(--text-strong); }
.field input, .field select, .field textarea { font-family:var(--font-body); font-size:15px; color:var(--text-strong); background:var(--surface-card); border:1.5px solid var(--border-strong); border-radius:var(--radius-sm); padding:11px 13px; outline:none; transition:all var(--dur-fast) var(--ease-out); width:100%; }
.field textarea { resize:vertical; min-height:84px; }
.field input:focus, .field select:focus, .field textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--focus-ring); }
.thanks { text-align:center; padding:18px 0; }
.thanks .ok { width:66px; height:66px; border-radius:50%; background:rgba(63,125,78,.14); color:var(--sos-success); display:grid; place-items:center; margin:0 auto 18px; }
.thanks .ok .lucide { width:32px; height:32px; }

/* Mid-width squeeze: 8 nav items + phone text do not fit between 981-1180px,
   so tighten the nav and swap the phone TEXT for the compact call icon. */
@media (min-width:981px) and (max-width:1180px){
  nav.main { gap:15px; }
  nav.main a { font-size:13px; }
  .bar-phone { display:none; }
  .bar-call { display:flex; }
}

/* ---------- responsive ---------- */
@media (max-width:980px){
  nav.main, .bar-phone { display:none; }
  .burger, .bar-call { display:flex; }
  .grid-3 { grid-template-columns:1fr 1fr; }
  .stats-row { grid-template-columns:1fr 1fr; }
  .foot-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:620px){
  .grid-3, .grid-2, .stats-row, .foot-grid { grid-template-columns:1fr; }
  .bar-in { height:78px; }
  .bar img.logo { height:64px; }
  .bar-right .btn { padding:11px 18px; font-size:14px; }
}

/* ---------- Instagram feed section ---------- */
.ig { background:var(--surface-card); }
.ig.dark { background:var(--sos-black); }
/* bright brass on black like .phero/.hero eyebrows: deep gold is 3.9:1 there (fails AA) */
.ig.dark .eyebrow { color:var(--sos-gold-bright); }
.ig-head { display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:30px; }
.ig-id { display:flex; align-items:center; gap:16px; }
.ig-id .glyph { width:54px; height:54px; border-radius:16px; background:var(--accent); color:var(--accent-contrast); display:grid; place-items:center; flex:none; }
.ig-id .glyph .lucide { width:28px; height:28px; }
.ig-id .eyebrow { margin-bottom:4px; }
.ig-id .handle { font-family:var(--font-head); font-weight:800; font-size:24px; color:var(--text-strong); letter-spacing:-0.01em; }
.ig.dark .ig-id .handle { color:#fff; }
.ig-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.ig-tile { position:relative; aspect-ratio:1/1; border-radius:var(--radius-card); overflow:hidden; background:var(--sos-charcoal); display:grid; place-items:center; cursor:pointer; }
.ig-tile img.sym { height:38%; opacity:.10; filter:invert(1); }
/* Reel preview clip: sits over the photo, fades in while playing (hover on
   desktop, in-view on touch). Decorative only - aria-hidden, no pointer. */
.ig-tile video.igvid { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity var(--dur-base) var(--ease-out); pointer-events:none; }
.ig-tile.vplay video.igvid { opacity:1; }
.ig-tile .badge { position:absolute; top:10px; right:10px; color:#fff; opacity:.9; }
.ig-tile .badge .lucide { width:20px; height:20px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.ig-tile .ovl { position:absolute; inset:0; background:rgba(14,14,14,.55); display:flex; align-items:center; justify-content:center; gap:8px; color:#fff; font-family:var(--font-head); font-weight:700; font-size:14px; opacity:0; transition:opacity var(--dur-base) var(--ease-out); }
.ig-tile:hover .ovl { opacity:1; }
.ig-tile .lbl { position:absolute; left:12px; bottom:11px; font-family:var(--font-head); font-weight:600; font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:#8C8A85; }
.ig-note { margin-top:20px; font-size:12.5px; font-style:italic; color:var(--text-faint); }
.ig.dark .ig-note { color:#7A7A7A; }
@media (max-width:880px){ .ig-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:560px){ .ig-grid { grid-template-columns:repeat(2,1fr); } }


/* ---------- Service detail shared ---------- */
.split { display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px; align-items:start; }
.incl { list-style:none; margin:0; padding:0; }
.incl li { display:flex; gap:12px; align-items:flex-start; padding:9px 0; font-size:16px; color:var(--text-body); }
.incl li i { color:var(--accent); flex:none; margin-top:2px; }
@media (max-width:880px){ .split { grid-template-columns:1fr; gap:32px; } }

/* ---------- Full-bleed photo showcase band ---------- */
.showcase { position:relative; background-size:cover; background-position:center; background-attachment:fixed; overflow:hidden; }
.showcase .ov { position:absolute; inset:0; background:linear-gradient(90deg, rgba(14,14,14,.88), rgba(14,14,14,.55) 58%, rgba(14,14,14,.3)); z-index:1; }
.showcase .wrap { position:relative; z-index:2; padding:130px 32px; color:#fff; }
.showcase .eyebrow { color:var(--sos-gold-bright); }
.showcase h2 { color:#fff; font-size:clamp(32px,4.6vw,56px); font-weight:800; line-height:1.04; max-width:18ch; margin-top:14px; }
.showcase h2 .gold { color:var(--sos-gold-bright); }
.showcase p { color:#D9D7D2; max-width:52ch; margin-top:18px; font-size:18px; line-height:1.6; }
.showcase .btn { margin-top:30px; }
@media (max-width:760px){
  /* iOS Safari auto-zooms the page when a focused input is under 16px - keep form fields at 16px on phones. */
  .field input, .field select, .field textarea { font-size:16px; }
}
@media (max-width:760px){
  .showcase { background-attachment:scroll; }
  .showcase .ov { background:rgba(14,14,14,.72); }
  .showcase .wrap { padding:90px 32px; }
}

/* ============================================================
   SERVICES REVAMP - shared components (overview + detail pages)
   ============================================================ */

/* ---- Inline trust row (on dark heroes) ---- */
.trust-row { display:flex; flex-wrap:wrap; align-items:center; gap:13px 22px; margin-top:32px; }
.trust-row .ti { display:flex; align-items:center; gap:9px; font-family:var(--font-head); font-weight:600; font-size:14px; color:#C7C5C0; white-space:nowrap; }
.trust-row .ti .lucide { width:17px; height:17px; color:var(--sos-gold-bright); }
.trust-row .ti b { color:#fff; font-weight:800; }
.trust-row .stars { color:var(--sos-gold-bright); font-size:15px; letter-spacing:2px; }
.trust-row .vbar { width:1px; height:18px; background:rgba(255,255,255,.18); }
@media (max-width:600px){ .trust-row .vbar { display:none; } }

/* ---- Signature service tiles (big, image-led) ---- */
.feature-tiles { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.ftile { position:relative; display:flex; align-items:flex-end; min-height:400px; border-radius:var(--radius-card); overflow:hidden; background:var(--sos-charcoal); isolation:isolate; box-shadow:var(--shadow-md); transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
a.ftile:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.ftile img.bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; transition:transform var(--dur-slow) var(--ease-out); }
a.ftile:hover img.bg { transform:scale(1.06); }
.ftile .sym { position:absolute; right:-30px; bottom:-20px; height:62%; opacity:.06; filter:invert(1); z-index:0; }
.ftile .grad { position:absolute; inset:0; z-index:1; background:linear-gradient(to top, rgba(12,12,12,.94) 6%, rgba(12,12,12,.55) 46%, rgba(12,12,12,.12) 100%); }
.ftile .body { position:relative; z-index:2; padding:34px 34px 30px; width:100%; }
.ftile .k { font-family:var(--font-head); font-weight:700; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--sos-gold-bright); }
.ftile h3 { color:#fff; font-size:27px; font-weight:800; margin:10px 0 8px; letter-spacing:-0.01em; }
.ftile p { color:#D5D3CE; font-size:14.5px; line-height:1.55; max-width:42ch; }
.ftile .tags { display:flex; flex-wrap:wrap; gap:7px; margin-top:16px; }
.ftile .tags span { font-family:var(--font-head); font-weight:600; font-size:11.5px; letter-spacing:.02em; color:#EDEAE3; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.16); padding:5px 11px; border-radius:999px; }
.ftile .go { display:inline-flex; align-items:center; gap:8px; margin-top:20px; font-family:var(--font-head); font-weight:700; font-size:14px; color:var(--sos-gold-bright); }
a.ftile:hover .go { gap:12px; }
.ftile .go .lucide { width:17px; height:17px; transition:transform var(--dur-fast); }
.ftile .corner { position:absolute; top:18px; left:18px; z-index:2; width:30px; height:30px; border-top:2px solid var(--sos-gold-bright); border-left:2px solid var(--sos-gold-bright); opacity:.85; }
.ftile .photo-soon { position:absolute; top:18px; right:18px; z-index:2; font-family:var(--font-head); font-weight:600; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:#cbb88a; background:rgba(0,0,0,.4); border:1px solid rgba(205,163,73,.4); padding:4px 9px; border-radius:999px; }
@media (max-width:760px){ .feature-tiles { grid-template-columns:1fr; } .ftile { min-height:340px; } }

/* ---- Sticky category filter ---- */
.svc-filter { position:sticky; top:90px; z-index:40; background:rgba(247,244,238,.86); backdrop-filter:blur(10px); border-bottom:1px solid var(--border-subtle); padding:16px 32px; }
.svc-filter .chips { max-width:1200px; margin:0 auto; }

/* ---- Category section header ---- */
.cat-sec { margin-bottom:54px; scroll-margin-top:150px; }
.cat-head { display:flex; align-items:flex-start; gap:18px; padding-bottom:20px; margin-bottom:26px; border-bottom:1px solid var(--border-subtle); }
.cat-head .idx { font-family:var(--font-display); font-weight:700; font-size:20px; color:var(--accent); line-height:1; padding-top:3px; min-width:30px; }
.cat-head .ct { flex:1; }
.cat-head h3 { font-size:clamp(22px,2.6vw,28px); font-weight:800; letter-spacing:-0.01em; }
.cat-head .cd { margin-top:7px; font-size:14.5px; line-height:1.5; color:var(--text-muted); max-width:60ch; }
.cat-head .cn { font-family:var(--font-head); font-weight:700; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); white-space:nowrap; padding-top:6px; }

/* ---- Upgraded service card ---- */
.svc { position:relative; }
.svc::before { content:""; position:absolute; left:0; top:0; height:3px; width:0; background:var(--accent); border-radius:var(--radius-card) var(--radius-card) 0 0; transition:width var(--dur-base) var(--ease-out); }
a.svc:hover::before { width:100%; }
a.svc:hover .ic { background:var(--accent); color:var(--accent-contrast); }
.svc .ic { transition:background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); }
a.svc:hover .more { gap:11px; }
.svc .more .lucide { transition:transform var(--dur-fast); }

/* ---- Numbered process (connected steps) ---- */
.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; counter-reset:step; }
.steps-5 { grid-template-columns:repeat(5,1fr); }
.step { position:relative; padding:28px 22px; background:var(--surface-card); border:1px solid var(--border-subtle); border-radius:var(--radius-card); box-shadow:var(--shadow-sm); }
.step .num { font-family:var(--font-display); font-weight:700; font-size:34px; line-height:1; color:var(--sos-gold-soft); }
.step.dark .num { color:rgba(205,163,73,.45); }
.step h3, .step h4 { font-size:18px; font-weight:800; margin:14px 0 8px; }
.step p { font-size:14px; line-height:1.55; color:var(--text-muted); }
.step .sic { position:absolute; top:24px; right:22px; color:var(--accent); opacity:.9; }
.step .sic .lucide { width:22px; height:22px; }
@media (max-width:880px){ .steps { grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .steps { grid-template-columns:1fr; } }

/* ---- Before / after proof strip ---- */
.proof-grid { display:grid; grid-template-columns:1.4fr 1fr; gap:18px; }
.proof-grid .photo { min-height:100%; }
.proof-col { display:grid; grid-template-rows:1fr 1fr; gap:18px; }
.ba { position:relative; border-radius:var(--radius-card); overflow:hidden; background:var(--sos-charcoal); }
.ba img { width:100%; height:100%; object-fit:cover; }
.ba .stamp { position:absolute; top:13px; left:13px; z-index:2; font-family:var(--font-head); font-weight:700; font-size:11px; letter-spacing:.06em; text-transform:uppercase; padding:4px 11px; border-radius:999px; }
.ba .stamp.before { background:rgba(14,14,14,.78); color:#fff; }
.ba .stamp.after { background:var(--sos-gold-bright); color:#0E0E0E; }
@media (max-width:760px){ .proof-grid { grid-template-columns:1fr; } }

/* ---- Detail page: assurance / quote card (sticky) ---- */
.detail-grid { display:grid; grid-template-columns:1.5fr 0.9fr; gap:48px; align-items:start; }
.qcard { position:sticky; top:96px; background:var(--surface-card); border:1px solid var(--border-subtle); border-radius:var(--radius-xl); box-shadow:var(--shadow-md); overflow:hidden; }
.qcard .qtop { background:var(--sos-black); color:#fff; padding:24px 26px; }
.qcard .qtop .e { font-family:var(--font-head); font-weight:700; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--sos-gold-bright); }
.qcard .qtop h3 { color:#fff; font-size:22px; font-weight:800; margin-top:7px; }
.qcard .qbody { padding:22px 26px 26px; }
.qcard ul { list-style:none; margin:0 0 20px; padding:0; }
.qcard li { display:flex; gap:12px; align-items:flex-start; padding:10px 0; border-bottom:1px dashed var(--border-subtle); font-size:14.5px; color:var(--text-body); }
.qcard li:last-child { border-bottom:0; }
.qcard li .lucide { width:18px; height:18px; color:var(--accent); flex:none; margin-top:2px; }
.qcard li b { color:var(--text-strong); font-weight:700; }
.qcard .btn { width:100%; justify-content:center; }
.qcard .callrow { display:flex; align-items:center; justify-content:center; gap:9px; margin-top:14px; font-family:var(--font-head); font-weight:700; font-size:15px; color:var(--text-strong); }
.qcard .callrow .lucide { color:var(--accent); width:18px; height:18px; }
@media (max-width:880px){ .detail-grid { grid-template-columns:1fr; gap:30px; } .qcard { position:static; } }

/* ---- Related services row ---- */
.related { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.rel { display:flex; align-items:center; gap:13px; padding:18px 20px; background:var(--surface-card); border:1px solid var(--border-subtle); border-radius:var(--radius-card); box-shadow:var(--shadow-sm); transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base); }
.rel:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--accent); }
.rel .ic { width:40px; height:40px; border-radius:var(--radius-sm); background:rgba(176,133,44,.12); color:var(--accent); display:grid; place-items:center; flex:none; }
.rel .ic .lucide { width:21px; height:21px; }
.rel h4 { font-size:15px; font-weight:700; }
.rel .lucide.arr { margin-left:auto; color:var(--text-faint); width:18px; height:18px; }
@media (max-width:880px){ .related { grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .related { grid-template-columns:1fr; } }

/* reveal-on-scroll */
.reveal { opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal { opacity:1; transform:none; transition:none; } }

/* ============================================================
   COMMERCIAL / OFFICE BUILD-OUTS page
   ============================================================ */
/* Audience cards */
.aud-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.aud { padding:26px 22px; background:var(--surface-card); border:1px solid var(--border-subtle); border-radius:var(--radius-card); box-shadow:var(--shadow-sm); transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base); }
.aud:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--accent); }
.aud .ic { width:46px; height:46px; border-radius:var(--radius-sm); background:rgba(176,133,44,.12); color:var(--accent); display:grid; place-items:center; margin-bottom:16px; }
.aud .ic .lucide { width:24px; height:24px; }
.aud h4 { font-size:17px; font-weight:800; }
.aud p { font-size:13.5px; line-height:1.5; color:var(--text-muted); margin-top:7px; }
@media (max-width:880px){ .aud-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .aud-grid { grid-template-columns:1fr; } }

/* Capabilities columns (mirrors the preferred-vendor proposal) */
.cap-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:34px; }
.cap-col h4 { font-size:18px; font-weight:800; padding-bottom:14px; margin-bottom:6px; border-bottom:2px solid var(--accent); }
.cap-col ul { list-style:none; margin:0; padding:0; }
.cap-col li { display:flex; gap:11px; align-items:flex-start; padding:11px 0; border-bottom:1px solid var(--border-subtle); font-size:14.5px; color:var(--text-body); }
.cap-col li:last-child { border-bottom:0; }
.cap-col li .lucide { width:17px; height:17px; color:var(--accent); flex:none; margin-top:2px; }
@media (max-width:880px){ .cap-grid { grid-template-columns:1fr; gap:30px; } }

/* Trusted-by logo grid */
.logos-note { font-family:var(--font-head); font-weight:700; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-faint); text-align:center; }
.logo-tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:24px; max-width:980px; margin-left:auto; margin-right:auto; }
.logo-tile { display:flex; align-items:center; justify-content:center; height:124px; padding:24px; background:var(--surface-card); border:1px solid var(--border-subtle); border-radius:var(--radius-card); box-shadow:var(--shadow-sm); transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base); }
.logo-tile:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--accent); }
.logo-tile img { max-width:100%; max-height:100%; object-fit:contain; }
.logo-tile.dark { background:#0E0E0E; border-color:rgba(255,255,255,.1); }
@media (max-width:760px){ .logo-tiles { grid-template-columns:1fr 1fr; } }
@media (max-width:420px){ .logo-tiles { grid-template-columns:1fr 1fr; gap:12px; } .logo-tile { height:96px; padding:16px; } }

/* Trusted-by client-logo strip (home + about) - slimmer single-row variant */
.block.trusted { padding:62px 0; }
.logo-tiles.strip { grid-template-columns:repeat(6,1fr); max-width:1060px; gap:14px; margin-top:22px; }
.logo-tiles.strip .logo-tile { height:104px; padding:13px 16px; }
@media (max-width:900px){ .logo-tiles.strip { grid-template-columns:repeat(3,1fr); } }
@media (max-width:480px){ .logo-tiles.strip { grid-template-columns:1fr 1fr; } }

/* Persistent footer rating badge (injected on every page via the shared footer) */
.foot-rating { display:inline-flex; align-items:center; gap:9px; margin-top:18px; padding:8px 14px; border:1px solid rgba(255,255,255,.16); border-radius:999px; text-decoration:none; transition:border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out); }
.foot-rating:hover { border-color:var(--sos-gold-bright); background:rgba(176,133,44,.10); }
.foot-rating .fr-stars { color:var(--sos-gold-bright); font-size:13px; letter-spacing:1.5px; }
.foot-rating .fr-txt { font-family:var(--font-head); font-weight:600; font-size:13px; color:#C7C5C0; }
.foot-rating .fr-txt strong { color:#fff; font-weight:700; }

/* SETRAC flagship feature band (commercial page) */
.feat-band { background:#131311; border-radius:var(--radius-card); overflow:hidden; display:flex; box-shadow:var(--shadow-md); }
.feat-band .fb-photo { flex:0 0 44%; position:relative; min-height:380px; background:#1c1b18; }
.feat-band .fb-photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.feat-band .fb-body { flex:1; padding:46px 48px; display:flex; flex-direction:column; align-items:flex-start; }
.feat-band .fb-eyebrow { font-family:var(--font-head); font-weight:700; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--sos-gold-bright); }
.feat-band .fb-client { font-family:var(--font-head); font-weight:800; font-size:30px; letter-spacing:.04em; color:#fff; margin:16px 0 2px; }
.feat-band .fb-sub { font-size:12.5px; color:#a49f95; margin-bottom:18px; }
.feat-band h2 { color:#fff; font-size:clamp(24px,2.5vw,32px); font-weight:800; line-height:1.16; letter-spacing:-.01em; margin:0 0 14px; }
.feat-band h2 .gold { color:var(--sos-gold-bright); }
.feat-band .fb-lead { font-size:15px; line-height:1.62; color:#c9c5bc; max-width:52ch; margin:0 0 22px; }
.feat-band .fb-chips { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 26px; }
.feat-band .fb-chips span { display:inline-flex; align-items:center; gap:7px; font-family:var(--font-head); font-weight:600; font-size:12px; color:#EDEAE3; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); padding:7px 13px; border-radius:999px; }
.feat-band .fb-chips .lucide { width:15px; height:15px; color:var(--sos-gold-bright); }
@media (max-width:860px){ .feat-band { flex-direction:column; } .feat-band .fb-photo { flex:0 0 auto; min-height:240px; } .feat-band .fb-body { padding:32px 26px; } }

/* Spec strip on dark */
.spec-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.1); border-radius:var(--radius-card); overflow:hidden; }
.spec-strip .cell { background:var(--sos-black); padding:26px 24px; }
.spec-strip .cell .lucide { color:var(--sos-gold-bright); width:24px; height:24px; }
.spec-strip .cell h4 { color:#fff; font-size:16px; font-weight:800; margin:14px 0 6px; }
.spec-strip .cell p { color:#A8A6A0; font-size:13px; line-height:1.5; }
@media (max-width:880px){ .spec-strip { grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .spec-strip { grid-template-columns:1fr; } }

/* ============================================================
   WORK GALLERY + immersive before/after lightbox (homepage)
   ============================================================ */
.work-gallery { display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
@media (max-width:820px){ .work-gallery { grid-template-columns:1fr; } }

.wtile { position:relative; display:block; width:100%; aspect-ratio:4/3; border-radius:var(--radius-xl); overflow:hidden; background:var(--sos-charcoal); box-shadow:var(--shadow-md); cursor:pointer; isolation:isolate; border:0; padding:0; text-align:left; font:inherit; color:inherit; }
.wtile:focus-visible { outline:3px solid var(--sos-gold-bright); outline-offset:3px; }
.wtile > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease-out); z-index:0; }
.wtile:hover > img { transform:scale(1.07); }
.wtile .wgrad { position:absolute; inset:0; z-index:1; background:linear-gradient(to top, rgba(10,10,10,.93) 4%, rgba(10,10,10,.5) 34%, rgba(10,10,10,0) 66%); }
.wtile .wba { position:absolute; top:18px; left:18px; z-index:2; display:inline-flex; align-items:center; gap:7px; font-family:var(--font-head); font-weight:700; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#0E0E0E; background:var(--sos-gold-bright); padding:6px 12px; border-radius:999px; box-shadow:0 4px 14px rgba(0,0,0,.25); }
.wtile .wba .lucide { width:14px; height:14px; }
.wtile .wbody { position:absolute; left:0; right:0; bottom:0; z-index:2; padding:30px 30px 26px; }
.wtile .wloc { font-family:var(--font-head); font-weight:700; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--sos-gold-bright); }
.wtile h3 { color:#fff; font-size:clamp(22px,2.5vw,27px); font-weight:800; letter-spacing:-.01em; margin:9px 0 0; max-width:20ch; }
.wtile .wview { display:inline-flex; align-items:center; gap:11px; margin-top:18px; font-family:var(--font-head); font-weight:700; font-size:14px; color:#fff; }
.wtile .wview .vico { width:36px; height:36px; border-radius:999px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3); display:grid; place-items:center; color:#fff; transition:background var(--dur-base), border-color var(--dur-base), color var(--dur-base), transform var(--dur-base) var(--ease-out); }
.wtile:hover .wview .vico { background:var(--sos-gold-bright); border-color:var(--sos-gold-bright); color:#0E0E0E; transform:scale(1.08); }
.wtile .wview .lucide { width:18px; height:18px; }

/* Lightbox shell */
.wlb { position:fixed; inset:0; z-index:1000; display:none; }
.wlb.open { display:block; }
.wlb-back { position:absolute; inset:0; background:rgba(8,8,8,.84); backdrop-filter:blur(6px); opacity:0; transition:opacity .35s var(--ease-out); }
.wlb.open .wlb-back { opacity:1; }
.wlb-scroll { position:absolute; inset:0; overflow-y:auto; padding:42px 18px 60px; -webkit-overflow-scrolling:touch; }
.wlb-panel { position:relative; max-width:1060px; margin:0 auto; background:var(--surface-page,#FAF7F1); border-radius:var(--radius-xl); overflow:hidden; box-shadow:0 36px 100px rgba(0,0,0,.55); transform:translateY(26px) scale(.985); opacity:0; transition:transform .42s var(--ease-out), opacity .42s var(--ease-out); }
.wlb.open .wlb-panel { transform:none; opacity:1; }
.wlb-close { position:absolute; top:16px; right:16px; z-index:6; width:44px; height:44px; border-radius:999px; border:0; background:rgba(10,10,10,.55); color:#fff; display:grid; place-items:center; cursor:pointer; backdrop-filter:blur(4px); transition:background var(--dur-base); }
.wlb-close:hover { background:rgba(10,10,10,.8); }
.wlb-close .lucide { width:22px; height:22px; }

.wlb-content { padding:30px clamp(22px,4vw,46px) clamp(30px,4vw,46px); }
.wlb-loc { font-family:var(--font-head); font-weight:700; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-accent,#9A6E1E); }
.wlb-title { font-size:clamp(26px,3.6vw,38px); font-weight:800; letter-spacing:-.015em; margin:9px 0 0; max-width:24ch; }
.wlb-meta { display:flex; flex-wrap:wrap; gap:9px; margin-top:18px; }
.wlb-meta span { display:inline-flex; align-items:center; gap:7px; font-family:var(--font-head); font-weight:600; font-size:13px; color:var(--text-body); background:var(--surface-card); border:1px solid var(--border-subtle); border-radius:999px; padding:7px 13px; }
.wlb-meta span .lucide { width:15px; height:15px; color:var(--accent); }
.wlb-drag-note { display:flex; align-items:center; gap:9px; margin:22px 0 12px; font-family:var(--font-head); font-weight:700; font-size:12.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--text-faint); }
.wlb-drag-note .lucide { width:17px; height:17px; color:var(--accent); }

.wlb-grid { display:grid; grid-template-columns:1.5fr 1fr; gap:38px; margin-top:34px; }
.wlb-grid h4 { font-family:var(--font-head); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-accent,#9A6E1E); margin:0 0 16px; }
.wlb-story p { font-size:16px; line-height:1.7; color:var(--text-body); margin:0 0 22px; }
.wlb-during { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.wlb-thumb { position:relative; border-radius:var(--radius-card); overflow:hidden; aspect-ratio:4/3; background:var(--sos-charcoal); }
.wlb-thumb img { width:100%; height:100%; object-fit:cover; }
.wlb-thumb span { position:absolute; left:0; right:0; bottom:0; padding:18px 12px 9px; font-family:var(--font-head); font-weight:600; font-size:11.5px; color:#fff; background:linear-gradient(to top, rgba(10,10,10,.82), rgba(10,10,10,0)); }
.wlb-aside { background:var(--surface-card); border:1px solid var(--border-subtle); border-radius:var(--radius-card); padding:26px; box-shadow:var(--shadow-sm); align-self:start; }
.wlb-aside ul { list-style:none; margin:0 0 22px; padding:0; }
.wlb-aside li { display:flex; gap:11px; align-items:flex-start; font-size:14.5px; color:var(--text-body); padding:9px 0; border-bottom:1px solid var(--border-subtle); }
.wlb-aside li:last-child { border-bottom:0; }
.wlb-aside li .lucide { width:17px; height:17px; color:var(--accent); flex:none; margin-top:2px; }
.wlb-aside .btn { width:100%; justify-content:center; }
.wlb-aside .btn + .btn { margin-top:10px; }
@media (max-width:820px){ .wlb-grid { grid-template-columns:1fr; gap:28px; } }

/* Before/After comparison slider */
.cmp { position:relative; width:100%; aspect-ratio:3/2; overflow:hidden; background:#E9E4DA url('assets/logos/SOS_symbol_faint.svg') center no-repeat; background-size:48px auto; cursor:ew-resize; touch-action:pan-y; user-select:none; --pos:50%; }
.cmp .cmp-handle, .cmp .cmp-divider { touch-action:none; }
.cmp img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; -webkit-user-drag:none; pointer-events:none; }
.cmp .cmp-after { z-index:1; }
.cmp .cmp-before { z-index:2; clip-path:inset(0 calc(100% - var(--pos)) 0 0); }
.cmp.hint .cmp-before { transition:clip-path .45s var(--ease-out); }
.cmp.hint .cmp-divider, .cmp.hint .cmp-handle { transition:left .45s var(--ease-out); }
.cmp .cmp-lab { position:absolute; bottom:16px; z-index:4; font-family:var(--font-head); font-weight:700; font-size:11.5px; letter-spacing:.09em; text-transform:uppercase; color:#fff; background:rgba(10,10,10,.58); padding:6px 12px; border-radius:999px; backdrop-filter:blur(3px); pointer-events:none; }
.cmp .cmp-lab.before { left:16px; } .cmp .cmp-lab.after { right:16px; }
.cmp .cmp-divider { position:absolute; top:0; bottom:0; left:var(--pos); width:3px; background:#fff; z-index:3; transform:translateX(-1.5px); box-shadow:0 0 0 1px rgba(0,0,0,.12); pointer-events:none; }
.cmp .cmp-handle { position:absolute; top:50%; left:var(--pos); z-index:5; width:50px; height:50px; transform:translate(-50%,-50%); border-radius:999px; background:#fff; box-shadow:0 6px 20px rgba(0,0,0,.4); display:grid; place-items:center; cursor:ew-resize; border:0; padding:0; }
.cmp .cmp-handle:focus-visible { outline:3px solid var(--sos-gold-bright); outline-offset:3px; }
.cmp .cmp-handle .lucide { width:24px; height:24px; color:#0E0E0E; }
@media (prefers-reduced-motion:reduce){ .cmp.hint .cmp-before, .cmp.hint .cmp-divider, .cmp.hint .cmp-handle { transition:none; } }

/* Lightbox (click a process photo to enlarge) */
body.lb-lock { overflow:hidden; }
.lb-overlay { position:fixed; inset:0; z-index:300; background:rgba(10,10,10,.93); display:none; align-items:center; justify-content:center; padding:24px; }
.lb-overlay.open { display:flex; }
.lb-stage { margin:0; max-width:min(1240px,94vw); display:flex; flex-direction:column; align-items:center; gap:14px; }
.lb-img { max-width:100%; max-height:80vh; object-fit:contain; border-radius:10px; box-shadow:0 30px 80px rgba(0,0,0,.55); background:#1a1a1a; }
.lb-vid { max-width:100%; max-height:80vh; border-radius:10px; box-shadow:0 30px 80px rgba(0,0,0,.55); background:#0E0E0E; }
.lb-cap { display:flex; align-items:baseline; gap:14px; color:#DEDCD7; font-size:15px; line-height:1.5; text-align:center; }
.lb-cap .lb-n { font-family:var(--font-head); font-weight:800; font-size:13px; letter-spacing:.12em; color:var(--sos-gold-bright); white-space:nowrap; }
.lb-btn { position:absolute; z-index:2; width:50px; height:50px; border-radius:999px; border:1px solid rgba(255,255,255,.22); background:rgba(20,20,20,.72); color:#fff; display:grid; place-items:center; cursor:pointer; }
.lb-btn:hover { background:var(--sos-gold-bright); color:#0E0E0E; border-color:var(--sos-gold-bright); }
.lb-btn:focus-visible { outline:3px solid var(--sos-gold-bright); outline-offset:3px; }
.lb-btn .lucide { width:24px; height:24px; }
.lb-x { top:22px; right:22px; }
.lb-prev { left:22px; top:50%; transform:translateY(-50%); }
.lb-next { right:22px; top:50%; transform:translateY(-50%); }
@media (max-width:640px){ .lb-btn { width:42px; height:42px; } .lb-prev { left:10px; } .lb-next { right:10px; } .lb-x { top:12px; right:12px; } .lb-cap { flex-direction:column; gap:4px; align-items:center; } }

/* ============================================================
   PORTFOLIO (Our Work) - featured + filterable card grid + case study
   ============================================================ */
/* Featured project band */
.pf-feature { display:grid; grid-template-columns:1.35fr 1fr; gap:0; border-radius:var(--radius-xl); overflow:hidden; background:var(--surface-card); border:1px solid var(--border-subtle); box-shadow:var(--shadow-md); margin-bottom:56px; }
.pf-feature .pf-fimg { position:relative; min-height:380px; background:var(--sos-charcoal); }
.pf-feature .pf-fimg img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.pf-feature .pf-fimg .badge { position:absolute; top:18px; left:18px; display:inline-flex; align-items:center; gap:7px; font-family:var(--font-head); font-weight:700; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#0E0E0E; background:var(--sos-gold-bright); padding:6px 12px; border-radius:999px; }
.pf-feature .pf-fbody { padding:clamp(28px,3.4vw,48px); display:flex; flex-direction:column; justify-content:center; }
.pf-feature .pf-type { font-family:var(--font-head); font-weight:700; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-accent,#9A6E1E); }
.pf-feature h3 { font-size:clamp(24px,3vw,32px); font-weight:800; letter-spacing:-.01em; margin:10px 0 6px; }
.pf-feature .pf-loc { display:flex; align-items:center; gap:7px; font-family:var(--font-head); font-weight:600; font-size:14px; color:var(--text-muted); }
.pf-feature .pf-loc .lucide { width:15px; height:15px; color:var(--accent); }
.pf-feature p { font-size:15.5px; line-height:1.6; color:var(--text-body); margin:16px 0 0; max-width:46ch; }
.pf-feature .btn { margin-top:24px; align-self:flex-start; }
@media (max-width:820px){ .pf-feature { grid-template-columns:1fr; } .pf-feature .pf-fimg { min-height:260px; } }

/* Filter bar */
.pf-filter { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:30px; }

/* Card grid */
.pf-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media (max-width:900px){ .pf-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .pf-grid { grid-template-columns:1fr; } }
.pf-card { display:block; border-radius:var(--radius-card); overflow:hidden; background:var(--surface-card); border:1px solid var(--border-subtle); box-shadow:var(--shadow-sm); transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base); }
.pf-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--accent); }
.pf-card .pf-imgwrap { position:relative; aspect-ratio:4/3; overflow:hidden; background:#E9E4DA url('assets/logos/SOS_symbol_faint.svg') center no-repeat; background-size:40px auto; }
.pf-card .pf-imgwrap img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease-out); }
.pf-card:hover .pf-imgwrap img { transform:scale(1.06); }
.pf-card .pf-chip { position:absolute; top:14px; left:14px; z-index:2; font-family:var(--font-head); font-weight:700; font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:#0E0E0E; background:var(--sos-gold-bright); padding:5px 11px; border-radius:999px; box-shadow:0 3px 10px rgba(0,0,0,.22); }
.pf-card .pf-cap { padding:18px 20px 20px; }
.pf-card h3 { font-size:18px; font-weight:800; letter-spacing:-.01em; }
.pf-card .pf-loc { display:flex; align-items:center; gap:7px; margin-top:6px; font-family:var(--font-head); font-weight:600; font-size:13px; color:var(--text-muted); }
.pf-card .pf-loc .lucide { width:14px; height:14px; color:var(--accent); }
.pf-card .pf-view { display:inline-flex; align-items:center; gap:8px; margin-top:14px; font-family:var(--font-head); font-weight:700; font-size:13.5px; color:var(--accent); }
.pf-card:hover .pf-view { gap:11px; }
.pf-card .pf-view .lucide { width:16px; height:16px; }

/* Case-study (project.html) */
.pj-metabar { display:flex; flex-wrap:wrap; gap:10px; margin:18px 0 30px; }
.pj-metabar span, .pj-metabar a.pj-svc { display:inline-flex; align-items:center; gap:7px; font-family:var(--font-head); font-weight:600; font-size:13px; color:var(--text-body); background:var(--surface-card); border:1px solid var(--border-subtle); border-radius:999px; padding:7px 14px; }
.pj-metabar span .lucide, .pj-metabar a.pj-svc .lucide { width:15px; height:15px; color:var(--accent); }
.pj-metabar a.pj-svc { text-decoration:none; border-color:var(--accent); }
.pj-metabar a.pj-svc:hover { background:var(--accent); color:#fff; }
.pj-metabar a.pj-svc:hover .lucide { color:#fff; }
.sv-work .pf-grid { margin-top:8px; }
@media (max-width: 900px) { .sv-work .pf-grid { grid-template-columns:1fr 1fr; } }
@media (max-width: 560px) { .sv-work .pf-grid { grid-template-columns:1fr; } }
.pj-cmpnote { display:flex; align-items:center; gap:9px; margin:16px 0 34px; font-family:var(--font-head); font-weight:700; font-size:12.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--text-faint); }
.pj-cmpnote .lucide { width:17px; height:17px; color:var(--accent); }
.pj-body { display:grid; grid-template-columns:1.5fr 1fr; gap:48px; align-items:start; margin-top:12px; }
.pj-body .pj-story h3 { font-size:22px; font-weight:800; margin-bottom:14px; }
.pj-body .pj-story p { font-size:16.5px; line-height:1.75; color:var(--text-body); margin-bottom:16px; }
.pj-facts { background:var(--surface-card); border:1px solid var(--border-subtle); border-radius:var(--radius-card); padding:26px; box-shadow:var(--shadow-sm); align-self:start; }
.pj-facts h4 { font-family:var(--font-head); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-accent,#9A6E1E); margin-bottom:16px; }
.pj-facts ul { list-style:none; margin:0 0 22px; padding:0; }
.pj-facts li { display:flex; gap:11px; align-items:flex-start; font-size:14.5px; color:var(--text-body); padding:9px 0; border-bottom:1px solid var(--border-subtle); }
.pj-facts li:last-child { border-bottom:0; }
.pj-facts li .lucide { width:17px; height:17px; color:var(--accent); flex:none; margin-top:2px; }
.pj-facts .btn { width:100%; justify-content:center; }
@media (max-width:820px){ .pj-body { grid-template-columns:1fr; gap:30px; } }
.pj-nav { display:flex; justify-content:space-between; gap:16px; margin-top:14px; flex-wrap:wrap; }
.pj-nav a { display:inline-flex; align-items:center; gap:9px; font-family:var(--font-head); font-weight:700; font-size:14px; color:var(--text-strong); }
.pj-nav a .lucide { width:17px; height:17px; color:var(--accent); }
.pj-more-cat { font-family:var(--font-head); font-weight:800; font-size:15px; letter-spacing:.02em; color:var(--text-strong); margin:0 0 16px; padding-bottom:10px; border-bottom:2px solid var(--accent); display:inline-block; }
/* Process strip (During the build) */
.pj-process-head { margin:46px 0 20px; }
.pj-process-head .eyebrow { font-family:var(--font-head); font-weight:700; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-accent,#9A6E1E); }
.pj-process-head h3 { font-size:clamp(20px,2.4vw,26px); font-weight:800; letter-spacing:-.01em; margin-top:6px; }
.pj-process { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:18px; }
/* Specialty pill in the project hero (e.g. "Rental turnaround") */
.pj-specialty { display:inline-flex; align-items:center; margin-top:22px; padding:8px 16px; background:var(--sos-gold-bright); color:#0E0E0E; border-radius:999px; font-family:var(--font-head); font-weight:700; font-size:13px; letter-spacing:.02em; box-shadow:0 4px 14px rgba(0,0,0,.25); }
.pj-specialty[hidden] { display:none; } /* the display rule above would otherwise defeat the hidden attribute and render an empty gold pill */

/* Give the footer's bottom-right line clearance from the fixed chat pill
   (the only element the launcher genuinely overlapped on desktop). */
/* Instagram tiles: first-party photos (headless feed). The picture must fill
   the square tile; the .sym rule still styles the placeholder/more tiles. */
.ig-tile picture { display:block; position:absolute; inset:0; }
.ig-tile img.igph { width:100%; height:100%; object-fit:cover; display:block; }
/* SOS mark badge in the Instagram section header */
.ig-mark { flex:none; width:52px; height:52px; border-radius:50%; background:var(--sos-gold-bright); border:2.5px solid #131311; display:grid; place-items:center; }
.ig-mark img { width:60%; height:60%; }

/* Homepage tips & guides teaser cards (mirrors the blog card look) */
.gteasers { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.gcard { background:var(--surface-card); border:1px solid var(--border-subtle); border-radius:var(--radius-card); overflow:hidden; box-shadow:var(--shadow-sm); transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); display:flex; flex-direction:column; }
.gcard:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); }
.gcard .gph { height:168px; flex:none; overflow:hidden; background:#E9E4DA; }
.gcard .gph picture { display:block; width:100%; height:100%; }
.gcard .gph img { width:100%; height:100%; object-fit:cover; }
.gcard .gbody { padding:20px 22px 24px; display:flex; flex-direction:column; align-items:flex-start; flex:1; }
.gcard .gcat { font-family:var(--font-head); font-weight:700; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-accent); }
.gcard h3 { font-size:18px; font-weight:700; line-height:1.3; margin:8px 0; color:var(--text-strong); }
.gcard p { font-size:14px; line-height:1.55; color:var(--text-muted); }
.gcard .gread { margin-top:auto; padding-top:14px; font-family:var(--font-head); font-weight:700; font-size:13px; color:var(--text-accent); display:inline-flex; gap:6px; align-items:center; }
@media (max-width:900px){ .gteasers { grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .gteasers { grid-template-columns:1fr; } }

/* Service-area map: the home-base badge (SOS mark on gold). Distinct from the
   circleMarkers by design - see areamap.js. */
.map-hq { background:#CDA349; border:2.5px solid #131311; border-radius:50%; display:grid; place-items:center; box-shadow:0 2px 10px rgba(0,0,0,.4); }
.map-hq img { width:62%; height:62%; }

/* Keep the footer legal line clear of the chat pill (full pill renders at >=481px;
   below that the launcher is the small mobile bubble). */
@media (min-width: 481px) { .foot-bottom { padding-right: 236px; } }

/* Pre-JS nav fallback: lives inside the header mount so crawlers and no-JS
   visitors always have working navigation; site.js replaces it with the full
   header. Styled like the real bar so the pre-JS flash is subtle. */
.pre-nav { display:flex; gap:20px; flex-wrap:wrap; align-items:center; background:#0E0E0E; padding:18px 24px; }
.pre-nav a { color:#fff; font-family:var(--font-head); font-weight:600; font-size:14px; text-decoration:none; }
.pre-note { background:#0E0E0E; color:#C7C5C0; padding:0 24px 14px; font-size:14px; margin:0; }

/* Skip-to-content link: off-screen until keyboard focus lands on it */
.skip-link { position:absolute; left:-9999px; top:0; z-index:500; background:var(--sos-gold-bright); color:#0E0E0E; padding:10px 18px; font-family:var(--font-head); font-weight:700; font-size:14px; border-radius:0 0 6px 0; }
.skip-link:focus { left:0; }
/* Whole-home room chapters */
.pj-chapter { margin-top:20px; padding-top:34px; border-top:1px solid var(--border-subtle); }
.pj-chapter:first-of-type { border-top:0; padding-top:6px; }
.pj-chapter-head { display:flex; align-items:flex-start; gap:16px; margin-bottom:20px; }
.pj-chapter-n { flex:none; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:17px; background:var(--surface-wash); border:2px solid var(--accent); color:var(--text-accent); }
.pj-chapter-head h4 { font-size:clamp(18px,2.2vw,23px); font-weight:800; letter-spacing:-.01em; }
.pj-chapter-head p { margin-top:5px; font-size:14px; line-height:1.55; color:var(--text-muted); max-width:70ch; }
/* Chapter galleries use auto-fill so a single tile (e.g. one video) never balloons to full width. */
.pj-chapter .pj-process { grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); justify-content:start; }
/* A lone top-level video (e.g. a full walkthrough) would stretch across the auto-fit grid;
   keep it card-sized and show a vertical clip at its true 9:16 shape instead of cropping it. */
.pj-process > .pj-step:only-child { max-width:380px; }
.pj-process > .pj-step:only-child .pj-stepimg.is-portrait { aspect-ratio:9/16; }
/* Landscape clips (videos flagged landscape:true) get a wide 16:9 tile across two columns instead of being cropped into the 3:4 box. */
.pj-step--wide { grid-column:span 2; }
.pj-step--wide .pj-stepimg { aspect-ratio:16/9; }
.pj-soon { display:flex; align-items:center; justify-content:center; gap:11px; padding:44px 20px; border:1.5px dashed var(--border-strong); border-radius:var(--radius-card); background:var(--surface-wash); font-family:var(--font-head); font-weight:600; font-size:14px; color:var(--text-muted); }
.pj-soon .lucide { width:19px; height:19px; color:var(--accent); }
.pj-step { margin:0; }
.pj-stepimg { cursor:zoom-in; }
.pj-stepimg:focus-visible { outline:3px solid var(--sos-gold-bright); outline-offset:3px; }
.pj-stepimg { position:relative; aspect-ratio:3/4; border-radius:var(--radius-card); overflow:hidden; background:#E9E4DA url('assets/logos/SOS_symbol_faint.svg') center no-repeat; background-size:36px auto; box-shadow:var(--shadow-sm); }
.pj-stepimg img { width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease-out); }
.pj-step:hover .pj-stepimg img { transform:scale(1.05); }
.pj-stepn { position:absolute; top:10px; left:10px; z-index:2; font-family:var(--font-display); font-weight:700; font-size:13px; color:#0E0E0E; background:var(--sos-gold-bright); width:34px; height:34px; border-radius:999px; display:grid; place-items:center; box-shadow:0 3px 10px rgba(0,0,0,.28); }
.pj-stepimg video { width:100%; height:100%; object-fit:cover; }
/* Handyman gallery: text badge variant of the step number (Before / After) */
.pj-stepn.hm-badge { width:auto; height:28px; padding:0 10px; font-size:11px; letter-spacing:.06em; text-transform:uppercase; }
.pj-stepimg:has(video) { cursor:auto; }
.pj-zoom { position:absolute; top:10px; right:10px; z-index:3; width:40px; height:40px; display:grid; place-items:center; background:rgba(14,14,14,.62); border:1px solid rgba(255,255,255,.4); border-radius:9px; color:#fff; cursor:pointer; opacity:0; transition:opacity var(--dur-fast), background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast); }
.pj-step:hover .pj-zoom, .pj-zoom:focus-visible { opacity:1; }
.pj-zoom:hover { background:var(--sos-gold-bright); border-color:var(--sos-gold-bright); color:#0E0E0E; outline:none; }
@media (hover: none) { .pj-zoom { opacity:1; } }
/* Phased timeline band (optional, e.g. multi-phase commercial projects) */
.pj-timeline { margin:46px 0 6px; padding:30px 28px; background:var(--surface-card); border:1px solid var(--sos-gray-200); border-radius:var(--radius-card); }
.pj-tl-head { margin-bottom:28px; }
.pj-tl-head .eyebrow { font-family:var(--font-head); font-weight:700; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-accent,#9A6E1E); }
.pj-tl-head h3 { font-size:clamp(19px,2.2vw,24px); font-weight:800; letter-spacing:-.01em; margin-top:6px; }
.pj-tl-track { position:relative; }
.pj-tl-line { position:absolute; top:12px; height:3px; background:var(--sos-gold-soft); border-radius:2px; }
.pj-tl-steps { position:relative; display:grid; gap:14px; }
.pj-tl-step { text-align:center; }
.pj-tl-dot { display:block; box-sizing:border-box; width:26px; height:26px; border-radius:50%; margin:0 auto 14px; background:var(--surface-card); border:3px solid var(--sos-gray-300); }
.pj-tl-step.is-current .pj-tl-dot, .pj-tl-step.is-done .pj-tl-dot { background:var(--sos-gold); border-color:var(--sos-gold); }
.pj-tl-label { font-family:var(--font-head); font-weight:700; color:var(--text-strong); font-size:15px; }
.pj-tl-desc { color:var(--text-muted); font-size:13px; margin:4px auto 0; line-height:1.45; max-width:26ch; }
.pj-tl-now { display:inline-block; margin-top:11px; background:var(--sos-gold); color:#0E0E0E; font-family:var(--font-head); font-weight:700; font-size:11px; letter-spacing:.03em; padding:3px 11px; border-radius:999px; }
@media (max-width:640px){
  .pj-timeline { padding:24px 20px; }
  .pj-tl-line { top:13px; bottom:13px; left:12px !important; right:auto !important; width:3px; height:auto; }
  .pj-tl-steps { grid-template-columns:1fr !important; gap:22px; }
  .pj-tl-step { text-align:left; display:grid; grid-template-columns:26px 1fr; column-gap:16px; align-items:start; }
  .pj-tl-dot { margin:0; }
  .pj-tl-desc { margin:4px 0 0; max-width:none; }
}
.pj-zoom .lucide { width:19px; height:19px; }
.pj-step figcaption { margin-top:11px; font-family:var(--font-head); font-weight:600; font-size:13px; color:var(--text-muted); line-height:1.45; }

/* =====================================================================
   MOBILE PASS (Aug 18, 2026) - findings from the 375px audit after launch.
   One consolidated block so phone tuning lives in one place.
   ===================================================================== */
/* Sticky-overlay stacking: header 100 < filter 40(local) < chat 150/151 < drawer 200 < modal/lightbox 300.
   Hide the chat bubble whenever a higher layer is open so it never floats over a modal. */
body.modal-open .sosbot-launch, body.nav-open .sosbot-launch, body.lb-lock .sosbot-launch { display:none !important; }
/* Body scroll lock while the drawer or quote modal is open (iOS scrolls the page behind fixed panels otherwise). */
/* Page scroll lock behind the drawer/modal. Applied by site.js on TOUCH devices only
   (desktop needs no lock and locking there causes a scrollbar/centering jump). */
body.scroll-lock { overflow:hidden; }
.modal, .drawer, .lb-overlay { overscroll-behavior:contain; }
.lb-overlay { touch-action:pinch-zoom; }
html.lb-lock, body.lb-lock { overflow:hidden; }
/* Native-looking select arrow on iOS once background/border are custom (#11). */
.field select { -webkit-appearance:none; appearance:none; padding-right:40px; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238E6A20' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>"); background-repeat:no-repeat; background-position:right 14px center; background-size:16px; }
/* Hover-only transforms must not stick on touch (#34). */
@media (hover:none) { .pj-step:hover .pj-stepimg img, .pj-step:hover img, .pj-step:hover video, a.ftile:hover img.bg, a.ftile:hover { transform:none; } }
/* Tap targets that were under 44px (#28). */
.pj-zoom { width:44px; height:44px; }
.qcard .callrow a { display:inline-block; padding:12px 4px; }

@media (max-width:760px){
  /* Sticky services filter: single scrolling row instead of 4-5 wrapped rows pinned under the header (#5). */
  .svc-filter { top:90px; padding:10px 20px; }
  .svc-filter .chips { flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:2px; }
  .svc-filter .chips::-webkit-scrollbar { display:none; }
  .svc-filter .chip { flex:none; }
  /* Signature tiles: heavier gradient so text stays readable over the photo; drop the tag row (#14). */
  .ftile .body { padding:26px 22px 24px; }
  .ftile .grad { background:linear-gradient(to top, rgba(12,12,12,.95) 15%, rgba(12,12,12,.72) 60%, rgba(12,12,12,.4) 100%); }
  .ftile .tags { display:none; }
}

@media (max-width:640px){
  /* Lightbox buttons: 44px, keep off the photo edges; media capped to the small viewport (#27). */
  .lb-btn { width:44px; height:44px; }
  .lb-img, .lb-vid { max-height:80svh; }
}

@media (max-width:620px){
  /* Gutters and section rhythm step down from desktop (#26). */
  .wrap { padding-left:20px; padding-right:20px; }
  footer.site .wrap { padding-left:20px; padding-right:20px; }
  .hero .bracket, .phero .bracket { left:20px; }
  section.block { padding:60px 0; }
  .cta .wrap, .showcase .wrap { padding:60px 20px; }
  .bar-in { height:68px; }
  .bar img.logo { height:54px; }
  .bar-right { gap:10px; }
  .bar-right .btn { white-space:nowrap; }
  .svc-filter { top:68px; }
  .leave { padding:28px 20px; }
  [id] { scroll-margin-top:76px; }
  /* Inner-page hero: less dead space above the first real content (#7). */
  .phero .wrap { padding:56px 20px 44px; }
  .phero h1 { font-size:clamp(31px,8.5vw,64px); }
  .phero .lead { font-size:16px; margin-top:14px; }
  .pj-metabar { margin:14px 0 20px; }
  /* Stats: 2x2 instead of a tall single column (#24). */
  .stats-row { grid-template-columns:1fr 1fr; gap:20px; }
  .stat .v { font-size:40px; }
  .btn-lg { padding:15px 20px; font-size:16px; }
  .modal { padding:28px 20px; }
  .modal .close { top:4px; right:4px; }
  /* Full-width CTAs where long labels wrapped into two-line pills (#18). */
  .cta .btn-lg, #commTeaser .btn { width:100%; justify-content:center; }
  /* Category headers wrap instead of squeezing the title (#15). */
  .cat-head { flex-wrap:wrap; gap:10px 14px; }
  .cat-head .ct { flex:1 1 200px; }
  .cat-head .cn { width:100%; padding-top:0; order:3; white-space:normal; }
  /* Chips and blog filter: bigger targets, single scrolling row (#28). */
  .chip { padding:11px 16px; font-size:14px; }
  /* Footer: comfortable link rows, 2-col grid, room above the chat bubble (#23). */
  footer.site li { margin-bottom:0; }
  footer.site li a { display:inline-block; padding:9px 0; }
  .foot-grid { grid-template-columns:1fr 1fr; }
  footer.site .wrap { padding-bottom:70px; }
  /* Body copy that read small (#32). */
  .svc p, .step p, .qcard li, .cat-head .cd { font-size:15px; }
  /* Placeholder blocks read as broken images on a phone - hide until real assets land (#20). */
  .story .photo.is-placeholder { display:none; }
  /* Pills: centered so wrapped text does not look ragged (#29). */
  .pj-specialty, .pj-metabar span { text-align:center; }
}

@media (max-width:560px){
  /* Project galleries: 2-up tiles instead of one giant portrait per row (#19). */
  .pj-process, .pj-chapter .pj-process { grid-template-columns:repeat(2,1fr); gap:12px; }
  /* a lone top-level video (e.g. a walkthrough) spans the 2-col phone grid instead of sitting in half of it */
  #pjMain > .pj-process > .pj-step:only-child { grid-column:1 / -1; justify-self:center; width:100%; }
  .pj-step figcaption { font-size:12px; }
}

@media (max-height:700px){
  /* Short phones (SE, 12/13 mini): tighter drawer rows so Call/Text/Quote stay reachable (#3). */
  .drawer a { font-size:20px; padding:10px 0; }
}

@media (max-width:400px){
  .bar-right { gap:8px; }
  .bar-right .btn { padding:10px 12px; font-size:13.5px; }
}
@media (max-width:340px){
  .bar-call { display:none; }
}

/* service areas: projects grouped by town (baked) */
.area-work { margin-top:34px; }
.area-work:first-child { margin-top:8px; }
.area-work h3 { font-family:var(--font-head); font-weight:800; font-size:20px; margin:0 0 14px; display:flex; align-items:baseline; gap:12px; }
.area-work .area-count { font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); }
.area-more { margin:14px 0 0; font-size:14px; }
.area-more a { color:var(--text-accent); font-weight:600; }