/* Ace Mobile Wash LA
   Black background, white text, blue only for small accents (checks, glows, borders).
   Photos are always shown in their original color. */

@font-face { font-family: "Barlow"; src: url(fonts/Barlow-Regular.woff) format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url(fonts/Barlow-Medium.woff) format("woff"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow"; src: url(fonts/Barlow-SemiBold.woff) format("woff"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow"; src: url(fonts/Barlow-Bold.woff) format("woff"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Barlow"; src: url(fonts/Barlow-Black.woff) format("woff"); font-weight: 900; font-display: swap; }
@font-face { font-family: "Barlow"; src: url(fonts/Barlow-BlackItalic.woff) format("woff"); font-weight: 900; font-style: italic; font-display: swap; }

:root {
  --bg: #000;
  --bg2: #0b0b0c;
  --card: #141416;
  --line: #27272b;
  --text: #fff;
  --muted: #c8c8cc;
  --blue: #2f7bff;
  --blue-soft: rgba(47, 123, 255, .35);
  --display: "Anton", Impact, "Arial Narrow", sans-serif;
  --body: "Barlow", system-ui, -apple-system, sans-serif;
  --r: 14px;
  --r-lg: 20px;
  --max: 1160px;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 18px/1.6 var(--body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 400; line-height: 1.05; }
h1, h2 { font-family: var(--display); text-transform: uppercase; letter-spacing: .01em; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--blue); color: #fff; }
.wrap { max-width: var(--max); margin: 0 auto; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 99; padding: 12px 16px; border-radius: 8px; background: #fff; color: #000; font-weight: 600; }
.skip:focus { left: 8px; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 26px; border: 2px solid #fff; border-radius: 999px; font: 600 17px/1 var(--body); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background .15s, color .15s, transform .15s, border-color .15s; }
.btn:active { transform: scale(.98); }
.btn-white { background: #fff; color: #000; }
.btn-white:hover { background: #e6e6e6; border-color: #e6e6e6; }
.btn-outline { background: transparent; color: #fff; }
.btn-outline:hover { background: #fff; color: #000; }
.btn-sm { min-height: 42px; padding: 0 16px; font-size: 15px; }
.btn-lg { min-height: 58px; padding: 0 30px; font-size: 18px; }
.btn-block { width: 100%; }
.ico { width: 18px; height: 18px; fill: currentColor; flex: none; }

/* ---------- header ---------- */
.top { position: sticky; top: 0; z-index: 30; background: rgba(0, 0, 0, .9); backdrop-filter: saturate(140%) blur(12px); -webkit-backdrop-filter: saturate(140%) blur(12px); border-bottom: 1px solid #1c1c1f; }
.top-inner { max-width: var(--max); margin: 0 auto; padding: 10px 20px; display: flex; align-items: center; gap: 24px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand img { width: 44px; height: auto; }
.brand span { font: 400 20px/1 var(--display); letter-spacing: .02em; text-transform: uppercase; }
.menu { display: flex; gap: 22px; margin-left: auto; }
.menu a { padding: 8px 0; color: var(--muted); font-weight: 500; font-size: 16px; text-decoration: none; transition: color .15s; }
.menu a:hover, .menu a.on { color: #fff; }
.menu a.on { text-decoration: underline; text-decoration-color: var(--blue); text-decoration-thickness: 2px; text-underline-offset: 8px; }
.top-actions { display: flex; align-items: center; gap: 8px; }
.menu-btn { display: none; position: relative; width: 44px; height: 44px; padding: 0; border: 1px solid #444; border-radius: 12px; background: transparent; cursor: pointer; }
.menu-btn span { position: absolute; left: 12px; right: 12px; height: 2px; background: #fff; transition: transform .2s; }
.menu-btn span:first-child { top: 17px; }
.menu-btn span:last-child { top: 25px; }
.menu-btn[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

/* ---------- hero ---------- */
.hero { background: radial-gradient(55% 70% at 78% 45%, rgba(47, 123, 255, .2), transparent 70%), radial-gradient(70% 90% at 80% 40%, #151517, #000 70%); }
.hero-inner { max-width: var(--max); margin: 0 auto; padding: 56px 20px 64px; display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; }
.hero-tag { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px; font-weight: 600; font-size: 17px; }
.hero-tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px var(--blue-soft); }
.hero h1 { font-size: clamp(46px, 6vw, 80px); }
.hero-sub { max-width: 32em; margin: 20px 0 30px; color: #e6e6e6; font-size: 20px; }
.hero-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-facts { display: flex; flex-wrap: wrap; gap: 12px; margin: 34px 0 0; padding: 0; list-style: none; }
.hero-facts li { padding: 12px 18px; border: 1px solid #2e2e33; border-radius: var(--r); background: #101012; }
.hero-facts strong { display: block; font: 400 28px/1.1 var(--display); }
.hero-facts span { color: var(--muted); font-size: 15px; }
.hero-pic { margin: 0; }
.hero-pic img { width: 100%; height: auto; max-height: 640px; aspect-ratio: 4 / 5; object-fit: cover; object-position: 35% 40%; border-radius: 22px; box-shadow: 0 0 0 1px var(--blue-soft), 0 30px 90px rgba(47, 123, 255, .22); }

/* ---------- how it works ---------- */
.how { border-block: 1px solid var(--line); background: var(--bg2); }
.how ol { max-width: var(--max); margin: 0 auto; padding: 28px 20px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; list-style: none; }
.how li { display: flex; align-items: flex-start; gap: 14px; }
.how .n { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--blue); color: #fff; font: 400 20px/1 var(--display); }
.how h3 { font-weight: 600; font-size: 19px; line-height: 1.3; }
.how p { margin-top: 2px; color: var(--muted); font-size: 16px; }

/* ---------- sections ---------- */
.sec { padding: 88px 20px; }
.sec-alt { background: var(--bg2); border-block: 1px solid var(--line); }
.sec h2 { font-size: clamp(38px, 5vw, 56px); }
.sec h2::after { content: ""; display: block; width: 56px; height: 4px; margin-top: 14px; border-radius: 2px; background: var(--blue); }
.lead { max-width: 40em; margin: 14px 0 32px; color: var(--muted); font-size: 19px; }
.lead a { color: #fff; font-weight: 600; }
.note { margin-top: 18px; color: var(--muted); }

/* ---------- vehicle picker ---------- */
.picker { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.picker button { min-height: 48px; padding: 0 20px; border: 1px solid #4a4a50; border-radius: 999px; background: transparent; color: #fff; font: 500 16px/1 var(--body); cursor: pointer; transition: background .15s, color .15s, border-color .15s, box-shadow .15s; }
.picker button:hover { border-color: #fff; }
.picker button[aria-checked="true"] { border-color: #fff; background: #fff; color: #000; font-weight: 600; box-shadow: 0 0 0 3px var(--blue-soft); }
.js-price { transition: opacity .15s; }
.js-price.swap { opacity: 0; }

/* ---------- packages ---------- */
.pkgs { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; }
.pkg { position: relative; display: flex; flex-direction: column; padding: 34px 32px 32px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); }
.pkg-best { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue), 0 24px 70px -20px rgba(47, 123, 255, .5); }
.badge { position: absolute; top: -14px; left: 28px; padding: 6px 14px; border-radius: 999px; background: var(--blue); color: #fff; font-weight: 600; font-size: 14px; }
.pkg-kind { margin-bottom: 4px; color: var(--muted); font-weight: 500; font-size: 16px; }
.pkg h3 { font: 400 clamp(34px, 3.6vw, 44px)/1.05 var(--display); text-transform: uppercase; }
.pkg-desc { margin: 8px 0 18px; color: var(--muted); }
.price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 22px; padding: 16px 0; border-block: 1px solid var(--line); }
.price .js-price { font: 400 56px/1 var(--display); }
.price small { color: var(--muted); font-size: 16px; }
.plus { margin-bottom: 8px; font-weight: 600; }
.checks { flex: 1; margin: 0 0 28px; padding: 0; list-style: none; }
.checks li { position: relative; padding: 7px 0 7px 32px; }
.checks li::before { content: ""; position: absolute; left: 0; top: 11px; width: 21px; height: 21px; border-radius: 50%; background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / 14px no-repeat; }
.all-prices { margin-top: 24px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); }
.all-prices summary { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; font-weight: 600; cursor: pointer; list-style: none; }
.all-prices summary::-webkit-details-marker { display: none; }
.all-prices summary::after { content: "+"; font-size: 24px; line-height: 1; }
.all-prices[open] summary::after { content: "\2212"; }
.all-prices table { width: 100%; border-collapse: collapse; }
.all-prices th, .all-prices td { padding: 14px 22px; border-top: 1px solid var(--line); text-align: left; }
.all-prices th { color: var(--muted); font-weight: 500; font-size: 15px; }
.all-prices td + td, .all-prices th + th { text-align: right; }
.all-prices tbody tr.on { background: rgba(47, 123, 255, .1); }
.all-prices tbody tr.on td:first-child { font-weight: 600; }

/* ---------- coming soon ---------- */
.soon { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.soon-card { overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); transition: border-color .2s, box-shadow .2s; }
.soon-card:hover { border-color: rgba(47, 123, 255, .7); box-shadow: 0 14px 40px -18px rgba(47, 123, 255, .6); }
.soon-pics { display: grid; grid-template-columns: 600fr 455fr; }
.soon-pics img { width: 100%; height: 100%; aspect-ratio: 600 / 265; object-fit: cover; }
.soon-pics img + img { aspect-ratio: auto; }
.soon-body { padding: 24px 26px 28px; }
.tag, .trusted { display: inline-block; padding: 5px 12px; border: 1px solid var(--blue); border-radius: 999px; font-weight: 600; font-size: 14px; }
.soon-body h3 { margin-top: 12px; font: 400 34px/1.05 var(--display); text-transform: uppercase; }
.soon-body p { margin-top: 10px; color: var(--muted); }
.soon-cta { margin-top: 22px; }

/* ---------- add-ons ---------- */
.addons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.addon { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); transition: border-color .2s, box-shadow .2s; }
.addon:not(.addon-cta):hover { border-color: rgba(47, 123, 255, .7); box-shadow: 0 14px 40px -18px rgba(47, 123, 255, .6); }
.addon img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.addon > div { padding: 18px 20px 22px; }
.addon h3 { font-weight: 600; font-size: 19px; line-height: 1.3; overflow-wrap: break-word; hyphens: auto; }
.addon h3 .js-price { display: table; margin-top: 10px; padding: 4px 11px; border-radius: 999px; background: #fff; color: #000; font-weight: 600; font-size: 17px; }
.addon p { margin-top: 10px; color: var(--muted); font-size: 16px; }
.addon-cta { justify-content: center; gap: 10px; padding: 26px; border-color: #fff; background: #fff; color: #000; text-decoration: none; }
.addon-cta:hover { background: #e8e8e8; }
.addon-cta strong { font: 400 30px/1.05 var(--display); text-transform: uppercase; }
.addon-cta span { font-size: 16px; }
.addon-cta em { font-style: normal; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }

/* ---------- about ---------- */
.about { display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: start; }
.about-main { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 45%; border-radius: var(--r-lg); }
.about-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.about-row img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; }
[data-zoom] { cursor: zoom-in; transition: opacity .15s; }
[data-zoom]:hover { opacity: .9; }
.trusted { margin: 14px 0 20px; }
.about-text p:not(.trusted):not(.sign) { margin-bottom: 16px; color: #e2e2e2; }
.sign { margin-top: 22px; font: 400 28px/1.1 var(--display); text-transform: uppercase; }

/* ---------- reviews ---------- */
.reviews { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.review { margin: 0; padding: 26px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); }
.review::before { content: "\2605\2605\2605\2605\2605"; display: block; margin-bottom: 12px; color: var(--blue); letter-spacing: 2px; }
.review blockquote { margin: 0; font-size: 18px; }
.review figcaption { margin-top: 14px; color: var(--muted); font-weight: 600; font-size: 15px; }

/* ---------- FAQ ---------- */
.faq-wrap { display: grid; grid-template-columns: .8fr 1.2fr; gap: 48px; align-items: start; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; font-weight: 600; font-size: 19px; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--blue); border-radius: 50%; font-size: 20px; line-height: 1; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { max-width: 38em; margin: -4px 0 22px; color: var(--muted); }

/* ---------- contact ---------- */
.contact { background: radial-gradient(60% 80% at 50% 0%, rgba(47, 123, 255, .14), transparent 70%), var(--bg); }
.contact-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.c-card { display: flex; flex-direction: column; gap: 6px; padding: 22px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); text-decoration: none; transition: border-color .15s, background .15s; }
.c-card:hover { border-color: #fff; }
.c-main { border-color: #fff; background: #fff; color: #000; }
.c-main:hover { background: #e8e8e8; }
.c-label { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; opacity: .8; }
.c-val { font: 400 28px/1.1 var(--display); }
.c-val.small { font: 600 17px/1.3 var(--body); overflow-wrap: anywhere; }
.area { margin-top: 22px; color: var(--muted); }

/* ---------- footer ---------- */
.foot { padding: 56px 20px 40px; border-top: 1px solid var(--line); color: var(--muted); font-size: 15px; }
.foot-inner { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 32px; }
.foot-brand img { width: 64px; height: auto; margin-bottom: 12px; }
.foot-brand p { max-width: 26em; }
.foot h4 { margin: 0 0 12px; color: #fff; font-weight: 600; font-size: 15px; }
.foot ul { margin: 0; padding: 0; list-style: none; }
.foot li { margin-bottom: 8px; }
.foot a { text-decoration: none; }
.foot a:hover { color: #fff; }
.foot-bottom { max-width: var(--max); margin: 36px auto 0; padding-top: 20px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 14px; }

/* ---------- dialogs ---------- */
dialog { padding: 0; border: 0; color: #fff; }
dialog::backdrop { background: rgba(0, 0, 0, .8); backdrop-filter: blur(4px); }
.sheet { width: min(440px, 92vw); padding: 32px 28px 28px; border: 1px solid #333; border-radius: var(--r-lg); background: #111; text-align: center; }
.sheet-x { position: absolute; top: 10px; right: 12px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: #222; color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
.sheet-k { color: var(--muted); font-weight: 600; }
.sheet-num { margin: 6px 0 10px; font: 400 48px/1 var(--display); }
.sheet-hint { margin-bottom: 22px; color: var(--muted); font-size: 16px; }
.sheet-btns { display: grid; gap: 10px; }
.zoom { max-width: 94vw; max-height: 92vh; overflow: visible; background: transparent; }
.zoom img { max-width: 94vw; max-height: 88vh; border-radius: var(--r); }
.zoom .sheet-x { top: -14px; right: -14px; background: #fff; color: #000; }

/* ---------- phone call/text bar ---------- */
.bar { display: none; }

/* ---------- tablet ---------- */
@media (max-width: 960px) {
  .menu { position: fixed; inset: 65px 0 auto; z-index: -1; flex-direction: column; gap: 0; margin: 0; padding: 8px 20px 20px; background: #000; border-bottom: 1px solid var(--line); transform: translateY(-120%); transition: transform .25s; }
  .menu.open { transform: none; }
  .menu a { padding: 16px 0; border-bottom: 1px solid #1c1c1f; color: #fff; font-size: 20px; }
  .menu a.on { text-decoration: none; color: var(--blue); }
  .top-actions { margin-left: auto; }
  .menu-btn { display: block; }
  .hero-inner { grid-template-columns: 1fr 1fr; gap: 28px; }
  .addons { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: 1fr 1fr; }
  .foot-inner { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
}

/* ---------- phone ---------- */
@media (max-width: 760px) {
  body { font-size: 17px; }
  .top-inner { gap: 10px; padding: 10px 14px; }
  .brand span { display: none; }
  .top-actions .btn { width: 44px; padding: 0; }
  .top-actions .btn span { display: none; }
  .hero-inner { grid-template-columns: 1fr; gap: 22px; padding: 18px 18px 40px; }
  .hero-pic { order: -1; }
  .hero-pic img { aspect-ratio: 4 / 3; max-height: none; object-position: 30% 35%; border-radius: 16px; }
  .hero h1 { font-size: clamp(40px, 11.5vw, 58px); }
  .hero-sub { font-size: 18px; }
  .hero-btns .btn { flex: 1 1 100%; }
  .hero-facts { gap: 8px; }
  .hero-facts li { flex: 1; padding: 10px 12px; }
  .hero-facts strong { font-size: 24px; }
  .how ol { grid-template-columns: 1fr; gap: 16px; padding: 24px 18px; }
  .sec { padding: 60px 18px; }
  .lead { font-size: 17px; }
  .picker { display: grid; grid-template-columns: 1fr 1fr; }
  .picker button { padding: 0 10px; font-size: 15px; }
  .pkgs, .soon, .about, .faq-wrap { grid-template-columns: 1fr; }
  .faq-wrap { gap: 8px; }
  .pkg { padding: 30px 22px 24px; }
  .pkg-best { margin-top: 10px; }
  .all-prices th, .all-prices td { padding: 12px 14px; font-size: 15px; }
  .addons { grid-template-columns: 1fr; }
  .about { gap: 28px; }
  .faq summary { font-size: 17px; }
  .contact-grid { grid-template-columns: 1fr; }
  .foot { padding-bottom: 100px; }
  .foot-inner { grid-template-columns: 1fr 1fr; }
  .bar { position: fixed; z-index: 40; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: 1fr 1fr; gap: 8px; transform: translateY(160%); transition: transform .25s; }
  .bar.show { transform: none; }
  .bar a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 54px; border: 2px solid #fff; border-radius: 999px; font-weight: 600; font-size: 18px; text-decoration: none; box-shadow: 0 8px 24px rgba(0, 0, 0, .6); }
  .bar a:first-child { background: #fff; color: #000; }
  .bar a:last-child { background: #000; color: #fff; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}


/* =====================================================================
   THEME: modeled on Nostain Detailing (Harry's pick) with the electric
   blue from his own banner. Upright heavy grotesk in chrome, square cards,
   thin silver lines, blue used for buttons and one hero line only.
   ===================================================================== */
:root {
  --bg: #08090a;
  --bg2: #0b0c0e;
  --card: #0c0d0f;
  --line: rgba(194, 198, 205, .14);
  --line2: rgba(194, 198, 205, .24);
  --muted: #a9aeb6;
  --blue: #1a7cf5;
  --blue-hi: #4fb0ff;
  --blue-soft: rgba(26, 124, 245, .3);
  --r: 2px;
  --r-lg: 2px;
  --head: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --chrome: linear-gradient(180deg, #f0f1f2 0%, #d0d2d6 38%, #8f939a 68%, #d9dbe0 100%);
}
html { background: #08090a; }
body { background: radial-gradient(900px 600px at 78% 6%, rgba(170,176,186,.08), transparent 70%), radial-gradient(700px 500px at 6% 38%, rgba(255,255,255,.035), transparent 70%), #08090a; color: #eceef1; }

/* headings: upright, heavy, chrome */
h1, h2 { font-family: var(--head); font-weight: 700; font-style: normal; text-transform: uppercase; letter-spacing: -.035em; line-height: .98; }
h1 span, h2 span { background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero h1 .glow { background: linear-gradient(90deg, #6cc4ff 0%, #2d8cff 40%, #0f5fd6 75%, #4fb0ff 100%); -webkit-background-clip: text; background-clip: text; }
h1 span, h2 span { padding-right: .04em; }
.sec h2 { font-size: clamp(34px, 4vw, 48px); margin-bottom: 14px; }
.sec h2::after { display: none; }

.eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; color: #aeb2b9; font: 700 13px/1.3 var(--head); letter-spacing: .28em; text-transform: uppercase; }
.eyebrow::before { content: ""; flex: none; width: 16px; height: 2px; background: var(--blue-hi); }

/* buttons */
.btn { border-radius: 4px; font: 800 13px/1 var(--head); letter-spacing: .09em; text-transform: uppercase; box-shadow: none; }
.btn-lg { min-height: 54px; padding: 0 26px; font-size: 14px; }
.btn-sm { min-height: 40px; font-size: 12px; }
.btn-blue { border: 1px solid rgba(87, 180, 255, .45); background: linear-gradient(135deg, #0b4fb5 0%, #1a7cf5 50%, #4aa8ff 100%); color: #f7fbff; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 10px 30px -12px rgba(26,124,245,.7); }
.btn-blue:hover { filter: brightness(1.1); }
.btn-dark { border: 1px solid rgba(87, 180, 255, .25); background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02)); color: #d6d8dc; box-shadow: inset 0 1px 0 rgba(255,255,255,.035); }
.btn-dark:hover { border-color: rgba(87, 180, 255, .6); color: #fff; }
.arw { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* header */
.top { background: rgba(8, 9, 10, .86); border-bottom: 1px solid var(--line); }
.brand span { font: 700 17px/1 var(--head); letter-spacing: -.01em; text-transform: uppercase; }
.brand b { color: #fff; font-weight: 700; }
.menu a { font-size: 15px; color: #d6d8dc; }
.menu a:hover, .menu a.on { color: #fff; }

/* hero */
.hero { background: radial-gradient(40% 55% at 76% 43%, rgba(26,124,245,.11), transparent 70%); }
.hero-inner { padding-top: 76px; padding-bottom: 84px; }
.hero h1 { font-size: clamp(46px, 4.9vw, 66px); margin-bottom: 24px; }
.hero h1 span { display: block; }
.hero-sub { color: #c4c8ce; font-size: 18px; max-width: 34em; }
.hero-facts { gap: 0; border: 1px solid var(--line); display: inline-flex; background: linear-gradient(155deg, rgba(255,255,255,.04), rgba(255,255,255,.01)); }
.hero-facts li { border: 0; border-radius: 0; background: none; padding: 14px 22px; }
.hero-facts li + li { border-left: 1px solid var(--line); }
.hero-facts strong { font: 700 26px/1.1 var(--head); letter-spacing: -.02em; }
.hero-facts span { font-size: 14px; }
.hero-pic { position: relative; }
.hero-pic::before { content: ""; position: absolute; inset: -12px 12px 12px -12px; border: 1px solid var(--line2); pointer-events: none; }
.hero-pic img { position: relative; border-radius: 2px; border: 1px solid var(--line2); box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.chip { position: absolute; z-index: 2; top: 18px; left: 18px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid rgba(87,180,255,.35); background: rgba(5,7,10,.72); backdrop-filter: blur(6px); font: 700 11px/1 var(--head); letter-spacing: .18em; text-transform: uppercase; color: #e9f5ff; }
.chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--blue-hi); }

/* how it works */
.how { background: #0b0c0e; border-color: var(--line); }
.how .n { border-radius: 2px; background: none; border: 1px solid rgba(87,180,255,.45); color: var(--blue-hi); font: 700 17px/1 var(--head); }
.how h3 { font-family: var(--head); font-weight: 700; font-size: 16px; text-transform: uppercase; letter-spacing: .03em; }
.how p { font-size: 15px; }

.sec-alt { background: #070809; border-block: 1px solid var(--line); }

/* picker */
.picker button { border-radius: 2px; border-color: var(--line2); background: rgba(255,255,255,.03); font: 600 15px/1 var(--head); }
.picker button[aria-checked="true"] { background: linear-gradient(135deg, #0b4fb5, #1a7cf5 55%, #4aa8ff); border-color: rgba(87,180,255,.55); color: #fff; }

/* cards: square, thin silver line, faint sheen */
.pkg, .addon, .soon-card, .c-card, .all-prices, .perks { border-radius: 0; border: 1px solid var(--line); background: linear-gradient(155deg, rgba(255,255,255,.043), rgba(255,255,255,.01)), #0c0d0f; }
.pkg h3, .soon-body h3, .addon-cta strong { font-family: var(--head); font-weight: 700; font-style: normal; text-transform: uppercase; letter-spacing: -.025em; }
.pkg h3 { font-size: clamp(28px, 2.8vw, 36px); }
.soon-body h3 { font-size: 26px; }
.pkg-kicker, .pkg .kick { letter-spacing: .04em; }
.price .js-price { font: 700 54px/1 var(--head); letter-spacing: -.04em; }
.badge { border-radius: 2px; background: linear-gradient(135deg, #0b4fb5, #1a7cf5 55%, #4aa8ff); text-transform: uppercase; letter-spacing: .14em; font: 700 11px/1 var(--head); padding: 8px 12px; box-shadow: none; }
.pkg-best { border-color: rgba(87,180,255,.5); box-shadow: 0 0 0 1px rgba(87,180,255,.18), 0 30px 70px -40px rgba(26,124,245,.8); }
.checks li::before { box-shadow: none; }

.addon h3 { font-family: var(--head); font-weight: 700; font-size: 15px; text-transform: uppercase; letter-spacing: .035em; color: #e0e2e5; }
.addon h3 .js-price { border-radius: 2px; background: none; color: #fff; border: 1px solid rgba(87,180,255,.4); font: 700 16px/1 var(--head); padding: 6px 10px; }
.addon p { font-size: 15px; }
.addon:hover, .soon-card:hover { border-color: rgba(87,180,255,.4); box-shadow: none; }
.addon-cta { border-color: rgba(87,180,255,.45); background: linear-gradient(160deg, rgba(26,124,245,.22), rgba(26,124,245,.06)), #0c0d0f; color: #fff; }
.addon-cta:hover { background: linear-gradient(160deg, rgba(26,124,245,.32), rgba(26,124,245,.1)), #0c0d0f; }
.addon-cta strong { font-size: 24px; }
.addon-cta em { color: var(--blue-hi); }
.tag { border-radius: 2px; background: none; border: 1px solid rgba(87,180,255,.45); color: #cfe9ff; text-transform: uppercase; letter-spacing: .16em; font: 700 11px/1 var(--head); padding: 7px 10px; box-shadow: none; }
.trusted { border-radius: 2px; text-transform: uppercase; letter-spacing: .16em; font: 700 11px/1 var(--head); }
.sign { font: 700 20px/1.2 var(--head); text-transform: uppercase; letter-spacing: -.01em; }

/* perks row from Harry's banner */
.perks { display: grid; grid-template-columns: repeat(4, 1fr); margin: 24px 0 0; padding: 0; list-style: none; }
.perks li { display: flex; align-items: center; gap: 12px; padding: 18px 20px; font: 700 14px/1.2 var(--head); letter-spacing: .04em; text-transform: uppercase; color: #e0e2e5; }
.perks li + li { border-left: 1px solid var(--line); }
.perks svg { width: 26px; height: 26px; flex: none; fill: none; stroke: var(--blue-hi); stroke-width: 1.5; stroke-linejoin: round; }
.perks .tick { stroke-linecap: round; }

.about-main, .about-row img { border-radius: 0; box-shadow: none; border: 1px solid var(--line); }

.faq summary { font-family: var(--head); font-weight: 700; font-size: 17px; }
.faq summary::after { border-radius: 2px; border-color: rgba(87,180,255,.45); color: var(--blue-hi); }

.c-card:hover { border-color: rgba(87,180,255,.5); }
.c-main { border-color: rgba(87,180,255,.5); background: linear-gradient(135deg, #0b4fb5 0%, #1a7cf5 50%, #4aa8ff 100%); color: #fff; }
.c-main:hover { filter: brightness(1.08); background: linear-gradient(135deg, #0b4fb5 0%, #1a7cf5 50%, #4aa8ff 100%); }
.c-val { font: 700 26px/1.1 var(--head); letter-spacing: -.02em; }
.c-card:not(.c-main) .c-val { font-size: 17px; letter-spacing: 0; }
.c-card:nth-child(2) .c-val { font-size: 26px; letter-spacing: -.02em; }

footer { border-top: 1px solid var(--line); background: #060708; }

@media (max-width: 760px) {
  .bar a { border-radius: 4px; text-transform: uppercase; letter-spacing: .09em; font: 800 14px/1 var(--head); }
  .bar a:first-child { background: linear-gradient(135deg, #0b4fb5, #1a7cf5 55%, #4aa8ff); color: #fff; border-color: rgba(87,180,255,.5); }
  .bar a:last-child { background: #0c0d0f; border-color: rgba(87,180,255,.3); }
  .hero h1 { font-size: clamp(40px, 12vw, 56px); }
  .hero-pic::before { inset: -8px 8px 8px -8px; }
  .hero-facts { display: flex; }
  .hero-facts li { flex: 1; padding: 12px 14px; }
  .hero-facts strong { font-size: 22px; }
  .eyebrow { letter-spacing: .18em; font-size: 12px; }
  .perks { grid-template-columns: 1fr 1fr; }
  .perks li:nth-child(3) { border-left: 0; }
  .perks li:nth-child(n+3) { border-top: 1px solid var(--line); }
  .perks li { padding: 14px; font-size: 13px; }
}

/* hero reel (Harry's video), framed like Nostain's */
.hero-pic video { position: relative; display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; max-height: 640px; object-fit: cover; border: 1px solid var(--line2); border-radius: 2px; background: #000; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.reel-ctrl { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 16px; display: flex; justify-content: space-between; pointer-events: none; }
.reel-ctrl button { pointer-events: auto; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; background: rgba(5,7,10,.6); backdrop-filter: blur(6px); color: #fff; cursor: pointer; }
.reel-ctrl button:hover { border-color: rgba(87,180,255,.7); }
.reel-ctrl button:focus-visible { outline: 2px solid var(--blue-hi); outline-offset: 2px; }
.reel-ctrl svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#reelPlay .i-play, #reelPlay.paused .i-pause { display: none; }
#reelPlay.paused .i-play { display: inline; fill: currentColor; }
#reelSound .i-on, #reelSound.on .i-off { display: none; }
#reelSound.on .i-on { display: inline; }
.hero-pic { justify-self: end; width: min(100%, 380px); }
@media (max-width: 960px) { .hero-pic { justify-self: center; } }
@media (max-width: 760px) { .hero-pic { width: min(100%, 320px); margin-inline: auto; } }
@media (prefers-reduced-motion: reduce) { .hero-pic video { animation: none; } }
@media (max-width: 960px) { .hero-pic { order: 0; margin-top: 28px; } }

/* ---------- Google reviews ---------- */
.rev-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; margin-bottom: 32px; }
.rev-head h2 { margin-bottom: 0; }
.rev-score { padding: 18px 24px; border: 1px solid var(--line); background: linear-gradient(155deg, rgba(255,255,255,.043), rgba(255,255,255,.01)), #0c0d0f; }
.score { display: flex; align-items: center; gap: 12px; margin: 0; }
.score strong { font: 700 44px/1 var(--head); letter-spacing: -.04em; }
.stars { color: #fbbc05; letter-spacing: 2px; font-size: 20px; line-height: 1; }
.score-sub { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; color: var(--muted); font-size: 14px; }
.g { width: 16px; height: 16px; flex: none; }
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }
.review { display: flex; flex-direction: column; margin: 0; padding: 24px; border: 1px solid var(--line); border-radius: 0; background: linear-gradient(155deg, rgba(255,255,255,.043), rgba(255,255,255,.01)), #0c0d0f; }
.review::before { content: none; }
.review-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.review-top .stars { font-size: 16px; }
.review blockquote { margin: 0; }
.review blockquote p { margin: 0; font-size: 16px; line-height: 1.6; color: #e3e5e8; }
.review-long blockquote p { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.review-long.open blockquote p { display: block; }
.review .more { align-self: flex-start; margin-top: 4px; padding: 12px 0; min-height: 44px; border: 0; background: none; color: var(--blue-hi); font: 600 14px/1.4 var(--body); cursor: pointer; }
.review .more:hover { text-decoration: underline; }
.review figcaption { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.review figcaption strong { display: block; margin-bottom: 2px; color: #fff; font: 700 15px/1.3 var(--head); text-transform: uppercase; letter-spacing: .03em; }
.rev-cta { display: flex; align-items: center; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap; margin-top: 24px; padding: 28px 30px; border: 1px solid rgba(87,180,255,.4); border-left: 3px solid var(--blue-hi); background: linear-gradient(110deg, rgba(26,124,245,.16), rgba(26,124,245,.03) 60%), #0c0d0f; }
.rev-cta h3 { margin: 0 0 6px; font: 700 22px/1.2 var(--head); text-transform: uppercase; letter-spacing: -.01em; }
.rev-cta p { margin: 0; color: #c4c8ce; max-width: 34em; }
.rev-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-facts a { display: block; color: inherit; text-decoration: none; }
.hero-facts em { font-style: normal; color: #fbbc05; font-size: .8em; }
@media (max-width: 960px) { .reviews { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) {
  .reviews { grid-template-columns: 1fr; }
  .rev-score { width: 100%; }
  .rev-cta { padding: 22px 18px; }
  .rev-btns, .rev-btns .btn { width: 100%; }
}
.reviews { display: block; columns: 3; column-gap: 16px; }
.review { break-inside: avoid; margin-bottom: 16px; }
@media (max-width: 960px) { .reviews { columns: 2; } }
@media (max-width: 760px) { .reviews { columns: 1; } }
.reviews .rev-cta { display: flex; flex-direction: column; align-items: stretch; break-inside: avoid; margin: 0 0 16px; padding: 26px 24px; border-left-width: 1px; border-top: 3px solid var(--blue-hi); }
.reviews .rev-cta .rev-btns { flex-direction: column; margin-top: 18px; }
.reviews .rev-cta .btn { width: 100%; }
.soon-pics { grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); }
.soon-pics img, .soon-pics img + img { aspect-ratio: 1 / 1; height: auto; }

/* ---------- quality pass ---------- */
:root { --display: var(--head); }
.sheet-num { font-weight: 700; letter-spacing: -.03em; }
/* package cards must never push the page sideways on small phones */
.pkgs > * { min-width: 0; }
.btn-block { white-space: normal; text-align: center; line-height: 1.3; padding-block: 12px; }
/* recent work gallery */
.jobs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-top: 28px; }
.jobs img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border: 1px solid var(--line); }
.jobs img:hover { opacity: 1; border-color: rgba(87,180,255,.5); }
@media (max-width: 1100px) { .jobs { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .jobs { grid-template-columns: repeat(2, 1fr); gap: 8px; } }
@media (max-width: 1100px) { .menu a[href="#work"] { display: none; } .menu.open a[href="#work"] { display: block; } }
/* phones: add-ons become compact rows (photo left, details right) so the list is half as long */
@media (max-width: 560px) {
  .addon:not(.addon-cta) { flex-direction: row; align-items: stretch; }
  .addon:not(.addon-cta) img { width: 112px; flex: none; aspect-ratio: auto; height: auto; min-height: 100%; object-fit: cover; }
  .addon:not(.addon-cta) > div { flex: 1; min-width: 0; padding: 14px 14px 16px; }
  .addon h3 { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; }
  .addon h3 .js-price { margin-top: 0; }
  .addon p { margin-top: 8px; font-size: 14px; line-height: 1.5; }
}
@media (max-width: 380px) {
  .hero-facts li { min-width: 0; padding: 10px 8px; }
  .hero-facts strong { font-size: 19px; }
  .hero-facts span { font-size: 12px; }
}
.perks li { min-width: 0; }
@media (max-width: 380px) { .perks { grid-template-columns: 1fr; } .perks li + li { border-left: 0; border-top: 1px solid var(--line); } }
/* very small phones (320–360px): narrower add-on photo so long names like "Complete Decontamination" fit */
@media (max-width: 360px) { .addon:not(.addon-cta) img { width: 88px; } .addon h3 { letter-spacing: .02em; } }
.area a { color: var(--blue-hi); font-weight: 600; text-underline-offset: 3px; }
.hours { margin-top: 26px; color: #fff; font-size: 17px; } .hours strong { color: var(--blue-hi); font-weight: 700; } .hours + .area { margin-top: 8px; }
/* Hero logo + Harry's slogan */
.hero-logo { display: block; width: 92px; height: auto; margin-bottom: 18px; }
.slogan { margin: -6px 0 18px; color: #fff; font: 600 20px/1.3 var(--body); letter-spacing: .01em; }
.slogan .spade { color: var(--blue-hi); }
@media (max-width: 760px) { .hero-logo { width: 72px; margin-bottom: 14px; } .slogan { font-size: 18px; } }
/* contact: call + text on top, email / instagram / tiktok below */
.contact-grid { grid-template-columns: repeat(6, 1fr); }
.contact-grid > .c-card { grid-column: span 2; }
.contact-grid > .c-card:nth-child(-n+2) { grid-column: span 3; }
@media (max-width: 760px) { .contact-grid { grid-template-columns: 1fr; } .contact-grid > .c-card, .contact-grid > .c-card:nth-child(-n+2) { grid-column: auto; } }
/* top-quality products band (Harry's request) */
.quality { border-bottom: 1px solid var(--line); background: linear-gradient(90deg, rgba(26,124,245,.16), rgba(26,124,245,.04) 60%), #0b0c0e; }
.quality-in { display: flex; align-items: center; gap: 16px; padding: 22px 20px; }
.quality .ico { flex: none; width: 34px; height: 34px; fill: none; stroke: var(--blue-hi); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.quality p { margin: 0; color: #c9ccd2; font-size: 17px; line-height: 1.5; }
.quality strong { color: #fff; font-family: var(--head); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; margin-right: 6px; }
@media (max-width: 560px) { .quality-in { align-items: flex-start; } .quality p { font-size: 16px; } }
/* Coming soon: one before/after image per card */
.soon-pics.ba { display: block; background: none; }
.soon-pics.ba img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; }
.review:not(.review-long) .more { display: none; }
[hidden] { display: none !important; }