/* ==========================================================================
   Do It Now Handyman — doitnowhandyman.com
   Static stylesheet. Mobile-first. No frameworks, no build step.
   ========================================================================== */

:root {
  --navy-950: #070d18;
  --navy-900: #0b1424;
  --navy-850: #101c31;
  --navy-800: #14243d;
  --navy-700: #1c3255;
  --navy-600: #24406c;
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.16);

  --amber-400: #f4b23c;
  --amber-500: #e89c1c;
  --amber-600: #c97f0c;
  --blue-400: #5b9bd8;

  --text: #eef2f8;
  --muted: #a9b6c9;
  --muted-dim: #8593a8;

  --ff-display: "Georgia", "Iowan Old Style", "Times New Roman", serif;
  --ff-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --wrap: 1180px;
  --radius: 14px;
  --radius-lg: 20px;
  --shadow: 0 18px 44px rgba(0, 0, 0, 0.35);
  --header-h: 68px;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--navy-950);
  color: var(--text);
  font-family: var(--ff-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--amber-400); text-decoration: none; }
a:hover { color: var(--amber-500); }

h1, h2, h3, h4 {
  font-family: var(--ff-display);
  line-height: 1.18;
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
  font-weight: 700;
}
h1 { font-size: clamp(2.15rem, 7vw, 4rem); }
h2 { font-size: clamp(1.6rem, 4.6vw, 2.6rem); }
h3 { font-size: clamp(1.08rem, 2.4vw, 1.3rem); }
p { margin: 0 0 1rem; }

:focus-visible {
  outline: 3px solid var(--amber-400);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Layout helpers ---------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 20px;
}

.section { padding: 64px 0; position: relative; }
.section--alt { background: var(--navy-900); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section--deep { background: linear-gradient(180deg, var(--navy-900), var(--navy-850)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.eyebrow {
  display: inline-block;
  font-family: var(--ff-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--amber-400);
  margin-bottom: 0.7rem;
}

.section-head { max-width: 780px; margin-bottom: 2.2rem; }
.section-head p { color: var(--muted); margin-bottom: 0; }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--amber-400);
  color: var(--navy-950);
  padding: 12px 18px;
  font-weight: 700;
  border-radius: 0 0 10px 0;
}
.skip-link:focus { left: 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 14px 24px;
  border-radius: 999px;
  font-family: var(--ff-body);
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: 0.01em;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  text-align: center;
  line-height: 1.2;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary {
  background: linear-gradient(180deg, var(--amber-400), var(--amber-500));
  color: #1a1204;
  box-shadow: 0 10px 26px rgba(232, 156, 28, 0.28);
}
.btn--primary:hover { color: #1a1204; box-shadow: 0 14px 32px rgba(232, 156, 28, 0.36); }
.btn--ghost {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--line-strong);
  color: var(--text);
}
.btn--ghost:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(7, 13, 24, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 14px;
}
.brand { display: flex; align-items: center; gap: 11px; margin-right: auto; }
.brand:hover { color: inherit; }
.brand img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  flex-shrink: 0;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 1.03rem;
  color: var(--text);
  white-space: nowrap;
}
.brand-sub {
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted-dim);
  white-space: nowrap;
}

.nav { display: none; }
.nav a {
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 600;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
}
.nav a:hover { color: #fff; border-bottom-color: var(--amber-400); }

.header-cta { display: flex; align-items: center; gap: 10px; }
.header-phone {
  display: none;
  align-items: center;
  gap: 7px;
  color: var(--text);
  font-weight: 700;
  font-size: 0.95rem;
  white-space: nowrap;
}
.header-phone:hover { color: var(--amber-400); }
.header-book { padding: 10px 18px; font-size: 0.9rem; }

.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 42px;
  height: 42px;
  padding: 0 9px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mobile-nav {
  display: none;
  border-top: 1px solid var(--line);
  background: var(--navy-900);
  padding: 10px 0 18px;
}
.mobile-nav.is-open { display: block; }
.mobile-nav ul { list-style: none; margin: 0; padding: 0; }
.mobile-nav a {
  display: block;
  padding: 12px 20px;
  color: var(--text);
  font-weight: 600;
  border-bottom: 1px solid var(--line);
}
.mobile-nav a:hover { background: rgba(255, 255, 255, 0.04); color: var(--amber-400); }
.mobile-nav .mobile-nav-foot { padding: 16px 20px 0; display: grid; gap: 10px; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 620px;
  display: flex;
  align-items: center;
  padding: 56px 0 44px;
  overflow: hidden;
  isolation: isolate;
}
.hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 68% 22%;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Mobile: single vertical scrim keeps the photo readable behind the copy */
  background: linear-gradient(180deg, rgba(7, 13, 24, 0.62) 0%, rgba(7, 13, 24, 0.5) 38%, rgba(7, 13, 24, 0.88) 100%);
}
.hero-inner { max-width: 660px; }
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 15px;
  border-radius: 999px;
  background: rgba(244, 178, 60, 0.13);
  border: 1px solid rgba(244, 178, 60, 0.35);
  color: var(--amber-400);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
}
.hero h1 { margin-bottom: 0.45em; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.4); }
.hero h1 .hero-tag {
  display: block;
  font-family: var(--ff-body);
  font-size: clamp(0.95rem, 2.6vw, 1.22rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--amber-400);
  margin-top: 0.6rem;
}
.hero-lede {
  font-size: clamp(1.02rem, 2.3vw, 1.17rem);
  color: #dbe4f0;
  max-width: 610px;
  margin-bottom: 1.6rem;
}
.hero-area {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 1.4rem;
  font-size: 0.87rem;
  color: var(--muted);
  max-width: 560px;
}
.hero-area svg { flex-shrink: 0; margin-top: 3px; }

/* ---------- Stats ---------- */
.stats {
  background: var(--navy-850);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
}
.stat {
  background: var(--navy-850);
  padding: 26px 14px;
  text-align: center;
}
.stat-num {
  font-family: var(--ff-display);
  font-size: clamp(1.5rem, 5vw, 2rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
}
.stat-num span { color: var(--amber-400); }
.stat-label {
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-dim);
  margin-top: 6px;
  line-height: 1.4;
}

/* ---------- Cards ---------- */
.card {
  background: var(--navy-850);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
}
.grid { display: grid; gap: 16px; }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: repeat(2, 1fr); }

/* ---------- Pricing summary ---------- */
.rate-card {
  background: linear-gradient(165deg, var(--navy-800), var(--navy-850));
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 24px 20px;
  text-align: center;
}
.rate-card .rate-label {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-dim);
}
.rate-card .rate-value {
  font-family: var(--ff-display);
  font-size: clamp(1.7rem, 6vw, 2.3rem);
  font-weight: 700;
  color: var(--amber-400);
  margin: 8px 0 6px;
  line-height: 1;
}
.rate-card .rate-note { font-size: 0.85rem; color: var(--muted); margin: 0; }

.note-line {
  margin-top: 1.6rem;
  padding: 16px 18px;
  border-left: 3px solid var(--amber-500);
  background: rgba(244, 178, 60, 0.07);
  border-radius: 0 10px 10px 0;
  color: var(--muted);
  font-size: 0.92rem;
}
.note-line strong { color: var(--text); }

/* ---------- Service price list ---------- */
.price-list {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--navy-850);
}
.price-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--line);
}
.price-row:last-child { border-bottom: 0; }
.price-row:nth-child(odd) { background: rgba(255, 255, 255, 0.017); }
/* Pricing rows are clickable and jump to the booking widget preselected */
.price-row--link {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: background-color 0.16s ease, box-shadow 0.16s ease;
}
.price-row--link:hover,
.price-row--link:focus-visible {
  background: rgba(244, 178, 60, 0.08);
  box-shadow: inset 3px 0 0 var(--amber-400);
}
.price-row--link:focus-visible { outline: 2px solid var(--amber-400); outline-offset: -2px; }
.price-row--link:hover .price-name,
.price-row--link:focus-visible .price-name { color: var(--amber-400); }
.price-book {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  max-width: 100%;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--amber-400);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.16s ease, transform 0.16s ease;
}
.price-row--link:hover .price-book,
.price-row--link:focus-visible .price-book { opacity: 1; transform: translateX(0); }
/* Touch devices have no hover state, so keep the affordance visible.
   It must not add width on narrow screens, so the row lets it wrap onto
   its own line instead of overflowing the viewport. */
@media (hover: none) {
  .price-book { opacity: 0.8; transform: none; }
}
@media (max-width: 560px) {
  .price-row--link { position: relative; padding-right: 18px; }
  .price-book { flex: 1 0 100%; justify-content: flex-start; margin-top: 6px; }
}
.price-name { font-weight: 600; color: var(--text); flex: 1 1 60%; min-width: 0; transition: color 0.16s ease; }
.price-name small {
  display: block;
  font-weight: 400;
  font-size: 0.82rem;
  color: var(--muted-dim);
  margin-top: 2px;
}
.price-value {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--amber-400);
  white-space: nowrap;
  margin-left: auto;
}
.price-value--free { color: var(--blue-400); font-size: 0.95rem; }

/* ---------- Service category cards ---------- */
/* Service cards are clickable booking triggers, so they need obvious
   affordances: pointer cursor, lift on hover, and a visible CTA. */
.svc {
  display: flex;
  flex-direction: column;
  background: var(--navy-850);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}
.svc:hover,
.svc:focus-visible {
  border-color: rgba(244, 178, 60, 0.62);
  background: rgba(244, 178, 60, 0.045);
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(244, 178, 60, 0.18);
}
.svc:active { transform: translateY(-1px); }
.svc:focus-visible { outline: 2px solid var(--amber-400); outline-offset: 3px; }
.svc h3 { transition: color 0.18s ease; }
.svc:hover h3,
.svc:focus-visible h3 { color: var(--amber-400); }
.svc:hover .svc-icon,
.svc:focus-visible .svc-icon { background: rgba(244, 178, 60, 0.24); }
.svc-icon { transition: background-color 0.18s ease; }
/* "Book Now →" call to action pinned to the bottom of every card */
.svc-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  padding-top: 14px;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--amber-400);
}
.svc-cta-arrow { transition: transform 0.18s ease; }
.svc:hover .svc-cta-arrow,
.svc:focus-visible .svc-cta-arrow { transform: translateX(4px); }
.svc-icon {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: rgba(244, 178, 60, 0.13);
  border: 1px solid rgba(244, 178, 60, 0.28);
  margin-bottom: 14px;
}
.svc h3 { margin-bottom: 0.4rem; }
.svc p { color: var(--muted); font-size: 0.93rem; margin-bottom: 0; }

/* ---------- 3D / property section ---------- */
.pdoc {
  background:
    radial-gradient(1000px 460px at 88% -10%, rgba(91, 155, 216, 0.16), transparent 62%),
    linear-gradient(180deg, var(--navy-900), var(--navy-950));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.tier {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px dashed var(--line);
}
.tier:last-child { border-bottom: 0; }
.tier-name { font-weight: 600; }
.tier-price {
  font-family: var(--ff-display);
  font-weight: 700;
  color: var(--amber-400);
  white-space: nowrap;
  font-size: 1.05rem;
}
.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.check-list li {
  position: relative;
  padding-left: 28px;
  color: var(--muted);
  font-size: 0.94rem;
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.36em;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(244, 178, 60, 0.15);
  border: 1px solid rgba(244, 178, 60, 0.45);
}
.check-list li::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 0.62em;
  width: 5px;
  height: 8px;
  border-right: 2px solid var(--amber-400);
  border-bottom: 2px solid var(--amber-400);
  transform: rotate(40deg);
}

/* ---------- Booking / Cal.com embed ---------- */
.cal-shell {
  background: var(--navy-900);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  padding: 10px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
/* ---------- Service selector above the calendar ---------- */
.booker {
  max-width: 760px;
  margin: 0 auto 22px;
  background: var(--navy-850);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.booker.is-flash {
  border-color: rgba(244, 178, 60, 0.75);
  box-shadow: 0 0 0 4px rgba(244, 178, 60, 0.14);
}
.booker-bar { display: grid; gap: 9px; }
.booker-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted-dim);
}
.booker-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  min-width: 0;
  max-width: 100%;
}
/* flex-basis must be percentage-based, not a fixed 260px: at 390px viewport a
   fixed basis plus padding and borders exceeded the container and pushed the
   whole booker 23px past the viewport edge. */
.booker-select {
  flex: 1 1 100%;
  min-width: 0;
  max-width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--text);
  background-color: var(--navy-900);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  padding: 12px 40px 12px 14px;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f4b23c' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.booker-select:hover { border-color: rgba(244, 178, 60, 0.5); }
.booker-select:focus-visible {
  outline: none;
  border-color: var(--amber-400);
  box-shadow: 0 0 0 3px rgba(244, 178, 60, 0.2);
}
.booker-select optgroup { background: var(--navy-900); color: var(--muted-dim); font-style: normal; }
.booker-select option { background: var(--navy-900); color: var(--text); }
.btn--sm { padding: 10px 16px; font-size: 0.86rem; white-space: nowrap; }
/* Above the narrow breakpoint there is room for the select and the reset
   button to sit on one line. */
@media (min-width: 560px) {
  .booker-select { flex: 1 1 260px; }
}
.booker-status { margin: 11px 0 0; font-size: 0.9rem; color: var(--muted); }
.booker-status strong { color: var(--amber-400); }
.cal-loading {
  display: grid;
  place-items: center;
  min-height: 320px;
  padding: 40px 20px;
  color: var(--muted-dim);
  font-size: 0.95rem;
}
#cal-inline.is-loading { min-height: 360px; }

/* The Cal.com profile lists many event types, so the inline embed auto-sizes
   very tall. Cap it and scroll internally so it behaves like a widget. */
#cal-inline {
  width: 100%;
  height: 78vh;
  min-height: 560px;
  max-height: 860px;
  border-radius: 12px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
#cal-inline iframe { border: 0; }
.cal-fallback {
  padding: 34px 20px;
  text-align: center;
  color: var(--muted);
}
.cal-fallback p { margin-bottom: 1rem; }

/* ---------- Forms ---------- */
.form-grid { display: grid; gap: 14px; }
.field { display: grid; gap: 6px; }
.field label {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}
.field .req { color: var(--amber-400); }
.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 13px 14px;
  background: var(--navy-950);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  color: var(--text);
  font-family: var(--ff-body);
  font-size: 1rem;
}
.field input::placeholder,
.field textarea::placeholder { color: #5d6b80; }
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--amber-400);
  box-shadow: 0 0 0 3px rgba(244, 178, 60, 0.16);
}
.field textarea { min-height: 130px; resize: vertical; }
.field-hint { font-size: 0.8rem; color: var(--muted-dim); }
.form-foot { font-size: 0.82rem; color: var(--muted-dim); margin: 0; }
.hp { position: absolute; left: -9999px; }

/* ---------- Reviews ---------- */
.review-card {
  background: var(--navy-850);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  display: flex;
  flex-direction: column;
}
.stars { color: var(--amber-400); letter-spacing: 2px; font-size: 1rem; margin-bottom: 10px; }
.review-card blockquote {
  margin: 0 0 14px;
  font-family: var(--ff-display);
  font-size: 1.03rem;
  line-height: 1.55;
  color: #e6ecf5;
}
.review-meta { font-size: 0.84rem; color: var(--muted-dim); margin-top: auto; }
.review-link { display: inline-block; margin-top: 12px; font-weight: 700; font-size: 0.9rem; }

.rating-badge {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 20px 22px;
  background: linear-gradient(150deg, var(--navy-800), var(--navy-850));
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
}
.rating-score {
  font-family: var(--ff-display);
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--amber-400);
  line-height: 1;
}

/* ---------- About ---------- */
.about-grid { display: grid; gap: 26px; }
.about-media { position: relative; }
.about-media img { border-radius: var(--radius-lg); border: 1px solid var(--line-strong); }
.about-chip {
  position: absolute;
  bottom: -14px;
  left: 16px;
  background: linear-gradient(180deg, var(--amber-400), var(--amber-500));
  color: #1a1204;
  padding: 10px 16px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 0.9rem;
  box-shadow: var(--shadow);
}
.area-box {
  margin-top: 1.4rem;
  padding: 16px 18px;
  background: var(--navy-850);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.area-box .eyebrow { margin-bottom: 0.4rem; }
.area-box p { margin: 0; color: var(--muted); font-size: 0.92rem; }

/* ---------- Contact ---------- */
.contact-tile {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px 20px;
  background: var(--navy-850);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
}
.contact-tile:hover { border-color: rgba(244, 178, 60, 0.4); color: var(--text); }
.contact-tile .ct-ico {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(244, 178, 60, 0.13);
  border: 1px solid rgba(244, 178, 60, 0.28);
}
.contact-tile strong { display: block; font-size: 1.02rem; }
.contact-tile span { font-size: 0.85rem; color: var(--muted-dim); }

/* ---------- CTA band ---------- */
.cta-band {
  background: linear-gradient(120deg, var(--navy-700), var(--navy-600));
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  text-align: center;
  padding: 52px 0;
}
.cta-band h2 { margin-bottom: 0.5rem; }
.cta-band p { color: #d6e1f0; max-width: 620px; margin: 0 auto 1.5rem; }
.cta-band .btn-row { justify-content: center; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--navy-950);
  border-top: 1px solid var(--line);
  padding: 48px 0 26px;
  font-size: 0.92rem;
}
.footer-grid { display: grid; gap: 30px; }
.footer-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.footer-brand img { width: 40px; height: 40px; border-radius: 50%; background: #fff; }
.footer-brand .brand-name { font-size: 1.05rem; }
.site-footer p { color: var(--muted); }
.footer-col h3 {
  font-family: var(--ff-body);
  font-size: 0.74rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--amber-400);
  margin-bottom: 0.9rem;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer-col a { color: var(--muted); }
.footer-col a:hover { color: #fff; }
.footer-areas { color: var(--muted); line-height: 1.9; }

.social-row { display: flex; gap: 10px; margin-top: 16px; }
.social-row a {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line-strong);
  color: var(--muted);
}
.social-row a:hover { background: rgba(244, 178, 60, 0.14); border-color: rgba(244, 178, 60, 0.45); color: var(--amber-400); }

.footer-bottom {
  margin-top: 34px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  justify-content: space-between;
  color: var(--muted-dim);
  font-size: 0.84rem;
}

/* ---------- Sticky mobile call bar ---------- */
.callbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(7, 13, 24, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--line-strong);
}
.callbar .btn { padding: 12px 14px; font-size: 0.92rem; }
body { padding-bottom: 78px; }

/* ---------- 404 ---------- */
.err-page {
  min-height: 78vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 70px 0;
}
.err-code {
  font-family: var(--ff-display);
  font-size: clamp(4.5rem, 20vw, 9rem);
  font-weight: 700;
  line-height: 1;
  color: var(--amber-400);
  margin: 0;
}
.err-links { list-style: none; padding: 0; margin: 1.8rem 0 0; display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: center; }

/* ==========================================================================
   Breakpoints
   ========================================================================== */
@media (min-width: 620px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .price-name { flex: 1 1 auto; }
}

@media (min-width: 820px) {
  .section { padding: 84px 0; }
  .stats-grid { grid-template-columns: repeat(4, 1fr); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
  .about-grid { grid-template-columns: 0.9fr 1.1fr; align-items: center; }
  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; }
  .hero { min-height: 660px; padding: 80px 0 64px; }
  /* Desktop: add a left-to-right scrim so copy stays readable while the
     craftsman on the right side of the photo remains clearly visible. */
  .hero::after {
    background:
      linear-gradient(180deg, rgba(7, 13, 24, 0.5) 0%, rgba(7, 13, 24, 0.34) 45%, rgba(7, 13, 24, 0.9) 100%),
      linear-gradient(100deg, rgba(7, 13, 24, 0.94) 0%, rgba(7, 13, 24, 0.7) 48%, rgba(7, 13, 24, 0.16) 100%);
  }
  .hero-media img { object-position: 72% 28%; }
}

@media (min-width: 980px) {
  .nav { display: flex; align-items: center; gap: 20px; }
  .nav-toggle { display: none; }
  .mobile-nav { display: none !important; }
  .header-phone { display: inline-flex; }
  .callbar { display: none; }
  body { padding-bottom: 0; }
  .split { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: start; }
  .split--wide { grid-template-columns: 1.05fr 0.95fr; }
}

@media (max-width: 400px) {
  .header-book { display: none; }
}

/* ---------- Motion / print ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  .btn:hover, .svc:hover { transform: none; }
}

@media print {
  .site-header, .callbar, .cal-shell, .site-footer .social-row { display: none; }
  body { background: #fff; color: #000; padding-bottom: 0; }
  .hero::after, .hero-media { display: none; }
}