/* ============================================================================
   CBS Auto Body Shop — North Hollywood
   Design system built from the shop's own identity: the gold gradient of their
   logo, the black-and-red livery of the building on Lankershim, and the
   manufacturer certification wall that is their actual competitive edge.
   ========================================================================== */

/* ---- 1. tokens ---------------------------------------------------------- */
:root {
  /* surface */
  --ink:        #06070A;
  --ink-2:      #0A0C11;
  --ink-3:      #10131A;
  --ink-4:      #171B24;
  --hair:       rgba(227, 178, 60, .18);
  --hair-soft:  rgba(255, 255, 255, .08);

  /* gold, sampled from the CBS logo gradient */
  --gold-hi:    #F7E9A8;
  --gold:       #E3B23C;
  --gold-deep:  #A97C1E;
  --gold-glow:  rgba(227, 178, 60, .30);
  --gold-grad:  linear-gradient(103deg, #C6912A 0%, #F7E9A8 38%, #E3B23C 62%, #A97C1E 100%);

  /* the red stripe from the shop's own signage */
  --signal:     #C8102E;

  /* text */
  --bone:       #F4F1EA;
  --text:       #D7D9DE;
  --mute:       #939AA6;
  --faint:      #666D79;

  /* type */
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body:    "Inter Tight", "Inter", system-ui, -apple-system, sans-serif;
  --serif:   "Instrument Serif", Georgia, "Times New Roman", serif;

  /* rhythm — one section token everywhere, so no seam is ever an accident */
  --sp-section: clamp(68px, 7.1vw, 106px);
  --sp-block:   clamp(34px, 4.2vw, 60px);
  --gutter:     clamp(20px, 5vw, 56px);
  --maxw:       1272px;
  --narrow:     780px;

  --radius:     2px;
  --radius-lg:  4px;

  --ease:       cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);

  --header-h:   82px;
}

@media (max-width: 900px) { :root { --header-h: 68px; } }

/* ---- 2. reset ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 20px);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.68;
  font-weight: 350;
  letter-spacing: .003em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  /* Long unbreakable tokens — the shop's email addresses in the footer — pushed
     the document 50px wider than a 390px phone. Break them instead. */
  overflow-wrap: break-word;
}
body.is-locked { overflow: hidden; }

img, svg, video { max-width: 100%; display: block; }
figure { margin: 0; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
::selection { background: var(--gold); color: #0A0A0A; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; top: -100px; left: 16px; z-index: 999;
  background: var(--gold); color: #08090C; padding: 12px 20px; font-weight: 700;
}
.skip-link:focus { top: 12px; }

/* ---- 3. typography ------------------------------------------------------ */
h1, h2, h3, h4, h5 {
  font-family: var(--display);
  color: var(--bone);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.022em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 7.4vw, 5.6rem); font-weight: 800; letter-spacing: -.035em; }
h2 { font-size: clamp(2rem, 4.6vw, 3.5rem); letter-spacing: -.03em; }
h3 { font-size: clamp(1.28rem, 2.1vw, 1.72rem); letter-spacing: -.02em; }
h4 { font-size: clamp(1.06rem, 1.4vw, 1.2rem); letter-spacing: -.012em; }
p  { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

.u-serif { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; }
.u-gold  { color: var(--gold); }
.u-bone  { color: var(--bone); }
.u-mute  { color: var(--mute); }

.gold-text {
  background: var(--gold-grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: .7em;
  font-family: var(--display);
  font-size: .72rem; font-weight: 700;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 22px;
}
.eyebrow::before {
  content: ""; width: 34px; height: 1px; background: var(--gold);
  opacity: .8; flex: none;
}
.eyebrow.is-centered { justify-content: center; }
.eyebrow.is-centered::after {
  content: ""; width: 34px; height: 1px; background: var(--gold); opacity: .8; flex: none;
}

.lede {
  font-size: clamp(1.04rem, 1.5vw, 1.22rem);
  line-height: 1.62;
  color: var(--mute);
  max-width: 62ch;
  font-weight: 320;
}
.is-centered .lede, .t-center .lede { margin-inline: auto; }

.rule { height: 1px; background: var(--gold); opacity: .55; margin: 28px 0 0; }

/* ---- 4. layout ---------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: calc(var(--narrow) + var(--gutter) * 2); }
.section { padding-block: var(--sp-section); position: relative; }
.section--tight { padding-block: calc(var(--sp-section) * .62); }
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }
.section--raised { background: var(--ink-2); }
.section--carbon {
  background:
    radial-gradient(900px 480px at 78% -8%, rgba(227,178,60,.09), transparent 62%),
    var(--ink-2);
}
.t-center { text-align: center; }

.hairline { height: 1px; background: var(--hair-soft); border: 0; margin: 0; }
.hairline--gold { background: linear-gradient(90deg, transparent, var(--hair) 18%, var(--hair) 82%, transparent); }

.grid { display: grid; gap: clamp(18px, 2.2vw, 30px); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .grid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); } .grid--3 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 680px)  { .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); } }

/* section head — the standard block that opens every section */
.head { max-width: 900px; margin-bottom: var(--sp-block); }
.head.is-centered { margin-inline: auto; text-align: center; }
.head__split {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(24px, 4vw, 72px); align-items: end; margin-bottom: var(--sp-block);
  max-width: none;
}
@media (max-width: 860px) { .head__split { grid-template-columns: minmax(0,1fr); align-items: start; } }

/* ---- 5. buttons --------------------------------------------------------- */
.btn {
  --btn-bg: var(--gold);
  --btn-fg: #0A0A0C;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .62em;
  font-family: var(--display); font-weight: 700; font-size: .82rem;
  letter-spacing: .16em; text-transform: uppercase;
  padding: 17px 30px; border-radius: var(--radius);
  background: var(--btn-bg); color: var(--btn-fg);
  overflow: hidden; isolation: isolate;
  transition: transform 420ms var(--ease), box-shadow 420ms var(--ease), color 300ms var(--ease);
  will-change: transform;
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--gold-grad);
  opacity: 0; transition: opacity 380ms var(--ease);
}
.btn:hover { box-shadow: 0 14px 40px -14px var(--gold-glow); }
.btn:hover::before { opacity: 1; }
.btn:active { transform: translateY(1px) scale(.995); }
.btn svg { flex: none; }

.btn--ghost {
  --btn-fg: var(--bone);
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(244,241,234,.24);
}
.btn--ghost::before { background: rgba(244,241,234,.06); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--gold), 0 14px 40px -18px var(--gold-glow); color: var(--gold); }

.btn--outline-gold {
  --btn-fg: var(--gold);
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(227,178,60,.42);
}
.btn--outline-gold::before { background: rgba(227,178,60,.1); }

.btn--lg { padding: 20px 38px; font-size: .86rem; }
.btn--block { display: flex; width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.btn-row.is-centered { justify-content: center; }

/* text link with a gold underline that draws in */
.tlink {
  display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--display); font-weight: 700; font-size: .78rem;
  letter-spacing: .17em; text-transform: uppercase; color: var(--gold);
  padding-bottom: 5px; position: relative;
}
.tlink::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: right center;
  transition: transform 520ms var(--ease);
}
.tlink:hover::after { transform: scaleX(1); transform-origin: left center; }
.tlink svg { transition: transform 400ms var(--ease); }
.tlink:hover svg { transform: translateX(4px); }

/* ---- 6. header ---------------------------------------------------------- */
.topbar {
  position: relative; z-index: 60;
  background: #040507;
  border-bottom: 1px solid rgba(255,255,255,.05);
  font-size: .76rem; color: var(--mute);
}
.topbar__in {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  min-height: 40px; padding-block: 7px;
}
.topbar__certs { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; letter-spacing: .04em; }
.topbar__certs b { color: var(--gold); font-weight: 600; }
.topbar__right { display: flex; align-items: center; gap: 18px; white-space: nowrap; }
.topbar a:hover { color: var(--gold); }
.status { display: inline-flex; align-items: center; gap: 7px; }
.status__dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--faint); flex: none;
}
.status.is-open .status__dot { background: #46D07A; box-shadow: 0 0 0 0 rgba(70,208,122,.55); animation: pulse 2.4s infinite; }
.status.is-closed .status__dot { background: #C8102E; }
@keyframes pulse {
  70%  { box-shadow: 0 0 0 7px rgba(70,208,122,0); }
  100% { box-shadow: 0 0 0 0 rgba(70,208,122,0); }
}
@media (max-width: 940px) { .topbar { display: none; } }

.header {
  position: sticky; top: 0; z-index: 70;
  background: rgba(6,7,10,.72);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: background 420ms var(--ease), border-color 420ms var(--ease), box-shadow 420ms var(--ease);
}
.header.is-stuck {
  background: rgba(5,6,9,.94);
  border-bottom-color: var(--hair);
  box-shadow: 0 18px 50px -30px #000;
}
.header__in {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  height: var(--header-h);
}
.brand { display: flex; align-items: center; flex: none; }
.brand img {
  height: 42px; width: auto;
  transition: height 380ms var(--ease), filter 380ms var(--ease);
  filter: drop-shadow(0 2px 14px rgba(227,178,60,.22));
}
.header.is-stuck .brand img { height: 36px; }
@media (max-width: 900px) { .brand img { height: 34px; } }

.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  position: relative;
  font-family: var(--display); font-size: .78rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--text); padding: 10px 13px; border-radius: var(--radius);
  transition: color 280ms var(--ease);
}
.nav a::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 4px; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: right center;
  transition: transform 460ms var(--ease);
}
.nav a:hover { color: var(--bone); }
.nav a:hover::after { transform: scaleX(1); transform-origin: left center; }
.nav a[aria-current="page"] { color: var(--gold); }
.nav a[aria-current="page"]::after { transform: scaleX(1); }
@media (max-width: 1140px) { .nav { display: none; } }

.header__cta { display: flex; align-items: center; gap: 10px; flex: none; }
.header__phone {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--display); font-weight: 700; font-size: .92rem;
  letter-spacing: .02em; color: var(--bone);
  padding: 10px 4px;
}
.header__phone:hover { color: var(--gold); }
.header__phone svg { color: var(--gold); }
@media (max-width: 1140px) { .header__cta .btn { display: none; } }
@media (max-width: 620px)  { .header__phone span { display: none; } }

/* burger */
.burger {
  display: none; width: 46px; height: 46px; align-items: center; justify-content: center;
  border: 1px solid rgba(244,241,234,.18); border-radius: var(--radius); flex: none;
}
.burger span {
  display: block; width: 20px; height: 1.5px; background: var(--bone); position: relative;
  transition: background 200ms var(--ease);
}
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 1.5px; background: var(--bone);
  transition: transform 420ms var(--ease), top 260ms var(--ease);
}
.burger span::before { top: -6px; } .burger span::after  { top: 6px; }
.burger.is-open span { background: transparent; }
.burger.is-open span::before { top: 0; transform: rotate(45deg); }
.burger.is-open span::after  { top: 0; transform: rotate(-45deg); }
@media (max-width: 1140px) { .burger { display: flex; } }

/* mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: 65;
  background: linear-gradient(180deg, #07080C 0%, #0B0D13 100%);
  padding: calc(var(--header-h) + 34px) var(--gutter) 40px;
  overflow-y: auto;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 460ms var(--ease), visibility 460ms;
}
.drawer.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.drawer__nav { display: flex; flex-direction: column; border-top: 1px solid var(--hair-soft); }
.drawer__nav a {
  font-family: var(--display); font-size: clamp(1.5rem, 6.6vw, 2.1rem); font-weight: 700;
  letter-spacing: -.02em; color: var(--bone);
  padding: 18px 0; border-bottom: 1px solid var(--hair-soft);
  display: flex; align-items: baseline; gap: 14px;
  opacity: 0; transform: translateY(20px);
  transition: opacity 560ms var(--ease), transform 560ms var(--ease), color 240ms var(--ease);
}
.drawer.is-open .drawer__nav a { opacity: 1; transform: none; }
.drawer__nav a i {
  font-family: var(--body); font-style: normal; font-size: .7rem; color: var(--gold);
  letter-spacing: .1em; font-weight: 500;
}
.drawer__nav a:hover, .drawer__nav a[aria-current="page"] { color: var(--gold); }
.drawer__foot { margin-top: 34px; display: grid; gap: 12px; }
.drawer__meta { color: var(--mute); font-size: .9rem; margin-top: 22px; line-height: 1.8; }

/* ---- 7. hero ------------------------------------------------------------ */
.hero {
  position: relative;
  min-height: min(94svh, 900px);
  display: flex; align-items: flex-end;
  padding-block: clamp(90px, 14vh, 150px) clamp(48px, 7vh, 84px);
  overflow: hidden;
  isolation: isolate;
}
.hero__media { position: absolute; inset: -12% 0 -12%; z-index: -3; }
.hero__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%;
  filter: grayscale(.34) contrast(1.06) brightness(.5);
  transform: scale(1.08);
}
.hero__scrim {
  position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(180deg, rgba(6,7,10,.86) 0%, rgba(6,7,10,.30) 34%, rgba(6,7,10,.80) 74%, var(--ink) 100%),
    radial-gradient(120% 78% at 14% 84%, rgba(6,7,10,.9), transparent 62%);
}
.hero__glow {
  position: absolute; z-index: -1; pointer-events: none;
  width: 62vw; height: 62vw; max-width: 900px; max-height: 900px;
  right: -12vw; top: 4vh;
  background: radial-gradient(circle, rgba(227,178,60,.16), transparent 62%);
  filter: blur(24px);
}
.hero__in { position: relative; width: 100%; }
.hero__title { margin-bottom: 26px; }
.hero__title .line { display: block; overflow: hidden; }
.hero__title .line > span { display: block; }
.hero__lede { max-width: 54ch; font-size: clamp(1.06rem, 1.6vw, 1.28rem); color: #C4C9D2; }
.hero__actions { margin-top: 34px; }
.hero__foot {
  margin-top: clamp(46px, 7vw, 80px);
  padding-top: 26px; border-top: 1px solid var(--hair);
  display: flex; flex-wrap: wrap; gap: clamp(20px, 4vw, 54px); align-items: center;
}
.hero__stat { display: grid; gap: 2px; }
.hero__stat b {
  font-family: var(--display); font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 800;
  color: var(--bone); letter-spacing: -.03em; line-height: 1;
}
.hero__stat span { font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--faint); }

.scroll-cue {
  position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%);
  display: grid; justify-items: center; gap: 10px; z-index: 2;
  font-size: .64rem; letter-spacing: .3em; text-transform: uppercase; color: var(--faint);
}
.scroll-cue i { display: block; width: 1px; height: 46px; background: linear-gradient(180deg, var(--gold), transparent); }
@media (max-width: 900px) { .scroll-cue { display: none; } }

/* scroll progress */
.progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%; z-index: 90;
  transform-origin: left center; transform: scaleX(0);
  background: var(--gold-grad);
  pointer-events: none;
}

/* ---- 8. certification marquee ------------------------------------------- */
.marquee {
  position: relative; overflow: hidden;
  padding-block: clamp(26px, 3.4vw, 40px);
  border-block: 1px solid var(--hair);
  background: var(--ink-2);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.marquee__track { display: flex; width: max-content; animation: slide 42s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__set { display: flex; align-items: center; gap: clamp(40px, 6vw, 88px); padding-right: clamp(40px, 6vw, 88px); }
.marquee__item { display: flex; align-items: center; gap: 16px; flex: none; }
/* Manufacturer marks sit on a light plate. Silver stars and black BMW rings
   simply vanish on a black page — the plate is what makes six very different
   logos read as one credential wall. */
.marquee__item img {
  height: 58px; width: 92px; object-fit: contain;
  padding: 11px 14px; background: rgba(244,241,234,.94);
  border-radius: 2px; opacity: .84;
  transition: opacity 460ms var(--ease), transform 560ms var(--ease), box-shadow 460ms var(--ease);
}
.marquee__item:hover img {
  opacity: 1; transform: translateY(-3px);
  box-shadow: 0 12px 30px -14px rgba(227,178,60,.5);
}
.marquee__item b {
  font-family: var(--display); font-size: .74rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--faint);
  transition: color 400ms var(--ease); white-space: nowrap;
}
.marquee__item:hover b { color: var(--gold); }
@keyframes slide { to { transform: translate3d(-50%, 0, 0); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* ---- 9. cards ----------------------------------------------------------- */
.card {
  position: relative;
  background: linear-gradient(168deg, var(--ink-3), var(--ink-2));
  border: 1px solid var(--hair-soft);
  border-radius: var(--radius-lg);
  padding: clamp(26px, 2.6vw, 38px);
  overflow: hidden;
  transition: border-color 480ms var(--ease), transform 620ms var(--ease), background 480ms var(--ease);
}
.card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(227,178,60,.10), transparent 62%);
  transition: opacity 520ms var(--ease);
}
.card:hover { border-color: var(--hair); transform: translateY(-4px); }
.card:hover::after { opacity: 1; }
.card__idx {
  font-family: var(--display); font-size: .72rem; font-weight: 700;
  letter-spacing: .22em; color: var(--gold-deep); margin-bottom: 20px; display: block;
}
.card h3 { margin-bottom: 12px; }
.card p { color: var(--mute); font-size: .96rem; margin: 0; }
.card__list { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.card__list li {
  position: relative; padding-left: 20px; font-size: .9rem; color: var(--mute);
}
.card__list li::before {
  content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 1px; background: var(--gold);
}
.card__foot { margin-top: 24px; }

.card--media { padding: 0; }
.card--media .card__body { padding: clamp(24px, 2.4vw, 34px); }
.card__img { position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: var(--ink-4); }
.card__img img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(.28) brightness(.86);
  transition: transform 1200ms var(--ease), filter 800ms var(--ease);
}
.card:hover .card__img img { transform: scale(1.05); filter: grayscale(0) brightness(1); }

/* icon tile */
.itile {
  width: 52px; height: 52px; display: grid; place-items: center; flex: none;
  border: 1px solid var(--hair); border-radius: var(--radius);
  background: rgba(227,178,60,.06); color: var(--gold);
  margin-bottom: 22px;
  transition: background 460ms var(--ease), transform 620ms var(--ease);
}
.card:hover .itile { background: rgba(227,178,60,.13); transform: translateY(-2px); }
.itile img { width: 26px; height: 26px; object-fit: contain; }

/* ---- 10. stats ---------------------------------------------------------- */
.stats {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  border: 1px solid var(--hair-soft); border-radius: var(--radius-lg); overflow: hidden;
  background: linear-gradient(160deg, var(--ink-3), var(--ink-2));
}
.stat {
  padding: clamp(28px, 3.2vw, 46px) clamp(20px, 2.4vw, 34px);
  border-right: 1px solid var(--hair-soft);
  position: relative;
}
.stat:last-child { border-right: 0; }
.stat b {
  display: block; font-family: var(--display); font-weight: 800;
  font-size: clamp(2.1rem, 4.4vw, 3.4rem); line-height: 1; letter-spacing: -.04em;
  background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: 12px;
}
.stat span { font-size: .74rem; letter-spacing: .19em; text-transform: uppercase; color: var(--faint); }
@media (max-width: 900px) {
  .stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .stat:nth-child(2n) { border-right: 0; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid var(--hair-soft); }
}

/* ---- 11. split feature -------------------------------------------------- */
.split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 88px); align-items: center;
}
.split--wide-left  { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); }
.split--wide-right { grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); }
@media (max-width: 900px) { .split, .split--wide-left, .split--wide-right { grid-template-columns: minmax(0,1fr); } }

.figure { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: var(--ink-3); }
.figure img { width: 100%; height: 100%; object-fit: cover; }
.figure--tall { aspect-ratio: 4 / 5; }
.figure--wide { aspect-ratio: 16 / 10; }
.figure--square { aspect-ratio: 1 / 1; }
.figure__cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 20px 22px;
  background: linear-gradient(180deg, transparent, rgba(4,5,8,.9));
  font-size: .78rem; letter-spacing: .13em; text-transform: uppercase; color: var(--bone);
  font-family: var(--display); font-weight: 600;
}
.figure__frame {
  position: absolute; inset: 12px; border: 1px solid rgba(227,178,60,.28); pointer-events: none;
  border-radius: 2px;
}

/* stacked photo pair */
.photo-stack { position: relative; }
.photo-stack__back { width: 78%; margin-left: auto; }
.photo-stack__front {
  width: 58%; position: absolute; left: 0; bottom: -8%;
  box-shadow: 0 40px 90px -40px #000; border: 1px solid rgba(244,241,234,.1);
}
@media (max-width: 560px) {
  .photo-stack__back { width: 88%; }
  .photo-stack__front { width: 52%; bottom: -6%; }
}

/* ---- 12. process rail --------------------------------------------------- */
.process { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(28px, 5vw, 88px); }
@media (max-width: 940px) { .process { grid-template-columns: minmax(0,1fr); } }
.process__sticky { position: sticky; top: calc(var(--header-h) + 42px); align-self: start; }
@media (max-width: 940px) { .process__sticky { position: static; } }
.process__list { position: relative; display: grid; gap: 0; }
.process__line {
  position: absolute; left: 25px; top: 12px; bottom: 12px; width: 1px;
  background: var(--hair-soft);
}
.process__line i {
  position: absolute; inset: 0 auto 0 0; width: 1px; height: 100%;
  background: linear-gradient(180deg, var(--gold), var(--gold-deep));
  transform-origin: top center; transform: scaleY(var(--p, 0));
  transition: transform 120ms linear;
}
.step {
  position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr);
  gap: clamp(18px, 2.4vw, 30px); padding-block: clamp(22px, 2.6vw, 34px);
  border-bottom: 1px solid var(--hair-soft);
}
.step:last-child { border-bottom: 0; }
.step__num {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--hair-soft); background: var(--ink);
  font-family: var(--display); font-weight: 800; font-size: .9rem; color: var(--faint);
  transition: color 560ms var(--ease), border-color 560ms var(--ease), background 560ms var(--ease), box-shadow 560ms var(--ease);
  position: relative; z-index: 1;
}
.step.is-in .step__num {
  color: #0A0A0C; border-color: transparent; background: var(--gold-grad);
  box-shadow: 0 0 0 6px rgba(227,178,60,.08);
}
.step h3 { margin-bottom: 10px; }
.step p { color: var(--mute); font-size: .96rem; margin: 0; }
.step__meta {
  display: inline-block; margin-top: 14px; font-size: .72rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold-deep); font-family: var(--display); font-weight: 700;
}

/* ---- 13. certifications wall -------------------------------------------- */
.certs { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1px; background: var(--hair-soft); border: 1px solid var(--hair-soft); border-radius: var(--radius-lg); overflow: hidden; }
@media (max-width: 900px) { .certs { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .certs { grid-template-columns: minmax(0,1fr); } }
.cert {
  background: var(--ink-2); padding: clamp(28px, 3vw, 42px);
  display: grid; gap: 18px; align-content: start;
  transition: background 520ms var(--ease);
  position: relative;
}
.cert::before {
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 2px;
  background: var(--gold-grad); transform: scaleX(0); transform-origin: left center;
  transition: transform 700ms var(--ease);
}
.cert:hover { background: var(--ink-3); }
.cert:hover::before { transform: scaleX(1); }
.cert__logo { display: flex; align-items: center; }
.cert__logo img {
  height: 76px; width: 116px; object-fit: contain;
  padding: 13px 18px; background: rgba(244,241,234,.95); border-radius: 2px;
  transition: transform 620ms var(--ease), box-shadow 500ms var(--ease);
}
.cert:hover .cert__logo img { transform: translateY(-3px); box-shadow: 0 16px 34px -18px rgba(227,178,60,.55); }
.cert h3 { font-size: 1.16rem; margin: 0; }
.cert p { font-size: .92rem; color: var(--mute); margin: 0; }
.cert__tag {
  font-family: var(--display); font-size: .68rem; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold);
}

/* ---- 14. testimonials --------------------------------------------------- */
.rail {
  display: flex; gap: clamp(16px, 2vw, 26px);
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 18px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
  scrollbar-width: thin; scrollbar-color: var(--gold-deep) transparent;
  cursor: grab;
}
.rail.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.rail::-webkit-scrollbar { height: 3px; }
.rail::-webkit-scrollbar-thumb { background: var(--gold-deep); }
.rail::-webkit-scrollbar-track { background: rgba(255,255,255,.05); }
.rail > * { scroll-snap-align: start; flex: 0 0 min(420px, 84vw); }

.quote {
  background: linear-gradient(168deg, var(--ink-3), var(--ink-2));
  border: 1px solid var(--hair-soft); border-radius: var(--radius-lg);
  padding: clamp(26px, 2.6vw, 36px); display: flex; flex-direction: column; gap: 18px;
  transition: border-color 480ms var(--ease);
}
.quote:hover { border-color: var(--hair); }
.quote__stars { display: flex; gap: 3px; color: var(--gold); }
.quote h3 { margin: 0; font-size: 1.02rem; color: var(--bone); }
.quote p { color: var(--mute); font-size: .95rem; margin: 0; flex: 1; }
.quote footer {
  display: flex; align-items: center; gap: 12px; padding-top: 16px;
  border-top: 1px solid var(--hair-soft);
  font-size: .82rem; letter-spacing: .1em; text-transform: uppercase;
  font-family: var(--display); font-weight: 600; color: var(--faint);
}
.quote footer b { color: var(--bone); font-weight: 700; letter-spacing: .06em; }
.rail__hint {
  display: flex; align-items: center; gap: 10px; margin-top: 20px;
  font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--faint);
}

/* ---- 15. gallery -------------------------------------------------------- */
.gallery { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(10px, 1.2vw, 16px); }
.gallery__item { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--ink-3); }
.gallery__item img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(.2) brightness(.9);
  transition: transform 1400ms var(--ease), filter 700ms var(--ease);
}
.gallery__item:hover img { transform: scale(1.06); filter: none; }
.gallery__item figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 18px;
  background: linear-gradient(180deg, transparent, rgba(4,5,8,.92));
  font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
  font-family: var(--display); font-weight: 600; color: var(--bone);
  transform: translateY(8px); opacity: 0;
  transition: transform 520ms var(--ease), opacity 520ms var(--ease);
}
.gallery__item:hover figcaption { transform: none; opacity: 1; }
.g-6 { grid-column: span 6; aspect-ratio: 4/3; }
.g-4 { grid-column: span 4; aspect-ratio: 1/1; }
.g-8 { grid-column: span 8; aspect-ratio: 16/9; }
.g-12 { grid-column: span 12; aspect-ratio: 21/9; }
@media (max-width: 760px) {
  .g-6, .g-4, .g-8 { grid-column: span 12; aspect-ratio: 4/3; }
  .g-12 { aspect-ratio: 16/10; }
}

/* ---- 16. accordion ------------------------------------------------------ */
.acc { border-top: 1px solid var(--hair-soft); }
.acc__item { border-bottom: 1px solid var(--hair-soft); }
.acc__btn {
  width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
  padding: clamp(20px, 2.2vw, 28px) 0; text-align: left;
  font-family: var(--display); font-weight: 700; font-size: clamp(1rem, 1.5vw, 1.16rem);
  color: var(--bone); letter-spacing: -.012em;
  transition: color 300ms var(--ease);
}
.acc__btn:hover { color: var(--gold); }
.acc__ico {
  flex: none; width: 26px; height: 26px; position: relative; margin-top: 3px;
  border: 1px solid var(--hair); border-radius: 50%;
}
.acc__ico::before, .acc__ico::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: var(--gold);
  transform: translate(-50%, -50%); transition: transform 460ms var(--ease), opacity 300ms var(--ease);
}
.acc__ico::before { width: 10px; height: 1px; }
.acc__ico::after  { width: 1px; height: 10px; }
.acc__item.is-open .acc__ico::after { transform: translate(-50%,-50%) rotate(90deg); opacity: 0; }
.acc__panel { overflow: hidden; height: 0; transition: height 560ms var(--ease); }
.acc__panel > div { padding-bottom: clamp(22px, 2.4vw, 30px); color: var(--mute); max-width: 74ch; }

/* ---- 17. forms ---------------------------------------------------------- */
.form { display: grid; gap: 18px; }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
@media (max-width: 620px) { .form__row { grid-template-columns: minmax(0,1fr); } }
.field { display: grid; gap: 9px; }
.field > label {
  font-family: var(--display); font-size: .7rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--faint);
}
.field > label .req { color: var(--gold); }
.field input, .field textarea, .field select {
  width: 100%; background: var(--ink-2); border: 1px solid var(--hair-soft);
  border-radius: var(--radius); padding: 15px 16px; color: var(--bone);
  font-size: .98rem; font-family: var(--body);
  transition: border-color 340ms var(--ease), background 340ms var(--ease), box-shadow 340ms var(--ease);
  appearance: none;
}
.field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 1px), calc(100% - 15px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
  padding-right: 44px;
}
.field select option { background: var(--ink-2); color: var(--bone); }
.field textarea { min-height: 148px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--gold); background: var(--ink-3);
  box-shadow: 0 0 0 3px rgba(227,178,60,.1);
}
.field input::placeholder, .field textarea::placeholder { color: #5C626D; }
.consent {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: .8rem; line-height: 1.6; color: var(--faint);
}
.consent input { width: 18px; height: 18px; margin-top: 2px; flex: none; accent-color: var(--gold); }
.form__note { font-size: .78rem; color: var(--faint); }
.form__status { font-size: .9rem; padding: 14px 16px; border-radius: var(--radius); display: none; }
.form__status.is-ok   { display: block; background: rgba(70,208,122,.1); border: 1px solid rgba(70,208,122,.34); color: #9BE7BA; }
.form__status.is-err  { display: block; background: rgba(200,16,46,.1);  border: 1px solid rgba(200,16,46,.4);  color: #F0A0AC; }

/* ---- 18. contact panel -------------------------------------------------- */
.info-list { display: grid; gap: 2px; }
.info {
  display: grid; grid-template-columns: 44px minmax(0,1fr); gap: 18px; align-items: start;
  padding: 20px 0; border-bottom: 1px solid var(--hair-soft);
}
.info:first-child { padding-top: 0; }
.info__ico {
  width: 44px; height: 44px; display: grid; place-items: center; color: var(--gold);
  border: 1px solid var(--hair); border-radius: var(--radius); background: rgba(227,178,60,.05);
}
.info h4 { margin: 0 0 5px; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--faint); font-weight: 700; }
.info p, .info a { margin: 0; color: var(--bone); font-size: 1.02rem; line-height: 1.6; }
.info a:hover { color: var(--gold); }

.hours { width: 100%; border-collapse: collapse; font-size: .95rem; }
.hours th, .hours td { text-align: left; padding: 11px 0; border-bottom: 1px solid var(--hair-soft); font-weight: 400; }
.hours th { color: var(--mute); font-weight: 400; }
.hours td { color: var(--bone); text-align: right; font-variant-numeric: tabular-nums; }
.hours tr.is-today th { color: var(--gold); }
.hours tr.is-today td { color: var(--gold); }
.hours tr:last-child th, .hours tr:last-child td { border-bottom: 0; }

.map-frame {
  position: relative; overflow: hidden; border-radius: var(--radius-lg);
  border: 1px solid var(--hair-soft); background: var(--ink-3); aspect-ratio: 16/10;
}
.map-frame iframe { width: 100%; height: 100%; border: 0; filter: grayscale(1) invert(.92) contrast(.86); }

/* ---- 19. CTA band ------------------------------------------------------- */
.cta-band {
  position: relative; overflow: hidden; isolation: isolate;
  border-block: 1px solid var(--hair);
}
.cta-band__bg { position: absolute; inset: -18% 0; z-index: -2; }
.cta-band__bg img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.6) brightness(.32); }
.cta-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(6,7,10,.95) 6%, rgba(6,7,10,.62) 52%, rgba(6,7,10,.92) 100%);
}

/* ---- 20. page hero (interior) ------------------------------------------- */
.phero {
  position: relative; overflow: hidden; isolation: isolate;
  padding-block: clamp(72px, 12vw, 148px) clamp(56px, 8vw, 96px);
  border-bottom: 1px solid var(--hair);
}
.phero__bg { position: absolute; inset: -14% 0; z-index: -2; }
.phero__bg img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.5) brightness(.34); }
.phero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(6,7,10,.9), rgba(6,7,10,.72) 46%, var(--ink));
}
.phero h1 { font-size: clamp(2.2rem, 5.6vw, 4.2rem); margin-bottom: 20px; }
.crumbs {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 26px;
  font-size: .72rem; letter-spacing: .17em; text-transform: uppercase; color: var(--faint);
  font-family: var(--display); font-weight: 600;
}
.crumbs a:hover { color: var(--gold); }
.crumbs span { color: var(--gold-deep); }

/* ---- 21. prose (legal pages) -------------------------------------------- */
.prose { max-width: 74ch; }
.prose h2 {
  font-size: clamp(1.32rem, 2.2vw, 1.72rem); margin-top: 2.4em; margin-bottom: .6em;
  padding-top: 1.2em; border-top: 1px solid var(--hair-soft);
}
.prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 { font-size: 1.08rem; margin-top: 1.9em; margin-bottom: .5em; color: var(--gold); }
.prose p, .prose li { color: var(--mute); }
.prose ul, .prose ol { padding-left: 20px; margin: 0 0 1.2em; display: grid; gap: 9px; }
.prose li::marker { color: var(--gold-deep); }
.prose a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose strong { color: var(--bone); font-weight: 600; }
.prose__meta {
  font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--faint);
  padding-bottom: 26px; margin-bottom: 34px; border-bottom: 1px solid var(--hair-soft);
}

/* ---- 22. footer --------------------------------------------------------- */
.footer { background: #040507; border-top: 1px solid var(--hair); padding-top: clamp(56px, 6vw, 88px); }
.footer__grid {
  display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 56px); padding-bottom: clamp(44px, 5vw, 68px);
}
@media (max-width: 1000px) { .footer__grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px)  { .footer__grid { grid-template-columns: minmax(0,1fr); } }
.footer__brand img { height: 54px; width: auto; margin-bottom: 22px; }
.footer__brand p { color: var(--faint); font-size: .92rem; max-width: 38ch; }
.footer h4 {
  font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold);
  margin-bottom: 20px; font-weight: 700;
}
.footer__links { display: grid; gap: 11px; list-style: none; margin: 0; padding: 0; }
.footer__links a { color: var(--mute); font-size: .94rem; transition: color 280ms var(--ease), padding-left 320ms var(--ease); }
.footer__links a:hover { color: var(--gold); padding-left: 5px; }
.footer__bar {
  border-top: 1px solid var(--hair-soft); padding-block: 24px;
  display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: center; justify-content: space-between;
  font-size: .8rem; color: var(--faint);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: 20px; }
.footer__legal a:hover { color: var(--gold); }
.socials { display: flex; gap: 10px; }
.socials a {
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px solid var(--hair-soft); border-radius: var(--radius); color: var(--mute);
  transition: color 320ms var(--ease), border-color 320ms var(--ease), transform 460ms var(--ease);
}
.socials a:hover { color: var(--gold); border-color: var(--hair); transform: translateY(-3px); }

/* ---- 23. sticky mobile action bar --------------------------------------- */
.actionbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  display: none; grid-template-columns: repeat(3, 1fr);
  background: rgba(5,6,9,.96); backdrop-filter: blur(14px);
  border-top: 1px solid var(--hair);
  transform: translateY(105%); transition: transform 520ms var(--ease);
  padding-bottom: env(safe-area-inset-bottom);
}
.actionbar.is-up { transform: none; }
.actionbar a {
  display: grid; justify-items: center; gap: 5px; padding: 11px 6px 12px;
  font-family: var(--display); font-size: .64rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--mute);
  border-right: 1px solid var(--hair-soft);
}
.actionbar a:last-child { border-right: 0; }
.actionbar a svg { color: var(--gold); }
.actionbar a.is-primary { background: var(--gold); color: #0A0A0C; }
.actionbar a.is-primary svg { color: #0A0A0C; }
@media (max-width: 900px) { .actionbar { display: grid; } body { padding-bottom: 0; } }

/* ---- 24. misc ----------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 14px; border: 1px solid var(--hair); border-radius: 100px;
  background: rgba(227,178,60,.05);
  font-family: var(--display); font-size: .68rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--gold);
}
.badge img { height: 14px; width: auto; }

.pull {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.5rem, 3.2vw, 2.3rem); line-height: 1.3; color: var(--bone);
  letter-spacing: -.015em; max-width: 22ch;
}

.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.checklist li { display: grid; grid-template-columns: 22px minmax(0,1fr); gap: 14px; align-items: start; color: var(--mute); }
.checklist li svg { color: var(--gold); margin-top: 4px; }
.checklist li b { color: var(--bone); font-weight: 600; }

.note {
  border-left: 2px solid var(--gold); background: rgba(227,178,60,.04);
  padding: 22px 24px; border-radius: 0 var(--radius) var(--radius) 0;
}
.note p:last-child { margin-bottom: 0; }
.note strong { color: var(--gold); }

.pill-row { display: flex; flex-wrap: wrap; gap: 10px; }
.pill {
  padding: 9px 16px; border: 1px solid var(--hair-soft); border-radius: 100px;
  font-size: .8rem; color: var(--mute);
  transition: border-color 340ms var(--ease), color 340ms var(--ease), background 340ms var(--ease);
}
.pill:hover { border-color: var(--hair); color: var(--gold); background: rgba(227,178,60,.05); }

.plate {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--display); font-weight: 800; letter-spacing: .04em;
  color: var(--bone);
}

/* ---- 25. print ---------------------------------------------------------- */
@media print {
  .header, .topbar, .actionbar, .drawer, .progress, .cta-band, .marquee { display: none !important; }
  body { background: #fff; color: #111; }
  h1,h2,h3,h4 { color: #111; }
  a { color: #111; }
}

/* ---- 26. lightbox ------------------------------------------------------- */
.lb {
  position: fixed; inset: 0; z-index: 150; display: grid; place-items: center;
  background: rgba(4,5,8,.96); backdrop-filter: blur(10px);
  padding: clamp(20px, 5vw, 64px);
  opacity: 0; visibility: hidden; transition: opacity 420ms var(--ease), visibility 420ms;
}
.lb.is-open { opacity: 1; visibility: visible; }
.lb__fig { margin: 0; max-width: min(1100px, 92vw); display: grid; gap: 16px; justify-items: center; }
.lb__fig img { max-height: 78svh; width: auto; border-radius: var(--radius); }
.lb__fig figcaption {
  font-family: var(--display); font-size: .76rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--mute); text-align: center;
}
.lb__close, .lb__nav {
  position: absolute; display: grid; place-items: center; color: var(--bone);
  width: 52px; height: 52px; border: 1px solid var(--hair-soft); border-radius: 50%;
  font-size: 1.6rem; line-height: 1;
  transition: color 300ms var(--ease), border-color 300ms var(--ease), background 300ms var(--ease);
}
.lb__close:hover, .lb__nav:hover { color: var(--gold); border-color: var(--hair); background: rgba(227,178,60,.08); }
.lb__close { top: clamp(16px, 3vw, 30px); right: clamp(16px, 3vw, 30px); }
.lb__prev { left: clamp(10px, 2.4vw, 30px); top: 50%; transform: translateY(-50%); }
.lb__next { right: clamp(10px, 2.4vw, 30px); top: 50%; transform: translateY(-50%); }
@media (max-width: 620px) {
  .lb__prev { left: 12px; } .lb__next { right: 12px; }
  .lb__close, .lb__nav { width: 44px; height: 44px; }
}

/* ---- 27. fixes ---------------------------------------------------------- */
/* <picture> is inline by default, so an <img> inside it never inherits the
   height of an aspect-ratio box — the photo letterboxes inside its own frame.
   Making the wrapper a full-size block restores object-fit: cover everywhere. */
picture { display: block; width: 100%; height: 100%; }

/* Masked line reveals clip descenders and the tail of a gold gradient unless
   the mask box is grown and the growth taken straight back off in margin. */
[data-mk-lines] .line, .hero__title .line {
  padding-block: .08em .16em;
  margin-block: -.08em -.16em;
}
.nav a { white-space: nowrap; }

/* Display type must never break mid-word — body-level break-word split
   "Workmanship" across two lines inside a narrow card. Headings opt out, and
   card titles step down a size so they fit their column in the first place. */
h1, h2, h3, h4, h5 { overflow-wrap: normal; word-break: normal; hyphens: none; }
.card h3, .quote h3 { font-size: clamp(1.06rem, 1.42vw, 1.28rem); }

/* ---- 28. embedded GoHighLevel form --------------------------------------
   Submissions have to land in the shop's CRM, and their existing "Contact Us"
   form already drives the workflow that creates the opportunity, alerts the
   team and emails the customer back. So the form itself is theirs, embedded —
   framed as a deliberate light panel rather than pretending to be dark. */
.ghl-form {
  background: var(--bone);
  border: 1px solid rgba(227, 178, 60, .38);
  border-radius: var(--radius-lg);
  padding: clamp(6px, 1.2vw, 14px);
  box-shadow: 0 34px 80px -44px #000;
  overflow: hidden;
}
.ghl-form iframe {
  display: block; width: 100%; min-height: 660px; border: 0;
  background: var(--bone); border-radius: 2px;
}
@media (max-width: 620px) { .ghl-form iframe { min-height: 720px; } }

/* ---- 29. build credit --------------------------------------------------- */
.footer__by { color: var(--faint); white-space: nowrap; }
.footer__by a {
  color: var(--mute); position: relative; padding-bottom: 2px;
  transition: color 300ms var(--ease);
}
.footer__by a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: right center;
  transition: transform 460ms var(--ease);
}
.footer__by a:hover { color: var(--gold); }
.footer__by a:hover::after { transform: scaleX(1); transform-origin: left center; }
@media (max-width: 1000px) { .footer__by { width: 100%; } }

/* The address/hours/contact strip was pinned to three columns inline, which at
   390px broke "6729 Lankershim Blvd" one word per line. Two up on tablet, one
   on phones. And the sticky action bar sits over the last footer line unless
   the footer reserves room for it. */
.footer__grid--meta {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding-bottom: clamp(34px, 4vw, 52px);
}
@media (max-width: 860px) { .footer__grid--meta { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .footer__grid--meta { grid-template-columns: minmax(0,1fr); } }
@media (max-width: 900px) {
  .footer__bar { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
}