/* =====================================================================
   EXCELLENT EXCAVATION SERVICES, Prototype stylesheet (v2, design pass)
   NON-PRODUCTION preview. Production target = Squarespace.
   Built on brand/tokens.css. Design: PRD §4 + §8. a11y: WCAG AA.
   ===================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=Barlow:wght@400;500;600;700&display=swap");
@import url("../../brand/tokens.css");

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--color-bg);color:var(--color-text);
  font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-body);
  font-weight:var(--fw-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:clip}
img,svg,video{max-width:100%;height:auto;display:block}
h1,h2,h3,h4,p,ul,ol,figure,figcaption{margin:0}
ul{list-style:none;padding:0}
a{color:var(--color-link);text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit;cursor:pointer}
.ico{width:1.25em;height:1.25em;flex:0 0 auto}
:focus-visible{outline:var(--focus-ring) solid var(--color-focus);outline-offset:var(--focus-offset)}
.on-dark :focus-visible,.hero :focus-visible,.site-footer :focus-visible{outline-color:var(--color-focus-invert)}

/* ---------- headings ---------- */
h1,h2,h3,.display{font-family:var(--font-display);font-weight:800;line-height:var(--lh-snug);
  letter-spacing:var(--ls-heading);text-transform:uppercase;overflow-wrap:break-word}
h1{font-size:var(--fs-h1);line-height:var(--lh-display);letter-spacing:var(--ls-display)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3)}
.lead{font-size:var(--fs-lead);line-height:1.45;color:var(--color-text)}
.eyebrow{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--font-display);font-weight:700;
  text-transform:uppercase;letter-spacing:var(--ls-eyebrow);font-size:var(--fs-eyebrow);color:var(--color-link)}
.eyebrow::before{content:"";width:26px;height:3px;background:var(--color-accent);flex:0 0 auto}
.on-dark .eyebrow{color:var(--color-accent)}

/* ---------- layout ---------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--container-pad)}
.container--narrow{max-width:var(--container-narrow)}
.section{padding-block:var(--section-y);position:relative}
.section--warm{background:var(--color-bg-warm)}
.section--dark{background:var(--color-surface-dark);color:var(--color-text-invert)}
.section--dark h2,.section--dark h3{color:var(--color-text-invert)}
.rule{height:0;border:0;border-top:var(--border-heavy);margin:0}
.section-head{max-width:62ch;margin-bottom:var(--space-6)}
.section-head .eyebrow{margin-bottom:var(--space-3)}
.section-head p{margin-top:var(--space-3);color:var(--color-text-muted);font-size:1.05rem}
.section--dark .section-head p{color:#C9C4BC}
.center{text-align:center;margin-inline:auto}

/* topographic texture for light sections (subtle depth) */
.section--warm::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(circle at 12% 20%, rgba(20,20,20,.03) 0, transparent 40%),
    repeating-linear-gradient(115deg, rgba(20,20,20,.022) 0 1px, transparent 1px 46px)}
.section--warm>.container{position:relative}

/* ---------- skip link ---------- */
.skip-link{position:absolute;left:var(--space-3);top:-60px;z-index:200;background:var(--ee-charcoal);
  color:#fff;padding:.75rem 1rem;border:2px solid var(--color-accent);transition:top var(--t)}
.skip-link:focus{top:var(--space-3);text-decoration:none}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  min-height:var(--btn-h);padding:.85rem 1.6rem;border:2px solid transparent;border-radius:var(--radius);
  font-family:var(--font-display);font-weight:700;font-size:1.05rem;letter-spacing:var(--ls-label);
  text-transform:uppercase;text-decoration:none;transition:background var(--t),color var(--t),transform var(--t-fast),box-shadow var(--t),border-color var(--t);white-space:nowrap}
.btn:hover{text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--color-accent);color:var(--color-accent-ink);border-color:var(--color-accent)}
.btn--primary:hover{background:var(--color-accent-hover);border-color:var(--color-accent-hover);box-shadow:5px 5px 0 0 rgba(20,20,20,.25)}
.btn--dark{background:var(--ee-charcoal);color:#fff;border-color:var(--ee-charcoal)}
.btn--dark:hover{background:#000}
.btn--ghost{background:transparent;color:var(--color-text);border-color:var(--ee-charcoal)}
.btn--ghost:hover{background:var(--ee-charcoal);color:#fff}
.on-dark .btn--ghost,.hero .btn--ghost{color:#fff;border-color:#fff}
.on-dark .btn--ghost:hover,.hero .btn--ghost:hover{background:#fff;color:var(--ee-charcoal)}
.btn--lg{min-height:58px;font-size:1.15rem;padding:1rem 2rem}
.btn--block{display:flex;width:100%}

/* ---------- media shots (illustrations) ---------- */
.shot{position:relative;border:3px solid var(--ee-charcoal);background:var(--ee-charcoal);
  overflow:hidden;box-shadow:var(--shadow-hard);line-height:0}
.shot img{width:100%;height:100%;object-fit:cover}
.shot figcaption{position:absolute;left:0;bottom:0;background:var(--ee-charcoal);color:#fff;
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  font-size:.82rem;line-height:1;padding:.55rem .8rem;border-top:3px solid var(--color-accent)}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:100;background:var(--ee-charcoal);color:#fff;
  border-bottom:3px solid var(--color-accent)}
.site-header .bar{display:flex;align-items:center;gap:var(--space-4);min-height:74px}
.brand{display:inline-flex;align-items:center;gap:.65rem;text-decoration:none;color:#fff;margin-right:auto}
.brand:hover{text-decoration:none}
.brand svg{width:40px;height:40px;flex:0 0 auto}
.brand .wm{display:flex;flex-direction:column;line-height:1}
.brand .wm b{font-family:var(--font-display);font-weight:800;text-transform:uppercase;
  font-size:1.15rem;letter-spacing:.02em}
.brand .wm span{font-family:var(--font-display);font-weight:600;text-transform:uppercase;
  letter-spacing:.32em;font-size:.62rem;color:var(--color-accent);margin-top:2px}
.nav{display:none}
.nav ul{display:flex;align-items:center;gap:var(--space-4)}
.nav a{color:#fff;font-family:var(--font-display);font-weight:600;text-transform:uppercase;
  letter-spacing:var(--ls-label);font-size:.98rem;padding:.4rem 0;border-bottom:2px solid transparent}
.nav a:hover{text-decoration:none;border-bottom-color:var(--color-accent)}
.nav a[aria-current="page"]{border-bottom-color:var(--color-accent)}
.header-cta{display:none;align-items:center;gap:var(--space-3)}
.header-phone{display:inline-flex;align-items:center;gap:.4rem;color:#fff;font-family:var(--font-display);
  font-weight:700;font-size:1.05rem;letter-spacing:.02em;white-space:nowrap}
.header-phone:hover{text-decoration:none;color:var(--color-accent)}
.hamburger{display:inline-flex;align-items:center;justify-content:center;width:var(--tap-min);height:var(--tap-min);
  background:transparent;border:2px solid #fff;color:#fff;margin-left:auto}
.hamburger .ico{width:22px;height:22px}
.mobile-menu{display:none;background:var(--ee-charcoal-2);border-top:1px solid #333}
.mobile-menu.open{display:block}
.mobile-menu ul{padding:var(--space-2) var(--container-pad) var(--space-4)}
.mobile-menu a{display:block;color:#fff;font-family:var(--font-display);font-weight:600;text-transform:uppercase;
  letter-spacing:var(--ls-label);font-size:1.1rem;padding:.9rem 0;border-bottom:1px solid #333}
.mobile-menu a:hover{text-decoration:none;color:var(--color-accent)}

/* ---------- mobile sticky action bar ---------- */
.mobile-cta{position:fixed;left:0;right:0;bottom:0;z-index:90;display:grid;grid-template-columns:1fr 1fr;
  gap:2px;background:var(--ee-charcoal);border-top:3px solid var(--color-accent);
  padding:2px;padding-bottom:max(2px,env(safe-area-inset-bottom))}
.mobile-cta a{display:flex;align-items:center;justify-content:center;gap:.5rem;min-height:56px;
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:var(--ls-label);
  font-size:1rem;text-decoration:none}
.mobile-cta a:hover{text-decoration:none}
.mobile-cta .call{background:#fff;color:var(--ee-charcoal)}
.mobile-cta .est{background:var(--color-accent);color:var(--color-accent-ink)}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--ee-charcoal);color:#fff;overflow:hidden;isolation:isolate}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center right}
.hero-overlay{position:absolute;inset:0;z-index:1;
  background:linear-gradient(95deg,rgba(9,9,9,.96) 0%,rgba(9,9,9,.86) 34%,rgba(12,10,8,.55) 66%,rgba(12,10,8,.25) 100%)}
.hero-overlay::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,9,9,.4),transparent 30%,rgba(9,9,9,.35))}
.hero .container{position:relative;z-index:2}
.hero-inner{padding-block:clamp(3.5rem,3rem+8vw,8.5rem);max-width:53rem}
.hero h1{margin-top:var(--space-3);text-shadow:0 2px 24px rgba(0,0,0,.4)}
.hero .lead{margin-top:var(--space-4);max-width:44rem;color:#EDEAE4}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-6)}
.hero-actions .btn{flex:1 1 auto;min-width:220px}

/* ---------- split / two-path ---------- */
.split{display:grid;grid-template-columns:1fr;gap:var(--space-6);align-items:center}
.split .shot{aspect-ratio:4/3}
.ticks li{display:flex;gap:.6rem;align-items:flex-start;color:var(--color-text)}
.ticks .ico{width:18px;height:18px;color:var(--color-accent);margin-top:.25rem}

/* ---------- gallery ---------- */
.gallery{display:grid;grid-template-columns:1fr;gap:var(--space-3)}
.gallery .shot{aspect-ratio:4/3}
.gallery .shot img{transition:transform var(--t-slow)}
.gallery .shot:hover img{transform:scale(1.05)}
.gallery-note{margin-top:var(--space-4);font-size:var(--fs-small);color:var(--color-text-muted);
  display:flex;gap:.5rem;align-items:center}
.gallery-note .ico{width:18px;height:18px;color:var(--color-link)}
.on-dark .step,.section--dark .step{background:var(--ee-charcoal-2);border-color:#333;border-top-color:var(--color-accent)}
.section--dark .step p{color:#C9C4BC}

/* ---------- why-us / proof ---------- */
.proof{display:grid;grid-template-columns:1fr;gap:var(--space-4)}
.proof-item{display:flex;gap:var(--space-4);align-items:flex-start;padding:var(--space-4);
  background:var(--ee-charcoal-2);border:1px solid #2e2e2e;border-left:4px solid var(--color-accent)}
.proof-item .pi-ico{width:52px;height:52px;background:var(--color-accent);color:var(--ee-charcoal);
  display:grid;place-items:center;flex:0 0 auto}
.proof-item .pi-ico .ico{width:26px;height:26px}
.proof-item h3{font-size:1.15rem}
.proof-item p{color:#C9C4BC;font-size:.98rem;margin-top:.3rem}
.section--warm .proof-item{background:#fff;border-color:var(--color-border);border-left-color:var(--color-accent)}
.section--warm .proof-item p{color:var(--color-text-muted)}

/* ---------- service area ---------- */
.area{display:grid;grid-template-columns:1fr;gap:var(--space-5);align-items:center}
.area .shot{aspect-ratio:4/3}
.area .chips{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:var(--space-4)}
.area .chips span{display:inline-flex;align-items:center;gap:.4rem;background:#fff;border:1px solid var(--color-border);
  padding:.55rem 1rem;font-family:var(--font-display);font-weight:600;text-transform:uppercase;letter-spacing:.04em;font-size:.9rem}
.area .chips .ico{width:16px;height:16px;color:var(--color-accent)}

/* ---------- estimate form ---------- */
.estimate{background:var(--ee-charcoal);color:#fff}
.form-wrap{display:grid;grid-template-columns:1fr;gap:var(--space-6)}
.form-card{background:#fff;color:var(--color-text);padding:clamp(1.25rem,1rem+3vw,2.5rem);border-top:4px solid var(--color-accent)}
.form-row{display:grid;grid-template-columns:1fr;gap:var(--space-4)}
.field{display:flex;flex-direction:column;gap:.4rem}
.field label{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:.9rem}
.field .req{color:var(--color-link)}
.field .hint{font-size:.82rem;color:var(--color-text-muted);font-weight:400;text-transform:none;letter-spacing:0}
.field input,.field select,.field textarea{font:inherit;color:var(--color-text);background:#fff;
  border:2px solid #cfc8bd;border-radius:var(--radius);padding:.8rem .9rem;min-height:var(--btn-h);width:100%;transition:border-color var(--t),box-shadow var(--t)}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 3px rgba(242,106,33,.25)}
.field input:user-invalid,.field select:user-invalid,.field textarea:user-invalid{border-color:#B42318}
.field .file{border:2px dashed #cfc8bd;padding:.85rem;display:flex;gap:.6rem;align-items:center;color:var(--color-text-muted);cursor:pointer}
.field .file .ico{width:20px;height:20px;color:var(--color-accent)}
.field .file:hover{border-color:var(--color-accent)}
.field input[type=file]{border:0;padding:.4rem 0;min-height:0;font-size:.9rem}
.field-error{color:#B42318;font-size:.85rem;font-weight:600;min-height:1.1em}
.consent{display:flex;gap:.6rem;align-items:flex-start;font-size:.9rem;color:var(--color-text-muted);flex-direction:row;text-transform:none;letter-spacing:0;font-family:var(--font-body);font-weight:400}
.consent input{width:20px;height:20px;margin-top:.15rem;flex:0 0 auto;accent-color:var(--color-accent)}
.form-note{font-size:.8rem;color:var(--color-text-muted);display:flex;gap:.45rem;align-items:center;margin-top:.6rem}
.form-note .ico{width:16px;height:16px;color:var(--color-accent)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-success{display:none;background:#0f2e1a;border:2px solid #2e7d46;color:#eafff0;padding:var(--space-4);margin-bottom:var(--space-4)}
.form-success.show{display:block}
.form-aside h3{color:#fff}
.form-aside .lead{color:#EDEAE4;margin-top:var(--space-3)}
.form-aside .alt{margin-top:var(--space-5);display:grid;gap:var(--space-3)}
.form-aside .alt a{display:flex;align-items:center;gap:.7rem;color:#fff;font-family:var(--font-display);font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;border:2px solid #444;padding:.9rem 1rem;transition:border-color var(--t)}
.form-aside .alt a:hover{text-decoration:none;border-color:var(--color-accent)}
.form-aside .alt .ico{width:22px;height:22px;color:var(--color-accent)}

/* ---------- CTA band ---------- */
.cta-band{background:var(--color-accent);color:var(--ee-charcoal);text-align:center}
.cta-band .eyebrow{color:#141414}
.cta-band .eyebrow::before{background:#141414}
.cta-band h2{color:var(--ee-charcoal);margin-top:.4rem}
.cta-band p{max-width:52ch;margin:var(--space-3) auto 0;font-size:1.05rem}
.cta-band .actions{display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:center;margin-top:var(--space-5)}

/* ---------- footer ---------- */
.site-footer{background:#0d0d0d;color:#C9C4BC;border-top:3px solid var(--color-accent)}
.footer-grid{display:grid;grid-template-columns:1fr;gap:var(--space-6);padding-block:var(--space-7)}
.site-footer h4{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  font-size:.95rem;color:#fff;margin-bottom:var(--space-3)}
.site-footer a{color:#C9C4BC}
.site-footer a:hover{color:#fff}
.site-footer ul{display:grid;gap:.6rem}
.footer-brand p{margin-top:var(--space-3);max-width:34ch;font-size:.95rem}
.footer-contact a,.footer-contact li span{display:flex;gap:.6rem;align-items:center}
.footer-contact a{font-weight:600;color:#fff}
.footer-contact .ico{width:18px;height:18px;color:var(--color-accent)}
.footer-social{display:flex;gap:.7rem;margin-top:var(--space-3)}
.footer-social a{width:44px;height:44px;border:1px solid #333;display:inline-flex;align-items:center;justify-content:center;color:#fff}
.footer-social a:hover{border-color:var(--color-accent);color:var(--color-accent)}
.footer-social .ico{width:20px;height:20px}
.footer-bottom{border-top:1px solid #262626;padding-block:var(--space-4);display:flex;flex-wrap:wrap;gap:var(--space-3);
  justify-content:space-between;align-items:center;font-size:.85rem}
.footer-bottom .links{display:flex;flex-wrap:wrap;gap:var(--space-4)}
.footer-legal-note{font-size:.78rem;color:#8a857d;max-width:74ch;margin-top:var(--space-2);padding-bottom:var(--space-4)}

/* ---------- chat fab ---------- */
.chat-fab{position:fixed;right:16px;bottom:76px;z-index:95;display:inline-flex;align-items:center;gap:.5rem;
  min-height:48px;padding:.7rem 1rem;background:#141414;color:#fff;border:2px solid var(--color-accent);
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:.9rem;
  box-shadow:4px 4px 0 0 rgba(0,0,0,.3)}
.chat-fab .ico{width:20px;height:20px;color:var(--color-accent)}
.chat-fab:hover{background:#000}

/* prototype ribbon */
.proto-ribbon{background:#3a2a12;color:#ffd9b0;text-align:center;font-size:.82rem;padding:.5rem 1rem;
  border-bottom:1px solid #5a4526;font-weight:600;letter-spacing:.02em}
.proto-ribbon strong{color:#fff}

/* draft banner + legal doc body */
.draft-banner{background:#3a2a12;color:#ffe9d2;border:2px solid var(--color-accent);padding:var(--space-4);margin-bottom:var(--space-5)}
.draft-banner strong{color:#fff}
.doc-body{max-width:75ch}
.doc-body h1{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(1.9rem,1.4rem+2vw,2.6rem);margin-top:var(--space-6)}
.doc-body h2{font-size:1.6rem;margin-top:var(--space-6)}
.doc-body h3{font-size:1.25rem;margin-top:var(--space-5)}
.doc-body p,.doc-body li{color:var(--color-text);margin-top:var(--space-3);text-transform:none;font-family:var(--font-body)}
.doc-body ul{list-style:disc;padding-left:1.3rem}
.doc-body blockquote{margin:var(--space-4) 0;background:#fff5ec;border-left:4px solid var(--color-accent);padding:var(--space-3) var(--space-4);color:#5a4326}
.doc-body blockquote p{margin-top:.5rem}
.doc-body blockquote p:first-child{margin-top:0}
.doc-body blockquote strong{color:var(--ee-charcoal)}
.doc-body table{width:100%;border-collapse:collapse;margin-top:var(--space-4);font-size:.95rem;display:block;overflow-x:auto}
.doc-body th,.doc-body td{border:1px solid var(--color-border);padding:.6rem .7rem;text-align:left;vertical-align:top}
.doc-body th{background:var(--ee-charcoal);color:#fff;font-family:var(--font-display);text-transform:uppercase;letter-spacing:.04em;font-size:.85rem}
.doc-body tr:nth-child(even) td{background:var(--color-bg-warm)}
.doc-body hr{border:0;border-top:1px solid var(--color-border);margin:var(--space-5) 0}
.doc-body code{background:#f2ede5;padding:.1rem .35rem;font-size:.9em}
.doc-body a{color:var(--color-link);word-break:break-word}

/* page hero (interior) */
.page-hero{position:relative;background:var(--ee-charcoal);color:#fff;border-bottom:3px solid var(--color-accent);overflow:hidden}
.page-hero::before{content:"";position:absolute;inset:0;opacity:.16;
  background:repeating-linear-gradient(125deg,rgba(242,106,33,.5) 0 2px,transparent 2px 30px)}
.page-hero .inner{position:relative;padding-block:clamp(2.5rem,2rem+4vw,4.5rem)}
.page-hero .eyebrow{color:var(--color-accent)}
.page-hero h1{margin-top:var(--space-2)}
.page-hero p{margin-top:var(--space-3);max-width:60ch;color:#EDEAE4}
.breadcrumb{font-size:.85rem;color:#C9C4BC;margin-bottom:var(--space-3)}
.breadcrumb a{color:#C9C4BC}

/* helpers */
.stack-sm>*+*{margin-top:var(--space-3)}
.muted{color:var(--color-text-muted)}
.mt-4{margin-top:var(--space-4)}.mt-6{margin-top:var(--space-6)}

/* scroll reveal, hidden state gated behind html.js so no-JS / JS-failure shows everything */
html.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
html.js .reveal.rl{transform:translateX(-28px)}
html.js .reveal.rr{transform:translateX(28px)}
html.js .reveal.rs{transform:scale(.94)}
html.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){html.js .reveal{opacity:1!important;transform:none!important;transition:none}}

/* ---------- responsive ---------- */
@media (min-width:600px){
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .paths{grid-template-columns:repeat(2,1fr)}
  .form-row.two{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1.4fr 1fr 1fr}
}
@media (min-width:900px){
  .nav{display:block}
  .header-cta{display:flex}
  .hamburger{display:none}
  .mobile-cta{display:none}
  body{padding-bottom:0 !important}
  .svc-grid{grid-template-columns:repeat(5,1fr)}
  .svc-card h3{font-size:1.25rem}
  .split{grid-template-columns:1fr 1fr}
  .split.reverse .media{order:2}
  .steps{grid-template-columns:repeat(4,1fr)}
  .proof{grid-template-columns:repeat(2,1fr)}
  .area{grid-template-columns:1.1fr .9fr}
  .form-wrap{grid-template-columns:1.4fr .9fr}
  .gallery{grid-template-columns:repeat(4,1fr)}
  .footer-grid{grid-template-columns:1.6fr 1fr 1fr 1.2fr}
}
@media (max-width:899px){ body{padding-bottom:64px} }
@media (max-width:430px){
  h1{font-size:2.05rem;letter-spacing:-.01em}
  .hero h1{font-size:2.15rem}
  .trust li{flex-basis:50%;justify-content:flex-start}
}

/* ===================== MOTION v2 ===================== */
/* scroll progress bar */
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--ee-orange-deep),var(--ee-orange),var(--ee-orange-hover));z-index:200;transition:width .08s linear;pointer-events:none}

/* header shrink on scroll */
.site-header{transition:box-shadow var(--t),background var(--t)}
.site-header .bar{transition:min-height var(--t)}
.site-header.scrolled{box-shadow:0 8px 28px rgba(0,0,0,.34)}
.site-header.scrolled .bar{min-height:60px}

/* hero parallax layer */
.hero-media{will-change:transform;transform:scale(1.06)}

/* animated nav underline */
.nav a{position:relative;border-bottom:0}
.nav a:hover{border-bottom:0}
.nav a::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;background:var(--color-accent);transition:width var(--t)}
.nav a:hover::after,.nav a[aria-current="page"]::after{width:100%}

/* button shine sweep */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::after{content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;z-index:-1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.30),transparent);transform:skewX(-18deg);transition:left .6s ease}
.btn--primary::after{background:linear-gradient(100deg,transparent,rgba(20,20,20,.18),transparent)}
.btn:hover::after{left:150%}
@media (prefers-reduced-motion:reduce){.btn::after{display:none}}

/* proof + chip micro-hover */
.proof-item{transition:transform var(--t-fast),border-color var(--t)}
.proof-item:hover{transform:translateX(3px)}
.area .chips span{transition:transform var(--t-fast),border-color var(--t),color var(--t)}
.area .chips span:hover{transform:translateY(-2px);border-color:var(--color-accent)}
.section--dark .step:hover{box-shadow:6px 6px 0 0 rgba(0,0,0,.4)}
@media (prefers-reduced-motion:reduce){.marquee__track{animation:none}}

/* chat fab subtle pulse ring */
.chat-fab::before{content:"";position:absolute;inset:-2px;border:2px solid var(--color-accent);opacity:0;pointer-events:none}
@media (prefers-reduced-motion:no-preference){.chat-fab::before{animation:eePulse 2.8s ease-out infinite}}
@keyframes eePulse{0%{opacity:.5;transform:scale(1)}70%{opacity:0;transform:scale(1.18)}100%{opacity:0}}
.chat-fab{position:fixed}

/* ===================== MODERN v3 ===================== */

/* --- modernized estimate form (no more sunken Win98 fields) --- */
.form-card{border:1px solid rgba(0,0,0,.06);border-top:4px solid var(--color-accent);border-radius:10px;
  box-shadow:0 30px 60px -28px rgba(0,0,0,.65),0 8px 20px -12px rgba(0,0,0,.4)}
.field label{font-size:.82rem;color:#2a2a2a;letter-spacing:.05em}
.field input:not([type=checkbox]):not([type=file]),.field select,.field textarea{
  background:#fbf9f6;border:1.5px solid #e4ddd0;border-radius:8px;padding:.85rem 1rem;box-shadow:none;
  transition:border-color var(--t),box-shadow var(--t),background var(--t)}
.field input::placeholder,.field textarea::placeholder{color:#a89e8d}
.field input:hover,.field select:hover,.field textarea:hover{border-color:#cfc5b3}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;background:#fff;
  border-color:var(--color-accent);box-shadow:0 0 0 4px rgba(242,106,33,.15)}
.field input:user-invalid,.field select:user-invalid,.field textarea:user-invalid{border-color:#d0402c;background:#fff6f4}
.field .file{border:1.5px dashed #d8cfbe;border-radius:8px;background:#fbf9f6;transition:border-color var(--t),background var(--t)}
.field .file:hover{border-color:var(--color-accent);background:#fff}
.field .consent{font-weight:400;text-transform:none;letter-spacing:0;font-family:var(--font-body);align-items:flex-start;font-size:.9rem}
.field input[type=checkbox]{width:20px;height:20px;min-height:0;padding:0;margin-top:.15rem;flex:0 0 auto;
  border:1.5px solid #cfc5b3;border-radius:5px;background:#fff;accent-color:var(--color-accent)}
.field input[type=file]{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.field .file .file-text{font-weight:600}
.field .file.has-files{border-color:var(--color-accent);color:var(--color-text);background:#fff}
.form-card .btn--primary{border-radius:8px}

/* --- hero: two-tone headline, stat cards, scroll cue --- */
.hero h1 .accent{color:var(--color-accent);display:block}
.hero-stats{display:grid;grid-template-columns:repeat(3,minmax(0,auto));gap:.7rem;margin-top:var(--space-6);justify-content:start}
.stat-card{background:rgba(10,10,10,.5);border:1px solid rgba(255,255,255,.16);border-left:3px solid var(--color-accent);
  padding:.7rem 1.1rem;min-width:104px}
.stat-card .n{font-family:var(--font-display);font-weight:800;font-size:1.9rem;line-height:1;color:var(--color-accent)}
.stat-card .l{display:block;margin-top:.25rem;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:#d7d2ca;font-weight:600}
.scroll-cue{display:flex;flex-direction:column;align-items:center;gap:.5rem;margin-top:var(--space-6);
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.2em;font-size:.72rem;color:#c9c4bc}
.scroll-cue .bar{width:2px;height:38px;background:linear-gradient(var(--color-accent),transparent);position:relative;overflow:hidden}
.scroll-cue .bar::after{content:"";position:absolute;left:0;top:0;width:100%;height:12px;background:var(--color-accent)}
@media (prefers-reduced-motion:no-preference){.scroll-cue .bar::after{animation:eeScroll 1.8s ease-in-out infinite}}
@keyframes eeScroll{0%{transform:translateY(-14px)}100%{transform:translateY(40px)}}
@media (max-width:520px){.stat-card{padding:.6rem .7rem;min-width:0}.stat-card .n{font-size:1.5rem}.stat-card .l{font-size:.62rem}}

/* --- before / after interactive slider --- */
.ba{position:relative;width:100%;max-width:1000px;margin-inline:auto;aspect-ratio:16/9;
  border:3px solid var(--ee-charcoal);box-shadow:var(--shadow-hard);overflow:hidden;
  touch-action:none;user-select:none;-webkit-user-select:none;cursor:ew-resize;--pos:50%}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;display:block}
.ba .ba-before{clip-path:polygon(0 0,var(--pos) 0,var(--pos) 100%,0 100%)}
.ba .ba-tag{position:absolute;top:10px;padding:.35rem .6rem;font-family:var(--font-display);font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;color:#fff;background:rgba(12,12,12,.72);z-index:3}
.ba .ba-tag.before{left:10px}
.ba .ba-tag.after{right:10px;background:var(--ee-orange-deep)}
.ba-divider{position:absolute;top:0;bottom:0;left:var(--pos);width:3px;background:var(--color-accent);transform:translateX(-50%);z-index:4;pointer-events:none}
.ba-handle{position:absolute;top:50%;left:var(--pos);transform:translate(-50%,-50%);z-index:5;
  width:48px;height:48px;border-radius:50%;background:var(--color-accent);border:3px solid #fff;color:var(--ee-charcoal);
  display:grid;place-items:center;cursor:ew-resize;box-shadow:0 4px 14px rgba(0,0,0,.4)}
.ba-handle:focus-visible{outline:3px solid #fff;outline-offset:3px}
.ba-handle svg{width:26px;height:26px}
.ba-hint{text-align:center;margin-top:var(--space-3);font-size:var(--fs-small);color:var(--color-text-muted);display:flex;gap:.5rem;align-items:center;justify-content:center}
.ba-hint .ico{width:16px;height:16px;color:var(--color-link)}

/* --- FAQ accordion --- */
.faq{display:grid;gap:var(--space-3);max-width:900px;margin-inline:auto}
.faq details{border:1px solid var(--color-border);border-left:4px solid var(--color-accent);background:#fff}
.faq summary{list-style:none;cursor:pointer;padding:1.1rem 1.3rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.02em;font-size:1.08rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary .chev{width:22px;height:22px;flex:0 0 auto;color:var(--color-accent);transition:transform var(--t)}
.faq details[open] summary .chev{transform:rotate(45deg)}
.faq summary:hover{color:var(--color-link)}
.faq .faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}
.faq details[open] .faq-a{grid-template-rows:1fr}
.faq .faq-a>div{overflow:hidden}
.faq .faq-a p{padding:0 1.3rem 1.2rem;color:var(--color-text-muted)}
@media (prefers-reduced-motion:reduce){.faq .faq-a{transition:none}}

/* =====================================================================
   SCROLL-SCRUBBED VIDEO HERO
   ===================================================================== */
.hero--video{min-height:100svh;display:flex;align-items:center}
.hero--video .hero-media{position:absolute;inset:0;z-index:0;overflow:hidden;
  /* styles.css sets a global scale(1.06)+will-change for the SVG hero. The video
     fills its box via object-fit:cover, so the scale is pointless and will-change
     on a full-screen video layer just burns GPU memory. */
  transform:none;will-change:auto}
.hero--video .hero-video{width:100%;height:100%;object-fit:cover;object-position:center}
/* source clip is only 864x496, so it upscales on large displays. Slight
   saturation/contrast lift keeps it from going flat and washed out. */
.hero--video .hero-video{filter:saturate(1.06) contrast(1.04)}
.hero--video .hero-overlay{background:linear-gradient(90deg,rgba(9,9,9,.86),rgba(9,9,9,.46) 55%,rgba(9,9,9,.12))}
.hero--video .hero-overlay::after{background:linear-gradient(180deg,rgba(9,9,9,.55),transparent 32%,rgba(9,9,9,.5))}

/* standing disclosure that this footage is interim + AI-generated */
.hero-media-note{position:absolute;z-index:3;left:0;top:0;margin:0;
  background:var(--ee-charcoal);color:#FFD9BF;border-top:2px solid var(--color-accent);
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;font-size:.7rem;line-height:1;padding:.5rem .8rem}

/* =====================================================================
   SCROLL-DRIVEN 3D HERO  (three.js + GSAP ScrollTrigger), ALTERNATIVE,
   not currently wired into index.html; kept for the no-media option.
   Progressive enhancement: the SVG hero renders first and is only
   swapped out once hero3d.js confirms WebGL + adds .is-3d.
   ===================================================================== */
.hero--3d{min-height:100svh;display:flex;align-items:center}
.hero3d-canvas{position:absolute;inset:0;z-index:0;width:100%;height:100%;display:block}
.hero--3d.is-3d .hero-media{display:none}
/* the 3D scene supplies its own depth, so soften the SVG-era scrim */
.hero--3d.is-3d .hero-overlay{background:linear-gradient(90deg,rgba(9,9,9,.72),rgba(9,9,9,.30) 52%,rgba(9,9,9,0))}
.hero--3d.is-3d .hero-overlay::after{background:linear-gradient(180deg,rgba(9,9,9,.5),transparent 34%,rgba(9,9,9,.42))}

/* floating service labels, revealed during the material-dump beat */
.hero3d-labels{position:absolute;z-index:2;right:clamp(1.5rem,5vw,6rem);top:50%;
  transform:translateY(-50%);display:flex;flex-direction:column;align-items:flex-end;
  gap:.85rem;pointer-events:none}
.hero3d-label{font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;font-size:clamp(.82rem,.72rem+.4vw,1.05rem);color:#fff;
  background:rgba(20,20,20,.72);border-left:3px solid var(--color-accent);
  padding:.5rem .95rem;backdrop-filter:blur(6px);white-space:nowrap}
.hero--3d:not(.is-3d) .hero3d-labels{display:none}
@media (max-width:900px){.hero3d-labels{display:none}}

/* =====================================================================
   NUMBERED SECTION SYSTEM (01–05), editorial index down the homepage
   ===================================================================== */
.section>.container[data-index]{position:relative}
.section>.container[data-index]::before{content:attr(data-index);position:absolute;
  top:-.35em;left:calc(var(--space-4) * -1);font-family:var(--font-display);font-weight:800;
  font-size:clamp(3.5rem,2rem+7vw,7.5rem);line-height:1;letter-spacing:-.02em;
  color:var(--color-accent);opacity:.13;pointer-events:none;z-index:0}
.section--dark>.container[data-index]::before{color:#fff;opacity:.09}
.container[data-index]>*{position:relative;z-index:1}
@media (max-width:1180px){
  .section>.container[data-index]::before{left:0;top:-.5em;opacity:.09}
}

/* =====================================================================
   DARK CINEMATIC REDESIGN (2026-08-26)
   Full retheme to a dark, photography-driven look. Same brand palette
   (orange / charcoal / warm white), same content + section order, same
   Barlow Condensed / hard-edge language. Real graded photos replace the
   illustrations. Implemented as an override layer so it is reversible.
   ===================================================================== */

/* ---- 1. retheme the semantic tokens: light world -> dark world ---- */
:root{
  --ee-offwhite:#161311;                 /* "warm" sections become elevated charcoal */
  --color-bg:            #0E0D0C;          /* page base: near-black warm charcoal */
  --color-bg-warm:       #16130F;          /* raised panel */
  --color-text:          #F2ECE3;          /* warm cream body on dark */
  --color-text-muted:    #A79E92;          /* warm grey secondary (AA on base) */
  --color-border:        #2A2521;          /* subtle warm hairline on dark */
  --color-rule:          #3A332C;
  --color-link:          var(--ee-orange); /* deep-orange link was tuned for light; use bright on dark */
  --color-focus:         var(--ee-white);
}
body{background:var(--color-bg);color:var(--color-text)}

/* section bands: alternate base and raised, hairline-separated */
.section{border-top:1px solid var(--color-border)}
.section--warm{background:var(--color-bg-warm)}
.section--dark{background:#0A0908}
/* the light-mode topographic texture -> faint warm lines on dark */
.section--warm::before{opacity:.5;
  background-image:radial-gradient(circle at 12% 18%, rgba(242,106,33,.05) 0, transparent 42%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.018) 0 1px, transparent 1px 54px)}
.section-head p{color:var(--color-text-muted)}
.section--dark .section-head p{color:var(--color-text-muted)}

/* ---- 3. big shots (narrative / about / area) -> framed cinematic ---- */
.shot{border:0;box-shadow:0 24px 60px -30px rgba(0,0,0,.95);position:relative}
.shot::after{content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
  background:linear-gradient(180deg,rgba(14,13,12,.10),transparent 30%,rgba(14,13,12,.30))}
.shot figcaption{background:rgba(12,11,10,.86);border-top:2px solid var(--color-accent);backdrop-filter:blur(4px)}

/* ---- 4. gallery -> tight dark grid, orange corner + always-on caption ---- */
.gallery .shot{aspect-ratio:4/3;overflow:hidden}
.gallery .shot::before{content:"";position:absolute;top:0;right:0;z-index:2;
  border-width:0 26px 26px 0;border-style:solid;border-color:transparent var(--color-accent) transparent transparent;
  opacity:0;transition:opacity var(--t)}
.gallery .shot:hover::before{opacity:1}
.gallery .shot:hover img{transform:scale(1.06)}
.step p,.section--dark .step p{color:var(--color-text-muted)}
.proof-item,.section--warm .proof-item{background:#121917;border:1px solid var(--color-border);
  border-left:3px solid var(--color-accent)}
.proof-item h3{color:#fff}
.proof-item p,.section--warm .proof-item p{color:var(--color-text-muted)}

/* two-path residential/commercial cards */
.path,.paths>*{background:#141210 !important;border:1px solid var(--color-border) !important;
  border-left:3px solid var(--color-accent) !important}

/* area chips */
.area .chips span{background:#141210;border:1px solid var(--color-border);color:var(--color-text)}

/* ---- 6. FAQ accordion on dark ---- */
.faq details,.faq summary{background:#141210;border-color:var(--color-border) !important}
.faq summary{color:#fff}
.faq p{color:var(--color-text-muted)}

/* ---- 7. keep the orange CTA band punchy; it stays as the one bright block ---- */
.cta-band{background:var(--color-accent);color:var(--ee-charcoal)}

/* ---- 8. section numeral watermark: brighter on the darker ground ---- */
.section>.container[data-index]::before{color:var(--color-accent);opacity:.10}

/* ---- 9. reveal from slightly further for a weightier feel ---- */
html.js .reveal{transform:translateY(30px)}

/* prototype-only: cap hero height in ?flat=1 screenshot mode so a tall
   capture window does not inflate the 100svh hero. Strip at handover. */
.flat-shot .hero--video{min-height:0;height:660px}

/* ---- 10. estimate form: darken the card to match the cinematic theme ----
   (the retheme made the old white card's cream heading unreadable) */
.form-card{background:#141210;border:1px solid var(--color-border);border-top:4px solid var(--color-accent);
  color:var(--color-text)}
.form-card h2{color:#fff}
.field label{color:#E7E0D6}
.field input:not([type=checkbox]):not([type=file]),.field select,.field textarea{
  background:#0E0D0C;color:var(--color-text);border:1px solid #34302B}
.field input::placeholder,.field textarea::placeholder{color:#7C7468}
.field input:hover,.field select:hover,.field textarea:hover{border-color:#4A443C}
.field input:focus,.field select:focus,.field textarea:focus{background:#0E0D0C;border-color:var(--color-accent)}
.field .file{border:1.5px dashed #3A342D;background:#100F0D;color:var(--color-text-muted)}
.field .file:hover{border-color:var(--color-accent);background:#141210}
.field .file.has-files{background:#141210;color:var(--color-text)}
.field input[type=checkbox]{background:#0E0D0C}
.form-note,.est-aside .muted,.est-aside p{color:var(--color-text-muted)}

/* ============================================================================
   REDESIGN SYSTEM, "FIELD SURVEY" INDUSTRIAL EDITORIAL (2026-08-26)
   Everything below the locked hero. Namespaced .rs / .r* so it is fully
   decoupled from the legacy component CSS (inner pages still use that,
   pending their own pass). Dark base + orange accent, from brand tokens.
   ============================================================================ */

:root{
  --r-bg:        #0E0D0C;
  --r-panel:     #151210;
  --r-panel-2:   #1C1815;
  --r-line:      #2A2521;
  --r-line-2:    #3A332C;
  --r-text:      #F2ECE3;
  --r-muted:     #A79E92;
  --r-accent:    #F26A21;
  --r-accent-2:  #FF8340;
  --r-ink:       #0E0D0C;
  --r-cream:     #FAF4E8;
  --r-gutter:    clamp(1.25rem, 1rem + 3vw, 4rem);
  --r-maxw:      1320px;
  --r-sy:        clamp(4.5rem, 3rem + 7vw, 9rem);
}

/* ---- shell ---- */
.rs{position:relative;background:var(--r-bg);color:var(--r-text);padding-block:var(--r-sy);
  border-top:1px solid var(--r-line)}
.rwrap{width:100%;max-width:var(--r-maxw);margin-inline:auto;padding-inline:var(--r-gutter)}
.rwrap--wide{max-width:1600px}

/* ---- survey label ---- */
.rlabel{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--font-display);
  font-weight:700;text-transform:uppercase;letter-spacing:.22em;font-size:.72rem;color:var(--r-accent)}
.rlabel::before{content:"";width:22px;height:2px;background:var(--r-accent)}
.rlabel--dark{color:var(--r-ink)}
.rlabel--dark::before{background:var(--r-ink)}

/* ---- display type ---- */
.display-xl{font-family:var(--font-display);font-weight:800;text-transform:uppercase;
  line-height:.94;letter-spacing:-.015em;font-size:clamp(2.6rem,1.2rem + 6.4vw,6.5rem);color:#fff}
.display-lg{font-family:var(--font-display);font-weight:800;text-transform:uppercase;
  line-height:.96;letter-spacing:-.01em;font-size:clamp(2.1rem,1.2rem + 4vw,4rem);color:#fff}
.display-xl em{font-style:normal;color:var(--r-accent);display:block}
.rlead{font-size:clamp(1.1rem,1rem + .5vw,1.4rem);line-height:1.45;color:var(--r-text);margin:0}
.rmuted{color:var(--r-muted);line-height:1.65;margin:.9rem 0 0}

.statement__head,.faqwrap__head,.ba-head{max-width:24ch}
.statement__head .display-xl,.statement__head .display-lg{margin-top:1rem}
.ba-head{max-width:56ch;margin-inline:auto;text-align:center}
.ba-head .rlabel{justify-content:center}
.ba-head .rmuted{margin-inline:auto;max-width:48ch}

/* ---- buttons ---- */
.rbtn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:54px;
  padding:.9rem 1.7rem;font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;font-size:1.02rem;border:2px solid transparent;cursor:pointer;
  transition:background var(--t),color var(--t),border-color var(--t),transform var(--t-fast),box-shadow var(--t)}
.rbtn:hover{text-decoration:none}
.rbtn:active{transform:translateY(1px)}
.rbtn--primary{background:var(--r-accent);color:var(--r-ink);border-color:var(--r-accent)}
.rbtn--primary:hover{background:var(--r-accent-2);border-color:var(--r-accent-2);box-shadow:6px 6px 0 0 rgba(0,0,0,.35)}
.rbtn--ghost{background:transparent;color:#fff;border-color:#4A443C}
.rbtn--ghost:hover{border-color:#fff}
.rbtn--ink{background:var(--r-ink);color:#fff;border-color:var(--r-ink)}
.rbtn--ink:hover{background:#000}
.rbtn--ink-ghost{background:transparent;color:var(--r-ink);border-color:var(--r-ink)}
.rbtn--ink-ghost:hover{background:var(--r-ink);color:#fff}
.rbtn--lg{min-height:62px;font-size:1.15rem;padding:1.05rem 2.1rem}
.rbtn--block{display:flex;width:100%}

.rmore{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.1rem;font-family:var(--font-display);
  font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:.95rem;color:var(--r-accent)}
.rmore svg{width:18px;height:18px;transition:transform var(--t)}
.rmore:hover{text-decoration:none}
.rmore:hover svg{transform:translateX(5px)}

/* ============ 1 CREDIBILITY RIBBON ============ */
.rs--cred{padding-block:clamp(2rem,1.4rem + 2vw,3.25rem);background:var(--r-panel)}
.cred{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem 2.5rem}
.cred__lead{font-size:clamp(1.05rem,.95rem + .5vw,1.4rem);line-height:1.4;max-width:34ch;margin:0}
.cred__lead span{color:#fff;font-weight:600}
.cred__list{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;font-family:var(--font-display);font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;font-size:.82rem;color:var(--r-muted)}
.cred__list li{display:flex;align-items:center;gap:1.4rem}
.cred__list li::before{content:"";width:6px;height:6px;background:var(--r-accent);transform:rotate(45deg);flex:0 0 auto}

/* ============ 2 STATEMENT ============ */
.statement__body{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.5rem,1rem + 3vw,4rem);
  margin-top:clamp(2rem,1.4rem + 3vw,4rem);align-items:end}
.statement__media{position:relative;margin:0;overflow:hidden;aspect-ratio:4/3;box-shadow:0 40px 80px -40px rgba(0,0,0,.9)}
.statement__media::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.statement__media img{width:100%;height:100%;object-fit:cover;display:block}
.statement__copy{align-self:end}
.phase{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;margin-top:2rem;
  font-family:var(--font-display);font-weight:800;text-transform:uppercase;letter-spacing:.02em;
  font-size:clamp(1.1rem,.9rem + 1vw,1.6rem);color:var(--r-muted)}
.phase li{display:flex;align-items:center;gap:.6rem 1rem}
.phase li:not(:last-child)::after{content:"";width:26px;height:2px;background:var(--r-line-2)}
.phase .is-end{color:var(--r-accent)}

/* ============ 3 SERVICES sticky index + panels ============ */
.svcx{display:grid;grid-template-columns:minmax(280px,.8fr) 1.2fr;gap:clamp(2rem,1rem + 4vw,5rem);align-items:start}
.svcx__rail{position:sticky;top:100px;align-self:start}
.svcx__rail .display-lg{margin:1rem 0 2rem}
.svcx__index{display:flex;flex-direction:column;border-top:1px solid var(--r-line);margin-bottom:2rem}
.svcx__index li{border-bottom:1px solid var(--r-line)}
.svcx__index a{display:flex;align-items:baseline;gap:1rem;padding:.85rem 0;color:var(--r-muted);
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  font-size:1.15rem;transition:color var(--t),padding var(--t)}
.svcx__index a span{font-size:.85rem;color:var(--r-line-2);font-variant-numeric:tabular-nums;transition:color var(--t)}
.svcx__index a:hover{color:#fff;text-decoration:none;padding-inline-start:.5rem}
.svcx__index li.is-active a{color:var(--r-accent)}
.svcx__index li.is-active a span{color:var(--r-accent)}
.svcx__panels{display:flex;flex-direction:column;gap:clamp(2rem,1rem + 4vw,5rem)}
.svcp{scroll-margin-top:100px}
.svcp__media{position:relative;overflow:hidden;aspect-ratio:16/10;background:var(--r-panel)}
.svcp__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.svcp:hover .svcp__media img{transform:scale(1.05)}
.svcp__media::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
  background:linear-gradient(180deg,transparent 55%,rgba(14,13,12,.5))}
.svcp__text{position:relative;padding-top:1.4rem}
.svcp__num{position:absolute;top:-2.6rem;right:.4rem;font-family:var(--font-display);font-weight:800;
  font-size:clamp(3rem,2rem + 4vw,5.5rem);line-height:1;color:#fff;opacity:.14;pointer-events:none}
.svcp__text h3{font-size:clamp(1.6rem,1.2rem + 1.6vw,2.4rem);color:#fff;text-transform:uppercase;letter-spacing:-.01em}
.svcp__text p{color:var(--r-muted);line-height:1.65;margin-top:.7rem;max-width:52ch}

/* ============ 4 AUDIENCES split ============ */
.rs--aud{padding-bottom:0}
.aud{display:grid;grid-template-columns:1fr 1fr;margin-top:clamp(2rem,1.4rem + 3vw,3.5rem);border-top:1px solid var(--r-line)}
.aud__col{position:relative;min-height:clamp(360px,44vh,560px);display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.aud__col:first-child{border-right:1px solid var(--r-line)}
.aud__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1.4s cubic-bezier(.16,1,.3,1)}
.aud__col::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(14,13,12,.35),rgba(14,13,12,.9))}
.aud__col:hover .aud__bg{transform:scale(1.06)}
.aud__inner{padding:clamp(1.6rem,1rem + 3vw,3rem)}
.aud__k{display:block;font-family:var(--font-display);font-weight:800;text-transform:uppercase;
  letter-spacing:-.01em;font-size:clamp(1.8rem,1.2rem + 2.4vw,3rem);color:#fff}
.aud__inner p{color:#E7E0D6;margin-top:.6rem;max-width:44ch}
.rticks{margin-top:1.2rem;display:flex;flex-direction:column;gap:.55rem}
.rticks li{position:relative;padding-left:1.7rem;color:var(--r-muted);font-size:.98rem;line-height:1.4}
.rticks li::before{content:"";position:absolute;left:0;top:.15em;width:14px;height:8px;
  border-left:2px solid var(--r-accent);border-bottom:2px solid var(--r-accent);transform:rotate(-45deg)}

/* ============ 5 BEFORE / AFTER ============ */
.rs--ba{background:var(--r-panel)}
.rs--ba .ba{max-width:1120px;aspect-ratio:16/9;margin-top:clamp(2rem,1.4rem + 3vw,3.5rem);
  border:1px solid var(--r-line-2);box-shadow:0 50px 90px -50px rgba(0,0,0,.95)}
.rs--ba .ba-hint{margin-top:1.1rem;text-align:center;color:var(--r-muted);font-size:.9rem}

/* ============ 6 GALLERY wall ============ */
.gwall{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:clamp(.6rem,.4rem + .6vw,1rem);
  margin-top:clamp(2rem,1.4rem + 3vw,3.5rem)}
.gwall figure{position:relative;margin:0;overflow:hidden;aspect-ratio:4/3;background:var(--r-panel)}
.gwall__feat{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.gwall img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.gwall figure:hover img{transform:scale(1.05)}
.gwall figcaption{position:absolute;left:0;bottom:0;background:rgba(12,11,10,.85);color:#fff;
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  font-size:.8rem;padding:.5rem .8rem;border-top:2px solid var(--r-accent);backdrop-filter:blur(4px)}
.rs--gallery .ba-hint{margin-top:1.1rem;color:var(--r-muted);font-size:.85rem}

/* ============ 7 SERVICE AREA ============ */
.area2{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,1rem + 4vw,4.5rem);align-items:center}
.area2__list{display:flex;flex-wrap:wrap;gap:.7rem;margin:1.6rem 0 2rem}
.area2__list li{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  font-size:.9rem;color:var(--r-text);border:1px solid var(--r-line-2);padding:.5rem .9rem}
.area2__map{margin:0;overflow:hidden;border:1px solid var(--r-line-2);box-shadow:0 40px 80px -40px rgba(0,0,0,.9)}
.area2__map img{width:100%;height:100%;object-fit:cover;display:block}

/* ============ 8 ENGAGE timeline ============ */
.timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.2rem,.6rem + 2vw,2.5rem);
  margin-top:clamp(2rem,1.4rem + 3vw,3.5rem)}
.timeline li{position:relative;padding-top:2.6rem;border-top:2px solid var(--r-line-2)}
.timeline li::before{content:"";position:absolute;top:-2px;left:0;width:38%;height:2px;background:var(--r-accent)}
.timeline__n{position:absolute;top:1rem;left:0;font-family:var(--font-display);font-weight:800;
  font-size:2.4rem;line-height:1;color:var(--r-accent)}
.timeline h3{font-size:1.12rem;color:#fff;text-transform:uppercase;letter-spacing:.01em}
.timeline p{color:var(--r-muted);margin-top:.5rem;font-size:.95rem;line-height:1.6}

/* ============ 9 FAQ ============ */
.faqwrap{display:grid;grid-template-columns:.7fr 1.3fr;gap:clamp(2rem,1rem + 4vw,4.5rem);align-items:start}
.rs--faq .faq{border-top:1px solid var(--r-line)}
.rs--faq details{border-bottom:1px solid var(--r-line);background:transparent}
.rs--faq summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;cursor:pointer;
  padding:1.25rem 0;font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  letter-spacing:.02em;font-size:1.05rem;color:#fff;list-style:none}
.rs--faq summary::-webkit-details-marker{display:none}
.rs--faq summary .chev{width:22px;height:22px;flex:0 0 auto;color:var(--r-accent);transition:transform var(--t)}
.rs--faq details[open] summary .chev{transform:rotate(45deg)}
.rs--faq .faq-a{overflow:hidden;display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--t)}
.rs--faq details[open] .faq-a{grid-template-rows:1fr;padding-bottom:1.25rem}
.rs--faq .faq-a>div{min-height:0}
.rs--faq .faq-a p{color:var(--r-muted);line-height:1.65;max-width:60ch}
.rs--faq .faq-a a{color:var(--r-accent)}

/* ============ 10 ESTIMATE ============ */
.rs--estimate{background:var(--r-panel)}
.estimate2{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,1rem + 4vw,5rem);align-items:start}
.estimate2__aside{position:sticky;top:100px}
.estimate2__aside .display-lg{margin:1rem 0 1.2rem}
.estimate2__alt{display:flex;flex-direction:column;gap:.9rem;margin-top:2rem}
.estimate2__alt a{display:flex;align-items:center;gap:1rem;padding:1.1rem 1.2rem;border:1px solid var(--r-line-2);
  color:#fff;transition:border-color var(--t),background var(--t)}
.estimate2__alt a:hover{border-color:var(--r-accent);background:var(--r-panel-2);text-decoration:none}
.estimate2__alt .ico{width:24px;height:24px;color:var(--r-accent);flex:0 0 auto}
.estimate2__alt span{display:flex;flex-direction:column}
.estimate2__alt b{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.03em;font-size:1.05rem}
.estimate2__alt small{color:var(--r-muted);font-size:.85rem}

.estimate2 .form-success{display:none;background:#0f2e1a;border:1px solid #2e7d46;color:#eafff0;padding:1.2rem;margin-bottom:1.4rem}
.estimate2 .form-success.show{display:block}
.estimate2 .form-success a{color:#bff5d0}
.estimate2 form{display:flex;flex-direction:column;gap:1.1rem}
.estimate2 .form-row.two{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.estimate2 .field{display:flex;flex-direction:column;gap:.4rem}
.estimate2 .field label{font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;font-size:.82rem;color:#E7E0D6}
.estimate2 .field .req{color:var(--r-accent)}
.estimate2 .field .hint{font-weight:400;text-transform:none;letter-spacing:0;color:var(--r-muted);font-size:.8rem}
.estimate2 input:not([type=checkbox]):not([type=file]),.estimate2 select,.estimate2 textarea{
  font:inherit;color:var(--r-text);background:var(--r-bg);border:1px solid var(--r-line-2);padding:.85rem .9rem;min-height:50px}
.estimate2 textarea{min-height:130px;resize:vertical}
.estimate2 input::placeholder,.estimate2 textarea::placeholder{color:#7C7468}
.estimate2 input:hover,.estimate2 select:hover,.estimate2 textarea:hover{border-color:#4A443C}
.estimate2 input:focus,.estimate2 select:focus,.estimate2 textarea:focus{outline:none;border-color:var(--r-accent);box-shadow:0 0 0 3px rgba(242,106,33,.25)}
.estimate2 input:user-invalid,.estimate2 select:user-invalid,.estimate2 textarea:user-invalid{border-color:#d0402c}
.estimate2 .field-error{color:#ff8a72;font-size:.85rem;font-weight:600;min-height:1.1em}
.estimate2 .file{border:1.5px dashed var(--r-line-2);background:var(--r-bg);padding:.85rem;display:flex;
  gap:.6rem;align-items:center;color:var(--r-muted);cursor:pointer;transition:border-color var(--t),background var(--t)}
.estimate2 .file .ico{width:20px;height:20px;color:var(--r-accent)}
.estimate2 .file:hover{border-color:var(--r-accent);background:var(--r-panel)}
.estimate2 .file.has-files{border-color:var(--r-accent);color:var(--r-text)}
.estimate2 .file .file-text{font-weight:600}
.estimate2 input[type=file]{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.estimate2 .consent{flex-direction:row;align-items:flex-start;gap:.6rem;font-size:.9rem;color:var(--r-muted);
  text-transform:none;letter-spacing:0;font-family:var(--font-body);font-weight:400}
.estimate2 .consent input{width:20px;height:20px;min-height:0;margin-top:.15rem;flex:0 0 auto;accent-color:var(--r-accent)}
.estimate2 .consent a{color:var(--r-accent)}
.estimate2 .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.estimate2 .form-note{display:flex;gap:.5rem;align-items:flex-start;color:var(--r-muted);font-size:.82rem;margin-top:.4rem}
.estimate2 .form-note .ico{width:16px;height:16px;flex:0 0 auto;color:var(--r-muted)}

/* ============ 11 CLOSING ============ */
.rs--closing{background:var(--r-accent);color:var(--r-ink);border-top:0;text-align:center}
.rs--closing .display-xl{color:var(--r-ink);margin-top:1rem}
.closing__actions{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;margin-top:2.4rem}
.fsh-referral{margin-top:1.6rem}
.fsh-referral a{color:var(--r-ink);text-decoration:underline}

/* ============ RESPONSIVE ============ */
@media (max-width:1024px){
  .svcx{grid-template-columns:1fr;gap:2.5rem}
  .svcx__rail{position:static}
  .svcx__index{max-width:520px}
  .faqwrap{grid-template-columns:1fr;gap:1.5rem}
  .estimate2{grid-template-columns:1fr;gap:2.5rem}
  .estimate2__aside{position:static}
}
@media (max-width:860px){
  .statement__body{grid-template-columns:1fr;align-items:start}
  .area2{grid-template-columns:1fr}
  .aud{grid-template-columns:1fr}
  .aud__col:first-child{border-right:0;border-bottom:1px solid var(--r-line)}
  .timeline{grid-template-columns:repeat(2,1fr);gap:2rem}
  .gwall{grid-template-columns:1fr 1fr}
  .gwall__feat{grid-column:span 2;grid-row:auto;aspect-ratio:16/10}
}
@media (max-width:560px){
  .cred{flex-direction:column;align-items:flex-start;gap:1.2rem}
  .estimate2 .form-row.two{grid-template-columns:1fr}
  .timeline{grid-template-columns:1fr;gap:1.6rem}
  .gwall{grid-template-columns:1fr}
  .gwall__feat{grid-column:auto}
  .closing__actions{flex-direction:column}
  .closing__actions .rbtn{width:100%}
  .svcp__num{font-size:3rem}
}

@media (prefers-reduced-motion:reduce){
  .svcp__media img,.aud__bg,.gwall img{transition:none}
  .svcp:hover .svcp__media img,.aud__col:hover .aud__bg,.gwall figure:hover img{transform:none}
}

/* ---- redesign fixes (2026-08-26) ---- */
/* display type must never break mid-word (base h2 sets overflow-wrap:break-word) */
.display-xl,.display-lg{overflow-wrap:normal;word-break:normal;hyphens:none}
/* ol-based components must not show default numeric markers (reset only cleared ul) */
.svcx__index,.phase,.timeline{list-style:none;margin:0;padding:0}
.svcx__index{margin-bottom:2rem}
.phase{margin-top:2rem}
.timeline{margin-top:clamp(2rem,1.4rem + 3vw,3.5rem)}
/* comfortable tap area for the standalone "View service" links on touch */
.rmore{padding-block:.5rem;min-height:40px}


/* ============================================================================
   DAY / NIGHT THEME (2026-08-26)
   Dark is the default (brand). data-theme="light" flips the content + inner
   pages to a warm light palette. The HERO, HEADER and FOOTER stay dark in
   both modes (they bracket the page like the dark video hero), so the hero
   lock is untouched. Toggle lives in the header (site.js); the choice is
   persisted and applied pre-paint by a small inline script in each <head>.
   ============================================================================ */

/* heading / label tokens so the hardcoded whites can flip. Default = dark mode. */
:root{ --r-heading:#ffffff; --r-label:#E7E0D6; }

/* redirect the flippable whites to the token (these rules come after the
   originals, so they win without editing them) */
.display-xl,.display-lg,
.cred__lead span,
.svcp__text h3,
.rs--faq summary,
.timeline h3,
.estimate2__alt a,
.estimate2__alt b{color:var(--r-heading)}
.svcx__index a:hover{color:var(--r-heading)}
.svcp__num{color:var(--r-heading)}
.estimate2 .field label{color:var(--r-label)}

/* -------------------- LIGHT THEME -------------------- */
:root[data-theme="light"]{
  /* redesign (.rs*) tokens */
  --r-bg:#F6F1E9;
  --r-panel:#FFFFFF;
  --r-panel-2:#EFE9DE;
  --r-line:#E4DCCF;
  --r-line-2:#CFC5B2;
  --r-text:#1F1B17;
  --r-muted:#5C574F;
  --r-heading:#141210;
  --r-label:#2A2620;
  /* --r-accent / --r-ink stay: orange accent + ink buttons read in both modes */

  /* legacy semantic tokens (inner pages + any shared content), undo the
     dark-cinematic retheme back to a light surface */
  --color-bg:#FFFFFF;
  --color-bg-warm:#FAF7F2;
  --color-text:#1A1A1A;
  --color-text-invert:#FFFFFF;
  --color-text-muted:#5A5A5A;
  --color-border:#E4DDD2;
  --color-rule:#141414;
  --color-link:#C2410C;
}

/* light-mode component nudges */
:root[data-theme="light"] .svcp__num{opacity:.10}
:root[data-theme="light"] .rs--ba .ba,
:root[data-theme="light"] .area2__map,
:root[data-theme="light"] .statement__media,
:root[data-theme="light"] .gwall__feat,
:root[data-theme="light"] .gwall figure{box-shadow:0 26px 55px -38px rgba(20,16,10,.4)}
:root[data-theme="light"] .statement__media::after,
:root[data-theme="light"] .svcp__media::after{box-shadow:inset 0 0 0 1px rgba(20,16,10,.10)}
/* focus rings: the .rs sections carry .on-dark (a dark-mode assumption); in light
   mode force a dark visible ring */
:root[data-theme="light"] .rs :focus-visible{outline-color:#141414}
/* contact page form-card was darkened for night mode, lift it for day mode */
:root[data-theme="light"] .form-card{background:#FFFFFF;border-color:var(--color-border)}
:root[data-theme="light"] .form-card h2{color:#141414}
:root[data-theme="light"] .field label{color:#2A2A2A}
:root[data-theme="light"] .field input:not([type=checkbox]):not([type=file]),
:root[data-theme="light"] .field select,
:root[data-theme="light"] .field textarea{background:#FFFFFF;color:#1A1A1A;border-color:#D8CFBE}
:root[data-theme="light"] .estimate2 input:not([type=checkbox]):not([type=file]),
:root[data-theme="light"] .estimate2 select,
:root[data-theme="light"] .estimate2 textarea{background:#FFFFFF;color:#1A1A1A;border-color:#D8CFBE}
:root[data-theme="light"] .estimate2 input::placeholder,
:root[data-theme="light"] .estimate2 textarea::placeholder{color:#9a917f}
:root[data-theme="light"] .estimate2__alt a{background:#FFFFFF}
:root[data-theme="light"] .estimate2__alt a:hover{background:#F6F1E9}

/* -------------------- THEME TOGGLE (in the dark header) -------------------- */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  background:transparent;border:2px solid rgba(255,255,255,.28);color:#fff;flex:0 0 auto;
  transition:border-color var(--t),background var(--t),color var(--t)}
.theme-toggle:hover{border-color:var(--color-accent);color:var(--color-accent)}
.theme-toggle .ico{width:20px;height:20px}
.theme-toggle .ico-sun{display:none}
.theme-toggle .ico-moon{display:block}
/* when in light mode, show the sun (tap to go back to night) */
:root[data-theme="light"] .theme-toggle .ico-sun{display:block}
:root[data-theme="light"] .theme-toggle .ico-moon{display:none}
/* mobile menu variant */
.mobile-menu .theme-toggle{width:auto;height:auto;border:0;gap:.6rem;padding:.6rem 0;justify-content:flex-start}
.mobile-menu .theme-toggle .label-night{display:none}
.mobile-menu .theme-toggle .label-day{display:inline}
:root[data-theme="light"] .mobile-menu .theme-toggle .label-night{display:inline}
:root[data-theme="light"] .mobile-menu .theme-toggle .label-day{display:none}

/* smooth cross-fade when toggling (respect reduced motion) */
@media (prefers-reduced-motion:no-preference){
  .rs,.rs *,body,.site-footer,.page-hero,.section{transition:background-color .35s ease,border-color .35s ease,color .35s ease}
}


/* ============================================================================
   DE-BOX PASS (2026-08-26), kill the card/container language.
   Removes image frames, borders, panel backgrounds and filled-rectangle
   buttons; introduces an interactive service index, line/arrow CTAs,
   unframed overlapping imagery, hover reveals and a mask text-reveal.
   Namespaced/scoped so the hero stays locked.
   ============================================================================ */

/* ---- section continuity: drop the uniform hairline between every .rs; let
   backgrounds do the separation, and remove the boxy panel fills ---- */
.rs{border-top:0}
.rs--cred{background:transparent;border-top:1px solid var(--r-line);border-bottom:1px solid var(--r-line)}
.rs--ba{background:transparent}
.rs--estimate{background:transparent}
.rs--faq{border-top:1px solid var(--r-line)}

/* ---- MASK TEXT REVEAL (headings wipe up through a clip) ---- */
/* mask reveal removed, it clipped tall multi-line display headings. Text
   movement now lives in the service index swap + CTA/underline animations. */
.reveal-mask{clip-path:none;transform:none}

/* ============ CTA SYSTEM, line + arrow, no filled rectangles ============ */
.rcta{display:inline-flex;align-items:center;gap:.7rem;position:relative;background:none;border:0;
  padding:.35rem 0;font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;font-size:1.02rem;color:var(--r-heading);cursor:pointer;
  transition:color var(--t),gap var(--t)}
.rcta::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:100%;
  background:var(--r-accent);transform:scaleX(0);transform-origin:left;
  transition:transform .45s cubic-bezier(.16,1,.3,1)}
.rcta:hover{text-decoration:none;gap:1.1rem;color:var(--r-heading)}
.rcta:hover::after,.rcta:focus-visible::after{transform:scaleX(1)}
.rcta svg{width:1.35em;height:1.35em;flex:0 0 auto;transition:transform .4s cubic-bezier(.16,1,.3,1)}
.rcta:hover svg{transform:translateX(6px)}
.rcta--lg{font-size:1.25rem}
.rcta--ink{color:var(--r-ink)}.rcta--ink::after{background:var(--r-ink)}
/* the ONE form submit: a wide sharp line-CTA that fills from the left on hover */
.rcta--submit{display:flex;width:100%;justify-content:space-between;align-items:center;
  padding:1.15rem 1.3rem;color:var(--r-heading);border:0;overflow:hidden;isolation:isolate}
.rcta--submit::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--r-accent);
  transform:scaleX(1);transform-origin:left;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.rcta--submit::after{display:none}
.rcta--submit,.rcta--submit *{color:var(--r-ink)}
.rcta--submit:hover::before{transform:scaleX(1.0)}
.rcta--submit:hover{gap:.7rem}
.rcta--submit:hover svg{transform:translateX(8px)}

/* ============ SERVICES, interactive editorial index ============ */
.svc2__head{margin-bottom:clamp(2rem,1.4rem+3vw,4rem)}
.svc2{display:grid;grid-template-columns:1fr 1.02fr;gap:clamp(2rem,1rem+4vw,6rem);align-items:start}
.svc2__list{list-style:none;margin:0;padding:0;border-top:1px solid var(--r-line)}
.svc2__item{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:1.4rem;
  padding:clamp(1rem,.6rem+1.2vw,1.9rem) 0;border-bottom:1px solid var(--r-line);
  color:var(--r-muted);position:relative;transition:padding-left .4s cubic-bezier(.16,1,.3,1),color var(--t)}
.svc2__item::before{content:"";position:absolute;left:0;top:0;bottom:0;width:0;
  border-left:3px solid var(--r-accent);transition:width .4s cubic-bezier(.16,1,.3,1);opacity:0}
.svc2__n{font-family:var(--font-display);font-weight:700;font-size:.9rem;color:var(--r-line-2);
  font-variant-numeric:tabular-nums;transition:color var(--t)}
.svc2__name{font-family:var(--font-display);font-weight:800;text-transform:uppercase;letter-spacing:-.01em;
  line-height:1;font-size:clamp(1.7rem,1.1rem+2.6vw,3.1rem);color:inherit;transition:color var(--t)}
.svc2__item.is-active,.svc2__item:hover{color:var(--r-heading);padding-left:1.1rem}
.svc2__item.is-active::before,.svc2__item:hover::before{width:3px;opacity:1}
.svc2__item.is-active .svc2__n,.svc2__item:hover .svc2__n{color:var(--r-accent)}
.svc2__item:hover{text-decoration:none}
/* desktop hides the mobile-only pieces carried inside each item */
.svc2__thumb,.svc2__mdesc,.svc2__go{display:none}

/* featured stage, layered cross-fading images, no frame */
.svc2__stage{position:sticky;top:96px}
.svc2__media{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--r-panel)}
.svc2__layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  transform:scale(1.07);transition:opacity .7s ease,transform 1.4s cubic-bezier(.16,1,.3,1);will-change:opacity,transform}
.svc2__layer.is-active{opacity:1;transform:scale(1)}
.svc2__media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,rgba(10,9,8,.55))}
.svc2__bignum{position:absolute;left:.06em;bottom:-.12em;z-index:2;font-family:var(--font-display);
  font-weight:800;line-height:1;font-size:clamp(6rem,4rem+10vw,13rem);color:#fff;opacity:.92;
  letter-spacing:-.02em;text-shadow:0 10px 40px rgba(0,0,0,.5);pointer-events:none;
  transition:opacity .45s ease,transform .55s cubic-bezier(.16,1,.3,1)}
.svc2__desc{margin-top:1.5rem;color:var(--r-muted);max-width:46ch;line-height:1.65;
  transition:opacity .45s ease,transform .55s cubic-bezier(.16,1,.3,1)}
.svc2__desc.is-swapping,.svc2__bignum.is-swapping{opacity:0;transform:translateY(12px)}

/* ============ STATEMENT, unframed, overlapping image ============ */
.statement__media{box-shadow:none;aspect-ratio:5/4;margin-top:0;position:relative;z-index:1}
.statement__media::after{box-shadow:none;background:none}
.statement__media img{transition:transform 1.6s cubic-bezier(.16,1,.3,1)}
.statement__media:hover img{transform:scale(1.05)}
.statement__body{align-items:center}
.statement__head{position:relative;z-index:2}

/* ============ AUDIENCES, already full-bleed; strip the divider borders ============ */
.aud{border-top:0}
.aud__col:first-child{border-right:0}
@media (min-width:861px){.aud__col:first-child{box-shadow:1px 0 0 rgba(255,255,255,.06)}}

/* ============ BEFORE/AFTER, bigger, unframed ============ */
.rs--ba .ba{max-width:1280px;border:0;box-shadow:none;aspect-ratio:16/8}
.rs--ba .ba::after{content:"DRAG";position:absolute;top:14px;left:50%;transform:translateX(-50%);
  z-index:6;font-family:var(--font-display);font-weight:700;letter-spacing:.25em;font-size:.66rem;
  color:#fff;opacity:.7;pointer-events:none}

/* ============ GALLERY, art-directed, captions reveal on hover, no bars ============ */
.gwall{gap:0}
.gwall figure{background:#0a0908}
.gwall figcaption{background:transparent;border:0;backdrop-filter:none;left:0;right:0;bottom:0;top:auto;
  padding:1.4rem 1.2rem;color:#fff;opacity:0;transform:translateY(12px);
  background:linear-gradient(0deg,rgba(10,9,8,.85),transparent);
  transition:opacity .5s ease,transform .5s cubic-bezier(.16,1,.3,1)}
.gwall figure::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);pointer-events:none}
.gwall figure:hover figcaption{opacity:1;transform:none}
.gwall figure:hover img{transform:scale(1.08)}
.gwall img{transition:transform 1.4s cubic-bezier(.16,1,.3,1)}

/* ============ SERVICE AREA, typographic list, unframed map ============ */
.area2__map{border:0;box-shadow:none}
.area2__map img{transition:transform 1.6s cubic-bezier(.16,1,.3,1)}
.area2__map:hover img{transform:scale(1.04)}
.area2__list{gap:0;flex-direction:column;align-items:flex-start;border-top:1px solid var(--r-line);margin:1.8rem 0 2.2rem}
.area2__list li{border:0;padding:.7rem 0;width:100%;border-bottom:1px solid var(--r-line);
  font-size:clamp(1.1rem,.9rem+1vw,1.6rem);letter-spacing:0;color:var(--r-heading);
  display:flex;align-items:center;gap:.9rem;transition:padding-left .35s cubic-bezier(.16,1,.3,1),color var(--t)}
.area2__list li::before{content:"";width:8px;height:8px;background:var(--r-accent);transform:rotate(45deg);flex:0 0 auto}

/* ============ CREDIBILITY, typographic band, no panel ============ */
.cred__list li::before{background:var(--r-line-2)}
.cred__list{font-size:.9rem}

/* ============ CONTACT ALT, line rows, no boxes ============ */
.estimate2__alt{gap:0;border-top:1px solid var(--r-line);margin-top:2.2rem}
.estimate2__alt a{border:0;border-bottom:1px solid var(--r-line);padding:1.15rem .2rem;
  transition:padding-left .35s cubic-bezier(.16,1,.3,1)}
.estimate2__alt a:hover{background:transparent;padding-left:.6rem}
.estimate2__alt a::after{content:"";width:16px;height:16px;margin-left:auto;flex:0 0 auto;
  border-top:2px solid var(--r-accent);border-right:2px solid var(--r-accent);transform:rotate(45deg);
  opacity:.5;transition:opacity var(--t),transform var(--t)}
.estimate2__alt a:hover::after{opacity:1;transform:rotate(45deg) translate(2px,-2px)}

/* ============ NAV + link micro-interactions ============ */
.nav a{position:relative;border-bottom:0!important}
.nav a::after{content:"";position:absolute;left:0;bottom:2px;height:2px;width:100%;background:var(--color-accent);
  transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.header-phone{transition:color var(--t)}
.rmore::after,.rlabel{pointer-events:none}

/* ============ RESPONSIVE, services becomes image-led (no cards) ============ */
@media (max-width:900px){
  .svc2{grid-template-columns:1fr;gap:0}
  .svc2__list{border-top:0}
  .svc2__stage{display:none}
  .svc2__item{display:block;position:relative;z-index:0;border:0;padding:0;color:#fff;min-height:74vh;overflow:hidden;isolation:isolate}
  .svc2__item::before{display:none}
  .svc2__thumb{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
  .svc2__item::after{content:"";position:absolute;inset:0;z-index:1;
    background:linear-gradient(180deg,rgba(10,9,8,.25),rgba(10,9,8,.88))}
  .svc2__item>.svc2__n{position:absolute;z-index:2;top:1.3rem;left:1.3rem;font-size:1rem;color:#fff;opacity:.85}
  .svc2__name{position:absolute;z-index:2;left:1.3rem;bottom:6.5rem;color:#fff;font-size:clamp(2.2rem,1.4rem + 6vw,3.4rem)}
  .svc2__mdesc{display:block;position:absolute;z-index:2;left:1.3rem;right:1.3rem;bottom:3.6rem;color:#E7E0D6;font-size:.98rem}
  .svc2__go{display:inline-flex;align-items:center;gap:.5rem;position:absolute;z-index:2;left:1.3rem;bottom:1.5rem;
    color:#fff;font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:.9rem}
  .svc2__go svg{width:1.2em;height:1.2em}
  .statement__media{margin-top:0}
}

/* de-box the FAQ: legacy .faq sets a full border + panel bg; strip to a hairline */
.rs--faq details{background:transparent !important;border:0;border-bottom:1px solid var(--r-line)}
.rs--faq summary{background:transparent !important}
.rs--faq details[open]{background:transparent !important}


/* ============================================================================
   ART DIRECTION PASS (2026-08-26), prestige, restraint, tonal contrast.
   Introduces warm light "reading" sections between the dark cinematic ones,
   quiets the eyebrows + orange, tightens the type scale and vertical rhythm.
   Hero stays locked. Applied as a final layer so it governs the outcome.
   ============================================================================ */

:root{
  --ad-paper:#F1EBE0;      /* warm off-white */
  --ad-stone:#E7E0D2;      /* stone */
  --ad-ink:#1B1712;        /* warm near-black text */
  --ad-ink-soft:#6A6154;   /* muted warm grey */
  --ad-hair:#D9CFBD;       /* stone hairline */
  --ad-hair-strong:#C4B9A4;
}

/* tighter, more controlled vertical rhythm (was 4.5–9rem) */
:root{ --r-sy: clamp(3.75rem, 2.75rem + 4.5vw, 6.75rem); }

/* ---- restrain the eyebrow: neutral, smaller; orange only where it earns it ---- */
.rlabel{color:var(--r-muted);letter-spacing:.26em;font-weight:600;font-size:.68rem}
.rlabel::before{background:currentColor;opacity:.45;width:16px}

/* ---- restrain the display scale a touch (less shouting) ---- */
.display-xl{font-size:clamp(2.4rem, 1.6rem + 3.4vw, 4.3rem);line-height:1.0;letter-spacing:-.02em}
.display-lg{font-size:clamp(1.9rem, 1.3rem + 2.4vw, 3.1rem);letter-spacing:-.015em}
/* body copy: warmer, a touch larger, more air */
.rlead{font-size:clamp(1.12rem, 1.02rem + .4vw, 1.35rem);line-height:1.55}
.rmuted{line-height:1.72}

/* ============ LIGHT "READING" SECTIONS ============ */
.rs--tone{background:var(--ad-paper);color:var(--ad-ink)}
.rs--tone .display-xl,
.rs--tone .display-lg,
.rs--tone h2,.rs--tone h3,
.rs--tone .cred__lead span,
.rs--tone .svc2__name{color:var(--ad-ink)}
.rs--tone .display-xl em{color:var(--r-accent)}
.rs--tone .rmuted,
.rs--tone .cred__list,
.rs--tone p,
.rs--tone .svc2__desc,
.rs--tone .timeline p{color:var(--ad-ink-soft)}
.rs--tone .rlabel{color:var(--ad-ink-soft)}
.rs--tone .rlabel::before{background:var(--ad-ink-soft)}
.rs--tone .cred__lead span{font-weight:600;color:var(--ad-ink)}

/* hairlines on light */
.rs--tone.rs--cred{background:var(--ad-paper);border-top:1px solid var(--ad-hair);border-bottom:1px solid var(--ad-hair)}
.rs--tone .cred__list li::before{background:var(--ad-hair-strong)}
.rs--tone .area2__list,
.rs--tone .area2__list li,
.rs--tone .timeline li{border-color:var(--ad-hair)}
.rs--tone.rs--faq{border-top:1px solid var(--ad-hair)}
.rs--tone .rs--faq .faq,
.rs--faq.rs--tone .faq{border-top-color:var(--ad-hair)}
.rs--faq.rs--tone details{border-bottom-color:var(--ad-hair)}
.rs--faq.rs--tone summary{color:var(--ad-ink)}
.rs--faq.rs--tone .faq-a p{color:var(--ad-ink-soft)}

/* CTAs + markers on light */
.rs--tone .rcta{color:var(--ad-ink)}
.rs--tone .area2__list li{color:var(--ad-ink)}
.rs--tone .timeline li::before{background:var(--r-accent)}
.rs--tone .timeline__n{color:var(--r-accent)}
.rs--tone .timeline h3{color:var(--ad-ink)}
.rs--tone .phase{color:var(--ad-ink-soft)}
.rs--tone .phase li:not(:last-child)::after{background:var(--ad-hair-strong)}
.rs--tone .phase .is-end{color:var(--r-accent)}
.rs--tone .statement__media::after{box-shadow:none}
.rs--tone .area2__map{border:0}
/* map is a dark infographic; give it a hair frame on paper so it doesn't float */
.rs--tone .area2__map{outline:1px solid var(--ad-hair)}
/* service featured number sits on paper in the light services? services stays dark, N/A */
.rs--tone :focus-visible{outline-color:#141414}

/* the statement's phase row + copy get a little more room on paper */
.rs--statement .statement__body{margin-top:clamp(1.5rem,1rem+2vw,2.75rem)}

/* ============ DARK SECTIONS: quiet the accents ============ */
/* keep dark sections rich but reduce orange noise: eyebrow ticks neutral */
.on-dark .rlabel{color:var(--r-muted)}
.on-dark .rlabel::before{background:var(--r-muted);opacity:.5}

/* ---- credibility ribbon: make it a quiet typographic band ---- */
.rs--cred{padding-block:clamp(1.6rem,1.2rem+1.4vw,2.4rem)}
.cred__lead{font-weight:400}
.cred__lead span{font-weight:600}
.cred__list{letter-spacing:.14em;font-size:.78rem}

/* ---- process/engage timeline: continuous sequence, lighter rules ---- */
.timeline li{border-top-width:1px}
.timeline li::before{height:1px;top:-1px}
.timeline__n{font-size:2rem;font-weight:700}

/* ---- softer, slower, unified motion ---- */
.svc2__layer{transition:opacity .8s ease, transform 1.6s cubic-bezier(.16,1,.3,1)}
.gwall img,.statement__media img,.area2__map img{transition:transform 1.8s cubic-bezier(.16,1,.3,1)}

/* trim the closing block so the orange finale is confident, not vast */
.rs--closing{padding-block:clamp(3.5rem,2.5rem+4vw,6rem)}

/* mobile: reduce dead space + recalibrate the giant statement */
@media (max-width:900px){
  .display-xl{font-size:clamp(2.1rem, 1.5rem + 4vw, 3.2rem)}
  .rs{padding-block:clamp(3rem,2.4rem+3vw,4.5rem)}
}

/* closing eyebrow must stay ink on the orange finale (art-dir muted rule overrode it) */
.rs--closing .rlabel,.rlabel--dark{color:var(--r-ink)}
.rs--closing .rlabel::before,.rlabel--dark::before{background:var(--r-ink);opacity:.6}


/* ============================================================================
   SERVICES PAGE, CHAPTER COMPOSITIONS (2026-08-26)
   The five services as five structurally-distinct "chapters" in the field-
   survey world, sequenced the way a jobsite actually moves, clear, excavate,
   trench, grade, demolish, and alternating warm-paper / dark cinematic.
   Namespaced .svch so it is fully decoupled from the dormant .svcx/.svcp panel
   system. Tokens only (no hardcoded #fff), so the day/night toggle flips it.
   Motion reuses the site-wide .reveal + hover-scale + rcta underline.
   ============================================================================ */

.svch{scroll-margin-top:96px}

/* ---- shared media frame ---- */
.svch__media{position:relative;overflow:hidden;background:var(--r-panel)}
.svch__media img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.6s cubic-bezier(.16,1,.3,1)}
.svch__media:hover img{transform:scale(1.04)}
.svch__media::after{content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(128,128,128,.16)}

/* ---- copy rhythm ---- */
.svch__copy .rlabel{margin-bottom:.9rem}
.svch h2{margin-top:.9rem}
.svch .rlead{margin-top:1.3rem;max-width:56ch}

/* ---- ticks: hairline rows, no boxes, tokenised ---- */
.svch__ticks{list-style:none;margin:1.7rem 0 0;padding:0;border-top:1px solid var(--r-line)}
.svch__ticks li{display:flex;gap:.9rem;align-items:flex-start;padding:.85rem 0;
  border-bottom:1px solid var(--r-line);color:var(--r-text);line-height:1.5}
.svch__ticks .ico{width:18px;height:18px;flex:0 0 auto;margin-top:.15rem;color:var(--r-accent)}
.svch__ticks--row{display:grid;grid-template-columns:repeat(3,1fr);gap:0 2.2rem}
.svch__ticks--row li{border-bottom:0}
.rs--tone .svch__ticks{border-color:var(--ad-hair)}
.rs--tone .svch__ticks li{color:var(--ad-ink);border-color:var(--ad-hair)}

/* ---- credential pull ---- */
.svch__cred{margin-top:1.6rem;font-family:var(--font-display);font-weight:700;
  text-transform:uppercase;letter-spacing:.09em;font-size:.86rem;color:var(--r-muted)}
.svch__cred span{color:var(--r-accent)}
.rs--tone .svch__cred{color:var(--ad-ink-soft)}

.svch .rcta{margin-top:1.9rem}

/* ---- INTRO ---- */
.svch-intro{padding-block:clamp(3.75rem,2.75rem+5vw,6.5rem)}
.svch-intro .crumb{font-family:var(--font-display);font-weight:600;text-transform:uppercase;
  letter-spacing:.2em;font-size:.7rem;color:var(--r-muted);margin:0 0 1.5rem}
.svch-intro .crumb a{color:inherit;text-decoration:none}
.svch-intro .crumb a:hover{color:var(--r-accent)}
.svch-intro h1{max-width:15ch}
.svch-intro .rlead{max-width:54ch;color:var(--r-muted)}

/* ---- 01 · SPREAD, image-led reading spread ---- */
.svch--spread .svch__grid{display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(1.75rem,1rem + 4vw,5rem);align-items:center}
.svch--spread .svch__media{aspect-ratio:4/5}

/* ---- 02 · FEATURE, full-bleed cinematic + ghost numeral ---- */
.svch--feature .svch__fhead{position:relative;max-width:var(--r-maxw);margin-inline:auto;
  padding-inline:var(--r-gutter);overflow:hidden}
.svch--feature .svch__fhead .rlabel,
.svch--feature .svch__fhead h2{position:relative;z-index:1}
.svch__ghost{position:absolute;z-index:0;right:0;top:50%;transform:translateY(-50%);
  font-family:var(--font-display);font-weight:800;line-height:1;letter-spacing:-.04em;
  font-size:clamp(8rem,6rem + 16vw,20rem);color:var(--r-text);opacity:.05;
  pointer-events:none;user-select:none}
.svch__bleed{position:relative;overflow:hidden;background:var(--r-panel);
  margin-top:clamp(1.5rem,1rem + 3vw,3rem);aspect-ratio:21/9}
.svch__bleed img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.8s cubic-bezier(.16,1,.3,1)}
.svch--feature:hover .svch__bleed img{transform:scale(1.04)}
.svch__ffoot{max-width:var(--r-maxw);margin-inline:auto;padding-inline:var(--r-gutter);
  display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(1.5rem,1rem + 3vw,4rem);
  align-items:start;margin-top:clamp(1.7rem,1.2rem + 2vw,2.8rem)}
.svch__ffoot .rlead{margin-top:0}
.svch__ffoot .svch__ticks{margin-top:0}

/* ---- 03 · VERTICAL, tall depth split ---- */
.svch--vertical .svch__vert{display:grid;grid-template-columns:1fr .82fr;
  gap:clamp(1.75rem,1rem + 4vw,5rem);align-items:center}
.svch--vertical .svch__media{aspect-ratio:3/4}
.svch--vertical .svch__media::before{content:"";position:absolute;z-index:2;left:0;top:0;bottom:0;width:20px;
  background:repeating-linear-gradient(180deg,currentColor 0 1px,transparent 1px 30px);
  color:var(--r-cream);opacity:.45;pointer-events:none}

/* ---- 04 · HORIZON, letterbox + level rule ---- */
.svch--horizon .svch__hhead{max-width:var(--r-maxw);margin-inline:auto;padding-inline:var(--r-gutter)}
.svch__letterbox{position:relative;overflow:hidden;background:var(--r-panel);
  margin-top:clamp(1.5rem,1rem + 3vw,3rem);aspect-ratio:24/7}
.svch__letterbox img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.8s cubic-bezier(.16,1,.3,1)}
.svch--horizon:hover .svch__letterbox img{transform:scale(1.03)}
.svch__level{position:absolute;z-index:2;left:0;right:0;top:50%;height:2px;
  background:var(--r-accent);opacity:.9;pointer-events:none}
.svch__level::before,.svch__level::after{content:"";position:absolute;top:-5px;width:2px;height:12px;
  background:var(--r-accent)}
.svch__level::before{left:0}
.svch__level::after{right:0}
.svch__hfoot{max-width:var(--r-maxw);margin-inline:auto;padding-inline:var(--r-gutter);
  display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(1.5rem,1rem + 3vw,4rem);
  align-items:start;margin-top:clamp(1.7rem,1.2rem + 2vw,2.8rem)}
.svch__hfoot .rlead{margin-top:0}
.svch__hfoot .svch__ticks{margin-top:0}

/* ---- 05 · TYPE, type-forward, inset image ---- */
.svch--type .svch__twrap{display:grid;gap:clamp(1.5rem,1rem + 3vw,3rem)}
.svch--type .svch__tlead h2{max-width:13ch;margin-top:.9rem}
.svch__tbody{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(1.75rem,1rem + 4vw,5rem);
  align-items:start}
.svch__tbody .rlead{margin-top:0}
.svch__inset{position:relative;overflow:hidden;background:var(--r-panel);aspect-ratio:4/3}
.svch__inset img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.6s cubic-bezier(.16,1,.3,1)}
.svch--type:hover .svch__inset img{transform:scale(1.04)}

/* ---- closing sub-line ---- */
.svch-closing .closing__sub{max-width:50ch;margin:1.1rem auto 0;color:var(--r-ink);
  opacity:.82;line-height:1.6}

/* ---- responsive ---- */
@media (max-width:900px){
  .svch--spread .svch__grid,
  .svch--vertical .svch__vert,
  .svch__ffoot,.svch__hfoot,.svch__tbody{grid-template-columns:1fr;gap:1.9rem}
  .svch--vertical .svch__media{aspect-ratio:4/5}
  .svch__bleed{aspect-ratio:16/10}
  .svch__letterbox{aspect-ratio:16/9}
  .svch__ticks--row{grid-template-columns:1fr}
  .svch__ticks--row li{border-bottom:1px solid var(--r-line)}
  .rs--tone .svch__ticks--row li{border-color:var(--ad-hair)}
  .svch__ghost{font-size:clamp(6rem,4rem + 12vw,9rem)}
}