/* ==========================================================================
   Bicol One — main stylesheet
   Mobile-first. Base styles target phones; min-width queries scale upward.
   Breakpoints: 600px (large phone / tablet) · 900px (tablet) · 1160px (desktop)
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Greens — the spine of the palette */
  --paper:   #ffffff;
  --mist:    #f4faf6;
  --mint:    #e9f7ef;
  --line:    #dcece3;
  --g-100:   #d8f0e3;
  --g-200:   #b3e4cb;
  --g-300:   #86d6ae;
  --g-400:   #5fc994;
  --g-500:   #2fb673;
  --g-600:   #1d9a5f;
  --g-700:   #14794a;
  --forest:  #0b3628;

  /* Blue — used sparingly, as the "live signal" accent */
  --blue:    #1f6feb;
  --blue-d:  #12508f;
  --sky:     #e9f1fe;

  /* Ink */
  --ink:     #0f251d;
  --body:    #4a635b;
  --faint:   #7d928a;

  /* Type */
  --f-disp: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --f-body: 'Instrument Sans', 'Segoe UI', system-ui, sans-serif;

  --t-h1:   clamp(2.45rem, 10vw, 5.25rem);
  --t-h2:   clamp(1.8rem, 5.8vw, 3rem);
  --t-h3:   clamp(1.12rem, 3.6vw, 1.4rem);
  --t-lead: clamp(1rem, 3.3vw, 1.16rem);

  /* Space */
  --gut:    clamp(1.15rem, 5vw, 2.5rem);
  --sec-y:  clamp(4.25rem, 11vw, 8rem);
  --wrap:   1180px;

  /* Surface */
  --r:      18px;
  --r-lg:   26px;
  --sh-1:   0 1px 2px rgba(11, 54, 40, .05), 0 8px 24px -14px rgba(11, 54, 40, .18);
  --sh-2:   0 2px 6px rgba(11, 54, 40, .06), 0 26px 50px -26px rgba(11, 54, 40, .32);

  /* Motion */
  --e:      cubic-bezier(.22, .68, .28, 1);
  --e-out:  cubic-bezier(.16, 1, .3, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
  /* `clip` contains stray decoration without turning the root into a
     nested scroll container the way `hidden` would. */
  overflow-x: clip;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 {
  font-family: var(--f-disp);
  color: var(--ink);
  line-height: 1.08;
  letter-spacing: -.022em;
  margin: 0;
  font-weight: 800;
}
p { margin: 0; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }

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

.skip {
  position: fixed; top: -100px; left: 12px; z-index: 999;
  background: var(--ink); color: #fff; padding: .7rem 1.1rem; border-radius: 10px;
  transition: top .2s var(--e);
}
.skip:focus { top: 12px; }

/* ---------- Shared bits ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }

.eyebrow {
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: .705rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--g-700);
  display: flex;
  align-items: center;
  gap: .6rem;
}
.eyebrow .num {
  font-size: .705rem;
  color: var(--g-500);
  padding-right: .6rem;
  border-right: 1px solid var(--g-200);
}

.pulse { position: relative; width: 8px; height: 8px; flex: 0 0 8px; display: inline-block; }
.pulse i {
  position: absolute; inset: 0; border-radius: 50%;
  background: var(--g-500);
}
.pulse::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: var(--g-500);
  animation: ping 2.4s var(--e-out) infinite;
}
@keyframes ping { 0% { transform: scale(1); opacity: .55; } 70%, 100% { transform: scale(3.2); opacity: 0; } }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--g-600);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 52px;
  padding: 0 1.5rem;
  border: 0; border-radius: 999px;
  font-family: var(--f-disp); font-weight: 700; font-size: .97rem; letter-spacing: -.005em;
  cursor: pointer;
  transition: transform .3s var(--e), box-shadow .3s var(--e), background-color .3s var(--e), color .3s var(--e);
}
.btn__arw { transition: transform .35s var(--e-out); }
.btn:hover .btn__arw { transform: translateX(4px); }

.btn--solid {
  background: var(--btn-bg); color: #fff;
  box-shadow: 0 10px 24px -12px rgba(29, 154, 95, .85);
}
.btn--solid:hover { background: var(--g-700); transform: translateY(-2px); box-shadow: 0 16px 32px -14px rgba(29, 154, 95, .95); }
.btn--solid:active { transform: translateY(0); }

.btn--ghost {
  background: transparent; color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--g-200);
}
.btn--ghost:hover { background: var(--mint); box-shadow: inset 0 0 0 1.5px var(--g-300); transform: translateY(-2px); }

.btn--full { width: 100%; }

/* ==========================================================================
   HEADER
   ========================================================================== */
.hdr {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  border-bottom: 1px solid transparent;
  transition: border-color .35s var(--e), box-shadow .35s var(--e);
}
/* The frosted pane lives on a pseudo-element, NOT on .hdr itself: a
   backdrop-filter makes its element a containing block for `position: fixed`
   descendants, which would trap the mobile drawer inside the header bar.
   Kept opaque enough that the frost stays legible over photography. */
.hdr::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: rgba(255, 255, 255, .9);
  backdrop-filter: saturate(1.4) blur(16px);
  -webkit-backdrop-filter: saturate(1.4) blur(16px);
}
.hdr--s {
  border-bottom-color: var(--line);
  box-shadow: 0 8px 24px -20px rgba(11, 54, 40, .5);
}
.hdr__in {
  max-width: var(--wrap); margin-inline: auto;
  padding: .75rem var(--gut);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.hdr__progress {
  height: 2px; width: 100%;
  background: linear-gradient(90deg, var(--g-500), var(--blue));
  transform: scaleX(var(--p, 0)); transform-origin: 0 50%;
  transition: transform .12s linear;
}

.brand { display: flex; align-items: center; gap: .6rem; min-height: 44px; }
/* Logo is a 266x97 landscape wordmark (2.74:1), so the mark is a wide box
   sized by height — not the square the old placeholder icon used. */
.brand__mark {
  height: 34px; width: auto; flex: 0 0 auto;
  display: grid; place-items: center;
  transition: transform .5s var(--e-out);
}
.brand__mark img { height: 34px; width: auto; max-width: none; }
.brand:hover .brand__mark { transform: translateY(-2px) scale(1.04); }
.brand__txt {
  font-family: var(--f-disp); font-weight: 800; font-size: 1.05rem;
  color: var(--ink); letter-spacing: -.03em; line-height: 1;
  display: flex; flex-direction: column; gap: .18rem;
}
.brand__txt small {
  font-family: var(--f-body); font-weight: 500; font-size: .58rem;
  letter-spacing: .13em; text-transform: uppercase; color: var(--faint);
}

/* Burger */
.burger {
  width: 44px; height: 44px; padding: 0;
  background: none; border: 0; cursor: pointer;
  display: grid; place-content: center; gap: 5px;
}
.burger span {
  display: block; width: 22px; height: 2px; border-radius: 2px;
  background: var(--ink);
  transition: transform .38s var(--e), opacity .2s var(--e), width .38s var(--e);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; width: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
.nav {
  position: fixed; inset: 0 0 0 auto;
  /* Above .hdr__progress, which its scaleX transform lifts into the same
     painting layer. */
  z-index: 2;
  width: min(84vw, 340px);
  padding: 6rem var(--gut) 2rem;
  background: var(--paper);
  border-left: 1px solid var(--line);
  box-shadow: -30px 0 60px -40px rgba(11, 54, 40, .5);
  display: flex; flex-direction: column; gap: .25rem;
  transform: translateX(102%);
  transition: transform .48s var(--e-out);
  overflow-y: auto;
}
.nav--open { transform: translateX(0); }
.nav a {
  font-family: var(--f-disp); font-weight: 700; font-size: 1.08rem;
  color: var(--ink); padding: .85rem 0;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; min-height: 44px;
  transition: color .25s var(--e), padding-left .3s var(--e);
}
.nav a:hover, .nav a.is-active { color: var(--g-600); padding-left: .4rem; }
.nav__cta {
  margin-top: 1.1rem; border: 0 !important;
  background: var(--g-600); color: #fff !important;
  border-radius: 999px; justify-content: center !important;
  padding: .9rem 1.2rem !important;
}
.nav__cta:hover { background: var(--g-700); padding-left: 1.2rem !important; }

.scrim {
  position: fixed; inset: 0; z-index: 99;
  background: rgba(9, 40, 30, .38);
  backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none;
  transition: opacity .4s var(--e);
}
.scrim--on { opacity: 1; pointer-events: auto; }
body.lock { overflow: hidden; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  padding: calc(84px + clamp(2.5rem, 11vw, 5.5rem)) 0 0;
  /* Dark fallback: if the cover photo fails to load, the white hero text still
     has something to sit on. */
  background: var(--forest);
  overflow: hidden;
  isolation: isolate;
}
/* Content row grows to fill; the ridgeline stays pinned at the bottom. */
.hero--photo {
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: center;
  min-height: 640px;
  min-height: min(88svh, 800px);
}

/* As a grid item, `margin-inline: auto` would shrink-wrap this box to its
   content and centre that — pushing the copy off the page's 1180px rail. An
   explicit width keeps it filling the track, so the auto margins centre the
   rail itself and the hero lines up with the header and section headings. */
.hero--photo .hero__in { width: 100%; }

.hero__bg { position: absolute; z-index: -3; inset: 0; }
.hero__bg picture { display: block; height: 100%; }
.hero__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Bias toward the sky — the lower third of the frame is dark foreground. */
  object-position: 50% 42%;
  animation: coverIn 1.6s var(--e-out) both;
}
@keyframes coverIn {
  from { opacity: 0; transform: scale(1.06); }
  to   { opacity: 1; transform: none; }
}

/* Two stacked washes: one pulls the left side deep green so the headline holds
   contrast, one darkens top and bottom for the header and the ridgeline. */
.hero__scrim {
  position: absolute; z-index: -2; inset: 0;
  background:
    linear-gradient(100deg,
      rgba(5, 36, 27, .92) 0%,
      rgba(5, 36, 27, .80) 32%,
      rgba(6, 42, 34, .46) 64%,
      rgba(6, 42, 34, .24) 100%),
    linear-gradient(to bottom,
      rgba(5, 36, 27, .55) 0%,
      rgba(5, 36, 27, .05) 26%,
      rgba(5, 36, 27, .05) 60%,
      rgba(5, 36, 27, .74) 100%);
}

.hero__grid {
  position: absolute; z-index: -1; inset: 0;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, .06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .06) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(120% 78% at 60% 12%, #000 20%, transparent 76%);
  -webkit-mask-image: radial-gradient(120% 78% at 60% 12%, #000 20%, transparent 76%);
}

.hero__in {
  position: relative; z-index: 2;
  max-width: var(--wrap); margin-inline: auto;
  padding: 0 var(--gut) clamp(2.5rem, 9vw, 4rem);
}

/* Staggered load-in */
.hero__eyebrow,
.hero__h1 .ln > *,
.hero__h1 .ln,
.hero__lead,
.hero__cta,
.hero__live { animation: heroUp .95s var(--e-out) backwards; }

.hero__eyebrow      { animation-delay: .05s; margin-bottom: 1.15rem; }
.hero__h1 .ln:nth-child(1) { animation-delay: .14s; }
.hero__h1 .ln:nth-child(2) { animation-delay: .22s; }
.hero__h1 .ln:nth-child(3) { animation-delay: .30s; }
.hero__lead         { animation-delay: .40s; }
.hero__cta          { animation-delay: .48s; }
.hero__live         { animation-delay: .56s; }

@keyframes heroUp {
  from { opacity: 0; transform: translate3d(0, 26px, 0); }
  to   { opacity: 1; transform: none; }
}

.hero__h1 {
  font-size: var(--t-h1);
  font-weight: 800;
  letter-spacing: -.042em;
  line-height: .99;
  margin-bottom: 1.35rem;
}
.hero__h1 .ln { display: block; }
.hero__h1 em {
  font-style: normal;
  background: linear-gradient(96deg, var(--g-600) 0%, var(--g-500) 42%, var(--blue) 108%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

.hero__lead {
  font-size: var(--t-lead);
  max-width: 40ch;
  color: var(--body);
  margin-bottom: 2rem;
}

/* ---------- Hero over the cover photo ---------- */
.hero--photo .hero__eyebrow { color: var(--g-300); }
.hero--photo .hero__h1 {
  color: #fff;
  text-shadow: 0 2px 24px rgba(4, 26, 20, .45);
}
.hero--photo .hero__h1 em {
  /* Light tints of the same green→blue ramp, legible against the photo. */
  background: linear-gradient(96deg, #8fe8bb 0%, #6fdca8 40%, #8cc4ff 108%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.hero--photo .hero__lead {
  color: rgba(255, 255, 255, .84);
  text-shadow: 0 1px 14px rgba(4, 26, 20, .4);
}
.hero--photo .hero__live { color: rgba(255, 255, 255, .74); }
.hero--photo .btn--ghost {
  color: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.hero--photo .btn--ghost:hover {
  background: rgba(255, 255, 255, .14);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .8);
}
.hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 2.1rem; }
.hero__cta .btn { flex: 1 1 auto; min-width: 158px; }

.hero__live {
  display: flex; align-items: center; gap: .65rem;
  font-size: .84rem; font-weight: 500; color: var(--faint);
  letter-spacing: .01em;
}

/* Ridgeline */
.ridge {
  position: relative; z-index: 1;
  width: 100%;
  margin-top: -1px;
  pointer-events: none;
}
.ridge svg { width: 100%; height: auto; overflow: visible; }
.ridge__far  { fill: var(--mint); opacity: .75; }
.ridge__near { fill: var(--mist); }
.ridge__line {
  fill: none; stroke: var(--g-500); stroke-width: 2;
  stroke-linejoin: round; stroke-linecap: round;
  stroke-dasharray: 1800; stroke-dashoffset: 1800;
  animation: draw 2.6s var(--e-out) .35s forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }

.ridge__peak {
  fill: var(--g-500);
  opacity: 0;
  animation: peakIn .7s var(--e-out) 1.85s forwards;
}
@keyframes peakIn { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: none; } }
.ridge__peak { transform-box: view-box; transform-origin: 742px 66px; }

.ridge__arcs circle {
  fill: none; stroke: var(--g-400); stroke-width: 1.4;
  transform-box: view-box; transform-origin: 742px 66px;
  opacity: 0;
  animation: arc 5.6s var(--e-out) infinite;
}
.ridge__arcs circle:nth-child(1) { animation-delay: 2.0s; }
.ridge__arcs circle:nth-child(2) { animation-delay: 3.0s; }
.ridge__arcs circle:nth-child(3) { animation-delay: 4.0s; }
.ridge__arcs circle:nth-child(4) { animation-delay: 5.0s; }
@keyframes arc {
  0%   { transform: scale(.35); opacity: 0; }
  14%  { opacity: .48; }
  60%, 100% { transform: scale(1.18); opacity: 0; }
}

/* ==========================================================================
   STAT BAND
   ========================================================================== */
.band {
  background: var(--mist);
  border-block: 1px solid var(--line);
  padding: clamp(2rem, 7vw, 3.25rem) 0;
}
.band__grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.4rem, 6vw, 2rem) 1rem;
}
.stat { display: flex; flex-direction: column; gap: .3rem; }
.stat__n {
  font-family: var(--f-disp); font-weight: 800;
  font-size: clamp(2rem, 8.5vw, 3.15rem);
  line-height: 1; letter-spacing: -.045em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.stat__l {
  font-size: .8rem; font-weight: 500; color: var(--faint);
  letter-spacing: .045em; text-transform: uppercase;
}

/* ==========================================================================
   SECTION SHELL
   ========================================================================== */
.sec { position: relative; padding: var(--sec-y) 0; }
.sec--mist { background: var(--mist); }
.sec--story { background: var(--paper); }

.sec__head { max-width: 44rem; margin-bottom: clamp(2.25rem, 7vw, 3.5rem); }
.sec__head .eyebrow { margin-bottom: 1rem; }
.sec__h2 { font-size: var(--t-h2); letter-spacing: -.035em; margin-bottom: .9rem; }
.sec__lead { font-size: var(--t-lead); color: var(--body); max-width: 46ch; }

/* Reveal-on-scroll */
.reveal {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition: opacity .8s var(--e-out), transform .8s var(--e-out);
  transition-delay: var(--d, 0ms);
}
.reveal.in { opacity: 1; transform: none; }

/* ==========================================================================
   SERVICE CARDS
   ========================================================================== */
.cards { display: grid; gap: 1rem; }
.card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.5rem 1.35rem 1.6rem;
  overflow: hidden;
  transition: transform .45s var(--e), border-color .45s var(--e), box-shadow .45s var(--e);
}
.card::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(150deg, rgba(47, 182, 115, .09), transparent 55%);
  opacity: 0; transition: opacity .45s var(--e);
}
.card > * { position: relative; }
.card:hover { transform: translateY(-5px); border-color: var(--g-200); box-shadow: var(--sh-2); }
.card:hover::before { opacity: 1; }

.card__ico {
  display: grid; place-items: center;
  width: 46px; height: 46px; margin-bottom: 1.05rem;
  border-radius: 13px;
  background: var(--mint); color: var(--g-600);
  transition: transform .5s var(--e-out), background-color .4s var(--e), color .4s var(--e);
}
.card__ico svg { width: 23px; height: 23px; }
.card:hover .card__ico { transform: translateY(-2px) rotate(-6deg); background: var(--g-600); color: #fff; }

.card h3 { font-size: var(--t-h3); margin-bottom: .5rem; letter-spacing: -.028em; }
.card p { font-size: .935rem; }

/* ---------- Feature (NOC) ---------- */
.feature {
  margin-top: clamp(1.75rem, 6vw, 3rem);
  display: grid; gap: 1.75rem;
  background: linear-gradient(168deg, var(--mint), var(--mist) 62%);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.15rem, 4vw, 1.75rem);
}
.feature__media { position: relative; border-radius: var(--r); overflow: hidden; box-shadow: var(--sh-1); }
.feature__media img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  transition: transform .8s var(--e-out);
}
.feature:hover .feature__media img { transform: scale(1.04); }
.feature__tag {
  position: absolute; top: .7rem; left: .7rem;
  display: flex; align-items: center; gap: .45rem;
  padding: .32rem .7rem .32rem .6rem;
  background: rgba(255, 255, 255, .93);
  backdrop-filter: blur(6px);
  border-radius: 999px;
  font-size: .69rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--g-700);
}
.feature__txt .eyebrow { margin-bottom: .8rem; }
.feature__txt h3 { font-size: clamp(1.3rem, 4.6vw, 1.8rem); letter-spacing: -.032em; margin-bottom: .85rem; }
.feature__txt p { font-size: .96rem; }

.ticks { margin-top: 1.15rem; display: grid; gap: .6rem; }
.ticks li {
  position: relative; padding-left: 1.9rem;
  font-size: .92rem; font-weight: 500; color: var(--ink);
}
.ticks li::before {
  content: ''; position: absolute; left: 0; top: .32em;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--g-500) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat;
}

/* ==========================================================================
   COVERAGE
   ========================================================================== */
.cov { display: grid; gap: 1rem; }
.cov__card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.4rem 1.35rem 1.5rem;
  transition: transform .45s var(--e), box-shadow .45s var(--e), border-color .45s var(--e),
              opacity .8s var(--e-out);
}
.cov__card:hover { transform: translateY(-4px); box-shadow: var(--sh-2); border-color: var(--g-200); }
.cov__n {
  display: block;
  font-family: var(--f-disp); font-weight: 800;
  font-size: clamp(2.4rem, 10vw, 3.4rem); line-height: 1;
  letter-spacing: -.05em; color: var(--g-600);
  font-variant-numeric: tabular-nums;
  margin-bottom: .35rem;
}
.cov__card h3 {
  font-size: 1.12rem; letter-spacing: -.026em;
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  margin-bottom: .3rem;
}
.cov__badge {
  font-family: var(--f-body); font-size: .63rem; font-weight: 600;
  letter-spacing: .11em; text-transform: uppercase;
  color: var(--blue-d); background: var(--sky);
  padding: .22rem .5rem; border-radius: 999px;
}
.cov__t { font-size: .84rem; color: var(--faint); margin-bottom: 1rem; }
.cov__bar { height: 5px; border-radius: 999px; background: var(--g-100); overflow: hidden; }
.cov__bar i {
  display: block; height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--g-500), var(--g-300));
  transition: width 1.4s var(--e-out) .25s;
}
.cov__card.in .cov__bar i { width: var(--w); }

.cov__note {
  margin-top: 1.6rem; font-size: .86rem; color: var(--faint); max-width: 52ch;
}
.cov__note a {
  color: var(--g-700); font-weight: 600;
  box-shadow: inset 0 -1px 0 var(--g-200);
  transition: box-shadow .3s var(--e), color .3s var(--e);
}
.cov__note a:hover { color: var(--blue); box-shadow: inset 0 -2px 0 var(--blue); }

/* ==========================================================================
   PROJECTS
   ========================================================================== */
.proj { display: grid; gap: 1.15rem; }
.proj__card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform .5s var(--e), box-shadow .5s var(--e), border-color .5s var(--e),
              opacity .8s var(--e-out);
}
.proj__card:hover { transform: translateY(-5px); box-shadow: var(--sh-2); border-color: var(--g-200); }
.proj__media { overflow: hidden; background: var(--mint); }
.proj__media img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  transition: transform .9s var(--e-out);
}
.proj__card:hover .proj__media img { transform: scale(1.05); }
.proj__body { padding: 1.4rem 1.35rem 1.6rem; }
.proj__cat {
  display: inline-block; margin-bottom: .7rem;
  font-size: .66rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--g-700); background: var(--mint);
  padding: .3rem .65rem; border-radius: 999px;
}
.proj__card h3 { font-size: clamp(1.2rem, 4.4vw, 1.55rem); letter-spacing: -.03em; margin-bottom: .3rem; }
.proj__loc { font-size: .82rem; color: var(--faint); margin-bottom: .8rem; }
.proj__body p:last-child { font-size: .935rem; }

/* ==========================================================================
   STORY
   ========================================================================== */
.story { max-width: 40rem; display: grid; gap: 1.15rem; }
.story p { font-size: 1.02rem; line-height: 1.78; }
.story__drop { font-size: 1.16rem !important; color: var(--ink); font-weight: 500; }
.story__drop::first-letter {
  float: left; font-family: var(--f-disp); font-weight: 800;
  font-size: 3.4em; line-height: .78; padding: .06em .1em 0 0;
  color: var(--g-600);
}
.quote {
  margin: .75rem 0; padding: 1.35rem 1.4rem;
  border-left: 3px solid var(--g-500);
  background: linear-gradient(100deg, var(--mint), transparent 85%);
  border-radius: 0 var(--r) var(--r) 0;
}
.quote p {
  font-family: var(--f-disp); font-weight: 500;
  font-size: clamp(1.06rem, 3.9vw, 1.32rem) !important;
  line-height: 1.42 !important; letter-spacing: -.022em;
  color: var(--ink);
}
.story__sig {
  margin-top: .5rem; font-weight: 600; color: var(--g-700);
  font-size: .92rem !important; letter-spacing: .02em;
}

.story__fig { margin: .5rem 0; }
.story__fig picture {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-2);
}
.story__fig img { width: 100%; height: auto; }
.story__fig figcaption {
  margin-top: .75rem;
  font-size: .82rem; color: var(--faint); line-height: 1.5;
}

/* ==========================================================================
   COMPANY
   ========================================================================== */
/* ==========================================================================
   COMPANY — profile copy + fiber route map
   ========================================================================== */
.about { display: grid; gap: 1.75rem; }
.about__txt { display: grid; gap: 1.1rem; max-width: 68ch; }
.about__txt p {
  font-size: 1rem; line-height: 1.75;
  text-align: justify;
  /* Justification without hyphenation opens rivers of whitespace in narrow
     columns, so let long words break. Relies on <html lang="en">. */
  -webkit-hyphens: auto;
  hyphens: auto;
}
.about__txt p:first-child::first-line { font-weight: 500; color: var(--ink); }

.lines { margin: 0; }
.lines__frame {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: #fff;
  box-shadow: var(--sh-1);
}
.lines__frame img { width: 100%; height: auto; }
.lines__cap {
  margin-top: .7rem;
  font-size: .82rem; color: var(--faint); line-height: 1.5;
}

/* ==========================================================================
   NETWORK TOPOLOGY
   ========================================================================== */
.topos { display: grid; gap: 1.5rem; }
.topo {
  margin: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: box-shadow .5s var(--e), border-color .5s var(--e), opacity .8s var(--e-out),
              transform .8s var(--e-out);
}
.topo:hover { box-shadow: var(--sh-2); border-color: var(--g-200); }

/* The diagrams are ~1230px wide with small labels. Squeezing one into a 375px
   phone makes the text unreadable, so below the desktop breakpoint the frame
   scrolls sideways and the image holds a legible minimum width. */
.topo__frame {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: #fff;
  padding: 1rem;
  border-bottom: 1px solid var(--line);
  scrollbar-width: thin;
}
.topo__frame img { min-width: 660px; width: 100%; height: auto; }
.topo__cap { padding: 1.1rem 1.35rem 1.3rem; }
.topo__cap h3 { font-size: clamp(1.05rem, 3.8vw, 1.25rem); letter-spacing: -.026em; margin-bottom: .35rem; }
.topo__cap p { font-size: .88rem; color: var(--body); }

/* ==========================================================================
   HISTORY & MILESTONES
   ========================================================================== */
.hist { display: grid; gap: 2.25rem; }

.tl { display: grid; gap: 0; }
.tl__item {
  position: relative;
  padding: 0 0 2rem 1.6rem;
  /* The rule is drawn on the item, not a shared pseudo-column, so the last
     entry can stop it cleanly instead of trailing into empty space. */
  border-left: 2px solid var(--g-100);
}
.tl__item:last-child { border-left-color: transparent; padding-bottom: 0; }
.tl__item::before {
  content: '';
  position: absolute; left: -7px; top: .55rem;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--g-500);
  /* Ring masks the connecting rule behind the dot — matches the white section bg. */
  box-shadow: 0 0 0 4px var(--paper);
}
.tl__item:last-child::before {
  background: var(--paper);
  border: 2px solid var(--g-500);
}

.tl__yr {
  font-family: var(--f-disp); font-weight: 800;
  font-size: clamp(1.5rem, 6vw, 2rem); line-height: 1;
  letter-spacing: -.04em; color: var(--ink);
  margin-bottom: .8rem;
}
.tl__yr span { font-weight: 500; color: var(--faint); letter-spacing: -.02em; }

.tl__body { display: grid; gap: .7rem; }
.tl__body p { font-size: .95rem; line-height: 1.7; }
.tl__body strong { color: var(--ink); font-weight: 600; }

/* Award */
.award {
  margin: 0;
  display: grid; gap: 1.25rem;
  align-content: start;
  padding: 1.35rem;
  background: linear-gradient(165deg, var(--mint), var(--mist) 70%);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.award__media { display: grid; place-items: center; }
.award__media img {
  width: auto; max-width: min(100%, 260px); height: auto;
  border-radius: 10px;
  filter: drop-shadow(0 18px 30px rgba(11, 54, 40, .22));
  transition: transform .6s var(--e-out);
}
.award:hover .award__media img { transform: translateY(-4px) scale(1.02); }
.award__eyebrow {
  font-family: var(--f-disp); font-weight: 700; font-size: .68rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--g-700);
  margin-bottom: .5rem;
}
.award__cap h3 { font-size: 1.05rem; letter-spacing: -.026em; margin-bottom: .5rem; }
.award__cap p { font-size: .86rem; line-height: 1.6; }

/* ==========================================================================
   WORKING TEAM
   ========================================================================== */
.crews { display: grid; gap: 1.5rem; }
.crew {
  margin: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform .5s var(--e), box-shadow .5s var(--e), border-color .5s var(--e),
              opacity .8s var(--e-out);
}
.crew:hover { transform: translateY(-5px); box-shadow: var(--sh-2); border-color: var(--g-200); }
.crew__media { overflow: hidden; background: var(--mint); }
/* These are wide panorama group shots (3.05:1 and 2.13:1). Forcing them into a
   shared crop box would cut people out of frame, so they keep their own ratio
   and the cards stack full-width instead of sitting side by side. */
.crew__media img {
  width: 100%; height: auto;
  transition: transform .9s var(--e-out);
}
.crew:hover .crew__media img { transform: scale(1.045); }
.crew__cap { padding: 1.25rem 1.35rem 1.4rem; }
.crew__cap h3 {
  font-size: clamp(1.1rem, 4vw, 1.35rem); letter-spacing: -.028em; margin-bottom: .3rem;
}
.crew__cap p { font-size: .88rem; color: var(--faint); }

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact { display: grid; gap: 1.5rem; }
.contact__info { display: grid; gap: .75rem; align-content: start; }
.ci {
  display: flex; align-items: center; gap: .9rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--paper);
  min-height: 68px;
  transition: transform .4s var(--e), border-color .4s var(--e), box-shadow .4s var(--e);
}
a.ci:hover { transform: translateY(-3px); border-color: var(--g-200); box-shadow: var(--sh-1); }
.ci--static { background: var(--mist); }
.ci__ico {
  display: grid; place-items: center; flex: 0 0 40px;
  width: 40px; height: 40px; border-radius: 11px;
  background: var(--mint); color: var(--g-600);
  transition: background-color .4s var(--e), color .4s var(--e);
}
.ci__ico svg { width: 20px; height: 20px; }
a.ci:hover .ci__ico { background: var(--g-600); color: #fff; }
.ci__t {
  display: flex; flex-direction: column; gap: .12rem;
  font-family: var(--f-disp); font-weight: 700; font-size: .98rem;
  color: var(--ink); letter-spacing: -.02em;
  overflow-wrap: anywhere;
}
.ci__t small {
  font-family: var(--f-body); font-weight: 500; font-size: .68rem;
  letter-spacing: .11em; text-transform: uppercase; color: var(--faint);
}

/* What happens next */
.next {
  margin-top: .5rem;
  padding: 1.35rem 1.35rem 1.45rem;
  border: 1px dashed var(--g-200);
  border-radius: var(--r);
  background: linear-gradient(160deg, var(--mint), transparent 70%);
}
.next__h {
  font-size: .74rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  color: var(--g-700); margin-bottom: 1rem;
}
.next__list { display: grid; gap: .85rem; counter-reset: none; }
.next__list li {
  display: grid; grid-template-columns: 24px 1fr; gap: .75rem; align-items: start;
  font-size: .89rem; line-height: 1.6;
}
.next__list span {
  display: grid; place-items: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--g-600); color: #fff;
  font-family: var(--f-disp); font-weight: 700; font-size: .74rem;
}

/* Form */
.form {
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.25rem, 5vw, 1.9rem);
  display: grid; gap: 1rem;
}
.field { display: grid; gap: .4rem; }
.field label {
  font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--g-700);
}
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 50px;
  padding: .75rem .9rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 1rem;
  transition: border-color .3s var(--e), box-shadow .3s var(--e);
}
.field textarea { min-height: 116px; resize: vertical; line-height: 1.6; }
.field select { appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a635b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .85rem center; background-size: 17px;
  padding-right: 2.4rem;
}
.field input::placeholder, .field textarea::placeholder { color: #a8b9b2; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--g-500);
  box-shadow: 0 0 0 3px rgba(47, 182, 115, .16);
}
.field.bad input, .field.bad textarea { border-color: #d4574a; box-shadow: 0 0 0 3px rgba(212, 87, 74, .12); }
.err { font-size: .78rem; color: #c0483c; }
.form__note { font-size: .78rem; color: var(--faint); text-align: center; }
.form__ok {
  font-size: .88rem; font-weight: 600; color: var(--g-700);
  background: var(--mint); border-radius: 12px; padding: .8rem 1rem; text-align: center;
  animation: heroUp .5s var(--e-out);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.ftr { background: var(--forest); color: rgba(255, 255, 255, .68); padding: clamp(2.75rem, 9vw, 4.5rem) 0 0; }
.ftr__grid { display: grid; gap: 2rem; padding-bottom: clamp(2rem, 7vw, 3rem); }
.ftr__brand .brand__mark--ftr { margin-bottom: .9rem; height: 46px; justify-items: start; }
.ftr__brand .brand__mark--ftr img { height: 46px; }
.ftr__tag { font-family: var(--f-disp); font-weight: 500; font-size: 1.02rem; color: #fff; letter-spacing: -.022em; max-width: 26ch; line-height: 1.35; }
.ftr__col h4 {
  font-size: .72rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  color: var(--g-300); margin-bottom: .9rem;
}
.ftr__col { display: flex; flex-direction: column; gap: .1rem; }
.ftr__col a {
  padding: .42rem 0; font-size: .92rem;
  color: rgba(255, 255, 255, .68);
  overflow-wrap: anywhere;
  transition: color .3s var(--e), transform .3s var(--e);
}
.ftr__col a:hover { color: #fff; transform: translateX(3px); }
.ftr__base {
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding: 1.25rem var(--gut);
  max-width: var(--wrap); margin-inline: auto;
  display: flex; flex-wrap: wrap; gap: .6rem 1rem;
  align-items: center; justify-content: space-between;
  font-size: .8rem; color: rgba(255, 255, 255, .45);
}
.ftr__top { transition: color .3s var(--e); }
.ftr__top:hover { color: var(--g-300); }

/* ==========================================================================
   ≥ 600px — large phone / small tablet
   ========================================================================== */
@media (min-width: 600px) {
  .band__grid { grid-template-columns: repeat(4, 1fr); }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .cov { grid-template-columns: repeat(3, 1fr); }
  .hero__cta .btn { flex: 0 0 auto; }
  .ftr__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   ≥ 900px — tablet / small laptop
   ========================================================================== */
@media (min-width: 900px) {
  html { scroll-padding-top: 96px; }

  /* Desktop nav — drawer becomes an inline bar */
  .burger { display: none; }
  .nav {
    position: static; width: auto; padding: 0;
    background: none; border: 0; box-shadow: none;
    transform: none; overflow: visible;
    flex-direction: row; align-items: center; gap: .1rem;
  }
  .nav a {
    font-family: var(--f-body); font-weight: 500; font-size: .875rem;
    color: var(--body); border: 0; padding: .55rem .78rem;
    border-radius: 999px; position: relative; min-height: 0;
    transition: color .3s var(--e), background-color .3s var(--e);
  }
  .nav a::after {
    content: ''; position: absolute; left: .78rem; right: .78rem; bottom: .28rem;
    height: 1.5px; border-radius: 2px; background: var(--g-500);
    transform: scaleX(0); transform-origin: 0 50%;
    transition: transform .4s var(--e-out);
  }
  .nav a:hover { color: var(--ink); padding-left: .78rem; }
  .nav a:hover::after, .nav a.is-active::after { transform: scaleX(1); }
  .nav a.is-active { color: var(--ink); font-weight: 600; }
  .nav__cta {
    margin: 0 0 0 .6rem; color: #fff !important; font-family: var(--f-disp) !important;
    font-weight: 700 !important; font-size: .875rem !important; padding: .62rem 1.15rem !important;
  }
  .nav__cta::after { display: none; }
  .nav__cta:hover { transform: translateY(-1px); }
  .scrim { display: none; }

  .hero__in { padding-bottom: clamp(3rem, 7vw, 5rem); }
  .hero__lead { max-width: 46ch; font-size: 1.16rem; }

  .cards { grid-template-columns: repeat(4, 1fr); }
  .card { padding: 1.7rem 1.5rem 1.85rem; }

  .feature { grid-template-columns: 1.05fr 1fr; align-items: center; gap: 2.25rem; padding: 2rem; }

  .proj { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
  .proj__card--wide { grid-column: span 2; display: grid; grid-template-columns: 1.1fr 1fr; }
  /* The media fills its grid cell absolutely, so the card's height comes from
     the text column and min-height — never from the photo's intrinsic ratio. */
  .proj__card--wide .proj__media { position: relative; min-height: 400px; }
  .proj__card--wide .proj__media picture { position: absolute; inset: 0; }
  .proj__card--wide .proj__media img { width: 100%; height: 100%; aspect-ratio: auto; }
  .proj__card--wide .proj__body { padding: 2.25rem; align-self: center; }

  /* Timeline runs long, so the award card tracks alongside it. */
  .hist { grid-template-columns: minmax(0, 1fr) 300px; gap: 3rem; align-items: start; }
  .award { position: sticky; top: 108px; }

  .contact { grid-template-columns: 1fr 1.15fr; gap: 2.25rem; align-items: start; }

  .ftr__grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 2.5rem; }
}

/* ==========================================================================
   ≥ 1160px — desktop
   ========================================================================== */
@media (min-width: 1160px) {
  .hero { padding-top: calc(96px + 4.5rem); }
  .hero__lead { max-width: 48ch; }
  .sec__head { margin-bottom: 3.75rem; }
  /* Break the photo out past the 40rem reading column. Only from 1160px up,
     where the wrap is guaranteed wide enough (>=1080px of content) that 52rem
     cannot overflow the gutter. */
  .story__fig { width: 52rem; }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .ridge__line { stroke-dashoffset: 0; }
  .ridge__peak { opacity: 1; }
  .cov__bar i { width: var(--w); }
}

/* ==========================================================================
   Print
   ========================================================================== */
@media print {
  .hdr, .nav, .scrim, .ridge, .hero__bg, .hero__scrim, .hero__grid, .form { display: none !important; }
  .hero { background: #fff !important; }
  .hero--photo .hero__h1, .hero--photo .hero__lead { color: #000 !important; text-shadow: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  body { color: #000; }
}