/* ==========================================================================
   מתודה · METHOD  ·  Swiss editorial
   The grid governs where things sit. It is never drawn.
   Dividers are space. Hierarchy is scale, weight and position.
   ========================================================================== */

:root{
  /* Neutrals in the paper range, one ink. Descending the page is meant to
     feel like turning from stock to stock, not like changing colour.

     COLOUR PASS: the spread used to live inside eight levels of luminance
     AND about two points of chroma - #FBFBF9, #F7F8F7, #F3F1EC are all
     within a hair of neutral, which is why the page read as one flat
     white. The restraint stays; the range does not. The paper itself is
     now a three-rung warm descent (see the gradient on body), the warm
     stock is genuinely oat rather than warm grey, and the one cool band
     is pushed cooler so that the warm/cool opposition is legible instead
     of theoretical. Every value below is measured, not picked. */
  --paper:#FCFBF7;                /* the page, top · warm white */
  --paper-2:#F8F4EC;              /* the page, middle */
  --paper-3:#F3ECE0;              /* the page, bottom · oat white */
  --paper-cool:#F1F3F3;           /* the one cool stock. the inventory */
  --ground:#EDE4D5;               /* warm oat stock. notice and ask */
  --ink:#111111;
  /* .55 was specified as "large text only", but the two rules that use
     it - .lead and .statement--sm - clamp down to 17px on a phone and
     .lead never reaches 24px at any width, so they were shipping at
     4.13:1. .60 is the lowest alpha that clears 4.5:1 on all three
     grounds, which keeps the greys as close to the approved page as
     the standard allows. */
  /* .60 measured 4.57:1 on --ground as a token but only 4.50:1 in the
     browser, because --grain multiplies over every ground and the real
     surface is ~2% darker than the value written here. Sitting exactly
     on the gate is not passing it. .62 measures 4.79:1 on the same
     surface and keeps the greys as close to the approved page as the
     standard allows - which is what the original note asked for. */
  --ink-dim:rgba(17,17,17,.62);
  --ink-body:rgba(17,17,17,.66);  /* running copy, AA */
  /* was .58, with a local bump to .62 inside the three banded sections.
     Now that the paper itself descends into oat, .58 measures 4.39:1 at
     the bottom of the page - so .62 is the global value and the local
     override is gone. 4.87:1 on --ground, the worst rung. */
  --ink-faint:rgba(17,17,17,.62); /* small meta, AA */

  /* One red, two weights - the same split the page already uses for ink.
     --red is the brand value and the FILL: button hovers, the selection
     highlight, the badge dot, and display-scale type where the 3:1 gate
     applies (3.87:1 on --ground, its worst ground).
     --red-ink is that red darkened just enough to carry SMALL type: at
     .81rem the gate is 4.5:1 and --red only reaches 3.87:1 on the warm
     stock. This split is what lets the red appear on every section
     instead of once on the whole page. Still max 2 visible uses per
     screen. */
  --red:#D6301F;
  --red-ink:#B82614;              /* 6.10:1 on --paper · 5.01:1 on --ground */
  --wash:#F0EDE4;
  --dark:#15120E;                 /* the ink band, one degree warm */
  /* was .18 - 1.48:1, which is well under the 3:1 floor for a UI
     boundary, and a field underline IS the field. .50 is the lowest
     value that clears 3:1 on --ground, where the enrolment form
     actually sits (3.36:1). */
  --hair:rgba(17,17,17,.50);      /* form affordances only */

  /* Paper grain. Alpha .04 is deliberately at the edge of perception:
     it should read as stock, never as a texture someone applied. */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .04 0 0 0 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E");

  /* deliberately unequal page edges. no section shares a full pair. */
  --e1:clamp(18px,2.4vw,46px);
  --e2:clamp(20px,6vw,118px);
  --e3:clamp(22px,11vw,220px);
  --e4:clamp(24px,16vw,320px);

  --gut:clamp(14px,1.8vw,30px);

  --fs-body:clamp(15.5px,1.04vw,17px);
  /* The copy pass cut roughly 40% of the words on this page, and what
     survived is the one idea per section. Restraint here is the ratio
     and the whitespace, not small type - so the display steps up and the
     body stays exactly where it was. That widening gap IS the hierarchy. */
  --fs-display:clamp(34px,5.8vw,90px);
  --fs-statement:clamp(24px,3.9vw,58px);

  --dur:400ms;
  --dur-reveal:400ms;
  --ease:cubic-bezier(.2,.6,.2,1);
}

/* Travel is shorter on a phone, so the fade is shorter too. */
@media (pointer:coarse),(max-width:760px){:root{--dur-reveal:300ms}}

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scrollbar-gutter:stable;
}
html:has(dialog[open]){overflow:hidden}

/* The paper is not one stock. A single gradient painted across the whole
   document takes it from warm white at the masthead to oat white at the
   footer - about four levels of luminance and a real rise in chroma over
   roughly six screens, so the descent is felt rather than seen. The four
   banded sections still sit opaquely on top of it; this adds movement to
   the paper BETWEEN them without adding a fifth band. */
body{
  margin:0;
  background-color:var(--paper);
  background-image:var(--grain),
    linear-gradient(180deg,
      var(--paper)   0%,
      var(--paper)   14%,
      var(--paper-2) 46%,
      var(--paper-3) 88%,
      var(--paper-3) 100%);
  background-repeat:repeat,no-repeat;
  background-size:128px 128px,100% 100%;
  color:var(--ink);
  font-family:"Assistant",system-ui,sans-serif;
  font-weight:400;
  font-size:var(--fs-body);
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4,p,figure,blockquote,address{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img{display:block;max-inline-size:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}

/* Hebrew has no italic tradition. Never slant it. */
em,i,cite,address,dfn{font-style:normal}
/* Editorial weight discipline: 600 is the heaviest cut on the page. */
b,strong{font-weight:600}

::selection{background:var(--red);color:#fff}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}

/* Latin voice. Brand lockup, demo kicker, email. Never a numbering system. */
.brand__lat,.modal__kicker,.lat{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-variant-numeric:tabular-nums;
}

.skip{
  position:fixed;inset-block-start:-100px;inset-inline-start:12px;z-index:200;
  background:var(--ink);color:var(--paper);padding:10px 16px;font-size:14px;
  transition:inset-block-start 180ms var(--ease);
}
.skip:focus{inset-block-start:12px}

/* ------------------------------------------------------------------ type */
/* The section label is the page's one recurring accent. There is exactly
   one per section and it never shares a screen with more than one other
   red mark, which keeps the 2-uses-per-screen cap intact while giving the
   red a job on every spread instead of once in the whole document.
   --red-ink, not --red: at .81rem the gate is 4.5:1. */
.label{font-size:.81rem;font-weight:600;color:var(--red-ink)}

.statement{
  font-size:var(--fs-statement);
  font-weight:400;line-height:1.26;
  text-wrap:balance;
}
.statement--sm{
  font-size:clamp(19px,2.25vw,31px);
  line-height:1.38;color:var(--ink-dim);
  text-wrap:balance;
}
/* --fs-statement clamps down to 22px, which is under WCAG's 24px "large"
   threshold at weight 400 - so this is a 4.5:1 target, not a 3:1 one, and
   --red only reaches 4.45:1 by mid-page. --red-ink holds 5.38:1 at the
   bottom of the paper descent. */
.statement--close em{color:var(--red-ink)}

.body{color:var(--ink-body);max-inline-size:60ch;margin-block-end:1.15em}
.body--lead{color:var(--ink);font-size:clamp(17px,1.3vw,20px);line-height:1.62}

/* The hero has no .label - this is its eyebrow, and without it the first
   screen of the page carried no colour at all. Same treatment, same
   --red-ink, one mark. */
.kicker{font-size:.82rem;font-weight:600;color:var(--red-ink)}

/* --------------------------------------------------------------- buttons */
.btn{
  display:inline-block;background:var(--ink);color:var(--paper);
  padding:.85em 1.7em;font-weight:600;font-size:.95rem;line-height:1.2;
  border:0;border-radius:0;cursor:pointer;
  transition:background var(--dur) var(--ease);
}
.btn:hover{background:var(--red)}
.btn--sm{padding:.62em 1.2em;font-size:.86rem}

.ln{
  display:inline-block;font-size:.95rem;font-weight:600;
  background:none;border:0;padding:0;cursor:pointer;
  box-shadow:inset 0 -1px 0 0 var(--hair);
  transition:box-shadow var(--dur) var(--ease),color var(--dur) var(--ease);
}
.ln:hover{color:var(--red);box-shadow:inset 0 -1px 0 0 var(--red)}

/* --------------------------------------------------------------- reveals
   Inverted gate. The hidden start state is scoped to .js-motion, which
   main.js sets only once the observer that clears it actually exists.
   Every other path - no JS, reduced motion, no IntersectionObserver, a
   thrown script - renders the finished state. */
.js-motion [data-reveal]{opacity:0;transition:opacity var(--dur-reveal) var(--ease)}
.js-motion [data-reveal].is-in{opacity:1}

/* -------------------------------------------------------------- masthead */
.masthead{
  display:flex;align-items:center;gap:clamp(16px,3vw,48px);
  padding:clamp(18px,2vw,30px) var(--e1) 0 var(--e2);
}
.brand{display:flex;align-items:baseline;gap:10px;white-space:nowrap}
.brand__he{font-weight:600;font-size:1.08rem;line-height:1}
.brand__lat{font-size:.6rem;letter-spacing:.24em;color:var(--ink-faint)}
.masthead__nav{display:flex;gap:clamp(14px,1.9vw,30px);margin-inline-start:auto}
.masthead__nav a{font-size:.92rem;color:var(--ink-body);transition:color var(--dur) var(--ease)}
.masthead__nav a:hover{color:var(--ink)}

/* ------------------------------------------------------------------ hero */
.hero{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,44vw);
  align-items:end;
  min-block-size:min(93vh,880px);
}
.hero__text{
  padding-inline:var(--e1) clamp(26px,5vw,96px);
  padding-block:clamp(70px,12vh,150px) clamp(46px,7vw,104px);
}
.display{
  font-size:var(--fs-display);font-weight:400;line-height:1.14;
  margin-block:clamp(22px,3vw,44px) clamp(26px,3.4vw,52px);
  text-wrap:balance;
}
.lead{
  color:var(--ink-dim);font-size:clamp(18px,1.6vw,26px);line-height:1.5;
  max-inline-size:34ch;margin-block-end:clamp(26px,3.4vw,46px);
}
.cta-row{display:flex;align-items:center;gap:clamp(18px,2.6vw,34px);flex-wrap:wrap}

/* ----------------------------------------------------------------- plates */
.plate{position:relative;background:var(--wash);overflow:hidden}
.plate > img{inline-size:100%;block-size:100%;object-fit:cover}
.plate__ph{
  position:absolute;inset:0;
  display:flex;align-items:flex-end;
  padding:clamp(14px,1.6vw,28px);
  background:linear-gradient(158deg,rgba(17,17,17,.055),rgba(17,17,17,0) 58%);
}
.plate__ph span{font-size:.75rem;font-weight:600;color:var(--ink-faint)}
.plate:has(img) .plate__ph,
.darkplate:has(img) .plate__ph{display:none}

/* Touch-only scrub parallax. main.js writes --py in the range ±4.5% of
   the plate's height; scale(1.12) holds 6% of headroom on each side, so
   subpixel rounding at the extremes still cannot let the ground show
   through the edge of a photograph. */
.js-parallax .plate > img,
.js-parallax .darkplate > img{transform:translate3d(0,var(--py,0px),0) scale(1.12)}

/* hero portrait fills the column and is cropped by the viewport edge */
.plate--hero{block-size:100%;min-block-size:min(93vh,880px)}

/* exact pixel ratios of the delivered files, so nothing reflows on drop in */
.plate--coach{aspect-ratio:2528/1696}
.plate--work{aspect-ratio:2528/1696}
.plate--square{aspect-ratio:2048/2048}
.plate--band{aspect-ratio:2752/1536}

/* The single dark moment, edge to edge. The photograph is a stack of
   paper in raking light - a high key image - so at full strength it
   erased the ink ground it was supposed to sit on and the page ran flat
   from top to bottom. Held at 30% over the ink, the ground does the
   work and the paper edge survives as structure inside it. This is the
   only inversion on the page; it is worth more than any ornament. */
.darkplate{
  position:relative;overflow:hidden;background:var(--dark);
  inline-size:100%;block-size:clamp(300px,58vh,600px);
  margin-block:clamp(50px,8vw,140px);
}
.darkplate > img{
  inline-size:100%;block-size:100%;object-fit:cover;
  opacity:.3;filter:grayscale(1) contrast(1.06);
}
.darkplate .plate__ph{background:linear-gradient(158deg,rgba(255,255,255,.07),rgba(255,255,255,0) 58%)}
.darkplate .plate__ph span{color:rgba(242,242,240,.52)}

/* quiet band, flush to one edge only */
.plate--band{margin:clamp(60px,9vw,150px) var(--e3) clamp(60px,9vw,150px) 0}

/* ---------------------------------------------------------------- grounds
   Four tonal events over the length of the page, no more. The two warm
   grey bands are the two moments where the page talks about fit - who it
   turns away at the top, and who it asks in at the bottom - so they rhyme
   rather than stripe. The cool band is the inventory. The ink band is the
   single inversion. Everything else is paper. */
.turnaway,
.enroll{background-color:var(--ground)}
.included{background-color:var(--paper-cool)}
.turnaway,
.enroll,
.included{
  background-image:var(--grain);background-size:128px 128px;
  /* the local --ink-faint bump that used to live here is now the global
     value - the paper descends into oat, so the whole page needed it */
}

/* ------------------------------------------------------ generic sections */
.sec{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gut)}

/* ------------------------------------------------- turn away, early move */
.turnaway{
  padding-inline:var(--e2) var(--e3);
  padding-block:clamp(80px,13vw,210px) clamp(70px,11vw,180px);
}
.turnaway__lead{
  font-size:clamp(28px,4.4vw,66px);font-weight:400;line-height:1.14;
  max-inline-size:16ch;
  margin-block:clamp(24px,3vw,46px) clamp(30px,4vw,60px);
  text-wrap:balance;
}
/* The three disqualifiers were buried mid-paragraph, where nobody
   self-selects out. As a list they are three glances instead of a
   passage, which is the whole point of putting them this early. */
.turnaway__list{
  display:grid;gap:clamp(10px,1.2vw,18px);
  max-inline-size:34ch;
  margin-block-end:clamp(30px,4vw,60px);
  font-size:clamp(17px,1.5vw,24px);line-height:1.35;
}
.turnaway__list li{position:relative;padding-inline-start:1.1em}
.turnaway__list li::before{
  content:"";position:absolute;inset-inline-start:0;inset-block-start:.62em;
  inline-size:.55em;block-size:1px;background:var(--red-ink);
}
.turnaway__body{color:var(--ink-body);max-inline-size:44ch}

/* ------------------------------------------------------- the gap section */
.sec--gap{
  padding-inline:var(--e3) var(--e2);
  padding-block:clamp(70px,11vw,190px) clamp(80px,12vw,200px);
}
.sec--gap .label{grid-column:1 / span 4}
.sec--gap .statement{
  grid-column:1 / span 7;
  margin-block:clamp(26px,3.4vw,54px) clamp(80px,13vw,220px);
}
.gap__list{grid-column:8 / span 5}
.gap__list p{color:var(--ink-body);margin-block-end:clamp(24px,3vw,44px);max-inline-size:34ch}
.gap__list b{
  color:var(--ink);display:block;font-weight:600;
  font-size:clamp(18px,1.75vw,27px);line-height:1.22;margin-block-end:.25em;
}
.statement--close{grid-column:2 / span 8;margin-block-start:clamp(70px,11vw,190px)}

/* ----------------------------------------------------------------- coach */
.coach{
  display:grid;
  grid-template-columns:minmax(0,46vw) minmax(0,1fr);
  align-items:center;
  padding-block:clamp(40px,6vw,110px);
}
.coach__text{padding-inline:clamp(30px,5vw,92px) var(--e2)}
.name{font-size:clamp(23px,2.3vw,34px);font-weight:600;line-height:1.2;margin-block-start:clamp(10px,1.4vw,20px)}
.name__role{font-size:.92rem;color:var(--ink-body);margin-block-end:clamp(22px,2.8vw,38px)}
.creds{
  font-size:.86rem;color:var(--ink-faint);max-inline-size:56ch;
  margin-block-start:clamp(20px,2.6vw,36px);
}

/* ----------------------------------------------------------------- proof */
.sec--proof{
  padding-inline:var(--e2) var(--e1);
  padding-block:clamp(70px,11vw,180px);
}
.sec--proof .label{grid-column:1 / span 4}
.sec--proof .statement--sm{grid-column:1 / span 7;margin-block:clamp(20px,2.4vw,36px) clamp(18px,2.2vw,30px)}
.illus{
  grid-column:1 / span 6;
  font-size:.79rem;color:var(--ink-faint);max-inline-size:52ch;
  margin-block-end:clamp(56px,8vw,130px);
}
.cases{grid-column:1 / -1;display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gut)}
.case--a{grid-column:1 / span 5}
.case--b{grid-column:7 / span 5;margin-block-start:clamp(26px,4vw,80px)}
.case--c{grid-column:2 / span 5;margin-block-start:clamp(46px,7vw,130px)}
.case--d{grid-column:8 / span 5;margin-block-start:clamp(14px,2.2vw,44px)}
.case--e{grid-column:1 / span 4;margin-block-start:clamp(52px,8vw,150px)}
.case--f{grid-column:6 / span 6;margin-block-start:clamp(22px,3.4vw,66px)}
.case__ctx{font-size:.8rem;color:var(--ink-faint);margin-block-end:.55em}
.case__out{font-size:clamp(19px,1.95vw,30px);font-weight:600;line-height:1.28}
.case__how{color:var(--ink-body);margin-block-start:.55em;max-inline-size:44ch}

/* ------------------------------------------------------------ curriculum */
.sec--curriculum{
  padding-inline:var(--e4) var(--e2);
  padding-block:clamp(30px,5vw,90px) clamp(80px,12vw,200px);
}
.sec--curriculum .label{grid-column:1 / span 4}
.sec--curriculum .statement--sm{
  grid-column:1 / span 8;
  margin-block:clamp(20px,2.4vw,36px) clamp(46px,7vw,110px);
}
.sec--curriculum .modules{grid-column:1 / span 9}

.mod__btn{
  inline-size:100%;display:flex;align-items:baseline;
  justify-content:space-between;gap:clamp(16px,3vw,50px);
  background:none;border:0;border-radius:0;padding:clamp(13px,1.5vw,20px) 0;
  text-align:start;cursor:pointer;
  transition:color var(--dur) var(--ease);
}
.mod__btn:hover{color:var(--ink-body)}
.mod__btn > span:first-child{font-size:clamp(17px,1.6vw,23px);font-weight:600;line-height:1.34}
.sign{position:relative;inline-size:13px;block-size:13px;flex:0 0 auto;align-self:center}
.sign::before,.sign::after{
  content:"";position:absolute;background:currentColor;
  inset-block-start:6px;inset-inline-start:0;inline-size:13px;block-size:1px;
}
.sign::after{transform:rotate(90deg);transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease)}
.mod__btn[aria-expanded="true"] .sign::after{transform:rotate(0);opacity:0}

.mod__panel{
  display:grid;grid-template-rows:0fr;opacity:0;
  transition:grid-template-rows var(--dur) var(--ease),opacity var(--dur) var(--ease);
}
.mod__panel.is-open{grid-template-rows:1fr;opacity:1}
.mod__inner{overflow:hidden}
.mod__panel.is-open .mod__inner{padding-block-end:clamp(18px,2.4vw,32px)}
.mod__inner p{color:var(--ink-body);max-inline-size:62ch;margin-block-end:.6em}
/* Each module was two paragraphs, the second a run-in list separated by
   middots that read as one long line. Same content, now a lead statement
   and three items you can actually scan. */
.mod__lead{
  color:var(--ink)!important;
  font-size:clamp(17px,1.5vw,24px);line-height:1.35;
  max-inline-size:38ch!important;margin-block-end:.9em!important;
}
.mod__list{
  display:grid;gap:.42em;color:var(--ink-body);max-inline-size:40ch;
  font-size:clamp(15.5px,1.15vw,19px);line-height:1.4;
}
.mod__list li{position:relative;padding-inline-start:1.1em}
.mod__list li::before{
  content:"";position:absolute;inset-inline-start:0;inset-block-start:.62em;
  inline-size:.5em;block-size:1px;background:var(--red-ink);
}

/* -------------------------------------------------------------- included */
.included{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,36vw);
  align-items:start;
  column-gap:clamp(24px,4vw,80px);
  padding-block:clamp(70px,11vw,180px);
}
.included__text{padding-inline-start:var(--e2)}
.runin{margin-block-start:clamp(40px,6vw,100px);max-inline-size:64ch}
.runin{max-inline-size:44ch!important}
.runin p{color:var(--ink-body);margin-block-end:clamp(18px,2.2vw,30px)}
.runin b{
  color:var(--ink);display:block;font-weight:600;
  font-size:clamp(17px,1.55vw,25px);line-height:1.22;margin-block-end:.2em;
}
.plate--work{margin-block-start:clamp(60px,9vw,160px)}

/* -------------------------------------------------------------- audience */
.audience{
  display:grid;
  grid-template-columns:minmax(0,34vw) minmax(0,1fr);
  align-items:start;
  column-gap:clamp(24px,5vw,110px);
  padding-block:clamp(60px,9vw,150px);
}
.plate--square{margin-block-start:clamp(50px,9vw,190px)}
.audience__text{padding-inline-end:var(--e2)}
.audience .statement--sm{margin-block-start:clamp(16px,2vw,28px);max-inline-size:26ch}
.segs{margin-block-start:clamp(32px,4.4vw,70px);max-inline-size:60ch}
.segs p{color:var(--ink-body);margin-block-end:clamp(22px,2.8vw,38px);max-inline-size:38ch}
.segs b{
  color:var(--ink);display:block;font-weight:600;
  font-size:clamp(17px,1.55vw,25px);line-height:1.22;margin-block-end:.2em;
}

/* ------------------------------------------------------------- graduates */
.sec--grads{
  padding-inline:var(--e1) var(--e3);
  padding-block:clamp(70px,11vw,180px);
}
.sec--grads .label{grid-column:1 / span 4}
.pull{grid-column:1 / span 9;margin-block:clamp(28px,3.6vw,58px) clamp(70px,10vw,170px)}
.pull p{
  font-size:clamp(24px,2.85vw,38px);font-weight:400;line-height:1.26;
  text-wrap:balance;
}
.pull cite{
  display:block;margin-block-start:clamp(18px,2.2vw,32px);
  font-size:.86rem;font-weight:600;color:var(--ink-faint);
}
.voices{grid-column:1 / -1;display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gut)}
.voice p{color:var(--ink-body)}
.voice cite{display:block;margin-block-start:.9em;font-size:.82rem;font-weight:600;color:var(--ink-faint)}
.voice--a{grid-column:2 / span 4}
.voice--b{grid-column:7 / span 4;margin-block-start:clamp(34px,5vw,96px)}
.voice--c{grid-column:1 / span 4;margin-block-start:clamp(46px,7vw,130px)}
.voice--d{grid-column:6 / span 5;margin-block-start:clamp(16px,2.4vw,50px)}

/* ---------------------------------------------------------------- enroll */
.enroll{
  display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gut);
  padding-inline:var(--e3) var(--e1);
  padding-block:clamp(40px,6vw,110px) clamp(80px,12vw,200px);
}
.enroll__lead{grid-column:1 / span 5}
.enroll__lead .statement--sm{margin-block:clamp(18px,2.2vw,32px)}
.enroll__steps{
  counter-reset:step;display:grid;gap:clamp(12px,1.4vw,20px);
  color:var(--ink);max-inline-size:30ch;
  font-size:clamp(17px,1.5vw,24px);line-height:1.3;
}
.enroll__steps li{position:relative;padding-inline-start:2.1em;counter-increment:step}
.enroll__steps li::before{
  content:counter(step);position:absolute;inset-inline-start:0;inset-block-start:.05em;
  font-size:.72em;font-weight:600;color:var(--red-ink);
  font-variant-numeric:lining-nums tabular-nums;
}
.form{
  grid-column:7 / span 6;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(18px,2.4vw,36px);row-gap:clamp(18px,2.2vw,30px);
}
.field{display:flex;flex-direction:column;gap:7px}
.field--wide,.field--check,.form__foot{grid-column:1 / -1}
.field label{font-size:.8rem;font-weight:600;color:var(--ink-body)}
.req{font-weight:400;color:var(--ink-faint)}
.field input[type="text"],.field input[type="tel"],
.field input[type="email"],.field select,.field textarea{
  inline-size:100%;background:transparent;border:0;
  border-block-end:1px solid var(--hair);border-radius:0;
  padding:9px 2px;font-size:.98rem;
  transition:border-color var(--dur) var(--ease);
}
.field select{
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-faint) 50%),
                   linear-gradient(135deg,var(--ink-faint) 50%,transparent 50%);
  background-position:left 6px top 56%,left 1px top 56%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
  padding-inline-start:20px;
}
.field textarea{resize:vertical;min-block-size:78px;line-height:1.6}
.field input:focus,.field select:focus,.field textarea:focus{
  border-block-end-color:var(--ink);outline:none;
}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  outline:2px solid var(--red);outline-offset:4px;
}
.field--check{flex-direction:row;align-items:flex-start;gap:10px;padding-block-start:4px}
.field--check input{inline-size:15px;block-size:15px;margin:4px 0 0;flex:0 0 auto;accent-color:var(--ink)}
.field--check label{font-size:.88rem;font-weight:400;color:var(--ink-body)}
.form__foot{display:flex;align-items:center;gap:clamp(14px,2vw,28px);flex-wrap:wrap;margin-block-start:clamp(8px,1.4vw,20px)}
.form__note{font-size:.78rem;color:var(--ink-faint)}

/* ------------------------------------------------------------------- faq */
.sec--faq{
  padding-inline:var(--e2) var(--e3);
  padding-block:clamp(60px,9vw,150px) clamp(80px,12vw,200px);
}
.sec--faq .label{grid-column:1 / span 4;margin-block-end:clamp(30px,4vw,64px)}
.sec--faq .modules{grid-column:1 / span 8}
.faq__foot{grid-column:1 / span 6;margin-block-start:clamp(46px,7vw,110px);color:var(--ink-body)}

/* ---------------------------------------------------------------- footer */
.foot{
  display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gut);
  padding:clamp(60px,9vw,140px) var(--e1) clamp(34px,4vw,60px) var(--e2);
}
.foot__brand{grid-column:1 / span 4}
.brand--foot{margin-block-end:12px}
.foot__line{font-size:.9rem;color:var(--ink-body);max-inline-size:32ch}
.foot__cols{grid-column:6 / span 7;display:flex;gap:clamp(24px,5vw,90px);flex-wrap:wrap}
.foot__cols nav,.foot__cols address{display:flex;flex-direction:column;gap:5px}
.foot__cols a,.foot__cols span{font-size:.9rem;color:var(--ink-body);transition:color var(--dur) var(--ease)}
.foot__cols a:hover{color:var(--ink)}
.foot__disclosure{
  grid-column:1 / span 8;
  margin-block-start:clamp(50px,8vw,130px);
  font-size:.76rem;color:var(--ink-faint);line-height:1.75;
}
.foot__disclosure a{color:var(--ink);font-weight:600}

/* ------------------------------------------------------------ demo badge */
.demo-badge{
  position:fixed;z-index:70;
  inset-inline-start:16px;inset-block-end:calc(14px + env(safe-area-inset-bottom));
  background:var(--paper);color:var(--ink);
  padding:7px 12px;font-size:.72rem;font-weight:600;line-height:1;
  display:flex;align-items:center;gap:7px;
  box-shadow:0 1px 14px rgba(17,17,17,.11);
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
}
.demo-badge::before{content:"";inline-size:5px;block-size:5px;background:var(--red);flex:0 0 auto}
.demo-badge:hover{background:var(--ink);color:var(--paper)}
.demo-badge:hover::before{background:var(--paper)}

/* ----------------------------------------------------------------- modal */
.modal{
  border:0;border-radius:0;padding:0;
  max-inline-size:min(520px,calc(100vw - 32px));
  background:var(--paper);color:var(--ink);
  box-shadow:0 24px 80px rgba(17,17,17,.24);
}
.modal::backdrop{background:rgba(17,17,17,.58)}
.modal__body{padding:clamp(26px,3.2vw,44px)}
.modal__kicker{font-size:.62rem;letter-spacing:.26em;color:var(--ink-faint);margin-block-end:16px}
.modal h2{font-size:clamp(20px,2.1vw,27px);font-weight:600;margin-block-end:14px}
.modal p{color:var(--ink-body);font-size:.94rem;margin-block-end:.9em}
.modal__cta{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-block-start:26px}

/* =============================================================== tablet  */
@media (max-width:1080px){
  .hero{grid-template-columns:minmax(0,1fr) minmax(0,48vw);min-block-size:auto}
  .plate--hero{min-block-size:min(78vh,660px)}
  .sec--gap .statement{grid-column:1 / span 9}
  .gap__list{grid-column:1 / span 9;margin-block-start:clamp(40px,6vw,90px)}
  .statement--close{grid-column:1 / span 9}
  .coach{grid-template-columns:minmax(0,44vw) minmax(0,1fr)}
  .sec--proof .statement--sm,.illus{grid-column:1 / span 9}
  .case--a,.case--c,.case--e{grid-column:1 / span 7}
  .case--b,.case--d,.case--f{grid-column:6 / span 7}
  .sec--curriculum .modules,.sec--faq .modules{grid-column:1 / span 11}
  .enroll__lead{grid-column:1 / span 11}
  .form{grid-column:1 / span 11;margin-block-start:clamp(36px,5vw,70px)}
  .pull{grid-column:1 / span 11}
  .voice--a,.voice--c{grid-column:1 / span 6}
  .voice--b,.voice--d{grid-column:7 / span 6}
  .foot__brand{grid-column:1 / span 5}
  .foot__cols{grid-column:1 / -1;margin-block-start:clamp(30px,4vw,54px)}
  .foot__disclosure{grid-column:1 / -1}
}

/* =============================================================== mobile  */
@media (max-width:760px){
  :root{--e1:18px;--e2:20px;--e3:24px;--e4:20px;--gut:12px}

  .masthead{flex-wrap:wrap;gap:10px 18px;padding:16px 18px 0 20px}
  .masthead__nav{order:3;inline-size:100%;margin-inline-start:0;gap:18px;padding-block-start:6px}
  .masthead .btn--sm{margin-inline-start:auto}

  .hero{grid-template-columns:1fr}
  .hero__text{padding-inline:18px;padding-block:clamp(38px,9vh,70px) 34px}
  .plate--hero{min-block-size:0;block-size:auto;aspect-ratio:1856/2304}

  .sec{display:block}
  .turnaway,.sec--gap,.sec--proof,.sec--curriculum,.sec--grads,.sec--faq{
    padding-inline:20px;padding-block:clamp(56px,13vw,88px);
  }
  .turnaway__lead{margin-block:18px 26px}
  .sec--gap .statement{margin-block:20px 44px}
  .gap__list{margin-block-start:0}
  .statement--close{margin-block-start:48px}

  .coach{grid-template-columns:1fr;padding-block:0}
  .coach__text{padding-inline:20px;padding-block-start:clamp(28px,7vw,44px)}

  /* The twelve column rag cannot survive one column, but a flush stack
     loses the section's whole signature. Every other entry steps in by
     a thumb's width, so the column still reads as composed rather than
     as a list. */
  .cases{display:block}
  .case{margin-block-start:clamp(38px,9vw,58px) !important}
  .case--a{margin-block-start:0 !important}
  .case--b,.case--d,.case--f{margin-inline-start:clamp(16px,5.5vw,28px)}
  .sec--proof .statement--sm{margin-block:18px 14px}
  .illus{margin-block-end:38px}

  .darkplate{block-size:clamp(230px,44vh,320px);margin-block:clamp(40px,10vw,70px)}

  .included,.audience{grid-template-columns:1fr;padding-block:clamp(56px,13vw,88px)}
  .included__text,.audience__text{padding-inline:20px}
  .plate--work,.plate--square{margin-block-start:clamp(38px,9vw,60px)}
  .runin,.segs{margin-block-start:clamp(28px,7vw,44px)}

  .voices{display:block}
  .voice{margin-block-start:clamp(34px,8vw,54px) !important}
  .voice--b,.voice--d{margin-inline-start:clamp(16px,5.5vw,28px)}
  .pull{margin-block:20px 0}

  .plate--band{margin:clamp(46px,11vw,80px) 0}

  .enroll{display:block;padding-inline:20px;padding-block:clamp(50px,12vw,80px)}
  .form{display:grid;grid-template-columns:1fr;margin-block-start:clamp(34px,8vw,52px)}
  .form__foot{flex-direction:column;align-items:flex-start;gap:14px}

  /* the last line has to clear the fixed demo badge */
  .foot{display:block;padding:clamp(56px,13vw,84px) 20px 66px}
  .foot__cols{margin-block-start:30px;gap:22px 30px}
  .foot__disclosure{margin-block-start:38px}

  /* On a phone the badge is unavoidably over content. Hebrew lines all
     begin at the inline start, so a badge parked there hides the first
     words of whatever it passes; parked at the inline end it sits over
     the ragged edge and hides almost nothing. */
  .demo-badge{font-size:.68rem;padding:6px 10px;inset-inline:auto 12px}
}

/* ============================================================ touch sizing
   Composition is unchanged; only the hit boxes grow. Everything a thumb
   has to find is brought to 44px, and every field is set at 16px so iOS
   Safari stops zooming the page the moment the keyboard opens. */
@media (pointer:coarse),(max-width:760px){
  .brand{padding-block:10px}
  .masthead__nav a{padding-block:10px;margin-block:-4px}
  .masthead .btn--sm{
    display:inline-flex;align-items:center;
    min-block-size:44px;padding:0 1.3em;
  }
  .ln{padding-block:9px}
  .cta-row{gap:16px 24px}
  .demo-badge{padding-block:8px}

  .field input[type="text"],.field input[type="tel"],
  .field input[type="email"],.field select,.field textarea{
    font-size:16px;padding-block:11px;
  }
  .field--check{gap:12px;padding-block-start:8px}
  .field--check input{inline-size:22px;block-size:22px;margin-block-start:1px}
  .field--check label{padding-block:4px}

  .foot__cols nav,.foot__cols address{gap:0}
  .foot__cols nav a,.foot__cols address a{padding-block:10px}
  .foot__cols address span{padding-block:10px}
}

/* ========================================================= reduced motion */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    transition-duration:1ms !important;
    animation-duration:1ms !important;
    animation-iteration-count:1 !important;
  }
  .js-motion [data-reveal]{opacity:1}
  .js-parallax .plate > img,
  .js-parallax .darkplate > img{transform:none}
}