/* =====================================================================
   Rock Air Conditioning — concept design (Ravari AI)
   "BEDROCK": geological solidity + Texas warmth + family trust.
   Single source of brand truth: the :root block below.
   Zero dependencies. Zero external requests. System fonts only.
   ===================================================================== */

:root {
  /* --- stone foundation (the brand dark family) ---------------------- */
  --stone-990: #0C0E14;   /* deepest — footer bedrock                   */
  --stone-950: #171A20;   /* near-black — hero / dark sections           */
  --stone-900: #1F2430;   /* dark section base                           */
  --stone-850: #252B38;   /* elevated dark surfaces                      */
  --stone-800: #2C3344;   /* card on dark                                */
  --stone-700: #3A4358;
  --stone-600: #4D576E;
  --stone-500: #606A82;

  /* --- limestone (the warm light family) ----------------------------- */
  --lime-050: #FAF8F4;    /* lightest — page background                  */
  --lime-100: #F2EDE4;    /* card background                             */
  --lime-200: #E6DFD2;    /* border / divider on light                   */
  --lime-300: #D6CDB9;    /* deeper divider                              */
  --lime-400: #C0B49A;

  /* --- copper accent (warmth, craftsmanship, heat) ------------------- */
  --copper-800: #7A4A1E;
  --copper-700: #8B5A2B;
  --copper-600: #A66B33;
  --copper-500: #C47D3D;  /* primary warm accent — CTAs, highlights      */
  --copper-400: #D99A55;
  --copper-300: #E8B97A;
  --copper-200: #F0D4A8;
  --copper-100: #F8E8D0;

  /* --- steel blue accent (cool, trust, Carrier-adjacent) ------------- */
  --steel-700: #2C5A8A;
  --steel-600: #3A6EA0;
  --steel-500: #4A82B8;   /* primary cool accent                         */
  --steel-400: #6A9DD0;
  --steel-300: #8AB8E2;
  --steel-200: #B4D4F0;
  --steel-100: #DAE9F6;

  /* --- ink (text on light) ------------------------------------------- */
  --ink:       #1A1510;
  --ink-soft:  #4A4035;
  --ink-meta:  #7A7060;
  --ink-faint: #9A9080;

  /* --- on dark ------------------------------------------------------- */
  --on-dark:       #FFFFFF;
  --on-dark-soft:  rgba(255,255,255,.84);
  --on-dark-faint: rgba(255,255,255,.50);
  --hairline-dark: rgba(255,255,255,.12);
  --hairline-copper: rgba(196,125,61,.35);

  /* --- type ---------------------------------------------------------- */
  --font-sans: "Segoe UI Variable Text", "Segoe UI", system-ui,
               -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI Semibold",
               "Segoe UI", system-ui, -apple-system, "Trebuchet MS",
               sans-serif;
  --font-serif: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino,
               "Times New Roman", serif;

  --fs-hero:  clamp(2.6rem, 6.2vw, 5.4rem);
  --fs-h2:    clamp(1.9rem, 3.8vw, 3.1rem);
  --fs-h3:    clamp(1.3rem, 2vw, 1.7rem);
  --fs-lede:  clamp(1.06rem, 1.5vw, 1.32rem);
  --fs-body:  clamp(1rem, 1.15vw, 1.06rem);
  --fs-sm:    .935rem;
  --fs-xs:    .8rem;
  --fs-micro: .735rem;

  --lh-tight: 1.06;
  --lh-body:  1.62;
  --ls-tight: -.026em;
  --ls-wide:  .14em;
  --ls-wider: .22em;

  /* --- space --------------------------------------------------------- */
  --s-1: .25rem;  --s-2: .5rem;   --s-3: .75rem;  --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 2.75rem; --s-8: 3.5rem;
  --s-9: 5rem;    --s-10: 7rem;
  --section-y: clamp(4.5rem, 9vw, 8.5rem);
  --wrap: 1200px;
  --gutter: clamp(1.15rem, 4vw, 2.75rem);
  --col-gap: clamp(1rem, 2.4vw, 2.5rem);

  /* --- shape --------------------------------------------------------- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* --- depth --------------------------------------------------------- */
  --sh-sm:     0 2px 8px rgba(26,21,16,.06);
  --sh-md:     0 16px 38px -18px rgba(26,21,16,.18);
  --sh-lg:     0 44px 90px -40px rgba(26,21,16,.30);
  --sh-copper: 0 12px 30px -12px rgba(196,125,61,.45);

  /* --- motion -------------------------------------------------------- */
  --ease: cubic-bezier(.22,.68,.24,1);
  --t-fast: .18s;
  --t-mid: .34s;
  --t-slow: .85s;

  /* --- atmosphere: mineral speckle for dark sections ---
     Subtle specks suggesting mineral deposits in stone.
     Pure radial-gradient dots — no images.                */
  --mineral:
    radial-gradient(1.6px 1.6px at  6% 14%, rgba(196,125,61,.18), transparent 65%),
    radial-gradient(1.2px 1.2px at 17% 28%, rgba(255,255,255,.10), transparent 65%),
    radial-gradient(1.4px 1.4px at 28%  9%, rgba(196,125,61,.14), transparent 65%),
    radial-gradient(1.1px 1.1px at 39% 22%, rgba(255,255,255,.08), transparent 65%),
    radial-gradient(1.7px 1.7px at 51% 11%, rgba(196,125,61,.16), transparent 65%),
    radial-gradient(1.3px 1.3px at 62% 33%, rgba(255,255,255,.07), transparent 65%),
    radial-gradient(1.5px 1.5px at 74% 17%, rgba(196,125,61,.12), transparent 65%),
    radial-gradient(1.2px 1.2px at 83% 26%, rgba(255,255,255,.09), transparent 65%),
    radial-gradient(1.8px 1.8px at 91%  8%, rgba(196,125,61,.15), transparent 65%),
    radial-gradient(1.1px 1.1px at 95% 21%, rgba(255,255,255,.06), transparent 65%);
  --mineral-2:
    radial-gradient(1.5px 1.5px at  4% 31%, rgba(196,125,61,.12), transparent 65%),
    radial-gradient(1.3px 1.3px at 14% 65%, rgba(255,255,255,.07), transparent 65%),
    radial-gradient(1.7px 1.7px at 25% 18%, rgba(196,125,61,.14), transparent 65%),
    radial-gradient(1.1px 1.1px at 36% 72%, rgba(255,255,255,.06), transparent 65%),
    radial-gradient(1.4px 1.4px at 47% 35%, rgba(196,125,61,.10), transparent 65%),
    radial-gradient(1.2px 1.2px at 56% 60%, rgba(255,255,255,.08), transparent 65%),
    radial-gradient(1.6px 1.6px at 66% 24%, rgba(196,125,61,.13), transparent 65%),
    radial-gradient(1.1px 1.1px at 77% 55%, rgba(255,255,255,.05), transparent 65%),
    radial-gradient(1.5px 1.5px at 86% 38%, rgba(196,125,61,.11), transparent 65%);
}


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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--lime-050);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 700; margin: 0; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
figure { margin: 0; }
img, svg { max-width: 100%; }

svg.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--copper-500); color: #fff;
  padding: .8rem 1.2rem; border-radius: 0 0 var(--r-sm) 0; font-weight: 700;
}
.skip:focus { left: 0; }

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

.wrap {
  position: relative;
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}


/* ===================== wordmark ===================== */
.mark {
  display: inline-flex; align-items: center; gap: .62rem;
  min-height: 44px;
  text-decoration: none; line-height: 1;
}
.mark__glyph {
  display: grid; place-items: center;
  width: 40px; height: 40px; flex: 0 0 40px;
  border-radius: 11px;
  background: linear-gradient(150deg, var(--stone-800), var(--stone-950));
  color: var(--copper-400);
  box-shadow: 0 6px 16px -7px rgba(26,21,16,.5);
}
.mark__glyph svg { width: 24px; height: 24px; display: block; }
.mark:hover .mark__glyph,
.mark:focus-visible .mark__glyph {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -8px rgba(26,21,16,.6), 0 0 0 1px var(--hairline-copper);
  transition: box-shadow var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
}
.mark__text { display: flex; flex-direction: column; gap: 3px; }
.mark__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.38rem;
  letter-spacing: -.03em;
  color: var(--stone-900);
}
.mark__name--alt { color: var(--copper-500); }
.mark__sub {
  font-size: .56rem;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-meta);
}

/* footer wordmark overrides */
.mark__glyph--foot { background: linear-gradient(150deg, var(--stone-700), var(--stone-900)); }
.mark__name--foot { color: var(--on-dark-soft); }
.mark__name--foot .mark__name--alt { color: var(--copper-400); }
.mark__sub--foot { color: var(--on-dark-faint); }


/* ===================== header ===================== */
.hdr {
  position: sticky; top: 0; z-index: 60;
  background: rgba(250,248,244,.93);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--lime-200);
}
.hdr__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4);
  min-height: 72px;
}
.nav { display: flex; align-items: center; gap: clamp(.5rem, 2vw, 1.6rem); }
.nav__list { display: flex; align-items: center; gap: clamp(.15rem, 1.2vw, .9rem); }
.nav__list a {
  position: relative;
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 .7rem;
  text-decoration: none;
  font-weight: 600; font-size: var(--fs-sm);
  color: var(--ink-soft);
  transition: color var(--t-fast) var(--ease);
}
.nav__list a:hover { color: var(--copper-600); }
/* copper rule draws in from left on hover */
.nav__list a::after {
  content: "";
  position: absolute; left: .7rem; right: .7rem; bottom: 8px; height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--copper-500), var(--copper-300));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--t-mid) var(--ease);
}
.nav__list a:hover::after,
.nav__list a:focus-visible::after { transform: scaleX(1); }

.navtoggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  border: 1px solid var(--lime-200); border-radius: 11px;
  background: var(--lime-050); color: var(--stone-700); cursor: pointer;
}
.navtoggle svg { width: 22px; height: 22px; }
.navtoggle__x { display: none; }
.navtoggle[aria-expanded="true"] .navtoggle__o { display: none; }
.navtoggle[aria-expanded="true"] .navtoggle__x { display: block; }


/* ===================== reading progress bar ===================== */
.progress {
  position: fixed; top: 0; left: 0; z-index: 70;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--copper-600), var(--copper-300));
  transform-origin: left;
  transform: scaleX(0);
}
@supports (animation-timeline: scroll()) {
  .progress {
    animation: progressFill linear both;
    animation-timeline: scroll(root);
  }
}
@keyframes progressFill { to { transform: scaleX(1); } }


/* ===================== buttons ===================== */
.btn {
  --btn-bg: var(--stone-900);
  --btn-fg: var(--on-dark);
  display: inline-flex; align-items: center; justify-content: center;
  gap: .55rem;
  min-height: 52px;
  padding: .85rem 1.6rem;
  border-radius: var(--r-pill);
  background: var(--btn-bg); color: var(--btn-fg);
  font-family: var(--font-display);
  font-weight: 700; font-size: var(--fs-sm); line-height: 1.15;
  text-align: center; text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}
.btn svg { width: 18px; height: 18px; flex: 0 0 18px; }
.btn:hover, .btn:focus-visible { transform: translateY(-2px); }

.btn--copper {
  --btn-bg: var(--copper-500);
  --btn-fg: #fff;
}
.btn--copper:hover {
  --btn-bg: var(--copper-600);
  box-shadow: var(--sh-copper);
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--on-dark-soft);
  border-color: var(--hairline-dark);
}
.btn--ghost:hover {
  border-color: var(--copper-400);
  --btn-fg: var(--on-dark);
}

.btn--outline {
  --btn-bg: transparent;
  --btn-fg: var(--copper-600);
  border-color: var(--copper-300);
}
.btn--outline:hover {
  --btn-bg: var(--copper-100);
  border-color: var(--copper-500);
}

.btn--sm { min-height: 44px; padding: .6rem 1.1rem; font-size: var(--fs-xs); }
.btn--full { width: 100%; }


/* ===================== eyebrow / kicker ===================== */
.eyebrow {
  display: inline-flex; align-items: center; gap: .65rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--copper-300);
  margin-bottom: var(--s-5);
}
.dot {
  display: block; width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--copper-500);
  box-shadow: 0 0 8px var(--copper-500);
}

.kicker {
  display: inline-flex; align-items: center; gap: .65rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--copper-600);
  margin-bottom: var(--s-3);
}
.kicker--on-dark { color: var(--copper-300); }
.kicker__dot {
  display: block; width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--copper-500);
}
.kicker__dot--copper { box-shadow: 0 0 6px rgba(196,125,61,.6); }

.shead { text-align: center; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.shead__p {
  max-width: 580px; margin-inline: auto; margin-top: var(--s-4);
  font-size: var(--fs-lede); color: var(--ink-soft); line-height: 1.55;
}


/* ===================== HERO ===================== */
.hero {
  position: relative;
  padding: clamp(7rem, 16vw, 12rem) 0 clamp(5rem, 10vw, 8rem);
  background: linear-gradient(180deg, var(--stone-950) 0%, #12151A 40%, #0E1116 100%);
  color: var(--on-dark);
  overflow: hidden;
}

/* hero background — photographic lava texture (Unsplash, free license) */
.hero__bg {
  position: absolute;
  inset: -6%;
  background: url('rock-lava.jpg') center / cover no-repeat;
  z-index: 0;
}
/* color grade: cool blue/teal tint on dark rock, warm lava untouched
   lighten blend = only the brighter value per channel wins, so the
   dark rock gains color while bright orange lava stays pure */
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 25% 35%, rgba(30,55,105,.50), transparent 60%),
    radial-gradient(ellipse 55% 65% at 78% 25%, rgba(45,55,100,.35), transparent 55%),
    radial-gradient(ellipse 50% 55% at 65% 75%, rgba(35,60,110,.28), transparent 50%),
    radial-gradient(ellipse 80% 80% at 50% 50%, rgba(25,40,75,.18), transparent 70%);
  mix-blend-mode: lighten;
  pointer-events: none;
}
/* cinematic entrance: fade from black + slow Ken Burns zoom settle */
.js-motion .hero__bg {
  opacity: 0;
  animation: heroImageIn 22s cubic-bezier(.22,.68,.24,1) forwards;
}
@keyframes heroImageIn {
  0%   { opacity: 0; transform: scale(1.1); }
  7%   { opacity: 1; }
  100% { opacity: 1; transform: scale(1.0); }
}

/* dark scrim — text legibility + cinematic color grade */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    /* bottom-heavy: darkest where content lives */
    linear-gradient(0deg,
      rgba(12,14,20,.90) 0%,
      rgba(12,14,20,.60) 30%,
      rgba(12,14,20,.22) 58%,
      rgba(12,14,20,.45) 100%
    ),
    /* soft vignette pulls focus inward */
    radial-gradient(ellipse 80% 80% at 50% 45%,
      transparent 30%,
      rgba(12,14,20,.45) 100%
    );
}
/* ambient warm pulse — makes the lava feel alive */
@media (prefers-reduced-motion: no-preference) {
  .hero__scrim::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 55% 50% at 42% 55%,
      rgba(255,120,40,.07), transparent 70%);
    animation: lavaPulse 8s ease-in-out infinite alternate;
    pointer-events: none;
  }
}
@keyframes lavaPulse {
  from { opacity: .3; }
  to   { opacity: .8; }
}

.hero__in {
  position: relative;
  z-index: 2;
}

/* one-line headline on desktop — "Solid as Rock." reads as a single statement */
@media (min-width: 641px) {
  .h1__l1 { display: inline; }
  .h1__hl { display: inline-block; position: relative; vertical-align: baseline; }
}

.h1 {
  font-family: var(--font-serif);
  font-size: var(--fs-hero);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin-bottom: var(--s-6);
}
.h1__l1 { display: block; color: var(--on-dark-soft); }
.h1__hl { display: block; position: relative; }

/* the word "Rock" gets the copper gradient treatment */
.w--brand {
  background: linear-gradient(135deg, var(--copper-300), var(--copper-500), var(--copper-300));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* SVG underline that draws in — copper vein */
.h1__vein {
  display: block;
  width: clamp(160px, 40vw, 320px);
  height: 16px;
  color: var(--copper-500);
  margin-top: var(--s-2);
}
.h1__vein path {
  stroke-dasharray: 340;
  stroke-dashoffset: 340;
}
/* draw-in animation triggered by JS adding .js-motion */
.js-motion .h1__vein path {
  animation: veinDraw 1.4s var(--ease) 1.4s forwards;
}
@keyframes veinDraw { to { stroke-dashoffset: 0; } }

/* word-by-word entrance — default (no JS or reduced-motion): all visible */
.w {
  display: inline-block;
}
.js-motion .w {
  opacity: 0;
  transform: translateY(22px);
  animation: wordIn .7s var(--ease) forwards;
}
.js-motion .h1__l1 .w:nth-child(1) { animation-delay: .65s; }
.js-motion .h1__l1 .w:nth-child(2) { animation-delay: .75s; }
.js-motion .h1__hl .w:nth-child(1) { animation-delay: .9s; }
@keyframes wordIn {
  to { opacity: 1; transform: translateY(0); }
}

.lede {
  font-size: var(--fs-lede);
  color: var(--on-dark-soft);
  line-height: 1.55;
  max-width: 540px;
  margin-bottom: var(--s-7);
}

.ctas {
  display: flex; flex-wrap: wrap; gap: var(--s-3);
}

/* credentials rail at bottom of hero */
.rail {
  position: relative; z-index: 2;
  display: flex; flex-wrap: wrap;
  gap: var(--s-3) var(--s-6);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: var(--s-5);
  border-top: 1px solid var(--hairline-dark);
}
.rail__i {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--on-dark-faint);
}
.rail__i--lead { color: var(--copper-300); }
.rail__i svg { width: 16px; height: 16px; }


/* ===================== hero content entrance ===================== */
/* Progressive enhancement: content stages in when JS adds .js-motion.
   Without JS or with reduced-motion, everything is immediately visible. */

.js-motion .eyebrow {
  opacity: 0;
  transform: translateY(14px);
  animation: wordIn .7s var(--ease) .5s forwards;
}
.js-motion .lede {
  opacity: 0;
  transform: translateY(14px);
  animation: wordIn .7s var(--ease) 1.1s forwards;
}
.js-motion .ctas {
  opacity: 0;
  transform: translateY(14px);
  animation: wordIn .7s var(--ease) 1.3s forwards;
}
.js-motion .rail {
  opacity: 0;
  transform: translateY(10px);
  animation: wordIn .6s var(--ease) 1.55s forwards;
}


/* ===================== fault-line dividers ===================== */
.fault {
  display: block; width: 100%;
  height: clamp(48px, 7vw, 100px);
  position: relative;
  margin-top: -1px;
}
.fault--hero { color: var(--lime-050); }
.fault--about { color: var(--lime-050); }
.fault--area  { color: var(--lime-050); }


/* ===================== SERVICES ===================== */
.services {
  padding: var(--section-y) 0;
  background: var(--lime-050);
}

.h2 {
  font-family: var(--font-serif);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--ink);
}
.h2--on-dark { color: var(--on-dark); }

.svc-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--col-gap);
}

.svc-card {
  position: relative;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--lime-100);
  border-radius: var(--r-lg);
  border: 1px solid var(--lime-200);
  transition: transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease);
}
.svc-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
}
/* copper gradient bar on hover */
.svc-card::before {
  content: "";
  position: absolute; top: 0; left: var(--r-lg); right: var(--r-lg);
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, var(--copper-500), var(--copper-300));
  transform: scaleX(0);
  transition: transform var(--t-mid) var(--ease);
}
.svc-card:hover::before { transform: scaleX(1); }

.svc-card__icon {
  display: grid; place-items: center;
  width: 52px; height: 52px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--copper-100), var(--lime-050));
  color: var(--copper-600);
  margin-bottom: var(--s-4);
}
.svc-card__icon svg { width: 26px; height: 26px; }

.svc-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: var(--s-3);
}

.svc-card__p {
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  line-height: 1.55;
  margin-bottom: var(--s-4);
}

.svc-card__list {
  display: flex; flex-direction: column; gap: var(--s-2);
}
.svc-card__list li {
  position: relative;
  padding-left: 1.2rem;
  font-size: var(--fs-sm);
  color: var(--ink-soft);
}
/* diamond bullet */
.svc-card__list li::before {
  content: "";
  position: absolute; left: 0; top: .55em;
  width: 6px; height: 6px;
  background: var(--copper-500);
  transform: rotate(45deg);
}

.svc-cta {
  text-align: center;
  margin-top: clamp(2rem, 4vw, 3rem);
}

/* scroll-driven entrance for service cards */
@supports (animation-timeline: view()) {
  .svc-card {
    animation: settle linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 35%;
  }
}
@keyframes settle {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ===================== strata divider ===================== */
.strata {
  position: relative;
  height: clamp(24px, 4vw, 48px);
  overflow: hidden;
}
.strata__band {
  position: absolute; left: 0; right: 0;
  height: 100%;
}
.strata__band--1 {
  background: var(--lime-300);
  clip-path: polygon(0 0, 100% 20%, 100% 40%, 0 30%);
}
.strata__band--2 {
  background: var(--stone-700);
  clip-path: polygon(0 25%, 100% 35%, 100% 55%, 0 50%);
}
.strata__band--3 {
  background: var(--copper-600);
  clip-path: polygon(0 45%, 100% 50%, 100% 58%, 0 55%);
  opacity: .7;
}
.strata__band--4 {
  background: var(--stone-800);
  clip-path: polygon(0 52%, 100% 55%, 100% 72%, 0 68%);
}
.strata__band--5 {
  background: var(--stone-900);
  clip-path: polygon(0 65%, 100% 68%, 100% 100%, 0 100%);
}
.strata__vein {
  position: absolute; left: 10%; right: 20%; top: 48%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--copper-400), transparent);
  opacity: .5;
}
@supports (animation-timeline: view()) {
  .strata__vein {
    animation: veinGlow linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 80%;
  }
}
@keyframes veinGlow {
  from { opacity: 0; transform: scaleX(.3); }
  to   { opacity: .5; transform: scaleX(1); }
}


/* ===================== ABOUT ===================== */
.about {
  position: relative;
  padding: var(--section-y) 0 calc(var(--section-y) + 40px);
  background: var(--stone-900);
  color: var(--on-dark);
  overflow: hidden;
}
.about__atmo {
  position: absolute; inset: 0;
  background: var(--mineral);
}

.about__in {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.about__lede {
  font-size: var(--fs-lede);
  color: var(--on-dark-soft);
  line-height: 1.6;
  margin-top: var(--s-4);
  margin-bottom: var(--s-5);
}
.about__body {
  font-size: var(--fs-body);
  color: var(--on-dark-faint);
  line-height: 1.6;
}

.about__stats {
  display: flex; flex-direction: column; gap: var(--s-6);
}

.stat {
  padding: var(--s-5) var(--s-6);
  border-left: 3px solid var(--copper-500);
  background: rgba(255,255,255,.03);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.stat__num {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 700;
  line-height: 1;
  color: var(--copper-400);
  margin-bottom: var(--s-2);
}
.stat__num--sm {
  font-size: clamp(1.4rem, 2.5vw, 2rem);
}
.stat__label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--on-dark-faint);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

@supports (animation-timeline: view()) {
  .stat {
    animation: settle linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 40%;
  }
}


/* ===================== REVIEWS ===================== */
.reviews {
  padding: var(--section-y) 0;
  background: var(--lime-050);
}

.reviews__in {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.reviews__score {
  text-align: center;
  padding: var(--s-6) var(--s-7);
  background: var(--lime-100);
  border-radius: var(--r-lg);
  border: 1px solid var(--lime-200);
}
.reviews__num {
  font-family: var(--font-serif);
  font-size: clamp(3.5rem, 7vw, 5rem);
  font-weight: 700;
  line-height: 1;
  color: var(--copper-500);
  margin-bottom: var(--s-2);
}
/* halo bloom behind the number */
.reviews__num::after {
  content: "";
  display: block;
  width: 80px; height: 80px;
  margin: -70px auto 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(196,125,61,.15), transparent 70%);
  pointer-events: none;
}
@supports (animation-timeline: view()) {
  .reviews__num {
    animation: scoreBloom linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 50%;
  }
}
@keyframes scoreBloom {
  from { transform: scale(.85); opacity: .3; }
  to   { transform: scale(1);   opacity: 1; }
}

.reviews__stars {
  display: flex; justify-content: center; gap: 4px;
  color: var(--copper-500);
  margin-bottom: var(--s-3);
}
.reviews__stars svg { width: 22px; height: 22px; }

.reviews__src {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-meta);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.feature {
  margin-top: var(--s-6);
  padding: var(--s-6);
  background: var(--lime-100);
  border-radius: var(--r-lg);
  border: 1px solid var(--lime-200);
  border-left: 4px solid var(--copper-500);
}
.feature blockquote {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  font-style: italic;
  line-height: 1.55;
  color: var(--ink);
}
.feature figcaption {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4);
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--lime-200);
}
.feature__who {
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--ink);
}
.feature__meta {
  font-size: var(--fs-xs);
  color: var(--ink-meta);
  font-weight: 600;
}

.reviews__note {
  margin-top: var(--s-4);
  font-size: var(--fs-xs);
  color: var(--ink-faint);
  font-style: italic;
}


/* ===================== SERVICE AREA ===================== */
.area {
  position: relative;
  padding: var(--section-y) 0 calc(var(--section-y) + 40px);
  background: var(--stone-900);
  color: var(--on-dark);
  overflow: hidden;
}
.area__atmo {
  position: absolute; inset: 0;
  background: var(--mineral-2);
}

.area__in {
  position: relative; z-index: 2;
}

.area__copy {
  text-align: center;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.area__lede {
  max-width: 520px; margin-inline: auto; margin-top: var(--s-4);
  font-size: var(--fs-lede); color: var(--on-dark-soft); line-height: 1.55;
}

.area__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3) var(--s-5);
  max-width: 700px;
  margin-inline: auto;
}
.area__list li {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--on-dark-soft);
}
.area__list svg {
  width: 18px; height: 18px;
  color: var(--copper-400);
  flex: 0 0 18px;
}

@supports (animation-timeline: view()) {
  .area__list li {
    animation: settle linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 30%;
  }
}


/* ===================== CONTACT ===================== */
.contact {
  padding: var(--section-y) 0;
  background: var(--lime-050);
}

.contact__in {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.contact__lede {
  font-size: var(--fs-lede);
  color: var(--ink-soft);
  line-height: 1.55;
  margin-top: var(--s-4);
  margin-bottom: var(--s-6);
}

.contact__cards {
  display: flex; flex-direction: column; gap: var(--s-3);
}

.contact-card {
  display: flex; align-items: flex-start; gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  background: var(--lime-100);
  border-radius: var(--r-md);
  border: 1px solid var(--lime-200);
  text-decoration: none;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
a.contact-card:hover {
  border-color: var(--copper-300);
  box-shadow: var(--sh-sm);
}
.contact-card svg {
  width: 22px; height: 22px;
  color: var(--copper-500);
  flex: 0 0 22px;
  margin-top: 2px;
}
.contact-card__label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--ink-meta);
  margin-bottom: 2px;
}
.contact-card__val {
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--ink);
  line-height: 1.4;
}


/* ===================== form ===================== */
.form {
  padding: var(--s-6);
  background: var(--lime-100);
  border-radius: var(--r-lg);
  border: 1px solid var(--lime-200);
}
.form__demo {
  text-align: center;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-faint);
  padding: var(--s-2) var(--s-3);
  background: var(--lime-200);
  border-radius: var(--r-sm);
  margin-bottom: var(--s-5);
}
.form__row { margin-bottom: var(--s-4); }
.form__label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--ink-meta);
  margin-bottom: var(--s-2);
}
.form__input {
  display: block; width: 100%;
  padding: .7rem .9rem;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  color: var(--ink);
  background: var(--lime-050);
  border: 1px solid var(--lime-300);
  border-radius: var(--r-sm);
  transition: border-color var(--t-fast) var(--ease);
}
.form__input:focus {
  outline: none;
  border-color: var(--copper-500);
  box-shadow: 0 0 0 3px rgba(196,125,61,.15);
}
.form__input:disabled {
  opacity: .55;
  cursor: not-allowed;
}
.form__textarea { resize: vertical; min-height: 80px; }
.form__select { cursor: pointer; }


/* ===================== FOOTER ===================== */
.foot {
  padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(5rem, 8vw, 7rem);
  background: var(--stone-990);
  color: var(--on-dark-faint);
}
.foot__in {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--s-5);
  text-align: center;
}
.foot__links {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--s-2) var(--s-5);
}
.foot__links a {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--on-dark-faint);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}
.foot__links a:hover { color: var(--copper-400); }

.foot__tagline {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-lede);
  color: var(--on-dark-faint);
  opacity: .6;
}
.foot__copy {
  font-size: var(--fs-xs);
  color: var(--on-dark-faint);
  opacity: .5;
}
.foot__demo {
  font-size: var(--fs-xs);
  color: var(--on-dark-faint);
  opacity: .4;
  max-width: 420px;
}


/* ===================== demo bar ===================== */
.demo-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 80;
  padding: .6rem var(--gutter);
  background: var(--stone-950);
  border-top: 1px solid var(--hairline-copper);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--on-dark-faint);
  text-align: center;
  letter-spacing: .02em;
}


/* ===================== sticky mobile call bar ===================== */
.callbar {
  display: none;
  position: fixed; bottom: 36px; left: 0; right: 0; z-index: 75;
  padding: 0 var(--gutter);
}
.callbar__link {
  display: flex; align-items: center; justify-content: center;
  gap: .5rem;
  width: 100%;
  padding: .85rem 1rem;
  background: var(--copper-500);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-sm);
  text-decoration: none;
  border-radius: var(--r-pill);
  box-shadow: var(--sh-copper), 0 0 0 4px rgba(196,125,61,.2);
}
.callbar__link svg { width: 20px; height: 20px; }
.callbar__link:hover {
  background: var(--copper-600);
}


/* ===================== scroll-driven section reveal ===================== */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .h2, .shead__p, .about__lede, .about__body, .contact__lede,
    .area__lede, .feature, .reviews__note {
      animation: settle linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 30%;
    }
  }
}


/* ===================== responsive ===================== */

/* — tablet — */
@media (max-width: 900px) {
  .svc-grid { grid-template-columns: 1fr; gap: var(--s-4); }
  .about__in { grid-template-columns: 1fr; }
  .about__stats {
    flex-direction: row; flex-wrap: wrap;
    gap: var(--s-3);
  }
  .stat { flex: 1 1 160px; }
  .reviews__in { grid-template-columns: 1fr; }
  .reviews__score {
    display: flex; align-items: center; gap: var(--s-5);
    text-align: left;
  }
  .reviews__num::after { display: none; }
  .contact__in { grid-template-columns: 1fr; }
  .area__list { grid-template-columns: repeat(2, 1fr); }
}

/* — mobile — */
@media (max-width: 640px) {
  .navtoggle { display: flex; }
  .nav {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch;
    padding: var(--s-4) var(--gutter) var(--s-5);
    background: rgba(250,248,244,.97);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--lime-200);
    box-shadow: var(--sh-md);
  }
  .nav.is-open { display: flex; }
  .nav__list { flex-direction: column; align-items: stretch; }
  .nav__list a {
    padding: .6rem 0; min-height: 44px;
    font-size: var(--fs-body); font-weight: 700;
  }
  .nav__list a::after { display: none; }
  .nav__cta { text-align: center; margin-top: var(--s-3); }

  .hero__in { max-width: none; }
  .h1 { font-size: clamp(2.2rem, 10vw, 3.2rem); }
  .ctas { flex-direction: column; }
  .ctas .btn { width: 100%; }

  .rail { flex-direction: column; gap: var(--s-2); }

  .about__stats { flex-direction: column; }

  .reviews__score { flex-direction: column; text-align: center; }

  .area__list { grid-template-columns: repeat(2, 1fr); gap: var(--s-3); }

  .contact__cards { gap: var(--s-2); }

  .callbar { display: block; }
  .demo-bar { font-size: var(--fs-micro); padding: .5rem var(--s-3); }

  /* extra bottom padding so content isn't hidden behind callbar + demo-bar */
  .foot { padding-bottom: clamp(8rem, 14vw, 10rem); }
}

/* — reduced motion — */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* — print — */
@media print {
  .hdr, .progress, .demo-bar, .callbar, .hero__bg, .hero__scrim,
  .about__atmo, .area__atmo, .strata { display: none; }
  .hero { background: #333; }
  .about, .area { background: #444; }
  body { background: #fff; }
}