/* Blooming Prep — site behaviors: sticky CTA bar, values marquee, quiet hovers, footer links. */

/* Sticky CTA bar */
.s-sticky-cta{transform:translateY(100%);transition:transform .3s cubic-bezier(.22,.61,.36,1);}
.s-sticky-cta.bp-sticky-on{transform:none;}
/* ...but stay hidden while the on-page Founding Families form is itself in view —
   avoids two simultaneous "Join Founding Families" asks in the same viewport. */
.s-sticky-cta.bp-sticky-hide{transform:translateY(100%) !important;}

/* Values marquee ribbon — 26s linear loop; JS clones the track for the seamless join.
   !important: Elementor's atomic CSS loads after this file and sets flex-shrink:1 +
   min-width:30px on e-con, which collapses the tracks and stacks the clones. */
.s-values-bar{flex-wrap:nowrap;}
.s-values-track{flex:0 0 auto !important;width:auto !important;min-width:max-content !important;animation:bp-marquee 26s linear infinite;will-change:transform;}
.s-values-track p{white-space:nowrap;}
@keyframes bp-marquee{to{transform:translateX(-100%);}}
/* Pause (WCAG 2.2.2, Hallmark audit 6 Oct 2026): hover holds the ribbon; the toggle bp-home.js
   adds holds it for keyboard and touch. html body: Hello Elementor's button defaults print later. No toggle under reduced motion, where nothing moves. */
.s-values-bar{position:relative;}
.s-values-bar:hover .s-values-track,.s-values-bar.bp-paused .s-values-track{animation-play-state:paused;}
html body .bp-marquee-toggle{position:absolute;inset-block:0;inset-inline-end:16px;margin-block:auto;z-index:2;width:44px;height:44px;padding:0;border:1px solid var(--border,#DFD9D4);border-radius:var(--radius-full,100%);background:var(--bg,#FFFFFF);color:var(--ink,#211910);cursor:pointer;transition:background-color .3s,color .3s;}
html body .bp-marquee-toggle:hover,html body .bp-marquee-toggle:focus{background:var(--card-tan,#F5ECD8);color:var(--ink,#211910);border-color:var(--border-strong,#BFB4A9);}
/* The words slide under a cap in the bar's own ground (inherited, then faded in by a mask)
   instead of colliding with the toggle (critique 6 Oct 2026). */
html body .s-values-bar:has(> .bp-marquee-toggle)::after{content:"";position:absolute;inset-block:0;inset-inline-end:0;width:120px;z-index:1;pointer-events:none;background:inherit;-webkit-mask-image:linear-gradient(to right,transparent,#000 45%);mask-image:linear-gradient(to right,transparent,#000 45%);}
html body .bp-marquee-toggle:focus-visible{outline:2px solid var(--accent,#52815F);outline-offset:2px;}
html body .bp-marquee-toggle::before{content:"";box-sizing:content-box;position:absolute;inset:0;margin:auto;width:4px;height:12px;border-inline:3px solid currentColor;}
html body .bp-paused .bp-marquee-toggle::before{width:0;height:0;border-block:6px solid transparent;border-inline:10px solid currentColor;border-inline-end:0;margin-inline-start:18px;}

/* Button anatomy — label left, circular icon chip right. Arrow path is the handoff's own
   Button.jsx anatomy (design_handoff_blooming_prep/components/core/Button.jsx), not a generic
   icon-set pick. 14 Sep 2026: was the zzph- placeholder glyph on an off-token #919C5D chip;
   "carry the anatomy, not the source colors" (DESIGN.md components) — each button now pairs
   its two on-brand colors (white/sage), inverted between variants, instead of Kidora's yellow. */
.btn-primary::after{content:"";flex:0 0 auto;width:26px;height:26px;border-radius:var(--radius-full,100%);background:var(--bg,#FFFFFF) url(/wp-content/uploads/bp/icons/bp-icon-arrow-ne-sage.svg) center/14px 14px no-repeat;}
.btn-secondary::after{content:"";flex:0 0 auto;width:26px;height:26px;border-radius:var(--radius-full,100%);background:var(--accent,#52815F) url(/wp-content/uploads/bp/icons/bp-icon-arrow-ne-white.svg) center/14px 14px no-repeat;}

/* Kicker mark — small tree mark before each caps eyebrow. Default is the brown mark (matches
   ink on white/cream, where most eyebrows sit); env-eyebrow, enrich-eyebrow, fc-bpc-eyebrow,
   founding-loc-eyebrow and the hero already override to mark-tree-light/-green for their own
   darker grounds. 14 Sep 2026: was the zzph- placeholder dot — this is the brand mark itself,
   already live elsewhere, just never wired to the default case. */
[data-id$="-eyebrow"]{display:inline-flex;align-items:center;gap:10px;}
[data-id$="-eyebrow"]::before{content:"";flex:0 0 auto;width:18px;height:18px;background:url(/wp-content/uploads/bp/brand/mark-tree-brown.png) center/contain no-repeat;}

/* Welcome band copy (was the hero panel before the 7 Sep 2026 Figma hero) */
.s-hero-content{position:relative;z-index:2;max-width:640px;}

/* Hero — Figma "Think Beyond" band (7 Sep 2026). The cream ground and layout live in the
   builder. Cloud + balloon line-art removed 28 Sep 2026 (revision plan P2-03). */
.s-hero-title{color:var(--ink,#52815F);}
.s-hero-ages{color:var(--label-green,#4B5F4F);}
.s-hero-art{height:auto;}
.s-hero{position:relative;isolation:isolate;}
@media (max-width:767px){
  /* Figma mobile draws the CTA edge-to-edge in the copy column */
  html body .s-hero-actions .btn-primary{width:100%;justify-content:space-between;}
}

/* Hero entrance (on load, CSS-only): copy rises in order title → ages → CTA; the art fades in after.
   16 Oct 2026 (user: more prominent, in step with the hero video): 56px rise plus a 24px slide in from the
   left (the scrim side) over 1.1s, staggered 0.3s from 0.35s, so the title lands as the pencil starts
   drawing (~1s into the clip) and the CTA settles with the first figure. Phones have no video, same timing. */
@keyframes bp-hero-rise{from{opacity:0;transform:translate(-24px,56px);}}
@keyframes bp-hero-fade{from{opacity:0;}}
.s-hero-title,.s-hero-ages,.s-hero-actions{
  animation:bp-hero-rise 1.1s cubic-bezier(.2,.7,.2,1) .35s both;
}
.s-hero-ages{animation-delay:.65s;}
.s-hero-actions{animation-delay:.95s;}
.s-hero-art{animation:bp-hero-fade .9s ease-out .8s both;}
@media (prefers-reduced-motion: reduce){
  .s-hero-title,.s-hero-ages,.s-hero-actions,.s-hero-art{animation:none;}
}

/* Quiet hovers — color swaps only, 0.3s, per the design contract */
.link-accent{transition:color .3s;}
.link-accent:hover,.link-accent:focus-visible{color:var(--accent-hover);}
.btn-secondary{transition:background-color .3s,border-color .3s,color .3s;}
/* Hover ground lives on the btn-secondary GLOBAL CLASS hover variant (17 Sep 2026), the same
   place btn-primary already keeps its own -- one source of truth, and it shows in the
   Elementor UI. The rule that used to sit here painted var(--surface) Cream #FAF5EB, which
   is invisible against the white page ground. */

/* Focus ring — sage, never the browser default blue. Site-wide a/button rule now lives in
   bp-base.css (14 Sep 2026 interface review) with the specificity to beat Hello's reset. */

/* Footer links */
.s-site-footer a{color:inherit;text-decoration:none;transition:color .3s;}
.s-site-footer a:hover,.s-site-footer a:focus-visible{color:var(--bg);}

@media (prefers-reduced-motion: reduce){
  .s-sticky-cta,.link-accent,.btn-secondary,.s-site-footer a{transition:none;}
  .s-values-track{animation:none;}
}

/* Hero sits on the light scrim with ink copy — green tree per BRAND-TOKENS §5 (green on light neutral) */
.s-hero-eyebrow::before { background-image: url(/wp-content/uploads/bp/brand/mark-tree-green-2026-sm.webp); }

/* inset heroes on other pages carry side margins; Elementor's atomic width:100% would push
   them off-canvas. Home's hero (data-id="hero") is full-bleed and is deliberately excluded. */
html body [data-id$="-hero"]{width:auto;}

/* FAQ accordion (Home preview). 14 Sep 2026 audit #9: grid-template-rows 0fr -> 1fr instead of a
   max-height animation - no layout measurement, no JS height; the answer (accordion-answer global
   class) already clips. No shadow on open per DESIGN.md accordion spec. */
html body [data-id*="-accordion-collapse-"]{display:grid !important;grid-template-rows:0fr;transition:grid-template-rows .35s ease;} /* !important: e-div-block base display wins otherwise */
html body [data-id*="-accordion-item-"].is-open > [data-id*="-accordion-collapse-"]{grid-template-rows:1fr;}
html body [data-id*="-accordion-answer-"]{min-height:0;}
@media (prefers-reduced-motion: reduce){html body [data-id*="-accordion-collapse-"]{transition:none;}}

/* Vertical rhythm override — global classes bind toggle/item padding to the site's 40px
   space-md token, which reads too tall for a one-line question row. Cut just the vertical
   sides here rather than touching space-md (shared by other components). */
html body [data-id*="-accordion-toggle-"]{padding-top:20px !important;padding-bottom:0 !important;white-space:normal !important;}
/* Native <button> UA default is white-space:nowrap, which inherits into the question text
   below and clips it at narrow widths instead of wrapping (found in the 21 Aug polish pass). */
html body [data-id*="-accordion-question-"]{white-space:normal !important;min-width:0;}
html body [data-id*="-accordion-item-"]{padding-bottom:20px !important;}
/* Centering: Elementor's base puts 10px on the item's top, so the closed row sat 30px above the
   toggle and 20px below it. Dropping it makes the closed row 20/20 with the chip and the question
   centred on one line (9 Oct 2026). Team cards keep their own 24px inset (bp-team.css). */
html body [data-id*="-accordion-item-"]:not([data-id^="team-"]){padding-top:0 !important;}

/* FAQ accordion — re-styled to match design_handoff_blooming_prep ValueAccordion.jsx:
   closed = transparent + hairline border pill; open = white card, border retained (client
   change, 20 Aug 2026 — keeps the pill outline legible against the white page ground).
   !important: overrides Elementor's atomic base classes (same pattern as .s-values-track). */
html body [data-id*="-accordion-item-"]{background:color-mix(in srgb,var(--accent) 9%,transparent) !important;border:1px solid var(--border) !important;transition:background-color .3s,border-color .3s;}
html body [data-id*="-accordion-item-"].is-open{background:var(--card) !important;border-color:var(--border) !important;}
/* 9 Oct 2026, user: an accordion never shares its section's ground. Closed = a 9% sage wash (translucent,
   so it reads on cream, white or tinted bands alike, like the other washes); open = white card. On a band
   that is itself white, bp-home.js tags the list `acc-on-white` and the open card takes cream instead. */
html body [data-id*="-accordion-item-"].acc-on-white.is-open{background:var(--surface) !important;}

/* Question — Nunito to match the handoff's accordion heading. The toggle is a flex row with
   align-items:center, so the question and the chip share one centre line (the old 3px nudge
   pushed the text below it, removed 9 Oct 2026). */
html body [data-id*="-accordion-question-"]{font-family:'Nunito',serif !important;font-weight:500 !important;font-size:26px !important;line-height:1.2 !important;letter-spacing:0 !important;}

/* +/- toggle — circular chip, neutral closed / accent open */
html body [data-id*="-accordion-icon-"]{width:34px !important;height:34px !important;display:flex !important;align-items:center !important;justify-content:center !important;border-radius:var(--radius-full,100%) !important;background:var(--surface) !important;color:var(--ink) !important;font-size:18px !important;line-height:1 !important;flex:0 0 auto !important;transition:background-color .3s,color .3s;}
html body [data-id*="-accordion-item-"].is-open [data-id*="-accordion-icon-"]{background:var(--accent) !important;color:var(--bg) !important;}
@media (prefers-reduced-motion: reduce){html body [data-id*="-accordion-item-"],html body [data-id*="-accordion-icon-"]{transition:none;}}

/* Program badges — sage outline icons (real assets, attachments 183/184) */
[data-id="badge-extended-day"],[data-id="badge-summer-camp"]{display:inline-flex;align-items:center;gap:8px;}
[data-id="badge-extended-day"]::before,[data-id="badge-summer-camp"]::before{content:"";flex:0 0 auto;width:20px;height:20px;background:center/contain no-repeat;}
[data-id="badge-extended-day"]::before{background-image:url(/wp-content/uploads/bp/icons/bp-icon-stopwatch.svg);}
[data-id="badge-summer-camp"]::before{background-image:url(/wp-content/uploads/bp/icons/bp-icon-swing.svg);}

/* Badge icons sit in a muted-sage circular chip, matching the card/fact icon chips */
[data-id="badge-extended-day"]::before,[data-id="badge-summer-camp"]::before{width:28px;height:28px;padding:5px;box-sizing:border-box;border-radius:var(--radius-full,100%);background-color:rgba(71,97,13,.10);background-origin:content-box;}

/* Accordion at the mobile tier: the 26px Nunito question inside the 40px-padded
   toggle wraps one word per line at 375 (measured on /our-approach/, 29 Aug 2026).
   Step the question down and pull the side padding in; answers follow the inset. */
@media (max-width:767px){
  html body [data-id*="-accordion-question-"]{font-size:21px !important;}
  html body [data-id*="-accordion-toggle-"]{padding-left:20px !important;padding-right:20px !important;}
  html body [data-id*="-accordion-answer-"] p{padding-left:20px !important;padding-right:20px !important;}
}

/* Facts row icons (4 Sep 2026): each glyph now carries its own brand family instead of
   the uniform sage chip — mask-recolor technique from About's Philosophy cards (glyph
   painted via background-color through a mask of its own SVG; chip is a ::before on the
   fact wrapper because the icon widget renders as a bare <img>, no room for its own chip
   + glyph colors at once). fact-N is already position:relative + align-items:center. */
html body [data-id="fact-1"],html body [data-id="fact-2"],html body [data-id="fact-3"],html body [data-id="fact-4"]{position:relative;}
/* fact-N padding is asymmetric (20px start / 0 end, the column-divider gap) — absolute
   insets resolve against the padding box while the icon's flex centering resolves against
   the content box, so the chip needs the same +10px/+4px correction the icon gets for free. */
html body [data-id="fact-1"]::before,html body [data-id="fact-2"]::before,html body [data-id="fact-3"]::before,html body [data-id="fact-4"]::before{content:"";position:absolute;inset-block-start:4px;inset-inline-start:calc(50% + 10px);transform:translateX(-50%);width:56px;height:56px;border-radius:var(--radius-full,100%);background-color:var(--bp-icon-chip);}
html body [data-id$="-icon"][data-id^="fact-"]{position:relative;z-index:1;padding:0 !important;background-color:var(--bp-icon-ink) !important;-webkit-mask:var(--bp-icon) center/32px 32px no-repeat;mask:var(--bp-icon) center/32px 32px no-repeat;}
html body [data-id="fact-1"]{--bp-icon-chip:var(--fam-coral-chip);--bp-icon-ink:var(--fam-coral-ink);} /* Coral */
html body [data-id="fact-1-icon"]{--bp-icon:url("/wp-content/uploads/bp/icons/bp-icon-baby.svg");}
html body [data-id="fact-2"]{--bp-icon-chip:var(--fam-tan-chip);--bp-icon-ink:var(--fam-tan-ink);} /* Warm Tan */
html body [data-id="fact-2-icon"]{--bp-icon:url("/wp-content/uploads/bp/icons/bp-icon-clock.svg");}
html body [data-id="fact-3"]{--bp-icon-chip:var(--fam-sage-chip);--bp-icon-ink:var(--fam-sage-ink);} /* Sage */
html body [data-id="fact-3-icon"]{--bp-icon:url("/wp-content/uploads/bp/icons/bp-icon-school.svg");}
html body [data-id="fact-4"]{--bp-icon-chip:var(--fam-teal-chip);--bp-icon-ink:var(--fam-teal-ink);} /* Teal Blue */
html body [data-id="fact-4-icon"]{--bp-icon:url("/wp-content/uploads/bp/icons/bp-icon-calendar.svg");}

/* Why Families cards (4 Sep 2026): each icon now matches its own card's band family
   (chip=Tint4, glyph=Shade1 — one step either side of the card's Tint5 ground, same rule
   as About's Philosophy cards) instead of the uniform sage chip. Card padding is uniform
   32px on all sides, so the chip sits at a fixed inset — no divider-padding correction
   needed here, unlike the facts row. */
html body [data-id="why-card-1"],html body [data-id="why-card-2"],html body [data-id="why-card-3"],html body [data-id="why-card-4"]{position:relative;}
html body [data-id="why-card-1"]::before,html body [data-id="why-card-2"]::before,html body [data-id="why-card-3"]::before,html body [data-id="why-card-4"]::before{content:"";position:absolute;inset-block-start:32px;inset-inline-start:32px;width:64px;height:64px;border-radius:var(--radius-full,100%);background-color:var(--bp-icon-chip);}
html body [data-id$="-icon"][data-id^="why-card-"]{position:relative;z-index:1;padding:0 !important;background-color:var(--bp-icon-ink) !important;-webkit-mask:var(--bp-icon) center/38px 38px no-repeat;mask:var(--bp-icon) center/38px 38px no-repeat;}
html body [data-id="why-card-1"]{--bp-icon-chip:var(--fam-tan-chip);--bp-icon-ink:var(--fam-tan-ink);} /* Warm Tan — card ground is band-tan */
html body [data-id="why-card-1-icon"]{--bp-icon:url("/wp-content/uploads/bp/icons/bp-icon-creativity.svg");}
html body [data-id="why-card-2"]{--bp-icon-chip:var(--fam-teal-chip);--bp-icon-ink:var(--fam-teal-ink);} /* Teal Blue — card ground is band-teal */
html body [data-id="why-card-2-icon"]{--bp-icon:url("/wp-content/uploads/bp/icons/bp-icon-coaching.svg");}
html body [data-id="why-card-3"]{--bp-icon-chip:var(--fam-coral-chip);--bp-icon-ink:var(--fam-coral-ink);} /* Coral — card ground is band-coral */
html body [data-id="why-card-3-icon"]{--bp-icon:url("/wp-content/uploads/bp/icons/bp-icon-meal.svg");}
html body [data-id="why-card-4"]{--bp-icon-chip:var(--fam-sage-chip);--bp-icon-ink:var(--fam-sage-ink);} /* Sage — card ground is band-sage */
html body [data-id="why-card-4-icon"]{--bp-icon:url("/wp-content/uploads/bp/icons/bp-icon-schedule.svg");}

/* Accordion collapse wrappers carry no class and no builder padding, so Elementor's 10px atomic
   default leaked into every answer on every page (bp-eval noPad, 4 Sep 2026). Zero it once here;
   the answer's own inset comes from the accordion-answer global class. */
html body [data-id*="-accordion-collapse-"]{padding:0 !important;}

/* Home audit fixes (14 Sep 2026). */
/* H1 line-height now carried by the builder at the declared 1.1 (15 Sep 2026); the 1.05
   !important patch that compensated for the old 0.95 compile is removed. */
/* Program cards: text column fills the row so chip + button pin to the bottom and the four
   cards' actions sit level regardless of body length. */
html body .elementor [data-id="program-row-1"],html body .elementor [data-id="program-row-2"],
html body .elementor [data-id="program-row-3"],html body .elementor [data-id="program-row-4"]{align-items:stretch;grid-template-rows:auto minmax(0,1fr);}
html body .elementor [data-id^="program-row-"][data-id$="-text"]{display:flex;flex-direction:column;}
html body .elementor [data-id^="program-row-"][data-id$="-meta"]{margin-top:auto;padding:18px 0 0 !important;} /* 29 Sep 2026: explicit sides, the atomic 10px default was insetting the button */
@media (max-width:767px){
  /* Welcome copy: 12 centred lines at 17px is the hardest read on the page. */
  html body .elementor [data-id="hero-content"],html body .elementor [data-id="hero-content"] *{text-align:left !important;}
}

/* Revision plan P2-03 (29 Sep 2026). Hero: the new photo runs full screen, edge to edge with no
   corner radius (client request 29 Sep, replaces the inset rounded panel). It starts under the
   transparent header, so nav type never sits on the photo, and fills the rest of the first screen.
   It drifts on scroll via bp-motion.js pattern 9
   (.parallax-media on hero-art; nothing moves under reduced motion). The image is 120% of the panel
   and starts 10% above it, so the +/-8% travel never shows an edge. Copy sits on the #F5ECD8 @65%
   scrim with ink type (non-negotiable 6). */
html body .elementor [data-id="hero"]{padding:92px 0 0 !important;} /* 92px = header overlay (site-header ends 131px, banner 39px) */
html body .elementor [data-id="hero-inner"]{
  overflow:hidden;isolation:isolate;border-radius:0;width:100%;max-width:none !important;
  min-height:max(560px,calc(100svh - 131px));align-items:center;
  padding:56px max(32px,calc((100% - 1266px) / 2)) !important; /* copy keeps the site's content edge */
}
html body .elementor [data-id="hero-art"]{
  position:absolute;left:0;top:-20%;z-index:0;width:100% !important;max-width:none !important;
  height:140% !important;object-fit:cover !important;object-position:65% 50%;align-self:auto;--par:14;
}
/* 29 Sep: the rounded scrim box is gone; a Cream Tint 1 (#F5ECD8, NN6) gradient washes in from the
   left behind the copy instead, fading to clear over the photo. */
html body .elementor [data-id="hero-inner"]::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(245,236,216,.92) 0%,rgba(245,236,216,.8) 30%,rgba(245,236,216,.4) 55%,rgba(245,236,216,0) 78%);
}
html body .elementor [data-id="hero-copy"]{
  position:relative;z-index:2;max-width:560px;padding:0 !important;background:none;
}
html body .elementor [data-id="hero-title"]{white-space:normal;font-size:56px !important;letter-spacing:-0.02em !important;} /* brand kit Display */
.s-hero-ages{color:var(--label-green,#4B5F4F);} /* revised palette 29 Sep 2026: label green, 5.3:1+ on every ground */
@media (max-width:1024px){
  html body .elementor [data-id="hero-inner"]{padding:32px !important;min-height:max(520px,calc(100svh - 131px));}
  html body .elementor [data-id="hero-title"]{font-size:46px !important;}
}
@media (max-width:767px){
  html body .elementor [data-id="hero-inner"]{padding:16px 16px calc(max(480px,100svh - 131px)*.2) !important;min-height:max(480px,calc(100svh - 131px));align-items:stretch;justify-content:flex-end;}
  html body .elementor [data-id="hero-inner"]::before{background:linear-gradient(0deg,rgba(245,236,216,.92) 0%,rgba(245,236,216,.8) 45%,rgba(245,236,216,0) 85%);}
  html body .elementor [data-id="hero-title"]{font-size:36px !important;}
}

/* Welcome: the client's statement closes on its sign-off line. */
html body .elementor [data-id="hero-sub-close"]{
  font-family:Nunito, sans-serif;font-weight:500;font-size:26px;line-height:1.25;color:var(--heading-warm,#47331F);margin-top:20px !important;
}
@media (max-width:767px){html body .elementor [data-id="hero-sub-close"]{font-size:21px;}}

/* 30 Sep 2026 critique. (1) Welcome lede: the builder class sets 93ch (~120 characters a line at
   desktop); cap at 77ch (was 62ch; widened 6 Oct). (2) The sign-off repeats the H1's words, so it reads as a sign-off, not a
   second headline: smaller, semibold, navy, with air and a short hairline above. */
html body .elementor [data-id="hero-sub"],
html body .elementor [data-id="hero-sub-close"]{max-width:77ch;}
html body .elementor [data-id="hero-sub-close"]{
  position:relative;padding-top:32px !important;margin-top:24px !important;
  font-size:22px;font-weight:600;color:var(--navy,#2E4359);
}
html body .elementor [data-id="hero-sub-close"]::before{
  content:"";position:absolute;top:0;left:50%;width:48px;height:1px;translate:-50% 0;background:rgba(75,95,79,.35);
}
@media (max-width:767px){
  html body .elementor [data-id="hero-sub-close"]{font-size:19px;}
  html body .elementor [data-id="hero-sub-close"]::before{left:0;translate:none;} /* phone Welcome is left-aligned */
  /* Phone hero: the full-bleed cover crop showed only defocused blocks and a sleeve. The photo now
     fills the top half, anchored on the reaching hand, and fades into the cream under the copy. */
  html body .elementor [data-id="hero-art"]{
    top:0;height:52% !important;object-position:74% 55%;
    -webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent);
  }
}

/* Program highlights: four tiles in one row (client draft, PDF p.4) with oval photos
   (revision plan); two up on tablet, one on phones. 2x2 on desktop = change the first
   repeat(4 to repeat(2. Photo leads each card. */
@media (min-width:1200px){
  html body .elementor [data-id="programs-grid"]{grid-template-columns:repeat(4,minmax(0,1fr)) !important;gap:20px !important;}
  html body .elementor .s-programs-grid > [data-id^="program-row-"]{padding:24px !important;--card-pad:24px;}
  html body .elementor [data-id^="program-row-"][data-id$="-h3"]{font-size:22px !important;text-wrap:balance;}
}
@media (min-width:768px) and (max-width:1199px){
  html body .elementor [data-id="programs-grid"]{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
}
/* The oval is a shape, not a nesting case, so it outranks bp-base.css's nested-radius rule
   (same selector plus one attribute). */
html body .elementor .s-programs-grid > [data-id^="program-row-"] [data-id$="-img"][data-id^="program-row-"]{
  aspect-ratio:5 / 4 !important;border-radius:50% !important;object-fit:cover;
}
/* Locations sits on Band Teal #EDF1F5 (30 Sep 2026 critique): with the testimonials gone Programs
   and Locations were one 2,000px white run, so the second takes its own ground and padding. */
html body .elementor [data-id="locations"]{background-color:#EDF1F5;}
/* The Gowanus card was Band Teal itself; one ramp step down (Blue Tint 4) keeps it a card on the new ground. */
html body .elementor [data-id="location-card-gowanus"]{background-color:#DBE4EC;}

/* Brand kit 2026: the welcome's second line is a tagline (Nunito Semibold 21, green). It was set
   in the border tint (~1.9:1, the open "line-2 contrast" audit item); Main Green Shade 1 is 5.2:1+. */
/* Revised palette (29 Sep 2026, images/revised palette.pdf): the welcome heading is the warm
   heading brown, its sub-line copper; the founding-form title takes heading ink. Copper holds only
   large text, so the phone size goes to 700 (19px bold qualifies as large). */
html body .elementor [data-id="hero-h1"]{color:var(--heading-warm,#47331F) !important;}
html body .elementor .s-founding-form-h3{color:var(--ink,#211910) !important;}
html body .elementor [data-id="hero-h1-line2"]{color:var(--copper,#A2724E) !important;font-weight:600 !important;font-size:24px !important;}
@media (max-width:767px){html body .elementor [data-id="hero-h1-line2"]{font-size:19px !important;font-weight:700 !important;}}

/* 30 Sep 2026 critique: the location buttons are the page's equal pair, so neither may wrap alone
   ("Visit Brooklyn Heights" ran two lines at 1330 next to a one-line "Visit Gowanus"). */
html body .elementor :is([data-id="gowanus-link"], [data-id="heights-link"]) { white-space: nowrap; }

/* 30 Sep 2026 critique, P2 round.
   Sticky bar: its sage ground (#EEF2EF) was the Highlights band's, so it vanished over that band.
   White with its hairline reads as a bar over every ground. */
html body .elementor .s-sticky-cta{background-color:#FFFFFF;}

/* Consent links (form + footer) were 27px tall. Padding widens the hit area to 45px (they already carried 3px); the matching
   negative margin keeps the line box where it was. */
html body .elementor p a:is([href*="/privacy"], [href*="/terms"]){padding-block:12px !important;margin-block:-12px !important;}

/* One phone gutter: 16px from the edge for every section and its content (the hero's own edge).
   Sections were 15/25/45/35px because each inner container added its own 10px on top. */
@media (max-width:767px){
  html body .elementor :is([data-id="facts"], [data-id="curriculum-band"], [data-id="school-highlights"], [data-id="programs"], [data-id="locations"], [data-id="founding"]){padding-inline:16px !important;}
  html body .elementor :is([data-id="programs-inner"], [data-id="programs-header"], [data-id="programs-header-text"], [data-id="programs-grid"], [data-id="locations-inner"], [data-id="locations-header"], [data-id="locations-grid"], [data-id="founding-inner"], [data-id="founding-text"], [data-id="hero-content"]){padding-inline:0 !important;}
  /* Phone length: the oval photo was 280 x 224 full-width, four times over. */
  html body .elementor .s-programs-grid > [data-id^="program-row-"] [data-id$="-img"][data-id^="program-row-"]{width:min(100%, 232px) !important;}
}

/* 30 Sep 2026: Home program cards — age range is its own line under the name; one step smaller on phones where the name is 20px */
@media (max-width:767px){html body .elementor [data-id^="program-row-"][data-id$="-age"]{font-size:17px;}}

/* Hero video (16 Oct 2026, user request; DECISIONS 2026-10-16). Same box as hero-art, drifts with it
   (.parallax-media). Hidden under 768px, where hero-art (the clip's last frame) is the hero. */
html body .elementor [data-id="hero-video"],
html body .elementor [data-id="hero-clouds"]{
  display:none;position:absolute;left:0;top:-20%;z-index:0;width:100% !important;max-width:none !important;
  height:140% !important;aspect-ratio:auto;--par:14;object-fit:cover;object-position:65% 50%;
}
@media (min-width:768px){html body .elementor [data-id="hero-video"],html body .elementor [data-id="hero-clouds"]{display:block;}}
/* Cloud doodle overlay (16 Oct 2026): the pack's white-on-black strokes re-rendered Main Green #52815F on
   white (thickened 2px, hero-clouds.mp4), so multiply drops the white and leaves green line work over the
   photo. Loops forever while hero-video holds its last frame; same box as the hero video so both stay registered. */
/* 16 Oct 2026, v2: the overlay frame is scaled to half the hero width and anchored bottom-right so the line
   work fills about the bottom 30% of the hero (it spanned 50%+ at full size). No parallax on it. */
html body .elementor [data-id="hero-clouds"]{
  mix-blend-mode:multiply;left:auto;right:0;top:auto;bottom:0;width:50% !important;height:auto !important;
  aspect-ratio:16/9;object-fit:contain;
}
@media (max-width:1024px){html body .elementor [data-id="hero-clouds"]{width:62% !important;}}