/* ==========================================================================
   KESH Consultant — keshconsultant.com
   Palette: deep green / gold / cream.  Type: DM Serif Display + Manrope.
   ========================================================================== */

/* ---------- Fonts ---------- */
@font-face{
  font-family:'Manrope';
  src:url('/assets/fonts/manrope-latin.woff2') format('woff2');
  font-weight:200 800; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'DM Serif Display';
  src:url('/assets/fonts/dmserifdisplay-latin.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---------- Tokens ---------- */
:root{
  --green-900:#071e19;
  --green-800:#092820;
  --green-700:#0d3329;
  --green-600:#134034;

  --cream:#f4efe4;
  --paper:#fbf9f4;
  --white:#ffffff;

  --ink:#0f2e27;          /* headings on light */
  --body:#41524c;         /* body copy on light — 7.4:1 on paper */
  --body-dark:#c8d6d0;    /* body copy on green — 9.6:1 on green-800 */

  --gold:#b8913f;         /* gold on dark surfaces */
  --gold-soft:#d4b171;
  --gold-deep:#8a6720;    /* gold on light surfaces — 4.6:1 on cream */

  --line:#e2dbcb;
  --line-dark:rgba(212,177,113,.22);

  --sans:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  --serif:'DM Serif Display',Georgia,'Times New Roman',serif;

  /* One gutter and one rhythm, used by every section on the page. */
  --gutter:clamp(1.25rem,5vw,2.5rem);
  --shell:75rem;              /* 1200px */
  --half:37.5rem;             /* half the shell — aligns split-screen bands */
  --section-y:clamp(3rem,5vw,4.75rem);
  --header-h:5rem;

  --radius:4px;
  --radius-card:10px;
  --shadow:0 1px 2px rgba(7,30,25,.04),0 12px 32px -12px rgba(7,30,25,.14);
  --shadow-lift:0 2px 4px rgba(7,30,25,.05),0 22px 48px -16px rgba(7,30,25,.22);
  --shadow-float:0 10px 24px -10px rgba(7,30,25,.32),0 2px 6px rgba(7,30,25,.08);
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
/* The clamp lives on the root, not on body: body's overflow only propagates to
   the viewport while html is `visible`, so putting it on body and then relying
   on it is fragile. `clip` is preferred where supported because it clamps the
   scroll width without turning the root into a scroll container. */
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 1rem);
  overflow-x:hidden;
}
@supports (overflow:clip){html{overflow-x:clip}}
body{
  margin:0;
  background:var(--paper);
  color:var(--body);
  font-family:var(--sans);
  font-size:1.0625rem;      /* 17px */
  font-weight:400;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,picture{display:block;max-width:100%}
img{height:auto}
h1,h2,h3{margin:0;font-family:var(--serif);font-weight:400;color:var(--ink);line-height:1.14;letter-spacing:-.005em}
h1{font-size:clamp(2.1rem,4.6vw,3.5rem)}
h2{font-size:clamp(1.9rem,3.7vw,2.85rem)}
h3{font-family:var(--sans);font-weight:700;font-size:1.0625rem;line-height:1.4;letter-spacing:-.01em}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}

:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--gold-soft);
  outline-offset:3px;
  border-radius:2px;
}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;
}

.skip-link{
  position:absolute;left:var(--gutter);top:-4rem;z-index:300;
  padding:.75rem 1.25rem;background:var(--gold);color:var(--green-900);
  font-weight:700;font-size:.9375rem;border-radius:var(--radius);
  transition:top .2s var(--ease);
}
.skip-link:focus{top:1rem}

.sprite{position:absolute;width:0;height:0;overflow:hidden}
.sprite g{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Layout primitives ---------- */
.shell{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.section{padding-block:var(--section-y)}
/* Approach follows the full-bleed Challenges/Impact band and Industries
   follows Approach, so both already inherit plenty of visual separation from
   what sits above them. Carrying the full section rhythm on top as well just
   pushed their headings below the fold — tighten the top only, and leave the
   bottom to keep the page's rhythm intact. */
#approach,#industries{padding-top:clamp(1.75rem,3.2vw,2.75rem)}
.section-cream{background:var(--cream)}
.section-paper{background:var(--paper)}
.section-dark{background:var(--green-800);color:var(--body-dark)}
.section-dark h2,.section-dark h3{color:#fff}
/* A section on paper needs a visible edge when its neighbour is paper too. */
.section-paper{border-block:1px solid var(--line)}

.section-head{max-width:44rem;margin-bottom:clamp(2.75rem,5vw,4rem)}
.section-head h2{margin-bottom:1.125rem}
.section-head-center{max-width:46rem;margin-inline:auto;text-align:center}
.section-lede{font-size:1.09375rem;line-height:1.8}
.section-dark .section-lede{color:var(--body-dark)}

.eyebrow{
  margin:0 0 1.125rem;
  font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-soft);
}
.eyebrow-dark{color:var(--gold-deep)}

/* Short gold rule under a heading — the mockup's signature separator. */
.rule-gold{
  display:block;width:4.5rem;height:2px;
  margin:1.5rem 0 1.75rem;
  background:linear-gradient(90deg,var(--gold),rgba(184,145,63,0));
}
.section-dark .rule-gold{background:linear-gradient(90deg,var(--gold-soft),rgba(212,177,113,0))}
.rule-center{margin-inline:auto;background:linear-gradient(90deg,rgba(184,145,63,0),var(--gold),rgba(184,145,63,0))}

/* ---------- Buttons ---------- */
.btn{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:.625rem;
  min-height:3.125rem;padding:.875rem 1.75rem;
  font-size:.9375rem;font-weight:700;letter-spacing:.02em;
  border:1px solid transparent;border-radius:var(--radius);
  cursor:pointer;text-align:center;
  transition:background-color .2s var(--ease),color .2s var(--ease),
             border-color .2s var(--ease),transform .2s var(--ease),
             box-shadow .2s var(--ease);
}
.btn svg{
  flex:none;width:1.125rem;height:1.125rem;
  fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .25s var(--ease);
}
/* Light sweep across the button on hover. */
.btn::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.32) 50%,transparent 65%);
  transform:translateX(-120%);
  transition:transform .6s var(--ease);
}
.btn:hover::after{transform:translateX(120%)}

.btn-gold{background:var(--gold);color:var(--green-900);border-color:var(--gold)}
.btn-gold:hover{background:var(--gold-soft);border-color:var(--gold-soft);transform:translateY(-2px);box-shadow:0 10px 24px -12px rgba(184,145,63,.9)}
.btn-green{background:var(--green-800);color:#fff;border-color:var(--green-800)}
.btn-green:hover{background:var(--green-700);border-color:var(--green-700);transform:translateY(-2px);box-shadow:var(--shadow-lift)}
.btn-green:hover svg:last-child{transform:translateX(3px)}
.btn-line{background:transparent;color:var(--ink);border-color:rgba(15,46,39,.28)}
.btn-line:hover{border-color:var(--gold-deep);color:var(--gold-deep);transform:translateY(-2px)}
.btn-line:hover svg{transform:translateX(3px)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(212,177,113,.5)}
.btn-ghost:hover{background:rgba(212,177,113,.12);border-color:var(--gold-soft);transform:translateY(-2px)}

/* ==========================================================================
   Header
   ========================================================================== */
/* Solid from the start: the hero's left half is cream, so a transparent
   header would put white nav text on a near-white background. */
.site-header{
  position:fixed;inset:0 0 auto;z-index:100;
  background:var(--green-900);
  transition:box-shadow .3s var(--ease),background-color .3s var(--ease);
}
.site-header.is-scrolled{
  box-shadow:0 1px 0 rgba(212,177,113,.16),0 10px 30px -18px rgba(0,0,0,.8);
}
/* The frosted state lives on a pseudo-element, not on the header itself.
   backdrop-filter makes an element the containing block for any position:fixed
   descendant — and .nav-mobile is a fixed descendant. With the filter on the
   header, `inset:var(--header-h) 0 0` resolved against the 68px header box
   instead of the viewport, so the open menu collapsed to its own padding the
   moment the page was scrolled far enough to add .is-scrolled. Keeping the
   filter on a child gives the identical look and leaves the menu anchored to
   the viewport. */
@supports (backdrop-filter:blur(8px)){
  .site-header.is-scrolled{background:transparent}
  .site-header.is-scrolled::before{
    content:'';position:absolute;inset:0;z-index:-1;
    background:rgba(7,30,25,.88);
    backdrop-filter:blur(10px);
  }
}
.header-inner{
  display:flex;align-items:center;gap:1.5rem;
  height:var(--header-h);
}
.brand{margin-right:auto;display:flex;align-items:center}
.brand-logo{width:auto;height:2.75rem}

.nav-desktop{display:flex;align-items:center;gap:1.75rem}
.nav-desktop a{
  position:relative;padding-block:.25rem;
  font-size:.9375rem;font-weight:600;color:rgba(255,255,255,.9);
  transition:color .2s var(--ease);
}
.nav-desktop a::after{
  content:'';position:absolute;left:0;right:0;bottom:-.125rem;height:1px;
  background:var(--gold-soft);transform:scaleX(0);transform-origin:left;
  transition:transform .25s var(--ease);
}
.nav-desktop a:hover{color:#fff}
.nav-desktop a:hover::after{transform:scaleX(1)}

.btn-header{min-height:2.875rem;padding:.75rem 1.375rem;font-size:.875rem}

.nav-toggle{
  display:none;
  width:2.875rem;height:2.875rem;padding:0;
  flex-direction:column;align-items:center;justify-content:center;gap:.3125rem;
  background:rgba(7,30,25,.55);border:1px solid rgba(212,177,113,.5);border-radius:var(--radius);
  cursor:pointer;
}
.nav-toggle span{
  display:block;width:1.25rem;height:1.5px;background:#fff;
  transition:transform .25s var(--ease),opacity .2s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

.nav-mobile{
  position:fixed;inset:var(--header-h) 0 0;z-index:99;
  display:flex;flex-direction:column;
  padding:1.5rem var(--gutter) 2.5rem;
  background:rgba(7,30,25,.985);
  overflow-y:auto;overscroll-behavior:contain;
}
@supports (backdrop-filter:blur(8px)){.nav-mobile{background:rgba(7,30,25,.94);backdrop-filter:blur(14px)}}
.nav-mobile[hidden]{display:none}
.nav-mobile a{
  padding:1.125rem .125rem;
  font-size:1.0625rem;font-weight:600;color:#fff;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.nav-mobile .nav-mobile-cta{
  margin-top:1.75rem;padding:1rem;
  background:var(--gold);color:var(--green-900);
  border:0;border-radius:var(--radius);text-align:center;
}

/* ---------- Desktop drop-downs ----------
   The section link stays a plain link; the caret beside it is the disclosure
   control. Pointer users get hover, keyboard users get :focus-within, and the
   caret's aria-expanded covers touch — so the panel opens three ways without
   the top-level link ever losing its own destination. */
.nav-item{position:relative;display:flex;align-items:center;gap:.25rem}
/* Invisible bridge across the gap, so travelling pointer-to-panel never
   passes over dead space and closes the menu mid-move. */
.nav-item.has-menu::after{
  content:'';position:absolute;left:0;right:0;top:100%;height:1.1rem;
}
.nav-caret{
  display:grid;place-items:center;
  width:1.375rem;height:1.375rem;padding:0;
  background:none;border:0;cursor:pointer;
  color:rgba(255,255,255,.7);
  transition:transform .25s var(--ease),color .2s var(--ease);
}
.nav-caret svg{width:.9375rem;height:.9375rem}
.nav-item:hover .nav-caret,
.nav-item:focus-within .nav-caret{color:#fff}
.nav-caret[aria-expanded="true"]{transform:rotate(180deg)}

.nav-menu{
  position:absolute;top:100%;left:-.75rem;z-index:10;
  margin-top:1.05rem;min-width:15.5rem;
  display:flex;flex-direction:column;gap:.0625rem;
  padding:.5rem;
  background:var(--green-800);
  border:1px solid var(--line-dark);
  border-radius:var(--radius-card);
  box-shadow:0 24px 48px -20px rgba(0,0,0,.75);
  opacity:0;visibility:hidden;transform:translateY(-.4rem);
  transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s;
}
.nav-menu-wide{min-width:23rem}
.nav-menu{max-width:calc(100vw - 2rem)}
/* The desktop nav only exists above 901px, and between there and roughly
   1150px it sits close to the right edge — near enough that the widest panel
   would run off-screen. Anchoring the panels to their right edge instead keeps
   them inside the viewport, and there is only header to their left. */
@media (max-width:71.875rem){
  .nav-desktop .nav-menu{left:auto;right:-.75rem}
}
.nav-item:hover > .nav-menu,
.nav-item:focus-within > .nav-menu,
.nav-caret[aria-expanded="true"] ~ .nav-menu{
  opacity:1;visibility:visible;transform:none;
}
.nav-desktop .nav-menu a{
  display:block;padding:.5625rem .75rem;
  border-radius:var(--radius);
  font-size:.875rem;font-weight:500;line-height:1.45;
  color:rgba(255,255,255,.86);
}
.nav-desktop .nav-menu a::after{content:none}
.nav-desktop .nav-menu a:hover,
.nav-desktop .nav-menu a:focus-visible{
  background:rgba(212,177,113,.14);color:#fff;
}

/* ---------- Mobile accordion ---------- */
.m-item{
  display:flex;align-items:center;gap:.75rem;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.nav-mobile .m-item > a{flex:1;border-bottom:0}
.m-caret{
  flex:0 0 auto;
  display:grid;place-items:center;
  width:2.75rem;height:2.75rem;padding:0;margin-right:-.5rem;
  background:none;border:0;cursor:pointer;color:rgba(255,255,255,.8);
  transition:transform .25s var(--ease);
}
.m-caret svg{width:1.125rem;height:1.125rem}
.m-caret[aria-expanded="true"]{transform:rotate(180deg)}
.m-menu{
  padding:.25rem 0 .625rem .875rem;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.m-menu[hidden]{display:none}
.nav-mobile .m-menu a{
  padding:.75rem .125rem;
  font-size:.9375rem;font-weight:500;
  color:rgba(255,255,255,.82);
  border-bottom:0;
}

/* ==========================================================================
   Hero — full-bleed split: editorial cream left, green stage right.
   The 1fr/1fr split makes the copy's left edge line up with .shell exactly.
   ========================================================================== */
.hero{
  position:relative;isolation:isolate;
  display:grid;grid-template-columns:1fr 1fr;
  min-height:100svh;
  padding-top:var(--header-h);
  background:var(--cream);
}

/* ---- left: the pitch ---- */
.hero-copy-panel{
  display:flex;align-items:center;justify-content:flex-end;
  background:
    radial-gradient(80% 60% at 20% 0%,rgba(184,145,63,.10) 0%,transparent 60%),
    var(--cream);
}
.hero-copy{
  width:min(100%,var(--half));
  padding:clamp(2.5rem,6vw,4.5rem) var(--gutter);
}
.hero h1{color:var(--ink);margin-bottom:0}
.hero h1 em{font-style:normal;color:var(--gold-deep);display:inline}
.hero-rule{
  display:block;width:5.5rem;height:2px;margin:1.75rem 0;
  background:linear-gradient(90deg,var(--gold),rgba(184,145,63,0));
  transform-origin:left;
}
.hero-lede{
  max-width:34rem;
  font-size:clamp(1rem,1.25vw,1.125rem);
  line-height:1.8;color:var(--body);
}
.hero-actions{
  display:flex;flex-wrap:wrap;gap:.875rem;
  margin-top:clamp(1.75rem,3vw,2.5rem);
}

/* Entrance choreography — gated on .js so nothing is ever left holding an
   opacity:0 fill state if the animation never gets to run. */
.js .hero-rule{animation:ruleIn .9s var(--ease) .55s both}
.js .hero-lede{animation:fadeUp .8s var(--ease) .6s both}
.js .hero-actions{animation:fadeUp .8s var(--ease) .72s both}

/* Word-by-word headline reveal. */
.reveal-words span{display:inline-block}
.js .reveal-words span{animation:wordUp .9s var(--ease) both}
.js .reveal-words > span:nth-of-type(1){animation-delay:.06s}
.js .reveal-words > span:nth-of-type(2){animation-delay:.12s}
.js .reveal-words > span:nth-of-type(3){animation-delay:.18s}
.js .reveal-words > span:nth-of-type(4){animation-delay:.24s}
.js .reveal-words > span:nth-of-type(5){animation-delay:.30s}
.js .reveal-words em span:nth-of-type(1){animation-delay:.38s}
.js .reveal-words em span:nth-of-type(2){animation-delay:.44s}

@keyframes wordUp{from{opacity:0;transform:translateY(.7em)}to{opacity:1;transform:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes ruleIn{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---- right: the portrait stage ----
   --edge is the distance from this panel's right edge back to the page's
   right margin, so the cards line up with .shell content exactly like every
   other section. Percentages resolve against the panel, so no 100vw and no
   scrollbar drift. Below 1200px it falls back to a plain gutter. */
.hero-stage{
  position:relative;isolation:isolate;
  /* The portrait owns this panel now. The cards used to hold a column of it
     open down the right-hand side, which pinned the portrait to roughly half
     the width it had room for and left a wedge of bare green above her head.
     They have moved to a rail across the foot of the panel (see .hero-cards),
     so the only reservation left here is the page gutter. */
  --edge:clamp(2.5rem,4vw,6rem);
  display:flex;align-items:flex-end;justify-content:center;
  padding:0 var(--gutter);
  background:
    radial-gradient(120% 90% at 30% 100%,rgba(19,64,52,.9) 0%,transparent 62%),
    linear-gradient(168deg,var(--green-900) 0%,var(--green-800) 48%,var(--green-700) 100%);
  overflow:hidden;
}
/* Faint blueprint grid — texture, never noise. */
.hero-stage::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(rgba(212,177,113,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(212,177,113,.06) 1px,transparent 1px);
  background-size:74px 74px;
  mask-image:radial-gradient(90% 70% at 50% 40%,#000 20%,transparent 80%);
}
/* Slow gold aurora drifting behind the portrait. */
.hero-stage::after{
  content:'';position:absolute;z-index:-1;pointer-events:none;
  left:-10%;top:-15%;width:80%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(212,177,113,.16),transparent 68%);
  animation:drift 18s ease-in-out infinite alternate;
}
@keyframes drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(22%,16%,0) scale(1.15)}}

/* Sized off the viewport, not off the parent: a percentage height here
   would chain back to an auto-sized grid row and collapse to zero. */
/* Deliberately never faded in: it is the LCP image and the page's whole
   first impression, so it paints as soon as it decodes. */
/* Height comes from the panel, not from svh. The hero runs taller than 100svh
   whenever the copy column needs the room, so an svh-derived height left a
   bare wedge above her head on exactly the screens that had least to spare.
   The top inset is the breathing room; everything below inherits the rest.

   Out of flow, too: sized off the panel *and* contributing to it, the
   percentage height fed back into the grid row and pushed the hero from 872px
   to 996px. Absolute positioning breaks that loop -- the copy column alone
   decides how tall the hero is, exactly as it did before. */
.hero-portrait{
  position:absolute;inset:3.25rem var(--gutter) 0;
  display:flex;align-items:flex-end;justify-content:center;
}
.hero-portrait picture{
  display:flex;align-items:flex-end;justify-content:center;height:100%;
}
/* Driven from height, not width. A percentage max-width here would resolve
   against the <picture>, whose own width is being derived from this image, and
   that circularity resolved at about half the size asked for. A definite
   height with width:auto has no such loop -- the width simply follows the
   aspect ratio, which is also why covering a share of the panel is a height
   decision rather than a width one. */
.hero-portrait img{
  height:100%;width:auto;max-width:100%;max-height:54rem;
  object-fit:contain;object-position:bottom center;
}
/* A lit disc for her to stand against.
   This was a whisper of a gradient, which looked clean but asked the panel to
   do a job it cannot: at the hair line a cut-out always keeps a few part-lit
   pixels, and against a near-black green those read as white specks. Raising
   the tone immediately behind her roughly halves that contrast, so the same
   pixels settle into the plate instead of sparkling off it -- the disc is doing
   the retouching that must never be done to her photograph.
   Sized and placed to match the gold arc below, so the hairline becomes the
   disc's rim rather than a second circle competing with it. */
.hero-portrait::before{
  content:'';position:absolute;z-index:-1;
  left:50%;bottom:12%;translate:-50% 0;
  width:min(38rem,124%);aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle at 50% 50%,
    rgba(212,177,113,.13) 0%,
    rgba(33,88,71,.66) 34%,
    rgba(27,74,60,.60) 72%,
    rgba(21,60,49,.34) 92%,
    transparent 100%);
  /* Fades out before the foot of the panel so the plate never announces itself
     as an edge above the capability rail. */
  mask-image:linear-gradient(to bottom,#000 58%,rgba(0,0,0,.55) 84%,transparent 97%);
}
/* A gold hairline arc that passes behind her shoulder. Two thirds of it is
   hidden by the portrait, which is the point: something continuing behind the
   subject is what gives a flat cut-out depth, where a shape floating beside
   her would just be decoration. Sized off the portrait so it tracks her. */
.hero-portrait::after{
  content:'';position:absolute;z-index:-1;pointer-events:none;
  left:50%;bottom:12%;translate:-50% 0;
  width:min(38rem,124%);aspect-ratio:1;
  border-radius:50%;
  border:1px solid rgba(212,177,113,.30);
  mask-image:linear-gradient(to bottom,#000 45%,transparent 78%);
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---- capability rail ----
   A row along the foot of the panel rather than a column beside the portrait.
   Beside her, four cards cost a fifth of the hero's width permanently; along
   the bottom they cost only the strip the portrait was already dissolving
   into, so the panel reads as one image with a caption rather than a picture
   parked next to a list. Dark glass, because these sit *on* the portrait now
   and cream panels would punch holes in her. */
.hero-cards{
  position:absolute;z-index:2;
  /* Held clear of the fixed WhatsApp button, which floats over this exact
     corner while the hero is in view and would otherwise sit on the last card. */
  left:var(--gutter);right:var(--gutter);bottom:7rem;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  counter-reset:cap;
  border-top:1px solid rgba(212,177,113,.34);
}
/* Four boxes stacked on the portrait read as four things dropped on a picture.
   Ruled columns under one hairline read as a single index belonging to the
   panel -- the same information, without four competing containers. The scrim
   is what keeps the labels legible where her suit falls behind them. */
.hero-cards::before{
  content:'';position:absolute;z-index:-1;
  /* Bled to the panel's edges and floor. Inset any less and the scrim's own
     rectangle becomes the thing you notice instead of the portrait settling
     into the panel. The rail sits var(--gutter) in, hence -2.5rem sideways;
     -7rem down is exactly the rail's own offset from the bottom. */
  inset:-1.75rem -2.5rem -7rem;
  background:linear-gradient(to top,rgba(7,30,25,.88) 40%,rgba(7,30,25,.55) 72%,transparent 100%);
  pointer-events:none;
}
.hero-card{
  position:relative;
  display:flex;flex-direction:column;gap:.25rem;
  padding:1rem 1.125rem 0 0;
  transition:transform .25s var(--ease);
}
.hero-card + .hero-card{padding-left:1.125rem;border-left:1px solid rgba(212,177,113,.16)}
.hero-card::before{
  counter-increment:cap;
  content:counter(cap,decimal-leading-zero);
  font-family:var(--serif);font-size:.9375rem;line-height:1;
  color:var(--gold-soft);opacity:.85;
  margin-bottom:.375rem;
}
/* No idle bob on the rail: four abreast, out-of-phase drifting reads as jitter
   rather than float, which is why the stacked layout already turned it off. */
.js .hero-card{animation:cardIn .8s var(--ease) both}
.js .hero-card:nth-child(1){animation-delay:.55s,0s}
.js .hero-card:nth-child(2){animation-delay:.68s,.9s}
.js .hero-card:nth-child(3){animation-delay:.81s,1.8s}
.js .hero-card:nth-child(4){animation-delay:.94s,2.7s}
.hero-card:hover{transform:translateY(-4px)}
/* The numeral carries the item on the rail, so the icon would be a second
   marker for the same thing. It is decorative (aria-hidden) and comes back in
   the stacked layout, where each item has room to be a card again. */
.hero-card svg{display:none}
.hero-card h2{
  font-family:var(--sans);font-size:.8125rem;font-weight:800;line-height:1.25;
  letter-spacing:-.005em;color:#fff;
}
.hero-card p{margin-top:.1875rem;font-size:.71875rem;line-height:1.45;color:var(--body-dark)}

/* The rail rises into place, so the entrance travels up rather than sideways. */
@keyframes cardIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -6px}}

/* ---------- Credibility strip ---------- */
.credibility{
  background:var(--green-900);
  border-block:1px solid var(--line-dark);
}
.cred-grid{display:grid;grid-template-columns:repeat(5,1fr)}
.cred{
  display:flex;align-items:center;justify-content:center;gap:.75rem;
  padding:1.375rem 1rem;
  text-align:left;
}
.cred + .cred{border-left:1px solid var(--line-dark)}
.cred svg{
  flex:none;width:1.875rem;height:1.875rem;
  color:var(--gold-soft);
  fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round;
}
.cred span{
  font-family:var(--serif);font-size:1rem;line-height:1.28;
  color:rgba(255,255,255,.94);
}

/* ==========================================================================
   About
   ========================================================================== */
.about-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2.5rem,6vw,5rem);
  align-items:center;
}
.about-copy > p{margin-bottom:1.25rem;font-size:1.0625rem}
.about-copy .btn{margin-top:.75rem}

/* ---- the KESH model orbit ---- */
/* The rings are square boxes that happen to look like circles, and they spin.
   A rotated square's border box is up to 1.41x its own width, so on a phone —
   where the orbit is as wide as the whole column — the rings were widening the
   document by up to 42px and shrinking it again on every turn. That drags the
   fixed header and the mobile menu overlay (both sized off the initial
   containing block) sideways with it. Clip the orbit's own box so nothing
   inside it can ever contribute to the page's scroll width; the circles
   themselves never reach the edge, so nothing visible is cut. */
.orbit{
  position:relative;
  width:min(100%,30rem);aspect-ratio:1;
  margin-inline:auto;
  --node:31%;
  overflow:hidden;
}
@supports (overflow:clip){
  /* clip + a margin keeps the node shadows painting outside the box. */
  .orbit{overflow:clip;overflow-clip-margin:1.5rem}
}
.orbit-ring{
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:74%;aspect-ratio:1;border-radius:50%;
  border:1px dashed rgba(184,145,63,.5);
  animation:spin 60s linear infinite;
}
/* Solid, so rotating it is invisible — and it is the widest box in the orbit,
   which made it the worst offender for the overflow described above. */
.orbit-ring-2{
  width:94%;
  border-style:solid;border-color:rgba(184,145,63,.18);
  animation:none;
}
.orbit-core{
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:30%;aspect-ratio:1;border-radius:50%;
  background:var(--green-800);
  border:3px solid var(--green-800);
  box-shadow:0 0 0 6px var(--paper),0 12px 30px -12px rgba(7,30,25,.45);
  overflow:hidden;
  display:grid;place-items:center;
}
.orbit-core img{width:132%;max-width:none}

.orbit-node{
  position:absolute;
  width:var(--node);aspect-ratio:1;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.25rem;padding:.5rem;
  text-align:center;
  background:var(--paper);
  border:1px solid rgba(184,145,63,.4);
  box-shadow:0 6px 18px -10px rgba(7,30,25,.28);
}
.js .orbit-node{animation:nodeIn .7s var(--ease) both}
.orbit-node strong{
  font-family:var(--sans);font-size:.75rem;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink);
}
.orbit-node span{font-size:.6875rem;line-height:1.4;color:var(--body)}
.orbit-n{top:0;left:50%;translate:-50% 0;animation-delay:.05s}
.orbit-e{right:0;top:50%;translate:0 -50%;animation-delay:.15s}
.orbit-s{bottom:0;left:50%;translate:-50% 0;animation-delay:.25s}
.orbit-w{left:0;top:50%;translate:0 -50%;animation-delay:.35s}
@keyframes nodeIn{from{opacity:0;scale:.86}to{opacity:1;scale:1}}

/* ---- stat row ---- */
.stats{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(1.25rem,3vw,2.5rem);
  margin-top:clamp(3.5rem,6vw,5rem);
  padding-top:clamp(2.5rem,4vw,3.25rem);
  border-top:1px solid var(--line);
}
.stats li{text-align:center}
.stats strong{
  display:block;
  font-family:var(--serif);font-weight:400;
  font-size:clamp(2.25rem,4.4vw,3.25rem);line-height:1;
  color:var(--gold-deep);
  font-variant-numeric:tabular-nums;
}
.stats span{
  display:block;margin-top:.625rem;
  font-size:.875rem;line-height:1.5;letter-spacing:.02em;
}

/* ==========================================================================
   Services
   ========================================================================== */
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(15.5rem,1fr));
  gap:clamp(1rem,1.6vw,1.375rem);
}
.card{
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;flex-direction:column;
  padding:clamp(1.5rem,2.2vw,1.875rem);
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-card);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease);
}
/* Cursor-tracked light — JS feeds --mx/--my; harmless without it. */
.card::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:radial-gradient(15rem 15rem at var(--mx,50%) var(--my,0%),rgba(184,145,63,.14),transparent 70%);
  opacity:0;transition:opacity .3s var(--ease);
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift);border-color:rgba(184,145,63,.5)}
.card:hover::before{opacity:1}
.card-index{
  position:absolute;top:1rem;right:1.125rem;
  font-family:var(--serif);font-size:1.5rem;line-height:1;
  color:rgba(184,145,63,.26);
  transition:color .25s var(--ease)
}
.card:hover .card-index{color:rgba(184,145,63,.55)}
.card-icon{
  width:3rem;height:3rem;padding:.6875rem;margin-bottom:1.25rem;
  color:var(--gold-deep);
  background:rgba(184,145,63,.09);
  border-radius:50%;
  fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
  transition:background-color .25s var(--ease),transform .25s var(--ease);
}
.card:hover .card-icon{background:rgba(184,145,63,.18);transform:translateY(-2px)}
.card h3{margin-bottom:.625rem;color:var(--ink);font-size:1.03125rem;padding-right:1.75rem}
.card p{font-size:.9375rem;line-height:1.7}

/* ==========================================================================
   Capability ticker
   ========================================================================== */
.ticker{
  overflow:hidden;
  padding-block:1.0625rem;
  background:var(--green-900);
  border-block:1px solid var(--line-dark);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.ticker-track{
  display:flex;align-items:center;gap:1.75rem;
  width:max-content;
  animation:slide 42s linear infinite;
}
.ticker span{
  font-family:var(--serif);font-size:1.0625rem;letter-spacing:.01em;
  color:rgba(255,255,255,.9);white-space:nowrap;
}
.ticker i{font-style:normal;color:var(--gold);font-size:.75rem}
@keyframes slide{to{transform:translateX(-50%)}}
/* Pointer devices only: touch browsers latch :hover on tap and keep it until
   something else is tapped, which would freeze the ribbon with no way back. */
@media (hover:hover) and (pointer:fine){
  .ticker:hover .ticker-track{animation-play-state:paused}
}

/* ==========================================================================
   Challenges vs Impact — full-bleed split band
   ========================================================================== */
.impact{
  position:relative;
  display:grid;grid-template-columns:1fr 1fr;
}
.impact-side{padding-block:clamp(3.25rem,6vw,4.75rem)}
.impact-inner{width:min(100%,var(--half));padding-inline:var(--gutter)}

.impact-problem{
  position:relative;
  display:flex;justify-content:flex-end;
  background:
    linear-gradient(120deg,rgba(7,30,25,.94),rgba(13,51,41,.9)),
    var(--green-800);
  color:var(--body-dark);
}
.impact-problem::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(212,177,113,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(212,177,113,.05) 1px,transparent 1px);
  background-size:56px 56px;
}
.impact-problem .impact-inner{position:relative;z-index:1}
.impact-problem h3{color:#fff}

.impact-result{
  display:flex;justify-content:flex-start;
  background:
    radial-gradient(70% 90% at 100% 50%,rgba(184,145,63,.12),transparent 60%),
    var(--cream);
  color:var(--body);
}
.impact-result h3{color:var(--ink)}

.impact h3{
  margin-bottom:1.75rem;
  font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,2.6vw,2rem);
}

.ledger{display:grid;gap:.9375rem}
.ledger li{
  display:flex;align-items:flex-start;gap:.875rem;
  font-size:1rem;line-height:1.55;
}
.ledger svg{
  flex:none;width:1.375rem;height:1.375rem;padding:.25rem;margin-top:.125rem;
  border-radius:50%;
  background:var(--gold);color:var(--green-900);
  fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
}
.ledger-good svg{background:var(--green-800);color:#fff}

/* The pivot badge that sits on the seam. */
.impact-pivot{
  position:absolute;z-index:2;
  left:50%;top:50%;translate:-50% -50%;
  display:grid;place-items:center;
  width:3.75rem;height:3.75rem;border-radius:50%;
  background:var(--white);
  box-shadow:0 10px 28px -10px rgba(7,30,25,.5);
}
.impact-pivot svg{
  width:1.5rem;height:1.5rem;color:var(--green-800);
  fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
  animation:nudge 2.6s var(--ease) infinite;
}
@keyframes nudge{0%,60%,100%{transform:none}30%{transform:translateX(3px)}}

/* ==========================================================================
   Approach
   ========================================================================== */
.steps{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(1.75rem,3vw,2.75rem);
}
.steps li{position:relative;text-align:center;padding-top:.75rem}
/* Dotted connector across the gap between steps. It reaches past its own
   li, so it may only ever be drawn on an item that has a sibling to its
   right — otherwise it pushes the grid wider than the viewport. */
.steps li::after{
  content:'';position:absolute;top:4.375rem;height:0;
  left:calc(50% + 3.5rem);right:calc(-50% + 3.5rem);
  border-top:2px dotted rgba(184,145,63,.5);
}
/* 4-up: every item but the last has a neighbour. */
@media (min-width:64.0625rem){
  .steps li:last-child::after{content:none}
}
/* 2-up: only the left-hand item of each row does. Shares its edge with the
   1-up query below so no width falls between the two and draws a connector
   into empty space. */
@media (min-width:26.25rem) and (max-width:64rem){
  .steps li:nth-child(even)::after{content:none}
}
/* 1-up: nobody does. */
@media (max-width:26.25rem){
  .steps li::after{content:none}
}
.step-ring{
  display:grid;place-items:center;
  width:5.5rem;height:5.5rem;margin:0 auto 1.25rem;
  border:1px solid rgba(184,145,63,.45);border-radius:50%;
  background:var(--white);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.step-ring svg{
  width:2.125rem;height:2.125rem;color:var(--ink);
  fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;
}
.steps li:hover .step-ring{transform:translateY(-4px);border-color:var(--gold);box-shadow:0 14px 30px -14px rgba(7,30,25,.4)}
.step-badge{
  position:absolute;z-index:1;
  left:50%;top:0;translate:-1.9rem 0;
  display:grid;place-items:center;
  width:1.875rem;height:1.875rem;border-radius:50%;
  background:var(--green-800);color:var(--gold-soft);
  font-family:var(--serif);font-size:.9375rem;line-height:1;
}
.steps h3{margin-bottom:.5rem;font-size:1.1875rem;color:var(--ink)}
.steps p{font-size:.9375rem;line-height:1.7;max-width:15rem;margin-inline:auto}

/* ==========================================================================
   Industries
   ========================================================================== */
.industries{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(11.875rem,1fr));
  gap:clamp(1rem,1.6vw,1.375rem);
}
.industry{
  position:relative;margin:0;
  border-radius:var(--radius-card);overflow:hidden;
  background:var(--green-800);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.industry img{
  width:100%;aspect-ratio:4/5;object-fit:cover;
  transition:transform .6s var(--ease);
}
.industry::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(7,30,25,.94) 0%,rgba(7,30,25,.55) 42%,rgba(7,30,25,.06) 74%);
  transition:background .35s var(--ease);
}
.industry figcaption{
  position:absolute;inset:auto 0 0;z-index:1;
  padding:1.25rem 1.125rem;
  color:#fff;
  text-shadow:0 1px 12px rgba(0,0,0,.55);
}
.industry-name{display:block;font-size:.9375rem;font-weight:700;line-height:1.35}
/* The one-liner is held back until hover, so the grid stays calm at rest. */
.industry-note{
  display:block;overflow:hidden;
  max-height:0;opacity:0;
  margin-top:0;
  font-size:.8125rem;line-height:1.5;color:rgba(255,255,255,.9);
  transition:max-height .38s var(--ease),opacity .3s var(--ease),margin-top .38s var(--ease);
}
.industry:hover,.industry:focus-within{transform:translateY(-5px);box-shadow:var(--shadow-lift)}
.industry:hover img,.industry:focus-within img{transform:scale(1.07)}
.industry:hover::after,.industry:focus-within::after{
  background:linear-gradient(to top,rgba(7,30,25,.96) 0%,rgba(7,30,25,.68) 55%,rgba(7,30,25,.16) 100%);
}
.industry:hover .industry-note,.industry:focus-within .industry-note{
  max-height:5rem;opacity:1;margin-top:.375rem;
}

.industries-note{
  width:100%;margin:clamp(1.75rem,3vw,2.5rem) auto 0;
  padding:0;text-align:center;
  font-size:clamp(.875rem,1.15vw,.96875rem);line-height:1.65;
}

/* ==========================================================================
   Founder
   ========================================================================== */
.founder-brands{
  margin-bottom:clamp(2.5rem,5vw,4rem);
}
.founder-brands-label{
  margin-bottom:1rem;
  font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-soft);text-align:center;
}
.founder-marquee{
  --brand-gap:clamp(1rem,2.4vw,2rem);
  overflow:hidden;
  margin-inline:calc(var(--gutter) * -1);
  padding-block:1rem;
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.founder-marquee-track{
  display:flex;align-items:center;
  width:max-content;
  will-change:transform;
  animation:founderBrands 54s linear infinite;
}
.founder-brand-list{
  flex:0 0 auto;
  display:flex;align-items:center;gap:var(--brand-gap);
  padding-right:var(--brand-gap);
}
.founder-brand-list li{
  flex:0 0 auto;
  display:grid;place-items:center;
  width:clamp(9.5rem,14vw,12rem);height:4.75rem;
  padding:.9rem 1.125rem;
}
.founder-brand-list img{
  width:100%;height:100%;max-height:3.2rem;
  object-fit:contain;
  opacity:.9;
  filter:brightness(0) invert(1) sepia(.18) saturate(.65) hue-rotate(105deg) drop-shadow(0 1px 8px rgba(0,0,0,.16));
}
@keyframes founderBrands{to{transform:translate3d(-50%,0,0)}}
@media (hover:hover) and (pointer:fine){
  .founder-marquee:hover .founder-marquee-track{animation-play-state:paused}
}
.founder-grid{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(2.25rem,5vw,4.5rem);
  align-items:center;
}
/* The same lit disc as the hero, for the same reason: her hair line needs a
   mid tone to settle onto rather than the section's near-black green. Kept a
   touch quieter here because this portrait is smaller and the disc sits inside
   a text column rather than filling a panel. */
.founder-media{position:relative;isolation:isolate;max-width:26rem;margin-inline:auto}
.founder-media::before{
  content:'';position:absolute;z-index:-1;
  left:50%;top:-6%;translate:-50% 0;
  width:132%;aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle at 50% 50%,
    rgba(212,177,113,.12) 0%,
    rgba(33,88,71,.60) 36%,
    rgba(27,74,60,.54) 74%,
    rgba(21,60,49,.30) 92%,
    transparent 100%);
  mask-image:linear-gradient(to bottom,#000 62%,rgba(0,0,0,.5) 86%,transparent 98%);
}
/* Traces the disc's rim, the way the hero's arc does. */
.founder-media::after{
  content:'';position:absolute;z-index:-1;pointer-events:none;
  left:50%;top:-6%;translate:-50% 0;
  width:132%;aspect-ratio:1;
  border-radius:50%;
  border:1px solid rgba(212,177,113,.26);
  mask-image:linear-gradient(to bottom,#000 42%,transparent 76%);
}
/* Lifted explicitly above the disc. .founder-media isolates, so the disc's
   z-index:-1 is measured inside this element rather than against the section,
   and the portrait needs a stacking position of its own to sit on top of it —
   the hero needs no equivalent because .hero-portrait is not an isolation
   boundary and its disc falls all the way back to the panel. */
.founder-media picture{position:relative;z-index:1;display:block}
.founder-media picture img{
  width:100%;max-width:26rem;margin-inline:auto;
}
.founder-media .signature{
  width:11rem;height:auto;margin:-1.5rem auto 0;
  opacity:.95;
  filter:brightness(0) invert(1) opacity(.85);
}

/* ==========================================================================
   Portrait grade — the two Mboje cut-outs
   --------------------------------------------------------------------------
   The portraits run in their own colour, at the client's request. What used to
   sell the cut-out was a grayscale pass; what sells it now is the matte itself
   plus the shadow below — so the shadow is the one thing here that must not be
   dropped, since it is all that grounds the figure against the panel.

   Both portraits share one grade. The dissolve stop differs per image only
   because their compositions do: the hero is a three-quarter figure standing
   on the section floor, so it may only fade in the last sliver before her
   arms; the founder is a seated portrait whose chair should melt away over a
   longer run. Keep the fade here rather than baked into the .webp alpha, so
   it can be retuned without re-exporting the asset.
   ========================================================================== */
.hero-portrait img,
.founder-media picture img{
  filter:drop-shadow(0 24px 44px rgba(0,0,0,.45));
}
/* No tonal grade on the portrait. An earlier attempt to settle the highlights
   in her hair -- both a despeckle on the file and a brightness/contrast pass
   here -- is exactly the kind of change that must not be made to a client's
   photograph: the despeckle reached her eyelashes and brows and visibly
   altered her face. The photograph ships as supplied; the panel adapts to it,
   never the other way round. */
/* Finishes behind the rail rather than below it, so nothing of her surfaces
   again underneath the cards. */
.hero-portrait img{
  -webkit-mask-image:linear-gradient(to bottom,#000 68%,transparent 87%);
          mask-image:linear-gradient(to bottom,#000 68%,transparent 87%);
}
.founder-media picture img{
  -webkit-mask-image:linear-gradient(to bottom,#000 74%,transparent 99%);
          mask-image:linear-gradient(to bottom,#000 74%,transparent 99%);
}
.founder-copy h2{margin-bottom:.5rem;color:#fff}
.founder-role{
  margin-bottom:1.5rem;
  font-size:1rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--gold-soft);
}
.founder-copy > p{margin-bottom:1.125rem;font-size:1.03125rem;color:var(--body-dark)}

.founder-tags{
  display:flex;flex-wrap:wrap;gap:.625rem;
  margin:1.75rem 0;
}
.founder-tags li{
  padding:.5rem 1rem;
  font-size:.8125rem;font-weight:600;letter-spacing:.02em;color:rgba(255,255,255,.94);
  background:rgba(255,255,255,.06);
  border:1px solid var(--line-dark);border-radius:999px;
}

.link-arrow{
  display:inline-flex;align-items:center;gap:.625rem;
  font-size:.9375rem;font-weight:700;color:var(--gold-soft);
  border-bottom:1px solid rgba(212,177,113,.4);padding-bottom:.25rem;
  transition:color .2s var(--ease),border-color .2s var(--ease);
}
.link-arrow svg{
  width:1.25rem;height:1.25rem;
  fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
}
.link-arrow:hover{color:#fff;border-color:#fff}

/* ==========================================================================
   Trust
   ========================================================================== */
/* Four items, so the column count is stated rather than left to auto-fit —
   auto-fit landed on three between 820px and 1024px and left one stranded. */
.trust-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(1.75rem,3vw,2.75rem);
}
.trust-item{text-align:center}
.trust-item svg{
  width:3.25rem;height:3.25rem;padding:.75rem;margin:0 auto 1.25rem;
  color:var(--gold-deep);
  background:rgba(184,145,63,.08);
  border:1px solid rgba(184,145,63,.35);border-radius:50%;
  fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;
  transition:background-color .25s var(--ease),transform .25s var(--ease);
}
.trust-item:hover svg{background:rgba(184,145,63,.16);transform:translateY(-3px)}
.trust-item h3{margin-bottom:.5rem;font-size:1.03125rem;color:var(--ink)}
.trust-item p{font-size:.9375rem;line-height:1.7}

/* ==========================================================================
   Contact
   ========================================================================== */
.contact-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);
  gap:clamp(2.5rem,5vw,4.5rem);
  align-items:start;
}
.contact-intro h2{margin-bottom:0}
.contact-intro .section-lede{margin-bottom:2.5rem}
.contact-list{display:grid;gap:1rem}
.contact-list li{display:flex;align-items:center;gap:.875rem}
.contact-list svg{
  flex:none;width:2.25rem;height:2.25rem;padding:.5rem;
  color:var(--gold-soft);
  border:1px solid rgba(212,177,113,.32);border-radius:50%;
  fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
}
.contact-list a{
  font-size:.96875rem;font-weight:600;color:#fff;
  border-bottom:1px solid transparent;
  transition:border-color .2s var(--ease),color .2s var(--ease);
  overflow-wrap:anywhere;
}
.contact-list a:hover{color:var(--gold-soft);border-color:var(--gold-soft)}
.contact-tag{
  display:inline-block;margin-left:.5rem;padding:.125rem .5rem;
  font-size:.6875rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--green-900);background:var(--gold-soft);border-radius:999px;
  vertical-align:.05em;
}

.contact-form{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.125rem;
  padding:clamp(1.75rem,3vw,2.5rem);
  background:rgba(255,255,255,.045);
  border:1px solid var(--line-dark);
  border-radius:var(--radius-card);
}
.field{display:flex;flex-direction:column;gap:.5rem}
.field-full{grid-column:1/-1}
.field label{
  font-size:.8125rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(212,177,113,.95);
}
.field label span{color:var(--gold-soft)}
.field input,.field select,.field textarea{
  width:100%;padding:.8125rem .9375rem;
  font-size:1rem;color:#fff;
  background:rgba(7,30,25,.55);
  border:1px solid rgba(212,177,113,.26);
  border-radius:var(--radius);
  transition:border-color .2s var(--ease),background-color .2s var(--ease);
}
.field textarea{resize:vertical;min-height:8rem;line-height:1.65}
.field select{
  appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23d4b171' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;background-size:.75rem;
  padding-right:2.5rem;
}
.field select option{background:var(--green-800);color:#fff}
.field input::placeholder,.field textarea::placeholder{color:rgba(200,214,208,.55)}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--gold-soft);background:rgba(7,30,25,.78);
}
.field [aria-invalid="true"]{border-color:#e08b7a}
.field-error{font-size:.8125rem;font-weight:600;color:#f0a99a}

.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.btn-submit{grid-column:1/-1;justify-self:start;margin-top:.375rem}
.btn-submit[disabled]{opacity:.6;cursor:progress;transform:none}
.form-status{grid-column:1/-1;font-size:.9375rem;font-weight:600}
.form-status:empty{display:none}
.form-status.is-ok{color:#8fd8b0}
.form-status.is-error{color:#f0a99a}
.form-status a{color:var(--gold-soft);border-bottom:1px solid currentColor}
.form-status a:hover{color:#fff}
.form-note{grid-column:1/-1;font-size:.8125rem;line-height:1.6;color:rgba(200,214,208,.72)}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{background:var(--green-900);color:rgba(200,214,208,.86);font-size:.9375rem}
.footer-grid{
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(2rem,4vw,3.5rem);
  padding-block:clamp(3.25rem,6vw,4.5rem);
}
.footer-brand img{width:auto;height:3rem;margin-bottom:1.375rem}
.footer-brand p{max-width:26rem;line-height:1.75}
.footer-grid h2{
  margin-bottom:1.25rem;
  font-family:var(--sans);font-size:.8125rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold-soft);
}
.footer-contact{display:flex;flex-direction:column;align-items:flex-start;gap:.75rem}
.footer-nav-links{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.75rem 1.5rem;
}
.footer-nav-links a{justify-self:start}
.footer-nav a,.footer-contact a{
  color:rgba(200,214,208,.86);
  border-bottom:1px solid transparent;
  transition:color .2s var(--ease),border-color .2s var(--ease);
  overflow-wrap:anywhere;
}
.footer-nav a:hover,.footer-contact a:hover{color:#fff;border-color:var(--gold-soft)}
.btn-footer{margin-top:.75rem;min-height:2.875rem;padding:.75rem 1.375rem;font-size:.875rem}
.btn-footer:hover{border-color:var(--gold-soft)}

.footer-base{
  display:flex;flex-wrap:wrap;gap:.75rem 2rem;justify-content:space-between;
  padding-block:1.5rem;
  border-top:1px solid var(--line-dark);
  font-size:.84375rem;color:rgba(200,214,208,.66);
}
.footer-credit a{
  color:rgba(200,214,208,.86);font-weight:600;
  border-bottom:1px solid rgba(212,177,113,.4);
  transition:color .2s var(--ease),border-color .2s var(--ease);
}
.footer-credit a:hover{color:var(--gold-soft);border-color:var(--gold-soft)}

/* ==========================================================================
   Floating WhatsApp button
   ========================================================================== */
.wa-float{
  position:fixed;z-index:95;
  right:clamp(1rem,3vw,1.75rem);
  bottom:calc(clamp(1rem,3vw,1.75rem) + env(safe-area-inset-bottom,0px));
  display:inline-flex;align-items:center;gap:.625rem;
  height:3.5rem;padding:0 1.125rem;
  background:#25d366;color:#04301a;
  border-radius:999px;
  box-shadow:0 6px 18px rgba(7,30,25,.28),0 2px 4px rgba(7,30,25,.16);
  font-size:.875rem;font-weight:700;letter-spacing:.01em;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),background-color .22s var(--ease);
}
.wa-float svg{flex:none;width:1.75rem;height:1.75rem;fill:currentColor}
.wa-float:hover{background:#1fbe59;transform:translateY(-2px);box-shadow:0 10px 26px rgba(7,30,25,.34)}
.wa-float:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* Collapse to a circle where horizontal room is tight. */
@media (max-width:56.25rem){
  .wa-float{width:3.375rem;height:3.375rem;padding:0;justify-content:center}
  .wa-float-label{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip-path:inset(50%);white-space:nowrap;
  }
}
/* Never let it sit over the open mobile menu. */
.nav-mobile:not([hidden]) ~ .wa-float,
body:has(.nav-mobile:not([hidden])) .wa-float,
body:has(.nav-mobile:not([hidden])) .wa-panel{opacity:0;pointer-events:none}

/* ==========================================================================
   WhatsApp greeting panel
   WhatsApp does not let a business write to someone who has not written to it
   first, and the site never learns the visitor's number, so the introduction
   is made here instead — on the page, in KESH's voice, before the visitor has
   typed a word. The panel only ever opens from JS, so nothing inside it needs
   to survive scripting being absent: the float stays a plain chat link.
   ========================================================================== */
.wa-panel{
  position:fixed;z-index:96;
  right:clamp(1rem,3vw,1.75rem);
  bottom:calc(clamp(1rem,3vw,1.75rem) + env(safe-area-inset-bottom,0px) + 4.25rem);
  width:min(21.5rem,calc(100vw - 2rem));
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-lift);
  overflow:hidden;
  animation:waPanelIn .3s var(--ease) both;
}
.wa-panel[hidden]{display:none}
.wa-panel:focus{outline:none}
@keyframes waPanelIn{
  from{opacity:0;transform:translateY(12px) scale(.97)}
  to{opacity:1;transform:none}
}

.wa-panel-head{
  display:flex;align-items:center;gap:.75rem;
  padding:.875rem 1rem;
  background:var(--green-800);
}
.wa-panel-mark{flex:none;width:auto;height:1.625rem}
.wa-panel-id{display:flex;flex-direction:column;gap:.0625rem;flex:1;min-width:0}
.wa-panel-id strong{
  font-size:.84375rem;font-weight:700;color:#fff;letter-spacing:.01em;
}
.wa-panel-id span{font-size:.71875rem;color:var(--body-dark);letter-spacing:.01em}

.wa-panel-close{
  flex:none;width:1.75rem;height:1.75rem;
  display:grid;place-items:center;
  padding:0;border:0;border-radius:50%;
  background:transparent;color:var(--body-dark);cursor:pointer;
  transition:color .2s var(--ease),background-color .2s var(--ease);
}
.wa-panel-close svg{
  width:.9375rem;height:.9375rem;
  fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;
}
.wa-panel-close:hover{color:#fff;background:rgba(255,255,255,.12)}
.wa-panel-close:focus-visible{outline:2px solid var(--gold-soft);outline-offset:2px}

.wa-panel-body{padding:1.125rem 1rem .9375rem}
.wa-bubble{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:2px 10px 10px 10px;
  padding:.875rem .9375rem;
  box-shadow:0 1px 2px rgba(7,30,25,.05);
}
.wa-bubble p{margin:0 0 .6875rem;font-size:.8125rem;line-height:1.65;color:var(--body)}
.wa-bubble p:first-child{font-weight:600;color:var(--ink)}
.wa-bubble p:last-child{margin-bottom:0}

.wa-panel-cta{
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  margin:0 1rem 1rem;height:2.75rem;
  background:#25d366;color:#04301a;
  border-radius:999px;text-decoration:none;
  font-size:.8125rem;font-weight:700;letter-spacing:.01em;
  transition:background-color .22s var(--ease);
}
.wa-panel-cta svg{flex:none;width:1.125rem;height:1.125rem;fill:currentColor}
.wa-panel-cta:hover{background:#1fbe59}
.wa-panel-cta:focus-visible{outline:2px solid var(--green-800);outline-offset:2px}

/* ==========================================================================
   Reveal-on-scroll (opt-in via JS; content is visible without it)
   ========================================================================== */
/* The hidden state is gated on .js as well as on the class main.js adds, so
   that it takes two independent things being alive — the inline bootstrap in
   <head> and main.js — before any content is hidden. If either one is blocked
   (CSP, a proxy that strips scripts, an in-app browser), the page shows in
   full rather than fading to nothing below the hero. */
.js .js-reveal{opacity:0;transform:translateY(22px);transition:opacity .75s var(--ease),transform .75s var(--ease)}
.js .js-reveal.is-visible{opacity:1;transform:none}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Wide laptop — the hero's card column is the first thing to give. */
@media (max-width:78rem){          /* 1248px */
  .hero-stage{--cardw:10.75rem}
  .hero-card{padding:.75rem .8125rem}
  .hero-card svg{width:1.5rem;height:1.5rem}
  .hero-card p{font-size:.6875rem}
}

/* Stack the hero early: below this the split leaves the portrait too narrow
   to carry the page, whatever we do with the cards. */
@media (max-width:71.25rem){       /* 1140px */
  .hero{grid-template-columns:1fr;min-height:0}
  .hero-copy-panel{justify-content:center}
  .hero-copy{
    width:min(100%,var(--shell));
    padding-block:clamp(2.5rem,7vw,4rem) clamp(2rem,5vw,3rem);
    text-align:center;
  }
  .hero-rule{margin-inline:auto}
  .hero-lede{margin-inline:auto}
  .hero-actions{justify-content:center}

  .hero-stage{
    display:block;
    padding:clamp(1.5rem,4vw,2.5rem) var(--gutter) clamp(2rem,5vw,3rem);
  }
  /* Back into flow: the split layout takes the portrait out of it to size her
     off the panel, which has no meaning once the panel is a block that grows
     to fit her. */
  .hero-portrait{
    position:static;inset:auto;padding-top:0;
    max-width:24rem;margin-inline:auto;
  }
  .hero-portrait picture{height:auto}
  /* The arc is sized against a portrait that fills a tall panel. Once she is
     centred in a block that is wider than she is, it stops reading as depth
     behind her and becomes a ring drawn around her. */
  .hero-portrait::after{content:none}
  .hero-portrait img{height:auto;max-height:min(58svh,30rem);max-width:100%}
  /* Cards drop under the portrait, spanning the same width as every other
     section so their edges line up with the rest of the page.
     Four items, so the count is stated: auto-fit picked three at tablet width
     and five just under the desktop breakpoint, both of which left a ragged
     row and a block of dead space beside it. */
  .hero-cards{
    position:static;translate:none;
    width:100%;max-width:var(--shell);margin:clamp(1.5rem,4vw,2.25rem) auto 0;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:.75rem;
    border-top:0;
  }
  .hero-cards::before{content:none}
  /* Boxes again here. The ruled rail depends on the four items sitting in one
     unbroken row under a single hairline; wrapped onto two rows the rules line
     up with nothing, so each item goes back to carrying its own edge. */
  .hero-card{
    animation:none;
    flex-direction:row;align-items:flex-start;gap:.75rem;
    padding:.875rem .9375rem;
    background:rgba(251,249,244,.96);
    border-radius:var(--radius-card);
    box-shadow:var(--shadow-float);
  }
  @supports (backdrop-filter:blur(6px)){
    .hero-card{background:rgba(251,249,244,.88);backdrop-filter:blur(8px)}
  }
  .hero-card + .hero-card{padding-left:.9375rem;border-left:0}
  .hero-card::before{content:none}
  .hero-card svg{
    display:block;flex:none;width:1.75rem;height:1.75rem;
    color:var(--gold-deep);
    fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;
  }
  .hero-card h2{color:var(--ink)}
  .hero-card p{color:var(--body)}
  .js .hero-card{animation:cardIn .8s var(--ease) both}
}

/* Between the laptop breakpoint and the point the hero splits, the stacked
   cards have room for a single row. */
@media (min-width:64.0625rem) and (max-width:71.25rem){
  .hero-cards{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* Laptop — stack the hero, keep everything else two-up. */
@media (max-width:64rem){          /* 1024px */
  :root{--header-h:4.5rem}

  /* Five items, so three columns always stranded two with a dead cell beside
     them and the dividers stopped mid-row. Two columns with the fifth item
     spanning the full width keeps every cell filled and every rule aligned. */
  .cred-grid{grid-template-columns:repeat(2,1fr)}
  .cred + .cred{border-left:0}
  .cred:nth-child(even){border-left:1px solid var(--line-dark)}
  .cred:nth-child(n+3){border-top:1px solid var(--line-dark)}
  .cred:last-child{grid-column:1/-1;justify-content:center}

  .trust-grid{grid-template-columns:repeat(2,minmax(0,1fr))}

  .about-grid{grid-template-columns:1fr;gap:3rem}
  .about-copy{text-align:left}
  .orbit{--node:33%}
  .steps{grid-template-columns:repeat(2,1fr)}
  .contact-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1/-1}
}

/* Tablet — swap to the mobile nav. */
@media (max-width:56.25rem){       /* 900px */
  .nav-desktop,.btn-header{display:none}
  .nav-toggle{display:flex}

  .impact{grid-template-columns:1fr}
  .impact-inner{width:100%;max-width:var(--shell);margin-inline:auto}
  .impact-problem,.impact-result{justify-content:center}
  .impact-pivot{
    top:auto;bottom:0;left:50%;
    translate:-50% 50%;
  }

  .founder-grid{grid-template-columns:1fr;gap:2.5rem}
  .founder-media{max-width:22rem}
  /* Narrower column, so the disc is pulled in to keep clear of the text. */
  .founder-media::before,.founder-media::after{width:120%}
}

/* Small tablet / large phone */
@media (max-width:40rem){          /* 640px */
  :root{--header-h:4.25rem}
  body{font-size:1rem}

  .brand-logo{height:2.375rem}

  /* Column and divider rules are already set two-up above; only the sizing
     needs to come down here. */
  .cred{padding:1.125rem .875rem}
  /* The authored line breaks stop the label shrinking; let it wrap instead. */
  .cred span br{display:none}
  .cred span{font-size:.9375rem}
  .cred svg{width:1.625rem;height:1.625rem}

  .trust-grid{grid-template-columns:1fr}

  .stats{grid-template-columns:repeat(2,1fr);gap:2rem 1rem}
  .cards{grid-template-columns:1fr}
  .industries{grid-template-columns:repeat(2,1fr)}
  .industry img{aspect-ratio:1}
  /* No hover on touch — show the one-liner outright. */
  .industry-note{max-height:5rem;opacity:1;margin-top:.375rem}
  .founder-marquee{--brand-gap:.875rem;padding-block:.75rem}
  .founder-marquee-track{animation-duration:44s}
  .founder-brand-list li{width:9.25rem;height:4.375rem;padding:.75rem .875rem}
  .founder-brand-list img{max-height:2.75rem}
  .contact-form{grid-template-columns:1fr}
  .btn-submit{justify-self:stretch}
  .footer-grid{grid-template-columns:1fr;gap:2.5rem}
  .footer-brand{grid-column:auto}
  .footer-base{justify-content:flex-start}
}

/* Phone */
@media (max-width:26.25rem){       /* 420px */
  /* Two columns cannot hold "International Leadership Experience" here. */
  .cred-grid{grid-template-columns:1fr}
  .cred{justify-content:flex-start;padding:1rem .75rem}
  .cred:nth-child(even){border-left:0}
  .cred:nth-child(n+2){border-top:1px solid var(--line-dark)}
  .cred:last-child{grid-column:auto;justify-content:flex-start}

  .steps{grid-template-columns:1fr}
  .industries{grid-template-columns:1fr}
  /* Two cards side by side leaves ~100px for the copy — one column reads. */
  .hero-cards{grid-template-columns:1fr}
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .btn{width:100%}
  .founder-tags li{font-size:.78125rem;padding:.4375rem .8125rem}
  /* The node is a circle, so its usable width is the inscribed square, not its
     diameter — the copy has to come down with it or it prints over the ring. */
  .orbit{--node:36%}
  .orbit-node{padding:.375rem}
  .orbit-node strong{font-size:.6875rem;letter-spacing:.06em}
  .orbit-node span{font-size:.625rem;line-height:1.3}
}

/* ---------- Motion & print ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  .js .js-reveal{opacity:1;transform:none}

  /* The ribbon keeps running. Stopping it leaves either a frozen half-scrolled
     frame or a reflowed block, and both read as a fault rather than a choice.
     It is decorative (aria-hidden), it carries no information that is not also
     in the services list above it, and it is a single slow horizontal drift
     with nothing flashing or zooming. The concession here is speed: a longer
     duration makes the same strip noticeably calmer. The !important is not
     optional — it has to outrank the blanket rule above. */
  .ticker-track{
    animation:slide 72s linear infinite!important;
    animation-play-state:running!important;
  }

  /* Same call for the founder brand strip, and for the same reason: the
     blanket rule above would collapse its 54s loop to .01ms and run it once,
     parking the track at translate(-50%) — i.e. frozen on the duplicated,
     aria-hidden copy of the list. A slower continuous drift is both calmer
     and honest about what the strip is. */
  .founder-marquee-track{
    animation:founderBrands 88s linear infinite!important;
    animation-play-state:running!important;
  }
}

@media print{
  .site-header,.nav-mobile,.hero-stage,.hero-actions,.contact-form,.btn,.skip-link,.wa-float,.wa-panel,.ticker,.orbit,.founder-brands{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  .section,.hero,.impact-side{padding-block:1.25rem;background:#fff!important;color:#000!important}
  .hero{display:block}
  h1,h2,h3,.hero h1,.section-dark h2,.section-dark h3,.impact-problem h3{color:#000!important}
  .impact{grid-template-columns:1fr}
  .impact-pivot{display:none}
  .industry img,.founder-media{display:none}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;word-break:break-all}
}