/* ==========================================================================
   S & H Garden Solutions — Lisburn
   Palette sampled from the client's own photographs:
   silver granite, Indian sandstone, foliage. Every foreground/background
   pair used for text is verified at 4.5:1 or better (see _build/RESEARCH.md).
   ========================================================================== */

:root {
  /* --- colour ---------------------------------------------------------- */
  --ink:        #161A14;   /* body text, CTA label            17.6:1 on white */
  --slate:      #2A3427;   /* deep surface                    12.9:1 w/ white */
  --moss:       #4F6344;   /* brand green                      6.6:1 w/ white */
  --moss-dk:    #3E4E35;
  --granite:    #8A929B;   /* borders + decoration ONLY — fails as light text */
  --granite-lt: #E2E5E3;
  --sand:       #C9A063;   /* CTA — pair with --ink (7.3:1), never white (2.4) */
  --sand-dk:    #B78D50;
  --sand-lt:    #EADFC8;
  --paper:      #F7F5F0;
  --white:      #FFFFFF;
  --muted:      #59614F;   /* secondary text                   5.9:1 on paper */

  --bg:          var(--paper);
  --surface:     var(--white);
  --text:        var(--ink);
  --text-muted:  var(--muted);
  --border:      #DEDBD2;

  /* --- type ------------------------------------------------------------ */
  --font-head: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* fluid scale */
  --fs-xs:   0.8125rem;
  --fs-sm:   0.9375rem;
  --fs-base: 1rem;
  --fs-lg:   1.125rem;
  --fs-xl:   clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --fs-2xl:  clamp(1.5rem,  1.3rem + 1.1vw, 2.125rem);
  --fs-3xl:  clamp(2rem,    1.6rem + 2vw,   3rem);
  --fs-4xl:  clamp(2.35rem, 1.8rem + 3.1vw, 4.25rem);

  /* --- space (dense) --------------------------------------------------- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 80px;  --s-10: 104px;

  --r-sm: 4px; --r-md: 8px; --r-lg: 14px; --r-xl: 22px;

  --shadow-sm: 0 1px 2px rgba(22,26,20,.06), 0 1px 3px rgba(22,26,20,.05);
  --shadow-md: 0 4px 12px rgba(22,26,20,.08), 0 2px 4px rgba(22,26,20,.05);
  --shadow-lg: 0 18px 40px rgba(22,26,20,.13), 0 4px 12px rgba(22,26,20,.07);
  --shadow-xl: 0 32px 68px rgba(22,26,20,.19), 0 8px 20px rgba(22,26,20,.09);

  --dur-fast: 160ms;
  --dur:      240ms;
  --dur-slow: 380ms;
  --ease:     cubic-bezier(.22,.61,.36,1);

  --container: 1280px;
  --header-h: 76px;

  --z-nav: 100; --z-drawer: 200; --z-lightbox: 400; --z-callbar: 150;
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.022em;
  margin: 0 0 var(--s-4);
  text-wrap: balance;
}
h1 { font-size: var(--fs-4xl); }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-xl); letter-spacing: -0.012em; }
p  { margin: 0 0 var(--s-4); max-width: 68ch; }

a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }
button { font: inherit; cursor: pointer; }

:focus-visible {
  outline: 3px solid var(--sand);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--s-5);
}
@media (min-width: 768px) { .container { padding-inline: var(--s-6); } }

.section { padding-block: var(--s-9); }
@media (max-width: 767px) { .section { padding-block: var(--s-7); } }

.skip-link {
  position: absolute; left: var(--s-4); top: -100px;
  background: var(--ink); color: var(--white);
  padding: var(--s-3) var(--s-5); border-radius: var(--r-md);
  z-index: 999; transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--s-4); }

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

/* section heading block */
.sec-head { max-width: 760px; margin-bottom: var(--s-7); }
.sec-head.center { margin-inline: auto; text-align: center; }
.sec-head p { color: var(--text-muted); font-size: var(--fs-lg); margin-bottom: 0; }
.sec-head.center p { margin-inline: auto; }

.rule {
  display: flex; align-items: center; gap: var(--s-3);
  font-family: var(--font-head); font-weight: 600;
  font-size: var(--fs-sm); letter-spacing: .04em; text-transform: uppercase;
  color: var(--moss); margin-bottom: var(--s-3);
}
.sec-head.center .rule { justify-content: center; }
.rule::before {
  content: ''; width: 26px; height: 2px; background: var(--sand); flex: none;
}

/* ==========================================================================
   buttons
   ========================================================================== */
.btn {
  --btn-bg: var(--sand);
  --btn-fg: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-2);
  min-height: 52px;
  padding: var(--s-3) var(--s-6);
  background: var(--btn-bg); color: var(--btn-fg);
  font-family: var(--font-head); font-weight: 600; font-size: var(--fs-base);
  border: 2px solid var(--btn-bg); border-radius: var(--r-md);
  text-decoration: none; text-align: center;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease);
  will-change: transform;
}
.btn:hover { background: var(--sand-dk); border-color: var(--sand-dk); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(1px) scale(.99); }

.btn--dark  { --btn-bg: var(--slate); --btn-fg: var(--white); }
.btn--dark:hover { background: var(--ink); border-color: var(--ink); }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--white); border-color: rgba(255,255,255,.5); }
.btn--ghost:hover { background: rgba(255,255,255,.12); border-color: var(--white); box-shadow: none; }

.btn--outline { --btn-bg: transparent; --btn-fg: var(--ink); border-color: var(--ink); }
.btn--outline:hover { background: var(--ink); color: var(--white); }

.btn--block { width: 100%; }
.btn svg { width: 19px; height: 19px; flex: none; }

/* ==========================================================================
   header
   ========================================================================== */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-nav);
  height: var(--header-h);
  display: flex; align-items: center;
  background: rgba(247,245,240,0);
  isolation: isolate;
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
  border-bottom: 1px solid transparent;
}
/* Contrast for the nav must not depend on what the hero photograph happens to be
   doing behind it, so the header carries its own scrim while it is transparent. */
.header::before {
  content: ''; position: absolute; inset: 0 0 -22px 0; z-index: -1;
  background: linear-gradient(to bottom, rgba(18,22,17,.66) 0%, rgba(18,22,17,.42) 62%, rgba(18,22,17,0) 100%);
  opacity: 1; transition: opacity var(--dur) var(--ease);
  pointer-events: none;
}
.header.is-stuck::before { opacity: 0; }

.header.is-stuck {
  background: rgba(247,245,240,.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--border);
  box-shadow: var(--shadow-sm);
}
.header__inner {
  display: flex; align-items: center; gap: var(--s-5);
  width: 100%; max-width: var(--container); margin-inline: auto;
  padding-inline: var(--s-5);
}
@media (min-width: 768px) { .header__inner { padding-inline: var(--s-6); } }

.brand { display: flex; align-items: center; gap: var(--s-3); text-decoration: none; margin-right: auto; }
/* the mark is outlined vector art; the tile and the artwork recolour separately */
.brand__mark {
  width: 42px; height: 42px; flex: none; display: block;
  color: var(--sand);                      /* artwork colour */
}
.brand__tile {
  fill: var(--moss);
  transition: fill var(--dur) var(--ease);
}
.header.is-stuck .brand__tile { fill: var(--slate); }
.footer .brand__tile { fill: var(--slate); }
.brand__name {
  font-family: var(--font-head); font-weight: 700; font-size: 1.0625rem;
  line-height: 1.15; letter-spacing: -.02em; color: var(--white);
  white-space: nowrap;
  transition: color var(--dur) var(--ease);
}
.brand__name span { display: block; font-size: .6875rem; font-weight: 500;
  letter-spacing: .09em; text-transform: uppercase; color: rgba(255,255,255,.72); }
.header.is-stuck .brand__name { color: var(--ink); }
.header.is-stuck .brand__name span { color: var(--muted); }
@media (max-width: 420px) { .brand__name { font-size: .95rem; } }

.nav { display: none; align-items: center; gap: var(--s-5); }
/* brand 235 + nav 540 + phone 121 + cta 168 + gaps 72 + padding 64 = 1200px, so the
   full header needs ~1240 to sit comfortably on one line. Below that: burger. */
@media (min-width: 1240px) { .nav { display: flex; } }
.nav a {
  text-decoration: none; font-size: var(--fs-sm); font-weight: 500;
  white-space: nowrap;
  color: rgba(255,255,255,.9); padding: var(--s-2) 0; position: relative;
  transition: color var(--dur) var(--ease);
}
.header.is-stuck .nav a { color: var(--ink); }
.nav a::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: var(--sand); transform: scaleX(0); transform-origin: right;
  transition: transform var(--dur) var(--ease);
}
.nav a:hover::after, .nav a[aria-current="true"]::after { transform: scaleX(1); transform-origin: left; }

/* phone — visible at every breakpoint (anti-pattern: hidden contact info) */
.header__phone {
  display: flex; align-items: center; gap: var(--s-2);
  text-decoration: none; font-family: var(--font-head); font-weight: 700;
  font-size: var(--fs-base); color: var(--white); white-space: nowrap;
  transition: color var(--dur) var(--ease);
}
.header.is-stuck .header__phone { color: var(--ink); }
.header__phone svg { width: 18px; height: 18px; color: var(--sand); flex: none; }
.header__phone span { display: none; }
@media (min-width: 560px) { .header__phone span { display: inline; } }

.header .btn { display: none; min-height: 46px; padding-inline: var(--s-5); white-space: nowrap; }
@media (min-width: 1240px) { .header .btn { display: inline-flex; } }

.burger {
  display: grid; place-items: center; width: 46px; height: 46px;
  background: transparent; border: 1px solid rgba(255,255,255,.4);
  border-radius: var(--r-md); color: var(--white);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease),
              background var(--dur) var(--ease);
}
.header.is-stuck .burger { border-color: var(--border); color: var(--ink); }
.burger:hover { background: rgba(255,255,255,.12); }
.header.is-stuck .burger:hover { background: var(--granite-lt); }
.burger svg { width: 22px; height: 22px; }
@media (min-width: 1240px) { .burger { display: none; } }

/* mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: var(--z-drawer);
  visibility: hidden; pointer-events: none;
}
.drawer.is-open { visibility: visible; pointer-events: auto; }
.drawer__scrim {
  position: absolute; inset: 0; background: rgba(22,26,20,.55);
  opacity: 0; transition: opacity var(--dur) var(--ease);
  backdrop-filter: blur(2px);
}
.drawer.is-open .drawer__scrim { opacity: 1; }
.drawer__panel {
  position: absolute; inset: 0 0 0 auto; width: min(360px, 88vw);
  background: var(--slate); color: var(--white);
  padding: var(--s-5) var(--s-5) var(--s-8);
  display: flex; flex-direction: column; gap: var(--s-4);
  transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease);
  overflow-y: auto;
  padding-bottom: calc(var(--s-8) + env(safe-area-inset-bottom));
}
.drawer.is-open .drawer__panel { transform: translateX(0); }
.drawer__top { display: flex; justify-content: flex-end; }
.drawer__close {
  width: 46px; height: 46px; display: grid; place-items: center;
  background: transparent; border: 1px solid rgba(255,255,255,.3);
  border-radius: var(--r-md); color: var(--white);
}
.drawer__close svg { width: 22px; height: 22px; }
.drawer nav { display: flex; flex-direction: column; }
.drawer nav a {
  padding: var(--s-4) 0; text-decoration: none;
  font-family: var(--font-head); font-weight: 600; font-size: 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,.13);
  min-height: 44px; display: flex; align-items: center;
}
.drawer__contact { margin-top: auto; display: grid; gap: var(--s-3); }
.drawer__contact a {
  display: flex; align-items: center; gap: var(--s-3);
  text-decoration: none; color: rgba(255,255,255,.9); font-size: var(--fs-sm);
  min-height: 44px;
}
.drawer__contact svg { width: 18px; height: 18px; color: var(--sand); flex: none; }

/* ==========================================================================
   hero
   ========================================================================== */
.hero {
  position: relative;
  min-height: min(100dvh, 940px);
  display: flex; align-items: center;
  padding-top: calc(var(--header-h) + var(--s-5));
  padding-bottom: var(--s-7);
  overflow: hidden;
  background: var(--slate);
}
.hero__media { position: absolute; inset: 0; overflow: hidden; }
/* Brand wash: the photograph is desaturated and then washed in the logo palette,
   so the hero belongs to the brand rather than to whatever the photo happens to
   be. The filter sits on the img, not the wrapper, so it does not touch the
   overlay below or interfere with the Ken Burns transform. */
.hero__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 62%;
  filter: saturate(.55) contrast(1.06);
  will-change: transform;
}
.hero__media::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(120deg,
      rgba(42,52,39,.95) 0%,
      rgba(42,52,39,.88) 40%,
      rgba(42,52,39,.72) 62%,
      rgba(42,52,39,.40) 82%,
      rgba(201,160,99,.26) 100%);
}
/* On a tall narrow screen a 120deg diagonal drops the copy onto the light corner,
   so the wash runs top to bottom instead. */
@media (max-width: 900px) {
  .hero__media::after {
    /* keep the base dark so it meets the trust strip cleanly; the sand tint is
       layered diagonally on top rather than owning the bottom edge */
    background:
      linear-gradient(120deg, transparent 42%, rgba(201,160,99,.20) 100%),
      linear-gradient(to bottom,
        rgba(42,52,39,.74) 0%,
        rgba(42,52,39,.86) 46%,
        rgba(42,52,39,.95) 100%);
  }
}

.hero__grid {
  position: relative; z-index: 2;
  display: grid; gap: var(--s-7); align-items: center;
  grid-template-columns: 1fr;
}

/* px, not ch: the ch unit is sized on body text, so a ch-based measure gives the
   display headline only a handful of words per line */
.hero__copy { color: var(--white); max-width: 640px; }
@media (min-width: 900px)  { .hero__copy { max-width: 700px; } }
@media (min-width: 1200px) { .hero__copy { max-width: 780px; } }
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.24);
  border-radius: 999px; font-size: var(--fs-sm); font-weight: 500;
  margin-bottom: var(--s-5); backdrop-filter: blur(6px);
}
.hero__eyebrow svg { width: 16px; height: 16px; color: var(--sand); }
.hero h1 { color: var(--white); margin-bottom: var(--s-5); }
.hero h1 em { font-style: normal; color: var(--sand-lt); }
.hero__lead {
  font-size: var(--fs-lg); color: rgba(255,255,255,.88);
  margin-bottom: var(--s-6); max-width: 54ch;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-bottom: var(--s-6); }

.hero__points {
  display: grid; gap: var(--s-3) var(--s-6); padding: 0; margin: 0; list-style: none;
}
@media (min-width: 520px) { .hero__points { grid-template-columns: repeat(2, max-content); } }
.hero__points li {
  display: flex; align-items: flex-start; gap: var(--s-2);
  font-size: var(--fs-sm); color: rgba(255,255,255,.92);
}
.hero__points svg { width: 18px; height: 18px; color: var(--sand); flex: none; margin-top: 3px; }

/* ==========================================================================
   trust strip
   ========================================================================== */
.trust { background: var(--slate); color: var(--white); padding-block: var(--s-6); }
.trust__grid {
  display: grid; gap: var(--s-5);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 720px)  { .trust__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .trust__grid { grid-template-columns: repeat(5, 1fr); } }
.trust__item { display: flex; align-items: flex-start; gap: var(--s-3); }
.trust__item svg { width: 26px; height: 26px; color: var(--sand); flex: none; }
.trust__item strong {
  display: block; font-family: var(--font-head); font-size: var(--fs-sm);
  font-weight: 700; line-height: 1.25; margin-bottom: 2px;
}
.trust__item span { font-size: var(--fs-xs); color: rgba(255,255,255,.72); line-height: 1.45; }

/* ==========================================================================
   services
   ========================================================================== */
.services__grid {
  display: grid; gap: var(--s-5);
  grid-template-columns: 1fr;
}
@media (min-width: 620px)  { .services__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .services__grid { grid-template-columns: repeat(3, 1fr); } }

.svc {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
  will-change: transform;
}
.svc:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--granite); }
.svc__img { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--granite-lt); }
.svc__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.svc:hover .svc__img img { transform: scale(1.06); }
.svc__body { padding: var(--s-5); display: flex; flex-direction: column; flex: 1; }
.svc__icon {
  width: 40px; height: 40px; border-radius: var(--r-md);
  background: var(--sand-lt); color: var(--moss-dk);
  display: grid; place-items: center; margin-bottom: var(--s-3);
}
.svc__icon svg { width: 21px; height: 21px; }
.svc h3 { margin-bottom: var(--s-2); }
.svc p { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: var(--s-4); }
.svc ul { list-style: none; padding: 0; margin: 0 0 var(--s-4); display: grid; gap: 6px; }
.svc ul li {
  position: relative; padding-left: 20px; font-size: var(--fs-sm); color: var(--text-muted);
}
.svc ul li::before {
  content: ''; position: absolute; left: 0; top: 9px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--sand);
}
.svc__link {
  margin-top: auto; display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-head); font-weight: 600; font-size: var(--fs-sm);
  color: var(--moss); text-decoration: none; min-height: 44px;
}
.svc__link svg { width: 16px; height: 16px; transition: transform var(--dur) var(--ease); }
.svc:hover .svc__link svg { transform: translateX(4px); }

/* ==========================================================================
   before / after
   ========================================================================== */
.ba { background: var(--slate); color: var(--white); }
.ba .sec-head p { color: rgba(255,255,255,.78); }
.ba .rule { color: var(--sand-lt); }

.ba__wrap {
  display: grid; gap: var(--s-7); align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 960px) { .ba__wrap { grid-template-columns: minmax(0,1fr) 360px; gap: var(--s-8); } }

.compare {
  position: relative; overflow: hidden;
  border-radius: var(--r-lg); box-shadow: var(--shadow-xl);
  aspect-ratio: 3/4; max-height: 720px;
  margin-inline: auto; width: 100%;
  touch-action: pan-y; cursor: ew-resize;
  user-select: none; -webkit-user-select: none;
  background: var(--ink);
}
@media (min-width: 620px) { .compare { aspect-ratio: 4/3; } }
.compare img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: center 40%;
  pointer-events: none;
}
.compare__after { clip-path: inset(0 0 0 var(--pos, 50%)); }
.compare__handle {
  position: absolute; top: 0; bottom: 0; left: var(--pos, 50%);
  width: 3px; background: var(--white); transform: translateX(-50%);
  box-shadow: 0 0 14px rgba(0,0,0,.45); pointer-events: none;
}
.compare__grip {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--white); color: var(--ink);
  display: grid; place-items: center; grid-auto-flow: column; gap: 1px;
  box-shadow: var(--shadow-lg);
}
.compare__grip svg { width: 17px; height: 17px; }
.compare__tag {
  position: absolute; top: var(--s-4);
  padding: 6px var(--s-3); border-radius: 999px;
  font-family: var(--font-head); font-weight: 700;
  font-size: var(--fs-xs); letter-spacing: .06em; text-transform: uppercase;
  backdrop-filter: blur(6px); pointer-events: none;
}
.compare__tag--before { left: var(--s-4); background: rgba(22,26,20,.72); color: var(--white); }
.compare__tag--after  { right: var(--s-4); background: var(--sand); color: var(--ink); }

/* keyboard-accessible range on top of the visual */
.compare__range {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: ew-resize;
}
.compare__range:focus-visible + .compare__handle {
  box-shadow: 0 0 0 3px var(--sand), 0 0 14px rgba(0,0,0,.45);
}

.ba__notes { display: grid; gap: var(--s-5); }
.ba__note {
  padding-left: var(--s-5); border-left: 2px solid var(--sand);
}
.ba__note strong {
  display: block; font-family: var(--font-head); font-size: var(--fs-lg);
  margin-bottom: 4px;
}
.ba__note p { font-size: var(--fs-sm); color: rgba(255,255,255,.78); margin: 0; }

/* three-stage story */
.stages {
  display: grid; gap: var(--s-5); margin-top: var(--s-8);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .stages { grid-template-columns: repeat(3, 1fr); } }
.stage {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-lg); overflow: hidden;
}
.stage__img { aspect-ratio: 3/4; overflow: hidden; background: var(--ink); }
.stage__img img { width: 100%; height: 100%; object-fit: cover; }
.stage__body { padding: var(--s-4) var(--s-5) var(--s-5); }
.stage__step {
  display: inline-block; font-family: var(--font-head); font-weight: 700;
  font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase;
  color: var(--sand); margin-bottom: var(--s-2);
}
.stage h3 { font-size: var(--fs-lg); margin-bottom: var(--s-2); }
.stage p { font-size: var(--fs-sm); color: rgba(255,255,255,.76); margin: 0; }

/* ==========================================================================
   gallery
   ========================================================================== */
.gallery__grid {
  display: grid; gap: var(--s-3);
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  grid-auto-flow: dense;          /* let small tiles backfill around wide ones */
}
@media (min-width: 620px) {
  .gallery__grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--s-4); }
}
@media (min-width: 1024px) {
  .gallery__grid { grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); }
}

.tile {
  position: relative; display: block; padding: 0; border: 0;
  background: var(--granite-lt); border-radius: var(--r-md);
  overflow: hidden; aspect-ratio: 4/3; cursor: zoom-in;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  will-change: transform;
}
.tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); z-index: 2; }
.tile img { width: 100%; height: 100%; object-fit: cover; }
.tile__cap {
  position: absolute; inset: auto 0 0 0;
  padding: var(--s-5) var(--s-3) var(--s-3);
  background: linear-gradient(to top, rgba(22,26,20,.88), transparent);
  color: var(--white); font-size: var(--fs-xs); font-weight: 500;
  text-align: left; line-height: 1.35;
  opacity: 0; transform: translateY(6px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.tile:hover .tile__cap, .tile:focus-visible .tile__cap { opacity: 1; transform: translateY(0); }
.tile--wide { grid-column: span 2; aspect-ratio: 8/3; }
@media (max-width: 619px) { .tile--wide { grid-column: span 2; aspect-ratio: 16/9; } }

.gallery__note {
  margin-top: var(--s-5); font-size: var(--fs-sm); color: var(--text-muted);
  display: flex; align-items: center; gap: var(--s-2);
}
.gallery__note svg { width: 16px; height: 16px; color: var(--moss); flex: none; }

/* lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: var(--z-lightbox);
  background: rgba(14,17,13,.94);
  display: grid; place-items: center; padding: var(--s-5);
  opacity: 0; visibility: hidden;
  /* visibility must flip instantly on open, or the close button cannot take
     focus in the same tick; on close it is delayed until the fade finishes */
  transition: opacity var(--dur) var(--ease), visibility 0s linear var(--dur);
}
.lightbox.is-open {
  opacity: 1; visibility: visible;
  transition: opacity var(--dur) var(--ease), visibility 0s linear 0s;
}
.lightbox__fig { margin: 0; max-width: min(1100px, 94vw); text-align: center; }
.lightbox__fig img {
  max-width: 100%; max-height: 76vh; width: auto; margin-inline: auto;
  border-radius: var(--r-md); box-shadow: var(--shadow-xl);
  transform: scale(.96); transition: transform var(--dur-slow) var(--ease);
  image-rendering: auto;
}
.lightbox.is-open .lightbox__fig img { transform: scale(1); }
.lightbox__fig figcaption {
  color: rgba(255,255,255,.88); font-size: var(--fs-sm); margin-top: var(--s-4);
}
.lightbox__close, .lightbox__nav {
  position: absolute; display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28);
  color: var(--white); backdrop-filter: blur(6px);
  transition: background var(--dur) var(--ease);
}
.lightbox__close:hover, .lightbox__nav:hover { background: rgba(255,255,255,.24); }
.lightbox__close { top: var(--s-5); right: var(--s-5); }
.lightbox__nav--prev { left: var(--s-4); top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: var(--s-4); top: 50%; transform: translateY(-50%); }
.lightbox__close svg, .lightbox__nav svg { width: 22px; height: 22px; }
.lightbox__count {
  position: absolute; bottom: var(--s-5); left: 50%; transform: translateX(-50%);
  color: rgba(255,255,255,.7); font-size: var(--fs-sm); font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   process
   ========================================================================== */
.process { background: var(--white); }
.process__grid {
  display: grid; gap: var(--s-5); counter-reset: step;
  grid-template-columns: 1fr;
}
@media (min-width: 620px)  { .process__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .process__grid { grid-template-columns: repeat(4, 1fr); } }
.step { position: relative; padding-top: var(--s-7); }
.step::before {
  counter-increment: step; content: counter(step);
  position: absolute; top: 0; left: 0; z-index: 1;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--slate); color: var(--sand);
  display: grid; place-items: center;
  font-family: var(--font-head); font-weight: 700; font-size: .95rem;
}
/* thread the steps together on wide screens */
.step::after {
  content: ''; position: absolute; top: 19px; left: 46px; right: -18px;
  height: 1px; background: var(--border);
}
.step:last-child::after { content: none; }
@media (max-width: 999px) { .step::after { content: none; } }
.step__inner { position: relative; padding-top: 0; }
.step h3 { font-size: var(--fs-lg); margin-bottom: var(--s-2); }
.step p { font-size: var(--fs-sm); color: var(--text-muted); margin: 0; }

/* ==========================================================================
   commercial band
   ========================================================================== */
.commercial__wrap {
  display: grid; gap: var(--s-6); align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) { .commercial__wrap { grid-template-columns: 1.05fr .95fr; gap: var(--s-8); } }
.commercial__media {
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lg);
  aspect-ratio: 4/3;
}
.commercial__media img { width: 100%; height: 100%; object-fit: cover; }
.commercial__list { list-style: none; padding: 0; margin: 0 0 var(--s-6); display: grid; gap: var(--s-3); }
.commercial__list li { display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--fs-sm); }
.commercial__list svg { width: 19px; height: 19px; color: var(--moss); flex: none; margin-top: 3px; }

/* ==========================================================================
   faq
   ========================================================================== */
.faq__grid { display: grid; gap: var(--s-7); grid-template-columns: 1fr; }
@media (min-width: 960px) { .faq__grid { grid-template-columns: 360px 1fr; gap: var(--s-8); } }
.faq__list { display: grid; gap: var(--s-3); align-content: start; }
.acc {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); overflow: hidden;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.acc.is-open { border-color: var(--granite); box-shadow: var(--shadow-sm); }
.acc__btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); padding: var(--s-4) var(--s-5); min-height: 60px;
  background: transparent; border: 0; text-align: left;
  font-family: var(--font-head); font-weight: 600; font-size: var(--fs-base);
  color: var(--ink);
}
.acc__btn svg {
  width: 20px; height: 20px; flex: none; color: var(--moss);
  transition: transform var(--dur) var(--ease);
}
.acc.is-open .acc__btn svg { transform: rotate(45deg); }
.acc__panel { overflow: hidden; height: 0; }
.acc__panel > div { padding: 0 var(--s-5) var(--s-5); }
.acc__panel p { font-size: var(--fs-sm); color: var(--text-muted); margin: 0; }

/* ==========================================================================
   contact
   ========================================================================== */
.contact { background: var(--slate); color: var(--white); }
.contact .sec-head p { color: rgba(255,255,255,.78); }
.contact .rule { color: var(--sand-lt); }
/* three big tappable ways to get in touch, since there is no form */
.contact__actions {
  display: grid; gap: var(--s-4); margin-bottom: var(--s-7);
  grid-template-columns: 1fr;
}
@media (min-width: 700px)  { .contact__actions { grid-template-columns: repeat(3, 1fr); } }

.ccard {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--s-5); min-height: 150px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r-lg);
  color: var(--white); text-decoration: none;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
  will-change: transform;
}
.ccard:hover {
  background: rgba(255,255,255,.1); border-color: var(--sand);
  transform: translateY(-3px);
}
.ccard svg { width: 26px; height: 26px; color: var(--sand); margin-bottom: var(--s-3); }
.ccard__label {
  font-family: var(--font-head); font-weight: 600; font-size: var(--fs-xs);
  letter-spacing: .07em; text-transform: uppercase; color: var(--sand);
}
.ccard__value {
  font-family: var(--font-head); font-weight: 700;
  font-size: 1.375rem; letter-spacing: -.02em; line-height: 1.15;
}
.ccard__value--sm { font-size: 1rem; word-break: break-word; }
.ccard__note { font-size: var(--fs-sm); color: rgba(255,255,255,.66); margin-top: 4px; }

/* the primary route gets the sand treatment */
.ccard--primary {
  background: var(--sand); border-color: var(--sand); color: var(--ink);
}
.ccard--primary:hover { background: var(--sand-dk); border-color: var(--sand-dk); }
.ccard--primary svg { color: var(--ink); }
.ccard--primary .ccard__label { color: rgba(22,26,20,.72); }
.ccard--primary .ccard__note { color: rgba(22,26,20,.72); }

.contact__where {
  display: grid; gap: var(--s-6); align-items: start;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) { .contact__where { grid-template-columns: 1fr 1fr; gap: var(--s-8); } }
.contact__where h3 { color: var(--white); margin-bottom: var(--s-4); }
.contact__addr {
  display: flex; align-items: flex-start; gap: var(--s-3);
  font-family: var(--font-head); font-weight: 700; font-size: var(--fs-lg);
  color: var(--white); margin-bottom: var(--s-3);
}
.contact__addr svg { width: 22px; height: 22px; color: var(--sand); flex: none; margin-top: 3px; }
.contact__area { color: rgba(255,255,255,.8); font-size: var(--fs-sm); }
.contact__facts { list-style: none; padding: 0; margin: var(--s-5) 0 0; display: grid; gap: var(--s-2); }
.contact__facts li {
  position: relative; padding-left: 20px;
  font-size: var(--fs-sm); color: rgba(255,255,255,.86);
}
.contact__facts li::before {
  content: ''; position: absolute; left: 0; top: 9px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--sand);
}

.map {
  border-radius: var(--r-md); overflow: hidden;
  border: 1px solid rgba(255,255,255,.14); aspect-ratio: 16/11;
  background: rgba(255,255,255,.05);
}
.map iframe { width: 100%; height: 100%; border: 0; display: block; filter: saturate(.85); }

/* ==========================================================================
   footer
   ========================================================================== */
.footer { background: var(--ink); color: rgba(255,255,255,.72); padding-block: var(--s-8) var(--s-6); }
.footer__grid {
  display: grid; gap: var(--s-6); grid-template-columns: 1fr;
  padding-bottom: var(--s-6); border-bottom: 1px solid rgba(255,255,255,.12);
}
@media (min-width: 720px)  { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 1024px) { .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.1fr; } }
.footer h4 {
  font-size: var(--fs-sm); letter-spacing: .07em; text-transform: uppercase;
  color: var(--white); margin-bottom: var(--s-4);
}
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-2); }
.footer a { color: rgba(255,255,255,.72); text-decoration: none; font-size: var(--fs-sm); }
.footer a:hover { color: var(--sand); }
.footer__brand p { font-size: var(--fs-sm); max-width: 40ch; margin-bottom: var(--s-4); }
.footer__brand .brand__name { color: var(--white); }
.footer__brand .brand { margin-bottom: var(--s-4); }
.footer__bottom {
  padding-top: var(--s-5); display: flex; flex-wrap: wrap; gap: var(--s-3);
  justify-content: space-between; font-size: var(--fs-xs);
}
.footer__bottom p { margin: 0; }

/* ==========================================================================
   sticky mobile call bar
   ========================================================================== */
.callbar {
  position: fixed; inset: auto 0 0 0; z-index: var(--z-callbar);
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--border);
  padding-bottom: env(safe-area-inset-bottom);
  transform: translateY(110%);
  transition: transform var(--dur-slow) var(--ease);
  box-shadow: 0 -6px 20px rgba(22,26,20,.16);
}
.callbar.is-shown { transform: translateY(0); }
@media (min-width: 1240px) { .callbar { display: none; } }
.callbar a {
  display: flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 60px; padding: var(--s-3);
  font-family: var(--font-head); font-weight: 700; font-size: var(--fs-sm);
  text-decoration: none;
}
.callbar__call  { background: var(--sand); color: var(--ink); }
.callbar__quote { background: var(--slate); color: var(--white); }
.callbar svg { width: 19px; height: 19px; flex: none; }
body { padding-bottom: 0; }
@media (max-width: 1239px) { body.has-callbar { padding-bottom: 60px; } }

/* ==========================================================================
   scroll-reveal — final state is the default so no-JS and reduced-motion
   users always see fully rendered content
   ========================================================================== */
[data-reveal] { opacity: 1; }

/* Reveals are CSS transitions, not JS-driven tweens: if scripting fails, the
   rAF loop is throttled, or the CDN is slow, the content is still readable.
   JS only adds .is-in — it never has to animate opacity back to 1 itself. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: transform, opacity;
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero__media img { transform: none !important; }
}

/* ==========================================================================
   transformation story — major three-stage band
   ========================================================================== */
.stages--major { margin-top: 0; }
.stage__img--wide { aspect-ratio: 4/3; }

.ba__wrap--pair { margin-top: var(--s-8); align-items: center; }
@media (min-width: 960px) { .ba__wrap--pair { grid-template-columns: minmax(0,1fr) 440px; } }

.pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.pair__item { margin: 0; }
.pair__item picture { display: block; }
.pair__item img {
  width: 100%; aspect-ratio: 3/4; object-fit: cover;
  border-radius: var(--r-md); box-shadow: var(--shadow-lg);
}
.pair__item figcaption {
  margin-top: var(--s-2); text-align: center;
  font-family: var(--font-head); font-weight: 700;
  font-size: var(--fs-xs); letter-spacing: .07em; text-transform: uppercase;
  color: var(--sand);
}

/* light-background variant of the note list (used on the steps section) */
.ba__notes--light .ba__note p { color: var(--text-muted); }
.ba__notes--light .ba__note strong { color: var(--ink); }

/* ==========================================================================
   after-dark band
   ========================================================================== */
.dark-band {
  position: relative; overflow: hidden;
  background: var(--ink); color: var(--white);
  padding-block: var(--s-10);
  isolation: isolate;
}
.dark-band__media { position: absolute; inset: 0; z-index: -1; }
.dark-band__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 55%;
  will-change: transform;
}
.dark-band__media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(10,13,10,.95) 0%, rgba(10,13,10,.82) 46%, rgba(10,13,10,.45) 100%);
}
@media (max-width: 767px) {
  .dark-band__media::after {
    background: linear-gradient(to bottom, rgba(10,13,10,.7), rgba(10,13,10,.93));
  }
}
.dark-band__inner { position: relative; }
.dark-band__inner > div { max-width: 620px; }
.dark-band .rule { color: var(--sand-lt); }
.dark-band h2 { color: var(--white); }
.dark-band p { color: rgba(255,255,255,.85); margin-bottom: var(--s-6); }

/* faq section sits on white */
.faq { background: var(--white); }

/* ==========================================================================
   small-screen tuning (most of these customers arrive on a phone)
   ========================================================================== */
@media (max-width: 560px) {
  :root { --header-h: 66px; }

  /* keep the brand on one line and leave room for phone + burger */
  .brand { gap: var(--s-2); min-width: 0; }
  .brand__mark { width: 34px; height: 34px; }
  .brand__name { font-size: .9rem; line-height: 1.1; }
  .brand__name span { font-size: .6rem; letter-spacing: .07em; }
  .header__inner { gap: var(--s-3); }

  /* hero: get to the point faster */
  .hero { min-height: 0; padding-bottom: var(--s-6); }
  .hero h1 { font-size: clamp(2rem, 1.4rem + 3.6vw, 2.6rem); }
  .hero__eyebrow {
    font-size: var(--fs-xs); padding: 6px var(--s-3); margin-bottom: var(--s-4);
  }
  .hero__lead { font-size: var(--fs-base); line-height: 1.55; margin-bottom: var(--s-5); }
  .hero__actions { gap: var(--s-2); margin-bottom: var(--s-5); }
  .hero__actions .btn { width: 100%; }

  /* these four repeat verbatim in the trust strip directly below */
  .hero__points { display: none; }


  .sec-head { margin-bottom: var(--s-6); }
  .trust__grid { grid-template-columns: 1fr; gap: var(--s-4); }
  .compare { aspect-ratio: 3/4; }
  .lightbox__nav { width: 44px; height: 44px; }
  .lightbox__nav--prev { left: var(--s-2); }
  .lightbox__nav--next { right: var(--s-2); }
}

@media (max-width: 380px) {
  .brand__name span { display: none; }
  .header__phone span { display: none; }
}

/* ==========================================================================
   touch target sizing
   Primary actions get the full 44px (Apple HIG / WCAG 2.5.5); secondary
   navigation links clear the 24px WCAG 2.5.8 AA minimum with room to spare.
   ========================================================================== */
.header__phone {
  min-height: 44px; min-width: 44px;
  padding-inline: var(--s-2);
  justify-content: center;
}
.brand { min-height: 44px; }

.footer ul a,
.footer__bottom a {
  display: inline-block;
  padding-block: 7px;            /* 18px text + 14px -> 32px target */
  min-height: 32px;
}
.footer ul { gap: 0; }

.svc__link, .drawer__contact a { min-height: 44px; }

@media (max-width: 560px) {
  .footer ul a { padding-block: 10px; min-height: 38px; }
}