/* ===========================================================================
   Immaculate Tree & Trim
   Palette is sampled from the real logo badge, not guessed - see
   tools/sample_brand.py. Every contrast pair below is measured in
   tools/contrast.py; the ratio is written next to the rule that depends on it.
   =========================================================================== */

:root{
  --black:#000;          /* matches the logo ground exactly, so the badge seams in */
  --coal:#0E100C;
  --bone:#F4F5F1;
  --white:#fff;
  --lime:#78A000;        /* sampled: modal colour of the logo wordmark */
  --lime-hi:#9FD11B;     /* brightened for text and CTAs on black - 11.61:1 */
  --lime-ink:#3F5600;    /* darkened for lime text on light grounds - 8.26:1 */
  --mist:#C6CCBD;        /* muted body copy on black - 12.77:1 */
  --slate:#3A3F33;       /* body copy on bone - 9.89:1 */
  --line:rgba(255,255,255,.14);
  --line-dk:rgba(0,0,0,.12);
  --wrap:1180px;
  --pad:1.5rem;
  --r:14px;
  --shadow:0 18px 40px rgba(0,0,0,.28);
  --dsp:'Oswald',Impact,'Haettenschweiler','Arial Narrow Bold',sans-serif;
  --body:'Barlow','Segoe UI',system-ui,-apple-system,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--black);color:var(--mist);
  font:400 1.0625rem/1.65 var(--body);
  overflow-x:hidden;               /* belt and braces against a stray wide child */
}
img{max-width:100%;height:auto;display:block}
a{color:var(--lime-hi)}
h1,h2,h3{font-family:var(--dsp);font-weight:700;line-height:1.08;letter-spacing:.01em;margin:0}
p{margin:0 0 1rem}
ul{margin:0;padding:0;list-style:none}

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

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--lime-hi);color:#000;
  padding:.7rem 1.1rem;font-weight:700;border-radius:0 0 8px 0}
.skip:focus{left:0}

:where(a,button,input,select,textarea):focus-visible{
  outline:3px solid var(--lime-hi);outline-offset:3px;border-radius:4px}

/* Icon+text rows. align-items:center centres the MARGIN box, so any inherited
   margin on the icon offsets the text by half its value. Kill it explicitly and
   pin line-height on the container. (handoff CSS rule) */
.ico{width:1.05em;height:1.05em;flex:none;fill:currentColor;margin:0;display:block}

/* ------------------------------------------------------------------ top bar */
.topbar{background:var(--coal);border-bottom:1px solid var(--line);
  font-size:.875rem;line-height:1}
.topbar-in{display:flex;align-items:center;justify-content:space-between;
  gap:1rem;min-height:42px;line-height:1}
.topbar-cred{margin:0;color:var(--mist);letter-spacing:.02em}
.topbar-tel{display:flex;align-items:center;gap:.5rem;line-height:1;
  color:var(--lime-hi);font-weight:700;text-decoration:none;letter-spacing:.02em}
.topbar-tel:hover{text-decoration:underline}

/* ------------------------------------------------------------------- header */
/* Lighter than the page so the mark reads as a badge sitting ON the header
   rather than a black rectangle dissolving into a black bar. */
/* No backdrop-filter here. A backdrop-filter (like transform, filter or
   will-change) makes the element a containing block for position:fixed
   DESCENDANTS - which trapped the mobile drawer inside the 70px header instead
   of the viewport, so it rendered as a 70px sliver. The header background is
   opaque anyway, so the blur was buying nothing. */
.site{position:sticky;top:0;z-index:60;
  background:linear-gradient(180deg,#1A1E14 0%,#141810 100%);
  border-bottom:1px solid rgba(159,209,27,.22);
  box-shadow:0 6px 22px rgba(0,0,0,.45)}
.site-in{display:flex;align-items:center;gap:1rem;min-height:78px}
.brand{display:flex;align-items:center;gap:.85rem;text-decoration:none;
  color:var(--white);margin-right:auto;line-height:1}
/* The artwork is a domed arc over a tree, so a circular mask reads as a crest.
   The ring + shadow are what stop the (necessarily black) tile from looking
   like a screenshot pasted on the page. */
.badge{width:56px;height:56px;border-radius:50%;object-fit:cover;
  border:2px solid rgba(159,209,27,.55);
  box-shadow:0 6px 18px rgba(0,0,0,.55),0 0 0 4px rgba(159,209,27,.10);
  background:#000}
.brand-txt{display:flex;flex-direction:column;gap:.22rem}
.brand-name{font-family:var(--dsp);font-weight:700;font-size:1.3rem;
  text-transform:uppercase;letter-spacing:.03em;color:var(--lime-hi);line-height:1}
.brand-name em{font-style:normal;color:var(--white)}
.brand-tag{font-size:.7rem;text-transform:uppercase;letter-spacing:.18em;
  color:var(--mist);line-height:1}

.nav{display:flex;align-items:center;gap:.35rem}
/* Drawer-only furniture; hidden while the nav is a horizontal bar. display:contents
   on the wrappers so their children stay direct flex items of .nav - the quote
   CTA has to survive into the desktop bar, only the phone block and the strapline
   are drawer-only. */
/* Drawer-only furniture. Anything here that targets a LINK is written at
   (0,2,1), because `.nav a` below is (0,1,1) and beats a bare class at (0,1,0) -
   that exact mismatch caused three separate bugs on this build. */
.nav-head,.nav-foot{display:none}
.nav-links{display:contents}
.nav a{display:inline-flex;align-items:center;padding:.6rem .85rem;border-radius:8px;
  color:var(--white);text-decoration:none;font-weight:600;font-size:1rem}
.nav a:hover{background:rgba(255,255,255,.08);color:var(--lime-hi)}
/* .nav a is (0,1,1) and beats .btn at (0,1,0) - the CTA has to be selected at
   (0,2,1) or its label inherits the near-white nav colour and vanishes on lime.
   This exact bug cost a round trip on a previous build. */
.nav a.nav-quote{background:var(--lime-hi);color:#000;font-weight:700;   /* 11.6:1 */
  padding:.62rem 1.1rem;margin-left:.4rem}
.nav a.nav-quote:hover{background:#B2E52B;color:#000}

.burger{display:none;width:46px;height:46px;padding:11px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(159,209,27,.35);border-radius:11px;cursor:pointer}
.burger span{display:block;height:2px;background:var(--lime-hi);border-radius:2px}
.burger span+span{margin-top:5px}

/* The drawer is anchored right and covers the burger, so it carries its own
   dismiss control rather than relying on the scrim or Escape alone. */
.nav-close{display:none;margin-left:auto;width:40px;height:40px;padding:9px;
  background:rgba(255,255,255,.06);border:1px solid var(--line);
  border-radius:10px;cursor:pointer;flex:none}
.nav-close svg{width:100%;height:100%;fill:var(--white);display:block}

.scrim{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:50}

/* --------------------------------------------------------------------- hero */
.hero{position:relative;background:var(--black);overflow:hidden;isolation:isolate}
/* Full-bleed photo behind a brand overlay. The photo is an <img> rather than a
   CSS background so it can carry srcset/sizes and be fetched at high priority -
   it is the LCP element. It is decorative, so alt="" and aria-hidden. */
.hero-bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;
  object-fit:cover;object-position:50% 42%}
/* Horizontal, not vertical. A flat vertical scrim at the strength needed to
   carry white text over a bright sky turned the whole photo murky navy and
   buried the climber. Weighting it left instead puts the dark where the text
   column is and lets the right-hand third of the photo stay legible. */
.hero-art{position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(95deg, rgba(0,0,0,.90) 0%, rgba(0,0,0,.82) 34%,
                           rgba(0,0,0,.58) 62%, rgba(0,0,0,.34) 100%),
    linear-gradient(to bottom, rgba(0,0,0,.34) 0%, rgba(0,0,0,0) 34%,
                               rgba(0,0,0,.22) 78%, rgba(0,0,0,.62) 100%),
    radial-gradient(58% 70% at 6% 6%, rgba(120,160,0,.34) 0%, rgba(120,160,0,0) 64%)}
/* Left-aligned, held to ~54% of the wrap, so the copy stacks over the dark side
   of the gradient and never runs across the climber. */
.hero-in{padding:clamp(4rem,9vw,7rem) var(--pad) clamp(4rem,8vw,6.5rem)}
.hero-in>*{max-width:min(640px,54%)}
.eyebrow{font-family:var(--dsp);font-weight:600;text-transform:uppercase;
  letter-spacing:.2em;font-size:.82rem;color:var(--lime-hi);margin:0 0 1.1rem}
.hero h1{font-size:clamp(2.4rem,6.4vw,4.35rem);color:var(--white);
  text-transform:uppercase;letter-spacing:.005em}
/* Underline painted as a background gradient with box-decoration-break:clone.
   An absolutely-positioned ::after disappears the moment the span wraps, which
   is exactly what happens at 375px. (handoff CSS rule) */
.hero h1 .u{color:var(--lime-hi);
  background-image:linear-gradient(var(--lime),var(--lime));
  background-size:100% .1em;background-position:0 92%;background-repeat:no-repeat;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  padding-bottom:.06em}
.lede{margin:1.4rem 0 0;font-size:1.12rem;color:var(--mist)}
.hero-cta{display:flex;flex-wrap:wrap;gap:.85rem;margin:2.1rem 0 0}

/* ------------------------------------------------------------------ buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  line-height:1;padding:1rem 1.6rem;border-radius:10px;border:2px solid transparent;
  font-family:var(--dsp);font-weight:600;font-size:1.06rem;letter-spacing:.04em;
  text-transform:uppercase;text-decoration:none;cursor:pointer;
  transition:transform .16s ease,background-color .16s ease,box-shadow .16s ease}
/* Black on lime is 6.83:1. White on lime is only 3.08:1 and would fail AA for
   anything short of large text, so the lime button is always dark-labelled. */
.btn-lime{background:var(--lime-hi);color:#000;box-shadow:0 10px 26px rgba(159,209,27,.22)}
.btn-lime:hover{background:#B2E52B;transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--white);border-color:rgba(255,255,255,.4)}
.btn-ghost:hover{border-color:var(--lime-hi);color:var(--lime-hi);transform:translateY(-2px)}
.btn-dark{background:var(--black);color:var(--lime-hi)}   /* 11.6:1 */
.btn-dark:hover{background:#1a1a1a;transform:translateY(-2px)}
.btn-block{width:100%}

/* ------------------------------------------------------------------- badges */
.badges{background:var(--lime);border-block:1px solid rgba(0,0,0,.18)}
.badges-in{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;
  padding-block:1.25rem}
.badges li{display:flex;align-items:center;justify-content:center;gap:.6rem;
  line-height:1;text-align:center;
  font-family:var(--dsp);font-weight:600;font-size:1.02rem;letter-spacing:.03em;
  text-transform:uppercase;color:#000}                 /* black on lime - 6.83:1 */
.badges li+li{border-left:1px solid rgba(0,0,0,.2)}

/* ----------------------------------------------------------------- sections */
.sec{padding-block:clamp(3.5rem,7vw,5.5rem)}
.sec-light{background:var(--bone);color:var(--slate)}
.sec-light h2,.sec-light h3{color:#12150F}
.kicker{font-family:var(--dsp);font-weight:600;text-transform:uppercase;
  letter-spacing:.2em;font-size:.8rem;color:var(--lime-ink);margin:0 0 .6rem}  /* 8.26:1 */
.sec h2{font-size:clamp(1.9rem,4vw,2.9rem);text-transform:uppercase}
.sec-lede{margin:.9rem 0 0;max-width:62ch;font-size:1.08rem}

/* --------------------------------------------------------------------- cards
   Six cards, so a 3-column grid fills two rows with no orphan. align-items
   stretch + flex:1 on the body keeps every card the same height. */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;
  align-items:stretch;margin-top:2.4rem}
/* 2px all round to match .card-alert's outline exactly - at 1px the alert card's
   thicker top border pushed its heading 2px below the others in the row. */
.card{position:relative;display:flex;flex-direction:column;background:var(--white);
  border:2px solid var(--line-dk);border-left:4px solid var(--lime);
  border-radius:var(--r);overflow:hidden;box-shadow:0 6px 18px rgba(0,0,0,.06);
  transition:transform .18s ease,box-shadow .18s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(0,0,0,.12)}
/* Fixed 16:9 box with object-fit, so eight different source crops still line up
   across the row. width/height on the tag come from tools/dims.py. */
.card-img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:50% 50%}
/* Padding lives on the body, not the card, so the photo sits flush to the edge. */
.card-body{display:flex;flex-direction:column;flex:1;padding:1.5rem 1.5rem 1.6rem}
.card h3{font-size:1.4rem;text-transform:uppercase;margin-bottom:.7rem}
.card p{margin:0;flex:1}
/* The emergency card gets an OUTLINE, never a solid fill - a filled card at this
   size reads as an ad block and pulls attention off the other five. */
/* border-left stays 4px like the others: at 2px this card's content box was 2px
   wider, so its aspect-ratio image rendered 1.1px taller and its heading sat
   below the rest of the row. */
.card-alert{background:#0E100C;border:2px solid var(--lime-hi);
  border-left:4px solid var(--lime-hi)}
.card-alert h3{color:var(--lime-hi)}
.card-alert p{color:var(--mist)}
/* Pinned over the photo, not stacked above the heading. In the flow it pushed
   this card's h3 down by its own height, so "Storm & Emergency" sat a line lower
   than the other five titles and the whole row looked misaligned.
   Selected at (0,2,0) deliberately: as plain `.card-flag` it is (0,1,0) and
   loses to `.card-alert p` at (0,1,1) above, which repainted the label mist-grey
   on lime - a measured 1.1:1. Caught by computing ratios, not by eye. */
.card-alert .card-flag{position:absolute;top:.85rem;left:.85rem;z-index:1;
  margin:0;padding:.36rem .75rem;
  border-radius:999px;background:var(--lime-hi);color:#000;    /* 11.6:1 */
  font-family:var(--dsp);font-weight:600;font-size:.72rem;line-height:1;
  letter-spacing:.16em;text-transform:uppercase;
  box-shadow:0 4px 12px rgba(0,0,0,.45)}

/* ------------------------------------------------------------------ cta band */
.band{position:relative;isolation:isolate;overflow:hidden;background:var(--coal);
  border-block:1px solid var(--line);padding-block:clamp(2.6rem,5vw,3.8rem)}
.band-bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;
  object-fit:cover;object-position:50% 52%}
.band::before{content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(100deg, rgba(0,0,0,.90) 0%, rgba(0,0,0,.74) 52%, rgba(0,0,0,.60) 100%),
    radial-gradient(70% 120% at 20% 0%, rgba(120,160,0,.30), rgba(120,160,0,0) 68%)}
.band-in{position:relative;display:flex;align-items:center;
  justify-content:space-between;gap:1.8rem;flex-wrap:wrap}
.band h2{font-size:clamp(1.7rem,3.6vw,2.5rem);color:var(--white);text-transform:uppercase}
.band p{margin:.7rem 0 0;max-width:52ch;color:var(--mist)}

/* -------------------------------------------------------------------- about */
.about-in{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,4rem);
  align-items:center}
.about-role{font-family:var(--dsp);font-weight:600;text-transform:uppercase;
  letter-spacing:.16em;font-size:.86rem;color:var(--lime-ink);margin:.4rem 0 1.3rem}
.about-cta{margin:1.6rem 0 0}
/* The mark is drawn for a dark ground: its "TREE & TRIM" line is white and its
   wordmark is lime, so on the bone section it needs its own black tile rather
   than sitting straight on the light background. (handoff trap #5) */
.about-fig{margin:0;background:#000;border-radius:20px;
  padding:clamp(1.4rem,3vw,2.4rem);box-shadow:var(--shadow);
  border:1px solid rgba(159,209,27,.22)}
.about-fig img{width:100%;height:auto;max-width:380px;margin-inline:auto}

/* ------------------------------------------------------------------ process
   Replaces the full-width brandmark that used to sit here. The badge already
   appears in the header, the About panel and the footer, so a fourth giant copy
   of it was decoration; four steps do real work for someone deciding whether to
   ring an outfit with no reviews yet. */
.steps{background:
    radial-gradient(60% 70% at 82% 10%, rgba(120,160,0,.20), rgba(120,160,0,0) 66%),
    radial-gradient(50% 60% at 8% 92%, rgba(159,209,27,.12), rgba(159,209,27,0) 62%),
    var(--black);
  padding-block:clamp(3.5rem,7vw,5.5rem)}
/* .steps is not a .sec, so it has to restate the section heading scale itself. */
.steps h2{font-size:clamp(1.9rem,4vw,2.9rem);text-transform:uppercase;
  color:var(--white)}
.steps .kicker{color:var(--lime-hi)}
.steps .sec-lede{color:var(--mist)}
.step-list{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;
  margin:2.6rem 0 0;padding:0;list-style:none;counter-reset:none}
.step{position:relative;padding:1.6rem 1.4rem 1.5rem;border-radius:var(--r);
  background:rgba(255,255,255,.035);border:1px solid var(--line);
  border-top:3px solid var(--lime)}
.step-n{display:block;font-family:var(--dsp);font-weight:700;font-size:2.1rem;
  line-height:1;color:var(--lime-hi);margin-bottom:.7rem;letter-spacing:.02em}
.step h3{font-size:1.18rem;text-transform:uppercase;color:var(--white);
  margin-bottom:.55rem}
.step p{margin:0;color:var(--mist);font-size:.98rem}
.steps-tag{text-align:center;margin:2.6rem 0 0;font-family:var(--dsp);
  font-weight:600;text-transform:uppercase;letter-spacing:.28em;
  font-size:.86rem;color:var(--lime-hi)}

/* ---------------------------------------------------------------------- faq
   Native <details>/<summary>, so it works with no JS, is keyboard operable and
   is announced correctly without any aria plumbing. */
/* Dark on purpose: About and Service area either side are both bone, and three
   light sections in a row flattens the page. */
.faq-sec{background:
    radial-gradient(58% 66% at 88% 6%, rgba(120,160,0,.20), rgba(120,160,0,0) 64%),
    var(--coal);
  color:var(--mist)}
.faq-sec h2{color:var(--white)}
.faq-sec .kicker{color:var(--lime-hi)}
.faq{max-width:860px;margin-top:2.4rem}
.q{background:rgba(255,255,255,.04);border:1px solid var(--line);
  border-left:4px solid var(--lime);border-radius:var(--r);margin-bottom:.8rem;
  overflow:hidden}
.q[open]{background:rgba(255,255,255,.06);box-shadow:0 10px 26px rgba(0,0,0,.35)}
.q summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.1rem 1.3rem;cursor:pointer;list-style:none;
  font-family:var(--dsp);font-weight:600;font-size:1.1rem;color:var(--white);
  text-transform:uppercase;letter-spacing:.02em}
.q summary::-webkit-details-marker{display:none}
/* Chevron drawn in CSS - no icon font, nothing extra to load. */
.q summary::after{content:"";flex:none;width:.6rem;height:.6rem;
  border-right:2.5px solid var(--lime-hi);border-bottom:2.5px solid var(--lime-hi);
  transform:rotate(45deg) translateY(-2px);transition:transform .2s ease}
.q[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.q summary:hover{background:rgba(159,209,27,.08)}
.a{padding:0 1.3rem 1.25rem}
.a p{margin:0;color:var(--mist)}

/* -------------------------------------------------------------------- areas
   Three hubs, eight towns each - the count is deliberate so no column ends on
   an orphan chip at any breakpoint (8 divides by 1, 2 and 4). */
.areas{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:2.4rem}
.area h3{font-size:1.15rem;text-transform:uppercase;letter-spacing:.06em;
  padding-bottom:.7rem;border-bottom:2px solid var(--lime)}
/* Explicit grid, not a wrapping flex - a wrapping flex leaves a ragged last row. */
.chips{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem;margin-top:1.2rem}
.chips li{background:var(--white);border:1px solid var(--line-dk);
  border-radius:999px;padding:.6rem .9rem;text-align:center;font-weight:600;
  font-size:.95rem;color:var(--slate)}

/* -------------------------------------------------------------------- quote */
.sec-quote{background:
    radial-gradient(60% 80% at 85% 10%, rgba(120,160,0,.26), rgba(120,160,0,0) 65%),
    var(--coal)}
.quote-in{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,5vw,3.6rem);
  align-items:start}
.quote-copy h2{color:var(--white)}
.quote-copy .kicker{color:var(--lime-hi)}     /* on coal - 10.57:1 */
.quote-alt{margin-top:1.4rem;font-weight:600}

.quote-form{display:grid;grid-template-columns:1fr 1fr;gap:1rem;
  background:rgba(255,255,255,.04);border:1px solid var(--line);
  border-radius:var(--r);padding:clamp(1.3rem,3vw,2rem)}
.field{display:flex;flex-direction:column;gap:.4rem}
.field-wide{grid-column:1/-1}
.quote-form label{font-family:var(--dsp);font-weight:600;font-size:.82rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--mist)}
.req{color:var(--lime-hi)}
.quote-form input,.quote-form select,.quote-form textarea{
  width:100%;padding:.8rem .9rem;border-radius:9px;
  border:1px solid rgba(255,255,255,.22);background:rgba(0,0,0,.45);
  color:var(--white);font:400 1rem/1.4 var(--body)}
.quote-form textarea{resize:vertical;min-height:110px}
.quote-form input::placeholder,.quote-form textarea::placeholder{color:#8A9182}
.quote-form input:focus,.quote-form select:focus,.quote-form textarea:focus{
  border-color:var(--lime-hi);outline-offset:1px}
.quote-form .btn-block{grid-column:1/-1;margin-top:.3rem}
.err{margin:0;font-size:.86rem;font-weight:600;color:#FFB4A8}
.is-bad{border-color:#FF8C7A !important}
.form-note{grid-column:1/-1;margin:0;min-height:1.4rem;font-weight:600}
.form-note.ok{color:var(--lime-hi)}
.form-note.bad{color:#FFB4A8}
/* Honeypot: off-screen rather than display:none, which some bots skip. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ------------------------------------------------------------------- footer */
.site-foot{background:var(--coal);border-top:1px solid var(--line);
  padding:clamp(2.6rem,5vw,3.6rem) 0 6.5rem}
.foot-in{display:grid;grid-template-columns:auto 1fr 1fr;gap:2rem;align-items:start}
/* Rounded, padded tile. Previously the bare lockup sat flush in a hard square
   with the arc terminals touching the bottom edge, which read as cut off. The
   padding gives the artwork room and the radius stops the (necessary) black
   ground looking like an unstyled box. */
.foot-brand{background:#000;border-radius:18px;padding:1.1rem 1.2rem;
  border:1px solid rgba(159,209,27,.22);
  box-shadow:0 10px 26px rgba(0,0,0,.5);width:max-content}
.foot-brand img{width:170px;height:auto;display:block}
.foot-col h2{font-size:1.05rem;text-transform:uppercase;letter-spacing:.1em;
  color:var(--white);margin-bottom:.8rem}
.foot-col p{margin:0 0 .45rem;font-size:.98rem}
.foot-tag{text-align:center;margin:2.4rem 0 0;font-family:var(--dsp);
  font-weight:600;text-transform:uppercase;letter-spacing:.28em;
  font-size:.82rem;color:var(--lime-hi)}
.foot-legal{text-align:center;margin:.9rem 0 0;font-size:.85rem;color:#8A9182}

/* --------------------------------------------------------------- call bar */
.callbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:70;
  align-items:center;justify-content:center;gap:.6rem;line-height:1;
  padding:1rem;background:var(--lime-hi);color:#000;   /* 11.6:1 */
  font-family:var(--dsp);font-weight:700;font-size:1.08rem;letter-spacing:.05em;
  text-transform:uppercase;text-decoration:none;
  box-shadow:0 -8px 24px rgba(0,0,0,.4)}

/* ================================================================ responsive */
@media (max-width:1000px){
  .about-in{grid-template-columns:1fr}
  .about-fig{order:-1;max-width:420px}
  .quote-in{grid-template-columns:1fr}
  .areas{grid-template-columns:1fr;gap:1.6rem}
  .chips{grid-template-columns:repeat(4,1fr)}
  .step-list{grid-template-columns:repeat(2,1fr)}
  .foot-in{grid-template-columns:1fr 1fr;gap:1.6rem}
  .foot-brand{grid-column:1/-1}
}

@media (max-width:860px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .badges-in{grid-template-columns:repeat(2,1fr);gap:.9rem 1rem}
  .badges li:nth-child(odd){border-left:0}
  .badges li:nth-child(3),.badges li:nth-child(4){padding-top:.9rem;
    border-top:1px solid rgba(0,0,0,.2)}
}

@media (max-width:900px){
  /* Below this the photo is too narrow to keep a subject clear of the text, so
     the copy goes full-width and the overlay leans on the vertical layer. */
  .hero-in>*{max-width:none}
  .hero-bg{object-position:64% 40%}
  .hero-art{background:
    linear-gradient(to bottom, rgba(0,0,0,.80) 0%, rgba(0,0,0,.70) 40%, rgba(0,0,0,.88) 100%),
    radial-gradient(70% 60% at 10% 4%, rgba(120,160,0,.30) 0%, rgba(120,160,0,0) 66%)}
}

@media (max-width:760px){
  .burger{display:block}
  /* visibility:hidden, not just the off-screen transform. A transformed-away
     drawer still has focusable links, so tabbing from the burger walked into
     four invisible off-screen nav items. visibility also guarantees the drawer
     can never contribute to horizontal scroll on a real device.
     The background is fully opaque and carries its own gradient - as a flat
     panel it read as see-through against the page behind it. */
  .nav{position:fixed;inset:0 0 0 auto;width:min(330px,86vw);z-index:65;
    flex-direction:column;align-items:stretch;gap:0;overflow-y:auto;
    background:
      radial-gradient(120% 42% at 100% 0%, rgba(120,160,0,.22), rgba(120,160,0,0) 62%),
      linear-gradient(180deg,#1A1E14 0%,#0C0E09 58%,#000 100%);
    border-left:2px solid var(--lime);
    box-shadow:-18px 0 44px rgba(0,0,0,.6);
    padding:1.25rem 1.15rem 1.6rem;
    transform:translateX(100%);visibility:hidden;
    transition:transform .26s ease,visibility 0s linear .26s}
  .nav.is-open{transform:none;visibility:visible;transition-delay:0s}

  .drawer-open .callbar{display:none}
  .nav-close{display:block}
  .nav-head{display:flex;align-items:center;gap:.6rem;
    padding:.2rem 0 1.05rem;border-bottom:1px solid var(--line)}
  .nav-head .badge{width:44px;height:44px;flex:none}
  .nav-head-txt{display:flex;flex-direction:column;gap:.2rem;line-height:1.1;
    min-width:0}
  .nav-head-txt strong{font-family:var(--dsp);font-weight:700;font-size:.94rem;
    text-transform:uppercase;letter-spacing:.02em;color:var(--white);
    white-space:nowrap}
  .nav-head-txt span{font-size:.6rem;text-transform:uppercase;
    letter-spacing:.1em;color:var(--lime-hi);white-space:nowrap}

  .nav-links{display:flex;flex-direction:column;gap:.15rem;padding:.75rem 0}
  .nav a{padding:.8rem .9rem;font-size:1.08rem;border-radius:10px}
  .nav-links a{border-bottom:1px solid rgba(255,255,255,.06);border-radius:0}
  .nav-links a[aria-current="true"]{color:var(--lime-hi)}

  .nav-foot{display:block;margin-top:auto;padding-top:.95rem;
    border-top:1px solid var(--line)}
  /* Two equal buttons side by side. The old single stacked block put a
     left-aligned phone label above a centred CTA, which read as misaligned. */
  .nav-actions{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
  .nav a.nav-act{display:flex;flex-direction:column;align-items:center;
    justify-content:center;gap:.4rem;text-align:center;line-height:1.1;
    padding:.95rem .6rem;border-radius:12px;
    font-family:var(--dsp);font-weight:600;font-size:.98rem;letter-spacing:.04em;
    text-transform:uppercase;text-decoration:none}
  .nav-act .ico{width:1.35rem;height:1.35rem}
  .nav a.nav-act-call{background:rgba(255,255,255,.06);color:var(--white);
    border:1px solid rgba(159,209,27,.45)}
  .nav a.nav-act-quote{background:var(--lime-hi);color:#000}   /* 11.61:1 */
  /* The drawer carries its own pair of buttons, so the bar's CTA is redundant. */
  .nav a.nav-quote{display:none}
  .nav-note{display:block;margin:.9rem 0 0;text-align:center;font-size:.7rem;
    line-height:1.5;text-transform:uppercase;letter-spacing:.06em;color:var(--mist)}
  /* On mobile the strapline goes and the phone number stays - the number is the
     only thing on that bar worth 42px of a phone screen. (handoff §5) */
  .topbar-cred{display:none}
  .topbar-in{justify-content:center}
  .brand-tag{display:none}
  .site-in{min-height:70px}
  .brand .badge{width:46px;height:46px}
  .brand-name{font-size:1.12rem}
  .band-in{flex-direction:column;align-items:flex-start}
  .callbar{display:flex}
}

@media (max-width:560px){
  :root{--pad:1.15rem}
  .cards{grid-template-columns:1fr}
  .step-list{grid-template-columns:1fr}
  .chips{grid-template-columns:repeat(2,1fr)}
  .badges-in{grid-template-columns:1fr}
  .badges li{justify-content:flex-start;border-left:0 !important}
  .badges li+li{padding-top:.75rem;border-top:1px solid rgba(0,0,0,.2)}
  .quote-form{grid-template-columns:1fr}
  .hero-cta .btn{width:100%}
  .foot-in{grid-template-columns:1fr}
}

/* Touch screens keep :hover styles stuck after a tap, so neutralise every
   transform and shadow shift there. (handoff CSS rule) */
@media (hover:none){
  .card:hover,.btn:hover,.btn-lime:hover,.btn-ghost:hover,.btn-dark:hover{
    transform:none;box-shadow:none}
  .btn-lime:hover{background:var(--lime-hi)}
  .nav a:hover{background:none;color:var(--white)}
  .nav a.nav-quote:hover{background:var(--lime-hi);color:#000}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
}