/* ==========================================================================
   MAGIK Pathways: pieces only the Pathways pages have (pathways/index.html
   and pathways/digital-football-academy/index.html). Loaded after
   /css/magik.css, as /css/pages/pathways.css?v=N: change the file, bump N
   on both pages.

   Everything else is the shared division vocabulary (css/magik.css section
   16): .dv-hero, .dv-visual, .dv-section, .dv-head, .dv-journey, .dv-rows,
   .dv-folds, .dv-close. This file only adds what these two pages draw.

     1  The pitch: the hero visual (the Codex Pathways section 1 art)
     2  The journey: the winding track, the stages on it, the drawn
        people, the ending (and its drawing in)
     3  Start here: the close
     4  The academy: facts strip, the route (the shared .dv-journey--rail),
        the price card with its disclaimer, questions, ask first

   Internal working rule, never shown on the site: the stage facts, the
   price and the disclaimer are client-stated; the pitch and the people are
   drawn; nothing still to come from MAGIK is shown.
   ========================================================================== */


/* 1  THE PITCH --------------------------------------------------------------
   The Codex pitch in perspective, a player in the field's green standing on
   it, the stage tag top right. Three fixes on the Codex art: a top scrim
   under both labels (white on the pale sky was 1.7:1), the penalty-box
   line at a quarter strength (it struck through the statement), labels at
   12px. The player stands above the bottom scrim, as in the Codex art. */
.pw-visual .dv-visual-frame{ background-color:#586E53; }
.pw-pitch{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(11, 20, 15, .7) 0, transparent 28%),
    linear-gradient(180deg, #C8C7B2 0, #AAB295 37%, #718367 58%, #244634 100%);
}
.pw-pitch::before{
  content:""; position:absolute; left:-15%; right:-15%; bottom:-29%; height:61%;
  background:repeating-linear-gradient(94deg, #1D4934 0 16%, #356447 17% 34%);
  transform:perspective(250px) rotateX(24deg);
}
.pw-pitch::after{
  content:""; position:absolute; left:5%; right:6%; bottom:18%; height:24%;
  border:1px solid rgba(255, 255, 255, .25); border-bottom:0;
  clip-path:polygon(20% 0, 80% 0, 100% 100%, 0 100%);
}
.pw-pitch-player{
  position:absolute; z-index:2; left:51%; bottom:6%; height:67%; width:110px;
  background:linear-gradient(90deg, #132C20, #36774B 52%, #12281D);
  clip-path:polygon(25% 0, 75% 0, 90% 15%, 100% 36%, 83% 40%, 76% 25%, 72% 55%, 94% 100%, 60% 100%, 49% 66%, 36% 100%, 5% 100%, 26% 54%, 21% 26%, 12% 41%, 0 38%, 7% 15%);
}
/* the five stages wrap to two balanced lines in the top right corner and
   sit under THE PATHWAY on a phone: the shared default for a tag beside an
   index (css/magik.css section 16, VISUAL) */
.pw-visual .dv-visual-note{ color:#D9E3D5; }
@media (max-width:460px){ .pw-pitch-player{ width:78px; } }

/* the eyebrow's separator, spaced as the Codex one */
.pw-sep{ margin:0 .7em; }

/* the jumps down the page use the shared .m-arrow--down (css/magik.css
   section 9), so their arrows travel down on hover */


/* 2  THE JOURNEY -------------------------------------------------------------
   The winding track (Daniela, 27 September: the long take from 02a5317,
   restyled in today's system). One line, the site's grass strip (the
   shared --jn-* variables of css/magik.css section 16, in scope through
   the .dv-journey class on .pw-route): it comes in from the left edge and
   winds down the page in rounded switchbacks under the five stages, the
   words on one side, the people standing on it in the room the words
   leave. Past Progress it stops in the red square and runs on dotted,
   past the last line and off the page.

   It is drawn in CSS, piece by piece inside each stage (.pw-tk): the turn
   in at the top, the run down beside the words, the turn out at the foot,
   and the floor along the stage's bottom edge, so it follows the words at
   every width and is whole without a script. The turns are SVG (the
   page's #pw-turn-* defs, radius 40), the straights the shared strip;
   every piece starts and ends on the light stripe (the straights round
   their stripes to whole lengths), so the mowing runs on through the
   turns without a seam. Blades face up: on top of the floors, on the
   outside of the runs down, crossing sides in the turns out.

   Geometry, in px from the stage box: the left run's centre line is at
   X + .5 (X = --tk-x), the right run's at W - X - .5, a floor's at the
   stage's bottom edge + .5 (its body 2px above to 3px below the edge,
   blades 3px above that), turns of radius 40. Joins overlap by half a
   pixel; every join is the light stripe, so an overlap never shows.

   Motion: js/pages/pathways.js lays a pale copy of the track under it
   (not yet walked: dry field, in the warm tones of --jn-rest-a and -b)
   and draws each stage's part as its floor comes up the screen, at one
   speed through every piece; the square stamps when the line reaches it
   and the dots run on. It never undraws. The pale copy is whole from the
   start and always lies under the grass of every stage (the grass sits
   a layer up), so the route ahead reads faintly and no pale edge ever
   crosses a join once it is drawn. Without the script, or under reduced
   motion, it is simply whole. */
.pw-journey{ --pw-s:1; overflow-y:clip; }
@media (max-width:1279px){ .pw-journey{ --pw-s:.8; } }
.pw-journey .dv-h2 em{ color:#397253; }
.pw-journey-head{ margin-bottom:clamp(40px, 4.4vw, 64px); }
.pw-g{ transform:translateY(calc(3px / var(--pw-s))); }
.pw-defs{ position:absolute; width:0; height:0; overflow:hidden; }

.pw-route{
  --tk-x:32px;              /* the runs down, in from each edge of the column */
  --tk-pad:88px;            /* the words, in from their run's side */
  --txt-w:min(560px, 50%);  /* the words' column; the people take the rest */
  --jn-rest-a:#EAE3D6; --jn-rest-b:#E2D9C9;  /* the line not yet walked */
}
@media (max-width:1023px){ .pw-route{ --tk-x:20px; --tk-pad:64px; --txt-w:min(440px, 56%); } }
@media (max-width:767px){ .pw-route{ --tk-x:6px; --tk-pad:40px; } }
.pw-stages{ list-style:none; }

/* a stage: the words on its run's side, the people in the room they leave,
   standing on the floor (the stage's bottom edge). --sw is the drawing's
   width in its own units; --sc-l its left edge, centred in the room. */
.pw-stage{ position:relative; min-height:300px; padding:64px 0 96px; scroll-margin-top:72px; }
.pw-stage--l{ --sc-l:calc((var(--tk-pad) + var(--txt-w) + 100% - var(--tk-x) - 40px) / 2 - var(--sw) * var(--pw-s) * .5px); }
.pw-stage--r{ --sc-l:calc((var(--tk-x) + 40px + 100% - var(--tk-pad) - var(--txt-w)) / 2 - var(--sw) * var(--pw-s) * .5px); }
.pw-stage-text{ position:relative; z-index:1; width:var(--txt-w); margin-left:var(--tk-pad); }
.pw-stage--r .pw-stage-text{ margin-left:auto; margin-right:var(--tk-pad); }

/* the name: billing, heavy Archivo capitals at 90% width, never italic */
.pw-stage-name{
  display:flex; align-items:flex-start; gap:14px;
  font-family:var(--m-display); font-weight:900; font-stretch:90%; font-size:var(--m-bill-m);
  line-height:.9; letter-spacing:0; text-transform:uppercase; color:var(--jn-name);
}
.pw-stage-num{
  flex:none; padding-top:2px; font-family:var(--m-sans); font-stretch:100%;
  font-size:12px; font-weight:600; letter-spacing:.16em; line-height:16px; color:var(--jn-body);
}
/* the one short line: a voice line on its own, with the square full stop */
.pw-stage-line{
  margin-top:16px; font-family:var(--m-sans); font-weight:400; font-size:clamp(22px, 2vw, 28px);
  line-height:1.25; letter-spacing:-.01em; color:var(--jn-voice);
}
.pw-stage-body{ margin-top:10px; max-width:520px; font-size:17px; line-height:1.6; color:var(--jn-body); }
.pw-with{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin-top:20px; }
.pw-with-label{ font-size:12px; font-weight:600; letter-spacing:.16em; line-height:16px; text-transform:uppercase; color:var(--jn-body); }
.pw-stage .dv-journey-link{ margin-top:12px; }

.pw-scene{
  position:absolute; z-index:1; bottom:0; left:var(--sc-l);
  width:calc(var(--sw) * var(--pw-s) * 1px); height:calc(120px * var(--pw-s));
}
.pw-scene > svg{ display:block; width:100%; height:100%; overflow:visible; }

/* THE TRACK ------------------------------------------------------------- */
.pw-tk{ position:absolute; inset:0; pointer-events:none; }
/* the grass a layer up: over every stage's pale copy, under each stage's
   words and people (they follow it at the same level) */
.pw-tk:not(.pw-tk--rest){ z-index:1; }
.pw-tk > *{ position:absolute; display:block; font-style:normal; }
.pw-tk > svg{ width:48px; height:48px; overflow:visible; }
/* the way in: from the screen's left edge into the first turn; its
   stripes and blades are counted back from its right end */
.pw-tk-lead{
  top:-5px; right:calc(100% - var(--tk-x) + 39px); width:100vw; height:8px;
  background:var(--jn-grass-x); background-position:100% 0;
  -webkit-mask:var(--jn-mask-x); mask:var(--jn-mask-x);
  -webkit-mask-position:100% 0, 0 100%; mask-position:100% 0, 0 100%;
}
/* the turns: in at the top of the stage, out at its foot */
.pw-tk-in{ top:0; }
.pw-tk-out{ bottom:-8px; }
.pw-stage--l .pw-tk-in, .pw-stage--l .pw-tk-out{ left:var(--tk-x); }
.pw-stage:first-child .pw-tk-in{ left:calc(var(--tk-x) - 40px); }
.pw-stage--r .pw-tk-in, .pw-stage--r .pw-tk-out, .pw-coda .pw-tk-in{ left:calc(100% - var(--tk-x) - 41px); }
/* the runs down, blades on the outside (the left run is the right one,
   mirrored) */
.pw-tk-v{
  top:40px; bottom:39px; width:8px;
  background:linear-gradient(180deg, var(--jn-grass-a) 0 26px, var(--jn-grass-b) 32px 58px, var(--jn-grass-a) 64px) 0 0 / 100% 64px round;
  -webkit-mask:var(--jn-mask-y); mask:var(--jn-mask-y);
}
.pw-stage--l .pw-tk-v{ left:calc(var(--tk-x) - 5px); transform:scaleX(-1); }
.pw-stage--r .pw-tk-v{ left:calc(100% - var(--tk-x) - 3px); }
/* the floors, blades on top */
.pw-tk-h{
  bottom:-3px; left:calc(var(--tk-x) + 40px); right:calc(var(--tk-x) + 40px); height:8px;
  background:linear-gradient(90deg, var(--jn-grass-a) 0 26px, var(--jn-grass-b) 32px 58px, var(--jn-grass-a) 64px) 0 0 / 64px 100% round;
  -webkit-mask:var(--jn-mask-x); mask:var(--jn-mask-x);
}
/* Develop: the line loops once for practice, just before the people */
.pw-tk-loop{ z-index:1; bottom:-3px; left:calc(var(--sc-l) - 64px); }
.pw-tk > svg.pw-tk-loop{ width:50px; height:50px; }

/* the ending: the last floor stops in the red square just past the
   people; dots run on to the right, turn down and run off the page.
   Where the room is narrow the last people stand a little further back,
   so the dots always run at least ten beats (120px) before they turn. */
.pw-stage--last{ --sc-l:min(calc((var(--tk-pad) + var(--txt-w) + 100% - var(--tk-x) - 40px) / 2 - var(--sw) * var(--pw-s) * .5px), calc(100% - var(--tk-x) - 206px - var(--sw) * var(--pw-s) * 1px)); }
.pw-stage--last .pw-tk-h{ right:auto; width:calc(var(--sc-l) + var(--sw) * var(--pw-s) * 1px - var(--tk-x)); }
.pw-tk-sq{ bottom:-6px; left:calc(var(--sc-l) + var(--sw) * var(--pw-s) * 1px + 34px); width:12px; height:12px; background-color:var(--jn-end); }
.pw-tk-dots{
  bottom:-2px; left:calc(var(--sc-l) + var(--sw) * var(--pw-s) * 1px + 46px); right:calc(var(--tk-x) + 40px); height:3px;
  background:radial-gradient(circle, var(--jn-dots) 1.5px, transparent 1.6px) 0 0 / 12px 3px round;
}
.pw-coda{ position:relative; display:flex; justify-content:flex-end; padding:64px var(--tk-pad) 0 0; }
.pw-coda .pw-tk-v{
  top:40px; bottom:-640px; left:calc(100% - var(--tk-x) - 2px); width:3px;
  background:radial-gradient(circle, var(--jn-dots) 1.5px, transparent 1.6px) 0 0 / 3px 12px repeat-y;
  -webkit-mask:none; mask:none;
}
.pw-coda-line{
  position:relative; width:min(400px, 100%);
  font-family:var(--m-sans); font-weight:400; font-size:clamp(22px, 1.9vw, 28px); line-height:1.2; letter-spacing:-.01em; color:var(--jn-name);
}

/* PHONES: the words take the width, the people stand under them at the
   far end of the floor, and the track winds down the narrow screen just
   inside the margins, a switchback at every stage */
@media (max-width:767px){
  .pw-stage{ min-height:0; padding:44px 0 calc(120px * var(--pw-s) + 32px); }
  .pw-stage-text, .pw-stage--r .pw-stage-text{ width:auto; }
  .pw-stage--l .pw-stage-text{ margin:0 0 0 var(--tk-pad); }
  .pw-stage--r .pw-stage-text{ margin:0 var(--tk-pad) 0 0; }
  .pw-stage--l{ --sc-l:calc(100% - var(--tk-x) - 54px - var(--sw) * var(--pw-s) * 1px); }
  .pw-stage--r{ --sc-l:calc(var(--tk-x) + 54px); }
  .pw-stage--last{ --sc-l:calc(var(--tk-x) + 56px); }
  .pw-coda{ justify-content:flex-start; padding-top:72px; }
}
@media (max-width:419px){
  /* PROGRESS and DISCOVER keep to a 320px column: narrow the width axis
     first, then the size */
  .pw-stage-name{ font-stretch:84%; font-size:min(var(--m-bill-m), 12.8vw); }
}

/* drawing in (js/pages/pathways.js sets .pw-live; never under reduced
   motion). The pale copy lies under the track, whole; only the grass
   (the pieces marked data-tk and data-tk-end) is uncovered, in the
   direction the line travels, at the pace the script sets. */
.pw-tk--rest{ --jn-grass-a:var(--jn-rest-a); --jn-grass-b:var(--jn-rest-b); }
.pw-live [data-tk], .pw-live [data-tk-end]{ transition:clip-path var(--tk-d, 300ms) linear var(--tk-delay, 0ms); clip-path:inset(-8px); }
.pw-live [data-tk-loop]{ transition:opacity .3s ease var(--tk-delay, 0ms); }
.pw-live .pw-stage:not(.is-drawn) [data-tk].pw-tk-e, .pw-live .pw-stage:not(.is-drawn) [data-tk-end].pw-tk-e, .pw-live .pw-coda:not(.is-drawn) [data-tk-end].pw-tk-e{ clip-path:inset(-8px calc(100% + 8px) -8px -8px); }
.pw-live .pw-stage:not(.is-drawn) [data-tk].pw-tk-w{ clip-path:inset(-8px -8px -8px calc(100% + 8px)); }
.pw-live .pw-stage:not(.is-drawn) [data-tk].pw-tk-s, .pw-live .pw-coda:not(.is-drawn) [data-tk-end].pw-tk-s{ clip-path:inset(-8px -8px calc(100% + 8px) -8px); }
.pw-live .pw-stage:not(.is-drawn) [data-tk-loop]{ opacity:0; }
.pw-live .pw-stage:not(.is-drawn) .pw-tk-sq{ transform:scale(0); }
.pw-live .pw-stage.is-drawn .pw-tk-sq{ animation:m-stamp 420ms cubic-bezier(.3,1.5,.5,1) var(--tk-delay, 0ms) both; }
.pw-live .is-instant [data-tk], .pw-live .is-instant [data-tk-end], .pw-live .is-instant [data-tk-loop]{ transition:none !important; animation:none !important; }
@media (prefers-reduced-motion:reduce), print{
  .pw-live [data-tk], .pw-live [data-tk-end]{ clip-path:none !important; transition:none !important; }
  .pw-live [data-tk-loop]{ opacity:1 !important; transition:none !important; }
  .pw-live .pw-tk-sq{ transform:none !important; animation:none !important; }
}


/* 3  START HERE ---------------------------------------------------------------
   The close: the photograph first, then the three doors (the shared
   .dv-rows), then the numbers. */
.pw-close .dv-rows{ margin-top:clamp(24px, 3vw, 36px); }
.pw-close .dv-close-lines{ margin-top:16px; }


/* 4  THE ACADEMY -------------------------------------------------------------
   The same world as /pathways: the ink hero with the photograph and the
   facts under a hairline, the route on the same line as the journey (always
   vertical here), the price card, five questions, and the close. */

/* the photograph fills the hero frame, as it is: no scrim, no type on it */
.pw-acad-visual .dv-visual-frame{ background-color:#1B1712; }

/* facts: four columns on the hero's ink, under a hairline */
.pw-facts{
  display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:24px;
  margin-top:clamp(48px, 5vw, 72px); padding-top:24px; border-top:1px solid var(--m-rule);
}
.pw-facts > div{ min-width:0; }
.pw-facts dt{ font-size:12px; font-weight:650; letter-spacing:.15em; line-height:16px; text-transform:uppercase; color:var(--dv-accent-dark); }
.pw-facts dd{ margin-top:8px; font-size:20px; font-weight:500; line-height:1.3; color:var(--m-text); }
@media (max-width:767px){ .pw-facts{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:24px 20px; } .pw-facts dd{ font-size:18px; } }
@media (max-width:359px){ .pw-facts{ grid-template-columns:minmax(0, 1fr); } }

/* the route and the price, side by side from 1024px */
.pw-course .dv-h2 em, .pw-faq .dv-h2 em{ color:#397253; }
.pw-course-grid{ display:grid; grid-template-columns:minmax(0, 1fr); gap:48px; }
@media (min-width:1024px){
  .pw-course-grid{ grid-template-columns:minmax(0, 1fr) minmax(0, 480px); gap:clamp(48px, 7vw, 112px); align-items:start; }
}

/* THE ROUTE: the shared journey on its vertical rail at every width (it
   lives in a column, so it never runs across): the shared .dv-journey--rail
   (css/magik.css section 16). No drawings: each step is the marker and its
   words. */

/* THE PRICE CARD: an ink card on the daylight ground, the one place the
   numbers live, with the disclaimer directly under them. The naira sign
   is drawn (neither font has it) and read from the text beside it. */
.pw-price{ position:relative; padding:clamp(26px, 3vw, 40px); }
.pw-price-kicker{ font-size:12px; font-weight:650; letter-spacing:.15em; line-height:16px; text-transform:uppercase; color:var(--dv-accent-dark); }
.pw-price-row{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 14px; margin-top:18px; }
.pw-price-row--then{ margin-top:10px; }
.pw-price-fig{
  position:relative; font-family:var(--m-sans); font-weight:700; font-size:clamp(46px, 4.4vw, 60px);
  line-height:1; letter-spacing:-.03em; font-variant-numeric:lining-nums tabular-nums; white-space:nowrap; color:var(--m-text);
}
.pw-price-row--then .pw-price-fig{ font-size:clamp(28px, 2.4vw, 34px); letter-spacing:-.02em; }
.pw-price-per{ font-size:16px; line-height:1.4; color:var(--m-muted); }
.pw-naira{ display:inline-block; width:.6em; height:.72em; margin-right:.04em; vertical-align:baseline; fill:currentColor; }
.pw-disclaimer{
  margin-top:24px; padding-left:16px; border-left:3px solid var(--dv-accent);
  font-size:16px; line-height:1.6; color:var(--m-text-2);
}
.pw-includes{ margin-top:24px; border-top:1px solid var(--m-rule); }
.pw-includes li{ position:relative; padding:12px 0 12px 22px; border-bottom:1px solid var(--m-rule); font-size:16px; line-height:1.5; color:var(--m-text); }
.pw-includes li::before{ content:""; position:absolute; left:0; top:21px; width:8px; height:8px; background-color:var(--dv-accent); }
.pw-price .m-btn{ margin-top:28px; }

/* QUESTIONS: the title on the left, five folds on the right */
.pw-faq-grid{ display:grid; grid-template-columns:minmax(0, 1fr); gap:8px; }
@media (min-width:1024px){ .pw-faq-grid{ grid-template-columns:minmax(0, 4fr) minmax(0, 8fr); gap:clamp(40px, 6vw, 96px); align-items:start; } }
.pw-faq .dv-head{ margin-bottom:24px; }

/* ASK FIRST: the doors and the address line. The four rows carry a phone
   number and an email address, so they take half the width from 1280px and
   the whole width below it (the title goes over them). */
.pw-ask .dv-rows{ --dv-row-label:180px; }
.pw-ask .dv-row-line{ overflow-wrap:anywhere; }
@media (min-width:1280px){ .pw-ask .dv-close-grid{ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width:1279px){ .pw-ask .dv-close-grid{ grid-template-columns:minmax(0, 1fr); row-gap:28px; } }
@media (max-width:540px){ .pw-ask .dv-rows{ --dv-row-label:140px; } }
.pw-trust{ margin-top:18px; }