/* ============================================================
   JC'S JUNK: DESIGN SYSTEM
   Matte black / deep burnt orange / warm off-white
   Baltimore-Orioles-inspired palette, built for Maryland junk removal
   ============================================================ */

:root {
  /* --- Color palette --- */
  --black:        #121212;
  --black-soft:   #1a1815;
  --black-card:   #201d19;
  --black-line:   #322d27;

  --orange:       #b6431a;   /* deep matte primary orange */
  --orange-light: #d3611f;   /* hover / highlight */
  --orange-dark:  #7c2c10;   /* shadows, gradients */
  --orange-glow:  rgba(182, 67, 26, .35);

  --off:          #f4efe4;   /* warm off-white background */
  --off-dim:      #e6ddc9;   /* secondary off-white / borders on dark */
  --ink:          #1c1814;   /* near-black text on light bg */
  --ink-soft:     #4a423a;   /* secondary text on light bg */

  --success:      #4a7c4e;

  /* --- Type --- */
  --font-display: 'Anton', 'Arial Narrow Bold', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* --- Layout --- */
  --max: 1220px;
  --radius: 10px;
  --radius-lg: 18px;
  --shadow: 0 12px 30px -12px rgba(0,0,0,.45);
  --shadow-lg: 0 24px 60px -20px rgba(0,0,0,.55);

  --header-h: 122px;
  --notice-h: 38px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; width: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}
body, h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
input, textarea, select { font: inherit; }
svg { display: block; }

body {
  background: var(--off);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: .01em;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--ink);
}

.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4, section.dark h1, section.dark h2, section.dark h3, section.dark h4 {
  color: var(--off);
}

h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); }
h2 { font-size: clamp(2rem, 4.4vw, 3rem); }
h3 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); }
h4 { font-size: 1.1rem; }

p { color: var(--ink-soft); }
.on-dark p, section.dark p { color: var(--off-dim); }

.lede { font-size: clamp(1.05rem, 1.6vw, 1.25rem); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: .9em;
}
/* Decorative eyebrow bar: shown only in the hero / page-hero banner areas
   for symmetry; other sections show the eyebrow label on its own. */
.hero .eyebrow::before,
.page-hero .eyebrow::before {
  content: "";
  width: 26px;
  height: 3px;
  background: var(--orange);
  border-radius: 3px;
}

/* ---------- Layout helpers ---------- */
.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
}
section { padding: clamp(56px, 9vw, 108px) 0; position: relative; }
section.tight { padding: clamp(40px, 6vw, 64px) 0; }
section.dark { background: var(--black); }
section.card-bg { background: var(--black-soft); }

.grid { display: grid; gap: 28px; min-width: 0; }
.grid > * { min-width: 0; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.book-grid { grid-template-columns: 1.6fr 1fr; gap: 44px; }
@media (max-width: 980px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 860px) { .book-grid { grid-template-columns: 1fr; gap: 28px; } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.section-head { max-width: 720px; margin-bottom: 44px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

.text-center { text-align: center; }
.mt-0 { margin-top: 0 !important; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: .98rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  padding: 17px 30px;
  border-radius: 999px;
  border: 2px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
  white-space: nowrap;
}
.btn svg { width: 1.1em; height: 1.1em; flex: none; }
.btn:active { transform: translateY(1px) scale(.99); }

.btn-orange {
  background: linear-gradient(180deg, var(--orange-light), var(--orange));
  color: var(--off);
  box-shadow: 0 10px 26px -8px var(--orange-glow), inset 0 1px 0 rgba(255,255,255,.12);
}
.btn-orange:hover { box-shadow: 0 14px 32px -8px var(--orange-glow), inset 0 1px 0 rgba(255,255,255,.16); transform: translateY(-2px); }

.btn-black {
  background: var(--black);
  color: var(--off);
  border-color: var(--black);
}
.btn-black:hover { background: var(--black-soft); transform: translateY(-2px); }

.btn-outline {
  background: transparent;
  color: var(--off);
  border-color: rgba(244,239,228,.4);
}
.btn-outline:hover { border-color: var(--off); background: rgba(244,239,228,.08); transform: translateY(-2px); }

.btn-outline-dark {
  background: transparent;
  color: var(--ink);
  border-color: rgba(28,24,20,.25);
}
.btn-outline-dark:hover { border-color: var(--ink); background: rgba(28,24,20,.05); }

.btn-lg { padding: 20px 38px; font-size: 1.05rem; }
.btn-sm { padding: 12px 22px; font-size: .85rem; }
.btn-block { width: 100%; }

.btn-group { display: flex; gap: 14px; flex-wrap: wrap; }
@media (max-width: 520px) {
  .btn-group { flex-direction: column; align-items: stretch; }
  .btn-group .btn { width: 100%; }
}

/* ---------- Badges / pills / trust strip ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  background: rgba(244,239,228,.08);
  border: 1px solid rgba(244,239,228,.18);
  color: var(--off);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: 9px 16px;
  border-radius: 999px;
}
.badge svg { width: 15px; height: 15px; color: var(--orange-light); flex: none; }
.badge-row { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- Hours of Operation box ---------- */
.hours-box {
  display: inline-block;
  background: rgba(244,239,228,.07);
  border: 1px solid rgba(244,239,228,.2);
  border-radius: 12px;
  padding: 9px 16px;
}
.hours-box h4 {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--orange-light);
  margin-bottom: 5px;
}
.hours-grid { display: flex; flex-wrap: wrap; column-gap: 16px; row-gap: 3px; }
.hours-grid .hr { display: flex; gap: 6px; font-size: .78rem; white-space: nowrap; }
.hours-grid .hr span:first-child { color: var(--off); font-weight: 700; }
.hours-grid .hr span:last-child { color: var(--off-dim); }
.hours-grid .hr.closed span:last-child { color: var(--orange-light); font-weight: 700; }
.hero .hours-box { margin-top: 10px; }
@media (max-width: 480px) {
  .hours-grid { column-gap: 10px; row-gap: 2px; }
  .hours-grid .hr { font-size: .68rem; }
  .hero .hours-box { margin-top: 8px; padding: 7px 12px; }
  .hero .hours-box h4 { margin-bottom: 3px; }
}

.trust-strip {
  background: var(--black);
  border-top: 1px solid var(--black-line);
  border-bottom: 1px solid var(--black-line);
  padding: 18px 0;
  overflow: hidden;
}
.trust-track {
  display: flex;
  gap: 48px;
  align-items: center;
  white-space: nowrap;
  animation: marquee 28s linear infinite;
  width: max-content;
}
.trust-track span {
  color: var(--off-dim);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.trust-track span::before { content:"★"; color: var(--orange-light); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Header / Nav ---------- */
.site-header {
  position: fixed;
  top: var(--notice-h); left: 0; right: 0;
  z-index: 200;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: linear-gradient(180deg, rgba(18,18,18,.85), rgba(18,18,18,0));
  transition: background-color .25s ease, box-shadow .25s ease, height .25s ease;
}
.site-header.solid {
  background: rgba(18,18,18,.97);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px -12px rgba(0,0,0,.6);
  border-bottom: 1px solid var(--black-line);
  height: 98px;
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; }

.brand { display: flex; align-items: center; gap: 12px; flex: none; }
.brand img { height: 96px; width: auto; transition: height .25s ease; }
.site-header.solid .brand img { height: 78px; }

.main-nav { display: flex; align-items: center; gap: 6px; }
.main-nav a {
  color: var(--off-dim);
  font-weight: 700;
  font-size: .92rem;
  letter-spacing: .02em;
  padding: 10px 14px;
  border-radius: 8px;
  transition: color .2s ease, background-color .2s ease;
}
.main-nav a:hover, .main-nav a.active { color: var(--off); background: rgba(244,239,228,.08); }
.main-nav .has-dropdown { position: relative; }
.dropdown {
  position: absolute;
  top: 100%; left: 0;
  background: var(--black-soft);
  border: 1px solid var(--black-line);
  border-radius: 12px;
  padding: 10px;
  min-width: 240px;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown a { display: block; padding: 10px 12px; border-radius: 8px; font-size: .88rem; }

.header-cta { display: flex; align-items: center; gap: 10px; flex: none; }
.header-phone {
  display: flex; align-items: center; gap: 8px;
  color: var(--off); font-weight: 800; font-size: 1rem;
}
.header-phone svg { width: 18px; height: 18px; color: var(--orange-light); }
.header-phone small { display: block; font-size: .62rem; letter-spacing: .1em; color: var(--off-dim); font-weight: 700; text-transform: uppercase; }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 8px;
}
.nav-toggle span { width: 26px; height: 2px; background: var(--off); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 980px) {
  :root { --header-h: 84px; }
  .brand img { height: 60px; }
  .site-header.solid { height: 74px; }
  .site-header.solid .brand img { height: 52px; }
  .main-nav { position: fixed; top: calc(var(--header-h) + var(--notice-h)); left: 0; right: 0; bottom: 0; background: var(--black); flex-direction: column; align-items: stretch; padding: 18px; gap: 2px; overflow-y: auto; transform: translateX(100%); transition: transform .28s ease; }
  .main-nav.open { transform: translateX(0); }
  .main-nav a { padding: 16px; font-size: 1.05rem; border-bottom: 1px solid var(--black-line); border-radius: 0; }
  .dropdown { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; background: rgba(244,239,228,.04); display: none; margin: 4px 0 4px 12px; }
  .has-dropdown.open .dropdown { display: block; }
  .header-phone .label-text { display: none; }
  .nav-toggle { display: flex; }
  body.nav-open { overflow: hidden; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--black) url('../images/hero-poster.jpg') center 30%/cover no-repeat;
  isolation: isolate;
}
.hero-media {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 30%;
  z-index: 0;
}
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(18,18,18,.65) 0%, rgba(18,18,18,.55) 40%, rgba(18,18,18,.88) 100%),
    linear-gradient(90deg, rgba(18,18,18,.75) 0%, rgba(18,18,18,.25) 55%, rgba(18,18,18,.1) 100%);
  z-index: 1;
}
.hero-content { position: relative; z-index: 2; padding-top: calc(var(--header-h) + var(--notice-h)); width: 100%; }
.hero-content .wrap { padding-top: 6px; padding-bottom: 12px; }
.hero .eyebrow { margin-bottom: .45em; }
.hero h1 { color: var(--off); text-shadow: 0 4px 24px rgba(0,0,0,.35); max-width: 26ch; font-size: clamp(2.3rem, 5.4vw, 4.2rem); }
.hero h1 .hl { color: var(--orange-light); }
.hero .lede { color: var(--off-dim); max-width: 46ch; margin-top: 6px; }
.hero .btn-group { margin-top: 12px; }
.hero .badge-row { margin-top: 10px; }

@media (max-width: 980px) {
  :root { --header-h: 84px; }
  .hero h1 { font-size: clamp(1.9rem, 6vw, 2.7rem); }
  .hero-content .wrap { padding-top: 6px; padding-bottom: 12px; }
}

@media (max-width: 480px) {
  :root { --header-h: 64px; }
  .brand img { height: 46px; }
  .site-header.solid .brand img { height: 40px; }
  .hero h1 { font-size: clamp(1.4rem, 6.6vw, 2rem); max-width: 15ch; }
  .hero-content .wrap { padding-top: 2px; padding-bottom: 6px; }
  .hero .eyebrow { margin-bottom: .3em; font-size: .58rem; }
  .hero .lede { margin-top: 4px; font-size: .82rem; }
  .hero .btn-group { margin-top: 6px; gap: 8px; }
  .hero .badge-row { margin-top: 5px; gap: 5px; }
  .hero .badge { padding: 5px 10px; font-size: .64rem; }
  .hero .badge svg { width: 11px; height: 11px; }
  .hero .hours-box { padding: 6px 11px; }
  .hero .hours-box h4 { margin-bottom: 2px; font-size: .6rem; }
  .btn-lg { padding: 11px 20px; font-size: .82rem; }
}

/* ---------- Cards ---------- */
.card {
  background: var(--off);
  border: 1px solid rgba(28,24,20,.08);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  transition: transform .25s ease, box-shadow .25s ease;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

.service-card { padding: 34px 28px; }
.icon {
  width: 58px; height: 58px;
  border-radius: 14px;
  background: linear-gradient(155deg, var(--orange-light), var(--orange-dark));
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
  box-shadow: 0 10px 22px -10px var(--orange-glow);
  flex: none;
}
.icon svg { width: 30px; height: 30px; color: var(--off); }
.service-card h3 { margin-bottom: 10px; }
.service-card p { margin-bottom: 14px; }
.service-card .tag-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.service-card .tag-list li { font-size: .78rem; font-weight: 700; color: var(--ink-soft); background: rgba(182,67,26,.08); border: 1px solid rgba(182,67,26,.18); padding: 5px 10px; border-radius: 999px; }
.service-card a.more { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-weight: 800; color: var(--orange); font-size: .88rem; text-transform: uppercase; letter-spacing: .03em; }
.service-card a.more svg { width: 14px; height: 14px; transition: transform .2s ease; }
.service-card a.more:hover svg { transform: translateX(4px); }

.dark .card, .card-bg .card { background: var(--black-card); border-color: var(--black-line); }

/* ---------- Photo placeholders ---------- */
.photo-ph {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/3;
  background:
    repeating-linear-gradient(135deg, rgba(244,239,228,.05) 0 2px, transparent 2px 14px),
    linear-gradient(150deg, #2a2621, #17140f);
  border: 1.5px dashed rgba(244,239,228,.28);
  display: flex; align-items: center; justify-content: center;
  color: var(--off-dim);
}
.photo-ph .ph-inner { text-align: center; padding: 20px; }
.photo-ph svg { width: 34px; height: 34px; margin: 0 auto 10px; color: var(--orange-light); }
.photo-ph span { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; line-height: 1.5; }
.photo-ph.square { aspect-ratio: 1/1; }
.photo-ph.wide { aspect-ratio: 16/9; }
.photo-ph.tall { aspect-ratio: 3/4; }

.photo-real {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/3;
  box-shadow: var(--shadow-lg);
}
.photo-real.tall { aspect-ratio: 3/4; }
.photo-real.wide { aspect-ratio: 16/9; }
.photo-real img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }

/* ---------- Process steps ---------- */
.steps { counter-reset: step; }
.step {
  display: flex;
  gap: 22px;
  padding: 26px 0;
  border-bottom: 1px solid rgba(244,239,228,.12);
}
.step:last-child { border-bottom: none; }
.step .num {
  counter-increment: step;
  flex: none;
  width: 54px; height: 54px;
  border-radius: 50%;
  border: 2px solid var(--orange);
  color: var(--orange-light);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 1.4rem;
}
.step .num::before { content: counter(step); }

/* ---------- Pricing ---------- */
.price-box {
  background: linear-gradient(160deg, var(--orange), var(--orange-dark));
  border-radius: var(--radius-lg);
  padding: 40px;
  color: var(--off);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.price-box::before {
  content: "";
  position: absolute; right: -60px; top: -60px;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: rgba(244,239,228,.08);
}
.price-box .range { font-family: var(--font-display); font-size: clamp(2.4rem,5vw,3.4rem); line-height: 1; }
.price-box .range small { font-family: var(--font-body); font-size: 1rem; font-weight: 700; opacity: .85; display: block; margin-top: 10px; text-transform: none; letter-spacing: 0; }

/* ---------- FAQ / Accordion ---------- */
.accordion { border-top: 1px solid rgba(244,239,228,.14); }
.acc-item { border-bottom: 1px solid rgba(244,239,228,.14); }
.acc-q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  background: none; border: none; text-align: left;
  padding: 22px 4px;
  color: var(--off);
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 1.02rem;
}
.acc-q .plus { flex: none; width: 26px; height: 26px; position: relative; }
.acc-q .plus::before, .acc-q .plus::after { content:""; position: absolute; background: var(--orange-light); border-radius: 2px; transition: transform .25s ease; }
.acc-q .plus::before { left: 0; top: 50%; width: 100%; height: 2.5px; transform: translateY(-50%); }
.acc-q .plus::after { top: 0; left: 50%; height: 100%; width: 2.5px; transform: translateX(-50%); }
.acc-item.open .acc-q .plus::after { transform: translateX(-50%) rotate(90deg); opacity: 0; }
.acc-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.acc-a p { padding: 0 4px 22px; max-width: 65ch; }
.section.dark .acc-a p, .dark .acc-a p { color: var(--off-dim); }
:not(.dark) .acc-q { color: var(--ink); }
:not(.dark) .acc-q .plus::before, :not(.dark) .acc-q .plus::after { background: var(--orange); }
:not(.dark) .accordion, :not(.dark) .acc-item { border-color: rgba(28,24,20,.14); }

/* ---------- Testimonials ---------- */
.testi-card {
  padding: 30px;
}
.stars { color: var(--orange-light); font-size: 1.1rem; letter-spacing: 2px; margin-bottom: 14px; }
.testi-card p.quote { font-size: 1.02rem; color: var(--ink); margin-bottom: 20px; }
.dark .testi-card p.quote, .card-bg .testi-card p.quote { color: var(--off); }
.testi-who { display: flex; align-items: center; gap: 12px; }
.testi-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(155deg, var(--orange-light), var(--orange-dark));
  display: flex; align-items: center; justify-content: center;
  color: var(--off); font-weight: 800; font-family: var(--font-display); flex: none;
}
.testi-who strong { display: block; font-size: .92rem; color: var(--ink); }
.testi-who span { font-size: .8rem; color: var(--ink-soft); }
.dark .testi-who strong, .card-bg .testi-who strong { color: var(--off); }
.dark .testi-who span, .card-bg .testi-who span { color: var(--off-dim); }

/* ---------- Areas ---------- */
.area-chip {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px;
  background: var(--black-card);
  border: 1px solid var(--black-line);
  border-radius: var(--radius);
  transition: border-color .2s ease, background-color .2s ease, transform .2s ease;
}
.area-chip:hover { border-color: var(--orange); background: var(--black-soft); transform: translateX(4px); }
.area-chip strong { color: var(--off); font-family: var(--font-display); font-weight: 400; font-size: 1.15rem; letter-spacing: .01em; }
.area-chip span { color: var(--off-dim); font-size: .82rem; }
.area-chip svg { width: 18px; height: 18px; color: var(--orange-light); flex: none; }

/* ---------- CTA banner ---------- */
.cta-banner {
  background: linear-gradient(120deg, var(--orange-dark), var(--orange) 55%, var(--orange-light));
  border-radius: var(--radius-lg);
  padding: clamp(36px, 6vw, 60px);
  color: var(--off);
  position: relative;
  overflow: hidden;
}
.cta-banner::after {
  content: "";
  position: absolute; inset: 0;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120"><path d="M0 60 L60 0 M-20 40 L40 -20 M80 140 L140 80" stroke="rgba(255,255,255,0.06)" stroke-width="10"/></svg>');
  background-size: 120px 120px;
}
.cta-banner > * { position: relative; z-index: 1; }
.cta-banner h2 { color: var(--off); }
.cta-banner p { color: rgba(244,239,228,.9); }
.cta-logo { height: 72px; width: auto; margin: 0 auto 22px; filter: drop-shadow(0 6px 18px rgba(0,0,0,.25)); }
@media (max-width: 480px) { .cta-logo { height: 56px; margin-bottom: 16px; } }

/* ---------- Forms ---------- */
.field { margin-bottom: 20px; }
.field label { display: block; font-weight: 800; font-size: .82rem; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 8px; color: var(--ink); }
.dark .field label, .card-bg .field label { color: var(--off); }
.field input[type=text], .field input[type=email], .field input[type=tel], .field input[type=date], .field textarea, .field select {
  width: 100%;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1.5px solid rgba(28,24,20,.18);
  background: #fff;
  color: var(--ink);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.dark .field input, .dark .field textarea, .dark .field select, .card-bg .field input, .card-bg .field textarea, .card-bg .field select {
  background: var(--black); border-color: var(--black-line); color: var(--off);
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--orange); box-shadow: 0 0 0 4px var(--orange-glow);
}
.field textarea { min-height: 130px; resize: vertical; }
.field-hint { font-size: .8rem; color: var(--ink-soft); margin-top: 6px; }
.dark .field-hint, .card-bg .field-hint { color: var(--off-dim); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 640px) { .field-row { grid-template-columns: 1fr; } }

.radio-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 12px; }
.radio-card { position: relative; }
.radio-card input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.radio-card .box {
  display: flex; align-items: center; justify-content: center; text-align:center;
  padding: 14px 10px;
  border: 1.5px solid rgba(28,24,20,.18);
  border-radius: 10px;
  font-weight: 700; font-size: .88rem;
  transition: all .2s ease;
}
.dark .radio-card .box, .card-bg .radio-card .box { border-color: var(--black-line); color: var(--off); }
.radio-card input:checked + .box { border-color: var(--orange); background: var(--orange-glow); color: var(--orange); }
.dark .radio-card input:checked + .box, .card-bg .radio-card input:checked + .box { color: var(--orange-light); }

.upload-zone {
  border: 2px dashed rgba(28,24,20,.25);
  border-radius: 14px;
  padding: 34px 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease;
}
.dark .upload-zone, .card-bg .upload-zone { border-color: rgba(244,239,228,.28); }
.upload-zone.drag { border-color: var(--orange); background: var(--orange-glow); }
.upload-zone svg { width: 30px; height: 30px; margin: 0 auto 10px; color: var(--orange); }
.upload-zone strong { display: block; color: var(--ink); }
.dark .upload-zone strong, .card-bg .upload-zone strong { color: var(--off); }
.upload-zone span { font-size: .82rem; color: var(--ink-soft); }
.dark .upload-zone span, .card-bg .upload-zone span { color: var(--off-dim); }
.upload-previews { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.upload-previews .thumb { position: relative; width: 74px; height: 74px; border-radius: 8px; overflow: hidden; border: 1px solid rgba(28,24,20,.15); }
.upload-previews .thumb img { width: 100%; height: 100%; object-fit: cover; }
.upload-previews .thumb button { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border-radius: 50%; background: rgba(18,18,18,.75); color: #fff; border: none; font-size: 12px; line-height: 1; }

.deposit-note {
  display: flex; gap: 14px; align-items: flex-start;
  background: rgba(182,67,26,.08);
  border: 1px solid rgba(182,67,26,.25);
  border-radius: 12px;
  padding: 16px 18px;
  margin: 22px 0;
}
.deposit-note svg { width: 22px; height: 22px; color: var(--orange); flex: none; margin-top: 2px; }
.deposit-note strong { display: block; color: var(--ink); margin-bottom: 3px; }
.dark .deposit-note strong, .card-bg .deposit-note strong { color: var(--off); }
.deposit-note p { font-size: .88rem; margin: 0; }

/* ---------- Sticky mobile CTA bar ---------- */
.mobile-cta-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 190;
  display: none;
  grid-template-columns: 1fr 1fr;
  background: var(--black);
  border-top: 1px solid var(--black-line);
  box-shadow: 0 -10px 30px rgba(0,0,0,.35);
}
.mobile-cta-bar a {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 16px 10px;
  font-weight: 800; font-size: .92rem; text-transform: uppercase; letter-spacing: .02em;
  color: var(--off);
}
.mobile-cta-bar a svg { width: 18px; height: 18px; }
.mobile-cta-bar a.call { background: var(--orange); }
.mobile-cta-bar a.book { background: var(--black-soft); }
@media (max-width: 780px) {
  .mobile-cta-bar { display: grid; }
  body { padding-bottom: 62px; }
}

/* ---------- Footer ---------- */
.site-footer { background: var(--black); border-top: 1px solid var(--black-line); padding: 70px 0 26px; }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: 40px; padding-bottom: 46px; }
@media (max-width: 900px) { .footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-top { grid-template-columns: 1fr; } }
.footer-top h4 { color: var(--off); font-family: var(--font-body); font-weight: 800; text-transform: uppercase; font-size: .82rem; letter-spacing: .08em; margin-bottom: 18px; }
.footer-top ul li { margin-bottom: 10px; }
.footer-top ul a { color: var(--off-dim); font-size: .92rem; transition: color .2s ease; }
.footer-top ul a:hover { color: var(--orange-light); }
.footer-brand img { height: 120px; width: auto; margin-bottom: 16px; }
.footer-brand p { color: var(--off-dim); font-size: .9rem; max-width: 34ch; }
.footer-social { display: flex; gap: 10px; margin-top: 18px; }
.footer-social a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--black-line); display: flex; align-items: center; justify-content: center; }
.footer-social a svg { width: 17px; height: 17px; color: var(--off-dim); }
.footer-social a:hover { border-color: var(--orange); background: rgba(182,67,26,.12); }
.footer-social a:hover svg { color: var(--orange-light); }
.footer-bottom { border-top: 1px solid var(--black-line); padding-top: 24px; display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: center; }
.footer-bottom p, .footer-bottom a { color: var(--off-dim); font-size: .82rem; }
.footer-bottom .legal-links { display: flex; gap: 18px; }
.footer-bottom a:hover { color: var(--orange-light); }

/* ---------- Breadcrumb ---------- */
.breadcrumb { padding: 130px 0 0; }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: .82rem; }
.breadcrumb a { color: var(--ink-soft); font-weight: 600; }
.breadcrumb a:hover { color: var(--orange); }
.breadcrumb li:last-child { color: var(--ink); font-weight: 700; }
.breadcrumb li:not(:last-child)::after { content: "/"; margin-left: 8px; color: rgba(28,24,20,.3); }
.dark .breadcrumb a, section.dark .breadcrumb a,
.page-hero .breadcrumb a { color: var(--off-dim); }
.dark .breadcrumb li:last-child, section.dark .breadcrumb li:last-child,
.page-hero .breadcrumb li:last-child { color: var(--off); }
.page-hero .breadcrumb li:not(:last-child)::after { color: rgba(244,239,228,.3); }
.page-hero .breadcrumb a:hover { color: var(--orange-light); }

/* ---------- Page header (interior pages) ---------- */
.page-hero {
  background: var(--black);
  padding: 150px 0 70px;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 82% 20%, var(--orange-glow), transparent 55%);
}
.page-hero > .wrap { position: relative; z-index: 1; }
.page-hero h1 { color: var(--off); max-width: 22ch; }
.page-hero .lede { color: var(--off-dim); max-width: 60ch; margin-top: 16px; }

/* ---------- Utility reveal animation ----------
   Progressive enhancement: content is fully visible by default so it never
   depends on JavaScript running. Only once the "js" class lands on <html>
   (set immediately by main.js) do reveal elements hide themselves, ready to
   be faded in by the IntersectionObserver as the user scrolls. If JS is
   blocked, slow, or errors out, everything simply stays visible. */
.reveal, .reveal-stagger > * { opacity: 1; transform: none; }
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.js .reveal.in { opacity: 1; transform: translateY(0); }
.js .reveal-stagger > * { opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal-stagger.in > * { opacity: 1; transform: translateY(0); }
.reveal-stagger.in > *:nth-child(1) { transition-delay: .05s; }
.reveal-stagger.in > *:nth-child(2) { transition-delay: .12s; }
.reveal-stagger.in > *:nth-child(3) { transition-delay: .19s; }
.reveal-stagger.in > *:nth-child(4) { transition-delay: .26s; }
.reveal-stagger.in > *:nth-child(5) { transition-delay: .33s; }
.reveal-stagger.in > *:nth-child(6) { transition-delay: .4s; }

/* ---------- Misc components ---------- */
.divider-orange { width: 60px; height: 4px; background: var(--orange); border-radius: 4px; margin: 18px 0; }

.map-frame { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--black-line); filter: grayscale(.25) contrast(1.05); }
.map-frame iframe { width: 100%; height: 100%; min-height: 320px; border: 0; display: block; }

.notice-strip {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 210;
  height: var(--notice-h);
  background: var(--ink);
  color: var(--off);
  text-align: center;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .03em;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.notice-strip a { color: var(--orange-light); text-decoration: underline; }
/* The strip sits above the fixed header (not behind it) so the two never
   collide; --notice-h is added to the header's offset and to the hero's
   top padding to keep everything below it properly spaced. Below 900px
   there's no room for a second row, so the strip steps aside entirely. */
@media (max-width: 900px) {
  :root { --notice-h: 0px; }
  .notice-strip { display: none; }
}

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 999;
  background: var(--orange); color: #fff; padding: 12px 18px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

::selection { background: var(--orange); color: #fff; }