/* =============================================================================
   Meitar · Data Centers — landing page
   Palette + type sampled from Meitar Brand Book 2025:
     Meitar Blue      #172F56      Innovation Blue  #3B4FA3
     Stone Grey       #EBECE6      Clean White      #FFFFFF
     Deep brand navy  #131A44      Accent tint      #ABDBF0
   Typeface: Rubik (Regular 400 / Medium 500), per brand book.
   ========================================================================== */

/* ------------------------------------------------------------- tokens --- */
/* ── brand constants — identical in both themes ───────────────────────── */
:root{
  --navy-800:#131A44;   /* BRAND deep navy — the book's background */
  --navy-700:#172F56;   /* MEITAR BLUE          — book p15         */
  --navy-600:#1E3A69;   /* Meitar Blue, lifted                     */
  --blue-500:#3B50A3;   /* INNOVATION BLUE      — book p15         */
  --blue-400:#5D74D6;
  --blue-300:#8DA0E8;
  --cyan-200:#ACDBEF;   /* accent tint          — book p15         */
  --stone:#EBEBE6;      /* STONE GREY           — book p15         */
  --white:#FFFFFF;

  /* The six secondary tints from the brand book's palette page. The book's
     own instruction is to use them as light touches for variety, not as
     fields of colour — so they appear as the wheel's per-area accents and as
     the index numbers that run down the page, and nowhere as a fill. */
  --tint-sky:   #ACDBEF;
  --tint-lilac: #CAC1E0;
  --tint-green: #D7E8B4;
  --tint-olive: #BAB86B;
  --tint-coral: #EFAE94;
  --tint-sand:  #F1CCA1;
  /* the same five as triplets, for anything that needs to mix them. These are
     BRAND CONSTANTS — the --t1..--t6 slots further down are theme-adjusted so
     they stay legible as ink on each ground, and are a different thing. */
  --tint-sky-rgb:   172,219,239;
  --tint-lilac-rgb: 202,193,224;
  --tint-green-rgb: 215,232,180;
  --tint-coral-rgb: 239,174,148;
  --tint-sand-rgb:  241,204,161;

  --wrap: 1240px;
  --pad: clamp(20px, 5vw, 64px);
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;

  --ease: cubic-bezier(.22,.8,.28,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --t-fast: .22s;
  --t: .42s;
  --t-slow: .8s;
  /* the bar settling in is its own pace: slower than anything else on the
     page and on a curve with no overshoot at either end */
  --t-nav: .55s;
  --ease-nav: cubic-bezier(.33,0,.2,1);

  --font: 'Rubik', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
}

/* Swapping ground is a big visual move; easing the few properties that carry
   it keeps the switch from reading as a page reload. */
body, .nav, .section, .footer, .domain, .why, .pillars li, .partners, .pcard,
.edge img, .section__bg img{
  transition:background-color .45s var(--ease), color .45s var(--ease),
             border-color .45s var(--ease), filter .45s var(--ease);
}
@media (prefers-reduced-motion: reduce){
  body, .nav, .section, .footer, .domain, .why, .pillars li, .partners, .pcard,
  .edge img, .section__bg img{ transition:none; }
}

/* ── DARK (default) ───────────────────────────────────────────────────────
   The canvas tones are #131A44 held at the same hue and dropped in
   lightness; Meitar Blue is the surface colour, and the accent tint carries
   every interaction. ------------------------------------------------------ */
:root, [data-theme="dark"]{
  color-scheme: dark;

  --canvas:      #0C1330;
  --canvas-soft: #0F1739;
  --canvas-deep: #080D22;

  --surface:      var(--navy-700);   /* cards, panels          */
  --surface-2:    var(--navy-600);   /* raised panel           */
  --surface-soft: var(--canvas-soft);/* quiet cell             */
  --surface-hot:  var(--navy-700);   /* hover fill             */
  --surface-deep: var(--navy-800);

  --ink:        var(--stone);
  --ink-strong: var(--white);
  --ink-dim:    #C2CBDC;
  --ink-faint:  #93A0BC;

  --line:        rgba(171,219,240,.16);
  --line-strong: rgba(171,219,240,.30);
  --grid-line:   rgba(171,219,240,.055);

  --accent:      var(--cyan-200);
  --accent-rgb:  171,219,240;
  --on-accent:   #0C1330;

  --wash-rgb:  23,47,86;             /* section radial washes  */
  --wash-a:    .80;
  --scrim:     rgba(4,7,22,.74);
  /* MEITAR BLUE, and close to solid. It used to be a 72% wash, which over a
     bright cover photograph read as grey rather than as the brand colour. */
  /* MEITAR BLUE, solid, at every scroll position. It floated transparent over
     the cover while the cover was dark; now that every section is light, a
     transparent bar would put white type on a pale photograph. One colour is
     the only state that works on a light page. */
  --nav-bg:       #172F56;
  --nav-bg-stuck: #172F56;
  --shadow-1:  0 22px 46px rgba(4,7,20,.55);
  --shadow-2:  0 40px 90px -24px rgba(0,0,0,.85);

  /* photography */
  /* A gradient map, done with filters: sepia lays every luminance onto one
     warm ramp, hue-rotate swings that ramp to the brand blue, saturate sets
     how strongly. Unlike a lighten/darken pair or a `color` blend it reaches
     the MID greys too, which is what a near-monochrome render is made of. */
  --photo-filter: grayscale(1) sepia(1) hue-rotate(175deg) saturate(2.6)
                  brightness(.78) contrast(1.04);
  --photo-o: 1;
  --photo-plain: brightness(.72) saturate(.92) contrast(1.02);
  --photo-veil:   linear-gradient(180deg, rgba(12,19,48,.5), transparent 42%, rgba(12,19,48,.42));
  --hero-scrim:   rgba(10,15,44,.74);
  --hero-photo-o: .5;
  --hero-photo-filter: saturate(.5) hue-rotate(-18deg) brightness(.85);
  --hero-veil: none;   /* the white wash belongs to the light ground only */

  /* The wheel — read by app.js, so each theme sets its own ramp.
     The ramp stays inside the deeper half of the blues. It used to run all
     the way out to the accent tint, and a tile that pale swallows the rim
     light the client asked for and leaves the ring reading as a gradient
     rather than as thirteen areas. */
  --pie-from: 22,48,92;
  --pie-to:   78,127,196;
  --pie-gap:  #0C1330;
  --seg-dim-ink: #AEB8CC;
  --seg-dim-a: .2;
  --hub-in:  #1B2559;
  --hub-out: #0C1234;
  --pie-glow: #9FD6F0;
  --glow-a: .62;
  --field-photo-o: .26;
  --seg-icon: #FFFFFF;
  --seg-icon-glow: #8FCDEC;
  --mesh-rgb: 171,219,240;

  /* the book's six tints, taken as they are printed: on the deep navy they
     read at full strength */
  --t1:var(--tint-sky);   --t1-rgb:172,219,239;
  --t2:var(--tint-lilac); --t2-rgb:202,193,224;
  --t3:var(--tint-green); --t3-rgb:215,232,180;
  --t4:var(--tint-olive); --t4-rgb:186,184,107;
  --t5:var(--tint-coral); --t5-rgb:239,174,148;
  --t6:var(--tint-sand);  --t6-rgb:241,204,161;
}

/* ── LIGHT ────────────────────────────────────────────────────────────────
   Same brand, inverted ground: Stone Grey and white carry the page, the deep
   brand navy carries the type, and Innovation Blue takes over as the
   interaction colour — the accent tint is too pale to hold on a light
   ground. ---------------------------------------------------------------- */
[data-theme="light"]{
  color-scheme: light;

  /* No grey. The book gives three colours to build a light page out of —
     white, Meitar Blue and Innovation Blue — and Stone Grey is a light touch,
     not a ground. Every surface below is therefore white carrying a little
     Meitar Blue, not a neutral: mixed off #172F56, never off black. Stone Grey
     appears exactly twice on the page, in the footer band and the nav rule. */
  --canvas:      #FFFFFF;
  --canvas-soft: #F5F8FC;
  --canvas-deep: #EAF0F8;

  --surface:      #F2F6FC;   /* cards, panels          */
  --surface-2:    #E5EDF8;   /* raised panel           */
  --surface-soft: #F8FAFD;   /* quiet cell             */
  --surface-hot:  #E2EBF8;   /* hover fill             */
  --surface-deep: var(--stone);   /* the one Stone Grey band  */

  --ink:        var(--navy-700);   /* MEITAR BLUE sets the body ink     */
  --ink-strong: var(--navy-700);   /* ...and the headings, at full value */
  --ink-dim:    #3B5480;
  --ink-faint:  #6B84AC;

  --line:        rgba(23,47,86,.17);
  --line-strong: rgba(23,47,86,.32);
  --grid-line:   rgba(23,47,86,.055);

  --accent:      var(--blue-500);
  --accent-rgb:  59,80,163;
  --on-accent:   #FFFFFF;

  --wash-rgb:  59,80,163;
  --wash-a:    .16;
  --scrim:     rgba(255,255,255,.84);
  --nav-bg:    rgba(255,255,255,.78);
  --nav-bg-stuck: rgba(255,255,255,.92);
  --shadow-1:  0 22px 46px rgba(23,47,86,.14);
  --shadow-2:  0 40px 90px -24px rgba(23,47,86,.30);

  /* NO DUOTONE HERE. The gradient map that makes a photograph sit on navy
     turns the same photograph into something lurid on white. On this ground a
     picture is simply itself, lifted a little and held back a little so the
     copy in front of it still reads. */
  /* IN COLOUR. The pictures were greyscaled and then veiled, and between the
     two the page had no colour left in it at all. They keep their own colour
     now; a single flat veil per section is what makes the copy readable. */
  --photo-filter: brightness(.98) saturate(1.04);
  --photo-o: 1;
  /* How much canvas sits over a picture. FLAT across the whole width — the
     value is per section, not per side, because the pictures differ wildly in
     how much they fight type: a pale skyline needs almost nothing, a saturated
     canyon needs a lot. Set on the section, used by every ::after below. */
  --canvas-rgb: 255,255,255;
  --veil-a: .74;   /* only the wheel's backdrop still uses this */
  --photo-plain: brightness(.98);
  --photo-veil:   linear-gradient(180deg, rgba(255,255,255,.46), transparent 44%, rgba(255,255,255,.40));
  --hero-scrim:   rgba(255,255,255,.42);
  --hero-photo-o: .82;
  --hero-photo-filter: brightness(.82) saturate(1.02);

  /* mirrored: on Stone Grey the tiles stay in the pale half, so the navy
     labels hold on every one of them and the rim light is the dark edge */
  --pie-from: 216,229,242;
  --pie-to:   139,175,213;
  --pie-gap:  #FFFFFF;
  --seg-dim-ink: #3B5480;
  --seg-dim-a: .38;   /* a pale slice on a pale ground needs more body */
  --hub-in:  #FFFFFF;
  --hub-out: #E7EEF9;
  /* a cyan rim light disappears on white; on this ground the light has to be
     darker than what it surrounds, so it is Innovation Blue held back */
  --pie-glow: #3B50A3;
  --glow-a: .28;
  --field-photo-o: .20;
  /* a white mark disappears on a pale tile; here the mark is Meitar Blue and
     the light around it is Innovation Blue */
  --seg-icon: #172F56;
  --seg-icon-glow: rgba(59,80,163,.55);

  /* THE BOOK'S COLOURS, EXACTLY AS PRINTED. They were darkened here so they
     would hold as ink on white; the client asked for them one to one, so the
     derived versions are gone and these are the hexes off the palette page.
     They are used at full opacity everywhere — no alpha, no mixing. */
  --t1:var(--tint-sky);   --t1-rgb:var(--tint-sky-rgb);
  --t2:var(--tint-lilac); --t2-rgb:var(--tint-lilac-rgb);
  --t3:var(--tint-green); --t3-rgb:var(--tint-green-rgb);
  --t4:var(--tint-olive); --t4-rgb:186,184,107;
  --t5:var(--tint-coral); --t5-rgb:var(--tint-coral-rgb);
  --t6:var(--tint-sand);  --t6-rgb:var(--tint-sand-rgb);
  /* Held right back. The cover used to be a dark band, and the white wash that
     is right over navy turned the photograph to paper once it became a light
     one — logo, type and picture all dissolving into each other. */
  --hero-veil: linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,.06) 52%, rgba(255,255,255,.30));
  --mesh-rgb: 59,80,163;
}




/* ── A DARK BAND, ON DEMAND ───────────────────────────────────────────────
   NOTHING CARRIES THIS CLASS AT THE MOMENT. Every section on the page is
   light. The rule is kept because it is the whole mechanism for a dark band
   and because /zebra — the version that alternated — is built on it, so
   putting one back is a single class on a single section.

   A dark band is NOT a second design. It is this file's dark token set,
   re-declared on a class, so every rule already written keeps working inside
   it — surfaces, ink, lines, the accent, the photography treatment and the
   wheel's ramp all come along. Nothing below this line needed changing.

   In the dark version the class is inert: the selector is scoped to
   [data-theme="light"]. ------------------------------------------------- */
[data-theme="light"] .section--ink{
  color-scheme: dark;   /* so <select> drops open dark, not white */
  --hero-veil: none;
  --canvas:      #0C1330;
  --canvas-soft: #0F1739;
  --canvas-deep: #080D22;

  --surface:      var(--navy-700);   /* cards, panels          */
  --surface-2:    var(--navy-600);   /* raised panel           */
  --surface-soft: var(--canvas-soft);/* quiet cell             */
  --surface-hot:  var(--navy-700);   /* hover fill             */
  --surface-deep: var(--navy-800);

  --ink:        var(--stone);
  --ink-strong: var(--white);
  --ink-dim:    #C2CBDC;
  --ink-faint:  #93A0BC;

  --line:        rgba(171,219,240,.16);
  --line-strong: rgba(171,219,240,.30);
  --grid-line:   rgba(171,219,240,.055);

  --accent:      var(--cyan-200);
  --accent-rgb:  171,219,240;
  --on-accent:   #0C1330;

  --wash-rgb:  23,47,86;             /* section radial washes  */
  --wash-a:    .80;
  --scrim:     rgba(4,7,22,.74);
  /* MEITAR BLUE, solid, at every scroll position. It floated transparent over
     the cover while the cover was dark; now that every section is light, a
     transparent bar would put white type on a pale photograph. One colour is
     the only state that works on a light page. */
  --nav-bg:       #172F56;
  --nav-bg-stuck: #172F56;
  --shadow-1:  0 22px 46px rgba(4,7,20,.55);
  --shadow-2:  0 40px 90px -24px rgba(0,0,0,.85);

  /* photography */
  /* A gradient map, done with filters: sepia lays every luminance onto one
     warm ramp, hue-rotate swings that ramp to the brand blue, saturate sets
     how strongly. Unlike a lighten/darken pair or a `color` blend it reaches
     the MID greys too, which is what a near-monochrome render is made of. */
  --photo-filter: grayscale(1) sepia(1) hue-rotate(175deg) saturate(2.6)
                  brightness(.78) contrast(1.04);
  --photo-o: 1;
  --photo-plain: brightness(.72) saturate(.92) contrast(1.02);
  --photo-veil:   linear-gradient(180deg, rgba(12,19,48,.5), transparent 42%, rgba(12,19,48,.42));
  --hero-scrim:   rgba(10,15,44,.74);
  --hero-photo-o: .5;
  --hero-photo-filter: saturate(.5) hue-rotate(-18deg) brightness(.85);

  /* The wheel — read by app.js, so each theme sets its own ramp.
     The ramp stays inside the deeper half of the blues. It used to run all
     the way out to the accent tint, and a tile that pale swallows the rim
     light the client asked for and leaves the ring reading as a gradient
     rather than as thirteen areas. */
  --pie-from: 22,48,92;
  --pie-to:   78,127,196;
  --pie-gap:  #0C1330;
  --seg-dim-ink: #AEB8CC;
  --seg-dim-a: .2;
  --hub-in:  #1B2559;
  --hub-out: #0C1234;
  --pie-glow: #9FD6F0;
  --glow-a: .8;
  --field-photo-o: .26;
  --seg-icon: #FFFFFF;
  --seg-icon-glow: #8FCDEC;
  --mesh-rgb: 171,219,240;

  /* the book's six tints, taken as they are printed: on the deep navy they
     read at full strength */
  --t1:var(--tint-sky);   --t1-rgb:172,219,239;
  --t2:var(--tint-lilac); --t2-rgb:202,193,224;
  --t3:var(--tint-green); --t3-rgb:215,232,180;
  --t4:var(--tint-olive); --t4-rgb:186,184,107;
  --t5:var(--tint-coral); --t5-rgb:239,174,148;
  --t6:var(--tint-sand);  --t6-rgb:241,204,161;
}
/* the ground itself, and the seam between two bands */
[data-theme="light"] .section--ink{
  background:var(--canvas);
  color:var(--ink);
}
[data-theme="light"] .section--ink + .section--ink{ border-top:0; }



/* THE BAR IS ALWAYS DARK — in both versions, over every band. It used to
   follow whatever was under it, which meant it changed colour as you scrolled
   and flashed white for a frame before the first measurement. Taking the dark
   token set here, in CSS alone, means it is right from the first paint and
   never moves. */
[data-theme="light"] .nav{

  --hero-veil: none;
  --canvas:      #0C1330;
  --canvas-soft: #0F1739;
  --canvas-deep: #080D22;

  --surface:      var(--navy-700);   /* cards, panels          */
  --surface-2:    var(--navy-600);   /* raised panel           */
  --surface-soft: var(--canvas-soft);/* quiet cell             */
  --surface-hot:  var(--navy-700);   /* hover fill             */
  --surface-deep: var(--navy-800);

  --ink:        var(--stone);
  --ink-strong: var(--white);
  --ink-dim:    #C2CBDC;
  --ink-faint:  #93A0BC;

  --line:        rgba(171,219,240,.16);
  --line-strong: rgba(171,219,240,.30);
  --grid-line:   rgba(171,219,240,.055);

  --accent:      var(--cyan-200);
  --accent-rgb:  171,219,240;
  --on-accent:   #0C1330;

  --wash-rgb:  23,47,86;             /* section radial washes  */
  --wash-a:    .80;
  --scrim:     rgba(4,7,22,.74);
  /* MEITAR BLUE, solid, at every scroll position. It floated transparent over
     the cover while the cover was dark; now that every section is light, a
     transparent bar would put white type on a pale photograph. One colour is
     the only state that works on a light page. */
  --nav-bg:       #172F56;
  --nav-bg-stuck: #172F56;
  --shadow-1:  0 22px 46px rgba(4,7,20,.55);
  --shadow-2:  0 40px 90px -24px rgba(0,0,0,.85);

  /* photography */
  /* A gradient map, done with filters: sepia lays every luminance onto one
     warm ramp, hue-rotate swings that ramp to the brand blue, saturate sets
     how strongly. Unlike a lighten/darken pair or a `color` blend it reaches
     the MID greys too, which is what a near-monochrome render is made of. */
  --photo-filter: grayscale(1) sepia(1) hue-rotate(175deg) saturate(2.6)
                  brightness(.78) contrast(1.04);
  --photo-o: 1;
  --photo-plain: brightness(.72) saturate(.92) contrast(1.02);
  --photo-veil:   linear-gradient(180deg, rgba(12,19,48,.5), transparent 42%, rgba(12,19,48,.42));
  --hero-scrim:   rgba(10,15,44,.74);
  --hero-photo-o: .5;
  --hero-photo-filter: saturate(.5) hue-rotate(-18deg) brightness(.85);

  /* The wheel — read by app.js, so each theme sets its own ramp.
     The ramp stays inside the deeper half of the blues. It used to run all
     the way out to the accent tint, and a tile that pale swallows the rim
     light the client asked for and leaves the ring reading as a gradient
     rather than as thirteen areas. */
  --pie-from: 22,48,92;
  --pie-to:   78,127,196;
  --pie-gap:  #0C1330;
  --seg-dim-ink: #AEB8CC;
  --seg-dim-a: .2;
  --hub-in:  #1B2559;
  --hub-out: #0C1234;
  --pie-glow: #9FD6F0;
  --glow-a: .8;
  --field-photo-o: .26;
  --seg-icon: #FFFFFF;
  --seg-icon-glow: #8FCDEC;
  --mesh-rgb: 171,219,240;

  /* the book's six tints, taken as they are printed: on the deep navy they
     read at full strength */
  --t1:var(--tint-sky);   --t1-rgb:172,219,239;
  --t2:var(--tint-lilac); --t2-rgb:202,193,224;
  --t3:var(--tint-green); --t3-rgb:215,232,180;
  --t4:var(--tint-olive); --t4-rgb:186,184,107;
  --t5:var(--tint-coral); --t5-rgb:239,174,148;
  --t6:var(--tint-sand);  --t6-rgb:241,204,161;
}


/* ---------------------------------------------------------- theme switch -- */
/* an icon, not a labelled switch — the nav has no room for a word */
.theme-toggle{
  position:relative; flex:none;
  width:34px; height:34px; display:grid; place-items:center;
  background:none; border:0; padding:0; cursor:pointer;
  color:var(--ink-faint);
  transition:color var(--t-fast) var(--ease);
}
.theme-toggle:hover{ color:var(--accent); }
.theme-toggle svg{
  grid-area:1/1; width:19px; height:19px;
  transition:opacity var(--t) var(--ease), transform var(--t) var(--ease);
}
.theme-toggle__sun{ opacity:0; transform:rotate(-70deg) scale(.6); }
[data-theme="light"] .theme-toggle__moon{ opacity:0; transform:rotate(70deg) scale(.6); }
[data-theme="light"] .theme-toggle__sun { opacity:1; transform:none; }

/* The switch is gone from THIS site: the page alternates ground down its
   length and that alternation is the design, so there is nothing to switch
   between. The rules above stay because /old still uses them, and because
   restoring the choice should be a one-line change. */
.theme-toggle{ display:none; }


/* ── LAPTOP STEP ──────────────────────────────────────────────────────────
   On a laptop everything was running large — type, measure, the lot — while
   the same page reads correctly on a desktop monitor. Rather than re-tuning
   forty clamps, the root size and the content width step down together across
   the widths a laptop actually is. Every clamp's ends are in rem, so they all
   come with it; above 1600px nothing changes. --------------------------- */
@media (min-width:1024px) and (max-width:1600px){
  html{ font-size:92%; }
  :root{ --wrap:1100px; }
  /* the running size is otherwise governed by its vw term, which would sit
     out the step */
  html body{ font-size:1rem; }   /* out-specifies the base clamp */
}
@media (min-width:1024px) and (max-width:1330px){
  html{ font-size:89%; }
  :root{ --wrap:1020px; }
}
/* the bar carries six labels, a switch and a pill; below this the gaps have to
   give before the labels do */
@media (min-width:900px) and (max-width:1240px){
  .nav__links{ gap:clamp(10px,1.4vw,18px); }
  .nav__links a{ font-size:.8rem; }
  .nav__section{ display:none; }
}

/* --------------------------------------------------------------- base --- */
*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }
/* the bar is sticky, so an anchor has to stop clear of it */
section[id], .section[id]{ scroll-margin-top:96px; }
/* The closing block is arrived at deliberately, so it should land flush under
   the bar with nothing of the previous section left showing above it. --nav-h
   is the bar's measured height, set by app.js. */
#cta{ scroll-margin-top:var(--nav-h, 74px); }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:clip; }
body{
  margin:0;
  font-family:var(--font);
  font-weight:400;
  font-size:clamp(.9375rem,1.05vw,1.0625rem);   /* rem, so the laptop step below scales it */
  line-height:1.6;
  color:var(--ink);
  background:var(--canvas);
  overflow-x:clip;   /* clip, not hidden — hidden would break the sticky nav */
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
button{ font:inherit; color:inherit; }
a{ color:inherit; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }

::selection{ background:var(--accent); color:var(--on-accent); }

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:4px;
}

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }

.skip-link{
  position:fixed; top:-100px; left:16px; z-index:200;
  background:var(--accent); color:var(--on-accent);
  padding:10px 18px; border-radius:var(--r-sm); font-weight:500;
}
.skip-link:focus{ top:16px; }

/* --------------------------------------------------------- typography --- */
.eyebrow{
  font-size:.72rem; font-weight:500; letter-spacing:.22em; text-transform:uppercase;
  color:var(--accent); margin-bottom:20px;
  display:flex; align-items:center; gap:12px;
}
.eyebrow::before{
  content:''; width:26px; height:1px; background:var(--accent); opacity:.55; flex:none;
}
.section__head--center .eyebrow{ justify-content:center; }

.h2{
  font-size:clamp(1.9rem,4vw,3.15rem);
  font-weight:500; line-height:1.1; letter-spacing:-.02em;
  max-width:19ch;
}
.h2--xl{ font-size:clamp(2.1rem,5.2vw,4rem); max-width:16ch; }
.section__head--center .h2{ margin-inline:auto; text-align:center; }

.lede{
  font-size:clamp(1rem,1.35vw,1.2rem);
  color:var(--ink-dim); max-width:62ch; margin-top:22px; font-weight:300;
}
.lede--sm{ font-size:clamp(.95rem,1.15vw,1.05rem); max-width:52ch; }
.section__head--center .lede{ margin-inline:auto; text-align:center; }

/* -------------------------------------------------------------- button -- */
.btn{
  --btn-bg:transparent; --btn-fg:var(--ink); --btn-bd:var(--line-strong);
  position:relative; display:inline-flex; align-items:center; gap:10px;
  padding:15px 28px; border-radius:100px;
  background:var(--btn-bg); color:var(--btn-fg);
  border:1px solid var(--btn-bd);
  font-size:.92rem; font-weight:500; letter-spacing:.01em;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
             border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease),
             box-shadow var(--t-fast) var(--ease);
}
.btn--sm{ padding:10px 20px; font-size:.84rem; }
/* MEITAR BLUE carries the primary action. The accent (Innovation Blue) stays
   on links, focus rings and the quieter interactions, which is the division
   the book draws between the two. */
.btn--primary{ --btn-bg:var(--navy-700); --btn-fg:#FFFFFF; --btn-bd:var(--navy-700); }
.btn--primary:hover{
  --btn-bg:var(--navy-600); --btn-bd:var(--navy-600);
  box-shadow:0 10px 34px -10px rgba(23,47,86,.55); transform:translateY(-2px);
}
.btn--ghost:hover{ --btn-bd:var(--accent); background:rgba(var(--accent-rgb),.08); transform:translateY(-2px); }

/* --------------------------------------------------------- demo ribbon -- */
.demo-notice{
  position:relative; z-index:120;
  display:flex; align-items:center; gap:12px;
  padding:9px var(--pad);
  background:rgba(var(--accent-rgb),.10);
  border-bottom:1px solid var(--line);
  font-size:.78rem; color:var(--ink-dim);
}
.demo-notice__dot{
  width:7px; height:7px; border-radius:50%; background:var(--accent); flex:none;
  box-shadow:0 0 0 4px rgba(var(--accent-rgb),.18);
}
.demo-notice p{ flex:1; }
.demo-notice__close{
  background:none; border:0; cursor:pointer; font-size:1.2rem; line-height:1;
  color:var(--ink-faint); padding:4px 6px;
}
.demo-notice__close:hover{ color:var(--ink); }

/* ----------------------------------------------------------------- nav -- */
/* OUT OF FLOW, AT EVERY WIDTH.
   It used to be sticky and in flow, with a negative bottom margin equal to its
   own height so the cover could sit underneath it. That works while the bar is
   one height — but the bar SHRINKS on scroll, so the margin had to be
   re-published from JS on every frame of the shrink, one frame behind the
   height it was cancelling. Every frame the page below stepped by the
   difference. That was the jump: not the bar easing badly, the whole document
   sliding a pixel at a time under a finger that was already scrolling.
   Fixed, the bar's height costs the page nothing and it can change as freely
   as it likes. --nav-h is now published once, at its full height, and is only
   an anchor offset. */
.nav{
  position:fixed; inset-inline:0; top:0; z-index:100;
  background-color:var(--nav-bg);
  border-bottom:1px solid transparent;
  /* background-COLOR, not the shorthand: only the longhand is reliably
     animatable, and the shorthand was leaving the bar painted blue after the
     class had already come off at the top of the page. */
  transition:border-color var(--t-nav) var(--ease-nav), background-color var(--t-nav) var(--ease-nav),
             padding var(--t-nav) var(--ease-nav);
}
/* It draws itself in once you start to scroll. This wants to be barely
   noticed, so it is deliberately small and slow: six pixels off the padding
   and four off the lockup, over half a second on a soft curve. Two things it
   does NOT do, both of which read as a jump rather than a settle — it does not
   animate the link type (a font-size change reflows the row, and type snaps
   between whole pixels on the way), and it does not re-measure --nav-h, which
   would drag the page up behind it. app.js gives the class hysteresis so a
   slow scroll near the top cannot flutter it. */
.nav__inner{ transition:padding var(--t-nav) var(--ease-nav); }
.nav.is-stuck .nav__inner{ padding-block:7px; }
/* The lockup shrinks by HEIGHT, and a scale transform was tried and thrown
   away. A scale is the cheaper of the two — it goes to the compositor and
   costs the frame nothing — but it scales the RASTER, and the second line of
   this lockup is 8px Hebrew: at .75 it came back mush and stayed mush after
   the ease had settled. Height re-rasterises the artwork at its new size, so
   the mark stays a mark. It buys a layout per frame inside the bar, which is
   a flex row of five items and out of flow now, so the page never feels it. */
.nav__logo{ transition:height var(--t-nav) var(--ease-nav); }
.nav.is-stuck .nav__logo{ height:27px; }
.nav__links a{ transition:color var(--t-fast) var(--ease); }
@media (prefers-reduced-motion: reduce){
  .nav, .nav__inner, .nav__logo, .nav__links a{ transition:none; }
}

/* an open menu needs a ground of its own, wherever the page happens to be */
.nav:has(.nav__links.is-open){ background-color:var(--nav-bg-stuck); }
.nav.is-stuck{ border-bottom-color:var(--line); background-color:var(--nav-bg-stuck); }
.nav__inner{
  max-width:var(--wrap); margin-inline:auto; padding:17px var(--pad);
  display:flex; align-items:center; gap:clamp(12px,1.8vw,28px);
}
.nav__brand{
  display:flex; align-items:center; gap:11px; text-decoration:none; flex:none;
}
/* the second line of the lockup is small artwork; below about 34px it stops
   resolving, so this is the floor rather than a preference */
.nav__logo{ height:36px; width:auto; flex:none; display:block; }
/* Both weights ship; only the one that suits the ground is drawn. The
   doubled class is deliberate — `.hero__logo{display:block}` is declared
   later in the file and would otherwise win on source order. */
/* The bar is dark in both versions, so its lockup is ALWAYS the reversed one
   and never swaps. Only the cover's lockup follows the ground. */
.nav__logo.nav__logo--light{ display:none; }
.nav__logo.nav__logo--dark { display:block; }
.nav__divider{ width:1px; height:16px; background:var(--line-strong); }
.nav__section{ font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); }

.nav__links{ display:flex; gap:clamp(14px,2vw,30px); margin-inline-start:auto; }
/* the menu's own Contact exists only where the pill is hidden — above 860px
   the bar carries the pill and this would be the same word twice */
.nav__links-cta{ display:none; }
.nav__links a{
  position:relative; text-decoration:none; font-size:calc(.86rem + 2px); color:var(--ink-dim);
  padding:6px 0; transition:color var(--t-fast) var(--ease);
  white-space:nowrap;   /* "The Practice" is two words, not two lines */
}
.nav__links a::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform var(--t) var(--ease);
}
.nav__links a:hover, .nav__links a.is-active{ color:var(--ink); }
.nav__links a.is-active::after, .nav__links a:hover::after{ transform:scaleX(1); }
.nav__cta{ flex:none; }
.nav__burger{ display:none; }
.nav__progress{
  height:1px; background:var(--accent); width:0%; transform-origin:left;
  box-shadow:0 0 12px rgba(var(--accent-rgb),.8);
}

/* ---------------------------------------------------------- background -- */
.grid-plane{
  position:absolute; inset:0;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(120% 78% at 50% 10%, #000 15%, transparent 72%);
  -webkit-mask-image:radial-gradient(120% 78% at 50% 10%, #000 15%, transparent 72%);
}
.grid-plane--soft{ opacity:.6; background-size:56px 56px; }

/* ---------------------------------------------------------------- hero -- */
.hero{
  position:relative; min-height:min(100svh,880px);
  display:flex; align-items:center;
  padding:clamp(80px,12vh,140px) 0 clamp(70px,10vh,110px);
  overflow:hidden;
  background:
    radial-gradient(90% 70% at 78% 12%, rgba(var(--wash-rgb),var(--wash-a)), transparent 62%),
    radial-gradient(70% 60% at 12% 86%, rgba(var(--wash-rgb),var(--wash-a)), transparent 64%),
    linear-gradient(180deg, var(--canvas-deep), var(--canvas) 62%, var(--canvas-soft));
}
/* clip-path:inset(0) would trap the fixed frame inside the hero's own box,
   which is precisely what must not happen now that it carries three sections */
.hero__bg{ position:absolute; inset:0; }
/* once the cover is well behind us the pinned frame stops painting */
.hero__bg.is-past{ visibility:hidden; }
/* once the cover is well behind us the pinned frame stops painting */
.hero__bg.is-past{ visibility:hidden; }
/* deck cover photography, pushed well back so the type stays the subject */
/* Pinned. The page scrolls over a still frame — no parallax offset, no
   translate driven from the scroll position. */
/* No bottom fade any more. The still used to dissolve before the end of the
   first screen because nothing was meant to sit on it; now the two opening
   sections DO sit on it, and what holds them legible is their own translucent
   ground, not a mask on the picture. It is taller than the viewport so the
   gentle drift app.js gives it never uncovers an edge. */
.hero__photo{
  position:fixed; inset:-6svh 0 auto 0; width:100%; height:112svh;
  object-fit:cover; object-position:50% 50%;
  /* the render runs hot magenta; pulled toward the brand blues and held
     well back so it reads as texture, not as a picture. */
  filter:var(--hero-photo-filter);
  opacity:0; transform:scale(1.12);
  animation:heroPhotoIn 2.2s var(--ease-out) .15s forwards;
  will-change:transform;
}
@keyframes heroPhotoIn{ to{ opacity:var(--hero-photo-o); transform:scale(1); } }


/* optional hero loop — sits over the still, which acts as its poster */
.hero__video{
  position:fixed; inset:0 0 auto 0; width:100%; height:100svh;
  object-fit:cover; object-position:50% 50%;
  filter:var(--hero-photo-filter);
  mask-image:linear-gradient(180deg, #000 12%, rgba(0,0,0,.45) 62%, transparent 96%);
  -webkit-mask-image:linear-gradient(180deg, #000 12%, rgba(0,0,0,.45) 62%, transparent 96%);
  opacity:0; pointer-events:none;
  transition:opacity 1.4s var(--ease-out);
}
.hero__video.is-ready{ opacity:var(--hero-photo-o); }
#heroCanvas{ position:absolute; inset:0; width:100%; height:100%; }
.hero__glow{
  position:absolute; border-radius:50%; filter:blur(90px); opacity:.5;
  animation:drift 22s var(--ease) infinite alternate;
}
.hero__glow--a{ width:44vw; height:44vw; right:-8vw; top:-6vw; background:rgba(var(--wash-rgb),var(--wash-a)); }
.hero__glow--b{ width:34vw; height:34vw; left:-6vw; bottom:-10vw; background:rgba(var(--accent-rgb),.12); animation-delay:-8s; }
@keyframes drift{ to{ transform:translate3d(4%,5%,0) scale(1.12); } }

.hero__inner{ position:relative; }
.hero__title{
  font-size:clamp(2.5rem,6.6vw,5.4rem);
  font-weight:400; line-height:1.03; letter-spacing:-.035em;
  max-width:15ch;
}
.hero__title .line{ display:block; overflow:hidden; }
.hero__title .line span{
  display:block;
  transform:translateY(105%);
  animation:riseIn 1.05s var(--ease-out) forwards;
}
.hero__title .line:nth-child(2) span{ animation-delay:.11s; color:var(--accent); }
@keyframes riseIn{ to{ transform:translateY(0); } }

.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:38px; }

/* ---- cover variant: the deck's own lockup — logo centred, practice title
   directly beneath it, nothing else competing for the frame. ---- */
.hero--cover .hero__inner{ text-align:center; }
/* the corridor render is bright down its centre line, so the lockup sits on
   its own scrim rather than dimming the whole photograph */
.hero--cover .hero__bg::after{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(46% 40% at 50% 46%, var(--hero-scrim), transparent 100%),
    var(--hero-veil, transparent);
}
.hero--cover .hero__photo{ opacity:0; animation:heroCoverIn 2.2s var(--ease-out) .15s forwards; }
@keyframes heroCoverIn{ to{ opacity:var(--hero-photo-o); transform:scale(1); } }
/* The plate is back — smaller than it was, and the reversed lockup sits on
   it. On a pale corridor a block of Meitar Blue is what actually holds the
   mark; the halo alone was not enough. */
.hero__brand{
  display:block; width:max-content; max-width:92vw;
  margin:0 auto clamp(26px,4vh,48px);
  transition:transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.hero__brand:hover{ transform:translateY(-2px); }
.hero__brand--plate{
  padding:clamp(13px,1.6vw,20px) clamp(20px,2.4vw,32px);
  background:var(--navy-700);
  border-radius:var(--r-md);
  box-shadow:0 16px 44px -20px rgba(8,13,34,.5);
}
.hero__brand--plate:hover{ background:var(--navy-600); }
.hero__logo{
  display:block; width:min(320px,52vw); height:auto; margin:0;
  /* on the plate the lockup needs no halo of its own */
}
.hero--cover .hero__title{
  max-width:22ch; margin-inline:auto;
  font-size:clamp(1.85rem,4.4vw,3.5rem); font-weight:500; letter-spacing:-.02em;
}
.hero--cover .hero__title .line:nth-child(2) span{ color:inherit; }
.hero--cover .hero__actions{ justify-content:center; margin-top:clamp(30px,5vh,52px); }

.hero__scroll{
  position:absolute; bottom:34px; left:50%; transform:translateX(-50%);
  width:24px; height:54px; display:grid; place-items:center;
}
.hero__scroll-line{
  width:1px; height:44px; background:linear-gradient(var(--accent), transparent);
  animation:scrollCue 2.2s var(--ease) infinite;
}
@keyframes scrollCue{ 0%,100%{ opacity:.25; transform:scaleY(.5); transform-origin:top; } 45%{ opacity:1; transform:scaleY(1); } }

/* ------------------------------------------------------------ sections -- */
.section{ position:relative; padding:clamp(78px,11vh,150px) 0; }
.section__head{ margin-bottom:clamp(44px,6vh,76px); }

/* One photograph stands behind both opening sections. The copy is a plain
   two-column editorial block — heading in a narrow column, body in a wider
   one, a hairline between them — used identically in both, which is what
   makes the pair read as one spread. */
.band{ position:relative; isolation:isolate; }
.band .section{ position:relative; z-index:1; background:none; }

.band__text{
  display:grid; align-items:start;
  grid-template-columns:minmax(0,.36fr) minmax(0,.64fr);
  column-gap:clamp(20px,2.4vw,46px);
}
/* The eyebrow takes a row of its own in the left column, so the body starts
   level with the HEADING rather than with the top of the column. That is what
   keeps the two sections consistent: the second has no eyebrow, and without
   this its copy would ride higher than the first's. */
.band__eyebrow{ grid-column:1; grid-row:1; }
.band__title  { grid-column:1; grid-row:2; max-width:14ch; }
.band__body   { grid-column:2; grid-row:2; }

.prose.band__body{ margin-top:0; }   /* .prose's own top margin is declared later */
.band__body{
  border-inline-start:1px solid var(--line);
  padding-inline-start:clamp(20px,2.4vw,40px);
}
/* Sit the first line of the running copy on the heading's own cap height.
   Both start on the same grid row, so what has to be cancelled is only the
   difference between where each one's INK begins inside its line box:

     ink offset = half-leading + (ascender - cap height) x font-size

   For Rubik that second term is about .225em. The heading runs at
   line-height 1.1 (half-leading .05em) and the copy at 1.72 (.36em), so the
   two offsets are .275 x heading-size and .585 x copy-size. The difference is
   what this margin is. Written against the same clamp the heading uses, so it
   stays true as the heading scales. */
.band__body p:first-child{
  --band-title-fs: clamp(1.9rem, 4vw, 3.15rem);
  margin-top: calc(.275 * var(--band-title-fs) - .585em);
}
.band__body p{ max-width:56ch; }

@media (max-width:900px){
  .band__text{ grid-template-columns:minmax(0,1fr); row-gap:clamp(18px,3vh,28px); }
  .band__eyebrow, .band__title, .band__body{ grid-column:1; grid-row:auto; }
  .band__title{ max-width:none; }
  .band__body{ border-inline-start:0; padding-inline-start:0; }
  .band__body p:first-child{ margin-top:0; }
}
.section--practice{ position:relative; overflow:hidden; 
  background:
    radial-gradient(75% 60% at 20% 30%, rgba(var(--wash-rgb),var(--wash-a)), transparent 62%),
    var(--canvas);
}
.section--complexity{ background:var(--canvas-deep); }

.section--advisory{ position:relative; overflow:hidden; }
.section--advisory > .wrap{ position:relative; z-index:1; }
.section--why{ position:relative; overflow:hidden; }
.section--why > .wrap{ position:relative; z-index:1; }
/* Full page width, behind the whole block, and faded top and bottom so it does
   not begin or end on a line. The copy sits over it on a scrim heavy enough to
   read against. */
/* doubled class: this block sits ABOVE the generic .section__bg::after in the
   file, and at equal specificity the later rule would win */
/* ------------------------------------------------------------- pillars -- */
/* Hairlines, not a filled panel — the section's own ground shows through the
   cells, including the part a short paragraph leaves empty. */
.pillars{
  display:grid; margin-top:clamp(46px,6vh,70px);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden;
}
.pillars li{
  position:relative; background:var(--canvas-soft);
  padding:clamp(24px,3vw,38px) clamp(24px,3vw,38px) clamp(24px,3vw,38px) clamp(52px,5vw,74px);
  transition:background var(--t) var(--ease);
}
.pillars b{
  display:block; font-weight:500; font-size:1.05rem; margin-bottom:10px; color:var(--ink-strong);
  transition:color var(--t-fast) var(--ease);
}
.pillars span{ display:block; color:var(--ink-dim); font-size:.94rem; font-weight:300; }

/* Hover lifts the block into Meitar Blue, runs an accent rule down its inner
   edge and brings the index forward — three cues, one gesture. */
.pillar__idx{
  position:absolute; inset-inline-start:clamp(20px,2.4vw,30px); top:clamp(24px,3vw,38px);
  font-size:.72rem; letter-spacing:.18em; color:var(--tint,var(--accent));
  font-variant-numeric:tabular-nums; opacity:1;
  transition:opacity var(--t) var(--ease), transform var(--t) var(--ease);
}
.pillar__bar{
  position:absolute; inset-inline-start:0; top:50%; translate:0 -50%;
  width:2px; height:0; background:var(--tint,var(--accent));
  transition:height var(--t) var(--ease);
}
/* the cell's own surface, not a diluted tint — the bar and the index carry
   the colour, at full strength */
.pillars li:hover{ background:var(--surface-hot); }
.pillars li:hover .pillar__bar{ height:100%; }
.pillars li:hover .pillar__idx{ opacity:1; transform:translateY(-2px); }
.pillars li:hover b{ color:var(--ink-strong); }
.pillar__body{ display:block; color:var(--ink-dim); font-size:.94rem; font-weight:300; }
@media (hover:none){
  .pillars li:hover{ background:var(--canvas-soft); }
  .pillars li:hover b{ color:var(--ink-strong); }
}

/* ═════════════════════════════════════ COMPLEXITY DOMAINS (deck p3) ══ */
.domains{
  display:grid; gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  align-items:stretch;
}
/* Every card is the same height whatever its title length, and the body is
   an overlay rather than an in-flow panel — so opening one on hover never
   nudges its neighbours. */
.domain{
  position:relative;
  border:1px solid var(--line); border-radius:var(--r-md);
  background:var(--surface);
  transition:border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease),
             box-shadow var(--t-fast) var(--ease);
}
.domain:hover, .domain.is-open{
  border-color:var(--line-strong); background:var(--surface-2); z-index:6;
}
.domain__btn{
  width:100%; min-height:88px;
  display:flex; align-items:center; gap:14px;
  padding:20px; background:none; border:0; text-align:start; cursor:pointer;
  border-radius:var(--r-md);
}
.domain__num{
  font-size:.7rem; letter-spacing:.16em; color:var(--accent); flex:none;
  font-variant-numeric:tabular-nums; opacity:.75;
}
.domain__title{ flex:1; font-size:1rem; font-weight:400; line-height:1.35; }
.domain__plus{
  flex:none; width:26px; height:26px; border-radius:50%;
  border:1px solid var(--line-strong); position:relative;
  transition:all var(--t) var(--ease);
}
.domain__plus::before, .domain__plus::after{
  content:''; position:absolute; top:50%; left:50%; background:var(--ink);
  transform:translate(-50%,-50%); transition:all var(--t) var(--ease);
}
.domain__plus::before{ width:10px; height:1px; }
.domain__plus::after{ width:1px; height:10px; }
.domain.is-open .domain__plus{
  background:var(--accent); border-color:var(--accent); transform:rotate(135deg);
}
.domain.is-open .domain__plus::before, .domain.is-open .domain__plus::after{ background:var(--on-accent); }
/* An overlay, so it fades in at its natural height instead of animating a
   grid track — nothing below it moves, so there is no reflow to hide. */
.domain__panel{
  position:absolute; inset-inline:-1px; top:calc(100% - 1px); z-index:7;
  background:var(--surface-2);
  border:1px solid var(--line-strong); border-top:0;
  border-radius:0 0 var(--r-md) var(--r-md);
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity var(--t-fast) var(--ease), transform var(--t) var(--ease),
             visibility 0s linear var(--t);
}
.domain.is-open .domain__panel{
  opacity:1; visibility:visible; transform:none;
  box-shadow:var(--shadow-1);
  transition:opacity var(--t-fast) var(--ease), transform var(--t) var(--ease),
             visibility 0s;
}
.domain__body{
  padding:16px 20px 20px 48px; color:var(--ink); font-size:.95rem; font-weight:300;
}

/* ══════════════════════════════════════════════════ PIE (slide 3) ════ */
/* Centred on its own until something is chosen. Selecting an area moves the
   wheel with a transform rather than by re-flowing the grid — nothing is
   re-laid out mid-animation, so it glides instead of stepping. The partners
   are absolutely placed, which is also what keeps a clear gap between them
   and the rim. */
/* --stage is the wheel's own size. The backdrop is measured against IT and
   not against the layout, so when the layout grows to fit a tall panel of
   partners the picture stays exactly where and as big as it was. */
/* The line that introduces the wheel. Set larger than the section's own lede
   and given room on both sides, because it is doing the job of a heading for
   everything below it. */
.pie-lede{
  /* flush left with the heading and the four cards above it — centring the
     block would leave it hanging at neither edge */
  margin:clamp(34px,4.5vh,56px) 0 0;
  max-width:44ch;
  font-size:clamp(1.3rem,2.2vw,1.8rem);
  font-weight:300; line-height:1.35; letter-spacing:-.01em; color:var(--ink);
  text-wrap:balance;
}

.pie-layout{
  --stage: min(774px, 78vh);
  position:relative;
  display:flex; justify-content:center; align-items:flex-start;
  margin-top:clamp(38px,6vh,86px);
}
.pie-stage, .pie-side{ min-width:0; }

/* Bound by the VIEWPORT HEIGHT as well as the width. At 760px the wheel was
   taller than a laptop screen and ran off the bottom of it; 68vh keeps the
   whole ring on screen at any window a laptop actually has, and the width cap
   keeps it from swelling on a large monitor. */
.pie-stage{
  position:relative; width:100%; max-width:var(--stage); flex:0 1 auto;
  transition:transform .72s cubic-bezier(.28,.9,.28,1);
  will-change:transform;
}
/* THE WHEEL STEPS ASIDE, AND IT HAS TO STEP FURTHER NOW.
   The panel grew when its cards were laid down, and at -30% the first card was
   sitting on the rim. Two numbers, not one: pushing left alone runs the wheel
   off the left edge at 1100, and shrinking alone leaves the rim where it was.
   Together they clear a gutter of 24-36px at every desktop width while the
   wheel keeps at least 12px of air on its left. */
.pie-layout.is-open .pie-stage{ transform:translateX(-33%) scale(.73); }

/* Anchored to the TOP of the wheel, not its middle. Centred, a four-partner
   panel is taller than the wheel and its heading rides up over the block
   above — which is exactly what it was doing. */
.pie-side{
  position:absolute; inset-inline-end:0; top:0;
  width:min(36%, 420px);
  opacity:0; transform:translateX(28px); pointer-events:none;
  transition:opacity .42s var(--ease) .1s, transform .66s cubic-bezier(.28,.9,.28,1) .04s;
}
.pie-layout.is-open .pie-side{ opacity:1; transform:none; pointer-events:auto; }
/* while the panel is a sheet it is fixed to the viewport, so its host stops
   being a positioned, translated box — see applyMode() in app.js */
.pie-side.is-sheet-host{
  position:static; translate:none; transform:none; width:auto;
  opacity:1; pointer-events:auto; transition:none;
}

/* ── the ground the wheel stands on ───────────────────────────────────────
   The section gives the wheel far more width than it uses, and the band on
   either side of it was reading as a hole. A photograph fills it — the same
   frame the deck uses where transmission meets the hall — held right back and
   masked to nothing long before it reaches a section edge. It is a still
   backdrop: it does NOT take the wheel's transform when an area opens, and it
   carries no motion of its own. */
.pie-field{
  /* centred on the WHEEL, not on the layout: top = half the stage minus half
     the field, so growth below it moves nothing */
  position:absolute; top:calc(var(--stage) * -0.17); left:50%;
  width:100vw; height:calc(var(--stage) * 1.34);
  translate:-50% 0;
  z-index:0; pointer-events:none; overflow:hidden;
  opacity:0; transition:opacity 1.6s var(--ease) .2s;
  /* two masks, intersected: the radial keeps it off the side edges, the
     linear fades the top and the bottom so the picture never starts or stops
     on a hard line */
  /* a long, soft fall-off at top and bottom: a short one reads as an edge,
     which is what made the join to the next section look abrupt */
  -webkit-mask-image:
    radial-gradient(66% 62% at 50% 50%, #000 0%, #000 40%, rgba(0,0,0,.5) 72%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
  -webkit-mask-composite:source-in;
          mask-image:
    radial-gradient(66% 62% at 50% 50%, #000 0%, #000 40%, rgba(0,0,0,.5) 72%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
          mask-composite:intersect;
}
/* THE WHEEL STANDS ON NOTHING BUT LIGHT.
   No landscape and no drawing either: the wheel is already a diagram, and a
   grid under a diagram is two of them. What fills the band of empty width the
   section leaves either side is a single soft lift, held inside the disc the
   masks above already cut. The grid this used to carry now sits above, behind
   the four partners, where there is nothing else competing for the ground. */
.pie-field{
  /* Two soft lifts off-centre from each other and a slow diagonal under them,
     all in Innovation Blue — the pastels are marks and are never washed. The
     masks above cut the whole thing to a disc, so what this reads as is a
     light that the wheel is standing in rather than a panel it sits on. */
  background-image:
    radial-gradient(34% 54% at 41% 24%, rgba(var(--wash-rgb), .16), transparent 70%),
    radial-gradient(30% 46% at 61% 78%, rgba(var(--wash-rgb), .13), transparent 72%),
    linear-gradient(158deg, rgba(var(--wash-rgb), .07), rgba(var(--wash-rgb), 0) 58%);
}
/* it carries `reveal` so the observer lights it; it must not inherit the
   reveal transform, only the fade */
.pie-field.reveal{ transform:none; }
.pie-field.is-in{ opacity:1; }
@media (prefers-reduced-motion: reduce){ .pie-field{ transition:none; } }

/* the wheel and its readout sit on top */
.pie-stage{ z-index:1; }

.pie-stage__ring{ display:none;  position:relative; z-index:1; }

@media (max-width:820px){
  /* on one column there is no empty band left to fill, and the field would
     only crowd the labels */
  .pie-field{ display:none; }
}

.pie-stage__ring{
  /* sits just outside the rim — the wheel itself now fills almost the whole
     stage, so an inset ring would cut across the segments */
  position:absolute; inset:-2%; border-radius:50%;
  border:1px dashed var(--line);
  animation:spin 90s linear infinite;
  pointer-events:none;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

.pie{ width:100%; height:auto; display:block; overflow:visible; cursor:pointer; }



/* The rim light. The client's own chart drew each area as a separate tile
   with a lit edge, and that is the "glow" they missed here: the outline of
   every tile, blurred, laid back over the wheel. Outlines only and one
   colour, so it lights the wheel without touching the fills underneath. */
.pie__halo{
  pointer-events:none;
  /* two shadows off a hairline stroke: the edge stays crisp and the light
     falls off around it, which is what makes it read as lit rather than
     simply blurred. Held back from where it started — at full strength the
     wheel read as heavy. */
  filter:drop-shadow(0 0 3px var(--pie-glow)) drop-shadow(0 0 8px var(--pie-glow));
  opacity:0; transition:opacity 1.1s var(--ease) .3s;
}
.pie.is-lit .pie__halo{ opacity:var(--glow-a,.75); }
.halo__p{
  fill:none; stroke:var(--pie-glow); stroke-width:1.1; stroke-linejoin:round;
  transition:stroke-width var(--t) var(--ease), opacity var(--t) var(--ease);
}
/* while one area is open the rest of the ring goes quiet with its fills */
.pie.has-selection .pie__halo{ opacity:.28; }
@media (prefers-reduced-motion: reduce){ .pie__halo{ transition:none; } }

/* the hub carries the same light: a lit ring, and a wider blurred copy of it */
.pie__core-ring{ stroke:var(--pie-glow); stroke-width:1.1; opacity:.7; }
.pie__core-lit{
  stroke:var(--pie-glow); stroke-width:1.1; opacity:0;
  filter:drop-shadow(0 0 5px var(--pie-glow)) drop-shadow(0 0 14px var(--pie-glow));
  transition:opacity 1.2s var(--ease) .4s;
}
.pie.is-lit .pie__core-lit{ opacity:var(--glow-a,.75); }

/* The per-area mark, near the rim. The client's own chart draws these big and
   lit rather than as small labels-with-a-glyph, so they are set at the same
   weight and carry their own light: one colour for every tile — white on
   navy, Meitar Blue on Stone — with the glow falling off around the line. */
.seg__i{
  fill:none; stroke:var(--seg-icon); stroke-width:1.3;
  stroke-linecap:round; stroke-linejoin:round;
  pointer-events:none;
  filter:drop-shadow(0 0 2px var(--seg-icon-glow))
         drop-shadow(0 0 6px var(--seg-icon-glow));
  transition:opacity var(--t) var(--ease), stroke var(--t) var(--ease);
}
.pie.has-selection .seg:not(.is-selected):not(:hover):not(:focus-visible) .seg__i{
  stroke:var(--seg-dim-ink); filter:none;
}
.pie__core{ pointer-events:none; }
#pieCore stop:first-child{ stop-color:var(--hub-in); }
#pieCore stop:last-child { stop-color:var(--hub-out); }
.pie__ticks line{ stroke:var(--line-strong); stroke-width:1; }

/* Entrance: the segments unwind into place one after another, each starting
   rotated back and undersized, so the wheel draws itself as a quick spiral
   rather than appearing whole. --i is set per segment in app.js. */
/* Entrance: the segments unwind into place one after another. Kept shallow
   and long — a big rotate/scale on thirteen groups of SVG text re-rasterises
   the labels every frame, which is what made it stutter. */
.seg{
  cursor:pointer; outline:none;
  transform-origin:340px 340px;
  transform:rotate(-18deg) scale(.88); opacity:0;
}
.pie.is-lit .seg{
  animation:segIn .9s cubic-bezier(.19,.86,.26,1) forwards;
  animation-delay:calc(var(--i) * 42ms);
  will-change:transform, opacity;
}
.pie.is-lit .seg{ animation-fill-mode:forwards; }
@keyframes segIn{ to{ transform:none; opacity:1; } }

.seg__t{
  transform-origin:340px 340px;
  transition:transform var(--t) var(--ease);
}
/* Fill and stroke both come from the tokens app.js sets on the group, so the
   pastel can arrive on hover without touching the element. The stroke matches
   the fill — that is what rounds the corners. */
.seg__p{
  fill:var(--seg-fill); stroke:var(--seg-fill);
  transition:opacity var(--t) var(--ease), filter var(--t) var(--ease),
             fill var(--t) var(--ease), stroke var(--t) var(--ease);
  stroke-width:4; stroke-linejoin:round;
}
/* the book's pastel, only under the cursor */
.seg:hover .seg__p, .seg:focus-visible .seg__p,
.seg.is-hot .seg__p, .seg.is-selected .seg__p{
  fill:var(--seg-tint); stroke:var(--seg-tint);
}
.seg:hover .seg__l, .seg:focus-visible .seg__l,
.seg.is-hot .seg__l, .seg.is-selected .seg__l{ fill:var(--seg-ink-hot); }
.seg:hover .seg__i, .seg:focus-visible .seg__i,
.seg.is-hot .seg__i, .seg.is-selected .seg__i{ stroke:var(--seg-ink-hot); }

/* ── THE PASTELS, WITHOUT A CURSOR ────────────────────────────────────────
   The book's five colours are the wheel's own, and on a phone there is no
   pointer to bring them out — so every four seconds a light runs round the
   ring and each tile shows its colour in turn. The ring also ARRIVES wearing
   them: each tile is pastel on the first frame it is drawn and settles into
   its blue immediately after, following the entrance stagger.

   This is `is-warm` and not `is-hot` on purpose: it changes the COLOUR and
   nothing else. No scale, no glow, and above all no readout in the hub — a
   name that changed thirteen times every four seconds would be noise, and
   the hub is there to answer what you are pointing at. */
.seg.is-warm .seg__p{ fill:var(--seg-tint); stroke:var(--seg-tint); }
.seg.is-warm .seg__l{ fill:var(--seg-ink-hot); }
.seg.is-warm .seg__i{ stroke:var(--seg-ink-hot); }
/* sizes are SVG user units, so they scale with the wheel — the mobile step
   keeps the rendered size around 12px once the wheel shrinks. */
/* a group now, with one <text> per line inside it — the font and the fill are
   set here and inherited; the transition has to be on the texts themselves,
   because transition is not an inherited property */
.seg__l{
  font-family:var(--font); font-size:15px; font-weight:500; letter-spacing:.005em;
  fill:var(--seg-ink);
  pointer-events:none; user-select:none;
}
.seg__ln{ transition:opacity var(--t) var(--ease), fill var(--t) var(--ease); }
@media (max-width:1080px){ .seg__l{ font-size:17px; } }
/* SVG user units against a 680 viewBox: at a 350px-wide wheel an 18px label
   lands at nine physical pixels. Twenty takes it past eleven now that the
   stage runs the full width of the screen — and twenty-two, which was the
   first try, pushed the four-line labels wider than their own wedge. */
/* SVG user units against a 680 viewBox: at a full-width wheel this lands
   just over twelve physical pixels. It is only readable at that size because
   the wedges are cut to fit their own labels — see `sweeps()` in app.js. */
@media (max-width:820px){  .seg__l{ font-size:22px; } }

.pie.has-selection .seg__p{ opacity:var(--seg-dim-a); }
/* A dimmed segment goes nearly background-dark, so the dark ink that was
   readable on a light slice disappears. Swap those labels to a light fill
   while dimmed — and back to their own ink the moment they are hovered. */
.pie.has-selection .seg:not(.is-selected):not(:hover):not(:focus-visible) .seg__l{
  fill:var(--seg-dim-ink);
}

.seg:hover .seg__p, .seg:focus-visible .seg__p,
.seg.is-hot .seg__p, .seg.is-selected .seg__p,
.seg:hover .seg__l, .seg:focus-visible .seg__l,
.seg.is-hot .seg__l, .seg.is-selected .seg__l,
.seg:hover .seg__i, .seg:focus-visible .seg__i,
.seg.is-hot .seg__i, .seg.is-selected .seg__i{ opacity:1; }

.seg:hover .seg__t, .seg.is-hot .seg__t{ transform:scale(1.045); }
.seg:hover .seg__p, .seg.is-hot .seg__p{ filter:url(#pieGlow); }
.seg.is-selected .seg__t{ transform:scale(1.075); }
.seg.is-selected .seg__p{
  filter:url(#pieGlow) brightness(1.28);
  stroke:var(--accent); stroke-width:1.5;
}
.seg:focus-visible .seg__p{ stroke:var(--accent); stroke-width:2.5; }


/* The hub readout. Everything is centred in the hub itself — idle label and
   the hovered/selected area swap in the same place rather than stacking, so
   nothing ever sits low in the circle. */
.pie-centre{
  position:absolute; inset:0; pointer-events:none;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
}
/* the hub circle is 35% of the stage across; the readout takes almost all of
   it, so the words sit at a size you read rather than decipher */
.pie-centre > *{ width:33%; }

/* 3px off what the wheel's own scale would give it — the hub was the one
   place the type ran ahead of everything around it */
.pie-centre__hub{
  font-size:calc(clamp(.62rem,2.28vw,1.08rem) - 3px); font-weight:500; line-height:1.3;
  letter-spacing:-.005em; color:var(--ink-strong); text-wrap:balance;
}
.pie-centre__hint{
  margin-top:12px;
  /* .5rem was resolving to eight pixels on a tablet — the floor is the number
     that matters in a clamp, not the preferred value */
  font-size:clamp(.7rem,.98vw,.78rem); letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent); opacity:.85;
}
.pie-centre__name{
  font-size:clamp(.92rem,1.42vw,1.2rem); font-weight:500; line-height:1.3;
  color:var(--ink-strong); text-wrap:balance;
}
.pie-centre__meta{
  margin-top:10px;
  font-size:clamp(.5rem,.98vw,.72rem); letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-faint);
}
.pie-centre__name, .pie-centre__meta{ display:none; }
.pie-centre.is-active .pie-centre__hub,
.pie-centre.is-active .pie-centre__hint{ display:none; }
.pie-centre.is-active .pie-centre__name,
.pie-centre.is-active .pie-centre__meta{ display:block; animation:hubIn .32s var(--ease-out) both; }
@keyframes hubIn{ from{ opacity:0; } to{ opacity:1; } }

.partners{ position:relative; animation:panelIn .5s var(--ease-out) both; }
.partners__close{ display:none; }

/* ---- overlay mode (single-column widths) ---- */
.pie-scrim{
  position:fixed; inset:0; z-index:110;
  background:var(--scrim);
  -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px);
  animation:fadeIn .3s var(--ease) both;
}
@keyframes fadeIn{ from{ opacity:0; } }
body.is-locked{ overflow:hidden; }

.partners.is-modal{
  position:fixed; z-index:111;
  left:50%; top:50%; translate:-50% -50%;
  width:min(93vw,540px); max-height:84vh; overflow-y:auto;
  -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  padding:24px 22px 26px;
  background:linear-gradient(180deg,var(--surface-2),var(--canvas-soft));
  border:1px solid var(--line-strong); border-radius:var(--r-lg);
  box-shadow:var(--shadow-2);
  animation:modalIn .42s var(--ease-out) both;
}
@keyframes modalIn{ from{ opacity:0; translate:-50% -44%; } }
.partners.is-modal .partners__close{
  display:block; position:absolute; top:14px; inset-inline-end:14px;
  width:34px; height:34px; border-radius:50%;
  background:var(--surface-2); border:1px solid var(--line);
  font-size:1.3rem; line-height:1; cursor:pointer; color:var(--ink-dim);
}
.partners.is-modal .partners__close:hover{ color:var(--ink); border-color:var(--line-strong); }
.partners.is-modal .partners__back{  padding-bottom:22px; }
.partners.is-modal:focus{ outline:none; }
.partners.is-modal .partners__title{ padding-inline-end:38px; }
@keyframes panelIn{ from{ opacity:0; transform:translateY(14px); } }
.partners__back{
  display:inline-flex; align-items:center; gap:8px;
  background:none; border:0; cursor:pointer; padding:0 0 20px;
  font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent);
}
.partners__back:hover{ opacity:.7; }
.partners__title{ font-size:clamp(1.2rem,2vw,1.6rem); font-weight:500; line-height:1.2; }
.partners__blurb{ color:var(--ink-dim); font-size:.94rem; font-weight:300; margin-top:12px; max-width:46ch; }
.partners__list{ display:flex; flex-direction:column; gap:10px; margin-top:24px; }

.pcard{
  display:flex; align-items:flex-start; flex-wrap:wrap; gap:14px;
  padding:16px 16px; border:1px solid var(--line); border-radius:var(--r-md);
  background:var(--surface);
  transition:border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease),
             transform var(--t-fast) var(--ease);
  animation:panelIn .5s var(--ease-out) both;
}
/* no lift: a two-pixel nudge under the cursor reads as a jump, not a hover */
.pcard:hover{
  border-color:var(--tint,var(--accent));
  background:var(--surface-2);
}
.pcard__avatar{
  width:90px; height:90px; border-radius:50%; flex:none;
  transition:transform var(--t) var(--ease);
  display:grid; place-items:center; font-weight:500; font-size:1rem; letter-spacing:.04em;
  color:var(--accent);
  background:linear-gradient(140deg, var(--surface-2), var(--surface));
  border:1px solid var(--line-strong);
  overflow:hidden;
}
/* A person is never put through the page's picture treatment — in either
   ground. These are Meitar's own headshots and they stay exactly as supplied. */
.pcard__avatar img{ width:100%; height:100%; object-fit:cover; filter:none; }
.pcard__body{ width:100%; min-width:0; }
.pcard__name{ font-size:.94rem; font-weight:500; line-height:1.25; }
.pcard__name a{ text-decoration:none; border-bottom:1px solid transparent; transition:border-color var(--t-fast); }
.pcard__name a:hover{ border-bottom-color:var(--accent); }
.pcard__role{ font-size:.78rem; color:var(--ink-faint); margin-top:4px; }
/* a sibling of the body now, so it takes a row of its own once the card wraps */
.pcard__actions{ display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; flex:1 0 100%; }
.pcard .chip{ padding:6px 11px; font-size:.72rem; }
/* A CARD LYING DOWN, AT A DESK.
   Stacked — portrait, then the name, then the two controls under it — the card
   was a tall block with a column of air beside the name, and four of them made
   a panel taller than the wheel. Narrowing it only made the block narrower. As
   one ROW it is the shape of what it holds: the portrait, the person beside
   it, and their two controls at the far end. The panel widens a little to
   carry that, which it can afford — the wheel steps aside and shrinks when a
   segment opens, and the room was going spare.

   Only where the panel is a panel. Below 1080 it becomes a sheet across the
   screen, and stacked is the right card there. */
@media (min-width:1081px){
  /* the row has to fit a portrait, a name and two controls; the panel is
     given the width that lets the longest name on the bench —
     "Shani Buchnick-Salomon" — sit on one line */
  .pie-side{ width:min(44%, 500px); }
  .pcard{ flex-wrap:nowrap; align-items:center; gap:14px; }
  .pcard__avatar{ width:64px; height:64px; }
  .pcard__body{ width:auto; flex:1 1 auto; }
  .pcard__actions{
    flex:0 0 auto; width:auto; margin-top:0; margin-inline-start:auto;
    flex-wrap:nowrap;
  }
}
.chip{
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 13px; border-radius:100px; border:1px solid var(--line);
  font-size:.76rem; text-decoration:none; color:var(--ink-dim);
  transition:all var(--t-fast) var(--ease);
}
/* The call chip is a phone control. Above 900px it comes off every partner
   card — the card still carries Email and Full bio, and the number is in the
   closing block where it can be read rather than dialled.
   Doubled class AND placed after `.chip`: a media query adds no specificity,
   so `.chip{display:inline-flex}` below it would simply have won. */
@media (min-width:900px){ .chip.chip--tel{ display:none; } }
.chip:hover{
  color:var(--canvas); background:var(--tint,var(--accent)); border-color:var(--tint,var(--accent));
}
.chip svg{ width:13px; height:13px; }
.partners__all{ 
  display:inline-block; margin-top:22px; font-size:.85rem; color:var(--accent);
  text-decoration:none; border-bottom:1px solid transparent;
}
.partners__all:hover{ border-bottom-color:var(--accent); }

/* ═══════════════════════════════════════════ SERVICES FLOW (slide 4) ══ */
.flow{ position:relative; padding-inline-start:clamp(0px,4vw,54px); }
.flow__rail{
  position:absolute; inset-block:8px; inset-inline-start:0; width:1px;
  background:var(--line);
}
.flow__rail-fill{
  position:absolute; top:0; left:0; width:100%; height:0%;
  background:linear-gradient(180deg,var(--accent),var(--blue-500));
  box-shadow:0 0 14px rgba(var(--accent-rgb),.5);
}
.flow__list{ display:flex; flex-direction:column; }

.step{
  position:relative; border-bottom:1px solid var(--line);
  opacity:0; transform:translateY(26px);
  transition:opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.step.is-in{ opacity:1; transform:none; }
.step:first-child{ border-top:1px solid var(--line); }
.step__node{
  position:absolute; inset-inline-start:calc(-1 * clamp(0px,4vw,54px)); top:30px;
  width:9px; height:9px; border-radius:50%; margin-inline-start:-4px;
  background:var(--canvas); border:1px solid var(--line-strong);
  transition:all var(--t) var(--ease);
}
/* the node marks WHERE YOU ARE on the rail, so it lights for the open row
   only — hovering a row is not the same as being on it */
.step.is-open .step__node{
  background:var(--accent); border-color:var(--accent); box-shadow:0 0 0 5px rgba(var(--accent-rgb),.14);
}
@media (max-width:700px){ .step__node{ display:none; } }

.step__head{
  width:100%; display:flex; align-items:flex-start; gap:clamp(14px,2.5vw,32px);
  padding:clamp(20px,2.4vw,30px) 0; background:none; border:0;
  text-align:start; cursor:pointer;
}
.step__idx{
  /* the heading's colour, not the row's pastel — at this size a pastel on
     white is not a quiet mark, it is an invisible one */
  font-size:.74rem; letter-spacing:.14em; color:var(--ink-strong);
  font-variant-numeric:tabular-nums; padding-top:8px; flex:none; width:34px;
  transition:color var(--t-fast) var(--ease);
}
.step__titles{ flex:1; min-width:0; }
.step__title{
  display:block;
  font-size:clamp(1.1rem,2.1vw,1.6rem); font-weight:400; line-height:1.25; letter-spacing:-.015em;
  transition:color var(--t-fast) var(--ease);
}
.step__head:hover .step__title, .step.is-open .step__title{ color:var(--accent); }
.step__head:hover .step__idx, .step.is-open .step__idx{ color:var(--ink-strong); }

.step__plus{
  flex:none; width:38px; height:38px; border-radius:50%;
  border:1px solid var(--line-strong); position:relative;
  transition:all var(--t) var(--ease); margin-top:2px;
}
.step__plus::before, .step__plus::after{
  content:''; position:absolute; top:50%; left:50%; background:var(--ink);
  transform:translate(-50%,-50%); transition:all var(--t) var(--ease);
}
.step__plus::before{ width:13px; height:1px; }
.step__plus::after{ width:1px; height:13px; }
/* the row's own tint, so running down the list gives six colours rather than
   one repeated — the book's "light touches for variety", on the thing you
   actually touch */
.step__head:hover .step__plus{
  border-color:var(--tint,var(--accent)); background:var(--surface-hot);
}
.step.is-open .step__plus{
  background:var(--tint,var(--accent)); border-color:var(--tint,var(--accent));
  transform:rotate(135deg);
}
.step.is-open .step__plus::before, .step.is-open .step__plus::after{ background:var(--canvas); }

.step__panel{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows var(--t) var(--ease);
}
.step.is-open .step__panel,
.step.is-measuring .step__panel{ grid-template-rows:1fr; }
.step.is-measuring .step__panel{ transition:none; }
.step__panel > div{ overflow:hidden; }
.step__body{
  padding:0 0 30px calc(34px + clamp(14px,2.5vw,32px));
  max-width:74ch; color:var(--ink-dim); font-weight:300; font-size:.98rem;
}

/* ══════════════════════════════════════════ IMAGERY — ONE TREATMENT ══ */
/* The deck's art is a mix of colour photography, greyscale renders and blue
   renders. Every picture goes through the same duotone — see --photo-filter —
   so they read as one set rather than three.

   And none of them is a picture box. An image is either a full-height panel
   running off the side of the page, dissolving into the copy across its inner
   edge, or the background of its whole section. */
.duo{
  display:block; position:absolute; inset:0; isolation:isolate; overflow:hidden;
}
.duo img{
  width:100%; height:100%; object-fit:cover;
  filter:var(--photo-filter);
  opacity:0; transform:scale(1.04);
  transition:opacity 1.2s var(--ease-out), transform 1.8s var(--ease-out);
}
.is-in .duo img{ opacity:var(--photo-o,1); transform:none; }

/* A photograph OF PEOPLE never goes through the duotone — same rule as the
   headshots. It is only held back far enough to sit on its ground. */
.duo--plain img{ filter:var(--photo-plain) !important; }

.edge{
  position:absolute; top:0; bottom:0; margin:0; z-index:0;
  width:min(50%, 820px); overflow:hidden;
  --fade:linear-gradient(90deg, transparent, #000 38%);
}
.edge--end  { inset-inline-end:0; }
.edge--start{ inset-inline-start:0; --fade:linear-gradient(270deg, transparent, #000 38%); }
.edge{ -webkit-mask-image:var(--fade); mask-image:var(--fade); }
/* held back top and bottom so a bright sky never out-shouts the copy */
.edge::before{
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:var(--photo-veil);
}

.section--edge{ position:relative; overflow:hidden; }
.section--edge > .wrap{ position:relative; z-index:1; }
.edge__text{ max-width:min(50%, 620px); }
.edge__text--end{ margin-inline-start:auto; }

/* full-bleed section background — only the wheel's ground still uses one */
.section__bg{ position:absolute; inset:0; overflow:hidden; z-index:0; }

/* ── GROUNDS WITHOUT PHOTOGRAPHS ──────────────────────────────────────────
   Four sections carried a landscape and now carry light instead. The line is
   taken from the cover: a pale blue-white that lifts toward one corner and
   settles to white, so the page reads as one clean surface rather than as a
   run of framed pictures. Each is angled differently so consecutive sections
   do not look identical, and every one of them ends on --canvas at both
   edges, which is what makes the joins disappear. */
/* THE BAND SITS ON THE COVER'S PHOTOGRAPH. Its ground is therefore a scrim,
   not a surface: translucent at the top so the server room carries on out of
   the hero without a seam, closing to solid --canvas by the bottom so the join
   to the wheel below is invisible. Nothing inside this block may be opaque. */
/* THE BAND SITS ON THE COVER'S PHOTOGRAPH. Its ground is therefore a scrim,
   not a surface: translucent at the top so the server room carries on out of
   the hero without a seam, closing to solid --canvas by the bottom so the join
   to the wheel below is invisible. Nothing inside this block may be opaque. */
.band{
  background:
    radial-gradient(120% 80% at 78% 0%, rgba(var(--wash-rgb),.10), transparent 62%),
    linear-gradient(180deg,
      rgba(var(--canvas-rgb), .62) 0,
      rgba(var(--canvas-rgb), .86) 30%,
      rgba(var(--canvas-rgb), .95) 76%,
      var(--canvas) 100%);
}
.cover{ position:relative; }
.section--services{
  background:
    radial-gradient(90% 70% at 12% 8%, rgba(var(--wash-rgb),.20), transparent 62%),
    radial-gradient(70% 60% at 92% 96%, rgba(var(--tint-sky-rgb),.16), transparent 66%),
    linear-gradient(180deg, var(--canvas), var(--canvas-soft) 60%, var(--canvas));
}
.section--why{
  background:
    radial-gradient(85% 65% at 88% 12%, rgba(var(--wash-rgb),.17), transparent 64%),
    linear-gradient(180deg, var(--canvas), var(--canvas-soft) 50%, var(--canvas));
}
.section--advisory{
  background:
    radial-gradient(95% 75% at 8% 88%, rgba(var(--wash-rgb),.19), transparent 66%),
    radial-gradient(60% 55% at 90% 6%, rgba(var(--tint-sky-rgb),.14), transparent 68%),
    linear-gradient(180deg, var(--canvas), var(--canvas-soft) 58%, var(--canvas));
}
.section--cta{
  background:
    radial-gradient(110% 85% at 50% 100%, rgba(var(--wash-rgb),.22), transparent 66%),
    linear-gradient(180deg, var(--canvas), var(--canvas-soft) 62%, var(--canvas-deep));
}
/* what each picture needs to sit under, judged one at a time */
/* no veil on this one: its picture is a plain half-panel now */
/* a section background is not a reveal — it is simply there */
.section__bg .duo img{ object-position:72% 50%; opacity:var(--photo-o,1); transform:none; }
.section__bg::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, var(--canvas) 4%,
              color-mix(in srgb, var(--canvas) 88%, transparent) 42%,
              color-mix(in srgb, var(--canvas) 22%, transparent) 78%,
              transparent 100%);
}
/* ── ONE GROUND ACROSS TWO SECTIONS ───────────────────────────────────────
   "Why Meitar" and the advisory streams share a single photograph, the same
   way the cover block and the tower each carry one across a pair.

   It is a STICKY WINDOW, not a panel. Stretched over both sections the picture
   would be blown up to two thousand pixels of height it does not have, and it
   would re-scale every time a row of the advisory list opened — the whole
   picture lurching. A window one viewport tall sticks to the top of the screen
   instead: constant size, a downscale of about 0.8 at 1440, and completely
   indifferent to what the sections below it are doing.

   overflow:CLIP on the wrapper, not hidden — `hidden` would make it a scroll
   container and the sticky child would stick to that instead of to the page,
   which is to say it would never move.

   The veil is FLAT. The generic `.section__bg::after` scrim is one-sided, for
   a section whose copy sits in a left column; here six cells run the whole
   measure in one section and the list runs the full width in the other, and
   only an even weight keeps the reading even. A bare colour is legal solely as
   the last layer of a multi-layer background, hence the one-colour gradient. */
.pair{ position:relative; overflow:clip; }
/* THE STICKY MUST NEVER REACH ITS FLOOR.
   A sticky element stops at the bottom of its containing block, and by the
   time you are reading the advisory list the window HAS stopped there. Open a
   row, the wrapper grows, the floor drops away and the picture jumps down to
   follow it — which is exactly what it was doing. The ground is given a
   viewport of slack below the pair so the floor is never in play while
   anything is being read; `overflow:clip` on the wrapper cuts it off again.
   The fades move to the wrapper for the same reason: a mask on a box that now
   ends off-screen would put its bottom fade off-screen with it. */
.pair::after{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    linear-gradient(to bottom, var(--canvas), rgba(var(--canvas-rgb),0) 90px),
    linear-gradient(to top,    var(--canvas), rgba(var(--canvas-rgb),0) 120px);
}
.pair > .section{ position:relative; z-index:1; background:none; }
.pair > .section > .wrap{ position:relative; z-index:1; }
/* a section standing on a photograph takes neither the plan grid nor a head
   rule — the same rule the tower's pair follows */
.pair > .section::before, .pair > .section::after{ display:none; }
.pair__bg{
  position:absolute; inset:0 0 -100svh 0; z-index:0; pointer-events:none;
}
.pair__bg .duo{
  position:sticky; top:0; inset-inline:0; bottom:auto;
  height:100svh; overflow:hidden;
}
.pair__bg .duo img{
  width:100%; height:100%; object-fit:cover; object-position:60% 50%;
  opacity:.7; filter:none; transform:none; transition:none;
}
.pair__bg::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(rgba(var(--canvas-rgb), .80) 0 100%);
}
/* This one was still reading as a wash. It carries the whole of the two
   opening sections, so it gets more presence than a section background
   normally would, and its scrim is pulled back to let it through. */
/* The one background with copy running across its WHOLE width, so it is the
   one that keeps a flat veil rather than a one-sided scrim. */

.section--services{ position:relative; overflow:hidden; }
.section--services .wrap{ position:relative; z-index:1; }


/* headings rise out of a mask instead of just fading */
.rise{ overflow:hidden; padding-bottom:.1em; }
.rise__i{ display:block; transform:translateY(105%); opacity:0; }
.rise.is-in .rise__i{
  transform:none; opacity:1;
  transition:transform 1s var(--ease-out), opacity .75s var(--ease-out);
}

/* ══════════════════════════════════════════════════════ WHY MEITAR ══ */
/* Deliberately not the deck's tick list: a hairline grid of lit cells, each
   with its own index, that respond to the pointer. The highlight follows the
   cursor inside the cell (--mx/--my come from app.js), which is what makes
   the six read as one surface rather than six boxes. */
.whys{
  display:grid;
  background:none;   /* a fill here shows through any cell still revealing */ gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
}
/* THE LIGHT TRAVELS ALONG THE EDGE, NOT THROUGH THE MIDDLE.
   The circle that used to follow the cursor sat BEHIND the words: a coloured
   film over a near-white ground, with navy type on top of it, which is exactly
   how a hover comes to read as "blurry". Moving the same circle onto the
   border keeps the effect — a light that follows you around the grid — and
   puts it somewhere it can never touch the text.

   The light is the cell's own pastel at FULL strength through its middle,
   easing out at the rim so it reads as a light and not as a patch. The colour
   is never substituted — it is the book's hex — only its reach is shaped. */
.why__edge{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  padding:2px; opacity:0;
  background:radial-gradient(210px circle at var(--mx,50%) var(--my,50%),
             var(--tint,var(--accent)) 0%,
             var(--tint,var(--accent)) 30%,
             transparent 72%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  transition:opacity .32s var(--ease);
}
.why:hover .why__edge{ opacity:1; }
@media (hover:none){ .why__edge{ display:none; } }

.why{
  position:relative; overflow:hidden;
  background:var(--canvas-soft);
  padding:clamp(28px,3.2vw,42px) clamp(24px,2.8vw,36px);
  transition:background var(--t) var(--ease);
}

.why__idx{
  display:block; font-size:.72rem; letter-spacing:.2em; color:var(--tint,var(--accent));
  font-variant-numeric:tabular-nums; opacity:1; margin-bottom:20px;
  transition:opacity var(--t) var(--ease);
}
.why__title{
  display:block; font-size:1.06rem; font-weight:500; line-height:1.3; color:var(--ink-strong);
  transition:color var(--t-fast) var(--ease);
}
.why__rule{
  display:block; width:40px; height:3px; margin:14px 0 14px; border-radius:2px;
  background:var(--tint,var(--accent)); opacity:1;
  transition:width var(--t) var(--ease), opacity var(--t) var(--ease);
}
.why__body{ display:block; color:var(--ink-dim); font-size:.93rem; font-weight:300; }

.why:hover{ background:var(--surface-hot); }
.why:hover .why__idx{ opacity:1; }
.why:hover .why__rule{ width:78px; opacity:1; }
/* the TITLE stays Meitar Blue. A pastel is printed to be a mark on the page,
   not ink for words — as a heading colour on white it disappears. The rule
   under it, which is 3px thick, carries the cell's colour instead. */
.why:hover .why__title{ color:var(--ink-strong); }
@media (hover:none){
  .why:hover{ background:var(--canvas-soft); }
  .why:hover .why__title{ color:var(--ink-strong); }
}

.flow--plain{ padding-inline-start:0; }
/* the rail dots belong to the timeline; against the advisory photograph they
   just read as stray circles */
.flow--plain .step__node{ display:none; }


/* ════════════════════════════════════════════════════════ FINAL CTA ══ */
/* the ground itself is declared with the other grounds further up */
.section--cta{ position:relative; overflow:hidden; }
.cta-bg{ position:absolute; inset:0; }
.section--cta > .wrap{ position:relative; z-index:1; }
/* Two columns rather than one half-width stack: the copy states the offer on
   the left and the form sits beside it, so the section is as wide as every
   other one on the page. */
.cta__inner{
  position:relative; max-width:none;
  display:grid; gap:clamp(20px,2.4vw,34px) clamp(28px,4vw,72px);
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  /* the third row takes the slack, so the heading and its lede stay together
     at the top instead of being pushed apart by the form's height */
  grid-template-rows:auto auto 1fr;
  align-items:start;
}
.cta__inner .section__head, .cta__inner .lede{ grid-column:1; }
.cta__inner .lede{ margin-inline:0; max-width:34ch; }
.cta__inner .cform{ grid-column:2; grid-row:1 / -1; margin-top:0; }
@media (max-width:900px){
  .cta__inner{ grid-template-columns:minmax(0,1fr); }
    .cta__inner{ grid-template-rows:none; }
  .cta__inner .cform{ grid-column:1; grid-row:auto; }
  .cta__inner .lede{ max-width:none; }
}
/* One cell per pair, label over value. It used to be one flat grid with every
   label in the first row and every value in the second, which lines up only
   while the grid has exactly as many columns as there are pairs — narrowed to
   two for a phone, the same markup gave a block of four labels followed by a
   block of four values. The pair is the unit now, at every width. */
.cta__lines{
  position:relative; z-index:1;
  display:grid;
  /* The tracks are sized by what is in them, not by an equal quarter each, and
     the room left over is pushed into the gaps. Four equal quarters of 940 give
     198px a column, and "1 Ariel Sharon St. Givatayim, Israel" wants 210, so
     "Israel" fell to a second line on a desktop and sat one pixel from falling
     on a 1024 laptop. Content-sized columns end flush at both margins and the
     address cannot break at any width above 700. */
  grid-template-columns:repeat(var(--cols,4), minmax(0,max-content));
  justify-content:space-between;
  max-width:min(100%, 940px);
  column-gap:clamp(24px,3.4vw,52px); row-gap:clamp(18px,2.4vh,26px);
  margin-top:clamp(30px,4vh,46px);
  padding-top:clamp(24px,3vh,34px); border-top:1px solid var(--line);
}
.cta__line{ display:flex; flex-direction:column; gap:7px; min-width:0; }
.cta__lines-v{ font-size:.92rem; }
.cta__lines-k{
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--accent);
}

@media (max-width:900px){
  .cta__lines{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
/* One column from 700 down, not from 420 down. The breakpoint is not a guess:
   700 is exactly where the phone rules lift the value to 1.04rem, and at that
   size the address — "1 Ariel Sharon St. Givatayim, Israel" — wants 258px on a
   single line while a half-width cell gives 182 at 430 and 249 even at 580, so
   "Israel" dropped to a second line on every phone wider than 420. Measured at
   430/480/520/560/580: two columns never fit it. Above 700 the value is back to
   .92rem, needs 229, and a half cell is over 300 — two columns there, roomily. */
@media (max-width:700px){
  .cta__lines{ grid-template-columns:minmax(0,1fr); }
}
/* inline-block, so the rule under the link is exactly as wide as the link and
   not as wide as the cell it sits in */
.cta__lines a{
  display:inline-block;
  text-decoration:none; border-bottom:1px solid transparent; transition:border-color var(--t-fast);
}
.cta__lines a:hover{ border-bottom-color:var(--accent); }

/* ══════════════════════════════════ PARAGRAPH BLOCKS + SPLIT LAYOUT ══ */
/* The client's copy is fixed and long, so readability is bought with measure,
   leading and rhythm rather than by cutting words. */
.prose{ margin-top:clamp(26px,3.4vh,40px); display:flex; flex-direction:column; gap:1.15em; }
.prose p{
  font-size:clamp(1rem,1.25vw,1.16rem); line-height:1.72; font-weight:300;
  color:var(--ink-dim); max-width:68ch;
}
/* the opening paragraph is set exactly like the ones under it — same size,
   colour and weight. Rhythm carries the emphasis, not type. */


.split{
  display:grid; gap:clamp(30px,4.5vw,72px);
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  align-items:center;
}

/* ── THE TOWER, ACROSS TWO SECTIONS ───────────────────────────────────────
   The panel belongs to the wrapper, not to either section, so one photograph
   runs the whole height of "Legal Core Services" and "How we work" together
   and the building is seen entire rather than cropped twice. "Why Meitar"
   follows it at full page width and has a ground of its own. */
/* clip, because the picture column is deliberately taller than this wrapper —
   see the note on the sticky's floor below */
.tower{ position:relative; overflow:clip; }
/* Same device as `.pair`: the fades belong to the WRAPPER, because the column
   they would otherwise mask now ends a viewport below it. */
.tower::after{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    linear-gradient(to bottom, var(--canvas), rgba(var(--canvas-rgb),0) 80px),
    linear-gradient(to top,    var(--canvas), rgba(var(--canvas-rgb),0) 110px);
}
/* A STICKY WINDOW, NOT A TALL PANEL.
   The column is as tall as the two sections together — about 2500px — and a
   `cover` fit made the browser blow the 978x2078 photograph up by 1.73 to
   fill it. That, and not the compositing, is why the building went soft: the
   file was being asked for detail it does not have.

   So the column is only the CLIP. Inside it a window one viewport tall sticks
   to the top of the screen, and the picture is laid into it at its own aspect
   — 662 wide, which is a DOWNSCALE of about 0.68 and therefore as sharp as the
   file can be. app.js then travels the picture through the window as the two
   sections go by, so the whole building is seen, top to bottom, and the motion
   is the whole height of it rather than a nudge.

   overflow:CLIP, not hidden: `hidden` would make this column a scroll
   container and the sticky child would stick to it instead of to the page,
   which is to say it would never move at all. */
/* THE STICKY MUST NEVER REACH ITS FLOOR.
   A sticky element stops at the bottom of its containing block, and by the
   time you are down at "How we work" the window HAS stopped there. Open a row
   of the services list, the wrapper grows, the floor drops away and the
   picture jumps down after it. A viewport of slack below keeps the floor out
   of play while anything is being read; the wrapper's `overflow:clip` cuts the
   overhang off again, and the fades live on the wrapper for the same reason.
   No fade across the inner edge: half the width is the photograph as it is,
   and the copy sits clear of it. */
.tower__pic{
  position:absolute; top:0; bottom:-100svh; inset-inline-start:0; z-index:0;
  width:min(46%, 760px); overflow:clip; margin:0;
}
.tower__pic::before{ display:none; }
.tower__pic .duo{
  position:sticky; top:0; inset-inline:0; bottom:auto;
  height:100svh; overflow:hidden;
}
/* laid in at its own aspect and moved with a transform — no object-fit, so
   nothing is stretched, and the travel is a composited translate.
   filter:none, explicitly. Every other picture goes through --photo-filter,
   and in the light ground that is a whisper — brightness .98, saturate 1.04 —
   but this one is the building and it is shown as photographed. */
.tower__pic .duo img{
  position:absolute; top:0; left:50%;
  /* NO TRANSITION. `.duo img` carries `transition:transform 1.8s` for the
     reveal, and with the travel written into the same property every scroll
     tick started an eighteen-hundred-millisecond ease — so the building went
     on climbing for nearly two seconds after the page had stopped. */
  transition:none;
  /* Half again as wide as the window, capped at the file's own 978px so it is
     never enlarged — at 1440 that lands on a scale of 0.98, which is as close
     to one-to-one as this photograph gets. The wider lay-in is what keeps the
     signage on the crown at the size it reads at, and it buys more than a
     thousand pixels of travel besides.
     55.2%, not 50%: that is where the tower actually stands in the frame, so
     centring on it puts the building in the middle of the window rather than
     the picture. `translate` is used for this and `transform` for the travel —
     they are separate properties and compose, so app.js never has to know. */
  width:calc(100% * var(--tower-zoom, 1.45)); max-width:978px; height:auto;
  translate:-55.2% 0;
  opacity:1; filter:none; transform:none;
  will-change:transform;
}
@media (prefers-reduced-motion: reduce){
  .tower__pic .duo img{ will-change:auto; }
}
.tower .section{ position:relative; z-index:1; background:none; }
/* The wrap's own measure is what was leaving a canyon on both sides of the
   copy: the tower takes the left 46% and the centred 1100px wrap then held the
   text to a 486px column with 400px of nothing to the right of it. Inside the
   tower the wrap is released, and the column is placed off the PICTURE instead
   — a fixed gap clear of its edge, and a page margin on the right. */
.tower .section > .wrap{ position:relative; z-index:1; max-width:none; padding-inline:0; }
/* Inside the tower a section has no ground of its own and no ground furniture
   either: the plan grid would be drawn across the photograph and the head
   rule's pastel block would land on it. The building IS the interest here. */
.tower .section::before, .tower .section::after{ display:none; }
/* the copy in both sections clears the panel */
/* min(46%, 760px) is the picture's own width, and it only resolves to the same
   number as the picture while the wrap it sits in is the full width of the
   section — hence no padding on the wrap above, and the page margin taken here
   instead. Get that wrong and the column creeps in under the photograph. */
.tower .edge__text{
  position:relative; max-width:none;
  margin-inline-start:calc(min(46%, 760px) + clamp(32px, 4vw, 88px));
  margin-inline-end:clamp(24px, 5vw, 112px);
}
@media (max-width:1080px){
  .tower .section > .wrap{ max-width:var(--wrap); padding-inline:var(--pad); }
  .tower .edge__text{ max-width:none; margin-inline-start:0; }
}
/* On a phone the sticky column has nowhere to stand — half the width IS the
   whole width — so the building stops being a column beside the copy and
   becomes the GROUND under both sections instead, behind a scrim heavy enough
   to read against. Still a sticky window one screen tall, for the same reason
   as everywhere else: a picture stretched over the height of a pair is blown
   up past what the file holds.

   The doubled class is deliberate: the generic `.edge` mobile rule further
   down the file pulls edge panels out by the page gutter and turns them into
   bands, and at equal weight it would win on source order.

   app.js needs no breakpoint of its own — the window is one screen tall and
   the picture is `cover`, so its travel comes out at zero and initTower has
   nothing to do. */
@media (max-width:1080px){
  .tower .tower__pic{
    position:absolute; inset:0 0 -100svh 0; width:auto; height:auto; margin:0;
  }
  .tower .tower__pic .duo{
    position:sticky; top:0; inset-inline:0; bottom:auto;
    height:100svh; overflow:hidden;
  }
  .tower .tower__pic .duo img{
    position:absolute; inset:0; width:100%; height:100%; max-width:none;
    object-fit:cover; object-position:50% 26%;
    translate:none; transform:none;
  }
  /* The scrim, over the picture and under the copy. Pulled back from .87 so
     the building actually reads — the copy that stands on it is Meitar Blue at
     full strength on a light photograph, which holds at this weight. */
  .tower .tower__pic::after{
    content:''; position:absolute; inset:0;
    background:linear-gradient(rgba(var(--canvas-rgb), .74) 0 100%);
  }
  /* the picture is held back a little as well as veiled: a heavier sheet of
     white greys the building out, where pulling the picture back keeps its
     colour and takes the edge off the city detail behind the small type */
  .tower .tower__pic .duo img{ opacity:.9; }
}

.section--expertise{
  background:
    radial-gradient(80% 55% at 80% 25%, rgba(var(--wash-rgb),var(--wash-a)), transparent 64%),
    var(--canvas);
}
/* THREE ACROSS. They were a stack from the days when this copy stood in a
   half-width slot; they are three parallel claims and they read as three.

   The index has to come off the side to make that work. In a stack there is
   room for a 74px gutter down the left of every cell to hang the number in;
   in a third of the column beside the tower that gutter is most of the cell,
   and the copy was coming out at a dozen characters a line. So here the number
   sits ABOVE the title, in flow, and the cell keeps ordinary padding — which
   is most of the measure handed back. */
.section--expertise .pillars{
  grid-template-columns:repeat(3, minmax(0,1fr));
  margin-top:clamp(28px,3.5vh,44px);
}
.section--expertise .pillars li{
  padding:clamp(22px,2.4vw,32px) clamp(20px,2.2vw,28px);
}
.section--expertise .pillar__idx{
  position:static; display:block; margin-bottom:14px;
}
.section--expertise .pillars b{ font-size:1rem; }
/* ONE BASELINE ACROSS THE THREE.
   The three cells are three parallel claims, and they only read as parallel if
   the running text starts at the same height in each. One title wraps to two
   lines and the other two do not, so the paragraph under it used to sit a line
   lower than its neighbours. The cells share the section's rows instead: the
   number, the title and the body are three rows of the PARENT grid, and each
   cell borrows them with `subgrid`, so the tallest title sets the height of
   that row for all three and every paragraph begins on the same line. */
@supports (grid-template-rows: subgrid){
  .section--expertise .pillars{ grid-template-rows:auto auto auto; }
  .section--expertise .pillars li{
    display:grid; grid-row:span 3; grid-template-rows:subgrid; align-content:start;
  }
  /* The spacing between the three parts is now the GRID's row gap rather
     than each part's own margin — it has to be, because the rows are shared
     and a margin inside one cell would not move the others. Only the rows gap;
     the columns stay flush so the hairlines between the cells still meet. */
  .section--expertise .pillars{ row-gap:10px; column-gap:0; }
  .section--expertise .pillars b{ margin-bottom:0; align-self:start; }
  .section--expertise .pillar__idx{ margin-bottom:4px; }
}
/* Older engines keep the stacked cell and get the same result the plain way:
   two lines of room for the title, which is the longest of the three. */
@supports not (grid-template-rows: subgrid){
  .section--expertise .pillars b{ min-height:2.6em; }
}
/* a hairline between them rather than a gap with a fill behind it: a fill on
   the grid shows through any cell that is still revealing */
.section--expertise .pillars li + li{ border-inline-start:1px solid var(--line); }
@media (max-width:720px){
  .section--expertise .pillars{ grid-template-columns:minmax(0,1fr); }
}
.section--advisory .section__head{ margin-bottom:clamp(30px,4vh,52px); }
/* the row numbers were sitting on the photograph's edge on a laptop */
/* the copy sits on the LEFT of this one, clear of the picture on the right */
/* There is no picture beside this one now, so the block takes the section's
   full width — held to half of it, it read as an unfinished column. The
   heading and its lede keep a measure of their own so the lines stay
   readable; only the three streams run the whole way across. */
.section--advisory .edge__text{ padding-inline-start:0; max-width:none; }
/* NOT `ch` on the head: that unit resolves against the CONTAINER's font size,
   which here is the small eyebrow, and the heading collapsed to a word a
   line. The measure belongs on the elements that carry the type. */
.section--advisory .h2{ max-width:min(100%, 18ch); }
.section--advisory .lede{ max-width:min(100%, 58ch); }
.section--advisory .eyebrow{ white-space:nowrap; }

.section--advisory > .wrap{ position:relative; z-index:1; }

/* Two headings come from the deck as full sentences rather than display
   lines, so they are set at statement size instead of poster size. */
.section--practice .h2{ max-width:26ch; font-size:clamp(1.5rem,2.7vw,2.15rem); line-height:1.24; }
/* this block sits over the section's own wash, so it is set in full ink
   rather than the dimmed tone used for body copy on a flat ground */
.section--practice .lede{ color:var(--ink); }
.section--practice .lede--sm{ color:var(--ink-dim); }
.section--why .h2{ max-width:38ch; font-size:clamp(1.3rem,2.1vw,1.75rem); line-height:1.4; font-weight:300; }

/* the "Deliverables:" line the client appends to each advisory stream */
.step__deliverables{
  margin-top:20px; padding-top:18px; border-top:1px solid var(--line);
  font-size:.88rem; line-height:1.65; color:var(--ink-dim); font-weight:300;
}
.step__deliverables b{
  color:var(--accent); font-weight:500;
  letter-spacing:.02em;
}

/* ═══════════════════════════════════════════════════════════ FOOTER ══ */
.footer{ background:var(--canvas-deep); border-top:1px solid var(--line); padding:36px 0; }
.footer__inner{
  display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:center;
  font-size:.8rem; color:var(--ink-faint);
}
.footer__links{ display:flex; gap:22px; }
.footer__links a{ text-decoration:none; transition:color var(--t-fast); }
.footer__links a:hover{ color:var(--accent); }

/* ═══════════════════════════════════════ THE BOOK'S PASTEL TINTS ══
   FIVE, not six. The client marked sky, lilac, green, coral and sand; olive
   (#BAB86B) is the one they left unmarked, and it is the one that goes muddy
   next to the others, so it is out of the cycle. It stays declared as --t4 for
   anything that wants it by name.

   Thirteen segments over five tints never puts two of the same next to each
   other, including across the wrap — 13 mod 5 = 3. */
.tints > *:nth-child(5n+1){ --tint:var(--t1); --tint-rgb:var(--t1-rgb); }
.tints > *:nth-child(5n+2){ --tint:var(--t2); --tint-rgb:var(--t2-rgb); }
.tints > *:nth-child(5n+3){ --tint:var(--t3); --tint-rgb:var(--t3-rgb); }
.tints > *:nth-child(5n+4){ --tint:var(--t5); --tint-rgb:var(--t5-rgb); }
.tints > *:nth-child(5n+5){ --tint:var(--t6); --tint-rgb:var(--t6-rgb); }
/* anything that has not been given one falls back to the accent, so a list
   without .tints is unchanged */
.tints > *{ --tint:var(--accent); --tint-rgb:var(--accent-rgb); }

/* The same five, led by the warm end — coral, lilac, sand — for the two lists
   the client wanted carrying orange/purple/pink. Declared after the plain
   cycle so it wins on the lists that ask for it. */
.tints--warm > *:nth-child(5n+1){ --tint:var(--t5); --tint-rgb:var(--t5-rgb); }
.tints--warm > *:nth-child(5n+2){ --tint:var(--t2); --tint-rgb:var(--t2-rgb); }
.tints--warm > *:nth-child(5n+3){ --tint:var(--t6); --tint-rgb:var(--t6-rgb); }
.tints--warm > *:nth-child(5n+4){ --tint:var(--t1); --tint-rgb:var(--t1-rgb); }
.tints--warm > *:nth-child(5n+5){ --tint:var(--t3); --tint-rgb:var(--t3-rgb); }

/* The one place the book's OLIVE is used. It is out of the cycle everywhere
   else — it goes muddy beside the other four — but the client wants the pale
   green in this cell replaced by it. */
#whyList > li:nth-child(3){ --tint:var(--tint-olive); --tint-rgb:186,184,107; }


/* ═══════════════════════════════════════ THE DATA CENTER CORE TEAM ══
   Four cards above the wheel. They read left, like every other block of text
   on the page — the wheel below is the one centred thing in this section, and
   it is centred because it is a circle, not because its words are. */
/* THE FOUR PARTNERS STAND ON THE PLAN GRID.
   It came up from behind the wheel, where it was competing with a diagram.
   Here there is nothing else on the ground, and four people on a drawn floor
   is the picture this section wants. Full bleed, because the block itself is
   held to the wrap — the grid runs out past it to both edges and is masked to
   nothing before it reaches them. */
.core{ position:relative; margin-top:clamp(34px,4.5vh,58px); }
.core::before{
  content:''; position:absolute; z-index:0; pointer-events:none;
  /* It runs well past the four cards — up behind the section's heading and
     down toward the line that introduces the wheel — so it reads as the floor
     the whole upper half of the section stands on rather than as a panel
     tucked behind a row of portraits. The section clips it. */
  top:calc(-1 * clamp(150px, 26vh, 320px)); bottom:calc(-1 * clamp(130px, 22vh, 280px));
  left:50%; width:100vw; translate:-50% 0;
  background-image:
    linear-gradient(90deg,  rgba(var(--wash-rgb), .11) 0 1px, transparent 1px),
    linear-gradient(180deg, rgba(var(--wash-rgb), .11) 0 1px, transparent 1px);
  background-size:var(--plan-step) var(--plan-step);
  background-position:50% 50%;
  -webkit-mask-image:radial-gradient(74% 104% at 50% 50%, #000 34%, transparent 92%);
          mask-image:radial-gradient(74% 104% at 50% 50%, #000 34%, transparent 92%);
}
.core__title, .core__list{ position:relative; z-index:1; }
.core__title{
  font-size:clamp(1.05rem,1.7vw,1.35rem); font-weight:500; letter-spacing:-.01em;
  color:var(--ink-strong);
}
/* FIVE ACROSS, and the count is written here rather than left to auto-fit:
   the row is the client's own order and it should break where we say, not
   wherever a min-width happens to run out. Below 1180 five of these are
   narrower than their own two buttons, so it goes to three and then two. */
.core__list{
  display:grid; gap:clamp(14px,1.8vw,24px);
  grid-template-columns:repeat(5,minmax(0,1fr));
  margin-top:clamp(22px,3vh,34px);
}
@media (max-width:1180px){ .core__list{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
/* WHERE THERE ARE FIVE, THE TWO BUTTONS SHARE A ROW — AND THE MARKS COME OFF.
   The fifth card takes the row from ~290px a card to ~180, which leaves each
   chip between 52 and 73 pixels while it wants 70 to 74. Measured, at five
   widths, the shortfall is 1px at 1920 and 18px at 1280.

   The 20px that buys it back is the icon and the gap beside it: 13 and 7.
   They are the right thing to give up, because the mark and the word beside
   it say the same thing — "Email" next to an envelope — so dropping the mark
   costs a decoration while dropping the word would cost the meaning. A little
   comes off the card's side padding too, which is 16px of measure returned to
   both chips at once.

   The wheel's own partner cards keep their icons; they are twice this wide.
   So does the phone, where a card is the width of the screen. */
/* THE FIVE CARDS ARE CENTRED — PORTRAIT, NAME AND TITLE.
   A DELIBERATE EXCEPTION, asked for and recorded rather than drifted into:
   everywhere else on this page the type is left-aligned and the wheel is the
   only centred thing. It stops at these five cards. The buttons are left
   alone — they already fill the row between them, so there is nothing to
   centre.

   Above 700px only: below that the card turns into a row with the portrait
   beside the name rather than above it, and there is no middle to sit in. */
@media (min-width:701px){
  .core__list .ccard__avatar{ margin-inline:auto; }
  .core__list .ccard__name,
  .core__list .ccard__role{ text-align:center; }
}
@media (min-width:1181px){
  .core__list .ccard{ padding-inline:16px; }
  .core__list .ccard__actions{ flex-direction:row; gap:7px; }
  .core__list .ccard__actions .chip{
    flex:1 1 0; min-width:0; width:auto;
    padding-inline:7px; white-space:nowrap;
  }
  .core__list .ccard__actions .chip svg{ display:none; }
}
.ccard{
  display:flex; flex-direction:column; align-items:flex-start;
  /* the body is a wrapper now, so the desk layout has to keep filling the card */
  padding:clamp(20px,2.2vw,28px) clamp(18px,1.8vw,24px);
  background:var(--canvas-soft);
  border:1px solid var(--line); border-radius:var(--r-md);
  transition:background var(--t) var(--ease), border-color var(--t) var(--ease),
             transform var(--t) var(--ease);
  transition-delay:var(--d,0ms);
}
.ccard:hover{
  background:var(--surface-hot);
  border-color:var(--tint,var(--accent));
  transform:translateY(-3px);
}
.ccard__avatar{
  position:relative; width:clamp(84px,8vw,116px); aspect-ratio:1;
  border-radius:50%; overflow:hidden; flex:none;
  background:var(--surface-2);
  /* no ring: the portraits sit on the card's own ground */
  transition:transform var(--t) var(--ease);
}
.ccard:hover .ccard__avatar{ transform:scale(1.04); }
.ccard__avatar img{ width:100%; height:100%; object-fit:cover; filter:none; }  /* headshots stay as supplied */
.ccard__body{ width:100%; }
.ccard__name{ margin-top:18px; font-size:1rem; font-weight:500; color:var(--ink-strong); }
.ccard__name a{ text-decoration:none; border-bottom:1px solid transparent; transition:border-color var(--t-fast); }
.ccard__name a:hover{ border-bottom-color:var(--tint); }
.ccard__role{ margin-top:4px; font-size:.82rem; color:var(--ink-faint); }
/* Two to a row, always. On a laptop the cards are narrow enough that three
   full-width chips stacked into three lines, which looked broken. */
.ccard__actions{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:8px; margin-top:16px; width:100%;
}
.ccard__actions .chip{ justify-content:center; padding:7px 8px; font-size:.72rem; }
.ccard__actions .chip:last-child:nth-child(odd){ grid-column:1 / -1; }
/* AT A DESK THE ROW COUNTS WHAT IS DRAWN, NOT WHAT IS IN THE MARKUP.
   The call chip comes off above 900px — but it is still in the DOM, and
   `nth-child` counts it there. So of the two chips that are actually drawn,
   the second was the THIRD child: odd, and last, and therefore spanning the
   whole row on a line of its own. Email sat in one column and Full bio ran
   full width underneath it, which is not two actions on a card, it is a
   mistake. A flex row places only the boxes that exist, so the count cannot
   be got wrong; the grid stays below 900 where all three chips are drawn. */
@media (min-width:900px){
  .ccard__actions{ display:flex; flex-wrap:wrap; }
  .ccard__actions .chip{ flex:1 1 0; }
}
@media (max-width:900px){ .core__list{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
/* two across on a phone, not one — 460 was collapsing them on every handset
   the client actually holds */
@media (max-width:359px){ .core__list{ grid-template-columns:minmax(0,1fr); } }


/* ═══════════════════════════════════════ CONTACT A PARTNER — FORM ══
   In the page, in the closing block, under the copy that asks the question.
   Two columns on the desktop width the block gives it, one below 640px. */
.cform{ margin-top:clamp(26px,3.2vh,38px); }
.cform__grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(11px,1.4vw,16px);
}
.field{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.field--wide{ grid-column:1 / -1; }
.field label{
  font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink); font-weight:500;
}
/* On a phone the same 500 reads as bold: the labels are small, tracked out and
   upper-case, and every one of those adds weight of its own. Back to the
   regular cut, with the colour doing the work instead. */
@media (max-width:700px){ .field label{ font-weight:400; } }
.field__opt{ text-transform:none; letter-spacing:.02em; font-weight:400; color:var(--ink-dim); }
/* The fields sit on a photograph, so they are glass rather than panels: no
   fill at all, and the outline carrying them instead — a little stronger than
   the page's hairline so it still reads against moving water. */
.field input, .field select, .field textarea{
  font:inherit; font-size:.94rem; color:var(--ink);
  background:transparent;
  border:1px solid color-mix(in srgb, var(--ink) 30%, transparent);
  border-radius:var(--r-sm); padding:10px 13px; width:100%;
  transition:border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease),
             background var(--t-fast) var(--ease);
}
.field input:hover, .field select:hover, .field textarea:hover{
  border-color:color-mix(in srgb, var(--ink) 45%, transparent);
}
/* The list a <select> drops open is drawn by the browser, not by this
   stylesheet — the only reliable lever is the colour scheme of the element
   itself, which the dark bands now declare. The option colours below are for
   the engines that do honour them. */
.field select option{ background:var(--canvas); color:var(--ink); }
.field input::placeholder, .field textarea::placeholder{ color:var(--ink-faint); }
.field textarea{ resize:vertical; min-height:80px; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(var(--accent-rgb),.22);
}
/* the trap: present to a robot reading the markup, gone to everything else */
.cform__trap{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap; pointer-events:none;
}
.cform__error{ margin-top:14px; font-size:.85rem; color:var(--t5); }
.cform__foot{
  display:flex; flex-wrap:wrap; gap:12px; align-items:center;
  margin-top:clamp(18px,2.2vh,26px);
}
@media (max-width:640px){
  /* one column, and the rows get real air between them: at 11px the fields
     read as one block of boxes rather than as separate questions */
  .cform__grid{ grid-template-columns:minmax(0,1fr); gap:20px; }
  .field{ gap:9px; }
}

/* ── THE ANSWER, AS THE CLIENT DREW IT ────────────────────────────────────
   A light card on a dark, blurred server room, with the lockup beneath it.
   Everything in it is live text set from content.js — nothing here is a
   picture of words.

   TWO RULES OF THIS PAGE ARE SUSPENDED INSIDE THIS BOX, and only inside it.
   The type is CENTRED, where everywhere else on the site it is left-aligned
   and the wheel is the only centred thing. And its ground is DARK, where the
   page has one ground and it is light. Both because this is the client's own
   design, drawn and handed over; the exception stops at the card's edge. */
.cmodal[hidden]{ display:none; }

/* the photograph, out of focus and taken down. Inset past the edges so the
   blur has no soft border of its own to show at the sides. */
.cmodal__scrim{
  position:fixed; inset:0; z-index:140; overflow:hidden;
  background:var(--navy-900, #0A1226);
  animation:fadeIn .34s var(--ease) both;
}
.cmodal__scrim::before{
  content:''; position:absolute; inset:-7%;
  background:url('../img/server-room.jpg') center/cover no-repeat;
  filter:blur(15px) brightness(.42) saturate(.85);
}
/* and a little more weight in the middle, so the card never sits on a bright
   patch of the corridor */
.cmodal__scrim::after{
  content:''; position:absolute; inset:0;
  background:radial-gradient(120% 90% at 50% 50%, rgba(6,11,30,.55), rgba(6,11,30,.82));
}

/* card and lockup as one column, and the column is what scrolls when a screen
   is too short to hold them */
.cmodal__stack{
  position:fixed; z-index:141;
  left:50%; top:50%; translate:-50% -50%;
  width:min(92vw, 560px); max-height:92vh; overflow-y:auto;
  -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  display:flex; flex-direction:column; align-items:center;
  animation:modalIn .46s var(--ease-out) both;
}
.cmodal__card{
  width:100%;
  padding:clamp(38px,5vw,62px) clamp(26px,4vw,54px) clamp(34px,4.4vw,54px);
  border-radius:26px; border:0; outline:none;
  /* STONE GREY, the book's own off-white. The card in the client's drawing is
     this colour, so there was nothing to invent. */
  background:var(--stone);
  box-shadow:0 44px 90px -30px rgba(2,6,20,.7);
  text-align:center;
}
/* THE MARKS: two rules and a dot, in the book's sand, printed as printed —
   full opacity, no mix, no fade. They are marks, and the words near them are
   ink; ink on this page is never a pastel. */
.csent__rule{
  display:block; width:58px; height:2px; margin:0 auto;
  background:var(--tint-sand);
}
.csent__dot{
  display:block; width:7px; height:7px; border-radius:50%; margin:0 auto;
  background:var(--tint-sand);
}
/* ── THE SENTENCE WRAPS AT THE HEADLINE'S WIDTH ───────────────────────────
   Not at a guessed measure in `ch`, and not by shrinking the type: the box
   itself is the headline's own width, so the sentence fills that line exactly
   and only goes narrower when a word will not fit on it.

   CSS cannot read one element's width from another, so this is the table
   trick. `display:table` makes the box shrink to the widest thing in it. The
   headline contributes its longest line — `white-space:pre-line` means the
   newline in the copy is honoured, so that is "for reaching out!" rather than
   the whole sentence. The paragraph is then given `width:0`, which removes it
   from that calculation entirely, and `min-width:100%`, which makes it fill
   whatever width the headline settled on. Take either half away and the box
   sizes to the paragraph instead, which is the thing being prevented. */
.csent__measure{ display:table; margin-inline:auto; }
.csent__measure .csent__body{ width:0; min-width:100%; }
.csent__title{
  margin:clamp(22px,2.6vw,30px) auto;
  /* the break after "Thank you" is a newline in content.js — a decision about
     the copy, kept with the copy. No max-width fights it: no width both breaks
     after "you" AND keeps "for reaching out!" whole, which is why the drawing
     has an explicit break in it. */
  white-space:pre-line; max-width:100%;
  /* +2px on the client's ask, and as a calc rather than by nudging the clamp:
     the clamp is three numbers that each govern a different width, and adding
     the two pixels outside it moves all three by exactly two. */
  font-size:calc(clamp(1.85rem,4.4vw,2.65rem) + 8px); font-weight:500;
  line-height:1.14; letter-spacing:-.02em;
  color:var(--navy-700);
}
.csent__body{
  margin:clamp(22px,2.6vw,30px) auto 0;
  font-size:calc(clamp(1rem,1.35vw,1.12rem) + 8px); font-weight:400; line-height:1.5;
  color:var(--navy-700);
}
.csent__note{
  margin:clamp(20px,2.4vw,26px) auto 0;
  max-width:34ch;
  font-size:calc(.9rem + 4px); font-weight:400; line-height:1.55;
  color:var(--ink-dim);
}
.csent__dot{ margin-top:clamp(22px,2.6vw,28px); }
.csent__link{
  color:var(--navy-700); text-decoration:none;
  border-bottom:1px solid rgba(23,47,86,.45);
  transition:border-color var(--t-fast) var(--ease);
}
.csent__link:hover{ border-bottom-color:var(--navy-700); }
.cmodal__logo{
  display:block; width:min(210px,46vw); height:auto;
  margin-top:clamp(24px,3vw,34px); flex:none;
}

/* The way out, on the scrim rather than in the card — the drawing has nothing
   in the card but the message. A drawn cross in a box: centred because the box
   says so, with nothing left to nudge. */
.cmodal__x{
  position:fixed; z-index:142; top:22px; inset-inline-end:22px;
  width:42px; height:42px; border-radius:50%; padding:0;
  display:grid; place-items:center;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.34);
  color:#FFFFFF; cursor:pointer;
  transition:background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.cmodal__x svg{ width:15px; height:15px; display:block; }
.cmodal__x:hover{ background:rgba(255,255,255,.2); border-color:rgba(255,255,255,.6); }

@media (max-width:560px){
  .cmodal__card{ border-radius:20px; }
  .cmodal__x{ top:14px; inset-inline-end:14px; width:38px; height:38px; }
}
/* THE SMALLEST PHONES GIVE A LITTLE OF THE HEADLINE BACK.
   "for reaching out!" wants 259px and a 320px screen leaves it 242, so it
   split into "for reaching" / "out!" — which is worse than a slightly smaller
   line, and it also dragged the headline narrower than the sentence beneath
   it. Two points down and the phrase holds together again. */
@media (max-width:370px){
  .csent__title{ font-size:34px; }
}



/* ══════════════════════════════════════════════════════════════ FAB ══ */
/* ── LIQUID GLASS ─────────────────────────────────────────────────────────
   A blurred translucency is not glass. Three things separate them, and all
   three are here:

   1. REFRACTION. #lgRefract (see index.html) displaces the backdrop by the
      gradients in a lens normal map, so the page BENDS at the rim exactly as
      it would through a real curved edge. This is the effect the eye reads as
      glass; everything else is supporting detail.
   2. SPECULAR EDGE. A bright highlight on the upper-left rim and a dimmer one
      opposite, drawn as a gradient ring and masked to the border only.
   3. THICKNESS. Inset shadows top and bottom so the pill has a body rather
      than being a hole in the page.

   The tint is deliberately faint — real glass is nearly clear and lets the
   blur and the bending do the work. The label carries a shadow of its own so
   it stays legible over whatever the button happens to be floating above. */
.fab{
  position:fixed; inset-inline-end:24px; bottom:24px; z-index:90;
  display:inline-flex; align-items:center; isolation:isolate;
  padding:15px 28px; border-radius:100px; text-decoration:none;
  font-size:.86rem; font-weight:500;
  color:#FFFFFF;
  /* MORE GLASS, LESS PAINT — AND A REAL EDGE. Both were the phone's, and are
     now every width's. The tint used to do most of the work and the blur very
     little, so the pill read as a white lozenge rather than as something you
     look through: half the fill, twice the blur, and the label keeps its own
     shadow, which is what lets it stay legible over whatever passes behind.
     The border is the other half. The specular ring below draws a gradient
     that is bright at two corners and almost nothing in the middle — beautiful
     on a still, but on its own it makes an edge that visibly changes weight as
     it goes round. A hairline underneath it evens the whole circumference and
     the ring becomes the highlight it was meant to be. */
  background-color:rgba(255,255,255,.06);
  backdrop-filter:url(#lgRefract) blur(16px) saturate(210%) brightness(1.1);
  -webkit-backdrop-filter:blur(22px) saturate(210%) brightness(1.08);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(255,255,255,.16),
    inset 0  0 22px rgba(255,255,255,.10),
    0 18px 44px -16px rgba(6,11,30,.62);
  opacity:0; transform:translateY(20px) scale(.95); pointer-events:none;
  transition:opacity var(--t) var(--ease), transform var(--t) var(--ease),
             background-color var(--t-fast) var(--ease);
}
/* At every width. It was a phone control for a while; it is back on the
   desktop too — it appears once the cover is behind you and tucks itself away
   again as the closing block comes into view, so it is never over the form it
   is pointing at. */
.fab__label{
  position:relative; z-index:2;
  text-shadow:0 1px 10px rgba(6,11,30,.85), 0 0 2px rgba(6,11,30,.55);
}
/* the specular ring: a gradient drawn only where the border would be */
.fab::before{
  content:''; position:absolute; inset:0; border-radius:inherit; z-index:1;
  padding:1px; pointer-events:none;
  background:linear-gradient(135deg,
    rgba(255,255,255,.9) 0%, rgba(255,255,255,.25) 26%,
    rgba(255,255,255,.06) 52%, rgba(255,255,255,.35) 78%, rgba(255,255,255,.7) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
/* the sheen that sits on the upper half of a real curved surface */
.fab::after{
  content:''; position:absolute; inset:1px; border-radius:inherit; z-index:1;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 46%);
}
.fab:hover{ background-color:rgba(255,255,255,.18); }

/* Over a pale band the film turns white and the ink turns navy — the same
   piece of glass, lit from the other side. app.js decides which. */
.fab.is-on-light{
  color:var(--navy-800);
  background-color:rgba(255,255,255,.26);
  /* no refraction on this one: over a pale band there is nothing behind it
     worth bending, and the displacement only softened its own edge */
  backdrop-filter:blur(18px) saturate(180%) brightness(1.04);
  -webkit-backdrop-filter:blur(18px) saturate(180%) brightness(1.04);
  border-color:rgba(var(--accent-rgb), .45);
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(23,47,86,.10),
    inset 0  0 22px rgba(255,255,255,.35),
    0 18px 44px -18px rgba(23,47,86,.34);
}
.fab.is-on-light .fab__label{ text-shadow:0 1px 10px rgba(255,255,255,.95), 0 0 3px rgba(255,255,255,.8); }
.fab.is-on-light::before{
  background:linear-gradient(135deg,
    rgba(255,255,255,1) 0%, rgba(23,47,86,.14) 30%,
    rgba(23,47,86,.05) 55%, rgba(255,255,255,.7) 80%, rgba(255,255,255,1) 100%);
}
.fab.is-on-light::after{
  background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 48%);
}
.fab.is-on-light:hover{ background-color:rgba(255,255,255,.4); }

/* nothing to see through: fall back to something the label can sit on */
@supports not (backdrop-filter: blur(1px)){
  .fab{ background-color:color-mix(in srgb, var(--navy-700) 92%, transparent); }
}

/* the SVG holding the filter takes no space */
.glass-defs{ position:absolute; width:0; height:0; overflow:hidden; }

.fab.is-tucked{ opacity:0 !important; transform:translateY(14px) scale(.94) !important; pointer-events:none; }
.fab.is-visible{ opacity:1; transform:none; pointer-events:auto; }

/* ═════════════════════════════════════════════════════════ REVEALS ══ */
.reveal{ opacity:0; transform:translateY(22px); }
.reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .85s var(--ease-out), transform .85s var(--ease-out);
}

/* ═══════════════════════════════════════════════════════ RESPONSIVE ══ */
@media (max-width:900px){
  /* stacked: the side panel becomes a band above the copy */
  .edge{
    position:relative; inset:auto; width:auto; height:clamp(210px,34vw,300px);
    margin-inline:calc(-1 * var(--pad)); margin-bottom:clamp(28px,4vh,44px);
    -webkit-mask-image:none; mask-image:none;
  }
  .section--edge > .wrap{ display:flex; flex-direction:column; }
  .edge__text, .edge__text--end{ max-width:none; margin-inline:0; }
  /* stacked: the wheel keeps the full column and the panel opens over it */
  .pie-layout{ flex-direction:column; }
  .pie-layout.is-open .pie-side{ flex:0 0 auto; width:100%; }

}

@media (max-width:1080px){
  .pie-layout{ grid-template-columns:minmax(0,1fr); }
  .pie-stage{ max-width:480px; }
  /* THE WHEEL DOES NOT STEP ASIDE WHERE THE PANEL IS A SHEET.
     Below this width the partners open as a modal OVER the page — there is
     nothing for the wheel to make room for, and stepping aside only meant it
     slid back across the screen when the sheet was closed. Same breakpoint as
     MODAL_Q in app.js; the two have to agree. */
  .pie-layout.is-open .pie-stage{ transform:none; }
}

@media (max-width:860px){
  .nav__links{
    position:absolute; inset-inline:0; top:100%;
    flex-direction:column; gap:0;
    background:var(--nav-bg-stuck); backdrop-filter:blur(20px);
    border-bottom:1px solid var(--line);
    padding:6px var(--pad) 18px;
    clip-path:inset(0 0 100% 0); pointer-events:none;
    transition:clip-path var(--t) var(--ease);
  }
  .nav__links.is-open{ clip-path:inset(0 0 0 0); pointer-events:auto; }
  .nav__links a{ padding:14px 0; border-bottom:1px solid var(--line); font-size:.95rem; }
  .nav__links a::after{ display:none; }
  .nav__cta{ margin-inline-start:auto; }
  .nav__section, .nav__divider{ display:none; }
  .nav__logo{ height:28px; }

  .nav__burger{
    /* flex:none — at 320px the bar squeezed it into an ellipse */
    display:flex; flex:none; flex-direction:column; justify-content:center; gap:5px;
    width:38px; height:38px; padding:0 8px;
    background:none; border:1px solid var(--line-strong); border-radius:50%;
    cursor:pointer;
  }
  .nav__burger span{ height:1px; background:var(--ink); transition:transform var(--t) var(--ease), opacity var(--t); }
  .nav__burger[aria-expanded="true"] span:first-child{ transform:translateY(3px) rotate(45deg); }
  .nav__burger[aria-expanded="true"] span:last-child{ transform:translateY(-3px) rotate(-45deg); }

  .mlayer{
    border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden;
    background:var(--surface); transition:border-color var(--t-fast) var(--ease);
  }
  .mlayer.is-open{ border-color:var(--line-strong); }
  .mlayer__head{
    width:100%; display:flex; align-items:center; gap:14px;
    padding:18px; background:none; border:0; text-align:start; cursor:pointer;
  }
  .mlayer__idx{ font-size:.72rem; letter-spacing:.16em; color:var(--accent); flex:none; }
  .mlayer__titles{ flex:1; min-width:0; }
  .mlayer__title{ display:block; font-size:1.1rem; font-weight:500; }
  .mlayer__sub{ display:block; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); margin-top:4px; }
  .mlayer__plus{
    flex:none; width:30px; height:30px; border-radius:50%; border:1px solid var(--line-strong);
    position:relative; transition:all var(--t) var(--ease);
  }
  .mlayer__plus::before,.mlayer__plus::after{
    content:''; position:absolute; top:50%; left:50%; background:var(--ink); transform:translate(-50%,-50%);
  }
  .mlayer__plus::before{ width:11px; height:1px; }
  .mlayer__plus::after{ width:1px; height:11px; }
  .mlayer.is-open .mlayer__plus{ background:var(--accent); border-color:var(--accent); transform:rotate(135deg); }
  .mlayer.is-open .mlayer__plus::before,.mlayer.is-open .mlayer__plus::after{ background:var(--on-accent); }
  .mlayer__panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--t) var(--ease); }
  .mlayer.is-open .mlayer__panel{ grid-template-rows:1fr; }
  .mlayer__panel > div{ overflow:hidden; }
  .mlayer__inner{ padding:0 18px 20px; }
}

/* Under 400px the bar simply does not fit: lockup, Contact and the burger came
   to 348px inside a 320px screen and the burger was pushed nine pixels past the
   edge. Everything in it gives a little rather than one thing being dropped. */
/* ── THE LOCKUP ARRIVES ─────────────────────────────────────────────────────
   On a phone the bar opens with nothing in it but Contact and the menu, and
   the lockup slides in from the left as soon as the page starts to move —
   and slides back out again at the top. It keeps its box the whole time, so
   the bar's height never changes and nothing below it shifts: only opacity
   and a transform, both composited, and the clip is what makes it read as
   arriving rather than fading up.
   `visibility` rather than `display` so the transition has both ends. */
@media (max-width:860px){
  /* ── THE BAR IS SIMPLY THERE ────────────────────────────────────────────
     For several rounds the lockup started on the cover and flew up into the
     bar as the page moved. It was measured right at both ends on every size
     and condition that could be driven here, and it still came out wrong on a
     handset — because the journey depended on a transform written by the main
     thread while the browser's own compositor was moving the bar underneath
     it, and during a touch flick the main thread is the slower of the two.

     So there is no journey. The bar carries the lockup from the moment the
     page opens, exactly as it does at a desk, and the cover carries the title
     and its two buttons. Nothing is measured, nothing is timed against
     anything else, and there is no state that can be arrived at late. */
  /* position is set once, for every width, up at the top of the file */
  /* one lockup, and it is the bar's */
  .hero__brand{ display:none; }

  /* Contact moves into the menu; the bar carries the lockup and the burger,
     and the burger takes over pushing itself to the far edge — that job used
     to belong to the pill's `margin-inline-start:auto`. */
  .nav__cta{ display:none; }
  .nav__burger{ margin-inline-start:auto; }
  .nav__links-cta{
    display:block;
    color:var(--accent) !important; font-weight:500;
    border-bottom:0 !important;
  }

  /* The bar does not shrink here. It is the same bar from the first frame to
     the last, and a phone has no height to spare for a second state of it. */
  .nav.is-stuck .nav__inner{ padding-block:17px; }
  .nav.is-stuck .nav__logo{ height:28px; }
}

@media (max-width:400px){
  .nav__inner{ gap:8px; padding-inline:16px; }
  /* both states, or the "do not shrink" rule one band up becomes a "grow on
     scroll" rule down here */
  .nav__logo, .nav.is-stuck .nav__logo{ height:24px; }
  .nav__cta{ padding:8px 14px; font-size:.76rem; }
  .nav__burger{ width:34px; height:34px; }
}

@media (max-width:700px){
  /* THE BAR IS 80px TALL HERE. A flat 64px of padding put the lockup sixteen
     pixels UNDER it — and because the hero centres its content, padding is not
     even the binding constraint once the block is taller than the space left.
     The bar's own measured height plus a margin, and a cover that is actually
     a cover rather than a third of the screen. */
  .hero{ min-height:min(78svh, 640px); padding-top:calc(var(--nav-h, 80px) + 28px); }
  .hero__scroll{ display:none; }
  /* Every pixel of stage is a sixth of a pixel of label, so the wheel takes
     the whole screen width, gutters included. */
  .pie-stage{
    width:calc(100% + 2 * var(--pad));
    max-width:min(100vw - 6px, 460px);
    margin-inline:calc(-1 * var(--pad));
    /* the caption hangs 14px under the wheel inside this margin, so most of it
       is spoken for — the wheel needs the rest of it as air below the caption */
    margin-bottom:62px;
  }
  /* 8.3px. The floor of the clamp was doing the work at every phone width and
     it was two sizes below anything else on the page. */
  /* THE HUB COMES IN.
     The labels start at radius 130 and the hub's disc reached 118, which left
     the inner end of a long label all but touching it. The disc is drawn as
     three concentric circles and all three take the same radius — `r` is a
     geometry property and is set here rather than on the markup, so the wheel
     itself is untouched at a desk. The segments still begin at 120, so what
     opens up is the white ring between the two, which is where the label's
     inner end now sits. */
  .pie__core, .pie__core-ring, .pie__core-lit{ r:104px; }
  .pie-centre__hub{
  font-size:clamp(.74rem,3vw,.92rem); font-weight:500; line-height:1.3;
  letter-spacing:.02em; color:var(--ink-strong);
  max-width:13ch; margin-inline:auto; text-wrap:balance;
  transition:opacity var(--t) var(--ease);
}
.pie-centre.is-active .pie-centre__hub{ opacity:0; }
/* THE HINT COMES OUT OF THE HUB.
   The hub circle is about 120px across on a phone. "SELECT A SEGMENT" is
   125px at any size still worth reading, so inside the circle it either wrapped
   to two lines and pushed the whole readout out through the bottom, or ran
   flat across the segments. Below the wheel it is a caption, at full size, with
   nothing to fight — and the hub keeps the circle to itself. */
.pie-centre__hint{
  position:absolute; top:100%; left:50%; translate:-50% 14px;
  width:max-content; margin-top:0;
  font-size:.72rem; letter-spacing:.1em; white-space:nowrap;
}


  .partners__list{ gap:10px; }

  .step__head{ gap:12px; }
  .step__idx{ display:none; }
  .step__body{ padding-inline-start:0; }
  .flow{ padding-inline-start:0; }
  .flow__rail{ display:none; }

  .fab{ inset-inline:16px; bottom:16px; justify-content:center; }
  .footer__inner{ flex-direction:column; align-items:flex-start; }

}

/* ── TAP TARGETS ────────────────────────────────────────────────────────────
   Three sets of links were coming out seventeen or eighteen pixels tall, which
   is a line of text, not something a thumb can hit. They are given the height
   back with padding and it is taken off again with an equal negative margin,
   so every one of them grows without moving a pixel of the layout around it.
   Not phone-only: a tablet in portrait is a touch screen too. */
@media (max-width:900px){
  .ccard__name a,
  .pcard__name a,
  .cta__lines a{ padding-block:10px; margin-block:-10px; }
  .nav__brand{ padding-block:9px; margin-block:-9px; }
  /* the two places that set their own chip padding have to be named, or the
     more specific rule simply keeps its 7px and the chip stays 34 tall */
  .chip,
  .ccard__actions .chip,
  .pcard .chip{ padding-block:10px; }
  .cta__lines-k{ font-size:.76rem; letter-spacing:.14em; }
}

/* ═══════════════════════════════ THE GROUND, GIVEN SOMETHING TO SAY ══
   The four sections that carry no photograph were four soft washes in a row,
   and a soft wash repeated four times is a blank page. They keep the wash —
   it is what makes the joins disappear — and gain two things over it.

   ONE, a plan grid. Hairlines at a fixed 76px pitch, drawn in Innovation Blue
   at five per cent, masked to a single corner so it reads as a drawing that
   happens to run under the copy rather than as wallpaper. It is a floor plan,
   which is what this practice is about; each section takes it from a different
   corner so no two look alike. It never crosses a photograph — "How we work"
   and "Why Meitar" have the tower, and the wheel has its own picture.

   TWO, a rule at the head of the section: a hairline the full width of the
   page with a short block of one brand pastel sitting on it at the gutter.
   The pastel is printed as printed — full opacity, no mix, no fade — and it
   is a mark, never ink for words. Five sections, five colours, in the book's
   order, so the page indexes itself as you go down it. */
:root{
  --plan-step: 76px;
  --plan-a: .065;
  --rule-w: 84px;
  /* where the copy actually starts: the page gutter until the wrap centres
     itself, and half the leftover after that. The head rule's pastel block
     begins here, so it lines up with the heading under it rather than with
     the edge of the screen. */
  --gutter: calc(max(0px, (100% - var(--wrap)) / 2) + var(--pad));
}
.band::before,
.section--services::before,
.section--cta::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    repeating-linear-gradient(90deg,
      rgba(var(--wash-rgb), var(--plan-a)) 0 1px, transparent 1px var(--plan-step)),
    repeating-linear-gradient(180deg,
      rgba(var(--wash-rgb), var(--plan-a)) 0 1px, transparent 1px var(--plan-step));
  -webkit-mask-image:radial-gradient(var(--plan-r, 92% 78%) at var(--plan-at, 100% 0%), #000 12%, transparent 78%);
          mask-image:radial-gradient(var(--plan-r, 92% 78%) at var(--plan-at, 100% 0%), #000 12%, transparent 78%);
}
.band::before        { --plan-at: 88% 4%;   }
.section--services::before{ --plan-at: 6% 96%;  }
.section--cta::before     { --plan-at: 50% 100%; --plan-a:.06; }
/* Advisory carries a photograph now, and a drawing on top of a photograph is
   two grounds arguing. Same reason a section inside the tower has neither. */

/* ── THE SECOND SECTION ───────────────────────────────────────────────────
   The opening band is where the page states what the practice is, and it was
   the quietest surface on it. The plan is drawn across the WHOLE of it here
   rather than into one corner — it is the reading section, so the drawing
   under the reading is the point — and it is the one place where the grid is
   not only lines. Six of its intersections carry a solid square of one brand
   pastel, printed as printed: eleven pixels, full opacity, no mix, no fade.
   They are marks on a drawing, and they sit in the outer columns where the
   copy does not run, so nothing is ever read off a colour.

   The geometry only works because everything here is anchored to the RIGHT
   edge and to a single 76px tile: the two line layers and the six nodes share
   one background-size, so a node offset by a multiple of the tile lands on a
   crossing at every width. Change --plan-step and the offsets must follow. */
.band::before{
  --plan-r: 132% 112%;
  --plan-a: .075;
  background-image:
    linear-gradient(var(--tint-sky),   var(--tint-sky)),
    linear-gradient(var(--tint-lilac), var(--tint-lilac)),
    linear-gradient(var(--tint-sand),  var(--tint-sand)),
    linear-gradient(var(--tint-coral), var(--tint-coral)),
    linear-gradient(var(--tint-green), var(--tint-green)),
    linear-gradient(var(--tint-sky),   var(--tint-sky)),
    /* one line per tile, NOT a repeating-gradient: a repeating gradient sizes
       itself to the whole box and ignores background-position, which would
       anchor the lattice to the left edge while the nodes are measured from
       the right. Tiled at --plan-step from `100% 0`, both agree. */
    linear-gradient(90deg,  rgba(var(--wash-rgb), var(--plan-a)) 0 1px, transparent 1px),
    linear-gradient(180deg, rgba(var(--wash-rgb), var(--plan-a)) 0 1px, transparent 1px);
  background-repeat:no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat;
  background-size:11px 11px, 11px 11px, 11px 11px, 11px 11px, 11px 11px, 11px 11px,
                  var(--plan-step) var(--plan-step), var(--plan-step) var(--plan-step);
  background-position:
    calc(100% - var(--nA))  71px,   /* 1 tile in, 1 down  */
    calc(100% - var(--nB)) 223px,   /* 2 in, 3 down       */
    calc(100% - var(--nA)) 375px,   /* 1 in, 5 down       */
    calc(100% - var(--nC)) 451px,   /* 3 in, 6 down       */
    calc(100% - var(--nB)) 603px,   /* 2 in, 8 down       */
    calc(100% - var(--nA)) 755px,   /* 1 in, 10 down      */
    100% 0, 100% 0;
}
/* A node is never allowed under a line of type. Each tile column only turns
   on once the page is wide enough that the column falls OUTSIDE the copy —
   the thresholds are read off --wrap, which itself steps at 1330 and 1600.
   Parked at -300px a node is positioned past the right edge and simply is
   not painted, which is the cheapest way to switch one off. */
.band::before{ --nA:-300px; --nB:-300px; --nC:-300px; }
@media (min-width:1100px){ .band::before{ --nA: 81px; } }
@media (min-width:1250px){ .band::before{ --nB:157px; } }
@media (min-width:1470px){ .band::before{ --nC:233px; } }

/* the head rule. `top:0` on a section whose padding starts below it, so it
   sits exactly on the join with the section above.

   FOUR SECTIONS, NOT FIVE. The closing section had it and has lost it: the
   line was drawing a border across a join where the photograph above it
   already ends — two edges on one seam — and with the line gone the pastel
   block that sits on it has nothing to sit on. So both come off there, and the
   page's colour index runs sky, lilac, green, coral and stops. */
.band::after,
.section--practice::after,
.section--services::after,
.section--advisory::after{
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  z-index:2; pointer-events:none;
  background-image:
    linear-gradient(90deg,
      transparent 0 var(--gutter),
      var(--rule-c) var(--gutter) calc(var(--gutter) + var(--rule-w)),
      transparent calc(var(--gutter) + var(--rule-w))),
    linear-gradient(180deg, var(--line) 0 1px, transparent 1px);
}
.band::after            { --rule-c: var(--tint-sky);   }
.section--practice::after{ --rule-c: var(--tint-lilac); }
.section--services::after{ --rule-c: var(--tint-green); }
.section--advisory::after{ --rule-c: var(--tint-coral); }
/* the band's own two sections sit above its grid and its rule */
.band .section{ z-index:1; }
/* on a phone the grid is finer than the type and just makes noise */
@media (max-width:720px){
  .band::before, .section--services::before, .section--cta::before{ display:none; }
  :root{ --rule-w:56px; }
}

/* The marker `initChrome` watches to know whether the page has left the top.
   ONE pixel, so its edge is the same one the scroll path uses — two answers
   to the same question have to be set to the same boundary or they will spend
   the first twenty pixels of every scroll contradicting each other. Pulled
   straight back out of the flow, so it costs nothing. */
#top{ display:block; height:1px; margin-bottom:-1px; pointer-events:none; }

/* ═══════════════════════════════════════ THE PHONE, LAST WORD ═══════════
   Everything below is the phone only, and everything in it was measured on a
   handset rather than guessed at a desk. */
@media (max-width:700px){

  /* ── RUNNING TEXT, TWO PIXELS UP ────────────────────────────────────────
     Headings are already display size and are left alone; it is the copy you
     actually read for a minute at a time that was set at desk sizes on a
     screen held at arm's length. Every one of these is the same value it had
     plus two. */
  .prose p, .band__body p{ font-size:1.13rem; }
  .lede{ font-size:1.13rem; }
  .pillar__body{ font-size:1.06rem; }
  .why__body{ font-size:1.05rem; }
  .step__body, .step__body p, .step__deliverables{ font-size:1.1rem; }
  .cta__lines-v{ font-size:1.04rem; }
  .ccard__role, .pcard__role{ font-size:.94rem; }
  .ccard__name, .pcard__name{ font-size:1.06rem; }
  .partners__all{ font-size:.98rem; }
  .csent__body{ font-size:calc(1.05rem + 8px); }   /* keeps the increase below 700 */
  .chip{ font-size:.85rem; }
  .chip svg{ width:16px; height:16px; }

  /* ── THE COVER'S SECOND BUTTON ──────────────────────────────────────────
     A hairline outline on a photograph is not a button. It keeps the ghost's
     shape and gains a ground of its own to sit on. */
  .hero--cover .btn--ghost{
    background:rgba(var(--canvas-rgb), .82);
    border-color:var(--navy-700);
    color:var(--navy-700);
    backdrop-filter:blur(6px);
  }

  /* ── THE FLOATING PILL ──────────────────────────────────────────────────
     It was a wide, low, faint bar across the foot of the screen. Narrower so
     it reads as a button, taller so it is worth hitting, a size of type you
     can see, and a hairline of its own so it has an edge against a pale
     section rather than dissolving into one. */
  /* Only the SIZE is the phone's own now. The glass and the edge that used to
     live here are the button's at every width — a pill that reads as glass on
     a handset and as paint at a desk was two buttons. */
  .fab{
    inset-inline:auto 16px; bottom:18px;
    width:auto; max-width:calc(100% - 32px);
    padding:17px 30px;
    font-size:1rem; font-weight:500;
  }

  /* ── THE FOUR PARTNERS' BUTTONS ─────────────────────────────────────────
     Two-up left them at sixty pixels of width with a nine-pixel mark in them.
     One under another, at a size that reads. */
  .ccard__actions{ grid-template-columns:minmax(0,1fr); gap:9px; }
  .ccard__actions .chip{ justify-content:center; padding:12px 10px; font-size:.9rem; }
  .ccard__actions .chip svg{ width:17px; height:17px; }

  /* ── THE PANEL THAT OPENS OFF THE WHEEL ─────────────────────────────────
     The card stacked avatar over name and left the whole right half of itself
     empty, and the three chips sat in a row that stopped short. Avatar beside
     the name, chips across the full width. */
  .pcard{ flex-direction:row; align-items:center; gap:14px; flex-wrap:wrap; }
  .pcard__avatar{ width:64px; height:64px; }
  .pcard__body{ flex:1 1 0; width:auto; min-width:0; }
  .pcard__actions{
    display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
    gap:8px; flex:1 0 100%; margin-top:4px;
  }
  .pcard .chip{ justify-content:center; padding:11px 6px; font-size:.82rem; }
  .pcard .chip svg{ width:15px; height:15px; }

  /* ── SPACING ────────────────────────────────────────────────────────────
     A section's full top padding under another section's full bottom padding
     is a hundred and eighty pixels of nothing on a screen this size. Where two
     sections belong to one block, the second one gives most of it back. */
  /* ── THE HEAD RULE COMES OFF ────────────────────────────────────────────
     A hairline the full width of the page with a short pastel dash on it is an
     editorial device that needs room around it to read as one. On a phone it
     is just a line above a heading, and it was the first thing the eye caught.
     The pastels stay where they do work here — the wheel, the cell tints, the
     marks. */
  .band::after, .section--practice::after, .section--services::after,
  .section--advisory::after{ display:none; }

  /* ── THE FOUR PARTNERS, LIKE THE PANEL'S ────────────────────────────────
     One under another and laid out exactly as the cards in the wheel's panel
     are: portrait beside the name, the three actions across a row of their
     own. Two to a row left them 168px wide with the buttons stacked inside. */
  .core__list{ grid-template-columns:minmax(0,1fr); gap:12px; }
  .ccard{
    flex-direction:row; align-items:center; flex-wrap:wrap;
    gap:14px; padding:16px;
  }
  .ccard__avatar{ width:64px; height:64px; }
  .ccard__body{ flex:1 1 0; min-width:0; width:auto; }
  .ccard__name{ margin-top:0; }
  .ccard__actions{
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:8px; flex:1 0 100%; margin-top:4px;
  }
  .ccard__actions .chip{ padding:11px 6px; font-size:.82rem; }
  .ccard__actions .chip svg{ width:15px; height:15px; }
  /* three across, so the odd-one-out rule that spans the last chip has to go */
  .ccard__actions .chip:last-child:nth-child(odd){ grid-column:auto; }

  /* Both halves of the join give, not just the second one: a full bottom
     padding under a trimmed top padding is still most of the hole. */
  .section--practice{ padding-top:48px; padding-bottom:34px; }
  /* air under the wheel and its caption before the next section starts */
  .pie-layout{ margin-bottom:34px; }
  /* the same measure on both sides of the join, so the whitespace before
     "A high-complexity sector" sits evenly across the seam */
  .section--wwd{ padding-bottom:48px; }
  .tower > .section:first-of-type{ padding-top:36px; }
  /* and the closing block starts closer to the streams above it */
  .section--advisory{ padding-bottom:24px; }
  .section--cta{ padding-top:64px; }
  .band .section + .section{ padding-top:26px; }
  .section--intro{ padding-bottom:26px; }
  .pair > .section + .section{ padding-top:68px; }
  .section--why{ padding-bottom:34px; }
  .tower > .section + .section{ padding-top:72px; }
  .section--services{ padding-bottom:38px; }
  /* the page's last edge: the closing block does not need a full section's
     worth of air under its last line */
  .section--cta{ padding-bottom:38px; }
}

/* ═════════════════════════════════════════════════ REDUCED MOTION ═══ */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal, .step, .rise__i{ opacity:1 !important; transform:none !important; }
  .hero__title .line span{ transform:none; }
  .edge img{ opacity:1 !important; transform:none !important; }
  .seg{ transform:none !important; opacity:1 !important; animation:none !important; }
  .hero__photo{ animation:none; opacity:.34; transform:none; }
  #heroCanvas{ display:none; }
}

/* ═══════════════════════════════════════════════════════════ PRINT ═══ */
@media print{
  .nav,.fab,.hero__bg,.hero__scroll,.demo-notice{ display:none !important; }
  body{ background:#fff; color:#111; }
}