/* ─────────────────────────────────────────────────────────────────────────
   Detail Studio One · "Onyx" theme
   Every colour, rule weight and typeface lives in this token block.
   Re-skin the whole site here — nothing below hardcodes a colour.
   One rule matters: --c-arc is a light/accent colour. Use it for edges,
   glows and calls to action — never as a text colour on light surfaces.
   ───────────────────────────────────────────────────────────────────────── */
:root {
  /* colour */
  --c-void:   #0A0C0F;   /* page ground — paint-depth black          */
  --c-panel:  #11151B;   /* raised surfaces, cards                    */
  --c-seam:   #1D242E;   /* borders, hairlines                        */
  --c-bone:   #E9EDF2;   /* primary text                              */
  --c-mist:   #97A3B2;   /* secondary text                            */
  --c-arc:    #39D5FF;   /* the arc-light accent — CTAs, edges, marks */
  --c-arc-ink:#062730;   /* text on top of --c-arc                    */

  /* type */
  --f-display: "Archivo Black", "Arial Black", system-ui, sans-serif;
  --f-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
            "Helvetica Neue", sans-serif;
  --fs-hero: clamp(2.4rem, 6.5vw, 4.4rem);
  --fs-h2:   clamp(1.6rem, 3.6vw, 2.4rem);
  --fs-body: 1.0625rem;

  /* rhythm */
  --gap: clamp(1rem, 2.5vw, 1.75rem);
  --pad: clamp(1.25rem, 4vw, 2.5rem);
  --band: clamp(3.5rem, 9vw, 6.5rem);
  --radius: 14px;
  --line: 1px solid var(--c-seam);
}

/* ── reset ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--c-void); color: var(--c-bone);
  font-family: var(--f-body); font-size: var(--fs-body); line-height: 1.65;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--f-display); line-height: 1.08; margin: 0; letter-spacing: .01em; }
p { margin: 0 0 1rem; }
:focus-visible { outline: 2px solid var(--c-arc); outline-offset: 3px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--pad); }
.band { padding-block: var(--band); }
.kicker {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: var(--c-arc); margin-bottom: 1.1rem;
}
.kicker::before { content: ""; width: 26px; height: 2px; background: var(--c-arc); }

/* ── top strip ─────────────────────────────────────────────────────────── */
.strip {
  display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; justify-content: space-between;
  padding: .55rem var(--pad); font-size: .82rem; color: var(--c-mist);
  border-bottom: var(--line); background: var(--c-panel);
}
.strip b { color: var(--c-bone); font-weight: 600; }

/* ── header ────────────────────────────────────────────────────────────── */
header.site {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .8rem var(--pad);
  background: color-mix(in srgb, var(--c-void) 88%, transparent);
  backdrop-filter: blur(10px); border-bottom: var(--line);
}
.mark { font-family: var(--f-display); font-size: 1.05rem; letter-spacing: .04em; text-decoration: none; }
.mark span { color: var(--c-arc); }
nav.site { display: flex; gap: 1.4rem; font-size: .92rem; }
nav.site a { text-decoration: none; color: var(--c-mist); }
nav.site a:hover { color: var(--c-bone); }
@media (max-width: 720px) { nav.site { display: none; } }

/* ── buttons ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .85rem 1.5rem; border-radius: 999px; text-decoration: none;
  font-weight: 700; font-size: .98rem; border: 1px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn-arc { background: var(--c-arc); color: var(--c-arc-ink); box-shadow: 0 0 24px color-mix(in srgb, var(--c-arc) 35%, transparent); }
.btn-arc:hover { transform: translateY(-1px); box-shadow: 0 0 34px color-mix(in srgb, var(--c-arc) 50%, transparent); }
.btn-ghost { border-color: var(--c-seam); color: var(--c-bone); }
.btn-ghost:hover { border-color: var(--c-arc); }

/* ── hero ──────────────────────────────────────────────────────────────── */
.hero { position: relative; isolation: isolate; overflow: clip; }
.hero img.bg {
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%;
  object-fit: cover; object-position: center 62%;
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, var(--c-void) 4%, color-mix(in srgb, var(--c-void) 55%, transparent) 45%, color-mix(in srgb, var(--c-void) 78%, transparent) 100%);
}
.hero .wrap { padding-block: clamp(5.5rem, 16vw, 11rem) clamp(3.5rem, 9vw, 6rem); }
.hero h1 { font-size: var(--fs-hero); max-width: 13ch; text-wrap: balance; }
.hero h1 em { font-style: normal; color: var(--c-arc); }
.hero p.lede { max-width: 44ch; color: var(--c-mist); font-size: 1.15rem; margin: 1.2rem 0 1.8rem; }
.hero .cta-row { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; }
.hero .micro { font-size: .82rem; color: var(--c-mist); margin-top: 1rem; }

/* ── proof: before/after ───────────────────────────────────────────────── */
.proof-grid { display: grid; gap: var(--gap); grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .proof-grid { grid-template-columns: 1fr; } }
.proof {
  position: relative; border-radius: var(--radius); overflow: clip;
  border: var(--line); background: var(--c-panel);
}
.proof img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.proof figcaption {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: .8rem 1rem; font-size: .88rem; color: var(--c-mist);
}
.proof figcaption b { color: var(--c-bone); }
.tag {
  position: absolute; top: .8rem; left: .8rem; padding: .25rem .7rem;
  border-radius: 999px; font-size: .72rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  background: color-mix(in srgb, var(--c-void) 72%, transparent);
  border: 1px solid var(--c-seam); backdrop-filter: blur(6px);
}
.tag.arc { color: var(--c-arc); border-color: color-mix(in srgb, var(--c-arc) 45%, var(--c-seam)); }

/* ── packages ──────────────────────────────────────────────────────────── */
.pack-grid { display: grid; gap: var(--gap); grid-template-columns: repeat(3, 1fr); align-items: stretch; }
@media (max-width: 900px) { .pack-grid { grid-template-columns: 1fr; } }
.pack {
  display: flex; flex-direction: column; gap: .9rem;
  background: var(--c-panel); border: var(--line); border-radius: var(--radius);
  padding: calc(var(--pad) * .9);
}
.pack.hot { border-color: color-mix(in srgb, var(--c-arc) 55%, var(--c-seam)); box-shadow: 0 0 40px color-mix(in srgb, var(--c-arc) 12%, transparent); }
.pack h3 { font-size: 1.15rem; }
.pack .price { font-family: var(--f-display); font-size: 2rem; }
.pack .price small { font-family: var(--f-body); font-size: .85rem; color: var(--c-mist); font-weight: 400; }
.pack ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .45rem; font-size: .93rem; color: var(--c-mist); }
.pack li::before { content: "— "; color: var(--c-arc); }
.pack .btn { margin-top: auto; justify-content: center; }
.pack .note { font-size: .78rem; color: var(--c-mist); }

/* ── service area / trust band ─────────────────────────────────────────── */
.split { display: grid; gap: calc(var(--gap) * 1.6); grid-template-columns: 1.1fr .9fr; align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.split img { border-radius: var(--radius); border: var(--line); }
.area-list { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.area-list span {
  padding: .35rem .85rem; border: var(--line); border-radius: 999px;
  font-size: .85rem; color: var(--c-mist);
}
.quote {
  border-left: 3px solid var(--c-arc); padding: .4rem 0 .4rem 1.1rem;
  margin: 1.4rem 0 0; color: var(--c-mist); font-size: .95rem;
}
.quote b { display: block; color: var(--c-bone); margin-top: .4rem; font-size: .82rem; }

/* ── booking CTA ───────────────────────────────────────────────────────── */
.book {
  text-align: center; background:
    radial-gradient(60% 120% at 50% 0%, color-mix(in srgb, var(--c-arc) 14%, transparent), transparent 70%),
    var(--c-panel);
  border-block: var(--line);
}
.book h2 { font-size: var(--fs-h2); max-width: 20ch; margin-inline: auto; text-wrap: balance; }
.book p { max-width: 46ch; margin: 1rem auto 1.6rem; color: var(--c-mist); }
.book .tel { margin-top: 1rem; font-size: .9rem; color: var(--c-mist); }
.book .tel a { color: var(--c-bone); text-decoration: none; font-weight: 600; }

/* ── footer ────────────────────────────────────────────────────────────── */
footer.site {
  padding: 2.2rem var(--pad); display: flex; flex-wrap: wrap; gap: 1rem;
  justify-content: space-between; font-size: .84rem; color: var(--c-mist);
  border-top: var(--line);
}
footer.site a { color: var(--c-mist); }

/* ── section headers ───────────────────────────────────────────────────── */
.head { max-width: 60ch; margin-bottom: calc(var(--gap) * 1.6); }
.head h2 { font-size: var(--fs-h2); }
.head p { color: var(--c-mist); margin-top: .8rem; }