/* ============================================================================
   MentoGrid website — chrome and page components.

   Loaded AFTER site.css, which owns the brand tokens, the reset and .container.
   Nothing here redefines a colour: every value below is a var() from site.css,
   so changing the brand in one file changes the whole estate.

   Everything is prefixed .wsite- so it cannot collide with the course landing
   pages, which share site.css but not this file.
   ========================================================================== */

/* ══ HEADER ══ */
.wsite-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--color-border);
}
.wsite-header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: 72px;
}
.wsite-logo { display: flex; align-items: center; flex-shrink: 0; }
.wsite-logo img { width: 150px; height: auto; }

.wsite-nav { display: flex; align-items: center; gap: .35rem; }
.wsite-nav-link {
  font-family: var(--font-heading); font-size: .875rem; font-weight: 600;
  color: var(--color-text); text-decoration: none;
  padding: .55rem .8rem; border-radius: 8px;
  transition: color .18s, background .18s;
  white-space: nowrap;
}
.wsite-nav-link:hover { color: var(--color-primary); background: var(--color-surface); }
.wsite-nav-link.is-active { color: var(--color-primary); }
/* Underline drawn on a pseudo-element rather than text-decoration, so it sits
   clear of the descenders in "Coaching & Mentoring". */
.wsite-nav-link.is-active::after {
  content: ""; display: block; height: 2px; margin: .3rem .8rem -0.55rem;
  background: var(--color-primary); border-radius: 2px;
}
.wsite-nav-cta {
  font-family: var(--font-heading); font-size: .875rem; font-weight: 700;
  background: var(--color-primary); color: #fff; text-decoration: none;
  padding: .6rem 1.15rem; border-radius: 9px; margin-left: .6rem;
  white-space: nowrap; transition: background .18s, transform .18s;
}
.wsite-nav-cta:hover { background: #1248B8; transform: translateY(-1px); }

.wsite-burger {
  display: none; background: none; border: 0; cursor: pointer;
  width: 42px; height: 42px; padding: 9px; border-radius: 8px;
}
.wsite-burger span {
  display: block; height: 2px; background: var(--color-dark);
  border-radius: 2px; margin: 4px 0; transition: transform .2s, opacity .2s;
}
.wsite-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.wsite-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.wsite-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 980px) {
  .wsite-burger { display: block; }
  .wsite-nav {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: .15rem;
    background: #fff; border-bottom: 1px solid var(--color-border);
    padding: .75rem 1.25rem 1.25rem;
    box-shadow: 0 18px 40px rgba(15,27,60,.10);
    /* display:none, not a height transition: a closed menu must be out of the
       tab order, and a zero-height one is not. */
    display: none;
  }
  .wsite-nav.is-open { display: flex; }
  .wsite-nav-link { padding: .8rem .5rem; }
  .wsite-nav-link.is-active::after { margin: .3rem .5rem -0.8rem; }
  .wsite-nav-cta { margin: .6rem 0 0; text-align: center; }
}

/* ══ SHARED SECTION FURNITURE ══ */
.wsite-section { padding: 6rem 0; }
.wsite-section-surface { background: var(--color-surface); }
.wsite-section-dark { background: var(--color-dark); }
@media (max-width: 768px) { .wsite-section { padding: 4rem 0; } }

.wsite-shead { text-align: center; margin-bottom: 3.5rem; }
.wsite-eyebrow {
  display: inline-block; font-family: var(--font-heading);
  font-size: .75rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--color-secondary); margin-bottom: .75rem;
}
.wsite-shead h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem); font-weight: 800;
  line-height: 1.2; color: var(--color-dark);
}
.wsite-shead p {
  font-size: 1.0625rem; color: var(--color-text-muted);
  max-width: 38rem; margin: 1rem auto 0;
}
.wsite-section-dark .wsite-shead h2 { color: #fff; }
.wsite-section-dark .wsite-shead p  { color: rgba(255,255,255,.65); }

.wsite-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.wsite-grid-2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
/* Exactly two columns, stated rather than inferred. -grid-2's auto-fit yields
   THREE tracks at desktop width, which is invisible with two cards in it and
   leaves a lone orphan with four. Anything meant to be 2x2 wants this. */
.wsite-grid-pair { grid-template-columns: 1fr 1fr; }
@media (max-width: 780px) { .wsite-grid-pair { grid-template-columns: 1fr; } }

.wsite-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  font-family: var(--font-heading); font-weight: 700; font-size: 1rem;
  padding: .875rem 2rem; border-radius: 10px; text-decoration: none;
  border: 0; cursor: pointer; transition: background .18s, transform .18s;
}
.wsite-btn-primary { background: var(--color-primary); color: #fff; }
.wsite-btn-primary:hover { background: #1248B8; transform: translateY(-1px); }
.wsite-btn-white { background: #fff; color: var(--color-primary); }
.wsite-btn-white:hover { transform: translateY(-1px); }
.wsite-btn-ghost { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.35); }
.wsite-btn-ghost:hover { background: rgba(255,255,255,.2); }
/* The same idea as -ghost but for a LIGHT section, where white-on-white text
   would be invisible. Secondary next to a filled primary. */
.wsite-btn-outline {
  background: #fff; color: var(--color-primary); border: 1px solid rgba(26,86,219,.35);
}
.wsite-btn-outline:hover { background: #F4F8FF; border-color: var(--color-primary); transform: translateY(-1px); }

/* ══ HERO ══ */
.wsite-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--color-dark) 0%, #16264f 55%, #1a3668 100%);
  color: #fff; padding: 7rem 0 6rem;
}
.wsite-hero::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 760px; height: 760px; transform: translate(-30%, -50%);
  background: radial-gradient(ellipse, rgba(0,200,150,.13) 0%, transparent 70%);
  pointer-events: none;
}
.wsite-hero .container { position: relative; z-index: 1; }
.wsite-hero-narrow { max-width: 48rem; }
.wsite-hero h1 {
  font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 800;
  line-height: 1.14; margin-bottom: 1.25rem;
  /* Distributes a wrapped headline evenly instead of filling line one and
     leaving a stray word on line two. Ignored by browsers that lack it, which
     is why the copy also binds its last words with non-breaking spaces —
     this improves the wrap, it does not guarantee it. */
  text-wrap: balance;
}
.wsite-hero h1 .hl {
  background: linear-gradient(90deg, #00C896, #00e6b0);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--color-secondary);
}
.wsite-hero-sub {
  font-size: clamp(1rem, 1.6vw, 1.1875rem); color: rgba(255,255,255,.72);
  max-width: 40rem; line-height: 1.7;
}
.wsite-hero-actions { display: flex; flex-wrap: wrap; gap: .875rem; margin-top: 2.25rem; }
.wsite-hero-page { padding: 5rem 0 4.5rem; }

/* Home hero: copy left, photograph right.
   The text column takes the larger share — the words are what has to land, and
   an even split leaves the headline wrapping after three or four words. */
.wsite-hero-split {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: 3.5rem; align-items: center;
}
/* For a hero whose headline is long enough to wrap three times in the default
   column. Consultancy's runs to 52 characters; at 1.05fr it stacked into a
   narrow block that read as cramped beside the graphic.
   MUST be repeated in the mobile rule below — two classes beat one, and a
   media query adds no specificity of its own. */
.wsite-hero-split.is-copy-led { grid-template-columns: 1.18fr .82fr; }
.wsite-hero-split .wsite-hero-sub { max-width: 34rem; }

.wsite-hero-media {
  margin: 0; position: relative; border-radius: 18px; overflow: hidden;
  /* A white photo frame. Thick enough to read as deliberate against the navy
     gradient — a hairline at this size just looks like a rendering artefact.
     Change the 5px or the colour here and the whole frame follows. */
  border: 5px solid rgba(255,255,255,.92);
  box-shadow: 0 24px 60px rgba(0,0,0,.42);
}
.wsite-hero-media img {
  width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; display: block;
}
/* The photo is lit warm and sits on a cool navy gradient. A whisper of the
   brand green across the bottom ties the two together without tinting faces. */
.wsite-hero-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, rgba(0,200,150,.10) 100%);
}

@media (max-width: 900px) {
  /* Stacked, with the graphic BELOW the copy. Above it, the headline and the
     buttons are both pushed off a phone screen by an image that is decoration.

     Every hero variant added as a second class on this element must be named
     here too: a media query adds no specificity of its own, so a two-class
     rule elsewhere in the file beats this one and holds its desktop columns
     all the way down to a phone. That has already happened once. */
  .wsite-hero-split,
  .wsite-hero-split.is-copy-led { grid-template-columns: 1fr; gap: 2.25rem; }
  .wsite-hero-split .wsite-hero-sub { max-width: none; }
  .wsite-hero-media img { aspect-ratio: 16 / 9; }
}

/* ══ CATEGORY RING (/courses/ hero) ══
   Every fill below is either a brand variable or a white alpha over the hero
   gradient. Nothing carries its own background, which is what lets the tiles
   sit ON the hero rather than in front of it. The two accents are LIGHTENED
   brand hues — #1A56DB is a light-background blue and disappears on navy. */
.wsite-hero-graphic { margin: 0; display: flex; justify-content: center; }
/* 440, not 470. The viewBox is square, so this number IS the hero's height
   above its padding — at 470 the training hero rendered 622px against home's
   585 and coaching's 594. 440 brings it to 592, inside the same band. */
.wsite-ring { width: 100%; max-width: 440px; height: auto; }

/* ── the orbit ── */
.wsite-ring .ring-faint { fill: none; stroke: rgba(255,255,255,.055); stroke-width: 1; }
.wsite-ring .ring-live  { fill: none; stroke: url(#ringStroke); stroke-width: 2; opacity: .65; }
.wsite-ring .ring-spoke {
  stroke: rgba(255,255,255,.28); stroke-width: 1.5; stroke-dasharray: 3 4;
}
.wsite-ring .ring-node { fill: #fff; opacity: .75; }

/* ── the six tiles ── */
.wsite-ring .cell polygon {
  fill: rgba(255,255,255,.06);
  stroke: rgba(255,255,255,.15); stroke-width: 1.5;
  transition: fill .25s, stroke .25s;
}
.wsite-ring .cell text { font-family: var(--font-heading); user-select: none; }
.wsite-ring .cell .l1 { font-size: 15px; font-weight: 800; }
.wsite-ring .cell .l2 { font-size: 15px; font-weight: 800; fill: rgba(255,255,255,.95); }
.wsite-ring .cell-icon path {
  fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.wsite-ring .cell-chip { stroke-width: 1.5; }

/* Accent per tile. Held to the icon, the chip and the foot bar — never the
   tile fill. Six saturated hexagons on a saturated hero is the combination
   that goes wrong, and it is the one the supplied artwork had. */
.wsite-ring .cell-g .l1,
.wsite-ring .cell-g .cell-icon path { stroke: #00E6B0; }
.wsite-ring .cell-g .l1             { fill: #00E6B0; stroke: none; }
.wsite-ring .cell-g .cell-chip      { fill: rgba(0,230,176,.15); stroke: rgba(0,230,176,.45); }
.wsite-ring .cell-g .cell-bar       { fill: #00E6B0; opacity: .8; }

.wsite-ring .cell-b .cell-icon path { stroke: #6FA0FF; }
.wsite-ring .cell-b .l1             { fill: #6FA0FF; }
.wsite-ring .cell-b .cell-chip      { fill: rgba(111,160,255,.15); stroke: rgba(111,160,255,.45); }
.wsite-ring .cell-b .cell-bar       { fill: #6FA0FF; opacity: .8; }

.wsite-ring .cell:hover polygon {
  fill: rgba(255,255,255,.115); stroke: rgba(255,255,255,.3);
}

/* ── the hub ── */
.wsite-ring .core polygon {
  fill: rgba(255,255,255,.13);
  stroke: rgba(255,255,255,.3); stroke-width: 1.5;
}
.wsite-ring .core text {
  font-family: var(--font-heading); font-size: 21px; font-weight: 800;
  letter-spacing: -.3px; user-select: none;
}
.wsite-ring .wm-mento { fill: #6FA0FF; }
.wsite-ring .wm-grid  { fill: #00E6B0; }

@media (max-width: 900px) {
  /* A square graphic costs a full phone screen of height. Capping it keeps the
     course cards reachable without scrolling past artwork to find them. */
  .wsite-ring { max-width: 380px; }
}

/* ══ COACHING SIGNPOST (/coaching/ hero) ══
   Eight directional signs on a post. Built from divs with clip-path rather
   than SVG, so each label stays real text that wraps, translates and is read
   aloud — the reason for drawing this in markup at all. */
/* The figure fills its column rather than sitting centred in it, so the signs
   get the full width available and stop wrapping. */
.wsite-signpost-wrap { display: block; width: 100%; }
/* Top padding clears the spike, bottom padding is where the post carries on
   below the last sign and meets the ground. A signpost that stops at its
   lowest sign is floating. */
/* The arm geometry lives in these four, because the arrow head appears in two
   places that MUST agree: the clip-path that cuts the point, and the padding
   that keeps the last letter off it. Changed independently they drift, and the
   symptom is a word sliced in half at one breakpoint only. Narrow layouts
   re-declare these rather than restating the clip-path. */
.wsite-signpost {
  --sign-arrow: 26px;   /* depth of the pointed head */
  --sign-tail:  2.3rem; /* padding on the pointed side — must exceed the head */
  --sign-pad:   1rem;   /* padding on the flat side */
  --sign-py:    .5rem;
  /* The spike, and the bare post left showing beneath it. These two set the
     top padding between them, because the first sign must start BELOW the
     spike, not level with it. Authored flush, the point appeared to grow out
     of the top sign instead of standing above it. Derived rather than typed
     so the three breakpoints cannot drift back into touching. */
  --sign-cap:   24px;
  --sign-gap:   18px;
  position: relative; width: 100%;
  padding: calc(var(--sign-cap) + var(--sign-gap)) 0 1.25rem;
}

/* The post. A pseudo-element because it is scenery: it must sit behind every
   sign and must never appear in the accessibility tree.
   It stops level with the last sign rather than running past it — a post that
   overshoots looks like a mistake rather than a design. */
.wsite-signpost::before {
  content: ""; position: absolute; top: 22px; bottom: 9px; left: calc(50% - 8px);
  width: 16px; border-radius: 3px;
  /* Steel, not navy. The first version graded #24344f to #101a2e, which is a
     few percent off the hero behind it — so the post was technically drawn and
     effectively invisible. A post has to be lighter than its background or it
     is not a post. */
  background: linear-gradient(90deg, #6E809E 0%, #A9B8CE 42%, #55657F 100%);
  box-shadow: 0 0 0 1px rgba(0,0,0,.25), 0 14px 30px rgba(0,0,0,.4);
}
/* A spike on top rather than a flat cap — the post itself points the way, so
   the whole object reads as directional before a single label is read. Wider
   at the base than the 16px post, the way a finial is. */
.wsite-signpost::after {
  content: ""; position: absolute; top: 0; left: calc(50% - 12px);
  width: 24px; height: var(--sign-cap);
  background: linear-gradient(90deg, #7D8FAD 0%, #C2D0E3 45%, #5F6F8A 100%);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

/* ── the footing ──
   A widened block where the post meets the ground, on a soft line that fades
   at both ends. The line is what sells it: a footing alone reads as the post
   just getting thicker, whereas a horizon under it reads as ground. */
.signpost-base {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 170px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg,
    transparent, rgba(169,184,206,.42) 22%, rgba(169,184,206,.42) 78%, transparent);
}
.signpost-base::before {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 1px; width: 42px; height: 15px; border-radius: 3px 3px 1px 1px;
  background: linear-gradient(90deg, #55657F, #93A4BE 45%, #4A5A73);
  box-shadow: 0 -2px 8px rgba(0,0,0,.3);
}

.wsite-signpost-wrap figcaption {
  margin-top: .85rem; text-align: center;
  font-family: var(--font-heading); font-size: .8125rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; color: var(--color-secondary);
}

.sign {
  position: relative; z-index: 1;
  /* The gap is what the post shows through — that space is not slack, it is
     the thing that makes this read as a signpost rather than a stack of arrows.

     36px and .45rem are load-bearing: this hero has to sit inside the range its
     siblings occupy. Home renders 603px and training 592px; eight arms at
     40px/.65rem put this one at 644, above both. These land it at 594.
     Every term counts — eight bottom margins, not seven, because the last arm
     has one too, and the caption's own line box on top of its margin.

     It was .6rem until --sign-gap put 18px of clear post under the spike,
     which took the hero to 617 and made it the tallest of the five. The gap
     is the part you can see, so the height came back out of the eight margins
     instead. Change either one and re-measure the hero against its siblings. */
  width: 46%; min-height: 36px; margin-bottom: .45rem;
  display: flex; align-items: center;
  font-family: var(--font-heading); font-size: .9375rem; font-weight: 700;
  line-height: 1.25;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.32));
  transition: transform .2s;
}
/* The 26px is the arrow head; the text needs padding past it or clip-path
   cuts through the last letter. */
/* 48% margin against a 46% arm: each one still crosses the centre line, so it
   attaches to the post rather than hovering beside it. Shorten the arm without
   raising the margin to match and they detach. */
.sign.to-right {
  margin-left: 48%;
  padding: var(--sign-py) var(--sign-tail) var(--sign-py) var(--sign-pad);
  clip-path: polygon(0 0, calc(100% - var(--sign-arrow)) 0, 100% 50%,
                     calc(100% - var(--sign-arrow)) 100%, 0 100%);
}
.sign.to-left {
  /* margin-left:auto is doing the work, not margin-right. A block box is
     left-aligned: given only margin-right:48% these sat at 0-46% with the
     margin as empty space to their right, ending 4% short of the post while
     the right-hand arms overlapped it. auto absorbs the remainder and pushes
     the arm across the centre line, so both sides meet the post. */
  margin-left: auto; margin-right: 48%;
  padding: var(--sign-py) var(--sign-pad) var(--sign-py) var(--sign-tail);
  clip-path: polygon(var(--sign-arrow) 0, 100% 0, 100% 100%, var(--sign-arrow) 100%, 0 50%);
  justify-content: flex-end; text-align: right;
}
.sign.to-right:hover { transform: translateX(4px); }
.sign.to-left:hover  { transform: translateX(-4px); }

/* Vivid indigo through to green.
   The first version held white text on all eight, which forced the green half
   dark and muddy — a bright teal cannot carry white type at 4.5:1, the
   physics does not allow it. So the light half flips to navy text instead,
   and every colour gets to be as saturated as it wants.
   Measured: 11.9, 7.7, 5.3, 4.7 on white; 6.0, 7.3, 7.2, 6.9 on navy. */
.sign-1 { background: #2B1D9E; color: #fff; }
.sign-2 { background: #1E3FD6; color: #fff; }
.sign-3 { background: #0B63E8; color: #fff; }
.sign-4 { background: #0077C8; color: #fff; }
.sign-5 { background: #00A9C4; color: var(--color-dark); }
.sign-6 { background: #00BFA6; color: var(--color-dark); }
.sign-7 { background: #00C08A; color: var(--color-dark); }
.sign-8 { background: #19BE4A; color: var(--color-dark); }

/* ── stacked layout ──
   The signs keep alternating around a centred post all the way down. An earlier
   version flattened them to a left-hand post pointing one way, which fits more
   text per arm but stops reading as a signpost — the alternation IS the object.

   Keeping it costs interior width, so everything below is the scale-down that
   buys it back: a cap on the figure, a shorter arrow head, tighter padding and
   smaller type. Arms widen to 47% and their margins drop to match, which is
   worth ~14px of text each without detaching them from the post. */
@media (max-width: 900px) {
  /* Stacked, the figure inherits the FULL container — up to ~836px, wider than
     the 476px column it had on desktop. Without this cap the graphic gets
     bigger as the screen gets smaller, which is how it drew attention. */
  .wsite-signpost-wrap { max-width: 440px; margin-inline: auto; }
  .wsite-signpost {
    --sign-arrow: 20px; --sign-tail: 1.7rem; --sign-pad: .8rem; --sign-py: .45rem;
    --sign-cap: 18px; --sign-gap: 14px;
    padding: calc(var(--sign-cap) + var(--sign-gap)) 0 1.25rem;
  }
  /* The post narrows with everything else. It also has to: the arms cross the
     centre line by 3% (~13px here), and that overlap must exceed the post's
     half-width or a hairline of background shows between post and arm. */
  .wsite-signpost::before { top: 17px; left: calc(50% - 6px); width: 12px; }
  .wsite-signpost::after  { left: calc(50% - 9px); width: 18px; }  /* height: --sign-cap */
  .signpost-base { width: 130px; }
  .signpost-base::before { width: 32px; height: 12px; }

  .sign {
    width: 47%; min-height: 32px; margin-bottom: .5rem;
    font-size: .8125rem; letter-spacing: -.01em;
  }
  .sign.to-right { margin-left: 47%; }
  .sign.to-left  { margin-right: 47%; }
}

/* Below ~480px the cap stops governing and the container does, so the arms
   shrink with the viewport and the type has to come down again to match.
   "Insight & Awareness" is the longest label and the one that sets this floor. */
@media (max-width: 480px) {
  .wsite-signpost {
    --sign-arrow: 15px; --sign-tail: 1.3rem; --sign-pad: .6rem; --sign-py: .4rem;
    --sign-cap: 15px; --sign-gap: 11px;
    padding: calc(var(--sign-cap) + var(--sign-gap)) 0 1rem;
  }
  .wsite-signpost::before { top: 14px; left: calc(50% - 5px); width: 10px; }
  .wsite-signpost::after  { left: calc(50% - 7px); width: 14px; }  /* height: --sign-cap */
  .signpost-base { width: 104px; }
  .signpost-base::before { width: 26px; height: 10px; }

  .sign { min-height: 27px; margin-bottom: .4rem; font-size: .6875rem; }
  .wsite-signpost-wrap figcaption {
    margin-top: .6rem; font-size: .6875rem; letter-spacing: .1em;
  }
}

/* ══ CONSULTANCY HONEYCOMB (/consultancy/ hero) ══
   Capped at 460 on a 752x580 viewBox — 355px tall, which is what keeps this
   hero inside the band the other four occupy (542-594). The .82fr column it
   sits in is about 476px, so this cap is what governs, not the column. */
.wsite-comb { width: 100%; max-width: 460px; height: auto; }

.wsite-comb .comb-cells polygon {
  fill: rgba(255,255,255,.018);
  stroke: rgba(111,160,255,.26); stroke-width: 1.25;
  transition: stroke .25s, fill .25s;
}
/* Cells with a word are drawn a shade brighter, so the eye finds the labels
   before it finds the lattice holding them. */
.wsite-comb .comb-cells polygon.comb-lit {
  fill: rgba(111,160,255,.05); stroke: rgba(147,185,255,.45);
}
.wsite-comb .comb-cells polygon:hover {
  fill: rgba(0,230,176,.07); stroke: rgba(0,230,176,.55);
}
.wsite-comb .comb-label {
  fill: rgba(255,255,255,.82); font-family: var(--font-heading);
  font-size: 17px; font-weight: 700; letter-spacing: .06em; user-select: none;
}
.wsite-comb .comb-word {
  fill: #fff; font-family: var(--font-heading);
  font-size: 47px; font-weight: 800; letter-spacing: .015em; user-select: none;
}

@media (max-width: 900px) { .wsite-comb { max-width: 440px; } }

/* ══ CONTACT CONSTELLATION (/contact/ hero) ══
   Same rule as the courses ring: no fill carries its own background, so the
   graphic is made of the hero rather than placed in front of it. Accents are
   the lightened brand pair — the reference artwork's pale cyan is a colour
   that appears nowhere else on the site. */
.wsite-plexus { width: 100%; max-width: 520px; height: auto; }

.wsite-plexus .plex-dust line   { stroke: rgba(255,255,255,.09); stroke-width: 1; }
.wsite-plexus .plex-dust circle { fill: rgba(255,255,255,.18); }

.wsite-plexus .plex-links line {
  stroke: rgba(111,160,255,.3); stroke-width: 1.25; stroke-dasharray: 5 5;
}

.wsite-plexus .plex-halo { fill: none; stroke-width: 1; opacity: .3; }
.wsite-plexus .plex-disc { stroke-width: 1.5; }
.wsite-plexus .plex-icon path {
  fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.wsite-plexus .plex-node { transition: opacity .25s; }
.wsite-plexus .plex-node:hover { opacity: .78; }

.wsite-plexus .plex-b .plex-halo { stroke: #6FA0FF; }
.wsite-plexus .plex-b .plex-disc { fill: rgba(111,160,255,.14); stroke: rgba(111,160,255,.5); }
.wsite-plexus .plex-b .plex-icon path { stroke: #6FA0FF; }

.wsite-plexus .plex-g .plex-halo { stroke: #00E6B0; }
.wsite-plexus .plex-g .plex-disc { fill: rgba(0,230,176,.14); stroke: rgba(0,230,176,.5); }
.wsite-plexus .plex-g .plex-icon path { stroke: #00E6B0; }

@media (max-width: 900px) { .wsite-plexus { max-width: 400px; } }

/* ══ CARD TINTS ══
   Used by any .wsite-card that sits on a WHITE section, where a white card
   with a 1px border is technically present and visually absent. Declared once
   here and referenced by the value cards further down, so the two sections
   cannot drift into slightly different blues. */
:root {
  --tint-blue:  linear-gradient(160deg, #F6F9FF 0%, #E9F1FF 100%);
  --tint-green: linear-gradient(160deg, #F1FDF9 0%, #E2FAF2 100%);
  --tint-mix:   linear-gradient(160deg, #F4F8FF 0%, #E7FAF4 100%);
}

.wsite-card.wsite-tint-blue {
  background: var(--tint-blue); border-color: rgba(26,86,219,.22);
}
.wsite-tint-blue .wsite-icon { background: rgba(26,86,219,.12); color: #1A56DB; }
.wsite-card.wsite-tint-blue:hover {
  border-color: rgba(26,86,219,.4); box-shadow: 0 16px 40px rgba(26,86,219,.16);
}

.wsite-card.wsite-tint-green {
  background: var(--tint-green); border-color: rgba(0,200,150,.28);
}
.wsite-tint-green .wsite-icon { background: rgba(0,200,150,.14); color: #009e75; }
.wsite-card.wsite-tint-green:hover {
  border-color: rgba(0,200,150,.5); box-shadow: 0 16px 40px rgba(0,200,150,.18);
}

/* ══ CARDS ══ */
.wsite-card {
  background: #fff; border: 1px solid var(--color-border); border-radius: 16px;
  padding: 2rem; display: flex; flex-direction: column;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.wsite-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(15,27,60,.09);
  border-color: rgba(26,86,219,.25);
}
.wsite-card h3 {
  font-size: 1.1875rem; font-weight: 700; color: var(--color-dark);
  margin-bottom: .75rem;
}
.wsite-card p { font-size: .9375rem; color: var(--color-text-muted); line-height: 1.65; flex: 1; }
.wsite-icon {
  width: 52px; height: 52px; border-radius: 12px; background: var(--color-surface);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.25rem; flex-shrink: 0; color: var(--color-primary);
}
.wsite-more {
  font-family: var(--font-heading); font-size: .875rem; font-weight: 700;
  color: var(--color-primary); text-decoration: none;
  display: inline-flex; align-items: center; gap: .35rem; margin-top: 1.5rem;
}
.wsite-more:hover { gap: .6rem; }

/* ══ SERVICE CARDS (/coaching/) ══
   Every colour on the card comes from the single --accent set in the markup —
   the top rule, the icon tile, the wash behind it and the hover. One variable
   rather than four means a card can never end up half indigo and half green. */
.wsite-svc { position: relative; overflow: hidden; padding-top: 2.25rem; }
/* The wash. A pseudo-element at low opacity rather than a pre-mixed pale hex,
   because a tint computed from --accent cannot drift away from it. */
.wsite-svc::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--accent); opacity: .055; transition: opacity .2s;
}
.wsite-svc::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--accent);
}
/* The wash is painted over the card, so everything else needs lifting above it. */
.wsite-svc > * { position: relative; z-index: 1; }
.wsite-svc .wsite-icon {
  background: var(--accent); color: #fff;
  box-shadow: 0 8px 20px -6px var(--accent);
}
/* `scale:` rather than folding it into transform — .wsite-card:hover already
   owns `transform` for the lift, and the two are independent properties that
   compose instead of one clobbering the other. */
.wsite-svc {
  transition: transform .2s, box-shadow .2s, border-color .2s, scale .2s;
}
.wsite-svc:hover {
  border-color: var(--accent); box-shadow: 0 22px 46px -14px var(--accent);
  scale: 1.02;
}
.wsite-svc:hover::after { opacity: .13; }
/* The top rule thickens too, so the accent is unmistakably the thing that
   responded rather than a shadow that might just be the light. */
.wsite-svc:hover::before { height: 6px; }
.wsite-svc::before { transition: height .2s; }
/* Five cards into a 3-col auto-fit grid leaves two stretched across the last
   row. Capping the track keeps the orphans the same width as the rest. */
.wsite-svc-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 340px)); justify-content: center; }

/* A closing line and its button, centred under a grid of cards. Shared by the
   coaching services and the training reasons — not named for either, because
   the second page to want it is where a duplicate would have been made. */
.wsite-section-cta {
  margin-top: 2.5rem; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
}
.wsite-section-cta p { color: var(--color-text-muted); font-size: .9375rem; max-width: 34rem; }
/* Buttons need their own row: the parent is a column, so two of them as direct
   children would stack. */
.wsite-section-cta-actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }

/* ══ OUTCOME TILES (/coaching/) ══
   Eight of these, so the track minimum is what matters: 250px lands exactly 4
   across at desktop and 2 at tablet, which divides 8 evenly both times. Raise
   it and the last row becomes an orphan. */
.wsite-outcomes {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
/* These sit on a WHITE section, where a white tile with a 1px border is
   present and invisible — hence the surface fill rather than #fff. Quieter
   than the service cards above on purpose: that section is the offer, this one
   supports it, and two sets of equally loud cards flatten the page. */
.wsite-outcomes li {
  --accent: var(--color-primary);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: 14px; padding: 1.5rem 1.35rem;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.wsite-outcomes li:hover {
  transform: translateY(-3px);
  border-color: var(--accent); box-shadow: 0 14px 30px -12px var(--accent);
}
.wsite-outcomes li b {
  display: block; margin-bottom: .35rem;
  font-family: var(--font-heading); font-size: 1rem; font-weight: 700;
  color: var(--color-dark); line-height: 1.3;
}
.wsite-outcomes li > span:last-child {
  display: block; font-size: .875rem; line-height: 1.6; color: var(--color-text-muted);
}
.wsite-outcome-icon {
  width: 40px; height: 40px; border-radius: 11px; margin-bottom: .9rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff;
  box-shadow: 0 8px 18px -7px var(--accent);
}

/* ── value cards ──
   These sit on a WHITE section, so a white card with a 1px --color-border was
   effectively invisible — the shape was there, nothing read as a card. Each
   one now carries its own tint, so the card is defined by colour rather than
   by an edge nobody can see. */
.wsite-value { position: relative; overflow: hidden; }
.wsite-value::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
}
.wsite-value-num {
  position: absolute; top: 1.1rem; right: 1.4rem;
  font-family: var(--font-heading); font-size: 3.75rem; font-weight: 800;
  line-height: 1; opacity: .16;
}
/* The number is a watermark, so it must not sit above the words it backs. */
.wsite-value h3, .wsite-value p, .wsite-value .wsite-icon { position: relative; z-index: 1; }

/* Integrity — brand blue */
.wsite-card.wsite-value-blue {
  background: var(--tint-blue); border-color: rgba(26,86,219,.22);
}
.wsite-value-blue::before   { background: linear-gradient(90deg, #1A56DB, #4F86F7); }
.wsite-value-blue .wsite-icon    { background: rgba(26,86,219,.12); color: #1A56DB; }
.wsite-value-blue .wsite-value-num { color: #1A56DB; }
.wsite-card.wsite-value-blue:hover {
  border-color: rgba(26,86,219,.4); box-shadow: 0 16px 40px rgba(26,86,219,.16);
}

/* Commitment — brand green */
.wsite-card.wsite-value-green {
  background: var(--tint-green); border-color: rgba(0,200,150,.28);
}
.wsite-value-green::before  { background: linear-gradient(90deg, #00C896, #00A87D); }
.wsite-value-green .wsite-icon    { background: rgba(0,200,150,.14); color: #009e75; }
.wsite-value-green .wsite-value-num { color: #009e75; }
.wsite-card.wsite-value-green:hover {
  border-color: rgba(0,200,150,.5); box-shadow: 0 16px 40px rgba(0,200,150,.18);
}

/* Excellence — both, because it is the one that takes the other two further */
.wsite-card.wsite-value-mix {
  background: var(--tint-mix); border-color: rgba(26,86,219,.2);
}
.wsite-value-mix::before    { background: linear-gradient(90deg, #1A56DB, #00C896); }
.wsite-value-mix .wsite-icon      { background: rgba(26,86,219,.1); color: #1A56DB; }
.wsite-value-mix .wsite-value-num { color: #00A87D; }
.wsite-card.wsite-value-mix:hover {
  border-color: rgba(0,200,150,.42); box-shadow: 0 16px 40px rgba(26,86,219,.14);
}

/* ══ PURPOSE QUOTE ══ */
.wsite-purpose { text-align: center; max-width: 900px; margin: 0 auto; }
.wsite-purpose .rule {
  width: 56px; height: 3px; border-radius: 2px; margin: 0 auto 2rem;
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
}
.wsite-purpose blockquote {
  font-family: var(--font-heading);
  font-size: clamp(1.375rem, 3vw, 2rem); font-weight: 700;
  color: #fff; line-height: 1.5; margin: 0 0 2rem;
}
.wsite-purpose blockquote .hl { color: var(--color-secondary); }
.wsite-purpose cite {
  font-family: var(--font-heading); font-size: 1rem; font-weight: 500;
  color: rgba(255,255,255,.45); letter-spacing: .05em; font-style: normal;
}

/* ══ COURSE CARDS (the /courses/ listing) ══ */
.wsite-course {
  background: #fff; border: 1px solid var(--color-border); border-radius: 18px;
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .2s, box-shadow .2s;
}
.wsite-course:hover { transform: translateY(-4px); box-shadow: 0 20px 48px rgba(15,27,60,.12); }
.wsite-course-top {
  background: linear-gradient(135deg, var(--color-dark), #1a3668);
  padding: 1.75rem 1.75rem 1.5rem; color: #fff; position: relative;
}
.wsite-course-badges { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .9rem; }
.wsite-pill {
  font-family: var(--font-heading); font-size: .6875rem; font-weight: 700;
  letter-spacing: .04em; padding: .25rem .6rem; border-radius: 999px;
}
.wsite-pill-eb  { background: rgba(0,200,150,.16); color: #00e6b0; border: 1px solid rgba(0,200,150,.35); }
.wsite-pill-coh { background: rgba(255,255,255,.12); color: rgba(255,255,255,.85); border: 1px solid rgba(255,255,255,.2); }
.wsite-course-top h3 { font-size: 1.3125rem; font-weight: 800; line-height: 1.25; }

/* ── the trainer strip ──
   A rule above it rather than a background change: the strip belongs to the
   dark header, and boxing it would make it read as a separate band. */
.wsite-course-tutor {
  display: flex; align-items: center; gap: .75rem;
  margin-top: 1.1rem; padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,.15);
}
.wsite-course-avatar {
  position: relative; flex-shrink: 0;
  width: 60px; height: 60px; border-radius: 50%; overflow: hidden;
  /* A ring, not a border: the photos are shot on near-white and would otherwise
     bleed into the navy with no edge at all. */
  box-shadow: 0 0 0 2px rgba(255,255,255,.35), 0 6px 16px rgba(0,0,0,.35);
  background: linear-gradient(135deg, #1E3FD6, #00A9C4);
}
/* --focus and --zoom come from the card markup and differ per trainer; see the
   note on $blurbs in courses/index.php for why one shared crop cannot work.
   object-position picks the crop for a photo taller than the box; the scale is
   what a SQUARE source needs, because cover crops nothing there and leaves
   object-position with no effect at all. */
.wsite-course-avatar img {
  position: relative; z-index: 1;
  width: 100%; height: 100%; object-fit: cover;
  object-position: var(--focus, 50% 20%);
  transform: scale(var(--zoom, 1));
  transform-origin: var(--focus, 50% 20%);
}
/* The monogram underneath. Only ever seen if the <img> hides itself on error. */
.wsite-course-avatar > span[aria-hidden] {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-size: .9375rem; font-weight: 800; color: #fff;
}
.wsite-course-tutor-txt { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.wsite-course-tutor-txt strong {
  font-family: var(--font-heading); font-size: .875rem; font-weight: 700; color: #fff;
  line-height: 1.3;
}
.wsite-course-tutor-txt > span {
  font-size: .75rem; line-height: 1.35; color: rgba(255,255,255,.62);
}

.wsite-course-body { padding: 1.5rem 1.75rem 1.75rem; display: flex; flex-direction: column; flex: 1; }
.wsite-course-desc { font-size: .9375rem; color: var(--color-text-muted); line-height: 1.65; }

/* Replaces the four-column label/value grid. Same facts, no column labels and
   no two horizontal rules, so the block stops competing with the price. */
.wsite-course-chips {
  display: flex; flex-wrap: wrap; gap: .4rem;
  list-style: none; margin: 1.1rem 0 0; padding: 0;
}
.wsite-course-chips li {
  font-family: var(--font-heading); font-size: .75rem; font-weight: 700;
  color: var(--color-dark); background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: 999px; padding: .3rem .7rem;
}

/* auto pushes this to the bottom of the card, which is what keeps the two
   prices and the two buttons on the same line when the summaries differ. */
.wsite-course-foot {
  margin-top: auto; padding-top: 1.15rem;
  border-top: 1px solid var(--color-border);
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.wsite-course-price { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.wsite-course-now  { font-family: var(--font-heading); font-size: 1.875rem; font-weight: 800; color: var(--color-dark); line-height: 1; }
.wsite-course-was  { font-size: .9375rem; color: var(--color-text-muted); text-decoration: line-through; }
.wsite-course-save {
  font-family: var(--font-heading); font-size: .75rem; font-weight: 700;
  background: rgba(0,200,150,.12); color: #009e75; padding: .2rem .55rem; border-radius: 999px;
}
.wsite-course-starts { text-align: right; }
.wsite-course-starts span {
  display: block; font-size: .625rem; text-transform: uppercase;
  letter-spacing: .09em; color: var(--color-text-muted); font-weight: 600;
}
.wsite-course-starts strong {
  font-family: var(--font-heading); font-size: .9375rem; color: var(--color-dark);
}
.wsite-course-cta { margin-top: 1.15rem; }
.wsite-course-cta .wsite-btn { width: 100%; }

/* Narrow cards wrap the foot onto two lines, where right-aligning the start
   date does nothing (the box shrinks to its text) and reads as an accident.
   Stack it under the price on purpose instead. */
@media (max-width: 560px) {
  .wsite-course-foot { gap: .75rem; }
  .wsite-course-starts { text-align: left; }
  .wsite-course-top, .wsite-course-body { padding-left: 1.35rem; padding-right: 1.35rem; }
}

/* ══ SESSION GALLERY (/courses/) ══ */
/* A uniform grid rather than a masonry layout. The six photographs run from
   4:3 to almost 2:1, and letting each keep its own shape leaves ragged holes
   at every breakpoint; one ratio with object-fit: cover reads as a set. */
.wsite-gallery {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.wsite-shot {
  margin: 0; position: relative; border-radius: 14px; overflow: hidden;
  border: 4px solid #fff;
  box-shadow: 0 10px 30px rgba(15,27,60,.12);
  transition: transform .22s, box-shadow .22s;
}
.wsite-shot:hover { transform: translateY(-3px); box-shadow: 0 18px 44px rgba(15,27,60,.18); }
.wsite-shot img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
}
.wsite-shot figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.75rem .9rem .7rem;
  font-family: var(--font-heading); font-size: .8125rem; font-weight: 700;
  color: #fff;
  /* The caption sits over photographs of every brightness, so it carries its
     own scrim instead of trusting the image underneath to be dark enough. */
  background: linear-gradient(180deg, transparent, rgba(15,27,60,.85));
}

/* ══ NUMBERED STEPS (consultancy approach) ══ */
/* ══ PROCESS FLOW (/consultancy/ — Our Approach) ══
   Six steps joined by arrows. The column count is STATED at each breakpoint
   rather than left to auto-fit, and that is load-bearing: the arrow is a
   pseudo-element on each card, so hiding the one at the end of a row means
   knowing which card that is. With auto-fit nothing in CSS knows, and you get
   an arrow pointing into the margin. Change a count below and you must change
   its matching :nth-child list. */
.wsite-flow {
  --flow-gap: 30px;
  --flow-line: #C7D2E4;
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 2rem var(--flow-gap);
  grid-template-columns: repeat(6, 1fr);
}
.wsite-flow-step {
  --accent: var(--color-primary);
  position: relative;
  background: #fff; border: 1px solid var(--color-border);
  border-top: 4px solid var(--accent); border-radius: 14px;
  padding: 1.15rem .9rem 1.25rem; text-align: center;
  transition: box-shadow .2s, border-color .2s, scale .2s;
}
.wsite-flow-step:hover { scale: 1.03; box-shadow: 0 16px 34px -12px var(--accent); }

/* ── the connector ──
   Two pseudo-elements because one cannot be both a line and an arrowhead:
   ::before is the shaft across the gap, ::after the head at the far end. */
.wsite-flow-step::before {
  content: ""; position: absolute; top: 50%; left: 100%;
  width: var(--flow-gap); height: 2px; translate: 0 -50%;
  background: var(--flow-line);
}
.wsite-flow-step::after {
  content: ""; position: absolute; top: 50%; left: 100%;
  translate: calc(var(--flow-gap) - 7px) -50%;
  border-left: 7px solid var(--flow-line);
  border-top: 5px solid transparent; border-bottom: 5px solid transparent;
}
/* Last in the row — nothing to point at. */
.wsite-flow-step:nth-child(6)::before,
.wsite-flow-step:nth-child(6)::after { content: none; }

.wsite-flow-icon {
  width: 44px; height: 44px; border-radius: 12px; margin: 0 auto .6rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff;
  box-shadow: 0 8px 18px -7px var(--accent);
}
.wsite-flow-num {
  display: block; font-family: var(--font-heading); font-size: .625rem;
  font-weight: 800; letter-spacing: .12em; color: var(--accent);
}
.wsite-flow-step h3 {
  font-family: var(--font-heading); font-size: .9375rem; font-weight: 700;
  color: var(--color-dark); margin: .15rem 0 .55rem;
  padding-bottom: .55rem; border-bottom: 1px solid var(--color-border);
}
.wsite-flow-step p { font-size: .8125rem; line-height: 1.5; color: var(--color-text-muted); }

@media (max-width: 1180px) {
  .wsite-flow { grid-template-columns: repeat(3, 1fr); }
  .wsite-flow-step:nth-child(6)::before, .wsite-flow-step:nth-child(6)::after { content: ""; }
  .wsite-flow-step:nth-child(3n)::before,
  .wsite-flow-step:nth-child(3n)::after { content: none; }
}
@media (max-width: 780px) {
  .wsite-flow { grid-template-columns: repeat(2, 1fr); }
  .wsite-flow-step:nth-child(3n)::before, .wsite-flow-step:nth-child(3n)::after { content: ""; }
  .wsite-flow-step:nth-child(2n)::before,
  .wsite-flow-step:nth-child(2n)::after { content: none; }
}
/* Single column: the arrow turns to point DOWN, into the gap below the card,
   because that is now where the next step actually is. */
@media (max-width: 520px) {
  .wsite-flow { grid-template-columns: 1fr; gap: var(--flow-gap); }
  .wsite-flow-step:nth-child(2n)::before, .wsite-flow-step:nth-child(2n)::after { content: ""; }
  .wsite-flow-step::before {
    top: 100%; left: 50%; width: 2px; height: var(--flow-gap); translate: -50% 0;
  }
  .wsite-flow-step::after {
    top: 100%; left: 50%;
    translate: -50% calc(var(--flow-gap) - 7px);
    border-left: 5px solid transparent; border-right: 5px solid transparent;
    border-top: 7px solid var(--flow-line); border-bottom: 0;
  }
  .wsite-flow-step:last-child::before,
  .wsite-flow-step:last-child::after { content: none; }
}

/* ══ TILES (industries) ══ */
/* 250px, not 180: eight tiles at 180 fall 6-then-2 and the short second row
   reads as unfinished. 250 forces 4 across on desktop and 2 on tablet, and 8
   divides evenly by both. Re-check this if a ninth sector is added. */
.wsite-tiles { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }

/* The float uses `translate:`, NOT a transform — they are independent
   properties, so the hover below can still apply `scale:` without the running
   animation overriding it. Written as `transform` on both, the animation wins
   and the hover does nothing. */
@keyframes wsite-tile-float { 50% { translate: 0 -7px; } }

.wsite-tile {
  --accent: var(--color-primary);
  position: relative; overflow: hidden;
  /* A solid accent border rather than accent text: the greens in this ramp
     cannot carry 4.5:1 as 15px type on white, but a border is non-text and
     only owes 3:1, which every one of them clears. */
  background: #fff; border: 1px solid var(--accent); border-radius: 12px;
  padding: 1.25rem 1rem; text-align: center;
  font-family: var(--font-heading); font-size: .9375rem; font-weight: 600;
  color: var(--color-dark);
  transition: box-shadow .2s, scale .2s;
  animation: wsite-tile-float 4.5s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * .3s);
}
/* The wash, from the same --accent, so a tint can never drift from its border. */
.wsite-tile::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--accent); opacity: .07; transition: opacity .2s;
}
/* Paused on hover so the tile holds still while it is being read — a target
   that is still drifting is a target you have to chase. */
.wsite-tile:hover {
  animation-play-state: paused;
  scale: 1.04; box-shadow: 0 14px 30px -10px var(--accent);
}
.wsite-tile:hover::before { opacity: .16; }

/* ══ COACH PROFILE ══ */
/* stretch, not start: the photo column is sized BY the bio column, which is the
   whole balancing mechanism. Changing this back to start re-opens the gutter. */
.wsite-coach { display: grid; gap: 3rem; grid-template-columns: minmax(260px, 380px) 1fr; align-items: stretch; }
@media (max-width: 900px) {
  .wsite-coach { grid-template-columns: 1fr; gap: 2rem; }
  /* Stacked there is no second column to match, so the portrait goes back to
     its own ratio instead of stretching to the full height of the bio. */
  .wsite-coach-photo { height: auto; min-height: 0; }
  .wsite-coach-photo img { height: auto; aspect-ratio: 4 / 5; }
}
.wsite-coach-photo {
  border-radius: 18px; overflow: hidden; border: 1px solid var(--color-border);
  box-shadow: 0 18px 44px -18px rgba(15,27,60,.45);
  height: 100%; min-height: 420px;
}
/* height:100% against a stretched grid item is what lets the portrait match the
   bio's height exactly; cover then crops the sides rather than squashing him.
   Framed slightly high because the face sits in the upper third. */
.wsite-coach-photo img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 18%;
}
.wsite-coach h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; color: var(--color-dark); }

/* Post-nominals as chips. Four ® marks inside the <h2> wrapped it to three
   lines and made the heading unreadable at a glance. */
.wsite-coach-certs {
  list-style: none; padding: 0; margin: .7rem 0 .9rem;
  display: flex; flex-wrap: wrap; gap: .4rem;
}
.wsite-coach-certs li {
  font-family: var(--font-heading); font-size: .75rem; font-weight: 700;
  color: var(--color-primary); background: rgba(26,86,219,.09);
  border: 1px solid rgba(26,86,219,.2); border-radius: 999px; padding: .25rem .65rem;
}
.wsite-coach-role { font-family: var(--font-heading); font-weight: 600; color: var(--color-primary); margin: 0 0 1.25rem; }
.wsite-coach-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.wsite-coach p { font-size: .9375rem; color: var(--color-text-muted); line-height: 1.75; margin-bottom: 1rem; }
.wsite-stats { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1.5rem 0; }
.wsite-stat {
  background: var(--color-surface); border-radius: 12px; padding: .9rem 1.25rem; min-width: 110px;
}
/* White, because the coach block sits on a .wsite-section-surface whose
   background is --color-surface — the exact fill these default to, so the chips
   were being drawn and were invisible. */
.wsite-coach .wsite-stat { background: #fff; border: 1px solid var(--color-border); }
/* Stacked on a phone these size to their own text — "16+" narrow, "TRAINED
   PROFESSIONAL COACH" wide — and the ragged left column reads as broken. */
@media (max-width: 560px) {
  .wsite-coach .wsite-stats { display: grid; grid-template-columns: 1fr; gap: .6rem; }
}
@media (max-width: 900px) { .wsite-coach-aside .wsite-stats { flex-direction: row; } }
.wsite-stat b { display: block; font-family: var(--font-heading); font-size: 1.5rem; font-weight: 800; color: var(--color-primary); }
.wsite-stat span { font-size: .75rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.wsite-creds { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.wsite-creds li {
  position: relative; padding-left: 1.6rem; margin-bottom: .5rem;
  font-size: .9375rem; color: var(--color-text-muted);
}
.wsite-creds li::before {
  content: ""; position: absolute; left: 0; top: .45rem;
  width: 8px; height: 8px; border-radius: 50%; background: var(--color-secondary);
}

/* ══ CONTACT ══ */
.wsite-contact-grid { display: grid; gap: 2.5rem; grid-template-columns: 1.35fr 1fr; align-items: start; }
@media (max-width: 900px) { .wsite-contact-grid { grid-template-columns: 1fr; } }
.wsite-form-card {
  background: #fff; border: 1px solid var(--color-border); border-radius: 18px;
  padding: 2rem; box-shadow: 0 10px 34px rgba(15,27,60,.05);
}
.wsite-field { margin-bottom: 1.15rem; }
.wsite-field label {
  display: block; font-family: var(--font-heading); font-size: .8125rem;
  font-weight: 700; color: var(--color-dark); margin-bottom: .4rem;
}
.wsite-field .req { color: var(--color-error); }
.wsite-field input, .wsite-field select, .wsite-field textarea {
  width: 100%; font-family: var(--font-body); font-size: .9375rem;
  padding: .7rem .85rem; border: 1px solid var(--color-border);
  border-radius: 9px; background: #fff; color: var(--color-text);
  transition: border-color .18s, box-shadow .18s;
}
.wsite-field textarea { min-height: 130px; resize: vertical; }
.wsite-field input:focus, .wsite-field select:focus, .wsite-field textarea:focus {
  outline: none; border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(26,86,219,.12);
}
.wsite-field .err { display: block; margin-top: .35rem; font-size: .8125rem; color: var(--color-error); }
.wsite-field.has-err input, .wsite-field.has-err select, .wsite-field.has-err textarea {
  border-color: var(--color-error);
}
.wsite-alert { border-radius: 10px; padding: .9rem 1.1rem; font-size: .9375rem; margin-bottom: 1.25rem; }
.wsite-alert-ok  { background: rgba(0,200,150,.1);  border: 1px solid rgba(0,200,150,.3);  color: #067a5c; }
.wsite-alert-bad { background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.28); color: #b91c1c; }

.wsite-info { display: flex; flex-direction: column; gap: 1.25rem; }
.wsite-info-item { display: flex; gap: .9rem; align-items: flex-start; }
.wsite-info-item .wsite-icon { width: 42px; height: 42px; border-radius: 10px; margin: 0; }
.wsite-info-item h3 { font-size: .875rem; font-weight: 700; color: var(--color-dark); margin-bottom: .2rem; }
.wsite-info-item p, .wsite-info-item a {
  font-size: .9375rem; color: var(--color-text-muted); text-decoration: none; line-height: 1.55;
}
.wsite-info-item a:hover { color: var(--color-primary); }

/* ══ CTA STRIP ══ */
.wsite-cta {
  background: linear-gradient(135deg, var(--color-primary) 0%, #1248B8 100%);
  padding: 4.5rem 0; position: relative; overflow: hidden;
}
.wsite-cta::after {
  content: ""; position: absolute; top: -50%; right: -5%;
  width: 400px; height: 400px; border-radius: 50%;
  background: rgba(255,255,255,.04); pointer-events: none;
}
.wsite-cta-inner {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2rem;
}
.wsite-cta h2 {
  font-size: clamp(1.375rem, 3vw, 1.875rem); font-weight: 800;
  color: #fff; margin-bottom: .35rem;
}
.wsite-cta p { font-size: 1rem; color: rgba(255,255,255,.7); }
.wsite-cta-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; color: var(--color-primary); border-radius: 10px;
  font-family: var(--font-heading); font-weight: 700; font-size: 1rem;
  padding: .875rem 2rem; text-decoration: none; flex-shrink: 0;
  transition: transform .18s, box-shadow .18s;
}
.wsite-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,.18); }

/* ══ FOOTER ══ */
.wsite-footer { background: var(--color-dark); color: rgba(255,255,255,.62); padding: 4.5rem 0 2rem; }
.wsite-footer-grid {
  display: grid; gap: 2.5rem;
  grid-template-columns: 1.6fr 1fr 1.3fr 1.3fr;
}
@media (max-width: 1024px) { .wsite-footer-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem 2rem; } }
@media (max-width: 620px)  { .wsite-footer-grid { grid-template-columns: 1fr; } }

.wsite-fcol h3 {
  font-size: .875rem; font-weight: 700; color: #fff;
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: 1.1rem;
}
.wsite-fcol ul { list-style: none; padding: 0; margin: 0; }
.wsite-fcol li { margin-bottom: .6rem; font-size: .9375rem; line-height: 1.5; }
.wsite-fcol a { color: rgba(255,255,255,.62); text-decoration: none; transition: color .18s; }
.wsite-fcol a:hover { color: var(--color-secondary); }
.wsite-fbrand img { width: 132px; height: auto; margin-bottom: 1.1rem; }
.wsite-ftagline { font-family: var(--font-heading); font-weight: 600; color: var(--color-secondary); margin-bottom: .6rem; }
.wsite-fbrandline { font-size: .9375rem; line-height: 1.7; max-width: 22rem; }
.wsite-social { display: flex; gap: .6rem; margin-top: 1.25rem; }
.wsite-social a {
  width: 36px; height: 36px; border-radius: 9px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.72);
  transition: background .18s, color .18s;
}
.wsite-social a:hover { background: var(--color-primary); color: #fff; }
.wsite-fcontact li { line-height: 1.6; }

.wsite-fbottom {
  margin-top: 3rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.1);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem;
  font-size: .875rem;
}
.wsite-flegal { display: flex; gap: 1.25rem; }
@media (max-width: 620px) { .wsite-fbottom { flex-direction: column; text-align: center; } }