/* ==========================================================================
   Barco Land Services
   Structure follows Clear Path: near-black ground, full-bleed working
   photography, condensed heavy display type, one high-visibility accent,
   sticky call/text. The accent is Barco's own green rather than borrowed
   safety orange.

   Photography note: every image is a phone frame from a real job, so cards and
   gallery tiles are 3:4 (the native shape - zero crop) and only the hero and
   the full-bleed bands are 16:9. Text over photos is validated per-pixel by
   tools/contrast.js, not by eye; if you swap in a brighter photo, run it.
   ========================================================================== */

@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/barlow-condensed-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/barlow-condensed-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/barlow-condensed-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:800;font-display:swap;src:url('assets/fonts/barlow-condensed-latin-800-normal.woff2') format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:900;font-display:swap;src:url('assets/fonts/barlow-condensed-latin-900-normal.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/barlow-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/barlow-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/barlow-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/barlow-latin-700-normal.woff2') format('woff2')}

:root{
  /* ---- the two logo inks, sampled from assets/logo.png ------------------
     green #689804 (hue 79) is the wordmark "bar" and the leaf
     bark  #704400 (hue 36) is the "co" and the soil droplet
     Their roles SWAP when the page goes white:
        on near-black   green 5.7:1   bark 2.3:1
        on white        green 3.5:1   bark 8.4:1
     So bark carries the small type here and green keeps the large display
     and the fills. Every derived value below holds its source hue and
     saturation and moves only in lightness - run `node tools/palette.js`
     to re-derive and re-prove them. */
  --green:#689804;        /* logo green. 3.5:1 on white -> LARGE TEXT + FILLS ONLY */
  --green-ink:#4F7303;    /* green at body size. 4.5:1 even on --card-2 */
  --green-lift:#9BD81F;   /* green on dark photo tiles. 11.4:1 */
  --bark:#704400;         /* logo bark. 8.4:1 on white - small type, numbers, labels */
  --bark-lift:#AE6A00;    /* same role on dark tiles and in the footer. 4.5:1 */

  /* ---- light page surfaces --------------------------------------------- */
  --paper:#FFFFFF;
  --paper-2:#F7F7F2;      /* alternating band */
  --card:#F2F2EB;         /* flat card fill */
  --card-2:#E9E9DF;       /* deeper fill */
  --ink:#171C10;          /* body + headings. 17.4:1 on white, 14.2:1 on --card-2 */
  --ink-2:#4A5242;        /* secondary paragraphs. 8.1 / 6.7 */
  --ink-3:#5E6656;        /* small labels, captions. 6.0 / 4.9 */
  --rule:rgba(23,28,16,.16);
  --rule-2:rgba(23,28,16,.26);

  /* ---- kept for text and pills that sit ON a photograph ----------------
     The photo tiles stay dark: cards, gallery tiles, the hero and the quote
     band all still carry white type on a dark scrim, and that contrast work
     is already proven. These tokens serve only those, never page chrome. */
  --night:#0B0D08;
  --night-2:#101409;
  --char:#171C10;
  --char-2:#1F2617;
  --bone:#F2F1EA;
  --mute:#A3AC97;
  --mute-2:#77806C;
  --line:rgba(242,241,234,.12);
  --line-2:rgba(242,241,234,.22);
  --cond:'Barlow Condensed','Oswald',system-ui,sans-serif;
  --body:'Barlow',system-ui,-apple-system,'Segoe UI',sans-serif;
  --maxw:1280px;
  --pad:clamp(20px,5vw,64px);
  --head-h:74px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

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

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-weight:400;
  font-size:1.02rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a{color:inherit;text-decoration:none}
img,svg{max-width:100%;display:block}
button{font:inherit;color:inherit}
::selection{background:var(--green);color:var(--night)}
:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:3px}

.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}

.skip{position:absolute;left:-9999px;top:0;z-index:300;background:var(--green);color:var(--night);font-family:var(--cond);font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.8em 1.2em}
.skip:focus{left:12px;top:12px}

/* ---------- dark grounds ----------
   Everything that sits on a photograph keeps the light-on-dark treatment. Page
   text is now dark ink, so these have to RESTATE it: without this block every
   heading over a photo inherits --ink and vanishes. The dark theme had the
   mirror image of this bug in its form cards, so it is worth stating once,
   loudly, in one place rather than patching element by element.

   The accent rule inside a dark ground is the inverse of the page rule:
   GREEN carries it (11.4:1 on the scrim) and BARK cannot. Bark is a 22%-
   lightness ink - lifting it far enough to pass over a photo turns it into a
   pale tan that no longer reads as the logo colour, so bark owns the light
   surfaces and green owns the dark tiles. */
.hero,
.svc:not(.svc--flat),
.gal figcaption,
.quote-wrap,
footer{color:var(--bone)}

.hero .sub,
.quote-wrap .sub{color:#D8DDD0}
.hero .kicker,
.quote-wrap .kicker{color:var(--green-lift)}
.hero h1 em,
.quote-wrap .sec-h em,
.quote-h em{color:var(--green-lift)}

/* ---------- type ---------- */

h1,h2,h3,h4{font-family:var(--cond);font-weight:900;text-transform:uppercase;line-height:.98;letter-spacing:.005em;text-wrap:balance}

.kicker{
  font-family:var(--cond);
  font-weight:700;
  font-size:.82rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--green-ink);   /* 13px, so the display green's 3.5:1 is not enough */
  display:flex;
  align-items:center;
  gap:.85em;
  line-height:1.4;
}
.kicker::before{content:"";width:26px;height:2px;background:var(--green);flex:none}

.sec-h{font-size:clamp(2.1rem,5.4vw,4rem);max-width:18ch}
.sec-h em{font-style:normal;color:var(--green)}
.sub{color:var(--ink-2);font-size:clamp(1rem,1.3vw,1.12rem);line-height:1.62;max-width:56ch}

.sec-head{display:flex;flex-direction:column;gap:1rem;align-items:flex-start}

section{padding:clamp(56px,7.5vw,112px) 0;position:relative}

/* ---------- buttons ---------- */

.btn{
  font-family:var(--cond);
  font-weight:800;
  font-size:1rem;
  letter-spacing:.11em;
  text-transform:uppercase;
  display:inline-flex;
  align-items:center;
  gap:.6em;
  padding:.92em 1.7em;
  border:2px solid var(--green);
  background:var(--green);
  color:var(--night);
  border-radius:999px;
  cursor:pointer;
  white-space:nowrap;
  transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease,box-shadow .18s ease;
}
/* hover DARKENS on a light page - the old lift to --green-2 went toward the
   background and read as the button fading out */
.btn:hover{background:var(--green-ink);border-color:var(--green-ink);color:#fff;transform:translateY(-2px);box-shadow:0 10px 26px rgba(104,152,4,.3)}
.btn .arw{transition:transform .18s ease}
.btn:hover .arw{transform:translateX(3px)}

.btn--ghost{background:transparent;color:var(--ink);border-color:var(--rule-2)}
.btn--ghost:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);box-shadow:none}

.btn--sm{font-size:.86rem;padding:.7em 1.25em}

/* ---------- brand ---------- */

.brand{display:inline-flex;align-items:center;gap:.8rem}
.brand-logo{height:34px;width:auto;flex:none}
.brand-name{
  font-family:var(--cond);font-weight:700;font-size:.72rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink-3);line-height:1.25;max-width:5.5em;
  padding-left:.8rem;border-left:1px solid var(--rule);
}

/* ---------- header ---------- */

header{
  position:sticky;top:0;z-index:70;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule);
}
.head-in{height:var(--head-h);display:flex;align-items:center;justify-content:space-between;gap:20px}
.nav-links{display:flex;align-items:center;gap:1.7rem}
.nav-links a{
  font-family:var(--cond);font-weight:700;font-size:.92rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink);position:relative;padding:5px 0;
}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--green);transition:width .22s ease}
.nav-links a:hover::after,.nav-links a[aria-current="true"]::after{width:100%}
.nav-links a[aria-current="true"]{color:var(--green-ink)}
.nav-cta{display:flex;align-items:center;gap:1.1rem}
.nav-tel{font-family:var(--cond);font-weight:800;font-size:1.02rem;letter-spacing:.05em;white-space:nowrap}
.nav-tel:hover{color:var(--green-ink)}

.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:10px 4px}
.burger span{width:25px;height:2px;background:var(--ink);display:block;transition:.25s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mobile-menu{
  display:none;position:fixed;inset:var(--head-h) 0 auto 0;z-index:65;
  background:var(--paper-2);border-bottom:1px solid var(--rule);
  flex-direction:column;padding:1.4rem var(--pad) 2rem;gap:.1rem;
  transform:translateY(-120%);visibility:hidden;pointer-events:none;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),visibility 0s linear .35s;
  max-height:calc(100dvh - var(--head-h));overflow-y:auto;
}
.mobile-menu.open{transform:translateY(0);visibility:visible;pointer-events:auto;transition:transform .35s cubic-bezier(.2,.8,.2,1),visibility 0s}
.mobile-menu a{font-family:var(--cond);font-weight:800;font-size:1.7rem;text-transform:uppercase;letter-spacing:.03em;padding:.5rem 0;border-bottom:1px solid var(--line)}
.mobile-menu .btn{margin-top:1.2rem;justify-content:center}

/* ---------- hero ---------- */

.hero{
  position:relative;
  min-height:clamp(560px,86vh,860px);
  display:flex;
  align-items:center;
  padding:clamp(56px,9vw,120px) 0 clamp(92px,11vw,150px);
  overflow:hidden;
  isolation:isolate;
}
.hero-media{position:absolute;inset:0;z-index:-2}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:72% 58%}
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:
    /* the copy block's top-left corner: measured at 2.7:1 on the real photo,
       where the placeholder had been dark. An ellipse pooled behind the kicker
       and headline rather than a flat lift, so the right of frame stays open. */
    radial-gradient(120% 90% at 0% 22%,rgba(6,8,4,.72) 0%,rgba(6,8,4,.42) 38%,rgba(6,8,4,0) 68%),
    linear-gradient(90deg,rgba(6,8,4,.93) 0%,rgba(6,8,4,.86) 26%,rgba(6,8,4,.5) 46%,rgba(6,8,4,.12) 70%,rgba(6,8,4,0) 100%),
    linear-gradient(to top,rgba(6,8,4,.9) 0%,rgba(6,8,4,.1) 30%,rgba(6,8,4,0) 55%),
    linear-gradient(to bottom,rgba(6,8,4,.45) 0%,rgba(6,8,4,0) 22%);
}
.hero > .wrap{width:100%}
.hero-in{position:relative;z-index:1;max-width:41rem}
.hero h1{
  font-size:clamp(2.3rem,4.6vw,3.7rem);
  margin:1rem 0 .85rem;
  line-height:1;
  max-width:19ch;
  text-shadow:0 2px 26px rgba(0,0,0,.55);
}
.hero .punch{
  font-family:var(--cond);font-weight:700;
  font-size:clamp(1.05rem,1.7vw,1.35rem);
  letter-spacing:.06em;text-transform:uppercase;
  color:#E4E9DD;margin-bottom:.9rem;
}
.hero .punch em{font-style:normal;color:var(--green)}
.hero h1 em{font-style:normal;color:var(--green)}
.hero .sub{font-size:clamp(1.05rem,1.5vw,1.25rem);color:#D8DDD0;max-width:46ch}
.hero-cta{margin-top:2rem;display:flex;gap:.8rem;flex-wrap:wrap;align-items:center}
.hero-strip{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  border-top:1px solid rgba(123,203,36,.35);
  background:linear-gradient(to top,rgba(11,13,8,.96),rgba(11,13,8,.72));
}
.hero-strip ul{
  display:flex;flex-wrap:wrap;gap:0;list-style:none;
  max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);
}
.hero-strip li{
  flex:1 1 0;min-width:150px;
  padding:1.05rem 1.1rem 1.05rem 0;
  display:flex;align-items:baseline;gap:.7rem;
}
.hero-strip li + li{padding-left:1.4rem;border-left:1px solid var(--line)}
.hero-strip .n{font-family:var(--cond);font-weight:900;font-size:1.55rem;color:var(--green);line-height:1}
.hero-strip .t{font-family:var(--cond);font-weight:600;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);line-height:1.3}

/* ---------- before / after slider ---------- */

.ba{background:var(--paper-2);border-top:1px solid var(--rule)}
.ba-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(26px,3.5vw,42px)}

.ba-stage{
  position:relative;
  aspect-ratio:16/9;
  border:1px solid var(--line-2);
  border-radius:6px;
  overflow:hidden;
  background:var(--char);
  touch-action:pan-y;
  cursor:ew-resize;
  user-select:none;
  box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.ba-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.ba-after{clip-path:inset(0 0 0 var(--split,50%))}
.ba-tag{
  position:absolute;top:14px;z-index:3;
  font-family:var(--cond);font-weight:800;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;
  padding:.4em .85em;border-radius:999px;pointer-events:none;
  display:flex;align-items:center;gap:.5em;
}
.ba-tag--b{left:14px;background:rgba(11,13,8,.82);color:var(--bone);border:1px solid var(--line-2)}
.ba-tag--a{right:14px;background:var(--green);color:var(--night)}
.ba-tag i{width:7px;height:7px;border-radius:50%;background:currentColor;display:block;font-style:normal}

.ba-handle{
  position:absolute;top:0;bottom:0;left:var(--split,50%);z-index:4;
  width:3px;background:var(--green);transform:translateX(-50%);
  box-shadow:0 0 22px rgba(123,203,36,.55);pointer-events:none;
}
.ba-knob{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:46px;height:46px;border-radius:50%;
  background:var(--green);color:var(--night);
  display:grid;place-items:center;
  font-family:var(--cond);font-weight:900;font-size:1.1rem;letter-spacing:-.06em;
  box-shadow:0 6px 24px rgba(0,0,0,.45);
}
.ba-range{position:absolute;inset:0;z-index:5;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.ba-note{margin-top:1rem;font-family:var(--cond);font-weight:600;font-size:.86rem;letter-spacing:.11em;text-transform:uppercase;color:var(--mute-2)}

/* ---------- proof block ----------
   Stands in for the slider until a matched before/after pair exists. The
   source is a 720x960 video frame, so .proof-media is width-capped: it must
   never be asked to render wider than it actually is. */
.proof-grid{
  display:grid;grid-template-columns:minmax(0,0.85fr) minmax(0,1fr);
  gap:clamp(24px,4vw,64px);align-items:center;
}
.proof-media{
  position:relative;max-width:480px;width:100%;
  aspect-ratio:3/4;border:1px solid var(--rule-2);border-radius:6px;overflow:hidden;
  background:var(--card-2);box-shadow:0 24px 56px rgba(23,28,16,.16);
}
.proof-media img{width:100%;height:100%;object-fit:cover;display:block}
/* the two callouts sit over the frame and name what is on each side */
.proof-pin{
  position:absolute;z-index:2;
  font-family:var(--cond);font-weight:800;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.4em .8em;border-radius:999px;display:flex;align-items:center;gap:.5em;white-space:nowrap;
}
.proof-pin i{width:7px;height:7px;border-radius:50%;background:currentColor;display:block;font-style:normal}
/* In this frame the uncleared brush wall is up the RIGHT side and the graded,
   posted corridor runs down the LEFT. The pins have to sit over what they
   name, or they actively mislead. */
.proof-pin--raw{top:14px;right:14px;background:rgba(11,13,8,.86);color:var(--bone);border:1px solid var(--line-2)}
.proof-pin--done{bottom:14px;left:14px;background:var(--green);color:var(--night)}
.proof-copy h3{font-size:clamp(1.5rem,2.8vw,2.1rem);max-width:22ch}
.proof-copy h3 em{font-style:normal;color:var(--green)}
.proof-copy .sub{margin-top:1rem}
.proof-list{list-style:none;margin:1.6rem 0 0;padding:0;border-top:1px solid var(--rule)}
.proof-list li{
  display:flex;gap:1rem;align-items:baseline;
  padding:.75rem 0;border-bottom:1px solid var(--rule);font-size:.97rem;color:var(--ink-2);
}
/* bark, not green: these are structural labels at 12px, which is exactly the
   job the logo's brown does better than its green on a light ground */
.proof-list b{
  font-family:var(--cond);font-weight:800;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--bark);flex:none;min-width:5.5rem;
}
@media (max-width:920px){
  .proof-grid{grid-template-columns:1fr}
  .proof-media{max-width:420px}
}

/* ---------- services ---------- */

.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.7vw,22px);margin-top:clamp(30px,4vw,48px)}
/* 3:4 portrait, because that is what a phone shoots and what the real job
   photos are (3024x4032 exactly). A landscape card would crop ~60% away.
   aspect-ratio gives every card in a row identical height, so the captions
   bottom-align on their own. */
.svc{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  aspect-ratio:3/4;
  border:1px solid var(--rule);border-radius:5px;overflow:hidden;
  padding:clamp(20px,2.2vw,28px);
  background:var(--char);isolation:isolate;
  transition:border-color .25s ease,transform .25s ease;
}
.svc:hover{border-color:rgba(104,152,4,.6);transform:translateY(-4px);box-shadow:0 18px 40px rgba(23,28,16,.14)}
.svc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .6s ease}
.svc:hover img{transform:scale(1.06)}
.svc::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(6,8,4,.94) 6%,rgba(6,8,4,.55) 48%,rgba(6,8,4,.18) 100%)}
/* --green-2 rather than --green: at 13px this needs 4.5:1 and the deeper
   green measured 4.46 against the darkest card's scrim */
/* green, not bark: measured 2.3-3.1:1 in bark-lift against the card scrims,
   which sit around rgb(45-68) rather than true black. See the dark-grounds
   note at the top. */
.svc .n{font-family:var(--cond);font-weight:700;font-size:.82rem;letter-spacing:.18em;color:var(--green-lift);margin-bottom:.4rem}
.svc h3{font-size:clamp(1.35rem,2.3vw,1.75rem)}
/* clamp to two lines so one long blurb doesn't shove its title out of line
   with the rest of the row */
.svc p{color:#CBD2C2;font-size:.97rem;line-height:1.55;margin-top:.55rem;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* a taller scrim than the landscape card needed: on a 3:4 frame the caption
   occupies less of the height, so the gradient has to start higher to stay legible */
.svc--tall::after{background:linear-gradient(to top,
  rgba(6,8,4,.95) 4%,rgba(6,8,4,.86) 22%,rgba(6,8,4,.42) 52%,rgba(6,8,4,.1) 100%)}

/* the only card with no photograph, so it is the only one that takes page
   colours rather than the dark-on-photo treatment */
.svc--flat{background:var(--card);justify-content:center;gap:1.6rem;
  aspect-ratio:auto;min-height:clamp(260px,26vw,330px);border-color:var(--rule-2)}
.svc--flat h3{color:var(--ink)}
.svc--flat p{color:var(--ink-2)}
.svc--flat .n{color:var(--bark)}
.svc--flat ul{margin-top:0}
.svc--flat::after{display:none}
.svc--flat .top{display:flex;flex-direction:column;gap:.4rem}
.svc--flat ul{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1rem}
.svc--flat li{font-family:var(--cond);font-weight:600;font-size:.8rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);border:1px solid var(--rule-2);border-radius:999px;padding:.35em .8em}

/* ---------- split feature ----------
   Currently UNUSED. The #fencing section that used these was removed (Barco has
   one fence clip, so it duplicated the #proof block); the markup is parked in
   docs/fencing-split.html and these rules were kept so restoring it is markup
   only. Delete both together if fencing never comes back as its own section. */

.split{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(26px,4.5vw,64px);align-items:center}
/* portrait to match the fence-line source (a 720x960 video frame); capped so
   it is never asked to render wider than it is */
.split-media{border-radius:6px;overflow:hidden;border:1px solid var(--rule);
  aspect-ratio:3/4;max-width:560px;justify-self:center}
.split-media img{width:100%;height:100%;object-fit:cover}
.split-copy p{color:var(--ink-2);line-height:1.68;max-width:52ch}
.split-copy p + p{margin-top:.9rem}
.split-copy .hi{color:var(--bark);font-weight:600}
.ftypes{list-style:none;margin-top:1.5rem;border-top:1px solid var(--rule)}
.ftypes li{display:flex;align-items:center;gap:14px;padding:.78rem 0;border-bottom:1px solid var(--rule)}
.ftypes .fn{font-family:var(--cond);font-weight:800;font-size:.82rem;color:var(--bark);letter-spacing:.1em;flex:0 0 2rem}
.ftypes .ft{font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:1.06rem}
.ftypes .fd{margin-left:auto;font-size:.86rem;color:var(--ink-3);text-align:right}

/* ---------- stats / why ---------- */

.why{background:var(--paper-2);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:clamp(28px,3.5vw,44px)}
.why-cell{background:var(--paper);padding:clamp(22px,2.6vw,32px)}
.why-cell .n{font-family:var(--cond);font-weight:700;font-size:.8rem;letter-spacing:.18em;color:var(--bark)}
.why-cell h3{font-size:clamp(1.2rem,2vw,1.5rem);margin:.85rem 0 .6rem}
.why-cell p{color:var(--ink-2);font-size:.96rem;line-height:1.58}

/* ---------- gallery ---------- */

.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.2vw,16px);margin-top:clamp(28px,3.5vw,44px)}
/* portrait tiles to match the source material; the feature tile spans two
   columns AND two rows so it stays portrait rather than going letterbox */
.gal figure{position:relative;border-radius:5px;overflow:hidden;border:1px solid var(--rule);aspect-ratio:3/4}
.gal figure:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.gal figure:hover img{transform:scale(1.05)}
.gal figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:1.9rem .95rem .9rem;
  /* Opaque across the whole text band, then a fast fade. The previous version
     was a single .92-to-0 ramp, which put the glyphs at roughly .3 alpha - fine
     over the dark placeholder photos, 1.9:1 over real ones with bright ground. */
  background:linear-gradient(to top,
    rgba(6,8,4,.96) 0%,rgba(6,8,4,.94) 64%,rgba(6,8,4,.46) 86%,rgba(6,8,4,0) 100%);
  font-family:var(--cond);font-weight:700;font-size:.92rem;letter-spacing:.1em;text-transform:uppercase;
}

/* ---------- service area ---------- */

.area-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(28px,4.5vw,64px);align-items:start}
.cities{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:0;border-top:1px solid var(--rule);list-style:none}
.cities li{font-size:.95rem;padding:.62rem .3rem;border-bottom:1px solid var(--rule);color:var(--ink)}
.cities li::before{content:"";display:inline-block;width:5px;height:5px;background:var(--green);margin-right:.65em;vertical-align:middle}
.counties{margin-top:1.6rem}
.counties .cl{font-family:var(--cond);font-weight:700;font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;color:var(--bark);display:block;margin-bottom:.5rem}
.counties p{font-family:var(--cond);font-weight:700;font-size:1.1rem;text-transform:uppercase;letter-spacing:.03em;line-height:1.5}

/* ---------- process ---------- */

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,22px);margin-top:clamp(28px,3.5vw,44px);counter-reset:s}
.step{border:1px solid var(--rule);border-radius:5px;padding:clamp(22px,2.6vw,32px);background:var(--card);position:relative;overflow:hidden}
.step::before{
  counter-increment:s;content:"0" counter(s);
  position:absolute;right:-6px;top:-18px;
  font-family:var(--cond);font-weight:900;font-size:6rem;line-height:1;
  color:rgba(112,68,0,.13);   /* bark ghost numeral - a 10% green vanished on a light card */
}
.step h3{font-size:clamp(1.2rem,2vw,1.5rem);margin-bottom:.55rem}
.step p{color:var(--ink-2);font-size:.97rem;line-height:1.58;position:relative}

/* ---------- faq ---------- */

.faq-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(26px,4.5vw,64px);align-items:start}
.faq-list{border-top:1px solid var(--rule)}
.faq-item{border-bottom:1px solid var(--rule)}
.faq-q{
  width:100%;background:none;border:0;cursor:pointer;text-align:left;
  display:flex;justify-content:space-between;align-items:center;gap:18px;
  padding:1.25rem 0;font-family:var(--cond);font-weight:700;
  font-size:clamp(1.05rem,1.8vw,1.32rem);text-transform:uppercase;letter-spacing:.03em;
}
.faq-q:hover{color:var(--green-ink)}
.faq-q .pm{color:var(--bark);font-size:1.5rem;flex:none;transition:transform .3s ease;line-height:1;font-family:var(--body);font-weight:300}
.faq-item.open .faq-q .pm{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.faq-a p{padding:0 0 1.3rem;color:var(--ink-2);line-height:1.68;max-width:60ch}
.faq-a p + p{padding-top:0}

/* ---------- quote ---------- */

.quote-wrap{position:relative;isolation:isolate;overflow:hidden}
.quote-bg{position:absolute;inset:0;z-index:-2}
.quote-bg img{width:100%;height:100%;object-fit:cover}
.quote-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,8,4,.95) 0%,rgba(6,8,4,.88) 45%,rgba(6,8,4,.7) 100%)}
.quote-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4.5vw,64px);align-items:start}
.quote-h{font-size:clamp(2.3rem,5.6vw,4.4rem);margin:1rem 0 1.1rem}
.quote-h em{font-style:normal;color:var(--green-lift)}
.contact-rows{margin-top:clamp(28px,3.5vw,44px);border-top:1px solid var(--line)}
.crow{display:flex;align-items:baseline;gap:18px;padding:.95rem 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.crow .cl{font-family:var(--cond);font-weight:700;font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);flex:0 0 8rem}
.crow .cv{font-family:var(--cond);font-weight:700;font-size:1.15rem;letter-spacing:.02em}
.crow a.cv:hover{color:var(--green-lift)}
.crow .socials{display:flex;gap:1rem;flex-wrap:wrap}

/* ---------- forms ---------- */

/* The review form sits on the light page and the quote form sits on the dark
   photo band, so the card defines the LIGHT treatment and .quote-wrap overrides
   it below. Without that split one of the two forms is always invisible. */
.form-card{background:var(--card);border:1px solid var(--rule-2);border-radius:6px;padding:clamp(22px,3vw,36px)}
.form-card h3{color:var(--ink)}
.form-card h3{font-size:clamp(1.35rem,2.3vw,1.7rem);margin-bottom:1.3rem}
.frm{display:flex;flex-direction:column;gap:.95rem}
.fld{display:flex;flex-direction:column;gap:.4rem}
.fld-2{display:grid;grid-template-columns:1fr 1fr;gap:.95rem}
.frm label{font-family:var(--cond);font-weight:700;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.frm label .req{color:var(--bark)}
.frm input,.frm textarea,.frm select{
  font-family:var(--body);font-size:1rem;color:var(--ink);
  background-color:var(--paper);border:1px solid var(--rule-2);border-radius:4px;
  padding:.78em .9em;width:100%;transition:border-color .2s,background .2s;appearance:none;
}
.frm select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23704400' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .9em center;background-size:12px 8px;padding-right:2.4em;
}
.frm textarea{resize:vertical;min-height:94px;line-height:1.55}
.frm input:focus,.frm textarea:focus,.frm select:focus{outline:none;border-color:var(--green);background-color:var(--paper)}
.frm input::placeholder,.frm textarea::placeholder{color:var(--ink-3)}
.frm .radio-row{display:flex;flex-direction:column;gap:.45rem}
.frm .radio{display:flex;align-items:flex-start;gap:.6rem;font-family:var(--body);font-size:.95rem;line-height:1.45;color:var(--ink-2);text-transform:none;letter-spacing:0;cursor:pointer}
.frm .radio input{width:auto;appearance:auto;margin-top:.24rem;accent-color:var(--green)}
.frm .btn{justify-content:center;margin-top:.25rem}
.frm-note{font-size:.85rem;color:var(--ink-3);text-align:center;line-height:1.55}
.frm-note a{color:var(--bark)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- the one form that sits on a photograph ----------
   #quote's card is inside .quote-wrap, over the scrimmed slab photo. Everything
   above defines the LIGHT form; this puts the quote form back onto the dark
   ground. Both forms were chalk-on-bone at one point in the dark theme for the
   mirror-image reason, so the split is deliberate and belongs in one place. */
.quote-wrap .form-card{background:rgba(11,13,8,.72);border-color:var(--line-2);backdrop-filter:blur(6px)}
.quote-wrap .form-card h3{color:var(--bone)}
.quote-wrap .frm label{color:var(--mute)}
.quote-wrap .frm label .req{color:var(--green-lift)}   /* bark-lift measured 4.33 on this form; see the dark-grounds note */
/* background-COLOR, not the `background` shorthand: the shorthand resets
   background-repeat/position/size, and the select's chevron then tiled straight
   across the field. */
.quote-wrap .frm input,
.quote-wrap .frm textarea,
.quote-wrap .frm select{color:var(--bone);background-color:rgba(6,8,4,.66);border-color:var(--line-2)}
.quote-wrap .frm select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%239BD81F' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E")}
.quote-wrap .frm input:focus,
.quote-wrap .frm textarea:focus,
.quote-wrap .frm select:focus{border-color:var(--green-lift);background-color:rgba(6,8,4,.8)}
.quote-wrap .frm input::placeholder,
.quote-wrap .frm textarea::placeholder{color:var(--mute-2)}
.quote-wrap .frm .radio{color:#D3D9CB}
.quote-wrap .frm-note{color:var(--mute)}
.quote-wrap .frm-note a{color:var(--green-lift)}
/* the hero's ghost button is also on a photo */
.hero .btn--ghost{color:var(--bone);border-color:var(--line-2)}
.hero .btn--ghost:hover{background:var(--bone);color:var(--night);border-color:var(--bone)}

/* ---------- reviews ---------- */

.rev-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(26px,4.5vw,64px);align-items:start}
.rev-list{display:flex;flex-direction:column;gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:5px;overflow:hidden}
.rev-cell{background:var(--paper);padding:1.2rem 1.35rem}
.rev-cell .cl{font-family:var(--cond);font-weight:700;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--bark);margin-bottom:.4rem}
.rev-cell p{color:var(--ink-2);font-size:.96rem;line-height:1.55}

/* ---------- sticky call / text ---------- */

.dock{
  position:fixed;right:clamp(12px,2vw,22px);bottom:clamp(12px,2vw,22px);z-index:80;
  display:flex;flex-direction:column;gap:.55rem;align-items:flex-end;
}
.dock a{
  display:inline-flex;align-items:center;gap:.55em;
  font-family:var(--cond);font-weight:800;font-size:.95rem;letter-spacing:.11em;text-transform:uppercase;
  padding:.72em 1.15em;border-radius:999px;
  box-shadow:0 8px 24px rgba(23,28,16,.28);
  transition:transform .18s ease,background .18s ease;
}
.dock a:hover{transform:translateY(-2px)}
.dock .d-call{background:var(--green);color:var(--night)}
.dock .d-text{background:var(--char-2);color:var(--bone);border:1px solid var(--line-2)}
.dock svg{width:16px;height:16px;flex:none;fill:currentColor}

/* ---------- footer ---------- */

footer{background:var(--night-2);border-top:1px solid var(--line);padding:clamp(44px,5.5vw,70px) 0 1.6rem}
.foot-top{display:flex;justify-content:space-between;gap:36px;flex-wrap:wrap;align-items:flex-start}
footer .brand-logo{height:50px}
.foot-brand small{display:block;margin-top:.9rem;font-family:var(--cond);font-weight:600;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute-2);line-height:1.8}
.foot-cols{display:flex;gap:clamp(28px,5vw,68px);flex-wrap:wrap}
/* green, not bark: 12px bark-lift measured 4.32:1 on the footer's ground.
   Same rule as the cards - bark owns light surfaces, green owns dark ones. */
.foot-col h4{font-family:var(--cond);font-weight:700;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--green-lift);margin-bottom:.8rem}
.foot-col a,.foot-col p{display:block;font-size:.94rem;color:#CBD2C2;padding:.28rem 0}
.foot-col a:hover{color:var(--green-lift)}
.foot-bottom{margin-top:clamp(34px,4.5vw,56px);padding-top:1.3rem;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:center}
.foot-bottom p,.foot-bottom a{font-family:var(--cond);font-weight:600;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mute-2)}
.foot-bottom a:hover{color:var(--bone)}

/* ---------- reveal ---------- */

.reveal{opacity:1;transform:none}
html.can-reveal .reveal{opacity:0;transform:translateY(22px);transition:opacity .65s cubic-bezier(.2,.7,.2,1),transform .65s cubic-bezier(.2,.7,.2,1)}
html.can-reveal .reveal.in{opacity:1;transform:none}

/* ---------- responsive ---------- */

@media (max-width:1080px){
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .why-grid{grid-template-columns:repeat(2,1fr)}
  .gal{grid-template-columns:repeat(2,1fr)}
  .gal figure:first-child{grid-column:span 2;grid-row:auto;aspect-ratio:4/3}
}

@media (max-width:920px){
  .split,.area-grid,.faq-grid,.quote-grid,.rev-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  /* the stat strip is two rows tall down here, so the hero needs to clear it */
  .hero{min-height:auto;padding-bottom:clamp(170px,40vw,210px)}
  .hero-media img{object-position:60% 62%}
  /* narrow screens: scrim from the bottom rather than the side, or the whole
     frame goes flat and the machine disappears */
  .hero-media::after{
    background:
      linear-gradient(to top,rgba(6,8,4,.96) 26%,rgba(6,8,4,.72) 52%,rgba(6,8,4,.2) 82%,rgba(6,8,4,.05) 100%),
      linear-gradient(to bottom,rgba(6,8,4,.62) 0%,rgba(6,8,4,.1) 30%,rgba(6,8,4,0) 50%);
  }
  .split-media{aspect-ratio:3/4;max-width:420px}
}

@media (max-width:760px){
  :root{--head-h:64px}
  .nav-links,.nav-cta{display:none}
  .burger{display:flex}
  .mobile-menu{display:flex}
  .brand-name{display:none}
  .svc-grid{grid-template-columns:1fr}
  .why-grid{grid-template-columns:1fr}
  .gal{grid-template-columns:1fr}
  .gal figure:first-child{grid-column:auto}
  .fld-2{grid-template-columns:1fr}
  .hero-strip li{flex:1 1 50%;min-width:0;padding:.85rem .8rem .85rem 0}
  .hero-strip li:nth-child(odd){padding-left:0;border-left:0}
  .hero-strip li:nth-child(even){padding-left:1rem;border-left:1px solid var(--line)}
  .crow .cl{flex:1 1 100%}
  .ftypes li{flex-wrap:wrap}
  .ftypes .fd{margin-left:0;flex-basis:100%;text-align:left}
  .dock a span{display:none}
  .dock a{padding:.95em;border-radius:50%}
  .dock svg{width:19px;height:19px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  html.can-reveal .reveal,.reveal{opacity:1!important;transform:none!important}
}