/* ===========================================================================
   Community Construction & Roofing — rebuilt front end
   ---------------------------------------------------------------------------
   Replaces the Duda export. One responsive document per URL instead of three
   device variants, no jQuery, no vendor runtime.

   Palette and type are sampled from the live design so the brand is unchanged:
     #434b1f deep olive (header)   #717e34 olive (actions)
     #a2b450 light olive (accent)  #393738 body    #130101 near-black
     Inter, already served locally — no new network requests.

   Motion is deliberate but restrained: this is a lead-generation site, so
   nothing scroll-jacks or delays the phone number. Every effect is disabled
   under prefers-reduced-motion.
   ========================================================================= */

/* ---------- tokens ------------------------------------------------------ */
:root {
  --olive-900: #2f350f;
  --olive-800: #434b1f;
  --olive-600: #717e34;
  --olive-400: #a2b450;
  --ink:       #393738;
  --ink-900:   #130101;
  --paper:     #ffffff;
  --paper-alt: #f6f6f4;
  --line:      rgba(57, 55, 56, .14);

  --dark:      #1f1f1e;
  --dark-alt:  #262625;

  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* fluid type — no breakpoint jumps */
  --step--1: clamp(.86rem, .82rem + .18vw, .95rem);
  --step-0:  clamp(1rem, .96rem + .22vw, 1.12rem);
  --step-1:  clamp(1.18rem, 1.08rem + .5vw, 1.45rem);
  --step-2:  clamp(1.45rem, 1.25rem + 1vw, 2.1rem);
  --step-3:  clamp(1.9rem, 1.5rem + 2vw, 3.1rem);
  --step-4:  clamp(2.4rem, 1.7rem + 3.4vw, 4.6rem);

  --gutter: clamp(1.15rem, .6rem + 2.4vw, 3rem);
  --wrap: 1180px;
  --wrap-narrow: 760px;

  --radius: 4px;
  --shadow: 0 18px 44px rgba(0, 0, 0, .13);
  --shadow-sm: 0 6px 18px rgba(0, 0, 0, .09);

  --header-h: 78px;
  --phone-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M13.832%2016.568a1%201%200%200%200%201.213-.303l.355-.465A2%202%200%200%201%2017%2015h3a2%202%200%200%201%202%202v3a2%202%200%200%201-2%202A18%2018%200%200%201%202%204a2%202%200%200%201%202-2h3a2%202%200%200%201%202%202v3a2%202%200%200%201-.8%201.6l-.468.351a1%201%200%200%200-.292%201.233%2014%2014%200%200%200%206.392%206.384%22%20%2F%3E%3C%2Fsvg%3E");
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- reset ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.62;
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;            /* belt-and-braces against a rogue full-bleed */
}
img, picture, video { max-width: 100%; display: block; }
img { height: auto; }
a { color: var(--olive-600); text-decoration-thickness: 1px; text-underline-offset: 2px; }
h1, h2, h3, h4 { margin: 0 0 .55em; line-height: 1.14; font-weight: 800; letter-spacing: -.015em; color: var(--ink-900); }
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }
p  { margin: 0 0 1.15em; }
ul, ol { margin: 0 0 1.15em; padding-left: 1.25em; }
li { margin-bottom: .5em; }
:focus-visible { outline: 3px solid var(--olive-400); outline-offset: 3px; border-radius: 2px; }

/* ---------- layout ------------------------------------------------------ */
.wrap { width: min(var(--wrap), 100% - var(--gutter) * 2); margin-inline: auto; }
.wrap-narrow { width: min(var(--wrap-narrow), 100% - var(--gutter) * 2); margin-inline: auto; }
.section {
  padding-block: clamp(3.5rem, 2rem + 6vw, 7.5rem);
  position: relative;
  /* Horizontal reveal transforms sit outside the section until they animate in.
     `clip` contains that without creating a scroll container the way
     overflow:hidden would (which is what let 30px of translate leak into the
     document width and give the page a horizontal scrollbar on mobile). */
  overflow-x: clip;
}
.section--tight { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem); }
.section--alt { background: var(--paper-alt); }
/* Dark sections carry a very low-contrast texture (generated for this build,
   made seamless and reduced to a 3.4KB luminance tile). It's laid over the
   flat colour with blend-mode rather than as a separate layer, so it tints
   with the section instead of greying it out. */
.section--dark {
  background-color: var(--dark);
  background-image: url("/assets/img/texture-dark.png");
  background-size: 384px 384px;
  background-repeat: repeat;
  background-blend-mode: overlay;
  color: #e9e9e6;
}
.cta-band {
  background-image: url("/assets/img/texture-dark.png");
  background-size: 384px 384px;
  background-blend-mode: soft-light;
}
.ftr {
  background-color: #141413;
  background-image: url("/assets/img/texture-dark.png");
  background-size: 384px 384px;
  background-blend-mode: soft-light;
}
.section--dark > .wrap h1, .section--dark > .wrap h2,
.section--dark > .wrap > h1, .section--dark > .wrap > h2 { color: #fff; }
/* Headings that sit directly on the dark background go white, but NEVER
   headings inside a light card sitting on top of it. */
.section--dark :where(h1, h2, h3):not(.card *):not(.tile *) { color: #fff; }

.eyebrow {
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--olive-600);
  margin: 0 0 .7rem;
}
.section--dark .eyebrow { color: var(--olive-400); }
.lede { font-size: var(--step-1); line-height: 1.5; }

.grid { display: grid; gap: clamp(1.4rem, 1rem + 1.6vw, 2.6rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

/* ---------- buttons ----------------------------------------------------- */
.btn {
  --btn-bg: var(--olive-600);
  --btn-fg: #fff;
  display: inline-flex; align-items: center; gap: .55rem;
  background: var(--btn-bg); color: var(--btn-fg) !important;
  padding: .95rem 1.7rem;
  border: 2px solid var(--btn-bg);
  border-radius: var(--radius);
  font-weight: 700; font-size: var(--step--1);
  letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none !important;
  cursor: pointer;
  transition: background .22s var(--ease), border-color .22s var(--ease), transform .22s var(--ease);
}
.btn:hover { --btn-bg: var(--olive-800); transform: translateY(-2px); }
.btn--ghost { --btn-bg: transparent; --btn-fg: #fff; border-color: rgba(255,255,255,.65); }
.btn--ghost:hover { --btn-bg: rgba(255,255,255,.14); border-color: #fff; transform: translateY(-2px); }
.btn--dark { --btn-bg: var(--ink-900); border-color: var(--ink-900); }
.btn-row { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; }

/* ---------- header ------------------------------------------------------ */
.hdr {
  position: fixed; inset: 0 0 auto; z-index: 900;
  background: transparent;
  transition: background .3s var(--ease), box-shadow .3s var(--ease);
}
.hdr__bar { display: flex; align-items: center; gap: 1.25rem; min-height: var(--header-h); }
.hdr.is-solid { background: var(--olive-800); box-shadow: 0 2px 18px rgba(0,0,0,.22); }
/* Interior pages have no hero image behind the header, so it starts solid. */
.hdr.is-static { position: sticky; background: var(--olive-800); }

.hdr__logo { display: flex; align-items: center; margin-right: auto; padding: .4rem 0; }
.hdr__logo img { width: clamp(84px, 7vw, 112px); height: auto; }

.nav { display: flex; align-items: center; gap: clamp(.5rem, .2rem + .9vw, 1.4rem); }
/* "About Us" is wrapped in .nav__group for its dropdown; every other item is a
   bare <a>. A direct <a> child of .nav is a flex item and gets blockified, so
   its vertical padding adds height — but the <a> inside .nav__group stayed
   inline, where vertical padding does not affect layout. The two boxes ended up
   different heights and the labels sat at different levels. Making the group a
   flex container blockifies its link too, so every top-level item is the same
   box. Do not collapse these back into a plain `.nav a`. */
.nav__group { display: flex; align-items: center; }
.nav > a, .nav__group > a {
  display: inline-flex; align-items: center; line-height: 1.2;
  padding: .5rem .1rem;
}
.nav a {
  color: #fff; text-decoration: none; font-weight: 600;
  font-size: var(--step--1); letter-spacing: .05em; text-transform: uppercase;
  padding: .5rem .1rem; position: relative; white-space: nowrap;
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .15rem; height: 2px;
  background: var(--olive-400); transform: scaleX(0); transform-origin: left;
  transition: transform .25s var(--ease);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }

.nav__group { position: relative; }
.nav__panel {
  position: absolute; top: 100%; left: 50%; translate: -50% 0;
  min-width: 232px; background: #fff; border-radius: var(--radius);
  box-shadow: var(--shadow); padding: .5rem; display: grid; gap: .1rem;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
.nav__group:hover .nav__panel,
.nav__group:focus-within .nav__panel,
.nav__group.is-open .nav__panel { opacity: 1; visibility: visible; transform: translateY(0); }
.nav__panel a {
  color: var(--ink); text-transform: none; letter-spacing: 0; font-weight: 600;
  padding: .6rem .8rem; border-radius: 3px; font-size: var(--step--1);
}
.nav__panel a::after { display: none; }
.nav__panel a:hover { background: var(--paper-alt); color: var(--olive-800); }

.hdr__cta { display: inline-flex; }
.hdr__tel { color: #fff; font-weight: 800; text-decoration: none; white-space: nowrap; }

.burger {
  display: none; width: 46px; height: 46px; border: 0; border-radius: 3px;
  background: rgba(255,255,255,.12); cursor: pointer; padding: 0;
  place-items: center;
}
.burger span, .burger span::before, .burger span::after {
  content: ""; display: block; width: 22px; height: 2px; background: #fff;
  border-radius: 2px; transition: transform .25s var(--ease), opacity .2s;
}
.burger span::before { transform: translateY(-7px); }
.burger span::after  { transform: translateY(5px); }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: rotate(45deg); }
.burger[aria-expanded="true"] span::after  { transform: rotate(-45deg) translateY(-1px); }

/* ---------- mobile drawer ---------------------------------------------- */
.drawer {
  position: fixed; inset: 0; z-index: 950;
  background: var(--olive-900);
  padding: calc(var(--header-h) + 1.5rem) var(--gutter) 2.5rem;
  overflow-y: auto;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform .38s var(--ease), visibility .38s;
}
.drawer.is-open { transform: translateY(0); visibility: visible; }
.drawer a { display: block; color: #fff; text-decoration: none; font-weight: 700;
            font-size: var(--step-1); padding: .7rem 0; border-bottom: 1px solid rgba(255,255,255,.13); }
.drawer .drawer__sub a { font-size: var(--step-0); font-weight: 600; opacity: .82; padding-left: 1rem; }
.drawer__actions { margin-top: 1.6rem; display: grid; gap: .8rem; }

/* ---------- hero -------------------------------------------------------- */
.hero { position: relative; display: grid; align-items: center; isolation: isolate;
        min-height: clamp(520px, 82vh, 860px); padding-top: var(--header-h); overflow: hidden; }
.hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__media img { width: 100%; height: 100%; object-fit: cover;
                   /* extra height so the parallax shift never reveals an edge */
                   min-height: 118%; position: absolute; top: -9%; left: 0;
                   will-change: transform; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, rgba(10,10,8,.88) 0%, rgba(10,10,8,.66) 46%, rgba(10,10,8,.3) 100%);
}
.hero__inner { padding-block: clamp(3rem, 2rem + 6vw, 6rem); max-width: 60rem; }
.hero h1 { color: #fff; text-wrap: balance; }
.hero .eyebrow { color: var(--olive-400); }
.hero p { color: rgba(255,255,255,.9); font-size: var(--step-1); max-width: 38rem; }
.hero h1 { max-width: 18ch; }
.hero__rule { width: 4px; background: var(--olive-400); border-radius: 2px; }
.hero--page { min-height: clamp(340px, 46vh, 480px); }
.hero--page h1 { font-size: var(--step-3); }

/* scroll cue */
.hero__cue { position: absolute; bottom: 1.4rem; right: var(--gutter); left: auto; translate: 0 0;
             color: rgba(255,255,255,.75); font-size: var(--step--1); letter-spacing: .12em;
             text-transform: uppercase; display: grid; justify-items: center; gap: .4rem; }
.hero__cue::after { content: ""; width: 1px; height: 34px; background: rgba(255,255,255,.5);
                    animation: cue 2.1s var(--ease) infinite; transform-origin: top; }
@keyframes cue { 0%,100% { transform: scaleY(.35); opacity: .35 } 50% { transform: scaleY(1); opacity: 1 } }

/* ---------- cinematic scroll ------------------------------------------- */
/* Elements start slightly low and transparent; .is-in is added by
   IntersectionObserver. Staggering is set per-element with --i. */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition: opacity .75s var(--ease), transform .75s var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}
[data-reveal="left"]  { transform: translate3d(-30px, 0, 0); }
[data-reveal="right"] { transform: translate3d(30px, 0, 0); }
/* On narrow screens a sideways entrance both reads worse and risks horizontal
   overflow, so everything rises instead. */
@media (max-width: 780px) {
  [data-reveal="left"], [data-reveal="right"] { transform: translate3d(0, 26px, 0); }
}
[data-reveal="scale"] { transform: scale(.965); }
.is-in[data-reveal] { opacity: 1; transform: none; }

/* Slow drift on feature imagery — the "cinematic" bit, kept subtle. */
.kenburns { overflow: hidden; }
.kenburns img { transform: scale(1.06); transition: transform 1.6s var(--ease); will-change: transform; }
.kenburns.is-in img { transform: scale(1); }

/* Parallax layers are moved by JS via --py (a translate in px). */
[data-parallax] { will-change: transform; transform: translate3d(0, var(--py, 0px), 0); }

/* Sticky section label that rides alongside long content. */
.sticky-label { position: sticky; top: calc(var(--header-h) + 1.5rem); align-self: start; }

/* ---------- cards ------------------------------------------------------- */
.card {
  background: #fff; border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-sm); display: flex; flex-direction: column; height: 100%;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.card__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--paper-alt); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.card:hover .card__media img { transform: scale(1.05); }
.card__body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; flex: 1; }
.card__body h3 { font-size: var(--step-1); margin-bottom: .4rem; color: var(--ink-900); }
.card__body p { color: var(--ink); }
.card__more { margin-top: auto; padding-top: .9rem; font-weight: 700; color: var(--olive-600); font-size: var(--step--1); }
a.card { text-decoration: none; color: inherit; }

/* service tiles */
.tile { background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
        padding: 1.8rem 1.5rem; text-align: center; text-decoration: none; color: inherit;
        display: grid; gap: .55rem; align-content: start; height: 100%;
        transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease); }
.tile:hover { border-color: var(--olive-400); transform: translateY(-4px); box-shadow: var(--shadow-sm); }
.tile__icon { width: 62px; height: 62px; margin: 0 auto .3rem; border-radius: 50%;
              border: 1px solid var(--olive-400); display: grid; place-items: center; color: var(--olive-600); }
.tile__icon svg { width: 28px; height: 28px; }
.tile h3 { font-size: var(--step-0); margin: 0; letter-spacing: 0; color: var(--ink-900); }
.tile span { font-size: var(--step--1); color: var(--olive-600); font-weight: 700; }

/* stat strip */
.stats { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); text-align: center; }
.stat__n { font-size: var(--step-3); font-weight: 800; color: #fff; line-height: 1; }
.stat__l { font-size: var(--step--1); text-transform: uppercase; letter-spacing: .1em; color: var(--olive-400); }

/* split feature */
.split { display: grid; gap: clamp(1.8rem, 1rem + 3vw, 4rem); align-items: center;
         grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.split__media { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.split__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
/* Uncropped variant: used where the image carries text or detail that a crop
   would destroy. The box takes the image's own proportions. */
.split__media--full { background: var(--paper-alt); box-shadow: var(--shadow); }
.split__media--full img { aspect-ratio: auto; object-fit: contain; height: auto; }
.split--flip .split__media { order: 2; }

/* ---------- prose (blog + long copy) ----------------------------------- */
.prose { font-size: var(--step-0); }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: var(--step-2); margin-top: 1.9em; }
.prose h3 { font-size: var(--step-1); margin-top: 1.6em; }
.prose img { border-radius: var(--radius); margin-block: 1.8em; box-shadow: var(--shadow-sm); }
.prose ul { padding-left: 1.3em; }
.prose li::marker { color: var(--olive-600); }
.prose strong { color: var(--ink-900); }

/* ---------- footer ------------------------------------------------------ */
.ftr { background: #141413; color: rgba(255,255,255,.78); padding-block: clamp(2.8rem, 2rem + 3vw, 4.5rem) 3.4rem; }
.ftr h4 { color: #fff; font-size: var(--step-0); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 1rem; }
.ftr a { color: rgba(255,255,255,.78); text-decoration: none; }
.ftr a:hover { color: #fff; text-decoration: underline; }
.ftr__grid { display: grid; gap: 2.2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.ftr__logo img { width: 128px; }
.ftr__cards img { width: 220px; max-width: 100%; height: auto; margin-top: .4rem; }
.ftr__list { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.ftr__hours { display: grid; grid-template-columns: auto auto; gap: .35rem 1.2rem; font-size: var(--step--1); }
.ftr__hours span:nth-child(even) { text-align: right; }
/* The design credit's reveal rows sit OUTSIDE this row's box (above and below),
   so the generous padding here is load-bearing, not decoration — it's the
   clearance the effect needs. Same reason .ftr's bottom padding is 3.4rem. */
.ftr__base { margin-top: 2.6rem; padding-top: 2.6rem; border-top: 1px solid rgba(255,255,255,.13);
             display: flex; flex-wrap: wrap; gap: 1.2rem 1.4rem; justify-content: space-between;
             align-items: baseline;
             font-size: var(--step--1); color: rgba(255,255,255,.55); }

/* the CTA band above the footer */
.cta-band { background: var(--olive-800); color: #fff; }
.cta-band .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 2rem; justify-content: space-between; }
.cta-band h2 { color: #fff; margin: 0; font-size: var(--step-2); max-width: 22ch; }

/* ---------- form -------------------------------------------------------- */
.form { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.form .full { grid-column: 1 / -1; }
.field label { display: block; font-weight: 700; font-size: var(--step--1); margin-bottom: .35rem; color: #fff; }
.field input, .field textarea {
  width: 100%; padding: .85rem 1rem; font: inherit; font-size: var(--step-0);
  border: 1px solid rgba(255,255,255,.28); border-radius: var(--radius);
  background: rgba(255,255,255,.07); color: #fff;
}
.field textarea { min-height: 8.5rem; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: rgba(255,255,255,.45); }
.field input:focus, .field textarea:focus { border-color: var(--olive-400); background: rgba(255,255,255,.12); }
.check { display: flex; gap: .7rem; align-items: flex-start; font-size: var(--step--1); color: rgba(255,255,255,.85); }
.check input { width: 1.15rem; height: 1.15rem; margin-top: .2rem; flex: none; accent-color: var(--olive-400); }
.form-status { border-radius: var(--radius); padding: .9rem 1.1rem; font-size: var(--step--1); border-left: 4px solid transparent; }
.form-status--pending { background: rgba(255,255,255,.12); color: #fff; border-left-color: rgba(255,255,255,.5); }
.form-status--success { background: #e6f4ea; color: #14532d; border-left-color: #2e7d32; }
.form-status--error   { background: #fdecea; color: #7f1d1d; border-left-color: #c62828; }
.form-status--error a { color: #7f1d1d; }

/* ---------- misc -------------------------------------------------------- */
.skip { position: absolute; left: -9999px; top: 0; background: #fff; color: var(--ink-900);
        padding: .8rem 1.2rem; z-index: 1000; border-radius: 0 0 var(--radius) 0; font-weight: 700; }
.skip:focus { left: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden;
                   clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.breadcrumb { font-size: var(--step--1); color: rgba(255,255,255,.72); margin-bottom: .6rem; }
.breadcrumb a { color: rgba(255,255,255,.72); }

/* ---------- responsive -------------------------------------------------- */
@media (max-width: 1080px) {
  .nav, .hdr__cta { display: none; }
  .burger { display: grid; }
  .hdr__tel { margin-left: auto; }
}
@media (max-width: 900px) {
  .cta-band .wrap { flex-direction: column; align-items: flex-start; }
  .hero__cue { display: none; }
}

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

/* Anything that depends on JS to become visible must be visible without it. */
.no-js [data-reveal] { opacity: 1; transform: none; }

/* ===========================================================================
   Homepage polish — hero, award badge, Lucide icons, section rhythm
   ========================================================================= */

/* ---- hero -------------------------------------------------------------- */
.hero--home { min-height: clamp(600px, 92vh, 960px); }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: center;
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  /* Extra top padding so the copy clears the fixed header rather than
     crowding straight up against it. */
  padding-block: clamp(4.5rem, 2.5rem + 7vw, 9rem) clamp(3rem, 2rem + 5vw, 6rem);
}
.hero__copy { max-width: 46rem; }
/* "Devoted to our work" must hold one line; the <br> supplies the second. */
.hero--home h1 { font-size: clamp(2.2rem, 1.2rem + 3.1vw, 4rem); }
.hero__copy h1 { text-wrap: balance; max-width: none; }
.hero .accent { color: var(--olive-400); }
.hero__lede { color: rgba(255,255,255,.92); font-size: var(--step-1); max-width: 34rem; }

/* small proof points under the CTAs — cheap trust, no extra requests */
.hero__proof {
  list-style: none; padding: 0; margin: 2rem 0 0;
  display: flex; flex-wrap: wrap; gap: .6rem 1.6rem;
  font-size: var(--step--1); color: rgba(255,255,255,.86);
}
.hero__proof li { display: flex; align-items: center; gap: .45rem; margin: 0; }
.hero__proof .ico { color: var(--olive-400); flex: none; }

/* ---- award badge ------------------------------------------------------- */
.hero__award {
  justify-self: end; align-self: center;
  width: min(100%, 320px);
  background: rgba(255,255,255,.97);
  border-radius: 18px; padding: 1.1rem;
  box-shadow: 0 26px 60px rgba(0,0,0,.42);
  transition: transform .45s var(--ease);
}
.hero__award:hover { transform: translateY(-5px); }
.hero__award img { width: 100%; height: auto; border-radius: 12px; }

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; gap: 2.2rem; }
  .hero__award { justify-self: start; width: min(100%, 270px); transform: none; }
  .hero--home { min-height: auto; }
}

/* ---- lucide icons ------------------------------------------------------ */
.ico { display: inline-block; vertical-align: middle; flex: none; }
.tile__icon {
  width: 58px; height: 58px; margin: 0 auto .55rem;
  border-radius: 14px;
  background: linear-gradient(150deg, rgba(162,180,80,.18), rgba(113,126,52,.09));
  border: 1px solid rgba(113,126,52,.22);
  display: grid; place-items: center; color: var(--olive-600);
  transition: background .28s var(--ease), color .28s var(--ease), transform .28s var(--ease);
}
.tile:hover .tile__icon {
  background: var(--olive-600); color: #fff;
  border-color: var(--olive-600); transform: translateY(-2px) scale(1.04);
}
.tile { padding: 1.7rem 1.25rem 1.5rem; }
.tile__go {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: var(--step--1); color: var(--olive-600); font-weight: 700;
}
.tile:hover .tile__go .ico { transform: translateX(3px); transition: transform .25s var(--ease); }

/* ---- section polish ---------------------------------------------------- */
/* A hairline of brand colour above major sections gives the page rhythm
   without adding weight. */
.section--dark { position: relative; }
.section--dark::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px;
  background: linear-gradient(90deg, var(--olive-600), var(--olive-400), transparent);
}
.section--dark .split__media { box-shadow: 0 26px 60px rgba(0,0,0,.5); }

/* numbered process cards read as a sequence rather than four boxes */
.step { position: relative; padding-top: 2.6rem; }
.step__n {
  position: absolute; top: 1.15rem; left: 1.5rem;
  font-size: .78rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--olive-600);
}
.step::after {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 3px;
  background: var(--olive-400); transform: scaleX(0); transform-origin: left;
  transition: transform .6s var(--ease);
}
.step.is-in::after { transform: scaleX(1); }

/* supplier / badge rows shouldn't fight the content for attention */
.logo-row img { filter: grayscale(1); opacity: .72; transition: filter .3s var(--ease), opacity .3s var(--ease); }
.logo-row img:hover { filter: none; opacity: 1; }

/* ---- about page -------------------------------------------------------- */
.factbar {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.4rem; margin-top: 2.4rem; text-align: center;
}
.factbar div { display: grid; gap: .2rem; }
.factbar strong { font-size: var(--step-3); line-height: 1; color: var(--olive-600); font-weight: 800; }
.factbar span { font-size: var(--step--1); text-transform: uppercase; letter-spacing: .1em; color: var(--ink); opacity: .72; }

.pullquote {
  margin: 1.8rem 0 0; padding: 0 0 0 1.3rem;
  border-left: 4px solid var(--olive-400);
  font-size: var(--step-1); line-height: 1.42; font-weight: 700;
  color: var(--ink-900); font-style: normal;
}
.section--dark .pullquote { color: #fff; }

.values { list-style: none; padding: 0; margin: 0; display: grid; gap: .9rem; }
.value {
  display: flex; align-items: center; gap: .9rem; margin: 0;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px; padding: 1rem 1.15rem; font-weight: 600;
}
.value__ico {
  width: 42px; height: 42px; flex: none; border-radius: 10px;
  background: rgba(162,180,80,.16); color: var(--olive-400);
  display: grid; place-items: center;
}
.closer h2 { font-size: var(--step-2); }

/* ---- breadcrumbs ------------------------------------------------------- */
.crumbs {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  font-size: var(--step--1);
  color: var(--ink);
}
.crumbs .wrap { padding-block: .85rem; display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
.crumbs a { color: var(--olive-600); text-decoration: none; font-weight: 600; }
.crumbs a:hover { text-decoration: underline; }
.crumbs span[aria-current] { opacity: .68; }
.crumbs span[aria-hidden] { opacity: .4; }

/* ---- services ---------------------------------------------------------- */
/* Static, wrapping index of every service.
   This replaced a sticky rail that scrolled sideways: with seven chips that
   read as a neat toolbar, but with all seventeen it read as content running off
   the edge of the page. Wrapping removes the failure mode entirely — there is
   no axis left to overflow on — and shows the whole list at a glance. */
.svc-index {
  margin-top: 2.2rem;
  display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center;
}
.svc-index a {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .52rem .95rem; border-radius: 999px;
  border: 1px solid var(--line); background: #fff;
  color: var(--ink); text-decoration: none;
  font-size: .82rem; font-weight: 700; line-height: 1.2;
  transition: background .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease), transform .25s var(--ease);
}
.svc-index a .ico { color: var(--olive-600); opacity: .75; transition: opacity .25s var(--ease); }
.svc-index a:hover {
  border-color: var(--olive-400); color: var(--olive-600); transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.svc-index a:hover .ico { opacity: 1; }

/* offset anchor targets so the fixed header doesn't cover the heading */
.section[id] { scroll-margin-top: calc(var(--header-h) + 20px); }

.svc-sec { padding-block: clamp(3rem, 2rem + 4.5vw, 6.5rem); }
.svc-row {
  display: grid; align-items: center;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
}
/* Source order is always figure-then-copy so a linearised (mobile) reading
   keeps the image with its heading; the flip is presentational only. */
.svc-row--flip .svc-fig { order: 2; }

.svc-fig { position: relative; margin: 0; display: grid; gap: 14px; }
.svc-fig__img {
  position: relative; z-index: 1;
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
}
.svc-fig__img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
/* Services the live page gives two photos to keep both, stacked, the way the
   live page stacks them. */
.svc-fig--pair .svc-fig__img img { aspect-ratio: 16 / 10; }

/* A service the live page runs with no photo gets one centred column rather
   than a split with an empty half. */
.svc-solo { text-align: center; }
.svc-solo .btn-row { justify-content: center; }
.svc-solo .warranties li { justify-content: center; }

/* On wide screens the photo becomes a full-height panel instead of a small
   centred rectangle floating in a tall row — that dead space either side of
   the image was most of why the page read as empty. */
@media (min-width: 900px) {
  .svc-row { align-items: stretch; }
  .svc-fig { align-content: stretch; }
  .svc-fig__img { min-height: 440px; }
  .svc-fig__img img { height: 100%; aspect-ratio: auto; }
  /* A stacked pair shares the row height between them, so neither gets the
     single-photo minimum. */
  .svc-fig--pair .svc-fig__img { min-height: 0; }
  .svc-fig--pair .svc-fig__img img { aspect-ratio: 16 / 10; }
  .svc-copy { align-self: center; }
}
.svc-copy h2 { font-size: var(--step-2); }
.svc-copy .eyebrow { margin-bottom: .5rem; }
.svc-copy .btn-row { margin-top: 1.6rem; }

/* The live page's signature: every service is its own full-width band, and the
   bands alternate white with the brand's deep olive. Same texture treatment as
   the CTA band, so the two olive surfaces on a page match rather than nearly
   match. */
.section--olive {
  background-color: var(--olive-800);
  background-image: url("/assets/img/texture-dark.png");
  background-size: 384px 384px;
  background-repeat: repeat;
  background-blend-mode: soft-light;
  color: rgba(255,255,255,.88);
}
.section--olive :where(h1, h2, h3, h4) { color: #fff; }
.section--olive .eyebrow { color: var(--olive-400); }
.section--olive .svc__ico {
  background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3); color: #fff;
}
.section--olive .warranties .ico { color: var(--olive-400); }
.section--olive .svc-fig__img { box-shadow: 0 26px 60px rgba(0,0,0,.42); }

.warranties { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; gap: .6rem; }
.warranties li {
  display: flex; align-items: center; gap: .6rem; margin: 0;
  font-weight: 600; font-size: var(--step--1);
}
.warranties .ico { color: var(--olive-600); flex: none; }

.ticks { list-style: none; padding: 0; margin: 0 0 1.2rem; display: grid; gap: .7rem; }
.ticks li { display: flex; gap: .65rem; align-items: flex-start; margin: 0; }
.ticks .ico { color: var(--olive-600); margin-top: .15rem; flex: none; }
.muted { font-size: var(--step--1); opacity: .78; }

/* ---- gallery ----------------------------------------------------------- */
.shots {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
}
.shot {
  position: relative; display: block; overflow: hidden; border-radius: 4px;
  aspect-ratio: 4 / 3; background: var(--paper-alt); cursor: zoom-in;
}
.shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.shot:hover img { transform: scale(1.06); }
.shot__cap {
  position: absolute; inset: auto 0 0; padding: 2.2rem .9rem .8rem;
  background: linear-gradient(transparent, rgba(0,0,0,.82));
  color: #fff; display: grid; gap: .1rem;
  opacity: 0; transform: translateY(8px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.shot:hover .shot__cap, .shot:focus-visible .shot__cap { opacity: 1; transform: none; }
.shot__cap strong { font-size: var(--step--1); }
.shot__cap em { font-style: normal; font-size: .8rem; opacity: .85; line-height: 1.35; }
@media (hover: none) { .shot__cap { opacity: 1; transform: none; } }

/* ---- lightbox ---------------------------------------------------------- */
.lb {
  position: fixed; inset: 0; z-index: 100000; display: none;
  background: rgba(0,0,0,.93); padding: 40px 64px;
  align-items: center; justify-content: center;
}
.lb.is-open { display: flex; }
.lb figure { margin: 0; max-width: 100%; max-height: 100%; text-align: center; }
.lb img { max-width: 100%; max-height: 82vh; width: auto; height: auto; object-fit: contain;
          margin-inline: auto; border-radius: 3px; }
.lb figcaption { color: #fff; margin-top: 1rem; font-size: var(--step--1); max-width: 760px;
                 margin-inline: auto; line-height: 1.5; }
.lb button {
  position: absolute; background: rgba(0,0,0,.5); color: #fff; border: 0;
  cursor: pointer; border-radius: 50%; line-height: 1; transition: background .2s var(--ease);
}
.lb button:hover, .lb button:focus-visible { background: rgba(255,255,255,.24); }
.lb__x { top: 18px; right: 20px; width: 46px; height: 46px; font-size: 30px; }
.lb__p, .lb__n { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 34px; }
.lb__p { left: 14px; } .lb__n { right: 14px; }
@media (max-width: 700px) {
  .lb { padding: 14px 8px 22px; }
  .lb__p, .lb__n { width: 42px; height: 42px; font-size: 26px; }
}

/* ---- FAQ (native details/summary — works with JS off) ------------------ */
.qa {
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  margin-bottom: .8rem;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.qa:last-child { margin-bottom: 0; }
.qa:hover { border-color: rgba(113,126,52,.42); }
.qa[open] { border-color: rgba(113,126,52,.42); box-shadow: var(--shadow-sm); }
.qa summary {
  list-style: none; cursor: pointer; position: relative;
  display: flex; align-items: baseline; gap: .85rem;
  padding: 1.15rem 3.1rem 1.15rem 1.35rem;
  font-weight: 700; color: var(--ink-900);
  font-size: clamp(1.02rem, .97rem + .25vw, 1.18rem); line-height: 1.35;
}
.qa summary::-webkit-details-marker { display: none; }
.qa__n {
  flex: none; font-size: .78rem; font-weight: 800; letter-spacing: .06em;
  color: var(--olive-600); opacity: .75;
}
.qa summary::after {
  content: ""; position: absolute; right: 1.35rem; top: 1.55rem;
  width: 10px; height: 10px;
  border-right: 2px solid var(--olive-600); border-bottom: 2px solid var(--olive-600);
  rotate: 45deg; transition: rotate .25s var(--ease);
}
.qa[open] summary::after { rotate: -135deg; }
.qa summary:hover .qa__q { color: var(--olive-600); }
.qa__a { padding: 0 1.9rem 1.4rem 3.55rem; }
.qa__a p:last-child { margin-bottom: 0; }
@media (max-width: 560px) { .qa__a { padding-left: 1.35rem; } }

/* "keep reading" cards at the foot of the FAQ */
.next { text-decoration: none; }
.next .card__body { padding: 1.7rem 1.6rem 1.5rem; }
.next h3 { font-size: var(--step-1); }
.next p { font-size: var(--step--1); }
.next__go {
  display: inline-flex; align-items: center; gap: .4rem; color: var(--olive-600);
  font-size: var(--step--1); font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase;
  transition: transform .25s var(--ease);
}
.next:hover .next__go { transform: translateX(5px); }

/* ---- financing --------------------------------------------------------- */
.frame {
  position: relative; width: 100%; height: 1150px;
  border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: #fff;
}
.frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 900px)  { .frame { height: 1250px; } }
@media (max-width: 600px)  { .frame { height: 1400px; } }

/* ---- recognition ------------------------------------------------------- */
.badges { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.badge { margin: 0; text-align: center; display: grid; gap: .9rem; align-content: start; }
.badge img { max-height: 190px; width: auto; margin-inline: auto; }
.badge figcaption { font-size: var(--step--1); color: var(--ink); opacity: .8; line-height: 1.4; }

/* ---- blog search ------------------------------------------------------- */
.search { display: block; max-width: 26rem; margin: 1.6rem auto 0; }
.search input {
  width: 100%; padding: .8rem 1rem; font: inherit; font-size: var(--step-0);
  border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--ink);
}
.search input:focus { border-color: var(--olive-400); outline: none; }
.no-hits { text-align: center; padding: 2rem 0; font-size: var(--step-1); }


/* ---- gallery hover preview --------------------------------------------
 * Same mechanism as the Christmas in Action build: the grid never moves.
 * Hovering fades the FULL uncropped image into a fixed pane, so you see more
 * photo rather than a magnified crop, and neighbouring tiles never shift.
 * pointer-events:none is the crucial part — the pane can't steal the hover,
 * so sweeping the grid can't flicker. Touch devices get the tap lightbox
 * instead; a sticky :hover after a tap reads as a bug.
 * --------------------------------------------------------------------- */
#shot-preview {
  position: fixed; inset: 0; z-index: 9998;
  display: flex; align-items: center; justify-content: center;
  padding: 4vh 4vw;
  pointer-events: none;
  opacity: 0; transition: opacity .22s ease;
  background: rgba(12, 12, 14, .38);
}
#shot-preview.is-visible { opacity: 1; }
#shot-preview img {
  max-width: min(78vw, 1040px); max-height: 80vh;
  object-fit: contain; display: block;
  border: 5px solid #fff; border-radius: 10px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
  transform: scale(.97);
  transition: transform .25s var(--ease);
}
#shot-preview.is-visible img { transform: scale(1); }
#shot-preview figcaption {
  position: absolute; left: 0; right: 0; bottom: 4vh;
  text-align: center; color: #fff; font-size: var(--step--1);
  text-shadow: 0 2px 12px rgba(0,0,0,.8);
}
.shot { transition: box-shadow .25s var(--ease), filter .25s var(--ease); }
.shot:hover, .shot:focus-visible { filter: brightness(1.06); box-shadow: 0 0 0 3px var(--olive-400); }
@media (hover: none) {
  #shot-preview { display: none; }
  .shot:hover { filter: none; box-shadow: none; }
}


/* ===========================================================================
   Mobile header + drawer — rebuilt
   The first pass just hid the desktop nav and dropped a hamburger next to a
   bare phone number, which read as an afterthought. This gives small screens a
   deliberate header: logo, a tap-to-call button, and a proper full-height
   drawer with grouped links and the primary actions pinned at the bottom.
   ========================================================================= */
@media (max-width: 1080px) {
  .hdr__bar { gap: .6rem; min-height: 68px; }
  .hdr__logo img { width: 62px; }

  /* phone becomes a real tap target, not loose text */
  .hdr__tel {
    margin-left: auto;
    display: inline-flex; align-items: center; gap: .45rem;
    background: rgba(255,255,255,.13);
    border: 1px solid rgba(255,255,255,.24);
    padding: .5rem .85rem; border-radius: 999px;
    font-size: .92rem; letter-spacing: .01em;
  }
  .hdr__tel::before {
    content: ""; width: 15px; height: 15px; flex: none;
    background: currentColor;
    -webkit-mask: var(--phone-mask) center/contain no-repeat;
    mask: var(--phone-mask) center/contain no-repeat;
  }
  .burger {
    width: 44px; height: 44px; border-radius: 12px;
    background: rgba(255,255,255,.13);
    border: 1px solid rgba(255,255,255,.24);
  }
  /* the header is solid as soon as the drawer opens, so the two never blend.
     z-index also lifts it above the drawer (950) so the burger's X stays visible/tappable. */
  .hdr.is-drawer-open { background: var(--olive-900); z-index: 960; }
}

@media (max-width: 480px) {
  .hdr__tel { padding: .5rem .7rem; font-size: 0; gap: 0; }   /* icon only */
  .hdr__tel::before { width: 18px; height: 18px; }
}

/* ---- drawer ------------------------------------------------------------ */
.drawer {
  padding: 0;
  background: var(--olive-900);
  display: grid; grid-template-rows: 1fr auto;
}
.drawer__scroll {
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: calc(68px + 1.25rem) var(--gutter) 1.5rem;
}
.drawer a {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .95rem 0;
  border-bottom: 1px solid rgba(255,255,255,.11);
  font-size: 1.12rem; font-weight: 700; letter-spacing: -.01em;
}
.drawer a::after {
  content: ""; width: 8px; height: 8px; flex: none;
  border-right: 2px solid rgba(255,255,255,.42);
  border-top: 2px solid rgba(255,255,255,.42);
  rotate: 45deg;
}
.drawer a:active { color: var(--olive-400); }
.drawer__sub { padding-left: .2rem; }
.drawer__sub a {
  font-size: .98rem; font-weight: 600; color: rgba(255,255,255,.74);
  padding: .68rem 0 .68rem 1.1rem; border-bottom: 1px dashed rgba(255,255,255,.09);
}
.drawer__sub a::after { opacity: .5; }

/* actions pinned to the bottom so the primary CTA is always reachable */
.drawer__actions {
  margin: 0; padding: 1.1rem var(--gutter) calc(1.1rem + env(safe-area-inset-bottom, 0px));
  display: grid; gap: .65rem;
  background: rgba(0,0,0,.34);
  border-top: 1px solid rgba(255,255,255,.13);
}
.drawer__actions .btn { justify-content: center; padding: .95rem 1.2rem; }
.drawer__meta {
  text-align: center; font-size: .82rem; color: rgba(255,255,255,.6);
  padding-top: .2rem;
}

/* ---- services / careers / faq / financing polish ----------------------- */
.svc__ico {
  display: inline-grid; place-items: center;
  width: 52px; height: 52px; border-radius: 14px; margin-bottom: .9rem;
  background: linear-gradient(150deg, rgba(162,180,80,.18), rgba(113,126,52,.09));
  border: 1px solid rgba(113,126,52,.22); color: var(--olive-600);
}
.section--dark .svc__ico {
  background: rgba(162,180,80,.14); border-color: rgba(162,180,80,.3); color: var(--olive-400);
}
.svc-card .card__body { padding: 1.6rem 1.5rem 1.7rem; }
.svc-card h3 { font-size: var(--step-1); }

/* an outline button that works on light backgrounds (btn--ghost is for dark) */
.btn--outline { --btn-bg: transparent; --btn-fg: var(--olive-600); border-color: var(--olive-600); }
.btn--outline:hover { --btn-bg: var(--olive-600); --btn-fg: #fff; }

.faq-grid {
  display: grid; gap: clamp(2rem, 1rem + 3vw, 3.5rem);
  grid-template-columns: minmax(0, 1.6fr) minmax(0, .9fr);
  align-items: start;
}
@media (max-width: 900px) { .faq-grid { grid-template-columns: 1fr; } }

/* White, because the FAQ grid now sits on --paper-alt and a paper-alt card on
   a paper-alt band is invisible. */
.help {
  background: #fff; border: 1px solid var(--line);
  border-radius: 10px; padding: 1.8rem 1.6rem;
  box-shadow: var(--shadow-sm);
}
/* The icon sits on the same line as the heading, not stacked above it. flex:none
   keeps it square when the heading wraps to two lines. */
.help__head {
  display: flex; align-items: center; gap: .75rem;
  font-size: var(--step-1); margin-bottom: .7rem;
}
.help__ico {
  flex: none;
  display: inline-grid; place-items: center; width: 42px; height: 42px;
  border-radius: 12px; background: var(--olive-600); color: #fff;
}
.help .btn { justify-content: center; }

/* ===========================================================================
   VGM design credit — D01·V2 Brand Star Reveal (v3 inline spec)
   ---------------------------------------------------------------------------
   All selectors namespaced .vgm-*. Everything except the gold stars and the
   Google dot inherits from the footer, so the credit reads as part of the page.

   Two host-specific notes:
   • Selectors are doubled up (.vgm-credit .vgm-bsr-brand) because .ftr a in
     this stylesheet is (0,1,1) and would otherwise repaint the brand link and
     underline it on hover.
   • The reveal rows are absolutely positioned OUTSIDE .ftr__base, so that row's
     padding and .ftr's bottom padding are what keep them clear. No ancestor
     may take overflow:hidden — it would clip the star glow.
   ========================================================================= */
.vgm-credit {
  --vgm-footer-color: rgba(255,255,255,.55);
  --vgm-weight-hover: 800;
  /* --vgm-hover-track intentionally unset: letter-spacing is absolute, not
     additive, so any value here REPLACES the inherited tracking. Only set it
     if hover ever makes the footer reflow. It doesn't here — verified. */
  --vgm-ease: cubic-bezier(.23, 1, .32, 1);

  font-size: inherit; font-family: inherit; font-weight: inherit;
  letter-spacing: inherit; text-transform: inherit;
  color: var(--vgm-footer-color);
  margin: 0; display: flex; align-items: baseline; gap: .4em; flex-wrap: wrap;
}
.vgm-bsr { position: relative; display: inline-block; cursor: default; }

.vgm-credit .vgm-bsr-brand,
.vgm-credit .vgm-bsr-rated,
.vgm-credit .vgm-bsr-label {
  font: inherit; letter-spacing: inherit; text-transform: inherit;
  color: var(--vgm-footer-color);
}
.vgm-credit .vgm-bsr-brand,
.vgm-credit .vgm-bsr-label { white-space: nowrap; }
.vgm-credit .vgm-bsr-brand {
  text-decoration: none; line-height: 1.1;
  transition: font-weight .22s var(--vgm-ease), letter-spacing .22s var(--vgm-ease);
}
.vgm-credit .vgm-bsr-brand:hover { text-decoration: none; }
.vgm-credit .vgm-bsr-brand:focus-visible {
  outline: 2px solid currentColor; outline-offset: 3px; border-radius: 2px;
}

.vgm-bsr-top {
  position: absolute; bottom: 100%; left: 0; margin-bottom: .4em;
  display: flex; align-items: center; gap: .45em; white-space: nowrap;
  opacity: 0; transform: translateY(-10px); pointer-events: none;
  transition: opacity .32s var(--vgm-ease), transform .32s var(--vgm-ease);
}
.vgm-bsr-star {
  font-size: 1em; line-height: 1; display: inline-block;
  color: #FBBC04 !important;
  opacity: 0; transform: translateY(-8px) scale(.6);
  transition: opacity .28s var(--vgm-ease), transform .28s var(--vgm-ease), filter .28s;
}
.vgm-bsr-bottom {
  position: absolute; top: 100%; left: 0; margin-top: .4em;
  display: flex; align-items: center; gap: .4em; white-space: nowrap;
  opacity: 0; transform: translateY(6px); pointer-events: none;
  transition: opacity .35s var(--vgm-ease), transform .35s var(--vgm-ease);
}
.vgm-bsr-dot {
  width: .7em; height: .7em; border-radius: 50%; display: inline-block; flex-shrink: 0;
  background: linear-gradient(135deg, #4285F4 0%, #34A853 33%, #FBBC05 66%, #EA4335 100%) !important;
}

/* reveal: :hover = pointer · :focus-within = keyboard · .is-active = touch */
.vgm-bsr:hover        .vgm-bsr-brand,
.vgm-bsr:focus-within .vgm-bsr-brand,
.vgm-bsr.is-active    .vgm-bsr-brand {
  font-weight: var(--vgm-weight-hover);
  letter-spacing: var(--vgm-hover-track, inherit);
}
.vgm-bsr:hover        .vgm-bsr-top,
.vgm-bsr:focus-within .vgm-bsr-top,
.vgm-bsr.is-active    .vgm-bsr-top { opacity: 1; transform: translateY(0); }
.vgm-bsr:hover        .vgm-bsr-star,
.vgm-bsr:focus-within .vgm-bsr-star,
.vgm-bsr.is-active    .vgm-bsr-star {
  opacity: 1; transform: translateY(0) scale(1);
  filter: drop-shadow(0 0 3px rgba(251,188,4,.6));
  transition-delay: calc(var(--i) * 70ms);
}
.vgm-bsr:hover        .vgm-bsr-bottom,
.vgm-bsr:focus-within .vgm-bsr-bottom,
.vgm-bsr.is-active    .vgm-bsr-bottom {
  opacity: 1; transform: translateY(0); transition-delay: .38s;
}

/* the credit sits at the right edge of .ftr__base, so the rows grow leftward */
.vgm-credit[data-vgm-align="right"] .vgm-bsr-top,
.vgm-credit[data-vgm-align="right"] .vgm-bsr-bottom { left: auto; right: 0; }

@media (max-width: 480px) {
  .vgm-bsr-top, .vgm-bsr-bottom, .vgm-bsr-label { white-space: normal; }
  .vgm-bsr-top, .vgm-bsr-bottom { max-width: 14em; }
}
@media (prefers-reduced-motion: reduce) {
  .vgm-bsr-top, .vgm-bsr-bottom, .vgm-bsr-star { transform: none !important; }
  .vgm-bsr-star, .vgm-bsr-bottom { transition-delay: 0s !important; }
  .vgm-bsr-brand { transition: none; }
}