/* Bezalel — Our Approach (Journey) page specific styles */

/* Hero: full-bleed illustration with text printed onto it — real <img> so the whole scene
   shows (never cropped like a background-cover would), wave cut into the bottom edge to
   match the site's other image sections.
   .approach-hero-visual holds ONLY the image + wave (sized to the image's own height);
   the text blocks are separate siblings so, on narrow screens, they can drop into normal
   flow below the (now short) image instead of being crammed onto it — same split used on
   the Programmes page frames. */
.approach-hero{position:relative;width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);}
.approach-hero-visual{position:relative;line-height:0;}
.approach-hero-img{display:block;width:100%;height:auto;}
/* Dark scrim over the image's own open-sky/path side, so the text block sitting on top of
   it (right-aligned) reads clearly without relying on text-shadow alone — matches the
   client's reference layout for this image. Desktop only: on the mobile crop the text
   drops into normal flow below the image instead of sitting on top of it. */
.approach-hero-scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,rgba(8,22,37,0) 42%,rgba(8,22,37,.35) 60%,rgba(8,22,37,.62) 100%);
}
@media (max-width:700px){
  .approach-hero-scrim{display:none;}
}
.approach-hero-wave{position:absolute;left:0;bottom:-1px;width:100%;height:90px;z-index:2;}
@media (max-width:599px){
  .approach-hero-wave{height:50px;}
}

/* Desktop: solid banner (cream, matching this page's own background) instead of a floating
   transparent overlay. .approach-hero uses margin-top rather than padding so the whole box —
   image, wave, eyebrow, textblock — shifts down as one unit; every child's top:Npx offset is
   still measured from THIS box's own edge, so nothing inside needs recalculating. Mobile
   keeps the original fixed overlay untouched. */
.topnav:not(.solid) .brand{color:var(--navy);}
.topnav:not(.solid) .nav-links a{color:var(--navy);}
.topnav:not(.solid) .nav-links a.active{color:var(--gold);}
.topnav:not(.solid) .nav-toggle span{background:var(--navy);}
@media (min-width:861px){
  .topnav,.topnav.solid{
    background:color-mix(in srgb, var(--cream) 82%, transparent);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    box-shadow:0 2px 20px rgba(23,59,98,.08);
  }
  .approach-hero{margin-top:var(--nav-h);}
}

/* Eyebrow: pinned to the very top of the image, centered across its full width — sits
   well clear of the heading below it (was close enough at 96px to visually collide with
   it once the heading block was pulled up). Desktop only; mobile keeps its own top value
   in the media query below since it never had this overlap. */
.approach-hero-top{position:absolute;top:36px;left:0;right:0;z-index:3;text-align:center;}
.approach-hero-eyebrow{
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:#FFFFFF;text-shadow:0 2px 4px rgba(0,0,0,.85),0 0 18px rgba(0,0,0,.6);
  display:inline-block;opacity:0;transform:translate(0,-10px);
  transition:opacity .6s ease,transform .6s ease;
}
@media (max-width:700px){
  .approach-hero-top{position:absolute;top:90px;padding-top:0;text-align:center;}
  .approach-hero-eyebrow{color:#FFFFFF;text-shadow:0 2px 4px rgba(0,0,0,.85),0 0 18px rgba(0,0,0,.6);}
}

/* Text block: right-aligned column, stacked over the image's own open sky/city side
   (two-tone heading, thin accent rule, paragraph, a lighter full-width rule, then an
   icon + closing line). Reveal slides in from the right (translateX) as well as up,
   matching the block's position on that side of the frame. */
/* Whole column sized to stay clear of the image's bottom edge (and the wave sitting on
   top of it) at every width this hero renders at — width widened (52% instead of 58%) so
   the cursive subtitle and the paragraph both wrap to fewer, shorter lines, and every
   piece below (top offset, heading size, subtitle size, rule margins, paragraph size) was
   trimmed to match, since together the old sizes ran the block past the image on desktop. */
.approach-hero-textblock{
  position:absolute;top:104px;left:52%;right:6%;z-index:2;
}
.approach-hero-heading{
  font-family:var(--font-display);font-weight:600;color:#FFFFFF;
  font-size:clamp(24px,3.4vw,40px);line-height:1.15;
  margin:0;text-shadow:0 2px 5px rgba(0,0,0,.9),0 0 26px rgba(0,0,0,.65);
  opacity:0;transform:translate(28px,18px);
  transition:opacity .7s cubic-bezier(.16,.72,.28,1),transform .7s cubic-bezier(.16,.72,.28,1);
}
.approach-hero-heading span{
  display:block;color:#FFC969;font-weight:400;
  font-family:'Alex Brush',cursive;font-size:1.1em;line-height:1.15;margin-top:.05em;
}
.approach-hero-rule{height:1px;background:linear-gradient(to right,#FFC969,rgba(255,201,105,0));}
.approach-hero-rule-accent{width:90px;margin:12px 0 16px;transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.16,.72,.28,1);}

/* ---------- Value statement: sits directly under the heading, inside the same
   .approach-hero-textblock column, so it shares its alignment (left on desktop, centred
   on mobile) rather than floating as a separate block. Text-shadow (not a background)
   keeps it legible against whatever part of the photo shows through. */
.approach-hero-card{
  margin-top:22px;
  opacity:0;transform:translate(0,20px);
  transition:opacity .7s ease,transform .7s ease;
}

.approach-hero-card-text{
  font-family:var(--font-display);font-size:clamp(13.5px,1.35vw,16px);line-height:1.75;
  color:#F3E7D9;margin:0;text-align:left;
  text-shadow:0 1px 4px rgba(0,0,0,.8),0 0 14px rgba(0,0,0,.5);
}
.approach-hero-card-text .hl{font-weight:700;}
.hl-love{color:#EBA88F;}
.hl-belonging{color:#F0C868;}
.hl-opportunity{color:#ABC98F;}
.hl-confidence{color:#F0C868;}
@media (max-width:700px){
  .approach-hero-card{
    position:absolute;bottom:70px;left:5%;right:5%;z-index:3;margin-top:0;
  }
  .approach-hero-card-text{text-align:center;}
}

.approach-hero-statement-row{
  display:flex;align-items:flex-start;gap:16px;max-width:400px;
  opacity:0;transform:translate(24px,16px);
  transition:opacity .6s ease,transform .6s ease;
}
.approach-hero-statement{
  font-size:clamp(14px,1.5vw,16.5px);line-height:1.55;color:#FFFFFF;margin:2px 0 0;
  text-shadow:0 2px 4px rgba(0,0,0,.9),0 0 20px rgba(0,0,0,.6);
}
.approach-hero-statement strong{color:#FFC969;font-weight:700;}

@media (max-width:700px){
  /* .approach-hero-textblock itself stays in normal flow (rule/lead/statement drop below
     the image, same as before) — only the heading breaks out to sit ON the photo, below the
     "Our Approach" eyebrow. Its nearest positioned ancestor is .approach-hero (the textblock
     is no longer positioned), so top is measured from the top of the whole hero, which lines
     up with the top of the image since .approach-hero-visual is the first child. */
  /* Both remaining textblock children (heading, lead) are pulled onto the photo via their
     own absolute positioning below, so the block itself never has in-flow content on mobile
     any more — zero padding, or it's just an empty box holding the next section down. */
  .approach-hero-textblock{
    position:static;left:auto;right:auto;
    padding:0;text-align:center;
  }
  .approach-hero-heading{
    position:absolute;top:130px;left:5%;right:5%;z-index:3;
    color:#FFFFFF;text-shadow:0 2px 5px rgba(0,0,0,.9),0 0 26px rgba(0,0,0,.65);font-size:26px;
  }
  .approach-hero-heading span{color:#FFC969;}
  .approach-hero-rule-accent{display:none;}
  /* Pull the next section up snug under the image now that the statement row is gone and
     the textblock is empty — sitewide .section padding-top (100px) left a big dead gap. */
  .approach-hero + .section{padding-top:32px;}
}

/* staged entrance, sequenced in js/approach.js */
#approachHero.eyebrow-in .approach-hero-eyebrow{opacity:1;transform:translate(0,0);}
#approachHero.heading-in .approach-hero-heading{opacity:1;transform:translate(0,0);}
#approachHero.rule1-in .approach-hero-rule-accent{transform:scaleX(1);}
#approachHero.lead-in .approach-hero-card{opacity:1;transform:translate(0,0);}
#approachHero.statement-in .approach-hero-statement-row{opacity:1;transform:translate(0,0);}

@media (prefers-reduced-motion:reduce){
  .approach-hero-eyebrow,.approach-hero-heading,.approach-hero-rule-accent,
  .approach-hero-card,.approach-hero-statement-row{
    transition:none !important;
  }
}

.lead-line{text-align:center;color:var(--ink-muted);max-width:560px;margin:0 auto 50px;font-size:16.5px;line-height:1.65;}

/* Ecological-intro paragraph now reads as part of the same white block as the
   .journey section right after it — the hero's own wave (above) is filled to
   match so the two whites read as one continuous field, not a seam. */
.approach-ecological{background:#FFFFFF;}

/* ============================================================================
   "Where It Begins" — pixel-reference rebuild.
   The client's own photo (pregnant woman, sunlit meadow) is the ONLY image;
   everything else here — heading, six factors, connecting lines, closing card —
   is live HTML/CSS printed on top of it, full-bleed edge to edge. Colours and
   the two typefaces are scoped to this section via local custom properties so
   they don't touch the site's own --navy/--gold/--font-* used everywhere else.
   ============================================================================ */
.begins{
  --begins-navy:#14395E;
  --begins-gold:#C28A2D;
  --begins-green:#5B7E3C;
  --begins-pink:#C55A5A;
  --begins-purple:#6A57A5;
  --begins-blue:#3B6E99;
  --begins-cream:#F9F3E7;
  --begins-font-heading:'Times New Roman',Times,serif;
  --begins-font-body:'Times New Roman',Times,serif;
  position:relative;width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  background:var(--begins-cream);padding-bottom:36px;
}
/* Full-bleed photo — touches both edges of the viewport, no radius, no gap. A soft cream
   gradient (::before) blends the page's own background into the sky at the top — no wave
   shape, just a plain fade, and it uses the section's own --begins-cream so there's no
   colour seam against the page's sitewide --cream. */
.begins-media{position:relative;width:100%;line-height:0;overflow:hidden;}
.begins-media-img{display:block;width:100%;height:auto;}
.begins-media::before{
  content:'';position:absolute;top:0;left:0;right:0;height:22%;z-index:3;pointer-events:none;
  background:linear-gradient(to bottom, var(--begins-cream) 0%, rgba(249,243,231,.55) 45%, rgba(249,243,231,0) 100%);
}

/* Heading block prints directly onto the photo's open sky, top-centre. */
.begins-heading{
  position:absolute;top:6%;left:50%;transform:translateX(-50%);z-index:4;
  width:min(90%,640px);text-align:center;
}
.begins-heading h2{
  font-family:var(--begins-font-heading);font-weight:700;color:var(--begins-navy);
  font-size:12px;line-height:1.1;margin:0;
  text-transform:uppercase;letter-spacing:.14em;
  text-shadow:0 2px 10px rgba(255,255,255,.7),0 1px 2px rgba(255,255,255,.9);
}
.begins-subtitle{
  font-family:var(--begins-font-heading);font-style:italic;font-weight:600;color:var(--begins-gold);
  font-size:clamp(14px,2vw,20px);line-height:1.5;margin:10px 0 0;
  text-shadow:0 1px 8px rgba(255,255,255,.7);
}
.begins-desc{
  font-family:var(--begins-font-body);color:#333;
  font-size:clamp(12.5px,1.4vw,15px);line-height:1.5;margin:14px auto 0;max-width:480px;
  text-shadow:0 1px 6px rgba(255,255,255,.6);
}
.begins-desc + .begins-desc{margin-top:1em;}

/* Fallback: plain stacked cards, phones only — the flanking layout needs real width. */
.begins-fallback{display:grid;gap:16px;grid-template-columns:1fr;max-width:640px;margin:0 auto;position:relative;z-index:2;padding:40px 24px;}
.begins-fallback .card{display:flex;align-items:flex-start;gap:14px;text-align:left;}
.begins-fallback .card h3{margin:0 0 4px;font-size:15px;font-family:var(--begins-font-heading);color:var(--ic, var(--begins-navy));}
.begins-fallback .card p{margin:0;font-size:13.5px;font-family:var(--begins-font-body);}

.begins-row{list-style:none;margin:0;padding:0;display:none;}

/* Client's own circular badge illustrations. Each source PNG doesn't quite fill its own
   square canvas — it's a glossy button with a soft-shadowed white margin around it — so
   .begins-item-icon is a fixed circular window and the <img> inside is zoomed past 100%
   and centred, cropping that margin away while the icon's on-screen size stays fixed. */
.begins-item-icon{
  flex-shrink:0;position:relative;overflow:hidden;
  width:44px;height:44px;border-radius:50%;
  background:none;border:none;padding:0;cursor:pointer;
  box-shadow:0 6px 16px rgba(20,57,94,.18);transition:transform .25s ease,box-shadow .25s ease;
}
.begins-item-icon img{
  position:absolute;top:50%;left:50%;width:138%;height:138%;max-width:none;
  transform:translate(-50%,-50%);object-fit:cover;
}
.begins-item:hover .begins-item-icon,
.begins-item-icon:focus-visible{transform:scale(1.08);box-shadow:0 8px 20px rgba(20,57,94,.28);}

/* Description stays hidden inside the badge until the cursor (or keyboard focus) reaches
   it, then pops up as a small card — same pattern as the site's other hover tooltips. */
.begins-item-copy{
  position:absolute;left:50%;bottom:calc(100% + 12px);
  transform:translateX(-50%) translateY(6px);
  width:225px;text-align:left;
  background:var(--card);border-radius:14px;padding:16px 18px;
  box-shadow:0 14px 34px rgba(20,57,94,.22);
  opacity:0;pointer-events:none;z-index:10;
  transition:opacity .22s ease,transform .22s ease;
}
.begins-item:hover .begins-item-copy,
.begins-item-icon:focus-visible ~ .begins-item-copy{
  opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0);
}

.begins-quote{
  position:relative;z-index:2;display:flex;align-items:center;gap:16px;
  max-width:680px;margin:36px auto 0;padding:22px 28px;
  background:var(--card);border-radius:18px;box-shadow:var(--shadow-sm);
}
.begins-quote-icon{
  flex-shrink:0;display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;
  background:color-mix(in srgb, var(--begins-gold) 18%, transparent);color:var(--begins-gold);
}
.begins-quote-icon svg{width:18px;height:18px;}
.begins-quote p{
  flex:1;margin:0;font-family:var(--begins-font-heading);font-size:15.5px;line-height:1.55;color:var(--begins-navy);
}
.begins-quote strong{color:var(--begins-gold);}
.begins-quote-leaf{flex-shrink:0;width:40px;height:24px;color:var(--begins-green);opacity:.6;display:none;}

@media (min-width:520px){
  .begins-quote-leaf{display:block;}
}

@media (min-width:768px){
  .begins-fallback{display:none;}
  .begins-row{display:block;position:absolute;left:0;bottom:9%;width:100%;height:1px;z-index:4;}

  /* One row, lined up low over the meadow. --ix places each badge along the row; the
     reveal fade-in (opacity/translateY) and the idle float both drive the SAME transform
     property, so the float keyframes restate the centring translate at each step and pick
     up from wherever the reveal left off — no jump when the loop takes over. */
  .begins-item{
    position:absolute;top:0;left:var(--ix);
    opacity:0;transform:translate(-50%,-50%) translateY(14px);
    transition:opacity .7s ease,transform .7s ease;transition-delay:calc(var(--d,0) * .1s);
  }
  .begins-item.is-visible{
    opacity:1;transform:translate(-50%,-50%);
    animation:beginsFloat 4.2s ease-in-out calc(var(--bob,0) * -0.7s) infinite;
  }
  .begins-item:hover,.begins-item:focus-within{animation-play-state:paused;}

  @keyframes beginsFloat{
    0%,100%{transform:translate(-50%,-50%) translateY(0);}
    50%{transform:translate(-50%,-50%) translateY(-9px);}
  }

  .begins-item-copy h3{margin:0 0 6px;font-size:14px;line-height:1.3;font-family:var(--begins-font-heading);color:var(--ic);}
  .begins-item-copy p{margin:0;font-size:11.5px;line-height:1.5;color:var(--begins-navy);font-family:var(--begins-font-body);}
}

@media (min-width:1100px){
  .begins-item-copy h3{font-size:16px;}
  .begins-item-copy p{font-size:13px;}
  .begins-item-icon{width:52px;height:52px;}
}

@media (prefers-reduced-motion:reduce){
  .begins-item.is-visible{animation:none;}
}

@media (prefers-reduced-motion:reduce){
  .begins-item,.begins-line,.begins-line-heart{transition:none;}
}

/* "Our Belief" — client illustration (five kids, backs turned, watching the sunset) as the
   section's background. The art itself leaves the left half plain/empty, so the text column
   sits there, left-aligned, with the illustration showing through on the right. A left-to-
   right cream scrim keeps the text readable at any viewport width without hiding the art. */
.belief-bg{
  position:relative;padding:0 24px 100px;
  background-image:linear-gradient(to right, var(--cream) 0%, var(--cream) 42%, rgba(251,241,226,.55) 60%, rgba(251,241,226,0) 78%),
                    url('../assets/images/our-belief-bg.png');
  background-repeat:no-repeat;background-size:cover;background-position:center;
}
.belief-top-label{
  position:relative;z-index:3;text-align:center;padding:28px 24px 0;margin:0 0 8px;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--gold);
}
.belief-heading-overlay{
  position:absolute;top:76px;left:52%;right:4%;z-index:3;text-align:center;
}
.belief-heading-overlay h2{
  font-size:clamp(26px,3.6vw,48px);line-height:1.2;margin:0;color:var(--navy-deeper);
  text-shadow:0 2px 10px rgba(255,255,255,.85),0 1px 3px rgba(255,255,255,.9);
}

@media (max-width:899px){
  .belief-heading-overlay{position:relative;top:auto;left:auto;right:auto;text-align:left;margin:0 0 20px;}
  .belief-heading-overlay h2{font-size:clamp(28px,6vw,40px);}
}

/* "Our Belief" section: traits Bezalel rejects. Each word types itself in letter by
   letter, pauses, then a hand-drawn stroke crosses it out — sequenced by js/approach.js,
   triggered once by IntersectionObserver. The strike is an SVG path animated via
   stroke-dashoffset (length read at runtime with getTotalLength(), so the curve can be
   whatever shape looks hand-drawn without needing the pixel length precomputed). */
.reject-sequence{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:0 0 24px;}

.reject-pill{
  position:relative;display:inline-flex;align-items:center;padding:7px 16px;min-height:1.6em;
  border-radius:999px;background:rgba(139,111,78,.12);color:var(--bark);
  font-family:var(--font-display);font-style:italic;font-size:14.5px;
  opacity:0;transform:translateY(6px);transition:opacity .4s ease,transform .4s ease;
}
.reject-pill.is-active{opacity:1;transform:translateY(0);}

.reject-pill-text{white-space:pre;}
.reject-pill-caret{
  display:inline-block;width:1px;height:1em;background:var(--bark);margin-left:2px;
  vertical-align:-2px;opacity:0;
}
.reject-pill.is-typing .reject-pill-caret{opacity:1;animation:reject-caret-blink 1s steps(1) infinite;}

.reject-pill-strike{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;}
.reject-pill-strike path{fill:none;stroke:#6B5138;stroke-width:1.8;stroke-linecap:round;}

@keyframes reject-caret-blink{0%,49%{opacity:1;}50%,100%{opacity:0;}}

@media (prefers-reduced-motion:reduce){
  .reject-pill{transition:none;}
  .reject-pill-caret{display:none;}
}

/* Simple check-list used where a short set of actions needs more weight than chips */
.check-list{list-style:none;max-width:560px;margin:28px auto 0;padding:0;display:grid;gap:16px;text-align:left;}
.check-list li{display:flex;align-items:flex-start;gap:12px;font-family:var(--font-display);font-size:16.5px;line-height:1.5;color:var(--navy-deeper);}

/* "A Child Never Grows Up Alone" — client-supplied illustration (child + 7 factor badges)
   with real text labels overlaid at the badge positions (--lx/--ly, percentages of the
   image box) so the copy stays live HTML at the site's own type, not baked into the image.
   Desktop and mobile use different source images with different badge layouts, so each
   gets its own coordinate set and the two swap by breakpoint. */
.network-visual{
  position:relative;width:100vw;margin:0 calc(50% - 50vw) 0;overflow:hidden;
}
.network-visual::before{
  content:'';position:absolute;top:0;left:0;right:0;height:130px;z-index:3;
  background:linear-gradient(to bottom, var(--cream) 0%, rgba(251,241,226,0) 100%);
  pointer-events:none;
}
.network-visual-img{display:block;width:100%;height:auto;}
.network-visual-mobile{display:block;}
.network-visual-desktop{display:none;}

@media (min-width:640px){
  .network-visual-mobile{display:none;}
  .network-visual-desktop{display:block;}
}

/* Labels sit OUTSIDE each badge (never on top of it): lbl-top/-bottom push straight up/down
   off the badge and stay centered; lbl-left/-right (desktop only, mobile has no horizontal
   room) sit beside the badge instead. --lx/--ly mark the badge-clear anchor point, not the
   badge center. No background chip behind the text — legibility over the photo comes from a
   soft white glow (text-shadow) instead. Each label fades in on its own stagger (--ld) once
   the parent .network-visual is revealed; only opacity animates, so the positioning transform
   set by the lbl-* modifier is never touched. */
.network-label{
  position:absolute;left:var(--lx);top:var(--ly);z-index:4;
  display:flex;flex-direction:column;gap:2px;width:130px;pointer-events:none;
  opacity:0;transition:opacity .7s ease;transition-delay:calc(var(--ld,0) * .12s);
}
.network-visual.is-visible .network-label{opacity:1;}
.network-label.lbl-top{transform:translate(-50%,-100%);align-items:center;text-align:center;}
.network-label.lbl-bottom{transform:translate(-50%,0);align-items:center;text-align:center;}
.network-label.lbl-left{transform:translate(-100%,-50%);align-items:flex-end;text-align:right;}
.network-label.lbl-right{transform:translate(0,-50%);align-items:flex-start;text-align:left;}

.network-label h3{
  font-family:var(--font-display);font-size:11px;margin:0;line-height:1.2;color:var(--tc, var(--navy-deeper));
  text-shadow:-1px -1px 2px rgba(255,255,255,.85),1px -1px 2px rgba(255,255,255,.85),-1px 1px 2px rgba(255,255,255,.85),1px 1px 2px rgba(255,255,255,.85),0 2px 6px rgba(255,255,255,.6);white-space:nowrap;
}
.network-label p{
  font-family:var(--font-body);font-size:9px;line-height:1.3;margin:0;color:#000;
  text-shadow:-1px -1px 2px rgba(255,255,255,.85),1px -1px 2px rgba(255,255,255,.85),-1px 1px 2px rgba(255,255,255,.85),1px 1px 2px rgba(255,255,255,.85),0 2px 6px rgba(255,255,255,.6);
}

@media (max-width:639px){
  .network-label{width:100px;}
  .network-label h3{font-size:9.5px;}
  .network-label p{font-size:8px;line-height:1.25;}
}

@media (prefers-reduced-motion:reduce){
  .network-label{transition:none;}
}

.check-list li svg{flex-shrink:0;width:20px;height:20px;margin-top:3px;color:var(--gold);}

.closing-quote{max-width:640px;margin:0 auto;text-align:center;}
.closing-quote .eyebrow-script{font-family:var(--font-display);font-style:italic;color:var(--gold-light);font-size:15px;margin:0 0 16px;}

/* ============================================================================
   "Our Approach" — five-step journey (assessment through review).
   Header card reuses the client's own photo, with copy printed onto its blank
   canvas exactly like .approach-hero/.begins above. Steps below fall into
   place one at a time as they scroll into view: js/main.js's shared .reveal
   observer flags each <li>, and the marker/card inside pick that up on their
   own staggered delays so the row "assembles" rather than just fading.
   ============================================================================ */
.journey{padding:0 24px 100px;background:#FFFFFF;}
@media (max-width:640px){.journey{padding:0 20px 64px;}}

/* Full-bleed, edge to edge — same 100vw break-out used by .approach-hero/.begins
   above, so the photo touches both walls of the viewport on every breakpoint.
   The source photo's own blank canvas runs on well past the copy printed over
   it; aspect-ratio + overflow:hidden trims the box to end right after the text
   (the <img> itself still renders full-width/native-ratio, just clipped),
   so the step timeline picks up immediately instead of after a dead gap. */
.journey-intro{
  position:relative;width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  background:#FFFFFF;margin-bottom:48px;
  aspect-ratio:0.7;overflow:hidden;
}
.journey-intro-img{display:block;width:100%;height:auto;}

/* Wave cut into the TOP of the photo — same device as .approach-hero-wave above,
   mirrored: the white paragraph section reads as if it dips down into the image. */
.journey-intro-wave{position:absolute;top:-1px;left:0;width:100%;height:90px;z-index:2;pointer-events:none;}
@media (max-width:599px){.journey-intro-wave{height:50px;}}

@media (min-width:820px){
  .journey-intro{aspect-ratio:3.5;}
}

.journey-intro-text{position:absolute;z-index:2;top:37%;left:6%;right:6%;}
.journey-intro-heading{font-size:clamp(26px,7vw,32px);margin:0 0 4px;color:var(--navy-deeper);}
.journey-intro-subtitle{font-family:var(--font-display);font-style:italic;color:var(--gold);font-size:clamp(15px,4vw,19px);margin:0 0 14px;}
.journey-intro-rule{width:64px;height:2px;background:var(--gold);margin:0 0 16px;}
.journey-intro-text p{font-size:13.5px;line-height:1.65;color:#3A3A3A;margin:0 0 12px;max-width:420px;}
.journey-intro-text p:last-child{margin-bottom:0;}

@media (min-width:820px){
  .journey-intro-text{top:7%;left:5%;right:auto;width:44%;}
  .journey-intro-heading{font-size:clamp(32px,3.4vw,44px);}
  .journey-intro-subtitle{font-size:clamp(17px,1.6vw,22px);}
  .journey-intro-text p{font-size:14.5px;}
}

/* ---------- step timeline ---------- */
.journey-steps{list-style:none;margin:0 0 56px;padding:0;max-width:860px;margin-left:auto;margin-right:auto;}
.journey-step{position:relative;display:flex;flex-direction:column;align-items:center;text-align:left;gap:16px;padding-bottom:36px;}
.journey-step:last-child{padding-bottom:0;}

/* dashed connector between markers — grows in behind the icon once its row is visible */
.journey-step:not(:last-child)::before{
  content:'';position:absolute;left:50%;top:76px;bottom:-4px;
  border-left:2.5px dashed color-mix(in srgb, var(--gold) 55%, transparent);
  transform:translateX(-1.25px) scaleY(0);transform-origin:top;
  transition:transform .5s ease .5s;
}
.journey-step.is-visible:not(:last-child)::before{transform:translateX(-1.25px) scaleY(1);}

.journey-step-marker{position:relative;flex-shrink:0;width:76px;height:76px;z-index:1;}
.journey-step-icon{
  width:100%;height:100%;border-radius:50%;display:flex;align-items:center;justify-content:center;
  opacity:0;transform:scale(.5) rotate(-10deg);
  transition:transform .6s cubic-bezier(.34,1.56,.64,1),opacity .4s ease;
}
.journey-step-icon svg{width:34px;height:34px;}
.journey-step-icon-a{background:linear-gradient(135deg,var(--gold-light),var(--gold));color:var(--navy-deeper);}
.journey-step-icon-b{background:color-mix(in srgb, var(--navy) 12%, var(--cream) 88%);color:var(--navy);}

.journey-step-num{
  position:absolute;right:-6px;bottom:-6px;width:32px;height:32px;border-radius:50%;
  background:var(--navy-deep);color:var(--cream);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:700;font-size:12.5px;
  box-shadow:0 4px 10px rgba(16,42,66,.28),0 0 0 3px var(--cream);
  opacity:0;transform:scale(.4);
  transition:transform .45s cubic-bezier(.34,1.56,.64,1) .18s,opacity .3s ease .18s;
}

.journey-step-card{
  width:100%;background:var(--cream);border-radius:20px;padding:24px 26px;
  box-shadow:var(--shadow-sm);border:1px solid var(--border);
  opacity:0;transform:translateY(22px);
  transition:opacity .6s ease .28s,transform .6s ease .28s;
}
.journey-step-card h3{font-size:18.5px;margin:0 0 10px;}
.journey-step-card p{margin:0 0 12px;font-size:14.5px;line-height:1.65;color:var(--ink-muted);}
.journey-step-card p:last-child{margin-bottom:0;}
.journey-step-emph{font-weight:700;color:var(--navy);}

.journey-step-list{list-style:none;margin:4px 0 14px;padding:0;display:grid;grid-template-columns:1fr;gap:8px;}
.journey-step-list li{position:relative;padding-left:16px;font-size:13.5px;color:var(--ink-muted);}
.journey-step-list li::before{content:'';position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--gold);}

/* neutralise the base .reveal fade on the <li> itself — the marker/card children
   stage their own entrance below, keyed off the same .is-visible flag */
.journey-step.reveal{opacity:1;transform:none;}
.journey-step.is-visible .journey-step-icon{opacity:1;transform:scale(1) rotate(0);}
.journey-step.is-visible .journey-step-num{opacity:1;transform:scale(1);}
.journey-step.is-visible .journey-step-card{opacity:1;transform:translateY(0);}

@media (min-width:660px){
  .journey-step{flex-direction:row;align-items:flex-start;gap:22px;}
  .journey-step:not(:last-child)::before{left:37px;}
  .journey-step-list{grid-template-columns:1fr 1fr;gap:8px 18px;}
  .journey-step-card{padding:26px 30px;}
}

/* ---------- "our approach in one line" closing bar ---------- */
.journey-oneline{
  display:flex;flex-direction:column;gap:20px;
  margin-top:8px;padding:28px 26px;border-radius:24px;
  background:linear-gradient(135deg,var(--navy-deep),var(--navy-deeper));
  color:var(--cream);box-shadow:var(--shadow-md);
}
.journey-oneline-icon{
  width:52px;height:52px;border-radius:50%;flex-shrink:0;
  background:rgba(251,241,226,.12);color:var(--gold-light);
  display:flex;align-items:center;justify-content:center;
}
.journey-oneline-icon svg{width:26px;height:26px;}
.journey-oneline-flow{flex:1;min-width:0;}
.journey-oneline-label{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--gold-light);margin:0 0 14px;}
.journey-oneline-steps{display:flex;align-items:center;flex-wrap:wrap;gap:10px 6px;}
.journey-oneline-step{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-display);font-size:14px;color:var(--cream);white-space:nowrap;}
.journey-oneline-step svg{width:19px;height:19px;color:var(--gold-light);flex-shrink:0;}
.journey-oneline-arrow{width:15px;height:15px;color:rgba(251,241,226,.4);flex-shrink:0;}
.journey-oneline-quote{margin:0;font-family:var(--font-display);font-style:italic;font-size:14.5px;line-height:1.55;color:var(--cream-muted);}

@media (min-width:860px){
  .journey-oneline{flex-direction:row;align-items:center;padding:26px 34px;}
  .journey-oneline-quote{border-left:1px solid rgba(251,241,226,.22);padding-left:26px;flex-shrink:0;max-width:220px;}
}

@media (prefers-reduced-motion:reduce){
  .journey-step:not(:last-child)::before,.journey-step-icon,.journey-step-num,.journey-step-card{transition:none;}
}