/* ==========================================================================
   BHELA ECOLOGY — bhela.css
   Brand: Survey / Assess / Advise
   --------------------------------------------------------------------------
   CONTENTS
   01  Tokens (colour, type, space, grid)
   02  Reset & base
   03  Typography system
   04  Layout primitives (wrap, grid, rules, sections)
   05  Micro-metadata (coords, tags, page numbers)
   06  Graphic language (contours, transects, plates)
   07  Navigation (desktop + custom mobile overlay)
   08  Hero
   09  Editorial modules (statement, service index, fieldwork, notes)
   10  Detail pages (service / project / article)
   11  Forms
   12  Buttons & links
   13  Footer
   14  Motion / reveal / reduced-motion
   15  Utilities & placeholder flags
   ========================================================================== */

/* 01 — TOKENS ============================================================= */
:root{
  /* Brand palette — from BHELA Brand Guidelines v1.0 */
  --field:      #2E4A33;   /* Field Green */
  --field-deep: #223829;   /* darker green for depth */
  --sage:       #7A8F72;   /* Sage */
  --stone:      #E8E1D5;   /* Stone */
  --clay:       #A56B4F;   /* Clay */
  --charcoal:   #1B1B1B;   /* Charcoal */
  --paper:      #F4F1E8;   /* Warm off-white */
  --white:      #FFFFFF;

  /* Semantic */
  --ink:        var(--charcoal);
  --ink-soft:   rgba(27,27,27,.62);
  --ink-faint:  rgba(27,27,27,.40);
  --hair:       rgba(27,27,27,.16);
  --hair-soft:  rgba(27,27,27,.09);

  --on-dark:        #EFEDE3;
  --on-dark-soft:   rgba(239,237,227,.66);
  --on-dark-faint:  rgba(239,237,227,.42);
  --hair-dark:      rgba(239,237,227,.20);
  --hair-dark-soft: rgba(239,237,227,.11);

  /* Type */
  --display: "Outfit", "Futura", "Century Gothic", ui-rounded, system-ui, sans-serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  --t-micro: 0.6875rem;  /* 11px metadata */
  --t-small: 0.8125rem;
  --t-body:  1rem;
  --t-lede:  clamp(1.0625rem, 0.95rem + 0.55vw, 1.375rem);

  --d1: clamp(2.75rem, 1.1rem + 8.2vw, 9.25rem);
  --d2: clamp(2.25rem, 1.2rem + 5.0vw, 5.5rem);
  --d3: clamp(1.75rem, 1.2rem + 2.4vw, 3rem);
  --d4: clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem);

  /* Space */
  --gut: clamp(1.25rem, 0.6rem + 2.6vw, 3.5rem);
  --sect: clamp(3.25rem, 2rem + 4.4vw, 6.75rem);
  --sect-sm: clamp(2.5rem, 1.75rem + 2.6vw, 4.25rem);
  --maxw: 1560px;

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur: .6s;

  --nav-h: 68px;
}
@media (min-width: 900px){ :root{ --nav-h: 84px; } }

/* 02 — RESET & BASE ======================================================= */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--t-body);
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
/* Fine paper grain — sits above the ground, below content */
body::before{
  content:"";
  position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:.32; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}
main{ position:relative; z-index:2; }
img,svg,video{ max-width:100%; display:block; }
img{ height:auto; }
a{ color:inherit; }
button,input,select,textarea{ font:inherit; color:inherit; }
::selection{ background:var(--field); color:var(--paper); }

:focus-visible{
  outline:2px solid var(--clay);
  outline-offset:3px;
}
.skip{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--field); color:var(--paper);
  padding:.75rem 1.25rem; font-size:var(--t-micro);
  letter-spacing:.18em; text-transform:uppercase; text-decoration:none;
}
.skip:focus{ left:.75rem; top:.75rem; }

/* 03 — TYPOGRAPHY ========================================================= */
h1,h2,h3,h4,h5{ margin:0; font-weight:600; }

.display{
  font-family:var(--display);
  font-weight:700;
  text-transform:uppercase;
  line-height:.88;
  letter-spacing:-0.018em;
  text-wrap:balance;
}
.d1{ font-size:var(--d1); }
.d2{ font-size:var(--d2); }
.d3{ font-size:var(--d3); line-height:.94; }
.d4{ font-size:var(--d4); line-height:1.02; letter-spacing:-0.01em; }
/* For headlines containing long words (UNDERSTANDING, BIODIVERSITY) — a step
   down so they never collide with the adjacent column in any fallback font. */
.d2-long{ font-size:clamp(1.9rem, 0.9rem + 3.9vw, 4.25rem); line-height:.92; }
/* Interior page headers sit in a 7-column well, so they run a step below the
   homepage hero — long single words (FIELDWORK, INDEPENDENT) must not spill
   into the lede column, in Outfit or in any fallback face. */
.d1--page{ font-size:clamp(2.4rem, 0.9rem + 6vw, 6.5rem); }

.lede{
  font-size:var(--t-lede);
  line-height:1.5;
  letter-spacing:-0.012em;
  max-width:34ch;
  color:var(--ink-soft);
  text-wrap:pretty;
}
.lede--wide{ max-width:52ch; }
.prose{ max-width:64ch; }
.prose p{ margin:0 0 1.15em; }
.prose p:last-child{ margin-bottom:0; }
.prose h3{
  font-family:var(--display); text-transform:uppercase; font-size:var(--d4);
  letter-spacing:-0.005em; line-height:1; margin:2.6em 0 .8em;
}
.prose h3:first-child{ margin-top:0; }
.prose ul{ margin:0 0 1.3em; padding:0; list-style:none; }
.prose ul li{
  position:relative; padding-left:1.6rem; margin-bottom:.6em;
}
.prose ul li::before{
  content:""; position:absolute; left:0; top:.72em;
  width:.7rem; height:1px; background:var(--clay);
}
.prose a{ color:var(--field); text-underline-offset:.25em; text-decoration-thickness:1px; }
.prose strong{ font-weight:600; color:var(--ink); }

/* 04 — LAYOUT ============================================================= */
.wrap{
  width:100%; max-width:var(--maxw);
  margin-inline:auto; padding-inline:var(--gut);
}
.wrap--flush{ padding-inline:0; }
.section{ padding-block:var(--sect); position:relative; }
.section--sm{ padding-block:var(--sect-sm); }
.section--tight-top{ padding-top:var(--sect-sm); }

.band{ position:relative; }
.band--green{ background:var(--field); color:var(--on-dark); }
.band--green .lede{ color:var(--on-dark-soft); }
.band--stone{ background:var(--stone); }
.band--charcoal{ background:var(--charcoal); color:var(--on-dark); }

.grid{
  display:grid; grid-template-columns:repeat(12,1fr);
  gap:var(--gut);
}
/* Spans are declared as grid-column-END so a .l-start-* utility can set the
   start independently without collapsing the span. */
.col-12{ grid-column-start:auto; grid-column-end:span 12; }
@media (min-width:760px){
  .m-4{ grid-column-end:span 4; } .m-5{ grid-column-end:span 5; }
  .m-6{ grid-column-end:span 6; } .m-7{ grid-column-end:span 7; }
  .m-8{ grid-column-end:span 8; }
}
@media (min-width:1080px){
  .l-3{ grid-column-end:span 3; } .l-4{ grid-column-end:span 4; }
  .l-5{ grid-column-end:span 5; } .l-6{ grid-column-end:span 6; }
  .l-7{ grid-column-end:span 7; } .l-8{ grid-column-end:span 8; }
  .l-9{ grid-column-end:span 9; }
  .l-start-2{ grid-column-start:2; } .l-start-5{ grid-column-start:5; }
  .l-start-6{ grid-column-start:6; } .l-start-7{ grid-column-start:7; }
  .l-start-8{ grid-column-start:8; } .l-start-9{ grid-column-start:9; }
  .l-start-10{ grid-column-start:10; }
}

.rule{ height:1px; background:var(--hair); border:0; margin:0; }
.band--green .rule,.band--charcoal .rule{ background:var(--hair-dark); }
.rule--soft{ background:var(--hair-soft); }

/* 05 — MICRO METADATA ===================================================== */
.meta{
  font-family:var(--sans);
  font-size:var(--t-micro);
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink-faint);
  line-height:1.5;
}
.band--green .meta,.band--charcoal .meta{ color:var(--on-dark-faint); }
.meta--clay{ color:var(--clay); }
.meta--ink{ color:var(--ink-soft); }

.eyebrow{
  display:flex; align-items:baseline; gap:.9rem;
  margin-bottom:clamp(1.5rem,1rem+1.6vw,2.75rem);
  padding-bottom:.85rem;
  border-bottom:1px solid var(--hair);
}
.band--green .eyebrow,.band--charcoal .eyebrow{ border-color:var(--hair-dark); }
.eyebrow__num{ font-family:var(--display); font-weight:700; letter-spacing:.02em; }

.coords{
  font-family:var(--sans); font-size:var(--t-micro);
  letter-spacing:.14em; font-variant-numeric:tabular-nums;
  text-transform:uppercase;
}
.pagenum{
  font-family:var(--display); font-weight:700;
  font-size:clamp(3.5rem,2rem+7vw,9rem);
  line-height:.8; color:var(--hair);
  letter-spacing:-0.03em;
}
.band--green .pagenum{ color:rgba(239,237,227,.14); }

.tagrow{ display:flex; flex-wrap:wrap; gap:.4rem .5rem; }
.tag{
  font-size:var(--t-micro); letter-spacing:.16em; text-transform:uppercase;
  padding:.36rem .6rem .3rem; border:1px solid var(--hair);
  color:var(--ink-soft); white-space:nowrap;
}
.band--green .tag{ border-color:var(--hair-dark); color:var(--on-dark-soft); }
.tag--clay{ border-color:rgba(165,107,79,.5); color:var(--clay); }

/* 06 — GRAPHIC LANGUAGE =================================================== */
.plate{
  position:relative; overflow:hidden;
  background:var(--stone);
}
.plate img{ width:100%; height:100%; object-fit:cover; }
.plate--16x9{ aspect-ratio:16/9; }
.plate--4x3{ aspect-ratio:4/3; }
.plate--3x4{ aspect-ratio:3/4; }
.plate--1x1{ aspect-ratio:1/1; }
.plate--2x3{ aspect-ratio:2/3; }
.plate--tall{ aspect-ratio:3/4; }
@media (min-width:900px){ .plate--tall{ aspect-ratio:5/7; } }

.plate__cap{
  position:absolute; left:0; bottom:0; z-index:3;
  padding:.7rem .85rem;
  background:rgba(46,74,51,.86);
  color:var(--on-dark);
  font-size:var(--t-micro); letter-spacing:.16em; text-transform:uppercase;
  backdrop-filter:blur(2px);
}
.plate__grain{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  opacity:.5; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='.5'/%3E%3C/svg%3E");
}
/* Figure + caption pairing */
.figure{ margin:0; }
.figure figcaption{
  margin-top:.75rem; display:flex; gap:1rem; justify-content:space-between;
  font-size:var(--t-micro); letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-faint); border-top:1px solid var(--hair); padding-top:.6rem;
}
.band--green .figure figcaption{ color:var(--on-dark-faint); border-color:var(--hair-dark); }

/* Contour graphic — drawn on scroll */
.contour{ position:absolute; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
.contour svg{ width:100%; height:100%; }
.contour path{
  fill:none; stroke:currentColor; stroke-width:1; opacity:.16;
  vector-effect:non-scaling-stroke;
}
/* transect ticks */
.transect{ display:flex; align-items:center; gap:.55rem; color:var(--ink-faint); }
.transect__line{ flex:1; height:1px; background:currentColor; opacity:.35; }
.transect__dot{ width:5px; height:5px; border-radius:50%; background:var(--clay); }

/* 07 — NAVIGATION ========================================================= */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  height:var(--nav-h);
  display:flex; align-items:center;
  background:rgba(244,241,232,.90);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--hair-soft);
  transition:background .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease), transform .45s var(--ease);
}
.nav--hidden{ transform:translateY(-102%); }
.nav--onhero{
  background:transparent; border-color:rgba(239,237,227,.18); color:var(--on-dark);
  backdrop-filter:none;
}
.nav__inner{
  width:100%; max-width:var(--maxw); margin-inline:auto;
  padding-inline:var(--gut);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.brand{ display:flex; align-items:center; gap:.65rem; text-decoration:none; }
.brand__mark{ width:30px; height:30px; flex:none; }
.brand__mark rect{ fill:currentColor; }
.brand__type{ line-height:.9; }
.brand__name{
  display:block; font-family:var(--display); font-weight:700;
  font-size:1.06rem; letter-spacing:.01em; text-transform:uppercase;
}
.brand__sub{
  display:block; font-size:.5rem; letter-spacing:.34em;
  text-transform:uppercase; margin-top:.22rem; opacity:.7;
}
.nav__links{ display:none; }
@media (min-width:1000px){
  .nav__links{
    display:flex; align-items:center; gap:clamp(1.4rem,2.2vw,2.6rem);
    list-style:none; margin:0; padding:0;
  }
  .nav__link{
    position:relative; text-decoration:none;
    font-size:var(--t-micro); letter-spacing:.2em; text-transform:uppercase;
    font-weight:500; padding-block:.5rem;
  }
  .nav__link::after{
    content:""; position:absolute; left:0; right:0; bottom:.1rem; height:1px;
    background:currentColor; transform:scaleX(0); transform-origin:left;
    transition:transform .45s var(--ease-out);
  }
  .nav__link:hover::after,.nav__link[aria-current="page"]::after{ transform:scaleX(1); }
  .nav__link[aria-current="page"]{ color:var(--clay); }
  .nav--onhero .nav__link[aria-current="page"]{ color:var(--on-dark); }
}
 /* specificity kept above .btn, which is declared later in this file */
.nav .nav__cta{ display:none; }
@media (min-width:1000px){ .nav .nav__cta{ display:inline-flex; } }

/* Mobile: word-button, no hamburger */
.navtoggle{
  display:inline-flex; align-items:center; gap:.5rem;
  background:none; border:0; cursor:pointer; padding:.6rem 0;
  font-size:var(--t-micro); letter-spacing:.22em; text-transform:uppercase; font-weight:500;
}
.navtoggle__bars{ display:inline-flex; flex-direction:column; gap:3px; }
.navtoggle__bars i{ display:block; width:17px; height:1.5px; background:currentColor; transition:transform .4s var(--ease), opacity .3s; }
.nav--open .navtoggle__bars i:nth-child(1){ transform:translateY(4.5px) rotate(45deg); }
.nav--open .navtoggle__bars i:nth-child(2){ opacity:0; }
.nav--open .navtoggle__bars i:nth-child(3){ transform:translateY(-4.5px) rotate(-45deg); }
@media (min-width:1000px){ .navtoggle{ display:none; } }

.navpanel{
  position:fixed; inset:0; z-index:99;
  background:var(--field); color:var(--on-dark);
  padding:calc(var(--nav-h) + 2rem) var(--gut) 2rem;
  display:flex; flex-direction:column; justify-content:space-between;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .7s var(--ease-out);
  overflow-y:auto;
  visibility:hidden;
}
.navpanel[data-open="true"]{ clip-path:inset(0 0 0 0); visibility:visible; }
.navpanel__list{ list-style:none; margin:0; padding:0; }
.navpanel__list li{ border-bottom:1px solid var(--hair-dark-soft); }
.navpanel__list a{
  display:flex; align-items:baseline; gap:1rem;
  padding:clamp(.7rem,2.2vw,1.1rem) 0; text-decoration:none;
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  font-size:clamp(1.75rem,10vw,3rem); line-height:1;
  opacity:0; transform:translateY(14px);
  transition:opacity .5s var(--ease), transform .5s var(--ease), color .3s;
}
.navpanel[data-open="true"] .navpanel__list a{ opacity:1; transform:none; }
.navpanel__list a:hover{ color:var(--stone); }
.navpanel__list a span{
  font-family:var(--sans); font-size:var(--t-micro); font-weight:500;
  letter-spacing:.18em; color:var(--on-dark-faint);
}
.navpanel__foot{
  display:flex; flex-wrap:wrap; gap:1rem 2rem; justify-content:space-between;
  align-items:flex-end; padding-top:2rem; border-top:1px solid var(--hair-dark-soft);
  margin-top:2rem;
}
body.nav-locked{ overflow:hidden; }

/* 08 — HERO =============================================================== */
/* .meta defaults to ink; inside a hero it sits on a photograph, so it needs
   the light value or it disappears. */
.hero .meta,.hero .coords{ color:var(--on-dark-soft); }
.hero .meta--faint{ color:var(--on-dark-faint); }
.hero{
  position:relative; min-height:100svh; display:flex; align-items:stretch;
  background:var(--field-deep); color:var(--on-dark); overflow:hidden;
  padding-bottom:clamp(2rem,5vh,4.5rem); padding-top:calc(var(--nav-h) + 2rem);
}
.hero--short{ min-height:auto; align-items:flex-end; padding-top:calc(var(--nav-h) + clamp(3.5rem,9vw,7rem)); padding-bottom:clamp(3rem,7vw,6rem); }

/* THE BRAND HERO — the photograph carries the wordmark, full bleed.
   On a landscape screen it fills the viewport and crops from the centre. Below
   a square aspect ratio a centre crop would slice through the wordmark, so the
   image drops to its natural proportions instead and is never cut.
   The foot of the photograph is masked away so it dissolves into the colour of
   the section beneath it rather than stopping at a hard edge. */
.hero--brand{
  position:relative; display:flex; align-items:flex-end;
  height:100svh; min-height:30rem;
  padding:0 0 clamp(3.5rem,18vh,9rem); overflow:hidden;
  background:var(--stone);            /* the colour the image dissolves into —
                                         must match the section that follows */
}
.hero__brandimg{
  position:absolute; inset:0; display:block; z-index:0;
  -webkit-mask-image:linear-gradient(to bottom, #000 79%, rgba(0,0,0,.45) 92%, transparent 100%);
          mask-image:linear-gradient(to bottom, #000 79%, rgba(0,0,0,.45) 92%, transparent 100%);
}
.hero__brandimg img{
  width:100%; height:100%;
  object-fit:cover; object-position:50% 50%;
}
/* Soft scrim under the lockup so the strap and buttons stay legible. It sits
   inside the masked element, so it fades away with the photograph. */
.hero__brandimg::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to bottom, rgba(18,28,20,0) 52%, rgba(18,28,20,.46) 84%, rgba(18,28,20,.18) 100%);
}
.hero__over{
  position:relative; z-index:2; width:100%;
  color:var(--on-dark); text-align:center;
}
.hero__strap{ color:var(--on-dark-soft) !important; }
.hero__cta{ justify-content:center; margin-top:clamp(1rem,2vw,1.5rem); }

/* A short landscape window leaves little room between the lockup and the foot
   of the frame, so the block tucks in closer to the bottom edge. */
@media (max-height:700px){
  .hero--brand{ padding-bottom:clamp(1.75rem,7vh,3rem); }
}

@media (max-aspect-ratio: 1/1){
  .hero--brand{
    height:auto; min-height:0;
    /* The photograph runs under the navigation here too — with the image
       pushed below it, the light nav type would sit on the pale background
       behind and disappear. */
    padding-top:0; padding-bottom:clamp(2rem,5vh,3.5rem);
    display:block;
  }
  .hero__brandimg{ position:relative; inset:auto; }
  .hero__brandimg img{ height:auto; object-fit:contain; }
  /* Stacked rather than overlaid — there is no room to sit text on a portrait
     crop without covering the photograph. */
  .hero__over{ color:var(--ink); margin-top:clamp(1.25rem,4vw,2rem); }
  .hero__strap{ color:var(--ink-faint) !important; }
  .hero__over .btn{ color:var(--field); }
}

.hero__media{ position:absolute; inset:0; z-index:0; }
.hero__media img{ width:100%; height:100%; object-fit:cover; }
.hero__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,32,23,.62) 0%, rgba(20,32,23,.28) 42%, rgba(20,32,23,.80) 100%);
}
.hero__inner{
  position:relative; z-index:2; width:100%;
  display:flex; flex-direction:column; min-height:0;
}
.hero__title{ margin:0; }
.hero__rail{
  position:absolute; z-index:2; top:calc(var(--nav-h) + 1.5rem); right:var(--gut);
  text-align:right; display:none;
}
@media (min-width:760px){ .hero__rail{ display:block; } }
.hero__scroll{
  display:none; position:absolute; left:50%; transform:translateX(-50%);
  bottom:1.4rem; z-index:3; align-items:center; gap:.6rem;
}
@media (min-width:900px){ .hero__scroll{ display:flex; } }
.hero__scroll i{ display:block; width:44px; height:1px; background:currentColor; opacity:.5; animation:railpulse 2.6s var(--ease) infinite; transform-origin:left; }
@keyframes railpulse{ 0%,100%{ transform:scaleX(.3); opacity:.3 } 50%{ transform:scaleX(1); opacity:.75 } }

/* Page header for interior pages */
.phead{ padding-top:calc(var(--nav-h) + clamp(2.5rem,7vw,6rem)); padding-bottom:clamp(2rem,5vw,4rem); }
.phead__top{
  display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; align-items:baseline;
  padding-bottom:1rem; margin-bottom:clamp(1.5rem,4vw,3rem);
  border-bottom:1px solid var(--hair);
}
.band--green .phead__top{ border-color:var(--hair-dark); }

/* 09 — EDITORIAL MODULES ================================================== */
/* Statement block — oversized type as graphic */
.statement{ position:relative; }
.statement .display{ max-width:16ch; }

/* Service index — hairline rows, no cards */
.svc-list{ border-top:1px solid var(--hair); }
.band--green .svc-list{ border-color:var(--hair-dark); }
.svc{
  display:block; text-decoration:none; position:relative;
  border-bottom:1px solid var(--hair);
  padding-block:clamp(1.4rem,3vw,2.4rem);
  transition:padding-left .55s var(--ease-out), background-color .45s var(--ease);
}
.band--green .svc{ border-color:var(--hair-dark); }
.svc__row{ display:grid; grid-template-columns:auto 1fr; gap:.6rem 1.25rem; align-items:baseline; }
@media (min-width:900px){
  .svc__row{ grid-template-columns:5rem minmax(0,1.05fr) minmax(0,1fr) auto; gap:2rem; align-items:center; }
}
.svc__num{ font-family:var(--display); font-weight:700; font-size:var(--t-small); letter-spacing:.06em; color:var(--clay); }
.svc__title{
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  font-size:clamp(1.5rem,1rem+2.1vw,2.6rem); line-height:.95; letter-spacing:-0.012em;
  grid-column:2; transition:transform .55s var(--ease-out);
}
@media (min-width:900px){ .svc__title{ grid-column:auto; } }
.svc__desc{ grid-column:2; color:var(--ink-soft); font-size:var(--t-small); max-width:46ch; }
.band--green .svc__desc{ color:var(--on-dark-soft); }
@media (min-width:900px){ .svc__desc{ grid-column:auto; } }
.svc__go{ grid-column:2; }
@media (min-width:900px){ .svc__go{ grid-column:auto; justify-self:end; } }
.svc__go i{ display:inline-block; transition:transform .5s var(--ease-out); }
@media (hover:hover){
  .svc:hover{ padding-left:clamp(.5rem,1.4vw,1.5rem); }
  .svc:hover .svc__title{ transform:translateX(2px); }
  .svc:hover .svc__go i{ transform:translateX(7px); }
}
.svc[aria-disabled="true"]{ cursor:default; }

/* Floating cursor preview (desktop only) */
.peek{
  position:fixed; top:0; left:0; z-index:90; pointer-events:none;
  width:270px; aspect-ratio:4/5; overflow:hidden;
  opacity:0; transform:translate3d(-50%,-50%,0) scale(.94);
  transition:opacity .35s var(--ease), transform .5s var(--ease-out);
  box-shadow:0 24px 60px rgba(20,32,23,.28);
  display:none;
}
@media (hover:hover) and (min-width:1080px){ .peek{ display:block; } }
.peek[data-on="true"]{ opacity:1; transform:translate3d(-50%,-50%,0) scale(1); }
.peek img{ width:100%; height:100%; object-fit:cover; }

/* Fieldwork index */
.fw{ display:grid; gap:clamp(2.5rem,6vw,5rem); }
@media (min-width:900px){ .fw{ grid-template-columns:repeat(12,1fr); } }
.fw__item{ text-decoration:none; display:block; }
@media (min-width:900px){
  .fw__item{ grid-column:span 7; }
  .fw__item:nth-child(even){ grid-column:6/span 7; margin-top:clamp(1.5rem,4vw,4.5rem); }
}
.fw__media{ overflow:hidden; }
.fw__media img{ transition:transform 1.1s var(--ease-out), filter .8s var(--ease); }
@media (hover:hover){ .fw__item:hover .fw__media img{ transform:scale(1.045); } }
.fw__head{
  display:flex; justify-content:space-between; gap:1rem; align-items:baseline;
  border-bottom:1px solid var(--hair); padding-bottom:.65rem; margin-bottom:.9rem;
}
.band--green .fw__head{ border-color:var(--hair-dark); }
.fw__title{
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  font-size:clamp(1.35rem,1rem+1.5vw,2.1rem); line-height:.98; margin:1rem 0 .55rem;
}

/* Field notes list */
.notes{ border-top:1px solid var(--hair); }
.band--green .notes{ border-color:var(--hair-dark); }
.note{
  display:grid; gap:.4rem 1.5rem; text-decoration:none;
  padding-block:clamp(1.2rem,2.6vw,2rem);
  border-bottom:1px solid var(--hair);
  transition:padding-left .55s var(--ease-out);
}
.band--green .note{ border-color:var(--hair-dark); }
@media (min-width:900px){
  .note{ grid-template-columns:8rem minmax(0,2fr) minmax(0,1.4fr) 7rem; align-items:baseline; }
}
@media (hover:hover){ .note:hover{ padding-left:clamp(.5rem,1.2vw,1.2rem); } }
.note__title{
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  font-size:clamp(1.15rem,.9rem+1vw,1.6rem); line-height:1.02; letter-spacing:-0.008em;
}
.note__ex{ color:var(--ink-soft); font-size:var(--t-small); }
.band--green .note__ex{ color:var(--on-dark-soft); }

/* Process steps 01/02/03 */
.steps{ display:grid; gap:clamp(1.5rem,3vw,2.5rem); counter-reset:s; }
@media (min-width:760px){ .steps{ grid-template-columns:repeat(3,1fr); } }
.step{ border-top:1px solid var(--hair); padding-top:1.1rem; }
.band--green .step{ border-color:var(--hair-dark); }
.step__num{ font-family:var(--display); font-weight:700; font-size:var(--t-small); color:var(--clay); letter-spacing:.08em; }
.step__t{ font-family:var(--display); font-weight:700; text-transform:uppercase; font-size:var(--d4); line-height:1; margin:.5rem 0 .6rem; }
.step p{ margin:0; color:var(--ink-soft); font-size:var(--t-small); }
.band--green .step p{ color:var(--on-dark-soft); }

/* Spec table (project & service metadata) */
.spec{ border-top:1px solid var(--hair); }
.band--green .spec{ border-color:var(--hair-dark); }
.spec__row{
  display:grid; grid-template-columns:1fr; gap:.15rem;
  padding-block:.85rem; border-bottom:1px solid var(--hair-soft);
}
.band--green .spec__row{ border-color:var(--hair-dark-soft); }
@media (min-width:560px){ .spec__row{ grid-template-columns:9rem 1fr; gap:1rem; align-items:baseline; } }
.spec__v{ font-size:var(--t-small); }

/* Quote / pull statement */
.pull{
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  font-size:clamp(1.5rem,1rem+2.4vw,3rem); line-height:.96; letter-spacing:-0.015em;
  max-width:20ch;
}

/* 10 — DETAIL PAGES ======================================================= */
.crumbs{ display:flex; flex-wrap:wrap; gap:.45rem; align-items:center; }
.crumbs a{ text-decoration:none; }
.crumbs a:hover{ color:var(--clay); }

.toc{ position:relative; }
@media (min-width:1080px){ .toc{ position:sticky; top:calc(var(--nav-h) + 2rem); } }
.toc ul{ list-style:none; margin:.9rem 0 0; padding:0; }
.toc li{ border-top:1px solid var(--hair-soft); }
.toc a{ display:block; padding:.55rem 0; text-decoration:none; font-size:var(--t-small); color:var(--ink-soft); }
.toc a:hover{ color:var(--clay); }

.related{ display:grid; gap:1px; background:var(--hair); border-block:1px solid var(--hair); }
@media (min-width:760px){ .related{ grid-template-columns:repeat(3,1fr); } }
.related a{
  background:var(--paper); padding:clamp(1.2rem,2.4vw,2rem);
  text-decoration:none; display:block; transition:background .4s var(--ease);
}
.related a:hover{ background:var(--stone); }
.band--green .related{ background:var(--hair-dark); border-color:var(--hair-dark); }
.band--green .related a{ background:var(--field); }
.band--green .related a:hover{ background:var(--field-deep); }

/* 11 — FORMS ============================================================== */
.form{ display:grid; gap:clamp(1.1rem,2.4vw,1.75rem); }
@media (min-width:700px){ .form{ grid-template-columns:1fr 1fr; } }
.field{ display:flex; flex-direction:column; gap:.5rem; }
.field--full{ grid-column:1/-1; }
.field label{
  font-size:var(--t-micro); letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-faint); font-weight:500;
}
.band--green .field label{ color:var(--on-dark-faint); }
.field .req{ color:var(--clay); }
.input{
  width:100%; background:transparent; border:0; border-bottom:1px solid var(--hair);
  padding:.65rem 0; font-size:1rem; border-radius:0;
  transition:border-color .35s var(--ease);
}
.band--green .input{ border-color:var(--hair-dark); color:var(--on-dark); }
.input:hover{ border-color:var(--ink-faint); }
.input:focus{ outline:0; border-color:var(--clay); }
select.input{ appearance:none; background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%); background-position:calc(100% - 12px) 1.35em,calc(100% - 7px) 1.35em; background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:2rem; }
.band--green select.input option{ color:var(--ink); }
textarea.input{ resize:vertical; min-height:8.5rem; }
.filefield input[type=file]{ font-size:var(--t-small); }
.checkrow{ display:flex; gap:.7rem; align-items:flex-start; font-size:var(--t-small); color:var(--ink-soft); }
.band--green .checkrow{ color:var(--on-dark-soft); }
.checkrow input{ margin-top:.35rem; accent-color:var(--clay); }
.formnote{ font-size:var(--t-small); color:var(--ink-soft); }
.band--green .formnote{ color:var(--on-dark-soft); }

/* 12 — BUTTONS & LINKS ==================================================== */
.btn{
  display:inline-flex; align-items:center; gap:.7rem;
  padding:.95rem 1.5rem; border:1px solid currentColor; border-radius:0;
  font-size:var(--t-micro); letter-spacing:.2em; text-transform:uppercase; font-weight:500;
  text-decoration:none; cursor:pointer; background:transparent;
  position:relative; overflow:hidden; isolation:isolate;
  transition:color .45s var(--ease), border-color .45s var(--ease);
}
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1; background:currentColor;
  transform:scaleY(0); transform-origin:bottom;
  transition:transform .5s var(--ease-out);
}
.btn i{ display:inline-block; transition:transform .45s var(--ease-out); }
@media (hover:hover){
  .btn:hover::before{ transform:scaleY(1); }
  .btn:hover i{ transform:translateX(5px); }
}
.btn--solid{ background:var(--field); border-color:var(--field); color:var(--paper); }
.btn--solid::before{ background:var(--field-deep); transform:scaleY(0); }
@media (hover:hover){ .btn--solid:hover{ color:var(--paper); } }
.btn--light{ color:var(--on-dark); }
@media (hover:hover){ .btn--light:hover{ color:var(--field); } }
.btn--clay{ background:var(--clay); border-color:var(--clay); color:var(--paper); }
.btn--clay::before{ background:#8E5943; }
@media (hover:hover){ .btn--clay:hover{ color:var(--paper); } }
.btn--sm{ padding:.7rem 1.05rem; }

.btnrow{ display:flex; flex-wrap:wrap; gap:.75rem 1rem; }

.tlink{
  display:inline-flex; align-items:baseline; gap:.5rem; text-decoration:none;
  font-size:var(--t-micro); letter-spacing:.2em; text-transform:uppercase; font-weight:500;
  padding-bottom:.25rem; border-bottom:1px solid currentColor;
}
.tlink i{ display:inline-block; transition:transform .45s var(--ease-out); }
@media (hover:hover){ .tlink:hover i{ transform:translateX(5px); } }

/* 13 — FOOTER ============================================================= */
.footer{ background:var(--charcoal); color:var(--on-dark); position:relative; z-index:2; }
.footer a{ text-decoration:none; }
.footer a:hover{ color:var(--stone); }
.footer__grid{ display:grid; gap:clamp(2rem,4vw,3rem); }
@media (min-width:760px){ .footer__grid{ grid-template-columns:1.4fr 1fr 1fr; } }
@media (min-width:1080px){ .footer__grid{ grid-template-columns:1.6fr 1fr 1fr 1fr; } }
.footer__list{ list-style:none; margin:.9rem 0 0; padding:0; display:grid; gap:.5rem; font-size:var(--t-small); }
.footer__wordmark{
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  font-size:clamp(3rem,1rem+11vw,13rem); line-height:.78; letter-spacing:-0.03em;
  color:rgba(239,237,227,.09);
  padding-block:clamp(1.5rem,3vw,3rem) 0;
  user-select:none;
}
.footer__base{
  display:flex; flex-wrap:wrap; gap:.6rem 1.6rem; justify-content:space-between;
  border-top:1px solid var(--hair-dark-soft); padding-block:1.4rem;
}

/* 14 — MOTION ============================================================= */
/* Reveal states apply only when JS is running (html.js is set inline in <head>),
   so with JS disabled every element is simply present and visible. */
.js [data-reveal]{
  opacity:0; transform:translateY(18px);
  transition:opacity .85s var(--ease-out), transform .85s var(--ease-out);
  transition-delay:var(--d,0ms);
}
.js [data-reveal].is-in{ opacity:1; transform:none; }

.js [data-reveal="mask"]{ opacity:1; transform:none; clip-path:inset(0 0 102% 0); transition:clip-path 1s var(--ease-out); transition-delay:var(--d,0ms); }
.js [data-reveal="mask"].is-in{ clip-path:inset(0 0 0 0); }

.js [data-reveal="img"] img{ transform:scale(1.08); transition:transform 1.4s var(--ease-out); }
.js [data-reveal="img"].is-in img{ transform:scale(1); }

/* Safety net: if bhela.js never boots — blocked, 404, or an error — the head
   script's timer adds .js-timeout and every hidden element is shown. The page
   must never be able to lose its content to a script that didn't arrive. */
.js-timeout [data-reveal]{ opacity:1 !important; transform:none !important; clip-path:none !important; }
.js-timeout [data-reveal="img"] img{ transform:none !important; }

[data-parallax]{ will-change:transform; }

.page{ opacity:1; transition:opacity .32s var(--ease); }
.page--leaving{ opacity:0; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .js [data-reveal]{ opacity:1 !important; transform:none !important; clip-path:none !important; }
  .js [data-reveal="img"] img{ transform:none !important; }
  .peek{ display:none !important; }
}

/* 15 — UTILITIES ========================================================== */
.stack > * + *{ margin-top:var(--s,1.25rem); }
.stack--sm{ --s:.6rem; }
.stack--lg{ --s:2rem; }
.mt-1{ margin-top:.5rem } .mt-2{ margin-top:1rem } .mt-3{ margin-top:1.75rem }
.mt-4{ margin-top:2.5rem } .mt-5{ margin-top:clamp(3rem,6vw,5rem) }
.mb-2{ margin-bottom:1rem } .mb-3{ margin-bottom:1.75rem } .mb-4{ margin-bottom:2.5rem }
.tar{ text-align:right } .tac{ text-align:center }
.flexbase{ display:flex; flex-wrap:wrap; gap:.6rem 1.5rem; align-items:baseline; justify-content:space-between; }
.nowrap{ white-space:nowrap }
.sr{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
.hide-sm{ display:none }
@media (min-width:760px){ .hide-sm{ display:revert } }

/* PLACEHOLDER FLAG — content Joshua still needs to supply.
   Marked with a fine clay dotted underline so it is easy to find.
   When all copy is final add class="live" to <body> to switch the flags off. */
.ph{ border-bottom:1px dotted rgba(165,107,79,.6); }
body.live .ph{ border-bottom:0; }
.ph-note{
  display:inline-block; font-size:var(--t-micro); letter-spacing:.16em;
  text-transform:uppercase; color:var(--clay);
  border:1px dashed rgba(165,107,79,.5); padding:.3rem .5rem;
}
body.live .ph-note{ display:none; }

/* Small-screen refinements ------------------------------------------------ */
@media (max-width:560px){
  .transect{ flex-wrap:wrap; }
  .transect__line{ display:none; }
  .hero__rail{ display:none; }
}

/* Survey-season calendar (field notes) ------------------------------------ */
.cal-wrap{ overflow-x:auto; margin:0 0 1rem; border:1px solid var(--hair); }
.cal{ border-collapse:collapse; width:100%; min-width:26rem; font-size:var(--t-small); }
.cal th,.cal td{ border-bottom:1px solid var(--hair-soft); padding:.5rem .35rem; text-align:left; }
.cal thead th{
  font-size:var(--t-micro); letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-faint); font-weight:500; background:var(--stone);
  border-bottom:1px solid var(--hair);
}
.cal__n{ font-weight:500; padding-left:.85rem !important; line-height:1.25; }
.cal__sub{
  display:block; font-weight:400; color:var(--ink-faint);
  font-size:var(--t-micro); letter-spacing:.02em; text-transform:none; margin-top:.2rem;
}
.cal__m{ width:1.45rem; text-align:center !important; padding:.5rem .1rem !important; }
.cal__m abbr{ text-decoration:none; }
.cal__c{ width:1.45rem; padding:.5rem .12rem !important; }
.cal__c::after{ content:""; display:block; height:15px; border-radius:1px; background:var(--hair-soft); }
.cal__c.is-on::after{ background:var(--sage); }
.cal tbody tr:hover .cal__c.is-on::after{ background:var(--field); }
.cal tbody tr:last-child th,.cal tbody tr:last-child td{ border-bottom:0; }
.cal tbody tr:last-child .cal__n{ padding-bottom:.7rem; }

/* Sidebar call-to-action sits full width of its column */
.toc .btn{ width:100%; justify-content:space-between; }

/* Survey-season calendar (field notes) ------------------------------------ */
.cal-wrap{ overflow-x:auto; margin:0 0 1rem; border:1px solid var(--hair); }
.cal{ border-collapse:collapse; width:100%; min-width:26rem; font-size:var(--t-small); }
.cal th,.cal td{ border-bottom:1px solid var(--hair-soft); padding:.5rem .35rem; text-align:left; }
.cal thead th{
  font-size:var(--t-micro); letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-faint); font-weight:500; background:var(--stone);
  border-bottom:1px solid var(--hair);
}
.cal__n{ font-weight:500; padding-left:.85rem !important; line-height:1.25; }
.cal__sub{
  display:block; font-weight:400; color:var(--ink-faint);
  font-size:var(--t-micro); letter-spacing:.02em; text-transform:none; margin-top:.2rem;
}
.cal__m{ width:1.45rem; text-align:center !important; padding:.5rem .1rem !important; }
.cal__m abbr{ text-decoration:none; }
.cal__c{ width:1.45rem; padding:.5rem .12rem !important; }
.cal__c::after{ content:""; display:block; height:15px; border-radius:1px; background:var(--hair-soft); }
.cal__c.is-on::after{ background:var(--sage); }
.cal tbody tr:hover .cal__c.is-on::after{ background:var(--field); }
.cal tbody tr:last-child th,.cal tbody tr:last-child td{ border-bottom:0; }
.cal tbody tr:last-child .cal__n{ padding-bottom:.7rem; }

/* Sidebar call-to-action sits full width of its column */
.toc .btn{ width:100%; justify-content:space-between; }

/* Wildlife layer ----------------------------------------------------------
   One canvas fixed over the whole viewport. Animals live in document
   coordinates and move across the page over the top of the content, rather
   than being penned into reserved boxes. See assets/js/wildlife.js. */
.wild-global{
  position:fixed; inset:0; z-index:50;
  pointer-events:none; user-select:none;
}

/* Survey-season calendar (field notes) ------------------------------------ */
.cal-wrap{ overflow-x:auto; margin:0 0 1rem; border:1px solid var(--hair); }
.cal{ border-collapse:collapse; width:100%; min-width:26rem; font-size:var(--t-small); }
.cal th,.cal td{ border-bottom:1px solid var(--hair-soft); padding:.5rem .35rem; text-align:left; }
.cal thead th{
  font-size:var(--t-micro); letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-faint); font-weight:500; background:var(--stone);
  border-bottom:1px solid var(--hair);
}
.cal__n{ font-weight:500; padding-left:.85rem !important; line-height:1.25; }
.cal__sub{
  display:block; font-weight:400; color:var(--ink-faint);
  font-size:var(--t-micro); letter-spacing:.02em; text-transform:none; margin-top:.2rem;
}
.cal__m{ width:1.45rem; text-align:center !important; padding:.5rem .1rem !important; }
.cal__m abbr{ text-decoration:none; }
.cal__c{ width:1.45rem; padding:.5rem .12rem !important; }
.cal__c::after{ content:""; display:block; height:15px; border-radius:1px; background:var(--hair-soft); }
.cal__c.is-on::after{ background:var(--sage); }
.cal tbody tr:hover .cal__c.is-on::after{ background:var(--field); }
.cal tbody tr:last-child th,.cal tbody tr:last-child td{ border-bottom:0; }
.cal tbody tr:last-child .cal__n{ padding-bottom:.7rem; }

/* Sidebar call-to-action sits full width of its column */
.toc .btn{ width:100%; justify-content:space-between; }

/* Wildlife layer ----------------------------------------------------------
   Animal silhouettes painted on a canvas behind the text of a zone.
   See assets/js/wildlife.js. Purely decorative and never interactive. */
.wild{
  position:absolute; inset:0; z-index:1;
  pointer-events:none; user-select:none;
}
/* Keep zone content above the creatures (the hero manages its own stacking,
   and background media / contour art stay below). */
[data-wild]:not(.hero) > *:not(.wild):not(.hero__media):not(.contour){
  position:relative; z-index:2;
}