/* ==========================================================================
   BluMint Studio — stylesheet
   Palette and type sampled from the approved hero artwork.
   ========================================================================== */

:root {
  /* Core palette, sampled from BluMint_Original_Reference.png */
  --teal:        #008A9C;   /* hero field, top */
  --teal-mid:    #016473;   /* hero field, foot */
  --teal-deep:   #045260;
  --teal-ink:    #023840;
  --mint:        #B5D8D7;   /* the disc */
  --mint-soft:   #E4F0EF;
  --navy:        #001021;   /* headline */
  --accent:      #006879;   /* "Real impact." italic */
  --cream:       #F6FBF9;
  --paper:       #FFFFFF;
  --line:        #D8E7E5;
  --muted:       #5A757A;

  /* Type */
  --serif: "Playfair Display", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Rhythm */
  --wrap: 1160px;
  --gutter: clamp(20px, 5vw, 48px);
  --section-y: clamp(64px, 9vw, 128px);
  --radius: 4px;
  --header-h: 82px;
}

/* --------------------------------------------------------------- reset -- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--navy);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
[id] { scroll-margin-top: 96px; }   /* anchors clear the sticky header */
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 700; line-height: 1.12; margin: 0 0 0.5em; letter-spacing: -0.015em; }
p { margin: 0 0 1.1em; }
ul { margin: 0 0 1.1em; padding-left: 1.15em; }
li { margin-bottom: 0.4em; }

/* ------------------------------------------------------------- helpers -- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 780px; }
.section { padding-block: var(--section-y); }
.section--tight { padding-top: clamp(32px, 3vw, 48px); }   /* first section under a banner where a card would otherwise straddle the fold */
.eyebrow {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 18px;
}
.eyebrow--light { color: rgba(255,255,255,0.72); }
.rule { width: 44px; height: 2px; background: currentColor; opacity: 0.45; margin: 0 0 26px; border: 0; }
.rule--center { margin-inline: auto; }
.center { text-align: center; }
.lede { font-size: clamp(18px, 2vw, 21px); line-height: 1.6; color: #294450; }
.muted { color: var(--muted); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-size: 15px; font-weight: 600; letter-spacing: 0.01em;
  padding: 15px 30px; border-radius: 999px; border: 1.5px solid transparent;
  cursor: pointer; transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
  text-decoration: none;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn--primary { background: var(--teal-deep); color: #fff; }
.btn--primary:hover { background: var(--teal-ink); color: #fff; }
.btn--light { background: #fff; color: var(--teal-deep); }
.btn--light:hover { background: var(--mint); }
.btn--ghost { border-color: rgba(16,41,58,0.25); color: var(--navy); background: transparent; }
.btn--ghost:hover { border-color: var(--teal-deep); background: rgba(21,126,139,0.06); }
.btn--wa { background: #1FA855; color: #fff; }
.btn--wa:hover { background: #17843F; color: #fff; }
.btn svg { width: 17px; height: 17px; flex: none; }

.arrow-link {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--sans); font-size: 14.5px; font-weight: 600;
  color: var(--teal-deep); text-decoration: none;
}
.arrow-link::after { content: "\00BB"; transition: transform .18s ease; }
.arrow-link:hover { text-decoration: none; color: var(--accent); }
.arrow-link:hover::after { transform: translateX(4px); }

/* ---------------------------------------------------------------- header */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: var(--teal); color: #fff;
  transition: background .3s ease, box-shadow .3s ease;
}
.site-header.is-scrolled { background: var(--teal-deep); box-shadow: 0 6px 26px rgba(6,51,59,0.18); }
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding-block: 18px;
}
.brand { display: block; color: #fff; text-decoration: none; line-height: 1; }
.brand:hover { text-decoration: none; }
.brand__name { font-family: var(--serif); font-size: 30px; font-weight: 700; letter-spacing: -0.02em; display: block; }
.brand__sub { font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: 0.42em; display: block; margin-top: 4px; padding-left: 2px; color: rgba(255,255,255,0.85); }

.nav { display: flex; align-items: center; gap: 30px; }
.nav a {
  color: rgba(255,255,255,0.9); font-family: var(--sans); font-size: 15px; font-weight: 500;
  text-decoration: none; padding-block: 6px; position: relative;
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px;
  background: #fff; transform: scaleX(0); transform-origin: left; transition: transform .22s ease;
}
.nav a:hover { color: #fff; text-decoration: none; }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: #fff; }

.nav a.header-cta { color: var(--teal-deep); padding: 11px 22px; font-size: 14px; }
.nav a.header-cta::after { display: none; }
.nav a.header-cta:hover { color: var(--teal-ink); }

.burger {
  display: none; width: 44px; height: 44px; border: 0; background: transparent;
  cursor: pointer; padding: 10px; margin-right: -10px;
}
.burger span { display: block; height: 2px; background: #fff; margin: 5px 0; transition: transform .25s ease, opacity .2s ease; }
.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); }

@media (max-width: 900px) {
  .burger { display: block; }
  .nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: var(--teal-deep); padding: 0 var(--gutter);
    max-height: 0; overflow: hidden;
    transition: max-height .32s ease, padding .32s ease;
  }
  .nav.is-open { max-height: 480px; padding: 8px var(--gutter) 26px; }
  .nav a { width: 100%; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.12); font-size: 17px; }
  .nav a::after { display: none; }
  .nav .header-cta { margin-top: 18px; border-bottom: 0; width: auto; }
}

/* ------------------------------------------------------------------ hero */
.hero {
  position: relative; overflow: hidden;
  background: var(--teal);
  background-image: linear-gradient(178deg, #018A9E 0%, #008A9C 46%, #04788A 74%, #016473 100%);
  min-height: min(calc(100svh - 80px), 960px);
  display: grid; place-items: center;
  padding-block: clamp(50px, 8vw, 96px);
}

/* --- the four supplied sprigs -----------------------------------------
   Assets are used exactly as delivered: no filter, no blend mode, no added
   shadow, no crop, no non-uniform scaling. Only whole-sprig placement and
   transforms.

   Four nested layers, one transform each, so nothing overwrites anything:
     .hero__sprig  placement (left/top/width)      no transform
       .s-safe     responsive collision offset     set from hero.js
         .s-reveal 3s opening reveal               CSS keyframes
           .s-breeze continuous breeze             CSS keyframes
             .s-point pointer parallax             CSS custom properties
   ------------------------------------------------------------------- */
.hero__leaves { position: absolute; inset: 0; pointer-events: none; z-index: 3; }

.hero__sprig { position: absolute; }
.hero__sprig .s-safe,
.hero__sprig .s-reveal,
.hero__sprig .s-reveal-y,
.hero__sprig .s-breeze,
.hero__sprig .s-flutter,
.hero__sprig .s-point { display: block; }
.hero__sprig img { display: block; width: 100%; height: auto; }

/* layer 1: responsive safety offset, written by hero.js on load and resize */
.s-safe { transform: translate3d(var(--sx, 0px), var(--sy, 0px), 0); }

/* layer 2: the opening reveal. Sprigs start displaced inward over the copy
   and settle outward into their framing positions. Percentages are of the
   sprig's own size, so the gesture scales with the asset. */
/* The pull-out. One smooth glide per axis, never a stutter. Horizontal
   travel and rotation ride on this layer, vertical travel on the layer
   inside it, each with its own easing and its own duration. Because the two
   axes ease differently the sprig arcs through the air instead of sliding
   down a straight line, and because every sprig has its own delay, its own
   pair of durations and its own pair of curves, no two move alike. Every
   curve is monotonic: no stalls, no surges, no overshoot. */
.s-reveal {
  transform: translateX(var(--rx)) rotate(var(--rr));
  transform-origin: var(--pivot);
  will-change: transform;
  animation: revealX var(--rev-x-dur) var(--rev-x-ease) var(--reveal-delay) both;
}
.s-reveal-y {
  transform: translateY(var(--ry));
  transform-origin: var(--pivot);
  will-change: transform;
  animation: revealY var(--rev-y-dur) var(--rev-y-ease) var(--reveal-delay) both;
}
@keyframes revealX { to { transform: translateX(0) rotate(0deg); } }
@keyframes revealY { to { transform: translateY(0); } }

/* Hover flutter. Its own layer, so it never fights the reveal, the breeze or
   the parallax. Amplitude is inside the collision budget by construction. */
.s-flutter { transform-origin: var(--pivot); }
.s-flutter.is-fluttering {
  will-change: transform;
  animation: sprigFlutter 1.55s cubic-bezier(.36,.07,.28,.98) both;
}
@keyframes sprigFlutter {
  0%   { transform: translate(0,0) rotate(0deg); }
  11%  { transform: translate(1.4px, -1.9px) rotate(0.72deg); }
  26%  { transform: translate(-1.9px, 1.2px) rotate(-0.86deg); }
  41%  { transform: translate(1.6px, 1.7px) rotate(0.61deg); }
  57%  { transform: translate(-1.2px, -1.4px) rotate(-0.48deg); }
  72%  { transform: translate(0.9px, 0.8px) rotate(0.31deg); }
  87%  { transform: translate(-0.4px, -0.5px) rotate(-0.14deg); }
  100% { transform: translate(0,0) rotate(0deg); }
}

/* Orientation. Three sprigs render exactly as filed. The upper right has one
   vertical flip so that, like the other three, its base sits at its outer
   corner and its tip points at the disc. hero.js flips its collision
   silhouette and shadow to match. */
.hero__sprig--ur img { transform: scaleY(-1); }

/* Soft shadow cast outward from the centre of the hero, so the foliage reads
   as sitting in front of the field. Offsets and blur are written by hero.js
   from each sprig's measured size. Applied in CSS, never baked into the PNG. */
.hero__sprig img {
  --d: var(--depth, 1);
  --far: calc(1 - var(--d));            /* 0 nearest, 0.45 furthest */
  filter:
    drop-shadow(var(--shx, 0px) var(--shy, 0px) var(--shb, 0px)
                rgba(0, 34, 41, var(--sha, 0.18)))
    saturate(calc(100% - var(--far) * 72%))
    brightness(calc(100% + var(--far) * 20%))
    contrast(calc(100% - var(--far) * 24%))
    blur(0px);
  opacity: calc(1 - var(--far) * 0.28);
}

/* layer 3: the breeze. Four separate keyframe sets with irregular stops so
   the sprigs never read as one synchronised loop. */
.s-breeze {
  transform-origin: var(--pivot);
  will-change: transform;
  animation-duration: var(--breeze-dur);
  animation-timing-function: cubic-bezier(.42,0,.58,1);
  animation-iteration-count: infinite;
  animation-delay: var(--breeze-delay);
  animation-fill-mode: both;
}
.hero__sprig--ul .s-breeze { animation-name: breezeUL; }
.hero__sprig--ur .s-breeze { animation-name: breezeUR; }
.hero__sprig--ll .s-breeze { animation-name: breezeLL; }
.hero__sprig--lr .s-breeze { animation-name: breezeLR; }

@keyframes breezeUL {
  0%   { transform: translate(0px, 0px) rotate(0deg); }
  17%  { transform: translate(-3.1px, 1.8px) rotate(-0.31deg); }
  38%  { transform: translate(-5.4px, -2.6px) rotate(-0.68deg); }
  53%  { transform: translate(-1.2px, -3.9px) rotate(0.16deg); }
  71%  { transform: translate(3.6px, -1.1px) rotate(0.58deg); }
  86%  { transform: translate(1.9px, 2.4px) rotate(0.22deg); }
  100% { transform: translate(0px, 0px) rotate(0deg); }
}
@keyframes breezeUR {
  0%   { transform: translate(0px, 0px) rotate(0deg); }
  13%  { transform: translate(2.4px, 2.9px) rotate(0.24deg); }
  31%  { transform: translate(4.3px, -1.4px) rotate(0.51deg); }
  49%  { transform: translate(1.1px, -5.8px) rotate(-0.12deg); }
  64%  { transform: translate(-2.7px, -3.2px) rotate(-0.44deg); }
  82%  { transform: translate(-3.9px, 2.1px) rotate(-0.62deg); }
  100% { transform: translate(0px, 0px) rotate(0deg); }
}
@keyframes breezeLL {
  0%   { transform: translate(0px, 0px) rotate(0deg); }
  21%  { transform: translate(-4.6px, -2.2px) rotate(-0.47deg); }
  36%  { transform: translate(-6.2px, 1.7px) rotate(-0.84deg); }
  58%  { transform: translate(-1.8px, 4.1px) rotate(-0.19deg); }
  74%  { transform: translate(2.9px, 2.6px) rotate(0.43deg); }
  91%  { transform: translate(1.4px, -1.3px) rotate(0.11deg); }
  100% { transform: translate(0px, 0px) rotate(0deg); }
}
@keyframes breezeLR {
  0%   { transform: translate(0px, 0px) rotate(0deg); }
  15%  { transform: translate(1.7px, 2.2px) rotate(0.18deg); }
  34%  { transform: translate(3.4px, 4.6px) rotate(0.39deg); }
  56%  { transform: translate(0.6px, 2.1px) rotate(-0.09deg); }
  69%  { transform: translate(-2.8px, -1.9px) rotate(-0.35deg); }
  88%  { transform: translate(-1.1px, -3.3px) rotate(-0.14deg); }
  100% { transform: translate(0px, 0px) rotate(0deg); }
}

/* layer 4: pointer parallax. hero.js writes --px/--py once per frame on the
   hero; each sprig scales it by its own depth so the foliage reads as
   sitting at slightly different distances. */
.s-point {
  transform: translate3d(calc(var(--px, 0px) * var(--depth)), calc(var(--py, 0px) * var(--depth)), 0);
  transition: transform .55s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}

/* per-sprig character: pivot near a plausible stem anchor, own reveal
   distance, own breeze period, own parallax depth */
.hero__sprig--ul {
  --pivot: 4% 26%;  --rx: 41%;  --ry: 46%;  --rr: -5.6deg;
  --reveal-delay: 1.50s;
  --rev-x-dur: 3.05s; --rev-x-ease: cubic-bezier(.22,.61,.36,1);
  --rev-y-dur: 3.45s; --rev-y-ease: cubic-bezier(.45,.05,.25,1);
  --breeze-dur: 13.7s; --breeze-delay: 4.95s; --depth: 1;
}
.hero__sprig--ur {
  --pivot: 95% 14%; --rx: -45%; --ry: 41%;  --rr: 4.7deg;
  --reveal-delay: 1.98s;
  --rev-x-dur: 2.70s; --rev-x-ease: cubic-bezier(.16,.84,.44,1);
  --rev-y-dur: 2.40s; --rev-y-ease: cubic-bezier(.55,.06,.32,1);
  --breeze-dur: 11.3s; --breeze-delay: 4.68s;  --depth: .70;
}
.hero__sprig--ll {
  --pivot: 6% 92%;  --rx: 37%;  --ry: -49%; --rr: 4.1deg;
  --reveal-delay: 1.72s;
  --rev-x-dur: 3.55s; --rev-x-ease: cubic-bezier(.39,.575,.565,1);
  --rev-y-dur: 3.15s; --rev-y-ease: cubic-bezier(.19,1,.22,1);
  --breeze-dur: 16.1s; --breeze-delay: 5.27s; --depth: .80;
}
.hero__sprig--lr {
  --pivot: 94% 95%; --rx: -43%; --ry: -44%; --rr: -5.1deg;
  --reveal-delay: 2.20s;
  --rev-x-dur: 2.85s; --rev-x-ease: cubic-bezier(.25,1,.5,1);
  --rev-y-dur: 3.15s; --rev-y-ease: cubic-bezier(.33,.15,.25,1);
  --breeze-dur: 12.4s; --breeze-delay: 5.35s; --depth: .55;
}

/* Phone. Deliberately not mirrored: four different sizes, four different
   depths into the frame, so the corners feel arranged rather than stamped. */
.hero__sprig--ul { --rx: 19.7%; --ry: 92.0%; top: -17.25%; left: -35.63%; width: 88%; }
.hero__sprig--ur { --rx: -65.0%; --ry: 97.0%; top: -26.06%; right: -14.92%; width: 64%; }
.hero__sprig--ll { --rx: 22.7%; --ry: -115.2%; bottom: -9.39%; left: -26.97%; width: 80%; }
.hero__sprig--lr { --rx: -2.2%; --ry: -128.0%; bottom: -12.00%; right: -22.00%; width: 66%; }

/* Desktop. One dominant sprig, one tucked, four different depths. */
@media (min-width: 861px) {
  .hero__sprig--ul { --rx: 79.2%; --ry: 45.4%;  top: -14.77%;    left: -4.45%;   width: 36%; }
  .hero__sprig--ur { --rx: -112.3%; --ry: -14.0%; top: -16.87%; right: -3.93%; width: 30%; }
  .hero__sprig--ll { --rx: 87.6%; --ry: -82.0%; bottom: -15.00%; left: 0.00%;    width: 32%; }
  .hero__sprig--lr { --rx: -115.5%; --ry: -64.7%; bottom: -12%; right: -8%; width: 27%; }
}

@media (min-width: 1600px) {
  .hero__sprig--ul { width: 32%; --rx: 85.1%; --ry: 34.3%; }
  .hero__sprig--ur { width: 22%; --rx: -120.4%; --ry: -0.6%; }
  .hero__sprig--ll { width: 28%; --rx: 98.9%; --ry: -69.5%; }
  .hero__sprig--lr { width: 20%; --rx: -124.2%; --ry: -38.3%; }
}

/* Very wide screens: the sprigs sit further out, so the opening gesture has
   further to travel before it reaches the copy. */
@media (min-width: 2200px) {
  .hero__sprig--ul { --rx: 83.6%; --ry: 5.7%; }
  .hero__sprig--ur { --rx: -118.8%; --ry: -21.5%; }
  .hero__sprig--ll { --rx: 97.7%; --ry: -29.5%; }
  .hero__sprig--lr { --rx: -122.8%; --ry: -8.1%; }
}

/* Very small phones: less room between the copy and the edges, so the
   sprigs come down in size and the motion amplitude comes down with them.
   Readability wins over scale. */
@media (max-width: 360px) {
  .hero__sprig--ul { width: 70%; --rx: 72.0%; --ry: 109.0%; }
  .hero__sprig--ur { width: 54%; --rx: -86.4%; --ry: 79.8%; }
  .hero__sprig--ll { width: 64%; --rx: 69.9%; --ry: -137.5%; }
  .hero__sprig--lr { width: 48%; --rx: -62.7%; --ry: -170.5%; }
  .s-breeze { animation-duration: calc(var(--breeze-dur) * 1.18); }
}

/* Accessibility overrides decoration: no reveal, no breeze, no parallax. */
@media (prefers-reduced-motion: reduce) {
  .s-reveal   { animation: none; transform: none; }
  .s-reveal-y { animation: none; transform: none; }
  .s-breeze  { animation: none; transform: none; }
  .s-flutter { animation: none !important; transform: none; }
  .s-point   { transition: none; transform: none; }
}

.hero__disc {
  position: relative; z-index: 2;
  width: min(93vw, 720px); aspect-ratio: 1;
  background: var(--mint);
  border-radius: 50%;
  display: grid; place-items: center; text-align: center;
  padding: 0;
  box-shadow: 0 46px 110px rgba(0,40,48,0.26);
  container-type: inline-size;
}
.hero__disc > * { width: 80%; }   /* % of the disc, not the viewport */

.hero__eyebrow {
  font-family: var(--sans); font-size: clamp(11px, 2.9vw, 15px); font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--navy); margin: 0 0 16px;
}
.hero__dash { width: 46px; height: 2px; background: var(--navy); opacity: .5; margin: 0 auto 22px; border: 0; }
.hero__headline {
  font-family: var(--serif); font-weight: 700; color: var(--navy);
  font-size: clamp(33px, 8.8vw, 66px); line-height: 1.15; letter-spacing: -0.02em; margin: 0;
}
.hero__headline em { display: block; font-style: italic; color: var(--accent); }

@media (min-width: 861px) {
  /* also capped by height so the four-corner frame always has room */
  .hero__disc { width: min(54vw, 640px, 60svh); }
  .hero__disc > * { width: 78%; }
  .hero__eyebrow { font-size: 13px; letter-spacing: 0.16em; }
  .hero__headline { font-size: clamp(30px, 4vw, 58px); }
}

/* Tie the hero type to the disc rather than the viewport, so the three
   lines hold their shape at every size instead of rewrapping on short
   screens where the disc is height-capped. */
@supports (container-type: inline-size) {
  .hero__eyebrow  { font-size: clamp(10px, 2.35cqi, 15px); }
  .hero__headline { font-size: clamp(26px, 10.1cqi, 62px); }
  @media (min-width: 861px) {
    .hero__eyebrow  { font-size: clamp(10px, 2.1cqi, 14px); }
    .hero__headline { font-size: clamp(26px, 9.9cqi, 60px); }
  }
}

/* -------------------------------------------------------------- sections */
.section--paper { background: var(--paper); }
.section--mint  { background: var(--mint-soft); }
.section--deep  { background: var(--teal-deep); color: #fff; }
.section--deep h1, .section--deep h2, .section--deep h3 { color: #fff; }
.section--deep p { color: rgba(255,255,255,0.82); }

.section-head { max-width: 700px; margin-bottom: 48px; }
.section-head.center { margin-inline: auto; }
.section-head h2 { font-size: clamp(28px, 4vw, 44px); }

/* intro */
.intro { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.intro__portrait {
  aspect-ratio: 4/5; border-radius: 260px 260px 8px 8px; overflow: hidden;
  background: linear-gradient(160deg, var(--teal) 0%, var(--teal-deep) 100%);
  display: grid; place-items: center; color: rgba(255,255,255,0.55);
  font-family: var(--serif); font-size: 20px; text-align: center; padding: 24px;
}
.intro__portrait img { width: 100%; height: 100%; object-fit: cover; }
.intro h2 { font-size: clamp(28px, 4vw, 46px); }
@media (max-width: 860px) { .intro { grid-template-columns: 1fr; } .intro__portrait { max-width: 360px; } }

/* pillars */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
@media (max-width: 980px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 34px 30px 30px; display: flex; flex-direction: column;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(10,79,89,0.12); border-color: #B9D8D6; }
.card h3 { font-size: 24px; margin-bottom: 12px; }
.card p { font-size: 16px; color: #3B565E; flex: 1; }
.card__num {
  font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.16em;
  color: var(--accent); margin-bottom: 16px;
}

/* proof */
.proof__metric {
  font-family: var(--serif); font-size: clamp(40px, 7vw, 78px); line-height: 1;
  color: #fff; margin: 0 0 6px;
}
.proof__quote {
  font-family: var(--serif); font-size: clamp(18px, 2.2vw, 24px); line-height: 1.5;
  font-style: italic; color: #fff; margin: 0 0 22px;
}
.proof__by { font-family: var(--sans); font-size: 14px; letter-spacing: 0.06em; color: rgba(255,255,255,0.72); }
.logo-row { display: flex; flex-wrap: wrap; gap: 14px 34px; align-items: center; justify-content: center; margin-top: 12px; }
.logo-row span {
  font-family: var(--serif); font-size: clamp(18px, 2.4vw, 26px); color: rgba(255,255,255,0.55);
  letter-spacing: 0.04em;
}

/* work cards */
.work-card {
  display: block; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; color: inherit; text-decoration: none;
  transition: transform .22s ease, box-shadow .22s ease;
}
.work-card:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(10,79,89,0.14); text-decoration: none; }
.work-card__thumb {
  aspect-ratio: 4/3; display: grid; place-items: center;
  font-family: var(--serif); font-size: clamp(22px, 3vw, 30px); color: #fff; letter-spacing: 0.01em;
}
.work-card__body { padding: 22px 24px 26px; }
.work-card__body p { font-size: 15.5px; color: #3B565E; margin: 0; }
.work-card__tag {
  display: inline-block; font-family: var(--sans); font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px;
}

/* CTA banner */
.cta-band { background: var(--teal-deep); color: #fff; text-align: center; }
.cta-band h2 { font-size: clamp(30px, 5vw, 52px); color: #fff; margin-bottom: 10px; }
.cta-band p { color: rgba(255,255,255,0.8); font-size: 18px; margin-bottom: 30px; }

/* blog */
.post-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px 26px; display: flex; flex-direction: column;
  transition: transform .22s ease, box-shadow .22s ease;
}
.post-card:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(10,79,89,0.12); }
.post-card h3 { font-size: 21px; line-height: 1.24; margin-bottom: 12px; }
.post-card p { font-size: 15.5px; color: #3B565E; flex: 1; }
.badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--sans); font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--teal-deep); background: var(--mint);
  padding: 7px 14px; border-radius: 999px;
}

/* page hero (sub pages). Short banner, roughly half the screen, headline
   left, one sprig on the right entering from off the edge with its tip aimed
   at the headline. The first section's heading is visible on the first
   screen; what meets the fold is body copy, never a card. */
.page-hero {
  background: var(--teal);
  background-image: radial-gradient(120% 120% at 20% 0%, #1A8A98 0%, #12747F 55%, #0C5E68 100%);
  color: #fff;
  position: relative; overflow: hidden;
  min-height: min(48svh, 540px);
  display: grid; align-content: center;
  padding-block: clamp(40px, 5vw, 72px);
}
.page-hero .wrap { position: relative; z-index: 2; }
.page-hero h1 { color: #fff; font-size: clamp(34px, 6vw, 62px); max-width: 15ch; }
.page-hero p { color: rgba(255,255,255,0.85); max-width: 52ch; font-size: clamp(17px, 2vw, 20px); margin-bottom: 0; }

/* the banner sprig: same layer stack as the hero minus the reveal, so it
   breathes and flutters but does not perform */
.page-hero__sprig {
  position: absolute; z-index: 1; pointer-events: none;
  right: -14%; top: 50%; transform: translateY(-50%);
  width: clamp(360px, 40vw, 720px);
}
.page-hero__sprig .s-breeze { transform-origin: 90% 50%; will-change: transform;
  animation: breezeLR 12.4s cubic-bezier(.42,0,.58,1) infinite both; }
.page-hero__sprig .s-flutter { transform-origin: 90% 50%; }
.page-hero__sprig img { display: block; width: 100%; height: auto;
  filter: drop-shadow(-10px 12px 26px rgba(0,34,41,0.18)); }
/* per-page file orientation, so the base is always off the right edge and
   the tip points left toward the headline. Whole-image transforms only. */
.page-hero__sprig--ul img { transform: scaleX(-1); }
.page-hero__sprig--ur img { transform: none; }
.page-hero__sprig--ll img { transform: scaleX(-1) scaleY(-1); }
.page-hero__sprig--lr img { transform: none; }
.page-hero__sprig--ur { top: 42%; }
.page-hero__sprig--ul { top: 46%; }
.page-hero__sprig--ll { top: 54%; }
@media (max-width: 860px) {
  /* phone: sprig sits below the copy in the bottom right, never under it */
  .page-hero { min-height: 0; padding-block: 52px 150px; }
  .page-hero__sprig { width: 58vw; right: -22%; top: auto; bottom: -26%; transform: none; }
  .page-hero p { max-width: 34ch; }
}
@media (prefers-reduced-motion: reduce) { .page-hero__sprig .s-breeze { animation: none; } }

/* service blocks */
.svc { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(28px, 6vw, 70px); align-items: start; padding-block: clamp(44px, 6vw, 76px); border-top: 1px solid var(--line); }
.svc:first-of-type { border-top: 0; padding-top: 0; }
.svc h2 { font-size: clamp(26px, 3.6vw, 40px); }
.svc__list { list-style: none; padding: 0; margin: 22px 0 0; }
.svc__list li { position: relative; padding-left: 26px; margin-bottom: 10px; font-size: 16px; color: #3B565E; }
.svc__list li::before { content: ""; position: absolute; left: 0; top: 10px; width: 12px; height: 2px; background: var(--accent); }
@media (max-width: 860px) { .svc { grid-template-columns: 1fr; } }

/* process steps */
.step { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 26px; }
.step__n { font-family: var(--serif); font-size: 40px; color: var(--mint); line-height: 1; margin-bottom: 10px; }
.step h3 { font-size: 20px; margin-bottom: 8px; }
.step p { font-size: 15.5px; color: #3B565E; margin: 0; }

/* accordion */
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  width: 100%; background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--serif); font-size: clamp(18px, 2.2vw, 22px); color: var(--navy);
  padding: 24px 44px 24px 0; position: relative;
}
.faq__q::after {
  content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-family: var(--sans); font-size: 26px; font-weight: 300; color: var(--accent); transition: transform .2s ease;
}
.faq__item.is-open .faq__q::after { content: "\2013"; }
.faq__a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.faq__a p { padding-bottom: 22px; margin: 0; color: #3B565E; max-width: 68ch; }

/* case study */
.case { border-top: 1px solid var(--line); padding-block: clamp(44px, 6vw, 76px); }
.case:first-of-type { border-top: 0; padding-top: 0; }
.case__grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(28px, 6vw, 64px); align-items: start; }
.case__thumb { aspect-ratio: 3/2; border-radius: var(--radius); display: grid; place-items: center; color: #fff; font-family: var(--serif); font-size: clamp(24px, 3.4vw, 36px); }
.case__quote { border-left: 2px solid var(--accent); padding-left: 20px; font-family: var(--serif); font-style: italic; font-size: 18px; color: #24424C; margin-top: 22px; }
@media (max-width: 860px) { .case__grid { grid-template-columns: 1fr; } }

/* form */
.form { display: grid; gap: 20px; }
.field { display: grid; gap: 8px; }
.field label { font-family: var(--sans); font-size: 13.5px; font-weight: 600; letter-spacing: 0.04em; color: var(--navy); }
.field input, .field select, .field textarea {
  font-family: var(--sans); font-size: 16px; color: var(--navy);
  padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; width: 100%;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 620px) { .form__row { grid-template-columns: 1fr; } }
.form__note { font-size: 13.5px; color: var(--muted); }

.contact-split { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(32px, 6vw, 72px); align-items: start; }
@media (max-width: 900px) { .contact-split { grid-template-columns: 1fr; } }
.wa-card { background: var(--teal-deep); color: #fff; border-radius: var(--radius); padding: 24px 26px 26px; }
.wa-card h3 { color: #fff; font-size: 24px; margin-bottom: .3em; }
.wa-card p { color: rgba(255,255,255,0.82); font-size: 15.5px; margin-bottom: .6em; }
.wa-card__num { font-family: var(--serif); font-size: 26px; color: #fff; margin: 2px 0 18px; display: block; }

/* prose */
.prose h2 { font-size: clamp(24px, 3.2vw, 34px); margin-top: 1.8em; }
.prose h3 { font-size: 21px; margin-top: 1.6em; }
.prose p, .prose li { font-size: 17px; color: #2C4750; }

/* ---------------------------------------------------------------- footer */
.site-footer { background: var(--teal-ink); color: rgba(255,255,255,0.75); padding-block: clamp(56px, 7vw, 84px) 32px; }
.site-footer h4 {
  font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: #fff; margin-bottom: 18px;
}
.footer-grid { display: grid; grid-template-columns: 1.1fr 1fr 1fr 1.1fr; gap: 40px; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer a { color: rgba(255,255,255,0.75); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-list { list-style: none; padding: 0; margin: 0; }
.footer-list li { margin-bottom: 9px; font-size: 15px; }
.footer-bottom {
  margin-top: 48px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.14);
  display: flex; flex-wrap: wrap; gap: 12px 26px; justify-content: space-between;
  font-size: 13.5px; color: rgba(255,255,255,0.55);
}

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero__disc, .hero__leaf { animation: none; opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}


/* ---- added by tools/optimise.py ---------------------------------------- */

/* 10.1 skip-to-content, first focusable element on every page */
.skip-to-content{position:absolute;left:16px;top:16px;z-index:999;
background:var(--mint-100,#D7EDE6);color:var(--teal-900,#062F38);
padding:12px 24px;border-radius:4px;font-weight:600;text-decoration:none;
transform:translateY(-200%);transition:transform 180ms cubic-bezier(.22,1,.36,1)}
.skip-to-content:focus{transform:none}

/* 6.1 case-study thumbnails are circular. Nothing else is. */
.case-thumb,.case-study__thumb,[class*="case"] [class*="thumb"]{
border-radius:50%;aspect-ratio:1;overflow:hidden}

/* pictures must not break the layouts the img tags were sized for */
picture{display:contents}


/* ---- added by tools/spec-fix.py ---------------------------------------- */

/* 5.4 Alternate grounds so the eye resets. The quote band previously used
   --teal-deep and sat directly against .cta-band, which also uses --teal-deep,
   producing one undifferentiated dark block three sections tall. 3.4 puts
   reading copy on mint, and a testimonial is copy to read. */
.section--quote{background:var(--mint-soft);color:var(--teal-ink)}
.section--quote h1,.section--quote h2,.section--quote h3,
.section--quote .proof__metric{color:var(--teal-ink)}
.section--quote p,.section--quote blockquote{color:var(--teal-ink)}
.section--quote .proof__by,.section--quote .eyebrow{color:var(--teal-deep)}
.section--quote .logo-row span{color:var(--teal-deep)}
.btn--dark{background:var(--teal-deep);color:#fff}
.btn--dark:hover{background:var(--teal-ink);color:#fff}


/* ==========================================================================
   hero depth pass — tools/hero-depth.py
   Six changes so the sprigs sit in the picture. Artwork untouched.
   ========================================================================== */

/* 4. ONE SPRIG BEHIND THE DISC.
   .hero__leaves carried z-index 3 and the disc carried 2, so all four sprigs
   were locked in front of the clearing and the disc read as a hole punched in
   a flat sheet. Dropping the wrapper out of the stacking context lets each
   sprig take its own plane, and the lower-left one now passes behind. */
.hero__leaves { z-index: auto; }
.hero__sprig  { z-index: 3; }
.hero__sprig--ll { z-index: 1; }
.hero__disc   { z-index: 2; }

/* 5 + 6. SCALE RANGE AND THE CORNER GRID.
   The four were 36, 32, 30 and 27 per cent wide: a range of 1.33 to 1, which
   reads as a repeating border rather than as four objects at four distances.
   7.3 asks for at least 3 to 1. The dominant sprig grows and moves further out
   of frame to pay for it, so the copy keeps its clearance; hero.js re-derives
   the 40px safety margin from these widths on load and on resize. */
@media (min-width: 861px) {
  .hero__sprig--ul { width: 46%; top: -24.00%; left: -13.00%; }
  .hero__sprig--ll { width: 33%; bottom: -14.00%; left: 16.00%; }
  .hero__sprig--ur { width: 24%; top: -6.00%;  right: -4.00%; }
  .hero__sprig--lr { width: 15%; bottom: -2.00%; right: 2.00%; }
}
@media (min-width: 1600px) {
  .hero__sprig--ul { width: 40%; }
  .hero__sprig--ll { width: 29%; left: 18.00%; }
  .hero__sprig--ur { width: 20%; }
  .hero__sprig--lr { width: 13%; }
}
/* Phone keeps a tighter range: at 390px a 3:1 spread leaves the small sprigs
   too small to read as mint at all. */
@media (max-width: 860px) {
  .hero__sprig--ul { width: 92%; left: -42.00%; top: -20.00%; }
  .hero__sprig--ll { width: 74%; left: -30.00%; bottom: -12.00%; }
  .hero__sprig--ur { width: 52%; right: -12.00%; top: -22.00%; }
  .hero__sprig--lr { width: 40%; right: -14.00%; bottom: -8.00%; }
}

/* Reduced motion keeps every depth cue: none of this is movement. */

/* The opening pile. Section 9.3 requires the leaves to meet across the centre
   and obscure the copy before they part. --rx and --ry carry each sprig from
   its rest position onto the copy, so moving the rest positions above meant
   re-deriving them. Values come from window.__heroAudit().live[].pileX/pileY,
   plus a small per-sprig spread so the four do not stack into one silhouette.
   Re-tune with tools/tune-pile.mjs if the rest positions change again. */
.hero__sprig--ul { --rx: 36.5%;  --ry: 102.3%; }
.hero__sprig--ur { --rx: -57.0%; --ry: 140.2%; }
.hero__sprig--ll { --rx: 48.2%;  --ry: -155.0%; }
.hero__sprig--lr { --rx: -95.9%; --ry: -247.5%; }
@media (min-width: 861px) {
  .hero__sprig--ul { --rx: 72.9%;   --ry: 39.9%; }
  .hero__sprig--ur { --rx: -161.1%; --ry: 37.4%; }
  .hero__sprig--ll { --rx: 43.6%;   --ry: -85.8%; }
  .hero__sprig--lr { --rx: -255.1%; --ry: -153.4%; }
}
@media (min-width: 1600px) {
  .hero__sprig--ul { --rx: 93.3%;   --ry: 49.2%; }
  .hero__sprig--ur { --rx: -205.7%; --ry: 51.2%; }
  .hero__sprig--ll { --rx: 49.9%;   --ry: -96.1%; }
  .hero__sprig--lr { --rx: -304.2%; --ry: -174.0%; }
}
@media (max-width: 360px) {
  .hero__sprig--ul { --rx: 36.6%;  --ry: 100.9%; }
  .hero__sprig--ur { --rx: -57.1%; --ry: 138.3%; }
  .hero__sprig--ll { --rx: 48.1%;  --ry: -153.4%; }
  .hero__sprig--lr { --rx: -96.0%; --ry: -245.1%; }
}


/* ==========================================================================
   macro focus falloff — tools/hero-focus.py

   A flat blur across a whole sprig is not what a lens does. A macro lens lays
   a plane of focus through the subject: what sits on it is critically sharp
   and it falls away from there. Each sprig is now two copies of the same
   decoded file, one sharp and one blurred, with the blurred copy masked in by
   a gradient that runs toward the sprig's outer corner. The leaf detail facing
   the words stays sharp; only the part running out of frame goes soft.

   --dof is the blur radius in px, written per sprig by hero.js from that
   sprig's rendered width and its depth, capped at 0.66px, recomputed on resize.
   ========================================================================== */
.s-focus { position: relative; display: block; }
.s-focus img { display: block; width: 100%; height: auto; }

/* the shadow and the atmosphere belong to the composite, applied once */
.hero__sprig .s-focus {
  --d: var(--depth, 1);
  --far: calc(1 - var(--d));
  filter:
    drop-shadow(var(--shx, 0px) var(--shy, 0px) var(--shb, 0px)
                rgba(0, 34, 41, var(--sha, 0.18)))
    saturate(calc(100% - var(--far) * 72%))
    brightness(calc(100% + var(--far) * 20%))
    contrast(calc(100% - var(--far) * 24%));
  opacity: calc(1 - var(--far) * 0.28);
}
/* the single-image rule above now only carries geometry */
.hero__sprig .s-focus img { filter: none; opacity: 1; }

.hero__sprig .s-focus img.sf-soft {
  position: absolute;
  inset: 0;
  filter: blur(var(--dof, 0px));
  pointer-events: none;
}

/* Falloff direction. Each sprig is sharp where it points at the copy and soft
   where it leaves the frame. --ur carries scaleY(-1) on the image, and a mask
   is applied in the element's own space before that transform, so its gradient
   is authored upside down on purpose. */
.hero__sprig--ul .sf-soft { -webkit-mask-image: linear-gradient(to top left,     transparent 26%, #000 88%);
                                    mask-image: linear-gradient(to top left,     transparent 26%, #000 88%); }
.hero__sprig--ur .sf-soft { -webkit-mask-image: linear-gradient(to bottom right, transparent 26%, #000 88%);
                                    mask-image: linear-gradient(to bottom right, transparent 26%, #000 88%); }
.hero__sprig--ll .sf-soft { -webkit-mask-image: linear-gradient(to bottom left,  transparent 26%, #000 88%);
                                    mask-image: linear-gradient(to bottom left,  transparent 26%, #000 88%); }
.hero__sprig--lr .sf-soft { -webkit-mask-image: linear-gradient(to bottom right, transparent 26%, #000 88%);
                                    mask-image: linear-gradient(to bottom right, transparent 26%, #000 88%); }

/* Nothing here is movement, so reduced motion keeps the whole depth treatment. */