/* ==========================================================================
   Let Steve Do It — Fences Installed & Repaired
   main.css — design tokens, base, layout, components
   Palette derived from the business card in assets/img/steve-at-work-flyer.jpg
   (barn red + signal yellow) tuned into a cedar / wrought-iron / dusk system.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Brand — sampled from business card, tuned for AA contrast */
  --brand-primary:   #A8281F;   /* barn red — from card lettering */
  --brand-primary-d: #7E1B14;
  --brand-primary-l: #C6362B;
  --brand-accent:    #E0A32E;   /* signal gold — from card lettering */
  --brand-accent-d:  #C8871B;
  --brand-accent-l:  #F2BE55;

  /* Surfaces — cedar & dusk */
  --surface-deep:    #17130F;   /* near-black espresso */
  --surface-deep-2:  #221B15;
  --surface-raised:  #2E2419;
  --surface-page:    #FBF7F1;   /* warm paper */
  --surface-card:    #FFFFFF;
  --surface-sand:    #F3EADC;
  --surface-sand-2:  #E9DCC9;

  /* Text */
  --text-primary:    #1C1917;
  --text-body:       #45403A;
  --text-muted:      #6E645A;
  --text-on-dark:    #FBF7F1;
  --text-on-dark-mut:#C9BCA9;

  /* Lines */
  --line-hairline:   #E2D6C4;
  --line-hairline-d: #3A2F24;

  /* Semantic */
  --ok: #2F6F4E;
  --err: #A8281F;

  /* Multi-layer shadows — brand-tinted, never pure black */
  --sh-sm:
    0 1px 2px rgba(28, 20, 14, .07),
    0 2px 6px rgba(28, 20, 14, .05);
  --sh-md:
    0 1px 2px rgba(28, 20, 14, .08),
    0 6px 14px rgba(28, 20, 14, .07),
    0 14px 34px rgba(28, 20, 14, .06);
  --sh-lg:
    0 2px 4px rgba(28, 20, 14, .09),
    0 10px 24px rgba(28, 20, 14, .09),
    0 28px 64px rgba(28, 20, 14, .10);
  --sh-xl:
    0 2px 6px rgba(28, 20, 14, .10),
    0 16px 40px rgba(28, 20, 14, .12),
    0 44px 96px rgba(28, 20, 14, .14);
  --sh-warm:
    0 10px 30px rgba(168, 40, 31, .16),
    0 24px 60px rgba(168, 40, 31, .10);

  /* Radii */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* Fluid type scale */
  --fs-eyebrow: clamp(.68rem, .64rem + .18vw, .78rem);
  --fs-body:    clamp(1.0rem, .97rem + .16vw, 1.09rem);
  --fs-lead:    clamp(1.1rem, 1.03rem + .34vw, 1.32rem);
  --fs-h4:      clamp(1.12rem, 1.05rem + .34vw, 1.34rem);
  --fs-h3:      clamp(1.34rem, 1.18rem + .72vw, 1.85rem);
  --fs-h2:      clamp(1.95rem, 1.5rem + 2.1vw, 3.3rem);
  --fs-h1:      clamp(2.5rem, 1.65rem + 3.9vw, 5.1rem);
  --fs-display: clamp(3rem, 1.9rem + 5vw, 6.4rem);

  /* Rhythm */
  /* Section rhythm. Two adjacent sections contribute padding on both sides,
     so the visible gap is roughly double this value — keep it restrained. */
  --sp-section: clamp(3rem, 1.9rem + 3.4vw, 5.25rem);
  --gutter:     clamp(1.15rem, .7rem + 2vw, 2.5rem);
  --maxw:       1280px;
  --maxw-prose: 68ch;

  /* Motion */
  --e-out:  cubic-bezier(.16, 1, .3, 1);
  --e-io:   cubic-bezier(.65, 0, .35, 1);
  --t-fast: .18s;
  --t-med:  .32s;
  --t-slow: .6s;

  /* Z-index scale */
  --z-base: 1;
  --z-raised: 10;
  --z-sticky: 20;
  --z-header: 30;
  --z-drawer: 40;
  --z-modal: 50;
  --z-toast: 60;

  --header-h: 78px;
}

/* --------------------------------------------------------------------------
   2. RESET / BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: var(--fs-body);
  line-height: 1.68;
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

img, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: 'Fraunces', 'Playfair Display', Georgia, serif;
  color: var(--text-primary);
  line-height: 1.06;
  letter-spacing: -0.022em;
  margin: 0 0 .6em;
  font-weight: 600;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); line-height: 1.28; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

a { color: var(--brand-primary); text-decoration: none; }
a:hover { color: var(--brand-primary-d); }

ul, ol { margin: 0 0 1.15em; padding-left: 1.3em; }
li { margin-bottom: .45em; }

button { font: inherit; cursor: pointer; }

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

::selection { background: var(--brand-accent); color: var(--surface-deep); }

.skip-link {
  position: absolute; left: 8px; top: -60px;
  background: var(--brand-primary); color: #fff;
  padding: .75rem 1.25rem; border-radius: var(--r-sm);
  z-index: var(--z-toast); font-weight: 600;
  transition: top var(--t-fast) var(--e-out);
}
.skip-link:focus { top: 8px; color: #fff; }

.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;
}

/* --------------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: 980px; }

.section { padding-block: var(--sp-section); position: relative; }
.section--sand { background: var(--surface-sand); }
.section--dark {
  background: var(--surface-deep);
  color: var(--text-on-dark);
}
.section--dark h2, .section--dark h3, .section--dark h4 { color: var(--text-on-dark); }
.section--dark p { color: var(--text-on-dark-mut); }

.grid { display: grid; gap: clamp(1.1rem, .7rem + 1.4vw, 2rem); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.stack > * + * { margin-top: 1.15rem; }
.prose { max-width: var(--maxw-prose); }

/* Section heading block */
.sec-head { max-width: 760px; margin-bottom: clamp(1.6rem, 1.15rem + 1.4vw, 2.6rem); }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head p { font-size: var(--fs-lead); color: var(--text-muted); }
.section--dark .sec-head p { color: var(--text-on-dark-mut); }

/* Eyebrow — survey-tick motif */
.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: 'Inter', sans-serif;
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--brand-primary);
  margin-bottom: 1rem;
}
.eyebrow::before {
  content: ''; width: 30px; height: 2px;
  background: linear-gradient(90deg, var(--brand-accent), var(--brand-primary));
  border-radius: 2px;
}
.section--dark .eyebrow { color: var(--brand-accent); }
.section--dark .eyebrow::before {
  background: linear-gradient(90deg, var(--brand-accent), transparent);
}

/* Picket rhythm divider — theme motif */
.picket-rule {
  height: 20px;
  background-image: repeating-linear-gradient(
    90deg,
    var(--line-hairline) 0 2px,
    transparent 2px 14px
  );
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}

/* --------------------------------------------------------------------------
   4. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--brand-primary);
  --btn-fg: #fff;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 52px;
  padding: .95rem 1.7rem;
  font-family: 'Inter', sans-serif;
  font-size: .97rem; font-weight: 650; letter-spacing: .012em;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  box-shadow: var(--sh-md);
  transition: transform var(--t-med) var(--e-out),
              box-shadow var(--t-med) var(--e-out),
              background-color var(--t-fast) var(--e-out),
              color var(--t-fast) var(--e-out);
}
.btn::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(120deg, var(--brand-primary-l), var(--brand-primary-d));
  opacity: 0;
  transition: opacity var(--t-med) var(--e-out);
}
.btn:hover { color: #fff; transform: translateY(-3px); box-shadow: var(--sh-warm); }
.btn:hover::after { opacity: 1; }
.btn:active { transform: translateY(-1px); }

.btn svg { width: 19px; height: 19px; flex: none; }

.btn--accent { --btn-bg: var(--brand-accent); --btn-fg: #2A1D07; }
.btn--accent::after { background: linear-gradient(120deg, var(--brand-accent-l), var(--brand-accent-d)); }
.btn--accent:hover { color: #2A1D07; box-shadow: 0 10px 30px rgba(224,163,46,.32), 0 24px 60px rgba(224,163,46,.18); }

.btn--ghost {
  --btn-bg: transparent; --btn-fg: var(--text-primary);
  border-color: var(--line-hairline);
  box-shadow: none;
}
.btn--ghost::after { background: var(--surface-sand); }
.btn--ghost:hover { color: var(--text-primary); box-shadow: var(--sh-md); }

.btn--on-dark {
  --btn-bg: rgba(255,255,255,.09); --btn-fg: #fff;
  border-color: rgba(255,255,255,.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: none;
}
.btn--on-dark::after { background: rgba(255,255,255,.17); }

.btn--lg { min-height: 60px; padding: 1.1rem 2.2rem; font-size: 1.03rem; }
.btn--block { width: 100%; }

/* Arrow-slide link */
.link-arrow {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 650; font-size: .95rem;
  color: var(--brand-primary);
}
.link-arrow svg {
  width: 17px; height: 17px;
  transition: transform var(--t-med) var(--e-out);
}
.link-arrow:hover svg { transform: translateX(5px); }

/* --------------------------------------------------------------------------
   5. CARDS / GLASS
   -------------------------------------------------------------------------- */
.card {
  position: relative;
  background: var(--surface-card);
  border: 1px solid var(--line-hairline);
  border-radius: var(--r-lg);
  padding: clamp(1.4rem, 1rem + 1.2vw, 2.1rem);
  box-shadow: var(--sh-sm);
  transition: transform var(--t-med) var(--e-out),
              box-shadow var(--t-med) var(--e-out),
              border-color var(--t-med) var(--e-out);
}
.card--lift { cursor: pointer; }
.card--lift:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh-lg);
  border-color: var(--brand-accent);
}

/* Glassmorphism — opaque fallback first, blur layered on only if supported */
.glass {
  background: rgba(255, 255, 255, .86);
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: var(--sh-md), inset 0 1px 0 rgba(255,255,255,.9);
}
.glass--dark {
  background: rgba(34, 27, 21, .82);
  border: 1px solid rgba(255, 255, 255, .13);
  box-shadow: var(--sh-lg), inset 0 1px 0 rgba(255,255,255,.09);
  color: var(--text-on-dark);
}
@supports ((backdrop-filter: blur(14px)) or (-webkit-backdrop-filter: blur(14px))) {
  .glass {
    background: rgba(255, 255, 255, .62);
    backdrop-filter: blur(18px) saturate(155%);
    -webkit-backdrop-filter: blur(18px) saturate(155%);
  }
  .glass--dark {
    background: rgba(34, 27, 21, .58);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
  }
}

/* Pill chip */
.chip {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .45rem .95rem;
  font-size: .84rem; font-weight: 600;
  color: var(--text-body);
  background: var(--surface-card);
  border: 1px solid var(--line-hairline);
  border-radius: var(--r-pill);
  transition: all var(--t-fast) var(--e-out);
}
a.chip:hover {
  color: var(--brand-primary);
  border-color: var(--brand-accent);
  box-shadow: var(--sh-sm);
  transform: translateY(-2px);
}
.chip--dark {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.2);
  color: var(--text-on-dark);
}

/* Star rating */
.stars { display: inline-flex; gap: 2px; }
.stars svg { width: 17px; height: 17px; fill: var(--brand-accent); }
.stars--lg svg { width: 22px; height: 22px; }

/* --------------------------------------------------------------------------
   6. TOP BAR
   -------------------------------------------------------------------------- */
.topbar {
  background: var(--surface-deep);
  color: var(--text-on-dark-mut);
  font-size: .845rem;
  border-bottom: 1px solid var(--line-hairline-d);
}
.topbar__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.2rem; min-height: 44px; flex-wrap: wrap;
}
.topbar__group { display: flex; align-items: center; gap: 1.35rem; flex-wrap: wrap; }
.topbar__item {
  display: inline-flex; align-items: center; gap: .48rem;
  color: var(--text-on-dark-mut);
  transition: color var(--t-fast) var(--e-out);
}
.topbar__item svg { width: 15px; height: 15px; flex: none; color: var(--brand-accent); }
a.topbar__item:hover { color: #fff; }

.topbar__socials { display: flex; align-items: center; gap: .35rem; }
.topbar__social {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  color: var(--text-on-dark-mut);
  border: 1px solid rgba(255,255,255,.14);
  transition: all var(--t-fast) var(--e-out);
}
.topbar__social svg { width: 15px; height: 15px; }
.topbar__social:hover {
  color: var(--surface-deep);
  background: var(--brand-accent);
  border-color: var(--brand-accent);
  transform: translateY(-2px);
}

.topbar__rating {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .3rem .7rem;
  border-radius: var(--r-pill);
  background: rgba(224,163,46,.14);
  border: 1px solid rgba(224,163,46,.3);
  color: #F5E6C8; font-weight: 600; font-size: .8rem;
}
.topbar__rating svg { width: 14px; height: 14px; fill: var(--brand-accent); }

@media (max-width: 900px) {
  .topbar__group--secondary { display: none; }
  .topbar__inner { justify-content: center; }
}

/* --------------------------------------------------------------------------
   7. HEADER / NAV
   -------------------------------------------------------------------------- */
.header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: rgba(251, 247, 241, .84);
  border-bottom: 1px solid var(--line-hairline);
  transition: box-shadow var(--t-med) var(--e-out),
              background-color var(--t-med) var(--e-out);
}
@supports ((backdrop-filter: blur(14px)) or (-webkit-backdrop-filter: blur(14px))) {
  .header {
    background: rgba(251, 247, 241, .7);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
  }
}
.header.is-stuck {
  background: rgba(251, 247, 241, .93);
  box-shadow: var(--sh-md);
}

.header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  min-height: var(--header-h);
  transition: min-height var(--t-med) var(--e-out);
}
.header.is-stuck .header__inner { min-height: 66px; }

/* Brand slot — image only, no hardcoded text */
.brand { display: inline-flex; align-items: center; flex: none; }
.brand img {
  height: 50px; width: auto;
  transition: height var(--t-med) var(--e-out);
}
.header.is-stuck .brand img { height: 42px; }

/* Scroll progress */
.header__progress {
  position: absolute; left: 0; bottom: -1px;
  height: 2px; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--brand-primary), var(--brand-accent));
}

.nav { display: flex; align-items: center; gap: .3rem; }
.nav__link {
  position: relative;
  padding: .6rem .85rem;
  font-size: .93rem; font-weight: 550;
  color: var(--text-body);
  border-radius: var(--r-sm);
  white-space: nowrap;
  transition: color var(--t-fast) var(--e-out);
}
.nav__link::after {
  content: '';
  position: absolute; left: .85rem; right: .85rem; bottom: .32rem;
  height: 2px; border-radius: 2px;
  background: var(--brand-accent);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform var(--t-med) var(--e-out);
}
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--brand-primary); }
.nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); }

/* Dropdown */
.nav__item { position: relative; }
.nav__toggle {
  display: inline-flex; align-items: center; gap: .35rem;
  background: none; border: 0;
  padding: .6rem .85rem;
  font-size: .93rem; font-weight: 550; font-family: inherit;
  color: var(--text-body);
  border-radius: var(--r-sm);
}
.nav__toggle svg {
  width: 14px; height: 14px;
  transition: transform var(--t-med) var(--e-out);
}
.nav__item:hover .nav__toggle,
.nav__toggle[aria-expanded="true"] { color: var(--brand-primary); }
.nav__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.nav__menu {
  position: absolute; top: calc(100% + 10px); left: 50%;
  transform: translateX(-50%) translateY(-8px);
  min-width: 292px;
  padding: .55rem;
  list-style: none; margin: 0;
  background: var(--surface-card);
  border: 1px solid var(--line-hairline);
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--t-med) var(--e-out),
              transform var(--t-med) var(--e-out),
              visibility var(--t-med);
}
.nav__item:hover .nav__menu,
.nav__menu.is-open {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav__menu li { margin: 0; }
.nav__menu a {
  display: block;
  padding: .68rem .9rem;
  font-size: .91rem; font-weight: 550;
  color: var(--text-body);
  border-radius: var(--r-sm);
  transition: all var(--t-fast) var(--e-out);
}
.nav__menu a:hover {
  background: var(--surface-sand);
  color: var(--brand-primary);
  transform: translateX(3px);
}

.header__cta { display: flex; align-items: center; gap: .7rem; flex: none; }

.burger {
  display: none;
  width: 46px; height: 46px;
  background: none; border: 1px solid var(--line-hairline);
  border-radius: var(--r-sm);
  padding: 0; place-items: center;
}
.burger span {
  display: block; width: 21px; height: 2px;
  background: var(--text-primary); border-radius: 2px;
  transition: transform var(--t-med) var(--e-out),
              opacity var(--t-fast) var(--e-out);
}
.burger span + span { margin-top: 5px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: var(--z-drawer);
  background: var(--surface-page);
  padding: calc(var(--header-h) + 1.5rem) var(--gutter) 2rem;
  overflow-y: auto;
  opacity: 0; visibility: hidden;
  transform: translateY(-12px);
  transition: opacity var(--t-med) var(--e-out),
              transform var(--t-med) var(--e-out),
              visibility var(--t-med);
}
.drawer.is-open { opacity: 1; visibility: visible; transform: none; }
.drawer__nav { list-style: none; margin: 0 0 2rem; padding: 0; }
.drawer__nav li {
  margin: 0;
  border-bottom: 1px solid var(--line-hairline);
  opacity: 0; transform: translateY(14px);
}
.drawer.is-open .drawer__nav li {
  animation: drawerIn .5s var(--e-out) forwards;
}
.drawer__nav a, .drawer__sub-toggle {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  padding: 1.05rem .25rem;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.25rem; font-weight: 600;
  color: var(--text-primary);
  background: none; border: 0; text-align: left;
}
.drawer__sub-toggle svg { width: 17px; height: 17px; transition: transform var(--t-med) var(--e-out); }
.drawer__sub-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.drawer__sub {
  list-style: none; margin: 0; padding: 0 0 .7rem;
  max-height: 0; overflow: hidden;
  transition: max-height var(--t-med) var(--e-io);
}
.drawer__sub.is-open { max-height: 460px; }
.drawer__sub li { border: 0; opacity: 1; transform: none; animation: none; }
.drawer__sub a {
  font-family: 'Inter', sans-serif;
  font-size: 1rem; font-weight: 500;
  padding: .62rem .25rem .62rem 1.1rem;
  color: var(--text-body);
}
@keyframes drawerIn { to { opacity: 1; transform: none; } }

@media (max-width: 1080px) {
  .nav, .header__cta .btn--ghost { display: none; }
  .burger { display: grid; }
}
/* Below this width the header CTA button no longer fits beside the logo
   and the burger — the drawer and the sticky mobile bar both carry it. */
@media (max-width: 620px) {
  .header__cta .btn { display: none; }
}
@media (min-width: 1081px) {
  .drawer { display: none; }
}

/* --------------------------------------------------------------------------
   8. HERO
   -------------------------------------------------------------------------- */
/* Viewport-adaptive hero.
   The whole block is sized to one screen minus the sticky header and top bar,
   and every internal gap is expressed in svh so the content compresses with
   the viewport instead of spilling past the fold. Nothing is hidden — only the
   spacing gives way. `dvh` is preferred on mobile so the browser chrome
   collapsing/expanding does not resize the hero mid-scroll. */
.hero {
  --chrome: calc(var(--header-h) + 44px);   /* sticky header + top bar */
  position: relative;
  min-height: calc(100svh - var(--chrome));
  display: flex; align-items: center;
  overflow: hidden;
  background: var(--surface-deep);
  isolation: isolate;
}
@supports (height: 100dvh) {
  .hero { min-height: calc(100dvh - var(--chrome)); }
}
.hero__media {
  position: absolute; inset: -12% 0 -12%;
  z-index: -3;
  will-change: transform;
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__scrim {
  position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(100deg, rgba(23,19,15,.95) 0%, rgba(23,19,15,.84) 38%, rgba(23,19,15,.34) 72%, rgba(23,19,15,.15) 100%),
    linear-gradient(to top, rgba(23,19,15,.85) 0%, transparent 42%);
}
/* Picket texture overlay — theme motif */
.hero__pickets {
  position: absolute; inset: 0; z-index: -1;
  background-image: repeating-linear-gradient(
    90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 42px
  );
  -webkit-mask-image: linear-gradient(to top, #000, transparent 62%);
          mask-image: linear-gradient(to top, #000, transparent 62%);
  pointer-events: none;
}

/* Padding and inter-element gaps scale with viewport HEIGHT (svh), so a 720px
   laptop gets tight spacing and a 1080p screen gets generous spacing, without
   either one clipping the content. */
.hero__inner {
  position: relative; width: 100%;
  padding-block: clamp(1.75rem, 4.5svh, 5rem);
}
.hero__content { max-width: 46rem; }

.hero__badge {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .45rem 1rem;
  border-radius: var(--r-pill);
  font-size: .82rem; font-weight: 600;
  color: #F2E6D2;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.2);
}
@supports (backdrop-filter: blur(10px)) {
  .hero__badge { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
}
.hero__badge .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--brand-accent);
  box-shadow: 0 0 0 4px rgba(224,163,46,.22);
}

.hero h1 {
  color: #fff;
  /* Height-aware: the display scale also respects short viewports so a long
     headline cannot alone push the CTAs below the fold. */
  font-size: min(var(--fs-display), 10.5svh);
  margin: clamp(.7rem, 1.8svh, 1.4rem) 0 0;
  letter-spacing: -0.035em;
  line-height: .97;
}
.hero h1 .accent {
  display: block;
  background: linear-gradient(100deg, var(--brand-accent-l), var(--brand-accent-d));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  font-style: italic;
}
.hero__lead {
  font-size: var(--fs-lead);
  color: #E4D9C8;
  max-width: 40rem;
  margin: clamp(.8rem, 2svh, 1.7rem) 0 0;
}
.hero__actions {
  display: flex; flex-wrap: wrap; gap: .85rem;
  margin-top: clamp(1.1rem, 2.8svh, 2.3rem);
}

.hero__trust {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin-top: clamp(1.1rem, 3svh, 2.6rem);
  padding-top: clamp(.9rem, 2.4svh, 2rem);
  border-top: 1px solid rgba(255,255,255,.13);
}
.hero__trust .chip {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.17);
  color: #EADFCE;
  font-size: .82rem;
}
.hero__trust .chip svg { width: 15px; height: 15px; color: var(--brand-accent); }
@supports (backdrop-filter: blur(8px)) {
  .hero__trust .chip { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
}

/* Floating rating card */
.hero__float {
  position: absolute; right: var(--gutter); bottom: clamp(2rem, 5vh, 4.5rem);
  z-index: 2;
  width: 268px;
  padding: 1.4rem 1.5rem;
  border-radius: var(--r-lg);
  animation: float 8s ease-in-out infinite;
}
.hero__float .num {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 2.9rem; font-weight: 700; line-height: 1;
  color: #fff;
}
.hero__float .sub { font-size: .85rem; color: var(--text-on-dark-mut); margin-top: .55rem; }
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}
@media (max-width: 1180px) { .hero__float { display: none; } }

.hero__scroll {
  position: absolute; left: 50%; bottom: clamp(.5rem, 1.4svh, 1.6rem);
  transform: translateX(-50%);
  display: grid; place-items: center; gap: .4rem;
  font-size: .72rem; letter-spacing: .19em; text-transform: uppercase;
  color: rgba(255,255,255,.6);
  pointer-events: none;
}
.hero__scroll .line {
  width: 1px; height: clamp(20px, 4svh, 42px);
  background: linear-gradient(to bottom, var(--brand-accent), transparent);
  animation: scrollCue 2.4s ease-in-out infinite;
  transform-origin: top;
}
/* Below ~640px tall the cue competes with the CTAs for the last strip of
   space, and the content itself already signals that the page scrolls. */
@media (max-height: 640px) {
  .hero__scroll { display: none; }
}
@keyframes scrollCue {
  0%, 100% { transform: scaleY(.35); opacity: .4; }
  50%      { transform: scaleY(1);   opacity: 1; }
}
@media (max-width: 720px) { .hero__scroll { display: none; } }

/* --------------------------------------------------------------------------
   HERO — narrow viewports
   On phones the sticky Call/WhatsApp bar eats 60px, and the type scale that
   suits a wide screen is far too tall for a 390px column. Tighten the scale
   and stack the CTAs full-width so the entire hero still lands above the fold.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .hero {
    /* also subtract the sticky mobile action bar + safe-area inset */
    --chrome: calc(var(--header-h) + 44px + 60px + env(safe-area-inset-bottom, 0px));
  }
  .hero h1 {
    font-size: min(clamp(2.2rem, 8.5vw, 3.1rem), 9svh);
    letter-spacing: -0.03em;
  }
  .hero__lead {
    font-size: 1rem;
    line-height: 1.55;
    max-width: 34rem;
  }
  .hero__badge { font-size: .74rem; padding: .35rem .8rem; }

  /* Full-width stacked CTAs — bigger tap targets, predictable height */
  .hero__actions { flex-direction: column; align-items: stretch; gap: .6rem; }
  .hero__actions .btn { width: 100%; min-height: 54px; }

  .hero__trust { gap: .4rem; }
  .hero__trust .chip { font-size: .74rem; padding: .34rem .7rem; }
  .hero__trust .chip svg { width: 13px; height: 13px; }
}

/* Very short phones (SE-class, and landscape): the trust chips wrap to two
   rows here, which is the last thing pushing past the fold. Scroll them
   horizontally on a single line instead of dropping them — the visitor still
   sees every trust signal, and the hero lands in one screen. */
@media (max-width: 767px) and (max-height: 810px) {
  .hero h1 { font-size: min(clamp(1.9rem, 7.2vw, 2.5rem), 8svh); }
  .hero__lead {
    font-size: .95rem;
    /* keep the promise short enough to stay above the CTAs */
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
    overflow: hidden;
  }
  .hero__actions .btn { min-height: 48px; padding-block: .7rem; }

  .hero__trust {
    margin-top: .7rem; padding-top: .6rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* fade the right edge to signal there is more to swipe */
    -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent);
          mask-image: linear-gradient(90deg, #000 86%, transparent);
  }
  .hero__trust::-webkit-scrollbar { display: none; }
  .hero__trust .chip { flex: none; }
}

/* Landscape phones: a ~390px-tall viewport cannot stack five blocks. Let the
   hero be its natural height rather than forcing a full screen, put the CTAs
   back on one row, and hide the decorative badge. Content stays complete. */
@media (max-height: 500px) and (orientation: landscape) {
  .hero { min-height: 0; }
  .hero__inner { padding-block: .85rem; }
  .hero h1 { font-size: clamp(1.5rem, 4.6vh, 2.1rem); margin-top: .35rem; }
  .hero__lead {
    font-size: .87rem; line-height: 1.45; margin-top: .4rem; max-width: 46rem;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .hero__badge { display: none; }
  .hero__actions {
    flex-direction: row; margin-top: .7rem; gap: .5rem;
  }
  .hero__actions .btn { width: auto; min-height: 44px; padding: .55rem 1.15rem; font-size: .9rem; }
  .hero__trust {
    margin-top: .55rem; padding-top: .5rem;
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
          mask-image: linear-gradient(90deg, #000 88%, transparent);
  }
  .hero__trust::-webkit-scrollbar { display: none; }
  .hero__trust .chip { flex: none; font-size: .72rem; padding: .28rem .65rem; }
  .hero__float, .hero__scroll { display: none; }
}

/* --------------------------------------------------------------------------
   9. STAT STRIP
   -------------------------------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--line-hairline);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface-card);
  box-shadow: var(--sh-md);
}
.stat {
  padding: clamp(1.2rem, .9rem + 1vw, 1.8rem) 1.2rem;
  text-align: center;
  border-right: 1px solid var(--line-hairline);
  position: relative;
}
.stat:last-child { border-right: 0; }
.stat__num {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.3rem);
  font-weight: 700; line-height: 1;
  color: var(--brand-primary);
  letter-spacing: -0.03em;
}
.stat__label {
  margin-top: .7rem;
  font-size: .84rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted);
}
@media (max-width: 780px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2) { border-right: 0; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid var(--line-hairline); }
}

/* --------------------------------------------------------------------------
   10. SERVICE CARDS (bento, 3D tilt)
   -------------------------------------------------------------------------- */
.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(1rem, .7rem + 1vw, 1.6rem);
}
.svc {
  position: relative;
  grid-column: span 2;
  display: flex; flex-direction: column;
  min-height: 340px;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface-deep-2);
  border: 1px solid var(--line-hairline);
  box-shadow: var(--sh-md);
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform var(--t-med) var(--e-out),
              box-shadow var(--t-med) var(--e-out);
}
.svc--wide { grid-column: span 3; min-height: 400px; }
.svc--tall { grid-column: span 3; min-height: 400px; }

.svc__img { position: absolute; inset: 0; }
.svc__img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .85s var(--e-out);
}
.svc:hover .svc__img img { transform: scale(1.08); }
.svc__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgba(23,19,15,.95) 0%, rgba(23,19,15,.72) 38%, rgba(23,19,15,.18) 78%);
  transition: background var(--t-med) var(--e-out);
}
.svc:hover .svc__scrim {
  background: linear-gradient(to top,
    rgba(23,19,15,.97) 0%, rgba(23,19,15,.8) 45%, rgba(23,19,15,.3) 85%);
}
.svc__body {
  position: relative;
  margin-top: auto;
  padding: clamp(1.3rem, 1rem + 1vw, 1.9rem);
  transform: translateZ(28px);
}
.svc__kicker {
  font-size: .72rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--brand-accent);
}
.svc h3 { color: #fff; margin: .55rem 0 .55rem; font-size: var(--fs-h3); }
.svc p { color: #D6C9B6; font-size: .93rem; margin-bottom: 1rem; }
.svc .link-arrow { color: var(--brand-accent); }

@media (max-width: 1000px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .svc, .svc--wide, .svc--tall { grid-column: span 1; min-height: 320px; }
}
@media (max-width: 640px) {
  .bento { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   11. SPLIT / LAYERED IMAGERY
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 1.5rem + 3vw, 5rem);
  align-items: center;
}
.split--rev .split__media { order: -1; }

.split__media { position: relative; }
.split__media img {
  width: 100%; border-radius: var(--r-lg);
  box-shadow: var(--sh-xl);
}
/* Layered offset plate */
.split__media::before {
  content: '';
  position: absolute;
  inset: 22px -22px -22px 22px;
  border: 1px solid var(--brand-accent);
  border-radius: var(--r-lg);
  z-index: -1;
  opacity: .5;
}
/* Opaque, not glass — this badge floats over photography, so a translucent
   fill would leave its text at the mercy of whatever pixels sit behind it. */
.split__badge {
  position: absolute; right: -14px; bottom: -20px;
  padding: 1.1rem 1.35rem;
  border-radius: var(--r-md);
  text-align: center;
  background: var(--surface-card);
  border: 1px solid var(--line-hairline);
  box-shadow: var(--sh-lg);
  animation: float 9s ease-in-out infinite;
}
.split__badge .n {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 2rem; font-weight: 700; line-height: 1;
  color: var(--brand-primary);
}
.split__badge .t {
  font-size: .74rem; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-body); margin-top: .35rem;
}

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .split--rev .split__media { order: 0; }
  .split__media::before { inset: 16px -16px -16px 16px; }
}

/* Feature list */
.feat-list { list-style: none; margin: 0; padding: 0; }
.feat-list li {
  display: flex; gap: 1rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--line-hairline);
  margin: 0;
}
.feat-list li:last-child { border-bottom: 0; }
.feat-list .ico {
  flex: none;
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 11px;
  background: linear-gradient(135deg, rgba(168,40,31,.1), rgba(224,163,46,.14));
  border: 1px solid var(--line-hairline);
  color: var(--brand-primary);
}
.feat-list .ico svg { width: 19px; height: 19px; }
.feat-list h4 { margin: 0 0 .28rem; font-family: 'Inter', sans-serif; font-size: 1.03rem; font-weight: 650; }
.feat-list p { margin: 0; font-size: .93rem; color: var(--text-muted); }
.section--dark .feat-list li { border-color: var(--line-hairline-d); }
/* --text-on-dark-mut only reaches 3.2:1 at this size on --surface-deep.
   Body copy in the feature list needs the brighter tone to clear AA. */
.section--dark .feat-list p { color: #DCCFBC; }
.section--dark .feat-list .ico {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
  color: var(--brand-accent);
}
.section--dark .feat-list h4 { color: #fff; }

/* --------------------------------------------------------------------------
   12. PROCESS TIMELINE
   -------------------------------------------------------------------------- */
.process { position: relative; }
.process__track {
  position: absolute; left: 0; right: 0; top: 34px;
  height: 2px; background: var(--line-hairline-d);
}
.process__fill {
  position: absolute; left: 0; top: 0; height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--brand-primary), var(--brand-accent));
  transition: width .12s linear;
}
.process__steps {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.2rem, .8rem + 1.5vw, 2.2rem);
  position: relative;
}
.pstep__num {
  display: grid; place-items: center;
  width: 68px; height: 68px;
  border-radius: 50%;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.5rem; font-weight: 700;
  color: var(--brand-accent);
  background: var(--surface-deep);
  border: 2px solid var(--line-hairline-d);
  box-shadow: var(--sh-md);
  transition: all var(--t-med) var(--e-out);
}
.pstep.is-active .pstep__num {
  color: var(--surface-deep);
  background: var(--brand-accent);
  border-color: var(--brand-accent);
  box-shadow: 0 0 0 8px rgba(224,163,46,.16);
}
.pstep h3 { margin: 1.3rem 0 .5rem; font-size: var(--fs-h4); }
@media (max-width: 900px) {
  .process__track { display: none; }
  .process__steps { grid-template-columns: 1fr; gap: 1.6rem; }
  .pstep { display: grid; grid-template-columns: 68px 1fr; gap: 1.2rem; align-items: start; }
  .pstep h3 { margin-top: .5rem; }
}

/* --------------------------------------------------------------------------
   13. REVIEWS
   -------------------------------------------------------------------------- */
.rating-hero {
  display: flex; align-items: center; gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  flex-wrap: wrap;
  padding: clamp(1.6rem, 1.2rem + 1.5vw, 2.4rem);
  border-radius: var(--r-lg);
  margin-bottom: 2.6rem;
}
.rating-hero__score {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(3.2rem, 2.4rem + 3vw, 4.6rem);
  font-weight: 700; line-height: 1;
  color: var(--brand-accent);
  letter-spacing: -0.03em;
}
.rating-hero__meta { flex: 1; min-width: 200px; }
.rating-hero__meta p { margin: .5rem 0 0; font-size: .92rem; }

/* Filter tabs */
.tabs {
  display: flex; flex-wrap: wrap; gap: .55rem;
  margin-bottom: 2.2rem;
}
.tab {
  padding: .68rem 1.35rem;
  font-size: .9rem; font-weight: 600;
  color: var(--text-on-dark-mut);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r-pill);
  transition: all var(--t-fast) var(--e-out);
}
.tab:hover { color: #fff; border-color: rgba(255,255,255,.3); transform: translateY(-2px); }
.tab[aria-selected="true"] {
  color: var(--surface-deep);
  background: var(--brand-accent);
  border-color: var(--brand-accent);
  box-shadow: 0 6px 18px rgba(224,163,46,.28);
}

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, .7rem + 1vw, 1.6rem);
  transition: opacity var(--t-med) var(--e-out);
}
.reviews-grid.is-swapping { opacity: 0; }

.review {
  display: flex; flex-direction: column;
  padding: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
  border-radius: var(--r-lg);
  position: relative;
}
.review__quote {
  position: absolute; top: 1rem; right: 1.35rem;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 4.5rem; line-height: 1;
  color: rgba(224,163,46,.16);
  pointer-events: none; user-select: none;
}
.review .stars { margin-bottom: 1rem; }
.review__text {
  font-size: .96rem; color: var(--text-on-dark-mut);
  margin-bottom: 1.4rem; flex: 1;
}
.review__foot {
  display: flex; align-items: center; gap: .8rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(255,255,255,.1);
}
.review__avatar {
  flex: none;
  display: grid; place-items: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.05rem; font-weight: 700;
  color: var(--surface-deep);
  background: linear-gradient(135deg, var(--brand-accent-l), var(--brand-accent-d));
}
.review__name { font-weight: 650; color: #fff; font-size: .94rem; }
.review__src {
  display: flex; align-items: center; gap: .35rem;
  font-size: .79rem; color: var(--text-on-dark-mut); margin-top: .12rem;
}
.review__src svg { width: 13px; height: 13px; }
.review__cat {
  align-self: flex-start;
  margin-bottom: 1rem;
  padding: .3rem .75rem;
  font-size: .73rem; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--brand-accent);
  background: rgba(224,163,46,.12);
  border: 1px solid rgba(224,163,46,.25);
  border-radius: var(--r-pill);
}
@media (max-width: 980px) { .reviews-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .reviews-grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   14. GALLERY
   -------------------------------------------------------------------------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(.7rem, .55rem + .6vw, 1.1rem);
}
/* Homepage teaser holds exactly four photos — auto-fit them onto one row so
   there is no orphaned tile and no dead space beside it. */
.gallery--row { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .gallery--row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .gallery--row { grid-template-columns: 1fr; } }
.gal {
  position: relative;
  border: 0; padding: 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface-sand-2);
  box-shadow: var(--sh-sm);
  cursor: pointer;
  transition: transform var(--t-med) var(--e-out), box-shadow var(--t-med) var(--e-out);
}
.gal img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--e-out); }
.gal:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); }
.gal:hover img { transform: scale(1.08); }
.gal__cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.6rem .95rem .85rem;
  font-size: .84rem; font-weight: 600; color: #fff; text-align: left;
  background: linear-gradient(to top, rgba(23,19,15,.92), transparent);
  opacity: 0; transform: translateY(8px);
  transition: opacity var(--t-med) var(--e-out), transform var(--t-med) var(--e-out);
}
.gal:hover .gal__cap, .gal:focus-visible .gal__cap { opacity: 1; transform: none; }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: grid; place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(15, 12, 9, .93);
  opacity: 0; visibility: hidden;
  transition: opacity var(--t-med) var(--e-out), visibility var(--t-med);
}
@supports (backdrop-filter: blur(8px)) {
  .lightbox { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__img {
  max-width: min(1100px, 100%); max-height: 78vh;
  width: auto; border-radius: var(--r-md);
  box-shadow: var(--sh-xl);
  transform: scale(.94);
  transition: transform var(--t-med) var(--e-out);
}
.lightbox.is-open .lightbox__img { transform: none; }
.lightbox__cap { margin-top: 1.1rem; color: #E4D9C8; font-size: .93rem; text-align: center; }
.lightbox__btn {
  position: absolute;
  display: grid; place-items: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  color: #fff;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  transition: all var(--t-fast) var(--e-out);
}
.lightbox__btn:hover { background: var(--brand-accent); color: var(--surface-deep); border-color: var(--brand-accent); }
.lightbox__btn svg { width: 21px; height: 21px; }
.lightbox__close { top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); }
.lightbox__prev { left: clamp(.6rem, 3vw, 2rem); top: 50%; transform: translateY(-50%); }
.lightbox__next { right: clamp(.6rem, 3vw, 2rem); top: 50%; transform: translateY(-50%); }
.lightbox__prev:hover, .lightbox__next:hover { transform: translateY(-50%) scale(1.06); }

/* --------------------------------------------------------------------------
   15. FAQ ACCORDION
   -------------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--line-hairline); }
.faq__item { border-bottom: 1px solid var(--line-hairline); }
.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  width: 100%;
  padding: 1.5rem .25rem;
  font-family: 'Fraunces', Georgia, serif;
  font-size: var(--fs-h4); font-weight: 600;
  color: var(--text-primary);
  background: none; border: 0; text-align: left;
  transition: color var(--t-fast) var(--e-out);
}
.faq__q:hover { color: var(--brand-primary); }
.faq__ico {
  flex: none;
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line-hairline);
  color: var(--brand-primary);
  transition: all var(--t-med) var(--e-out);
}
.faq__ico svg { width: 15px; height: 15px; transition: transform var(--t-med) var(--e-out); }
.faq__q[aria-expanded="true"] .faq__ico {
  background: var(--brand-primary); color: #fff; border-color: var(--brand-primary);
}
.faq__q[aria-expanded="true"] .faq__ico svg { transform: rotate(45deg); }
.faq__a {
  max-height: 0; overflow: hidden;
  transition: max-height var(--t-med) var(--e-io);
}
.faq__a > div { padding: 0 .25rem 1.6rem; max-width: 62ch; color: var(--text-muted); }

/* --------------------------------------------------------------------------
   16. FORM
   -------------------------------------------------------------------------- */
.form { display: grid; gap: 1.15rem; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; }
@media (max-width: 640px) { .form__row { grid-template-columns: 1fr; } }

.field { position: relative; }
.field label {
  display: block;
  margin-bottom: .45rem;
  font-size: .86rem; font-weight: 600;
  color: var(--text-body);
}
.field .req { color: var(--brand-primary); }
.field input, .field select, .field textarea {
  width: 100%;
  padding: .92rem 1.05rem;
  font: inherit; font-size: .97rem;
  color: var(--text-primary);
  background: var(--surface-card);
  border: 1px solid var(--line-hairline);
  border-radius: var(--r-sm);
  transition: border-color var(--t-fast) var(--e-out),
              box-shadow var(--t-fast) var(--e-out);
}
.field textarea { min-height: 130px; resize: vertical; }
.field select { cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E645A' 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 1rem center; background-size: 17px;
  padding-right: 2.8rem;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--brand-accent);
  box-shadow: 0 0 0 4px rgba(224,163,46,.16);
}
.field.has-error input, .field.has-error select, .field.has-error textarea {
  border-color: var(--err);
  box-shadow: 0 0 0 4px rgba(168,40,31,.11);
}
.field__err {
  display: none;
  margin-top: .4rem;
  font-size: .82rem; font-weight: 600; color: var(--err);
}
.field.has-error .field__err { display: block; }

.check {
  display: flex; align-items: flex-start; gap: .7rem;
  font-size: .88rem; color: var(--text-muted);
  cursor: pointer;
}
.check input {
  flex: none; width: 20px; height: 20px; margin-top: .12rem;
  accent-color: var(--brand-primary); cursor: pointer;
}

.hp { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

.form__status {
  display: none;
  padding: 1rem 1.2rem;
  border-radius: var(--r-sm);
  font-size: .92rem; font-weight: 600;
}
.form__status.is-ok { display: block; color: var(--ok); background: rgba(47,111,78,.09); border: 1px solid rgba(47,111,78,.25); }
.form__status.is-err { display: block; color: var(--err); background: rgba(168,40,31,.08); border: 1px solid rgba(168,40,31,.24); }

.btn.is-loading { pointer-events: none; opacity: .75; }
.btn.is-loading .btn__label { opacity: .5; }
.spinner {
  display: none;
  width: 18px; height: 18px;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
.btn.is-loading .spinner { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   17. CTA BAND
   -------------------------------------------------------------------------- */
.cta-band {
  position: relative;
  padding: clamp(2rem, 1.5rem + 2.4vw, 3.4rem) clamp(1.4rem, 1rem + 2.4vw, 3.2rem);
  border-radius: var(--r-xl);
  overflow: hidden;
  background: linear-gradient(115deg, var(--brand-primary-d), var(--brand-primary) 55%, #8E1F18);
  color: #fff;
  box-shadow: var(--sh-xl);
  isolation: isolate;
}
.cta-band::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background-image: repeating-linear-gradient(
    90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 38px
  );
}
.cta-band::after {
  content: '';
  position: absolute; z-index: -1;
  width: 460px; height: 460px;
  right: -120px; top: -180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(224,163,46,.3), transparent 68%);
}
.cta-band h2 { color: #fff; max-width: 20ch; }
.cta-band p { color: rgba(255,255,255,.88); max-width: 52ch; font-size: var(--fs-lead); }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 1.5rem; }

/* Form card sitting on the red band — must stay an opaque light surface so
   labels and helper text keep AA contrast. Never glass over saturated colour. */
.form-card {
  padding: clamp(1.5rem, 1.2rem + 1.5vw, 2.2rem);
  border-radius: var(--r-lg);
  background: var(--surface-card);
  border: 1px solid rgba(255,255,255,.5);
  box-shadow: var(--sh-xl);
}
.form-card h3 { margin-bottom: .35rem; }
.form-card .form-card__sub {
  font-size: .92rem; color: var(--text-muted); margin-bottom: 1.4rem;
}
.form-card .form-card__foot {
  font-size: .82rem; color: var(--text-muted); text-align: center; margin: 0;
}

/* --------------------------------------------------------------------------
   18. BREADCRUMBS
   -------------------------------------------------------------------------- */
.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: .45rem;
  list-style: none; margin: 0; padding: 1.1rem 0;
  font-size: .85rem; color: var(--text-muted);
}
.crumbs li { margin: 0; display: flex; align-items: center; gap: .45rem; }
.crumbs li + li::before { content: '/'; color: var(--line-hairline); }
.crumbs a { color: var(--text-muted); }
.crumbs a:hover { color: var(--brand-primary); }
.crumbs [aria-current="page"] { color: var(--text-primary); font-weight: 600; }

/* Page hero (inner pages) */
.phero {
  position: relative;
  padding-block: clamp(3rem, 2rem + 5vw, 6rem);
  background: var(--surface-deep);
  color: var(--text-on-dark);
  overflow: hidden;
  isolation: isolate;
}
.phero::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.038) 0 1px, transparent 1px 40px);
}
.phero::after {
  content: '';
  position: absolute; z-index: -1;
  width: 620px; height: 620px; right: -180px; top: -280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(168,40,31,.32), transparent 66%);
}
.phero h1 { color: #fff; max-width: 20ch; }
.phero p { color: var(--text-on-dark-mut); font-size: var(--fs-lead); max-width: 58ch; }
.phero .crumbs, .phero .crumbs a { color: rgba(255,255,255,.62); }
.phero .crumbs a:hover { color: var(--brand-accent); }
.phero .crumbs [aria-current="page"] { color: #fff; }
.phero .crumbs li + li::before { color: rgba(255,255,255,.3); }

/* --------------------------------------------------------------------------
   19. FOOTER
   -------------------------------------------------------------------------- */
.footer {
  background: var(--surface-deep);
  color: var(--text-on-dark-mut);
  padding-top: clamp(3.5rem, 2.5rem + 4vw, 6rem);
  border-top: 3px solid var(--brand-primary);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: clamp(2rem, 1.4rem + 2vw, 3.4rem);
  padding-bottom: clamp(2.5rem, 2rem + 2vw, 4rem);
}
.footer__brand img { height: 54px; width: auto; }
.footer__blurb { margin-top: 1.3rem; font-size: .92rem; max-width: 34ch; }
.footer h4 {
  font-family: 'Inter', sans-serif;
  font-size: .82rem; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase;
  color: #fff;
  margin-bottom: 1.3rem;
}
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: .72rem; }
.footer a { color: var(--text-on-dark-mut); font-size: .92rem; transition: all var(--t-fast) var(--e-out); }
.footer a:hover { color: var(--brand-accent); }
.footer__contact li { display: flex; gap: .7rem; align-items: flex-start; font-size: .92rem; }
.footer__contact svg { width: 16px; height: 16px; flex: none; margin-top: .28rem; color: var(--brand-accent); }
.footer__socials { display: flex; gap: .5rem; margin-top: 1.5rem; }
.footer__socials a {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.15);
}
.footer__socials svg { width: 17px; height: 17px; }
.footer__socials a:hover {
  background: var(--brand-accent);
  border-color: var(--brand-accent);
  color: var(--surface-deep);
  transform: translateY(-3px);
}
.footer__map {
  border: 1px solid rgba(255,255,255,.13);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-top: 1.3rem;
  line-height: 0;
}
.footer__map iframe { width: 100%; height: 190px; border: 0; filter: grayscale(.35) contrast(1.05); }

.footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding-block: 1.6rem;
  border-top: 1px solid var(--line-hairline-d);
  font-size: .85rem;
}
.footer__credit a {
  position: relative;
  color: var(--brand-accent); font-weight: 650;
}
.footer__credit a::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1px; background: var(--brand-accent);
  transform: scaleX(0); transform-origin: 100% 50%;
  transition: transform var(--t-med) var(--e-out);
}
.footer__credit a:hover { color: var(--brand-accent-l); }
.footer__credit a:hover::after { transform: scaleX(1); transform-origin: 0 50%; }

@media (max-width: 980px) { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   20. MOBILE STICKY ACTION BAR
   -------------------------------------------------------------------------- */
.mobile-bar {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: var(--z-sticky);
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line-hairline-d);
  padding-bottom: env(safe-area-inset-bottom, 0);
  box-shadow: 0 -6px 24px rgba(23,19,15,.22);
}
.mobile-bar a {
  display: flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 60px;
  font-size: .97rem; font-weight: 650;
  color: #fff;
  background: var(--brand-primary);
}
.mobile-bar a svg { width: 20px; height: 20px; }
/* Darkened from WhatsApp brand #25D366 so white label text clears AA (4.5:1). */
.mobile-bar .wa { background: #157F3F; position: relative; overflow: hidden; }
.mobile-bar .wa::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.28), transparent 62%);
  animation: pulseWa 2.6s ease-in-out infinite;
}
@keyframes pulseWa {
  0%, 100% { opacity: 0; transform: scale(.6); }
  50%      { opacity: 1; transform: scale(1.25); }
}
@media (max-width: 767px) {
  .mobile-bar { display: grid; }
  body { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
}

/* --------------------------------------------------------------------------
   21. DEMO POPUP
   -------------------------------------------------------------------------- */
.modal {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: grid; place-items: center;
  padding: clamp(1rem, 4vw, 2rem);
  background: rgba(15, 12, 9, .74);
  opacity: 0; visibility: hidden;
  transition: opacity var(--t-med) var(--e-out), visibility var(--t-med);
}
@supports (backdrop-filter: blur(6px)) {
  .modal { backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
}
.modal.is-open { opacity: 1; visibility: visible; }
.modal__box {
  position: relative;
  width: min(560px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  padding: clamp(1.8rem, 1.4rem + 2vw, 3rem);
  border-radius: var(--r-xl);
  text-align: center;
  transform: scale(.9) translateY(18px);
  transition: transform .45s var(--e-out);
}
.modal.is-open .modal__box { transform: none; }
.modal__close {
  position: absolute; top: 1rem; right: 1rem;
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  color: var(--text-on-dark-mut);
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.16);
  transition: all var(--t-fast) var(--e-out);
}
.modal__close:hover { color: #fff; background: var(--brand-primary); border-color: var(--brand-primary); }
.modal__close svg { width: 17px; height: 17px; }
.modal__badge {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .4rem 1rem;
  font-size: .78rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--brand-accent);
  background: rgba(224,163,46,.13);
  border: 1px solid rgba(224,163,46,.3);
  border-radius: var(--r-pill);
  margin-bottom: 1.3rem;
}
.modal__box h2 { color: #fff; font-size: clamp(1.6rem, 1.3rem + 1.5vw, 2.2rem); }
.modal__box p { color: var(--text-on-dark-mut); font-size: .98rem; }
.countdown {
  display: flex; justify-content: center; gap: .6rem;
  margin: 1.7rem 0;
}
.cd-unit {
  min-width: 66px;
  padding: .8rem .5rem;
  border-radius: var(--r-md);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.13);
}
.cd-unit .n {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.7rem; font-weight: 700; line-height: 1;
  color: var(--brand-accent);
}
.cd-unit .l {
  margin-top: .3rem;
  font-size: .68rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-on-dark-mut);
}
.modal__actions { display: grid; gap: .7rem; margin-top: 1.6rem; }
.modal__note { margin-top: 1.2rem; font-size: .8rem; color: rgba(201,188,169,.75); }

/* --------------------------------------------------------------------------
   22. UTILITY
   -------------------------------------------------------------------------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-1 { margin-top: .6rem; }
.mt-2 { margin-top: 1.2rem; }
.mt-3 { margin-top: 1.6rem; }
.mt-4 { margin-top: 2.1rem; }
.flex-wrap { display: flex; flex-wrap: wrap; gap: .7rem; }
.center-actions { display: flex; flex-wrap: wrap; gap: .85rem; justify-content: center; }

@media (max-width: 780px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}