/* =========================================================
   ABC Decorative Rugs — shared stylesheet
   Design tokens + components (apple.com-inspired)
   ========================================================= */

:root{
  --ink:#1d1d1f;
  --paper:#ffffff;
  --fog:#f5f5f7;
  --mist:#d2d2d7;
  --accent:#0071e3;
  --accent-hover:#0077ed;
  --muted:#86868b;
  --rule:rgba(0,0,0,.08);
  --success:#2b8a3e;
  --danger:#c92a2a;
  --shadow-soft:0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
  --shadow-lift:0 2px 6px rgba(0,0,0,.06), 0 24px 48px rgba(0,0,0,.10);
  --shadow-panel:0 10px 40px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.05);

  --f-xs:.8125rem;
  --f-sm:.9375rem;
  --f-md:1.0625rem;
  --f-lg:1.375rem;
  --f-xl:clamp(1.6rem, 1.2vw + 1.2rem, 2.1rem);
  --f-2xl:clamp(2rem, 2.6vw + 1rem, 3.2rem);
  --f-3xl:clamp(2.4rem, 5vw + 1rem, 4.6rem);
  --f-4xl:clamp(3rem, 7vw + 1rem, 6.25rem);

  --s-xs:.5rem;
  --s-sm:1rem;
  --s-md:2rem;
  --s-lg:4rem;
  --s-xl:6rem;
  --s-2xl:8rem;

  --w-content:820px;
  --w-wide:1240px;

  --stack: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;

  --utility-h:36px;
  --header-h:64px;
  --header-h-shrunk:52px;
  --ease-out: cubic-bezier(.2,.7,.2,1);
  --ease-spring: cubic-bezier(.22,1.2,.36,1);
}

/* no utility bar on mobile */
@media (max-width:880px){
  :root{ --utility-h:0px; --header-h:56px; --header-h-shrunk:52px; }
}

/* --------------------------- reset --------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--header-h) + var(--utility-h) + 12px);}
body{
  margin:0;
  font-family:var(--stack);
  font-size:var(--f-md);
  line-height:1.47;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,video{max-width:100%; display:block; height:auto}
button{font:inherit; color:inherit; background:none; border:none; cursor:pointer}
a{color:inherit; text-decoration:none}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:3px;
  border-radius:6px;
}
::selection{background:var(--ink); color:var(--paper)}

/* --------------------------- typography --------------------------- */
h1,h2,h3,h4{margin:0 0 .6em; font-weight:600; letter-spacing:-.015em; line-height:1.12; color:var(--ink)}
h1{font-size:var(--f-3xl); letter-spacing:-.025em; line-height:1.04}
@media (min-width:1024px){
  h1{letter-spacing:-.025em}
}
.display{font-size:var(--f-4xl); letter-spacing:-.035em; line-height:.98; font-weight:600}
h2{font-size:var(--f-2xl); letter-spacing:-.02em}
h3{font-size:var(--f-xl); letter-spacing:-.015em; line-height:1.15}
h4{font-size:var(--f-lg); letter-spacing:-.01em}
p{margin:0 0 1em}
.lede{font-size:var(--f-lg); line-height:1.4; color:var(--ink); letter-spacing:-.005em}
.eyebrow{
  font-size:var(--f-xs);
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:var(--s-sm);
  display:inline-block;
}
.muted{color:var(--muted)}
.ink-on-dark{color:var(--paper)}
.ink-on-dark .muted{color:#a1a1a6}

/* --------------------------- layout --------------------------- */
.wrap{max-width:var(--w-wide); margin:0 auto; padding-inline:var(--s-md)}
.wrap-narrow{max-width:var(--w-content); margin:0 auto; padding-inline:var(--s-md)}
.section{padding-block:var(--s-xl)}
.section-sm{padding-block:var(--s-lg)}
.section-xl{padding-block:var(--s-2xl)}
.section.dark{background:var(--ink); color:var(--paper)}
.section.fog{background:var(--fog)}

/* --------------------------- buttons --------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.75rem 1.5rem;
  border-radius:980px;
  background:var(--accent);
  color:var(--paper);
  font-size:var(--f-md);
  font-weight:500;
  border:1px solid transparent;
  cursor:pointer;
  transition:background .2s var(--ease-out), transform .25s var(--ease-spring), box-shadow .3s var(--ease-out);
  text-align:center;
  min-height:44px;
  white-space:nowrap;
  will-change:transform;
}
.btn:hover{background:var(--accent-hover); box-shadow:0 6px 20px rgba(0,113,227,.25)}
.btn:active{transform:scale(.98)}
.btn-ghost{
  background:transparent; color:var(--accent);
  border:1px solid var(--mist);
}
.btn-ghost:hover{background:var(--fog); color:var(--accent); box-shadow:none}
.btn-link{
  background:transparent; color:var(--accent); padding:0;
  min-height:auto;
  border:none;
  font-weight:500;
}
.btn-link:hover{background:transparent; text-decoration:none}
.btn-link::after{content:" \203A"; transition:margin-left .2s var(--ease-out)}
.btn-link:hover::after{margin-left:.2rem}
.btn-dark{background:var(--ink); color:var(--paper)}
.btn-dark:hover{background:#2d2d2f}
.btn-light{background:var(--paper); color:var(--ink)}
.btn-light:hover{background:#f5f5f7; box-shadow:0 6px 20px rgba(0,0,0,.2)}

.btn-row{display:flex; gap:var(--s-sm); flex-wrap:wrap; align-items:center}
.btn-row.center{justify-content:center}

/* --------------------------- utility bar --------------------------- */
.utility-bar{
  background:var(--ink);
  color:var(--paper);
  font-size:var(--f-xs);
  letter-spacing:.01em;
  height:var(--utility-h);
  position:relative;
  z-index:101;
  overflow:hidden;
  transition:height .3s var(--ease-out), opacity .3s var(--ease-out);
}
.utility-bar[hidden]{display:block; height:0; opacity:0}
.utility-bar-inner{
  max-width:var(--w-wide);
  margin:0 auto;
  padding-inline:var(--s-md);
  height:100%;
  display:flex; align-items:center; gap:1rem;
  overflow-x:auto;
  white-space:nowrap;
  scrollbar-width:none;
}
.utility-bar-inner::-webkit-scrollbar{display:none}
.utility-bar-msg{
  opacity:.82;
  display:inline-flex; align-items:center; gap:1rem;
  flex:1;
}
.utility-bar-msg span{color:#c8c8cc}
.utility-bar-msg a{color:var(--paper); opacity:.9; transition:opacity .2s; font-weight:500}
.utility-bar-msg a:hover{opacity:1; text-decoration:underline}
.utility-close{
  color:var(--paper);
  opacity:.6;
  padding:4px;
  font-size:14px;
  line-height:1;
  border-radius:4px;
  transition:opacity .2s;
  flex-shrink:0;
}
.utility-close:hover{opacity:1}
@media (max-width:880px){
  .utility-bar{display:none}
  .utility-close{display:none}
}

/* --------------------------- header / nav --------------------------- */
.site-header{
  position:sticky; top:0; z-index:100;
  height:var(--header-h);
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid transparent;
  transition:background .3s var(--ease-out), border-color .3s var(--ease-out), height .3s var(--ease-out), backdrop-filter .3s var(--ease-out);
}
@supports not ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))){
  .site-header{background:rgba(255,255,255,.94)}
}
.site-header.is-scrolled{
  height:var(--header-h-shrunk);
  background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:saturate(180%) blur(24px);
  backdrop-filter:saturate(180%) blur(24px);
  border-bottom-color:var(--rule);
}
.site-header.dark{
  background:rgba(29,29,31,.72); color:var(--paper);
}
.site-header.dark.is-scrolled{background:rgba(29,29,31,.88)}

.nav{
  max-width:var(--w-wide);
  margin:0 auto;
  height:100%;
  padding-inline:var(--s-md);
  display:flex; align-items:center; gap:1.25rem;
  font-size:var(--f-xs);
}

/* real logo */
.site-logo{
  display:inline-flex; align-items:center;
  flex-shrink:0;
  height:100%;
  line-height:1;
}
.site-logo img{
  height:44px;
  width:auto;
  display:block;
  transition:height .3s var(--ease-out);
  -webkit-user-select:none;
  user-select:none;
}
.site-header.is-scrolled .site-logo img{height:36px}
@media (max-width:880px){
  .site-logo img{height:36px}
  .site-header.is-scrolled .site-logo img{height:32px}
}

.nav-links{
  display:flex; gap:1.15rem; list-style:none; padding:0; margin:0; flex:1;
  align-items:center;
  justify-content:center;
}
.nav-links > li{position:relative}
.nav-links a{
  opacity:.86; transition:opacity .2s;
  display:inline-block;
  padding:4px 2px;
  position:relative;
}
.nav-links a:hover{opacity:1}
.nav-links a[aria-current="page"]::after,
.nav-links a.is-current::after,
.nav-links .has-dropdown[aria-expanded="true"]::after{
  content:"";
  position:absolute;
  left:2px; right:2px;
  bottom:-8px;
  height:2px;
  background:currentColor;
  border-radius:2px;
  opacity:.9;
}
.has-dropdown{
  background:transparent; border:none; padding:4px 2px;
  font:inherit; color:inherit; opacity:.86;
  cursor:pointer;
  display:inline-flex; align-items:center; gap:.25rem;
  transition:opacity .2s;
  letter-spacing:inherit;
}
.has-dropdown:hover, .has-dropdown[aria-expanded="true"]{opacity:1}
.has-dropdown .chev{
  width:9px; height:9px;
  transition:transform .2s var(--ease-out);
}
.has-dropdown[aria-expanded="true"] .chev{transform:rotate(180deg)}

.nav-actions{display:inline-flex; align-items:center; gap:.75rem; margin-left:auto}
.nav-phone{display:inline-flex; align-items:center; gap:.4rem; opacity:.86; font-weight:500; white-space:nowrap}
.nav-phone:hover{opacity:1}
.nav-phone svg{width:12px; height:12px}
@media (max-width:1020px){ .nav-phone span{display:none} }
.nav-search{
  background:transparent; border:none; padding:6px; cursor:pointer;
  color:inherit; opacity:.86;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px;
  transition:opacity .2s, background .2s;
}
.nav-search:hover{opacity:1; background:var(--rule)}
.nav-search svg{width:18px; height:18px}
.nav-cta{
  padding:.35rem 1rem; min-height:32px;
  font-size:var(--f-xs);
}
.nav-toggle{
  display:none;
  background:transparent; border:none; padding:8px; cursor:pointer;
  margin-left:auto;
}
.nav-toggle-bar{display:block; width:18px; height:1.5px; background:currentColor; margin:4px 0; transition:transform .25s var(--ease-out), opacity .2s}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:first-child{transform:translateY(5.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:last-child{transform:translateY(-5.5px) rotate(-45deg)}

@media (max-width:1040px){
  .nav-links{display:none}
  .nav-toggle{display:block}
  .nav{gap:.5rem}
  .nav-cta{padding:.35rem .9rem}
  .nav-actions{gap:.5rem}
}
@media (max-width:620px){
  .nav-cta{padding:.3rem .75rem; font-size:11px}
}

/* mega menu */
.mega-menu{
  position:fixed;
  top:calc(var(--utility-h) + var(--header-h));
  left:0; right:0;
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  backdrop-filter:saturate(180%) blur(18px);
  border-top:1px solid var(--rule);
  box-shadow:var(--shadow-panel);
  z-index:95;
  opacity:0;
  pointer-events:none;
  transform:translateY(-8px);
  transition:opacity .25s var(--ease-out), transform .3s var(--ease-out);
}
.site-header.is-scrolled + .mega-menu,
.site-header.is-scrolled ~ .mega-menu{
  top:calc(var(--utility-h) + var(--header-h-shrunk));
}
.mega-menu.is-open{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}
.mega-menu-inner{
  max-width:var(--w-wide);
  margin:0 auto;
  padding:var(--s-md);
}
.mega-menu h5{
  font-size:var(--f-xs); letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); font-weight:600; margin:0 0 1rem;
}
.mega-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:.35rem;
}
@media (max-width:960px){ .mega-grid{grid-template-columns:1fr 1fr} }
@media (max-width:600px){ .mega-grid{grid-template-columns:1fr} }
.mega-card{
  display:flex; gap:.8rem; align-items:center;
  padding:.7rem .85rem;
  border-radius:12px;
  transition:background .2s var(--ease-out);
  position:relative;
}
.mega-card:hover, .mega-card:focus-visible{
  background:var(--fog);
}
.mega-card .mega-ico{
  width:36px; height:36px;
  border-radius:10px;
  display:grid; place-items:center;
  background:var(--fog);
  color:var(--ink);
  flex-shrink:0;
  transition:background .2s, color .2s;
}
.mega-card:hover .mega-ico{ background:var(--ink); color:var(--paper) }
.mega-card .mega-ico svg{
  width:20px; height:20px;
  stroke:currentColor; stroke-width:1.5; fill:none;
  stroke-linecap:round; stroke-linejoin:round;
}
.mega-card .mega-body{ flex:1; min-width:0 }
.mega-card .title{
  display:block;
  font-weight:500; letter-spacing:-.005em;
  font-size:var(--f-sm);
  margin:0 0 .1rem;
  color:var(--ink);
}
.mega-card .desc{
  display:block;
  color:var(--muted); font-size:var(--f-xs);
  margin:0; line-height:1.4;
  overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap;
}
.mega-card .mega-chev{
  width:12px; height:12px;
  color:var(--muted); flex-shrink:0;
  opacity:.5;
  transition:transform .2s var(--ease-out), opacity .2s, color .2s;
}
.mega-card .mega-chev svg{width:100%; height:100%; stroke:currentColor; stroke-width:1.6; fill:none}
.mega-card:hover .mega-chev{ opacity:1; transform:translateX(3px); color:var(--ink) }

/* search overlay */
.search-overlay{
  position:fixed; inset:0;
  z-index:200;
  background:rgba(29,29,31,.55);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
  display:none;
  opacity:0;
  transition:opacity .25s var(--ease-out);
}
.search-overlay.is-open{display:block; opacity:1}
.search-overlay-inner{
  max-width:720px;
  margin:18vh auto 0;
  padding:var(--s-md);
  text-align:center;
}
.search-overlay input{
  width:100%;
  font:inherit;
  font-size:clamp(1.6rem, 3vw + 1rem, 2.6rem);
  font-weight:500;
  letter-spacing:-.02em;
  padding:1rem .2rem;
  background:transparent;
  color:var(--paper);
  border:none;
  border-bottom:1px solid rgba(255,255,255,.3);
  border-radius:0;
  outline:none;
  caret-color:var(--paper);
}
.search-overlay input::placeholder{color:rgba(255,255,255,.5)}
.search-overlay input:focus{border-bottom-color:var(--paper); outline:none}
.search-recent{
  margin-top:1.5rem;
  color:rgba(255,255,255,.7);
  font-size:var(--f-sm);
  text-align:left;
}
.search-recent h6{
  font-size:var(--f-xs); letter-spacing:.08em; text-transform:uppercase;
  margin:0 0 .6rem;
  color:rgba(255,255,255,.5);
  font-weight:600;
}
.search-recent ul{list-style:none; margin:0; padding:0}
.search-recent li{padding:.4rem 0; border-top:1px solid rgba(255,255,255,.12)}
.search-recent a{
  color:rgba(255,255,255,.85); display:block;
  transition:color .15s;
}
.search-recent a:hover{color:var(--paper)}
.search-close{
  position:absolute; top:1.4rem; right:1.4rem;
  color:var(--paper); opacity:.7;
  width:40px; height:40px;
  border-radius:999px;
  display:grid; place-items:center;
  transition:opacity .2s, background .2s;
}
.search-close:hover{opacity:1; background:rgba(255,255,255,.1)}

/* mobile nav - full-screen overlay */
.mobile-nav{
  display:none;
  position:fixed; inset:0;
  z-index:99;
  background:rgba(255,255,255,.98);
  -webkit-backdrop-filter:blur(24px); backdrop-filter:blur(24px);
  padding:calc(var(--header-h) + 1rem) var(--s-md) var(--s-md);
  overflow-y:auto;
  height:100dvh;
}
@supports not (height:100dvh){ .mobile-nav{height:100vh} }
.mobile-nav.is-open{display:flex; flex-direction:column}
.mobile-nav ul{list-style:none; padding:0; margin:0}
.mobile-nav > ul > li{
  border-bottom:1px solid var(--rule);
  opacity:0;
  transform:translateY(14px);
  transition:opacity .45s var(--ease-out), transform .55s var(--ease-out);
}
.mobile-nav.is-open > ul > li{opacity:1; transform:translateY(0)}
.mobile-nav.is-open > ul > li:nth-child(1){transition-delay:.05s}
.mobile-nav.is-open > ul > li:nth-child(2){transition-delay:.1s}
.mobile-nav.is-open > ul > li:nth-child(3){transition-delay:.15s}
.mobile-nav.is-open > ul > li:nth-child(4){transition-delay:.2s}
.mobile-nav.is-open > ul > li:nth-child(5){transition-delay:.25s}
.mobile-nav.is-open > ul > li:nth-child(6){transition-delay:.3s}
.mobile-nav.is-open > ul > li:nth-child(7){transition-delay:.35s}
.mobile-nav.is-open > ul > li:nth-child(8){transition-delay:.4s}
.mobile-nav > ul > li > a, .mobile-nav > ul > li > button{
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem 0;
  font-size:clamp(1.5rem, 4vw + .5rem, 2rem);
  font-weight:500;
  letter-spacing:-.02em;
  color:var(--ink);
  text-align:left; width:100%;
  background:transparent; border:none;
  gap:.5rem;
}
.mobile-nav .mn-chev{
  width:14px; height:14px;
  color:var(--muted);
  transition:transform .25s var(--ease-out);
  flex-shrink:0;
}
.mobile-nav .mn-chev svg{width:100%; height:100%; stroke:currentColor; stroke-width:1.8; fill:none}
.mobile-nav .mn-expand[aria-expanded="true"] .mn-chev{ transform:rotate(180deg) }
.mobile-nav .mn-panel{
  max-height:0; overflow:hidden;
  transition:max-height .35s var(--ease-out);
}
.mobile-nav .mn-expand[aria-expanded="true"] + .mn-panel{ max-height:700px }
.mobile-nav .mn-panel ul{
  padding:0 0 1rem;
  display:grid; gap:.1rem;
}
.mobile-nav .mn-panel a{
  display:block;
  padding:.6rem 0 .6rem 1rem;
  font-size:var(--f-md);
  color:var(--ink);
  opacity:.82;
  border-left:2px solid var(--rule);
}
.mobile-nav .mn-panel a:hover{ opacity:1; border-left-color:var(--ink) }
.mobile-nav .mn-sub{
  font-size:var(--f-sm);
  color:var(--muted);
  font-weight:400;
  padding:.4rem 0 .9rem 0;
  display:block;
}
.mobile-nav .mn-sticky{
  margin-top:auto;
  padding-top:var(--s-sm);
  position:sticky;
  bottom:0;
  background:linear-gradient(180deg, transparent 0, rgba(255,255,255,.95) 24px);
  padding-bottom:max(var(--s-sm), env(safe-area-inset-bottom));
}
.mobile-nav .mn-sticky .btn{width:100%; font-size:var(--f-md)}
.mobile-nav-close{
  position:fixed; top:1rem; right:1rem;
  z-index:100;
  width:44px; height:44px;
  border-radius:999px;
  display:grid; place-items:center;
  background:var(--fog);
  color:var(--ink);
}

/* --------------------------- reveal-on-scroll --------------------------- */
.reveal{
  opacity:0;
  transform:translateY(12px);
  transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.reveal.is-in{opacity:1; transform:translateY(0)}
.reveal-delay-1{transition-delay:.06s}
.reveal-delay-2{transition-delay:.12s}
.reveal-delay-3{transition-delay:.18s}
.reveal-delay-4{transition-delay:.24s}
.reveal-stagger > *{
  opacity:0;
  transform:translateY(12px);
  transition:opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.reveal-stagger.is-in > *{opacity:1; transform:translateY(0)}
.reveal-stagger.is-in > *:nth-child(1){transition-delay:.02s}
.reveal-stagger.is-in > *:nth-child(2){transition-delay:.08s}
.reveal-stagger.is-in > *:nth-child(3){transition-delay:.14s}
.reveal-stagger.is-in > *:nth-child(4){transition-delay:.20s}
.reveal-stagger.is-in > *:nth-child(5){transition-delay:.26s}
.reveal-stagger.is-in > *:nth-child(6){transition-delay:.32s}
.reveal-stagger.is-in > *:nth-child(7){transition-delay:.38s}
.reveal-stagger.is-in > *:nth-child(8){transition-delay:.44s}

/* --------------------------- hero --------------------------- */
.hero{
  position:relative;
  min-height:92vh;
  display:grid; place-items:center;
  text-align:center;
  padding-block:var(--s-xl) var(--s-lg);
  overflow:hidden;
}
.hero-bg{
  position:absolute; inset:0;
  z-index:-1;
  will-change:transform;
}
.hero-bg img{
  width:100%; height:100%; object-fit:cover;
}
.hero-bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,.40) 100%);
}
.hero-inner{
  position:relative;
  color:var(--paper);
  padding-inline:var(--s-md);
  max-width:960px;
}
.hero-inner .eyebrow{color:#fff; opacity:.9}
.hero-title{font-weight:600; letter-spacing:-.035em; line-height:1}
.hero-sub{
  margin:var(--s-sm) auto var(--s-md);
  font-size:var(--f-lg);
  max-width:620px;
  color:rgba(255,255,255,.92);
}

.hero-light{
  background:var(--fog);
  color:var(--ink);
  min-height:auto;
  padding-block:var(--s-xl);
}
.hero-light .hero-inner{color:var(--ink)}

/* --------------------------- tile / product grid --------------------------- */
.tile-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:var(--s-sm);
}
@media (max-width:768px){
  .tile-grid{grid-template-columns:1fr}
}
.tile{
  position:relative;
  border-radius:22px;
  overflow:hidden;
  background:var(--fog);
  min-height:540px;
  display:flex; flex-direction:column; justify-content:flex-start;
  padding:var(--s-md);
  text-align:center;
  isolation:isolate;
}
.tile.dark{background:var(--ink); color:var(--paper)}
.tile.wide{grid-column:1 / -1}
.tile-head{
  position:relative; z-index:2;
  padding-top:var(--s-sm);
}
.tile-head .eyebrow{color:var(--accent)}
.tile.dark .tile-head .eyebrow{color:#6db3ff}
.tile-head h3{font-size:clamp(1.75rem, 2.5vw + 1rem, 2.6rem); letter-spacing:-.025em; line-height:1.05}
.tile-sub{color:var(--muted); max-width:42ch; margin-inline:auto}
.tile.dark .tile-sub{color:#a1a1a6}
.tile-cta{margin-top:1rem; display:inline-flex; gap:.75rem; flex-wrap:wrap; justify-content:center}
.tile-media{
  position:relative; z-index:1;
  margin-top:auto;
  width:100%;
  aspect-ratio: 16 / 11;
  overflow:hidden;
  border-radius:14px;
}
.tile-media img{width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease-out)}
.tile:hover .tile-media img{transform:scale(1.03)}
.tile.wide .tile-media{aspect-ratio: 21 / 9}

/* --------------------------- card --------------------------- */
.card{
  background:var(--paper);
  border-radius:18px;
  border:1px solid var(--rule);
  padding:var(--s-md);
  transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s var(--ease-out);
}
.card:hover{box-shadow:var(--shadow-lift); border-color:transparent; transform:translateY(-2px)}
.card h4{margin-bottom:.4em}
.card-media{
  border-radius:14px; overflow:hidden;
  margin-bottom:var(--s-sm);
  aspect-ratio: 4/3;
  background:var(--fog);
}
.card-media img{width:100%; height:100%; object-fit:cover}
.card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:var(--s-sm);
}
.card-grid.three{grid-template-columns:repeat(3, 1fr)}
@media (max-width:900px){.card-grid.three{grid-template-columns:repeat(2, 1fr)}}
@media (max-width:600px){.card-grid.three{grid-template-columns:1fr}}

/* --------------------------- chips --------------------------- */
.chip-row{
  display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center;
}
.chip{
  display:inline-flex; align-items:center; gap:.3rem;
  padding:.5rem 1rem;
  border-radius:980px;
  background:var(--paper);
  border:1px solid var(--mist);
  font-size:var(--f-sm);
  color:var(--ink);
  transition:background .2s, border-color .2s, color .2s;
  cursor:pointer;
}
.chip:hover{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.chip.is-active{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.section.dark .chip{background:transparent; border-color:#3a3a3c; color:var(--paper)}
.section.dark .chip:hover{background:var(--paper); color:var(--ink)}

/* --------------------------- testimonials --------------------------- */
.quote{
  font-size:var(--f-lg);
  line-height:1.45;
  letter-spacing:-.005em;
  color:var(--ink);
}
.quote-cite{
  display:block;
  margin-top:1rem;
  font-size:var(--f-sm);
  color:var(--muted);
}
.quote-big{
  font-size:clamp(1.5rem, 2.5vw + .5rem, 2.3rem);
  line-height:1.25;
  letter-spacing:-.015em;
  font-weight:500;
}
.stars{
  display:inline-flex; gap:2px;
  color:#ff9f0a;
  font-size:var(--f-sm);
  letter-spacing:.05em;
  margin-bottom:.75rem;
}
.stars-svg{display:inline-flex; gap:2px; color:#ff9f0a}
.stars-svg svg{width:18px; height:18px; fill:currentColor}

/* aggregate rating widget */
.agg-rating{
  display:flex; flex-direction:column; align-items:center; gap:.4rem;
  padding:1.2rem 1.5rem;
  border-radius:16px;
  background:var(--paper);
  border:1px solid var(--rule);
  margin:0 auto var(--s-md);
  max-width:520px;
  text-align:center;
}
.agg-rating .agg-top{
  display:flex; align-items:center; gap:.8rem;
  font-size:var(--f-lg); font-weight:600; letter-spacing:-.01em;
}
.agg-rating .agg-num{font-size:var(--f-xl); font-weight:600; letter-spacing:-.02em; color:var(--ink); line-height:1}
.agg-rating .agg-sub{color:var(--muted); font-size:var(--f-sm)}
.agg-rating .agg-sources{color:var(--ink); font-size:var(--f-xs); letter-spacing:.06em; text-transform:uppercase; display:flex; gap:.7rem; flex-wrap:wrap; justify-content:center; margin-top:.3rem; color:var(--muted)}

/* --------------------------- 12-step process --------------------------- */
.step-list{
  list-style:none; padding:0; margin:0;
  counter-reset:step;
}
.step-list li{
  counter-increment:step;
  padding:1.5rem 0;
  border-top:1px solid var(--rule);
  display:grid;
  grid-template-columns:56px 40px 1fr;
  gap:var(--s-sm);
  align-items:baseline;
}
.step-list li:last-child{border-bottom:1px solid var(--rule)}
.step-list li::before{
  content:counter(step, decimal-leading-zero);
  font-variant-numeric:tabular-nums;
  font-size:var(--f-sm);
  color:var(--muted);
  letter-spacing:.06em;
}
.step-list .step-icon{
  width:40px; height:40px;
  display:grid; place-items:center;
  color:var(--ink);
}
.step-list .step-icon svg{width:32px; height:32px; stroke:currentColor; stroke-width:1.3; fill:none; stroke-linecap:round; stroke-linejoin:round}
.step-list h4{margin:0 0 .3em}
.step-list p{color:var(--muted); margin:0}

/* sticky duo */
.sticky-duo{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--s-lg);
  align-items:start;
}
.sticky-duo > .stick{
  position:sticky; top:calc(var(--header-h) + var(--utility-h) + 2rem);
  aspect-ratio:4 / 5;
  border-radius:22px;
  overflow:hidden;
  background:var(--fog);
}
.sticky-duo > .stick img{width:100%; height:100%; object-fit:cover; transition:opacity .5s var(--ease-out)}
.sticky-duo .steps h3{
  font-size:var(--f-2xl);
  margin-bottom:var(--s-md);
}
@media (max-width:880px){
  .sticky-duo{grid-template-columns:1fr; gap:var(--s-md)}
  .sticky-duo > .stick{position:relative; top:auto}
  .step-list li{grid-template-columns:44px 36px 1fr; gap:.8rem}
}

/* --------------------------- before / after static grid --------------------------- */
.ba-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--s-sm);
}
.ba-grid figure{margin:0; position:relative; border-radius:18px; overflow:hidden}
.ba-grid figcaption{
  position:absolute; top:12px; left:12px;
  background:rgba(29,29,31,.88); color:var(--paper);
  padding:.3rem .75rem; border-radius:980px;
  font-size:var(--f-xs); letter-spacing:.06em; text-transform:uppercase;
}
.ba-grid img{aspect-ratio:1/1; object-fit:cover; width:100%}
@media (max-width:600px){.ba-grid{grid-template-columns:1fr}}

/* --------------------------- before / after slider --------------------------- */
.ba-slider{
  position:relative;
  width:100%;
  max-width:960px;
  margin:0 auto;
  aspect-ratio:16/10;
  border-radius:22px;
  overflow:hidden;
  background:var(--ink);
  user-select:none;
  touch-action:pan-y;
}
.ba-slider img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  pointer-events:none;
}
.ba-slider .ba-after-wrap{
  position:absolute; inset:0;
  overflow:hidden;
  clip-path:inset(0 0 0 50%);
  transition:clip-path .15s var(--ease-out);
  will-change:clip-path;
}
.ba-slider .ba-label{
  position:absolute; top:14px;
  background:rgba(29,29,31,.82);
  color:var(--paper);
  padding:.3rem .75rem;
  border-radius:980px;
  font-size:var(--f-xs); letter-spacing:.06em; text-transform:uppercase;
  z-index:3;
  pointer-events:none;
}
.ba-slider .ba-label-before{left:14px}
.ba-slider .ba-label-after{right:14px}
.ba-slider .ba-handle{
  position:absolute; top:0; bottom:0;
  left:50%;
  width:2px;
  background:var(--paper);
  transform:translateX(-50%);
  z-index:4;
  pointer-events:none;
  box-shadow:0 0 20px rgba(0,0,0,.4);
}
.ba-slider .ba-knob{
  position:absolute; top:50%; left:50%;
  width:46px; height:46px;
  border-radius:999px;
  background:var(--paper);
  transform:translate(-50%,-50%);
  display:grid; place-items:center;
  box-shadow:0 4px 18px rgba(0,0,0,.25), 0 0 0 6px rgba(255,255,255,.15);
  z-index:5;
  pointer-events:none;
}
.ba-slider .ba-knob::before,
.ba-slider .ba-knob::after{
  content:"";
  width:7px; height:11px;
  border-right:2px solid var(--ink);
  border-top:2px solid var(--ink);
  transform:rotate(45deg);
  margin:0 1px;
}
.ba-slider .ba-knob::before{transform:rotate(-135deg)}
.ba-slider input[type=range]{
  position:absolute; inset:0;
  width:100%; height:100%;
  opacity:0;
  margin:0;
  cursor:ew-resize;
  z-index:6;
}
.ba-slider:focus-within .ba-knob{box-shadow:0 4px 18px rgba(0,0,0,.25), 0 0 0 6px rgba(0,113,227,.3)}

/* --------------------------- trust row --------------------------- */
.trust-row{
  display:flex; flex-wrap:wrap; gap:var(--s-md);
  justify-content:center; align-items:center;
  padding:1rem 0;
}
.trust-row .trust-item{
  display:inline-flex; align-items:center; gap:.5rem;
  color:var(--muted);
  font-size:var(--f-xs); letter-spacing:.06em; text-transform:uppercase; font-weight:600;
}
.trust-row .trust-item svg{width:24px; height:24px; fill:currentColor; flex-shrink:0; opacity:.85}

/* --------------------------- pricing --------------------------- */
.pricing{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--s-sm);
}
.pricing .card{
  text-align:left;
  padding:2rem;
  display:flex; flex-direction:column; gap:.6rem;
}
.pricing .price{
  font-size:var(--f-2xl); font-weight:600; letter-spacing:-.02em; line-height:1;
}
.pricing .price small{font-size:var(--f-sm); font-weight:400; color:var(--muted); letter-spacing:0}
.pricing ul{padding:0; margin:1rem 0 0; list-style:none}
.pricing ul li{
  padding:.5rem 0;
  border-top:1px solid var(--rule);
  font-size:var(--f-sm);
  color:var(--ink);
}
@media (max-width:900px){
  .pricing{grid-template-columns:1fr; gap:1rem}
}

/* --------------------------- FAQ --------------------------- */
.faq details{
  border-top:1px solid var(--rule);
  padding:1.25rem 0;
  overflow:hidden;
}
.faq details:last-child{border-bottom:1px solid var(--rule)}
.faq summary{
  list-style:none; cursor:pointer;
  font-size:var(--f-lg); font-weight:500;
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  letter-spacing:-.005em;
  padding:.2rem 0;
  transition:color .15s;
}
.faq summary:hover{color:var(--accent)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";
  width:10px; height:10px;
  border-right:2px solid var(--muted);
  border-bottom:2px solid var(--muted);
  transform:rotate(45deg);
  transition:transform .25s var(--ease-out);
  flex-shrink:0;
  margin-right:.3rem;
  margin-top:-4px;
}
.faq details[open] summary::after{transform:rotate(-135deg); margin-top:4px}
.faq details p{
  margin-top:.75rem; color:var(--muted); max-width:720px;
  animation: faqFade .35s var(--ease-out);
}
@keyframes faqFade{
  from{opacity:0; transform:translateY(-4px)}
  to{opacity:1; transform:translateY(0)}
}

/* --------------------------- form --------------------------- */
.field{
  position:relative;
  display:flex; flex-direction:column; gap:.4rem;
  margin-bottom:var(--s-sm);
}
.field label{font-size:var(--f-xs); color:var(--muted); letter-spacing:.04em; text-transform:uppercase; font-weight:600}
.field input, .field select, .field textarea{
  font:inherit; color:var(--ink);
  padding:.9rem 1rem;
  border-radius:12px;
  background:var(--paper);
  border:1px solid var(--mist);
  transition:border-color .2s, background .2s, box-shadow .2s;
  min-height:46px;
  width:100%;
}
.field textarea{min-height:104px; resize:vertical}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(0,113,227,.14);
  outline:none;
}
.field.is-valid input, .field.is-valid select, .field.is-valid textarea{
  border-color:var(--success);
}
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea{
  border-color:var(--danger);
}
.field-icon{
  position:absolute; right:12px; bottom:13px;
  width:20px; height:20px;
  pointer-events:none;
  opacity:0;
  transition:opacity .2s;
}
.field.is-valid .field-icon.ok{opacity:1; color:var(--success)}
.field.is-invalid .field-icon.err{opacity:1; color:var(--danger)}
.field .field-error{
  font-size:var(--f-xs);
  color:var(--danger);
  min-height:1rem;
  margin-top:-.15rem;
}
.field-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--s-sm)}
@media (max-width:600px){.field-grid{grid-template-columns:1fr}}

/* floating labels */
.field-float{position:relative; margin-bottom:var(--s-sm)}
.field-float input, .field-float select, .field-float textarea{
  font:inherit; color:var(--ink);
  padding:1.35rem 1rem .6rem;
  border-radius:12px;
  background:var(--paper);
  border:1px solid var(--mist);
  transition:border-color .2s, box-shadow .2s;
  min-height:56px;
  width:100%;
}
.field-float textarea{min-height:120px; padding-top:1.5rem}
.field-float label{
  position:absolute;
  left:1rem;
  top:50%;
  transform:translateY(-50%);
  color:var(--muted);
  font-size:var(--f-md);
  letter-spacing:0;
  text-transform:none;
  font-weight:400;
  pointer-events:none;
  background:transparent;
  transition:top .2s var(--ease-out), font-size .2s var(--ease-out), transform .2s var(--ease-out), color .2s;
}
.field-float textarea + label{top:1.2rem; transform:none}
.field-float input:focus + label,
.field-float input:not(:placeholder-shown) + label,
.field-float select:focus + label,
.field-float select:not([value=""]) + label,
.field-float textarea:focus + label,
.field-float textarea:not(:placeholder-shown) + label{
  top:.9rem;
  transform:translateY(-50%);
  font-size:var(--f-xs);
  color:var(--accent);
  letter-spacing:.04em;
  text-transform:uppercase;
  font-weight:600;
}
.field-float textarea:focus + label,
.field-float textarea:not(:placeholder-shown) + label{ top:.5rem }
.field-float input:focus, .field-float select:focus, .field-float textarea:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(0,113,227,.14);
  outline:none;
}
.field-float.is-valid input, .field-float.is-valid select, .field-float.is-valid textarea{border-color:var(--success)}
.field-float.is-invalid input, .field-float.is-invalid select, .field-float.is-invalid textarea{border-color:var(--danger)}
.field-float .field-icon{right:14px; bottom:19px; top:auto}
.field-float .field-error{
  font-size:var(--f-xs); color:var(--danger); padding:.3rem 1rem 0;
  min-height:1rem;
}

/* pill group (window selector) */
.pill-group{
  display:flex; flex-wrap:wrap; gap:.5rem;
  padding:0; margin:0 0 var(--s-sm); list-style:none;
}
.pill-group label{
  position:relative;
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.6rem 1rem;
  border-radius:980px;
  background:var(--paper);
  border:1px solid var(--mist);
  color:var(--ink);
  font-size:var(--f-sm);
  cursor:pointer;
  transition:background .2s, border-color .2s, color .2s;
  font-weight:500;
  min-height:40px;
}
.pill-group label:hover{border-color:var(--ink)}
.pill-group input{position:absolute; opacity:0; width:0; height:0}
.pill-group input:checked + span,
.pill-group label:has(input:checked){background:var(--ink); color:var(--paper); border-color:var(--ink)}

/* button spinner */
.btn .spinner{
  width:16px; height:16px;
  border-radius:999px;
  border:2px solid rgba(255,255,255,.35);
  border-top-color:var(--paper);
  animation: spin .8s linear infinite;
  display:none;
}
.btn.is-loading .spinner{display:inline-block}
.btn.is-loading{pointer-events:none; opacity:.85}
.btn.is-loading .btn-label{opacity:.7}
@keyframes spin{to{transform:rotate(360deg)}}

/* --------------------------- shop --------------------------- */
.shop-layout{
  display:grid; grid-template-columns:280px 1fr; gap:var(--s-md);
  align-items:start;
}
.shop-filters{
  position:sticky; top:calc(var(--header-h) + var(--utility-h) + 1rem);
  background:var(--fog); padding:1.5rem; border-radius:16px;
  font-size:var(--f-sm);
  max-height:calc(100vh - var(--header-h) - var(--utility-h) - 2rem);
  overflow-y:auto;
}
.shop-filters h5{
  font-size:var(--f-xs); letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); font-weight:600;
  margin:1.2rem 0 .6rem;
  display:flex; justify-content:space-between; align-items:center;
}
.shop-filters h5:first-child{margin-top:0}
.shop-filters-head{
  display:flex; justify-content:space-between; align-items:baseline;
  padding-bottom:.8rem;
  border-bottom:1px solid var(--rule);
  margin-bottom:.4rem;
}
.shop-filters-head strong{font-size:var(--f-md); font-weight:600; letter-spacing:-.01em; color:var(--ink)}
.shop-clear{
  background:none; border:none; cursor:pointer;
  color:var(--accent); font-size:var(--f-xs);
  text-decoration:underline; padding:0;
}
.shop-filter-chips{display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.4rem}
.shop-filter-chips label{
  position:relative;
  padding:.4rem .8rem;
  border-radius:980px;
  background:var(--paper);
  border:1px solid var(--mist);
  font-size:var(--f-xs);
  cursor:pointer;
  transition:background .2s, border-color .2s, color .2s;
  line-height:1.2;
}
.shop-filter-chips label:hover{border-color:var(--ink)}
.shop-filter-chips input{position:absolute; opacity:0; pointer-events:none; width:0; height:0}
.shop-filter-chips label:has(input:checked){
  background:var(--ink); color:var(--paper); border-color:var(--ink);
}
.shop-filter-range{display:flex; flex-direction:column; gap:.4rem}
.shop-filter-range input[type=range]{width:100%; accent-color:var(--accent)}
.shop-filter-range .rng-label{display:flex; justify-content:space-between; color:var(--muted); font-size:var(--f-xs)}

.shop-filter-toggle{
  display:none;
  background:var(--fog); border:1px solid var(--mist);
  padding:.7rem 1.2rem; border-radius:980px;
  font-size:var(--f-sm); font-weight:500;
  margin-bottom:1rem;
  width:100%; text-align:left;
}

.shop-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--s-sm)}
.product{
  position:relative;
  border-radius:16px;
  background:var(--paper);
  border:1px solid var(--rule);
  padding:1rem;
  display:flex; flex-direction:column; gap:.5rem;
  transition:box-shadow .3s var(--ease-out), transform .3s var(--ease-out), border-color .3s var(--ease-out);
}
.product:hover{box-shadow:var(--shadow-lift); transform:translateY(-2px); border-color:transparent}
.product-img{
  aspect-ratio:1/1;
  border-radius:12px;
  background:linear-gradient(135deg, #efefef 0%, #e2e2e7 100%);
  overflow:hidden;
  position:relative;
}
.product-img img{width:100%; height:100%; object-fit:contain; padding:1.5rem; transition:transform .5s var(--ease-out)}
.product:hover .product-img img{transform:scale(1.04)}
.product-quick{
  position:absolute; top:10px; right:10px;
  width:34px; height:34px;
  border-radius:999px;
  background:rgba(255,255,255,.92);
  display:grid; place-items:center;
  color:var(--ink);
  opacity:0;
  transform:translateY(-4px);
  transition:opacity .2s, transform .2s;
  z-index:2;
}
.product-quick svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2}
.product:hover .product-quick, .product:focus-within .product-quick{opacity:1; transform:translateY(0)}
.product-cat{font-size:var(--f-xs); color:var(--muted); letter-spacing:.06em; text-transform:uppercase; font-weight:600}
.product-name{font-weight:600; letter-spacing:-.01em; font-size:var(--f-md); margin:0}
.product-price{font-size:var(--f-md); font-weight:500; color:var(--ink)}
.product-price .old{color:var(--muted); text-decoration:line-through; margin-right:.35rem; font-weight:400}
.product-row{margin-top:auto; display:flex; justify-content:space-between; align-items:center; gap:.5rem}
.product-add{
  opacity:0;
  transform:translateY(4px);
  transition:opacity .2s, transform .2s;
  pointer-events:none;
}
.product:hover .product-add, .product:focus-within .product-add{opacity:1; transform:translateY(0); pointer-events:auto}
.product .btn{padding:.4rem 1rem; min-height:34px; font-size:var(--f-sm)}
@media (max-width:900px){
  .shop-grid{grid-template-columns:repeat(2, 1fr)}
  .shop-layout{grid-template-columns:1fr}
  .shop-filters{
    position:relative; top:auto;
    max-height:none; overflow:visible;
    display:none;
  }
  .shop-filters.is-open{display:block}
  .shop-filter-toggle{display:block}
  .product-add{opacity:1; transform:none; pointer-events:auto}
  .product-quick{opacity:1; transform:none}
}
@media (max-width:520px){.shop-grid{grid-template-columns:1fr}}

/* quick view modal */
.qv-overlay{
  position:fixed; inset:0; z-index:210;
  background:rgba(29,29,31,.6);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  display:none; opacity:0;
  transition:opacity .2s;
  padding:var(--s-md);
  overflow-y:auto;
}
.qv-overlay.is-open{display:grid; opacity:1; place-items:center}
.qv-card{
  width:min(720px, 100%);
  background:var(--paper);
  border-radius:22px;
  padding:var(--s-md);
  display:grid; grid-template-columns:1fr 1fr; gap:var(--s-md);
  align-items:start;
  max-height:90vh; overflow:auto;
}
.qv-card img{aspect-ratio:1/1; object-fit:contain; background:var(--fog); border-radius:14px; padding:1.5rem}
.qv-card h3{margin:0 0 .4em}
.qv-close{position:absolute; top:1rem; right:1rem; width:36px; height:36px; border-radius:999px; background:var(--fog); display:grid; place-items:center}
@media (max-width:620px){ .qv-card{grid-template-columns:1fr} }

/* --------------------------- appointment split --------------------------- */
.split{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--s-lg);
  align-items:start;
}
@media (max-width:880px){
  .split{grid-template-columns:1fr; gap:var(--s-md)}
}
.big-step{
  display:grid; grid-template-columns:auto 56px 1fr; gap:1.25rem;
  padding:1.5rem 0;
  border-top:1px solid var(--rule);
  align-items:start;
}
.big-step:last-child{border-bottom:1px solid var(--rule)}
.big-step .num{
  font-size:clamp(3rem, 5.5vw, 4.5rem);
  font-weight:600; letter-spacing:-.035em;
  color:var(--accent); line-height:.95; font-variant-numeric:tabular-nums;
}
.big-step .step-svg{
  width:56px; height:56px;
  color:var(--ink);
}
.big-step .step-svg svg{width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round}
.big-step h4{margin:0 0 .3em; font-size:var(--f-lg)}
.big-step p{margin:0; color:var(--muted)}
@media (max-width:520px){
  .big-step{grid-template-columns:auto 40px 1fr; gap:.8rem}
  .big-step .step-svg{width:40px; height:40px}
}

.form-card{
  background:var(--paper);
  border:1px solid var(--rule);
  border-radius:22px;
  padding:var(--s-md);
  box-shadow:var(--shadow-soft);
}

/* --------------------------- marquee --------------------------- */
.marquee{
  display:flex; gap:var(--s-sm);
  overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:1rem;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
.marquee::-webkit-scrollbar{height:8px}
.marquee::-webkit-scrollbar-thumb{background:var(--mist); border-radius:99px}
.marquee > *{
  flex:0 0 min(440px, 85%);
  scroll-snap-align:start;
}

/* --------------------------- map --------------------------- */
.map{
  aspect-ratio: 16/10;
  border-radius:18px;
  background:
    linear-gradient(180deg, #eef2f6 0%, #e5ecf3 100%);
  position:relative;
  overflow:hidden;
  border:1px solid var(--rule);
}
.map::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(0,113,227,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,113,227,.07) 1px, transparent 1px);
  background-size: 32px 32px;
}
.map::after{
  content:"Service Area";
  position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);
  padding:.5rem 1.2rem;
  background:var(--ink); color:var(--paper);
  border-radius:980px;
  font-size:var(--f-sm); letter-spacing:.02em;
}
.map .pin{
  position:absolute;
  width:14px; height:14px; border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 5px rgba(0,113,227,.2), 0 0 0 16px rgba(0,113,227,.08);
}
.map .pin::after{
  content:""; position:absolute; top:-34px; left:50%;
  width:2px; height:26px; background:var(--accent);
  transform:translateX(-50%);
}
.map .pin-1{top:42%; left:28%}
.map .pin-2{top:60%; left:64%}

/* stylized city SVG map (palo alto) */
.city-map{
  aspect-ratio:4/3;
  border-radius:18px;
  background:linear-gradient(180deg, #eef2f6 0%, #e5ecf3 100%);
  position:relative;
  overflow:hidden;
  border:1px solid var(--rule);
}
.city-map svg{width:100%; height:100%; display:block}
.city-map-overlay{
  position:absolute; top:1rem; left:1rem;
  background:rgba(255,255,255,.94);
  padding:.5rem .9rem; border-radius:999px;
  font-size:var(--f-xs); font-weight:600; color:var(--ink);
  letter-spacing:.02em;
  box-shadow:var(--shadow-soft);
}

/* hyperlocal card */
.hyperlocal{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:0;
  border:1px solid var(--rule);
  border-radius:18px;
  overflow:hidden;
  background:var(--paper);
}
.hyperlocal > div{
  padding:1.25rem 1.2rem;
  border-right:1px solid var(--rule);
}
.hyperlocal > div:last-child{border-right:none}
.hyperlocal h5{
  font-size:var(--f-xs); letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); font-weight:600;
  margin:0 0 .5rem;
}
.hyperlocal .hl-val{
  font-size:var(--f-lg); font-weight:600; letter-spacing:-.01em;
  line-height:1.2; margin-bottom:.2rem;
}
.hyperlocal .hl-sub{font-size:var(--f-sm); color:var(--muted); line-height:1.4}
@media (max-width:900px){
  .hyperlocal{grid-template-columns:repeat(2, 1fr)}
  .hyperlocal > div:nth-child(even){border-right:none}
  .hyperlocal > div:nth-child(-n+2){border-bottom:1px solid var(--rule)}
}
@media (max-width:520px){
  .hyperlocal{grid-template-columns:1fr}
  .hyperlocal > div{border-right:none; border-bottom:1px solid var(--rule)}
  .hyperlocal > div:last-child{border-bottom:none}
}

/* --------------------------- stats band --------------------------- */
.stats-band{
  display:grid; grid-template-columns:repeat(4, 1fr);
  gap:var(--s-sm);
  text-align:center;
  padding-block:var(--s-md);
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
}
.stats-band .stat-num{
  font-size:clamp(1.8rem, 3vw + .5rem, 3rem);
  font-weight:600; letter-spacing:-.03em;
  line-height:1;
  font-variant-numeric:tabular-nums;
}
.stats-band .stat-label{
  color:var(--muted); font-size:var(--f-sm); margin-top:.3rem;
}
@media (max-width:600px){
  .stats-band{grid-template-columns:repeat(2, 1fr); gap:1.5rem}
}

/* --------------------------- CTA band --------------------------- */
.cta-band{
  padding-block:var(--s-xl);
  text-align:center;
  background:var(--ink);
  color:var(--paper);
}
.cta-band h2{font-size:clamp(2rem, 4vw + .5rem, 3.5rem); letter-spacing:-.03em}
.cta-band .muted{color:#a1a1a6}

/* --------------------------- footer --------------------------- */
.site-footer{
  background:var(--fog);
  color:var(--ink);
  font-size:var(--f-sm);
  padding-top:0;
}

/* newsletter band */
.footer-newsletter{
  background:var(--paper);
  border-bottom:1px solid var(--rule);
  padding-block:var(--s-md);
}
.footer-newsletter-inner{
  max-width:var(--w-wide);
  margin:0 auto;
  padding-inline:var(--s-md);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--s-md);
  align-items:center;
}
.footer-newsletter h3{
  margin:0;
  font-size:clamp(1.4rem, 2vw + .6rem, 2rem);
  letter-spacing:-.02em;
}
.footer-newsletter p{
  margin:.4rem 0 0;
  color:var(--muted);
  font-size:var(--f-sm);
}
.footer-newsletter-form{
  display:flex; gap:.5rem;
  width:100%;
}
.footer-newsletter-form input{
  flex:1;
  font:inherit;
  padding:.85rem 1rem;
  border-radius:980px;
  background:var(--paper);
  border:1px solid var(--mist);
  min-height:46px;
}
.footer-newsletter-form input:focus{border-color:var(--accent); outline:none; box-shadow:0 0 0 4px rgba(0,113,227,.14)}
@media (max-width:800px){
  .footer-newsletter-inner{grid-template-columns:1fr; gap:1.2rem}
}

.footer-main{
  padding-block:var(--s-lg) var(--s-md);
}
.footer-cols{
  display:grid;
  grid-template-columns:1.15fr 1fr 1fr 1fr 1.1fr;
  gap:var(--s-md);
  margin-bottom:var(--s-md);
}
.footer-cols h5{
  font-size:var(--f-xs); letter-spacing:.08em; text-transform:uppercase;
  margin:0 0 .85rem;
  color:var(--muted);
}
.footer-cols h5 + h5{margin-top:1.1rem}
.footer-cols ul{list-style:none; padding:0; margin:0}
.footer-cols li{margin-bottom:.45rem}
.footer-cols a{color:var(--ink); opacity:.82; transition:opacity .15s, color .15s}
.footer-cols a:hover{opacity:1; color:var(--accent)}
.footer-cols .chip{font-size:var(--f-xs); padding:.3rem .7rem; background:var(--paper); border-color:var(--rule); margin-bottom:.35rem}
.nap{
  background:var(--paper);
  border-radius:14px;
  padding:.9rem 1.1rem;
  margin-bottom:.8rem;
  border:1px solid var(--rule);
  position:relative;
}
.nap strong{display:block; margin-bottom:.2rem; letter-spacing:-.005em}
.nap a{color:var(--accent); opacity:1}
.nap-address{color:var(--muted); line-height:1.45; font-size:var(--f-xs); margin-bottom:.3rem}
.nap .open-dot{
  display:inline-flex; align-items:center; gap:.35rem;
  font-size:var(--f-xs); margin-top:.4rem;
  color:var(--muted);
}
.nap .open-dot::before{
  content:""; width:8px; height:8px;
  border-radius:999px; background:var(--mist);
  display:inline-block;
}
.nap .open-dot.is-open::before{
  background:var(--success);
  box-shadow:0 0 0 3px rgba(43,138,62,.2);
  animation:pulse 2s ease-in-out infinite;
}
.nap .open-dot.is-open{color:var(--success); font-weight:600}
@keyframes pulse{
  0%, 100%{box-shadow:0 0 0 3px rgba(43,138,62,.2)}
  50%{box-shadow:0 0 0 5px rgba(43,138,62,.12)}
}

.ig-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:8px;
  margin-top:.4rem;
  max-width:220px;
}
.ig-grid a{
  aspect-ratio:1/1;
  background:var(--paper);
  border-radius:8px;
  overflow:hidden;
  opacity:1;
  transition:opacity .2s, transform .3s var(--ease-out);
  display:block;
}
.ig-grid a:hover{opacity:.85; transform:scale(1.03)}
.ig-grid img{width:100%; height:100%; object-fit:cover; display:block}

.social-row{display:flex; gap:8px; margin-top:1rem}
.social-row a{
  width:40px; height:40px;
  display:grid; place-items:center;
  border-radius:999px;
  background:var(--paper);
  border:1px solid var(--mist);
  color:var(--ink);
  transition:border-color .15s, color .15s, transform .15s var(--ease-spring);
  opacity:1;
}
.social-row a:hover, .social-row a:focus-visible{
  border-color:var(--ink);
  color:var(--accent);
  transform:scale(1.02);
}
.social-row svg{
  width:20px; height:20px;
  stroke:currentColor; stroke-width:1.5;
  fill:none; stroke-linecap:round; stroke-linejoin:round;
}
.footer-tag{font-size:var(--f-xs); color:var(--muted); margin-top:.6rem}

/* footer logo */
.footer-logo{
  display:inline-flex;
  margin-bottom:1rem;
}
.footer-logo img{
  height:48px; width:auto;
  display:block;
}

/* trust + payments bands */
.footer-trust{
  border-top:1px solid var(--rule);
  padding-block:1.6rem;
}
.footer-trust-inner{
  max-width:var(--w-wide); margin:0 auto; padding-inline:var(--s-md);
  display:flex; flex-wrap:wrap; gap:0; justify-content:center; align-items:center;
}
.trust-mark{
  flex:1 1 auto;
  min-width:120px;
  max-width:180px;
  height:28px;
  display:flex; align-items:center; justify-content:center;
  padding:0 1rem;
  color:color-mix(in srgb, var(--ink) 55%, transparent);
  border-right:1px solid var(--mist);
}
.trust-mark:last-child{ border-right:none }
@media (max-width:720px){
  .trust-mark{ border-right:none; flex:0 0 auto; min-width:0; padding:.4rem .8rem }
}
.trust-mark svg{
  height:28px; width:auto;
  max-width:80px;
  stroke:currentColor; stroke-width:1.5;
  fill:none; stroke-linecap:round; stroke-linejoin:round;
}
.trust-mark .trust-text{
  font-size:11px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:currentColor;
  white-space:nowrap;
  font-family:var(--stack);
}
.trust-mark .trust-badge{
  display:inline-flex; align-items:center;
  padding:4px 8px;
  border:1px solid currentColor;
  border-radius:4px;
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:10px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:currentColor;
  line-height:1;
  white-space:nowrap;
}
.trust-mark .trust-stars{
  display:inline-flex; align-items:center; gap:3px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.04em;
  color:currentColor;
}
.trust-mark .trust-stars-ico{
  display:inline-flex; gap:1px;
}
.trust-mark .trust-stars-ico svg{
  width:10px; height:10px;
  stroke:none; fill:currentColor;
}

.footer-pay{
  border-top:1px solid var(--rule);
  padding-block:1.1rem;
  background:var(--fog);
}
.footer-pay-inner{
  max-width:var(--w-wide); margin:0 auto; padding-inline:var(--s-md);
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center; align-items:center;
  color:var(--muted);
}
.pay-chip{
  display:inline-flex; align-items:center; justify-content:center;
  height:28px;
  padding:4px 8px;
  border:1px solid var(--mist);
  border-radius:6px;
  background:var(--paper);
  color:color-mix(in srgb, var(--ink) 60%, transparent);
}
.pay-chip svg{
  height:20px; width:auto;
  max-width:40px;
  stroke:currentColor; stroke-width:1.5;
  fill:none; stroke-linecap:round; stroke-linejoin:round;
}
.pay-chip .pay-text{
  font-size:10px;
  font-weight:700;
  letter-spacing:.06em;
  font-family:var(--stack);
  color:currentColor;
  line-height:1;
}
.footer-pay .pay-note{
  font-size:var(--f-xs);
  color:var(--muted);
  margin-left:.4rem;
}

/* dark bottom strip */
.footer-bottom{
  background:var(--ink);
  color:#a1a1a6;
}
.footer-bottom-inner{
  max-width:var(--w-wide); margin:0 auto; padding:1.1rem var(--s-md);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem;
  font-size:var(--f-xs);
}
.footer-bottom a{color:#a1a1a6; transition:color .15s}
.footer-bottom a:hover{color:var(--paper)}
.footer-bottom .fb-links{display:flex; gap:1.2rem; flex-wrap:wrap}

.badge-est{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.35rem .8rem;
  border-radius:980px;
  background:var(--ink); color:var(--paper);
  font-size:var(--f-xs); font-weight:500; letter-spacing:.04em;
}
@media (max-width:1100px){
  .footer-cols{grid-template-columns:1fr 1fr 1fr; gap:var(--s-md)}
  .footer-cols > :nth-child(1){grid-column:1 / -1}
}
@media (max-width:720px){
  .footer-cols{grid-template-columns:1fr 1fr}
  .footer-cols > :nth-child(1){grid-column:1 / -1}
}
@media (max-width:480px){
  .footer-cols{grid-template-columns:1fr}
  .footer-cols > :nth-child(1){grid-column:auto}
}

/* --------------------------- back to top --------------------------- */
.to-top{
  position:fixed;
  bottom:calc(var(--s-sm) + env(safe-area-inset-bottom));
  right:var(--s-sm);
  z-index:90;
  width:44px; height:44px;
  border-radius:999px;
  background:var(--accent);
  color:var(--paper);
  display:grid; place-items:center;
  box-shadow:var(--shadow-lift);
  opacity:0;
  transform:translateY(10px) scale(.9);
  pointer-events:none;
  transition:opacity .25s var(--ease-out), transform .3s var(--ease-spring), background .2s;
}
.to-top.is-visible{opacity:1; transform:translateY(0) scale(1); pointer-events:auto}
.to-top:hover{background:var(--accent-hover); transform:translateY(-2px) scale(1.02)}
.to-top svg{width:18px; height:18px; stroke:currentColor; stroke-width:2.2; fill:none}

/* --------------------------- utility --------------------------- */
.center{text-align:center}
.stack-sm > * + *{margin-top:var(--s-sm)}
.stack-md > * + *{margin-top:var(--s-md)}
.stack-lg > * + *{margin-top:var(--s-lg)}
.hide-mobile{}
.hide-desktop{display:none}
@media (max-width:768px){
  .hide-mobile{display:none}
  .hide-desktop{display:block}
}
.rule{height:1px; background:var(--rule); margin-block:var(--s-md)}
.local-intro p{font-size:var(--f-lg); line-height:1.5; color:var(--ink); letter-spacing:-.005em}

/* reduce motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0ms !important; transition-duration:0ms !important; animation-iteration-count:1 !important}
  .reveal, .reveal-stagger > *{opacity:1; transform:none}
  .hero-bg{transform:none !important}
  html{scroll-behavior:auto}
}

/* touch / no-hover — disable magnetic */
@media (hover:none){
  .btn, .nav-cta{transform:none !important}
}

/* =========================================================
   Extended components (appended for new pages)
   About, Contact, Pricing, Rug Repair, Process
   ========================================================= */

/* drop-cap long-form */
.longform{font-size:var(--f-lg); line-height:1.6; letter-spacing:-.005em; color:var(--ink)}
.longform p{margin:0 0 1em}
.longform .dropcap::first-letter{
  float:left;
  font-size:4.4em;
  line-height:.9;
  font-weight:600;
  letter-spacing:-.04em;
  margin:.1em .12em 0 -.02em;
  color:var(--ink);
}

/* Milestones — horizontal scroll-snap */
.milestones{
  display:flex;
  gap:var(--s-sm);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding:1.5rem .25rem 2.5rem;
  scrollbar-width:thin;
  -webkit-overflow-scrolling:touch;
}
.milestones::-webkit-scrollbar{height:6px}
.milestones::-webkit-scrollbar-thumb{background:var(--mist); border-radius:99px}
.milestone{
  flex:0 0 min(320px, 78%);
  scroll-snap-align:start;
  border-left:1px solid var(--rule);
  padding:.6rem 1.2rem 0;
  position:relative;
}
.milestone::before{
  content:"";
  position:absolute; top:.95rem; left:-5px;
  width:9px; height:9px; border-radius:999px;
  background:var(--accent);
  box-shadow:0 0 0 4px var(--paper), 0 0 0 5px var(--rule);
}
.milestone .m-year{
  font-size:clamp(2.6rem, 5vw + 1rem, 4rem);
  font-weight:600; letter-spacing:-.035em; line-height:1;
  color:var(--ink); font-variant-numeric:tabular-nums;
}
.milestone .m-label{
  margin:.4rem 0 0;
  font-size:var(--f-md); letter-spacing:-.005em;
  color:var(--ink);
}
.milestone .m-sub{
  color:var(--muted); font-size:var(--f-sm); margin-top:.3rem; line-height:1.45;
}

/* value grid — 3 tiles with icons */
.values-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-sm);
}
@media (max-width:800px){.values-grid{grid-template-columns:1fr}}
.value-tile{
  background:var(--paper);
  border:1px solid var(--rule);
  border-radius:18px;
  padding:var(--s-md);
}
.value-tile .v-ico{
  width:48px; height:48px; border-radius:12px;
  background:var(--fog); color:var(--ink);
  display:grid; place-items:center; margin-bottom:1rem;
}
.value-tile .v-ico svg{width:24px; height:24px; stroke:currentColor; stroke-width:1.5; fill:none; stroke-linecap:round; stroke-linejoin:round}
.value-tile h4{margin:0 0 .35em}
.value-tile p{color:var(--muted); margin:0; line-height:1.5}

/* team grid */
.team-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:var(--s-sm);
}
@media (max-width:880px){.team-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.team-grid{grid-template-columns:1fr}}
.team-card{
  background:var(--paper);
  border:1px solid var(--rule);
  border-radius:18px;
  overflow:hidden;
  transition:box-shadow .3s var(--ease-out), transform .3s var(--ease-out), border-color .2s;
}
.team-card:hover{box-shadow:var(--shadow-lift); border-color:transparent; transform:translateY(-2px)}
.team-photo{
  aspect-ratio:4/5;
  background:linear-gradient(135deg,#e9e9ee 0%, #d8d8e0 100%);
  position:relative;
  overflow:hidden;
}
.team-photo::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 50% 36%, rgba(255,255,255,.7) 0 55px, transparent 56px),
    radial-gradient(ellipse at 50% 95%, rgba(255,255,255,.5) 0 80px, transparent 82px);
}
.team-body{padding:1.1rem 1.2rem 1.3rem}
.team-name{font-weight:600; letter-spacing:-.01em; font-size:var(--f-md); margin:0 0 .1em}
.team-role{font-size:var(--f-xs); letter-spacing:.06em; text-transform:uppercase; color:var(--accent); font-weight:600; margin:0}
.team-tenure{color:var(--muted); font-size:var(--f-sm); margin-top:.4rem}

/* certifications row — inline large */
.cert-row{
  display:grid; grid-template-columns:repeat(5,1fr); gap:0;
  border:1px solid var(--rule); border-radius:18px; overflow:hidden;
  background:var(--paper);
}
.cert-row .cert{
  padding:1.5rem 1rem; text-align:center;
  border-right:1px solid var(--rule);
  display:flex; flex-direction:column; gap:.4rem; align-items:center;
}
.cert-row .cert:last-child{border-right:none}
.cert-row .cert-mark{
  font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink);
  padding:6px 12px; border:1px solid var(--ink); border-radius:6px;
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  line-height:1.1;
}
.cert-row .cert-label{font-size:var(--f-xs); color:var(--muted)}
@media (max-width:880px){
  .cert-row{grid-template-columns:repeat(2,1fr)}
  .cert-row .cert:nth-child(2n){border-right:none}
  .cert-row .cert{border-bottom:1px solid var(--rule)}
}
@media (max-width:520px){
  .cert-row{grid-template-columns:1fr}
  .cert-row .cert{border-right:none}
}

/* location-card (two big side-by-side) */
.location-cards{display:grid; grid-template-columns:1fr 1fr; gap:var(--s-sm)}
@media (max-width:800px){.location-cards{grid-template-columns:1fr}}
.location-card{
  background:var(--paper); border:1px solid var(--rule); border-radius:18px;
  padding:var(--s-md);
}
.location-card .eyebrow{margin-bottom:.6rem}
.location-card h3{font-size:var(--f-xl); margin-bottom:.5em}
.location-card .l-meta{color:var(--muted); line-height:1.6; font-size:var(--f-sm); margin-bottom:1rem}
.location-card .l-meta strong{color:var(--ink); font-weight:600}
.location-card .open-dot{margin-bottom:1rem}
.location-card .btn{padding:.55rem 1.2rem}

/* alt channel row */
.alt-channels{
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-sm);
}
@media (max-width:700px){.alt-channels{grid-template-columns:repeat(2,1fr)}}
.alt-ch{
  background:var(--paper); border:1px solid var(--rule); border-radius:14px;
  padding:1.2rem 1rem;
  display:flex; gap:.8rem; align-items:center;
  transition:border-color .2s, box-shadow .3s;
  color:var(--ink);
}
.alt-ch:hover{border-color:var(--ink); box-shadow:var(--shadow-soft)}
.alt-ch .ac-ico{
  width:36px; height:36px; border-radius:10px; background:var(--fog); color:var(--ink);
  display:grid; place-items:center; flex-shrink:0;
}
.alt-ch .ac-ico svg{width:18px; height:18px; stroke:currentColor; stroke-width:1.5; fill:none; stroke-linecap:round; stroke-linejoin:round}
.alt-ch .ac-name{font-weight:500; font-size:var(--f-sm); margin:0}
.alt-ch .ac-sub{color:var(--muted); font-size:var(--f-xs); margin-top:.15rem}

/* pricing table */
.price-table{
  width:100%; border-collapse:collapse;
  font-size:var(--f-sm);
}
.price-table thead{
  position:sticky; top:calc(var(--header-h) + var(--utility-h));
  background:var(--paper);
  z-index:5;
}
.price-table th{
  text-align:left; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  font-size:var(--f-xs); color:var(--muted);
  padding:1rem .9rem; border-bottom:1px solid var(--rule);
  background:var(--paper);
}
.price-table td{
  padding:1rem .9rem;
  border-bottom:1px solid var(--rule);
  letter-spacing:-.005em;
}
.price-table tbody tr:nth-child(even) td{background:var(--fog)}
.price-table tbody tr:hover td{background:rgba(0,113,227,.05)}
.price-table .rt-name{font-weight:600; color:var(--ink); letter-spacing:-.01em}
.price-table .rt-meta{color:var(--muted); font-size:var(--f-xs); display:block; margin-top:.15rem}
.price-table .rt-price{font-variant-numeric:tabular-nums; font-weight:500; color:var(--ink)}
.price-table .rt-turn{color:var(--muted)}
@media (max-width:720px){
  .price-table thead{display:none}
  .price-table, .price-table tbody, .price-table tr, .price-table td{display:block; width:100%}
  .price-table tbody tr{
    background:var(--paper); border:1px solid var(--rule); border-radius:14px;
    padding:.8rem 1rem; margin-bottom:.7rem;
  }
  .price-table tbody tr:nth-child(even) td{background:transparent}
  .price-table td{padding:.4rem 0; border:none; display:flex; justify-content:space-between; gap:.8rem}
  .price-table td::before{
    content:attr(data-th);
    font-size:var(--f-xs); color:var(--muted); letter-spacing:.04em; text-transform:uppercase;
    font-weight:600;
  }
}

/* pricing included panel */
.incl-panel{
  background:var(--fog); border-radius:18px; padding:var(--s-md);
  display:grid; grid-template-columns:1fr 1fr; gap:1rem 2rem;
}
@media (max-width:600px){.incl-panel{grid-template-columns:1fr}}
.incl-panel .incl-item{
  display:flex; gap:.7rem; align-items:flex-start;
  font-size:var(--f-sm); color:var(--ink);
}
.incl-panel .incl-item svg{
  width:20px; height:20px; color:var(--accent);
  flex-shrink:0; margin-top:2px;
  stroke:currentColor; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round;
}
.incl-panel .incl-item strong{display:block; color:var(--ink); font-weight:600; margin-bottom:.1rem}
.incl-panel .incl-item .incl-sub{color:var(--muted); font-size:var(--f-xs)}

/* addons grid */
.addons-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-sm)}
@media (max-width:900px){.addons-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.addons-grid{grid-template-columns:1fr}}
.addon{
  background:var(--paper); border:1px solid var(--rule); border-radius:16px;
  padding:1.2rem;
  display:flex; flex-direction:column; gap:.5rem;
  transition:border-color .2s, box-shadow .3s, transform .3s;
}
.addon:hover{border-color:var(--ink); box-shadow:var(--shadow-soft); transform:translateY(-2px)}
.addon .ad-ico{
  width:40px; height:40px; border-radius:10px;
  background:var(--fog); color:var(--ink);
  display:grid; place-items:center; margin-bottom:.4rem;
}
.addon .ad-ico svg{width:22px; height:22px; stroke:currentColor; stroke-width:1.5; fill:none; stroke-linecap:round; stroke-linejoin:round}
.addon h4{margin:0; font-size:var(--f-md); letter-spacing:-.01em}
.addon .ad-desc{color:var(--muted); font-size:var(--f-sm); line-height:1.45; margin:0}
.addon .ad-price{margin-top:auto; font-weight:600; color:var(--accent); font-size:var(--f-md)}

/* repair services 10-card grid */
.repair-grid{
  display:grid; grid-template-columns:repeat(5,1fr); gap:var(--s-sm);
}
@media (max-width:1100px){.repair-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:720px){.repair-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:460px){.repair-grid{grid-template-columns:1fr}}
.repair-card{
  background:var(--paper); border:1px solid var(--rule); border-radius:16px;
  padding:1.2rem;
  display:flex; flex-direction:column; gap:.5rem;
  color:var(--ink);
  transition:border-color .2s, box-shadow .3s, transform .3s;
  position:relative;
}
.repair-card:hover{border-color:var(--ink); box-shadow:var(--shadow-soft); transform:translateY(-2px)}
.repair-card .rp-ico{
  width:48px; height:48px; border-radius:12px;
  background:var(--fog); color:var(--ink);
  display:grid; place-items:center; margin-bottom:.3rem;
  transition:background .2s, color .2s;
}
.repair-card:hover .rp-ico{background:var(--ink); color:var(--paper)}
.repair-card .rp-ico svg{width:26px; height:26px; stroke:currentColor; stroke-width:1.4; fill:none; stroke-linecap:round; stroke-linejoin:round}
.repair-card h4{margin:0; font-size:var(--f-md); letter-spacing:-.01em}
.repair-card .rp-desc{color:var(--muted); font-size:var(--f-sm); line-height:1.45; margin:0}
.repair-card .rp-meta{
  display:flex; justify-content:space-between; align-items:center;
  margin-top:auto; padding-top:.6rem;
  border-top:1px solid var(--rule);
  font-size:var(--f-xs); color:var(--muted); letter-spacing:.04em; text-transform:uppercase;
}
.repair-card .rp-price{font-weight:600; color:var(--ink); letter-spacing:0; text-transform:none; font-size:var(--f-sm)}

/* case study card */
.case-card{
  background:var(--paper); border:1px solid var(--rule); border-radius:22px;
  overflow:hidden;
  display:grid; grid-template-columns:1.1fr 1fr; gap:0;
}
@media (max-width:880px){.case-card{grid-template-columns:1fr}}
.case-card .case-img{
  aspect-ratio:4/5;
  overflow:hidden;
  background:var(--fog);
}
@media (max-width:880px){.case-card .case-img{aspect-ratio:16/9}}
.case-card .case-img img{width:100%; height:100%; object-fit:cover}
.case-card .case-body{padding:var(--s-md); display:flex; flex-direction:column; gap:.8rem}
.case-card .case-body h3{font-size:var(--f-2xl); margin:0}
.case-card .case-body p{color:var(--muted); margin:0; line-height:1.55; font-size:var(--f-sm)}
.case-stats{
  display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.4rem;
}
.case-stats .stat-chip{
  padding:.45rem .85rem; border-radius:980px; background:var(--fog);
  font-size:var(--f-xs); letter-spacing:.04em; color:var(--ink);
  font-weight:500;
}
.case-stats .stat-chip strong{color:var(--accent); font-weight:700}

/* machine vs hand comparison */
.compare{
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  border:1px solid var(--rule); border-radius:18px; overflow:hidden;
  background:var(--paper);
}
.compare .col-head{
  padding:1.2rem 1.4rem; font-size:var(--f-md); font-weight:600; letter-spacing:-.005em;
  background:var(--fog); color:var(--ink);
}
.compare .col-head.accent{background:var(--ink); color:var(--paper)}
.compare .row{
  padding:.95rem 1.4rem; border-top:1px solid var(--rule);
  font-size:var(--f-sm); line-height:1.5;
  color:var(--ink);
}
.compare .col-mach{border-right:1px solid var(--rule)}
.compare .row.bad{color:var(--muted)}
.compare .row.good{color:var(--ink); font-weight:500}
.compare .row svg{
  width:16px; height:16px; vertical-align:middle; margin-right:.3rem;
  stroke:currentColor; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round;
}
.compare .row.bad svg{color:var(--danger)}
.compare .row.good svg{color:var(--success)}
@media (max-width:720px){
  .compare{grid-template-columns:1fr}
  .compare .col-mach{border-right:none}
  .compare .col-head{border-bottom:1px solid var(--rule)}
}

/* materials grid */
.materials-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-sm);
}
@media (max-width:900px){.materials-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.materials-grid{grid-template-columns:1fr}}
.material{
  background:var(--paper); border:1px solid var(--rule); border-radius:16px; padding:1.4rem 1.2rem;
  display:flex; flex-direction:column; gap:.4rem;
}
.material .mt-ico{
  width:46px; height:46px; border-radius:12px;
  background:var(--fog); color:var(--ink);
  display:grid; place-items:center; margin-bottom:.5rem;
}
.material .mt-ico svg{width:24px; height:24px; stroke:currentColor; stroke-width:1.5; fill:none; stroke-linecap:round; stroke-linejoin:round}
.material h5{font-size:var(--f-md); font-weight:600; margin:0; letter-spacing:-.01em; color:var(--ink); text-transform:none}
.material .mt-spec{color:var(--muted); font-size:var(--f-xs); margin:0; line-height:1.5}

/* turnaround timeline — visual horizontal */
.timeline{
  display:grid; grid-template-columns:repeat(5,1fr); gap:0; margin-top:var(--s-md);
  counter-reset:tl;
}
@media (max-width:780px){.timeline{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.timeline{grid-template-columns:1fr}}
.tl-step{
  padding:1.3rem 1rem;
  border-left:1px solid var(--rule);
  position:relative;
}
.tl-step:first-child{border-left:none}
.tl-step::before{
  counter-increment:tl;
  content:"Day " counter(tl);
  display:block; font-size:var(--f-xs); color:var(--muted);
  letter-spacing:.08em; text-transform:uppercase; font-weight:600;
  margin-bottom:.4rem;
}
.tl-step[data-days]::before{content:attr(data-days)}
.tl-step h5{font-size:var(--f-md); font-weight:600; margin:0 0 .2em; letter-spacing:-.005em}
.tl-step p{color:var(--muted); margin:0; font-size:var(--f-sm); line-height:1.45}

/* guarantee band */
.guarantee{
  text-align:center; padding:var(--s-xl) var(--s-md);
  background:var(--paper);
  position:relative;
}
.guarantee h2{
  font-size:clamp(2rem, 5vw + .5rem, 4rem);
  letter-spacing:-.035em; line-height:1.02; font-weight:600;
  max-width:14ch; margin:0 auto .6em;
}
.guarantee h2 .underline{
  display:inline-block; position:relative;
}
.guarantee h2 .underline::after{
  content:""; position:absolute; left:0; right:0;
  bottom:-4px; height:1px; background:var(--ink);
}
.guarantee .signature{
  font-style:italic;
  color:var(--muted);
  font-size:var(--f-md);
  margin-top:1rem;
}

/* savings banner */
.savings-banner{
  border-radius:22px; overflow:hidden;
  background:linear-gradient(135deg, #0a2a4a 0%, #1d1d1f 100%);
  color:var(--paper);
  padding:var(--s-md);
  display:grid; grid-template-columns:1.2fr 1fr; gap:var(--s-md);
  align-items:center;
}
@media (max-width:720px){.savings-banner{grid-template-columns:1fr}}
.savings-banner .sb-tag{
  display:inline-block; padding:.3rem .8rem; border-radius:999px;
  background:rgba(255,255,255,.1); color:#6db3ff;
  font-size:var(--f-xs); letter-spacing:.1em; text-transform:uppercase; font-weight:600;
  margin-bottom:.8rem;
}
.savings-banner h3{font-size:clamp(1.7rem, 3vw + .6rem, 2.6rem); letter-spacing:-.02em; margin-bottom:.3em; color:var(--paper)}
.savings-banner p{color:rgba(255,255,255,.8); margin-bottom:1rem; font-size:var(--f-md)}
.savings-banner .sb-code{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.6rem 1rem; border-radius:12px;
  background:rgba(255,255,255,.1); color:var(--paper);
  border:1px dashed rgba(255,255,255,.3);
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:var(--f-md); letter-spacing:.06em;
}
.savings-banner .sb-code strong{color:#6db3ff}
.savings-banner .sb-art{
  aspect-ratio:4/3; border-radius:16px;
  background:
    radial-gradient(circle at 30% 30%, rgba(109,179,255,.3), transparent 50%),
    radial-gradient(circle at 70% 80%, rgba(255,159,10,.2), transparent 50%),
    linear-gradient(135deg, #2c3e5d 0%, #0a1a2e 100%);
  position:relative; overflow:hidden;
  display:grid; place-items:center;
  color:#fff; text-align:center;
}
.savings-banner .sb-art .sb-discount{
  font-size:clamp(2.5rem, 5vw, 4.5rem);
  font-weight:700; letter-spacing:-.03em; line-height:1;
}
.savings-banner .sb-art .sb-off{
  font-size:var(--f-md); letter-spacing:.12em; text-transform:uppercase; font-weight:600;
  margin-top:.25rem; opacity:.8;
}

/* process-step (for about milestones icon style) */

/* service-area chips */
.area-band{
  padding:var(--s-lg) var(--s-md);
  text-align:center;
}

/* contact form right-side split */
.contact-split{
  display:grid; grid-template-columns:1.05fr 1fr; gap:var(--s-lg);
  align-items:start;
}
@media (max-width:960px){.contact-split{grid-template-columns:1fr; gap:var(--s-md)}}

/* mini SVG map for locations */
.loc-map{
  aspect-ratio:16/10;
  border-radius:14px;
  background:linear-gradient(180deg,#eef2f6 0%, #e5ecf3 100%);
  position:relative; overflow:hidden; border:1px solid var(--rule);
  margin-bottom:1rem;
}
.loc-map svg{width:100%; height:100%; display:block}
.loc-map .loc-pin{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%, -50%);
  width:16px; height:16px; border-radius:999px;
  background:var(--accent);
  box-shadow:0 0 0 5px rgba(0,113,227,.2), 0 0 0 14px rgba(0,113,227,.08);
}

/* quote modal (pricing page) */
.modal-overlay{
  position:fixed; inset:0; z-index:210;
  background:rgba(29,29,31,.6);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  display:none; opacity:0;
  transition:opacity .2s;
  padding:var(--s-md);
  overflow-y:auto;
}
.modal-overlay.is-open{display:grid; opacity:1; place-items:center}
.modal-card{
  width:min(560px, 100%);
  background:var(--paper); border-radius:22px;
  padding:var(--s-md);
  position:relative;
}
.modal-card h3{margin:0 0 .4em}
.modal-close{
  position:absolute; top:1rem; right:1rem;
  width:36px; height:36px; border-radius:999px; background:var(--fog); display:grid; place-items:center;
}