/* ==========================================================================
   Black Diamond Detailing — preview site
   Palette: black + electric blue + gold
   ========================================================================== */

:root{
  --bg:#050608;
  --surface:#0d1117;
  --surface-2:#121a24;
  --blue:#1e6bff;
  --blue-light:#5aa9ff;
  --gold:#d4af37;
  --text:#ffffff;
  --muted:#a9b4c4;

  --hairline:rgba(255,255,255,.08);
  --radius-card:24px;
  --radius-media:16px;
  --gap:32px;
  --header-h:72px;

  /* Dark pricing-section card treatment.
     NOTE: A1 Gallery MCP requires an OAuth sign-in that wasn't available at
     build time, so these are reasoned defaults, not measured values. */
  --card-pad:32px;
  --card-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 18px 40px -24px rgba(0,0,0,.9);
  --featured-glow:
    0 0 0 1px rgba(30,107,255,.45),
    0 0 28px -6px rgba(30,107,255,.50),
    0 28px 64px -28px rgba(30,107,255,.42),
    0 1px 0 rgba(255,255,255,.06) inset;

  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:400 16px/1.6 Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:Sora,system-ui,sans-serif;
  font-weight:700;
  line-height:1.15;
  margin:0 0 .5em;
  letter-spacing:-.01em;
}
h1{font-size:clamp(2rem,6vw,3.5rem)}
h2{font-size:clamp(1.6rem,4vw,2.5rem)}
h3{font-size:clamp(1.15rem,2.4vw,1.5rem)}
p{margin:0 0 1rem}
img{max-width:100%;display:block}

a{color:var(--blue-light);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:#fff}

:focus-visible{
  outline:3px solid var(--blue-light);
  outline-offset:3px;
  border-radius:6px;
}

.label{
  font:600 12px/1.4 Inter,sans-serif;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:var(--muted);
}

.muted{color:var(--muted)}
.center{text-align:center}

.wrap{width:min(1180px,calc(100% - 40px));margin-inline:auto}
.section{padding:clamp(56px,9vw,104px) 0}
.section-head{max-width:720px;margin-bottom:clamp(28px,4vw,48px)}
.section-head.center{margin-inline:auto}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--blue);color:#fff;padding:12px 20px;border-radius:0 0 12px 0;
  font-weight:600;
}
.skip-link:focus{left:0}

/* ---------- Forged carbon texture (pure CSS) ---------------------------- */
.carbon{position:relative;isolation:isolate}
.carbon > *{position:relative;z-index:1}
.carbon::before{
  content:"";
  position:absolute;inset:0;z-index:0;
  pointer-events:none;
  opacity:.5;
  background-color:transparent;
  background-image:
    /* irregular flake shapes */
    radial-gradient(ellipse 70px 26px at 12% 20%, rgba(255,255,255,.075), transparent 62%),
    radial-gradient(ellipse 48px 34px at 38% 10%, rgba(255,255,255,.05), transparent 64%),
    radial-gradient(ellipse 90px 22px at 66% 32%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(ellipse 40px 40px at 85% 14%, rgba(255,255,255,.042), transparent 66%),
    radial-gradient(ellipse 60px 30px at 22% 62%, rgba(255,255,255,.055), transparent 62%),
    radial-gradient(ellipse 80px 24px at 52% 76%, rgba(255,255,255,.045), transparent 60%),
    radial-gradient(ellipse 44px 38px at 78% 68%, rgba(255,255,255,.06), transparent 64%),
    radial-gradient(ellipse 56px 20px at 94% 88%, rgba(255,255,255,.04), transparent 62%),
    radial-gradient(ellipse 66px 28px at 6% 92%, rgba(255,255,255,.05), transparent 62%),
    /* electric blue flecks */
    radial-gradient(circle 2.5px at 28% 44%, rgba(90,169,255,.75), transparent 70%),
    radial-gradient(circle 2px   at 71% 22%, rgba(30,107,255,.7),  transparent 70%),
    radial-gradient(circle 3px   at 46% 84%, rgba(90,169,255,.5),  transparent 72%),
    radial-gradient(circle 2px   at 88% 56%, rgba(30,107,255,.6),  transparent 70%),
    radial-gradient(circle 2px   at 14% 72%, rgba(90,169,255,.45), transparent 70%),
    /* dark weave base */
    repeating-linear-gradient(118deg, rgba(255,255,255,.028) 0 2px, transparent 2px 7px),
    repeating-linear-gradient(62deg,  rgba(0,0,0,.5) 0 3px, transparent 3px 9px),
    linear-gradient(180deg, #0a0d12, #06080b);
  background-size:
    340px 230px, 300px 210px, 420px 260px, 280px 240px,
    360px 250px, 400px 220px, 320px 230px, 300px 200px, 350px 240px,
    340px 230px, 300px 210px, 420px 260px, 280px 240px, 360px 250px,
    26px 26px, 22px 22px, 100% 100%;
}

/* ---------- Buttons ----------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 26px;
  border-radius:999px;
  font:600 15px/1 Inter,sans-serif;
  text-decoration:none;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease);
  will-change:transform;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{
  background:var(--blue);color:#fff;
  box-shadow:0 0 24px -6px rgba(30,107,255,.7);
}
.btn-primary:hover{background:#3d82ff;color:#fff;box-shadow:0 0 34px -4px rgba(30,107,255,.85)}
.btn-ghost{
  background:transparent;color:#fff;border-color:rgba(255,255,255,.28);
}
.btn-ghost:hover{border-color:var(--blue-light);color:#fff;box-shadow:0 0 24px -10px rgba(90,169,255,.8)}
.btn-row{display:flex;flex-wrap:wrap;gap:14px}
.btn-row.center{justify-content:center}

/* ---------- Header ------------------------------------------------------ */
.site-header{
  position:sticky;top:0;z-index:100;
  background:var(--bg);               /* solid, never see-through */
  border-bottom:1px solid var(--hairline);
}
.header-inner{
  display:flex;align-items:center;gap:16px;
  min-height:var(--header-h);
  width:min(1180px,calc(100% - 40px));margin-inline:auto;
}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff;flex-shrink:0}
.brand img{width:40px;height:40px;object-fit:contain}
.brand-name{font-family:Sora,sans-serif;font-weight:700;font-size:16px;letter-spacing:-.01em;white-space:nowrap}

.header-call{margin-right:auto}
.header-call .btn{padding:11px 18px;font-size:14px}

.main-nav{display:flex;align-items:center;gap:26px;margin-left:auto}
.main-nav a{
  color:var(--muted);text-decoration:none;
  font:600 12px/1 Inter,sans-serif;text-transform:uppercase;letter-spacing:.2em;
  transition:color .2s var(--ease);
}
.main-nav a:hover{color:#fff}
.main-nav a[aria-current="page"]{color:#fff}
.main-nav a[aria-current="page"]::after{
  content:"";display:block;height:1px;margin-top:7px;
  background:var(--gold);
}

.socials{display:flex;align-items:center;gap:12px}
.socials a{
  display:inline-flex;width:34px;height:34px;align-items:center;justify-content:center;
  border-radius:50%;color:#fff;
  transition:box-shadow .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.socials a:hover{color:var(--blue-light);box-shadow:0 0 18px -2px rgba(90,169,255,.9);transform:translateY(-1px)}
.socials svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7}

.nav-toggle{
  display:none;
  width:44px;height:44px;border-radius:12px;
  background:transparent;border:1px solid rgba(255,255,255,.18);
  color:#fff;cursor:pointer;
  align-items:center;justify-content:center;
}
.nav-toggle svg{width:22px;height:22px;stroke:currentColor;stroke-width:2;fill:none}

/* ---------- Mobile full-screen menu ------------------------------------- */
.mobile-menu{
  position:fixed;inset:0;z-index:150;
  background:#050608;
  display:none;
  flex-direction:column;align-items:center;justify-content:center;
  gap:34px;padding:40px 24px;
  text-align:center;
}
.mobile-menu.open{display:flex}
.mobile-menu-close{
  position:absolute;top:16px;right:16px;
  width:48px;height:48px;border-radius:12px;
  background:transparent;border:1px solid rgba(255,255,255,.2);color:#fff;cursor:pointer;
}
.mobile-menu-close svg{width:22px;height:22px;stroke:currentColor;stroke-width:2;fill:none}
.mobile-menu nav{display:flex;flex-direction:column;gap:26px}
.mobile-menu nav a{
  font-family:Sora,sans-serif;font-weight:700;
  font-size:clamp(1.6rem,8vw,2.2rem);
  text-transform:uppercase;letter-spacing:.14em;
  color:var(--blue);
  text-shadow:0 0 22px rgba(30,107,255,.75);
  text-decoration:none;
}
.mobile-menu nav a:hover,
.mobile-menu nav a:focus-visible{color:var(--blue-light);text-shadow:0 0 30px rgba(90,169,255,.95)}
.mobile-menu nav a[aria-current="page"]{
  color:#fff;text-shadow:0 0 26px rgba(90,169,255,.9);
}
.mobile-menu .socials{gap:22px}
.mobile-menu .socials a{width:48px;height:48px;border:1px solid rgba(255,255,255,.2)}
.mobile-menu .socials svg{width:22px;height:22px}

/* ---------- Hero -------------------------------------------------------- */
.hero{
  position:relative;
  min-height:calc(100svh - var(--header-h));
  display:flex;align-items:center;
  padding:clamp(48px,8vw,90px) 0;
  overflow:hidden;
  isolation:isolate;
}
.hero-bg{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;
  /* Only a light overall knock-down; the readability work is done by the
     targeted scrim below, so the facets and blue veins stay vivid. */
  filter:brightness(.66) saturate(1.02);
}
.hero::before{  /* readability scrim, concentrated behind the copy */
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    /* dark where the headline, subhead and buttons sit, then falls away */
    radial-gradient(ellipse 76% 62% at 50% 58%,
      rgba(5,6,8,.64) 0%, rgba(5,6,8,.58) 42%,
      rgba(5,6,8,.26) 74%, rgba(5,6,8,0) 100%),
    /* keeps the header readable up top and blends into the next section */
    linear-gradient(180deg,
      rgba(5,6,8,.28) 0%, rgba(5,6,8,.04) 24%,
      rgba(5,6,8,0) 52%, rgba(5,6,8,.08) 80%,
      rgba(5,6,8,.58) 100%);
}
.hero-inner{position:relative;z-index:2;text-align:center;max-width:760px;margin-inline:auto}
.hero h1{margin-bottom:18px}
.hero-sub{font-size:clamp(1rem,2.2vw,1.2rem);color:var(--muted);max-width:560px;margin:0 auto 28px}
.hero .btn-row{justify-content:center;margin-bottom:22px}
.hero-langs{letter-spacing:.2em;font-size:12px;text-transform:uppercase;color:var(--muted);font-weight:600}

/* logo + sparkles */
.hero-logo-wrap{
  position:relative;
  width:clamp(150px,34vw,220px);
  margin:0 auto 26px;
  aspect-ratio:1;
}
.hero-logo{
  width:100%;height:100%;object-fit:contain;
  position:relative;z-index:2;
}
.sparkle{
  position:absolute;z-index:3;
  width:6px;height:6px;border-radius:50%;
  background:radial-gradient(circle,#fff 0%,#cfe3ff 40%,rgba(90,169,255,0) 70%);
  opacity:0;
  pointer-events:none;
}

/* "fresh paint" shine streak */
.shine{position:relative;overflow:hidden}
.shine::after{
  content:"";
  position:absolute;top:-60%;left:0;
  width:40%;height:220%;
  background:linear-gradient(100deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.08) 35%,
    rgba(207,227,255,.55) 50%,
    rgba(255,255,255,.08) 65%,
    rgba(255,255,255,0) 100%);
  transform:translateX(-180%) skewX(-18deg);
  opacity:0;
  pointer-events:none;
  mix-blend-mode:screen;
  z-index:4;
}
html.js .shine.shine-run::after{animation:shineSweep 1.6s var(--ease) both}
@keyframes shineSweep{
  0%{opacity:0;transform:translateX(-180%) skewX(-18deg)}
  12%{opacity:1}
  88%{opacity:1}
  100%{opacity:0;transform:translateX(420%) skewX(-18deg)}
}

/* ---------- Cards / pricing -------------------------------------------- */
.grid{display:grid;gap:var(--gap)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}

.card{
  position:relative;
  background:var(--surface);
  border:1px solid var(--hairline);
  border-radius:var(--radius-card);
  padding:var(--card-pad);
  box-shadow:var(--card-shadow);
}
.card--featured{
  border-color:rgba(30,107,255,.5);
  box-shadow:var(--featured-glow);
}

.price-card{display:flex;flex-direction:column}
.price-card .price{
  font-family:Sora,sans-serif;font-weight:700;
  font-size:clamp(2rem,4vw,2.6rem);
  margin:4px 0 2px;
}
.price-card .price small{font-size:.9rem;font-weight:400;color:var(--muted);display:block;letter-spacing:.04em}
.price-card ul{list-style:none;margin:18px 0 26px;padding:0;display:grid;gap:10px}
.price-card ul li{position:relative;padding-left:26px;color:var(--muted)}
.price-card ul li::before{
  content:"";position:absolute;left:0;top:.55em;
  width:12px;height:7px;border-left:2px solid var(--blue-light);border-bottom:2px solid var(--blue-light);
  transform:rotate(-45deg);
}
.price-card .btn{margin-top:auto;align-self:flex-start}

.badge{
  position:absolute;top:-13px;left:var(--card-pad);
  background:var(--gold);color:#050608;
  font:600 11px/1 Inter,sans-serif;text-transform:uppercase;letter-spacing:.18em;
  padding:8px 14px;border-radius:999px;
  white-space:nowrap;
}
.rule-gold{height:1px;background:linear-gradient(90deg,var(--gold),rgba(212,175,55,0));margin:14px 0 2px}

.price-note{
  margin-top:28px;color:var(--muted);font-size:14px;
  border-left:2px solid var(--gold);padding-left:14px;
}

/* add-ons */
.addon{
  background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius-card);
  padding:26px;display:flex;flex-direction:column;gap:6px;
}
.addon h3{margin-bottom:2px;font-size:1.1rem}
.addon .quoted{color:var(--gold);font:600 12px/1.4 Inter,sans-serif;text-transform:uppercase;letter-spacing:.18em}
.addon a{margin-top:10px;font-weight:600;align-self:flex-start}

/* steps */
.steps{counter-reset:step;display:grid;gap:var(--gap);grid-template-columns:repeat(3,1fr)}
.step{position:relative;padding-top:52px;color:var(--muted)}
.step::before{
  counter-increment:step;content:counter(step);
  position:absolute;top:0;left:0;
  width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(30,107,255,.14);border:1px solid rgba(30,107,255,.45);
  color:#fff;font:700 15px/1 Sora,sans-serif;
}
.step h3{color:#fff;font-size:1.05rem;margin-bottom:4px}

/* ---------- Before / after slider -------------------------------------- */
.ba{max-width:900px;margin-inline:auto}
.ba-stage{
  position:relative;
  aspect-ratio:4/3;
  border-radius:var(--radius-media);
  overflow:hidden;
  background:var(--surface);
  box-shadow:0 0 0 1px rgba(30,107,255,.3), 0 0 44px -14px rgba(30,107,255,.6);
  touch-action:pan-y;          /* never block vertical page scroll */
  cursor:ew-resize;
  user-select:none;
  -webkit-user-select:none;
}
.ba-stage img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  pointer-events:none;
  -webkit-user-drag:none;
}
.ba-after{z-index:2;clip-path:inset(0 0 0 50%)}
.ba-line{
  position:absolute;top:0;bottom:0;z-index:3;
  width:2px;margin-left:-1px;
  background:var(--blue);
  box-shadow:0 0 14px 2px rgba(30,107,255,.85);
  pointer-events:none;
}
.ba-handle{
  position:absolute;top:50%;z-index:4;
  width:48px;height:48px;margin:-24px 0 0 -24px;
  border-radius:50%;
  background:#050608;
  border:2px solid var(--blue);
  box-shadow:0 0 20px -2px rgba(30,107,255,.9);
  display:grid;place-items:center;
  color:#fff;
  cursor:grab;
}
.ba-handle:active{cursor:grabbing}
.ba-handle svg{width:24px;height:24px;fill:currentColor;pointer-events:none}
.ba-pill{
  position:absolute;top:14px;z-index:5;
  padding:7px 14px;border-radius:999px;
  background:rgba(5,6,8,.62);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  font:600 11px/1 Inter,sans-serif;text-transform:uppercase;letter-spacing:.2em;
  color:#fff;pointer-events:none;
}
.ba-pill.before{left:14px}
.ba-pill.after{right:14px}

.ba-controls{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:22px}
.ba-arrow{
  width:44px;height:44px;border-radius:50%;
  background:var(--surface);border:1px solid var(--hairline);color:#fff;cursor:pointer;
  display:grid;place-items:center;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.ba-arrow:hover{border-color:var(--blue);box-shadow:0 0 18px -4px rgba(30,107,255,.8)}
.ba-arrow svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}
.ba-dots{display:flex;gap:10px}
.ba-dot{
  width:10px;height:10px;border-radius:50%;padding:0;
  background:rgba(255,255,255,.22);border:none;cursor:pointer;
  transition:background-color .2s var(--ease),box-shadow .2s var(--ease);
}
.ba-dot[aria-selected="true"]{background:var(--blue);box-shadow:0 0 12px 1px rgba(30,107,255,.9)}
.ba-caption{margin-top:14px;color:var(--muted);font-size:14px}

/* static side-by-side pairs (angles don't allow a slider) */
.ba-static{display:grid;gap:var(--gap);grid-template-columns:repeat(2,1fr);margin-top:var(--gap)}
.ba-static figure{margin:0}
.ba-static .pairbox{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ba-static .shot{position:relative;border-radius:var(--radius-media);overflow:hidden;aspect-ratio:4/3}
.ba-static .shot img{width:100%;height:100%;object-fit:cover}
.ba-static .shot span{
  position:absolute;top:10px;left:10px;
  padding:5px 11px;border-radius:999px;
  background:rgba(5,6,8,.65);border:1px solid rgba(255,255,255,.16);
  font:600 10px/1 Inter,sans-serif;text-transform:uppercase;letter-spacing:.18em;
}
.ba-static figcaption{margin-top:12px;color:var(--muted);font-size:14px}

/* ---------- Reviews ----------------------------------------------------- */
.stars{display:flex;gap:3px;margin-bottom:14px}
.stars svg{width:15px;height:15px;fill:var(--gold)}
.review{display:flex;flex-direction:column}
.review-text{color:var(--muted);margin-bottom:16px}
.review-text.clamped{
  display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden;
}
.review-more{
  background:none;border:none;padding:0;margin:-8px 0 16px;
  color:var(--blue-light);font:600 14px/1 Inter,sans-serif;cursor:pointer;
  align-self:flex-start;
}
.review-more:hover{color:#fff}
.review-foot{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:8px}
.review-foot .who{font-weight:600;font-size:15px}
.review-foot .when{color:var(--muted);font-size:13px}
.review-foot svg{width:16px;height:16px;fill:var(--muted);margin-left:auto}

.recommend-line{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:8px}
.recommend-line .pct{color:var(--gold);font-weight:600;letter-spacing:.04em}

/* mobile swipe carousel for reviews */
.review-carousel{display:grid;gap:var(--gap);grid-template-columns:repeat(3,1fr)}

/* ---------- Gallery ----------------------------------------------------- */
.gallery-grid{
  display:grid;gap:16px;
  grid-template-columns:repeat(3,1fr);
}
.gallery-item{
  position:relative;margin:0;padding:0;
  border:0;background:none;cursor:zoom-in;
  border-radius:var(--radius-media);
  overflow:hidden;
  aspect-ratio:3/4;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.gallery-item img{width:100%;height:100%;object-fit:cover}
.gallery-item:hover{transform:translateY(-3px);box-shadow:0 0 0 1px rgba(30,107,255,.4),0 16px 36px -18px rgba(30,107,255,.7)}

.lightbox{
  position:fixed;inset:0;z-index:200;
  background:rgba(3,4,6,.96);
  display:none;align-items:center;justify-content:center;
  padding:24px;
  touch-action:pan-y;
}
.lightbox.open{display:flex}
.lightbox img{max-width:100%;max-height:82vh;object-fit:contain;border-radius:12px}
.lightbox figure{margin:0;text-align:center;max-width:1100px}
.lightbox figcaption{margin-top:14px;color:var(--muted);font-size:14px}
.lb-btn{
  position:absolute;
  width:52px;height:52px;border-radius:50%;
  background:rgba(13,17,23,.9);border:1px solid var(--hairline);color:#fff;cursor:pointer;
  display:grid;place-items:center;
}
.lb-btn:hover{border-color:var(--blue)}
.lb-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2}
.lb-prev{left:16px;top:50%;margin-top:-26px}
.lb-next{right:16px;top:50%;margin-top:-26px}
.lb-close{right:16px;top:16px}
.lb-count{position:absolute;left:0;right:0;bottom:18px;text-align:center;color:var(--muted);font-size:13px}

/* ---------- Quote form -------------------------------------------------- */
.quote-form{
  background:var(--surface);
  border:1px solid var(--hairline);
  border-radius:var(--radius-card);
  padding:clamp(24px,4vw,40px);
  box-shadow:var(--card-shadow);
}
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:22px}
.field label{font:600 12px/1.4 Inter,sans-serif;text-transform:uppercase;letter-spacing:.2em;color:var(--muted)}
.field .req{color:var(--blue-light)}
.field input,.field select,.field textarea{
  width:100%;
  background:#070a0f;
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px;
  color:#fff;
  font:400 16px/1.5 Inter,sans-serif;
  padding:14px 16px;
}
.field textarea{resize:vertical;min-height:104px}
.field input[type="date"]{
  /* Renders the native picker and its calendar icon against the dark theme. */
  color-scheme:dark;
  /* iOS Safari ignores the shared padding/height on date inputs and centres the
     value, so pin the box explicitly to match the text inputs beside it. */
  -webkit-appearance:none;appearance:none;
  /* 1.5em line + 28px padding + 2px borders = the 54px the text inputs compute to.
     Pinned because the native value widget is 2px taller than a text line. */
  height:calc(1.5em + 30px);
  line-height:1.5;
  text-align:left;
  display:block;
}
.field input[type="date"]::-webkit-date-and-time-value{
  text-align:left;margin:0;line-height:1.5;height:1.5em;
}
.field input[type="date"]::-webkit-calendar-picker-indicator{
  opacity:.7;cursor:pointer;
}
.field input[type="date"]::-webkit-calendar-picker-indicator:hover{opacity:1}
.field select{
  appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23a9b4c4' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;background-size:12px;
  padding-right:44px;
}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--blue);outline:none;box-shadow:0 0 0 3px rgba(30,107,255,.25);
}
.field-error{color:#ff9d9d;font-size:13px;min-height:0}
.field.invalid input,.field.invalid select{border-color:#ff7b7b}
.form-grid{display:grid;gap:0 var(--gap);grid-template-columns:repeat(2,1fr)}
.desktop-only-actions{display:none;margin-top:18px;align-items:center;gap:18px;flex-wrap:wrap}
.copy-status{color:var(--blue-light);font-size:14px}

/* ---------- Service area ------------------------------------------------ */
.city-list{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 18px;padding:0;list-style:none}
.city-list li{
  border:1px solid var(--hairline);border-radius:999px;
  padding:9px 16px;color:var(--muted);font-size:14px;
  background:var(--surface);
}

/* ---------- CTA band ---------------------------------------------------- */
.cta-band{
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
  background:
    radial-gradient(ellipse 70% 120% at 50% 120%, rgba(30,107,255,.18), transparent 70%),
    var(--surface);
  text-align:center;
}

/* ---------- Footer ------------------------------------------------------ */
.site-footer{border-top:1px solid var(--hairline);padding:clamp(44px,6vw,72px) 0 28px}
.footer-grid{display:grid;gap:var(--gap);grid-template-columns:1.4fr 1fr 1fr;align-items:start}
.footer-brand{display:flex;align-items:center;gap:12px;margin-bottom:14px;text-decoration:none;color:#fff}
.footer-brand img{width:44px;height:44px;object-fit:contain}
.site-footer h4{font-size:12px;text-transform:uppercase;letter-spacing:.2em;color:var(--muted);font-family:Inter,sans-serif;font-weight:600;margin-bottom:14px}
.footer-links{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.footer-links a{color:var(--muted);text-decoration:none}
.footer-links a:hover{color:#fff}
.footer-phone{font-family:Sora,sans-serif;font-weight:700;font-size:1.25rem;color:#fff;text-decoration:none;display:inline-block;margin-bottom:6px}
.footer-phone:hover{color:var(--blue-light)}
.footer-bottom{
  margin-top:36px;padding-top:22px;border-top:1px solid var(--hairline);
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
  color:var(--muted);font-size:13px;
}

/* ---------- Floating mobile action bar ---------------------------------- */
.action-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  display:none;gap:12px;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:rgba(5,6,8,.94);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--hairline);
  transform:translateY(110%);
  transition:transform .3s var(--ease);
}
.action-bar.show{transform:translateY(0)}
.action-bar.hide-over-footer{transform:translateY(110%)}
.action-bar .btn{flex:1;padding:14px 10px;font-size:14px}

/* ---------- Entrance animations ----------------------------------------- */
/* The hidden state is gated on .js-reveal, which initReveals() adds to <html>
   only once it has an IntersectionObserver in hand. If JS is blocked, main.js
   fails to load, or the observer never reports, nothing is ever hidden. */
html.js-reveal .reveal{opacity:0;transform:translateY(18px)}
html.js-reveal .reveal.in{
  opacity:1;transform:none;
  transition:opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay:var(--d,0ms);
}

/* ---------- Responsive --------------------------------------------------- */
@media (max-width:1000px){
  .grid-3,.steps,.review-carousel,.gallery-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
}

@media (max-width:860px){
  .main-nav{display:none}
  .nav-toggle{display:inline-flex}
  .header-call{display:none}
  .brand-name{display:none}
  .header-inner{gap:12px}
  /* .header-call carried the auto margin; with it hidden the brand does */
  .brand{margin-right:auto}
}

@media (max-width:768px){
  :root{--gap:20px;--card-pad:24px}
  .grid-3,.grid-2,.steps,.ba-static,.form-grid{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr}
  body{padding-bottom:84px}     /* room for the floating action bar */
  .action-bar{display:flex}
  .ba-static .pairbox{grid-template-columns:1fr 1fr}
  .ba-handle{width:56px;height:56px;margin:-28px 0 0 -28px}
  .ba-handle svg{width:27px;height:27px}

  /* reviews become a swipe carousel */
  .review-carousel{
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    gap:16px;
    padding-bottom:8px;
    scrollbar-width:none;
  }
  .review-carousel::-webkit-scrollbar{display:none}
  .review-carousel > .card{
    flex:0 0 86%;
    scroll-snap-align:center;
  }
  .lb-prev{left:6px}
  .lb-next{right:6px}
}

@media (max-width:420px){
  .wrap{width:calc(100% - 28px)}
  .btn{padding:14px 20px}
}

/* ---------- Reduced motion ----------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.js-reveal .reveal{opacity:1;transform:none;transition:none}
  html.js .shine.shine-run::after{animation:none;opacity:0}
  .sparkle{display:none}
  .btn:hover,.gallery-item:hover{transform:none}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .action-bar{transition:none}
}

/* ---------- Print -------------------------------------------------------- */
@media print{
  .site-header,.action-bar,.mobile-menu,.lightbox{display:none !important}
  body{background:#fff;color:#000}
}