/* ===================== Design tokens ===================== */
:root{
  --teal: #1E9C97;
  --teal-dark: #14726F;
  --teal-light: #E4F4F2;
  --orange: #FF6A1A;
  --orange-dark: #D2570C;
  --black: #22201C;
  --cream: #F6EFDC;
  --cream-2: #EFE5C9;
  --white: #FFFFFF;
  --wood: #C68B4F;
  --wood-dark: #8A5A2E;
  --metal: linear-gradient(135deg, #F2F2F0 0%, #D8D8D4 45%, #F8F8F6 55%, #C7C7C2 100%);
  --grid-line: rgba(30,156,151,0.13);

  --font-head: "Baloo 2", "Nunito", sans-serif;
  --font-body: "Nunito", sans-serif;
  --font-mono: "JetBrains Mono", "Courier New", monospace;

  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --shadow-soft: 0 12px 30px rgba(34,32,28,0.10);
  --shadow-pop: 0 6px 0 var(--black);
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; overflow-x: hidden; }
body{
  margin:0;
  overflow-x: hidden;
  font-family: var(--font-body);
  color: var(--black);
  background:
    radial-gradient(var(--grid-line) 1.4px, transparent 1.4px) 0 0/28px 28px,
    var(--cream);
  line-height: 1.55;
}
h1,h2,h3,h4{
  font-family: var(--font-head);
  line-height: 1.15;
  margin: 0 0 .5em;
  font-weight: 700;
}
p{ margin: 0 0 1em; }
a{ color: var(--teal-dark); text-decoration: none; }
img,svg{ max-width: 100%; display:block; }
.container{ width:100%; max-width: 1160px; margin: 0 auto; padding: 0 24px; }
section.section{ padding: 88px 0; }
.eyebrow{
  display:inline-block;
  font-weight: 800;
  color: var(--orange-dark);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: .85rem;
  margin-bottom: .6em;
}
.section-head{ max-width: 640px; margin: 0 auto 48px; text-align:center; }
.section-head h2{ font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
.section-sub{ color:#5b564c; font-size: 1.05rem; }
.section-head-left{ margin: 0 0 44px; text-align:left; max-width: 640px; }

/* ===================== Buttons ===================== */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 800;
  font-family: var(--font-head);
  font-size: 1rem;
  cursor:pointer;
  border: 3px solid var(--black);
  transition: transform .15s ease, box-shadow .15s ease;
  box-shadow: var(--shadow-pop);
}
.btn:hover{ animation: wobble .4s ease; }
.btn:active{ transform: translateY(2px); box-shadow: 0 2px 0 var(--black); }
.btn-primary{ background: var(--orange); color: var(--black); }
.btn-ghost{ background: var(--cream); color: var(--black); }
.btn-icon{ display:inline-flex; align-items:center; gap:8px; }
@keyframes wobble{ 0%,100%{ transform: translateY(-2px) rotate(0); } 25%{ transform: translateY(-2px) rotate(-2deg); } 75%{ transform: translateY(-2px) rotate(2deg); } }

/* ===================== Header ===================== */
.site-header{
  /* position:fixed, not sticky — sticky silently stops working once an
     ancestor's overflow-x:hidden forces its overflow-y to auto (needed
     elsewhere to kill a real horizontal-scroll bug), which happens on
     body/html here. fixed doesn't depend on any ancestor's overflow. */
  position: fixed; top:0; left:0; right:0; z-index: 50;
  background: rgba(251,246,236,0.92);
  backdrop-filter: blur(6px);
  border-bottom: 3px solid var(--black);
}
.header-inner{
  display:flex; align-items:center; justify-content: space-between;
  padding: 12px 24px;
  gap: 16px;
}
/* Compensates for .site-header now being position:fixed (removed from
   flow) instead of sticky — without this, page content starts at y:0 and
   hides behind the header. */
main#top{ padding-top: 66px; }
.logo{ display:flex; align-items:center; gap:10px; }
.logo-img{
  display:block; height: 34px; width:auto;
  background: var(--black); border-radius: 10px; padding: 8px 12px;
}
@media (max-width: 480px){
  .logo-img{ height: 26px; padding: 6px 9px; }
}
.logo-word{ font-family: var(--font-head); font-weight: 800; font-size: 1.4rem; letter-spacing: .01em; }
.logo-word.small{ font-size: 1.15rem; }
.lw{ display:inline-block; }
.lw.c1{ color: var(--teal-dark); }
.lw.c2{ color: var(--orange-dark); }
.lw.c3{ color: var(--black); }

.main-nav{ display:flex; align-items:center; gap: 28px; }
.main-nav a{ color: var(--black); font-weight:700; font-size:.98rem; }
.main-nav a:hover{ color: var(--teal-dark); }
.nav-cta{
  background: var(--teal); color: var(--white) !important;
  padding: 9px 20px; border-radius: 999px; border: 2.5px solid var(--black);
}

.header-actions{ display:flex; align-items:center; gap:14px; }
.header-contact-link{ font-weight:700; font-size:.85rem; color: var(--black); white-space:nowrap; }
.header-contact-link:hover{ color: var(--teal-dark); }
@media (max-width: 920px){
  .header-contact-email{ display:none; }
}
@media (max-width: 760px){
  .header-contact-link{ display:none; }
}
.lang-switch{ display:flex; align-items:center; gap:6px; font-family: var(--font-mono); font-weight:700; font-size:.85rem; letter-spacing:.04em; }
.lang-btn{ background:none; border:none; cursor:pointer; padding:4px 6px; color:#8a8377; font-family:inherit; font-weight:inherit; font-size:inherit; }
.lang-btn.active{ color: var(--black); text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.lang-sep{ color:#c9c2b2; }

.burger{ display:none; flex-direction:column; justify-content:center; gap:5px; width:38px; height:34px; background:none; border:none; cursor:pointer; }
.burger span{ display:block; height:3px; border-radius:2px; background: var(--black); }

/* ===================== Hero ===================== */
.hero{ padding-top: 56px; padding-bottom: 40px; overflow:hidden; position:relative; }
.hero-inner{ display:grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items:center; position:relative; z-index:1; }

/* Scattered playful doodles behind the hero copy/art, purely decorative. */
.hero-doodles{ position:absolute; inset:0; pointer-events:none; z-index:0; }
.hero-doodles svg{ position:absolute; height:auto; }
.doodle-teal{ color: var(--teal); opacity:.55; }
.doodle-orange{ color: var(--orange); opacity:.6; }
.doodle-1{ top:8%; left:4%; width:34px; animation: doodle-float 6s ease-in-out infinite; }
.doodle-2{ top:18%; left:44%; width:20px; animation: doodle-float 5s ease-in-out infinite .4s; }
.doodle-3{ top:64%; left:2%; width:26px; animation: doodle-float 7s ease-in-out infinite 1s; }
.doodle-4{ top:4%; right:6%; width:22px; animation: doodle-spin 12s linear infinite; }
.doodle-5{ top:46%; right:2%; width:30px; animation: doodle-float 6.5s ease-in-out infinite .6s; }
.doodle-6{ bottom:6%; left:30%; width:18px; animation: doodle-float 5.5s ease-in-out infinite .2s; }
@keyframes doodle-float{ 0%,100%{ transform: translateY(0) rotate(0); } 50%{ transform: translateY(-10px) rotate(8deg); } }
@keyframes doodle-spin{ to{ transform: rotate(360deg); } }
@media (max-width: 760px){
  .doodle-2, .doodle-5{ display:none; }
}
.hero-sub{ font-size: 1.1rem; color:#4d473c; max-width: 46ch; }
.hero h1{ font-size: clamp(2.4rem, 5vw, 3.6rem); text-transform:uppercase; letter-spacing:.01em; }
.hero h1 .accent{ color: var(--teal-dark); }
.eyebrow-2line{ line-height:1.35; }
.eyebrow-2line span:first-child{ color: var(--black); }
.eyebrow-2line span:last-child{ color: var(--orange-dark); }

.hero-copy > *{ opacity:0; animation: rise .6s ease forwards; }
.hero-copy > .eyebrow-2line{ animation-delay: .05s; }
.hero-copy > h1{ animation-delay: .15s; }
.hero-copy > .hero-sub{ animation-delay: .28s; }
.hero-copy > .value-list{ animation-delay: .4s; }
.hero-copy > .hero-ctas{ animation-delay: .52s; }
.hero-art{ opacity:0; animation: rise .7s ease forwards .3s; }
@keyframes rise{ from{ opacity:0; transform: translateY(16px); } to{ opacity:1; transform: translateY(0); } }

.value-list{ list-style:none; padding:0; margin: 22px 0 28px; display:flex; flex-direction:column; gap:14px; }
.value-list li{ display:flex; align-items:center; gap:14px; font-weight:800; font-family: var(--font-head); font-size:1.05rem; }
.value-ic{ width:34px; height:34px; flex-shrink:0; color: var(--teal-dark); }
.value-list li:nth-child(2) .value-ic{ color: var(--orange-dark); }
.value-ic svg{ width:100%; height:100%; }

.hero-ctas{ display:flex; flex-wrap:wrap; gap: 14px; }
.btn-arrow{ position:relative; }

.hero-art{ position:relative; }
.robot-svg{ width:100%; height:auto; }
.gear-spin{ transform-origin:center; animation: spin 14s linear infinite; }
.gear-2{ animation-duration: 10s; animation-direction: reverse; }
@keyframes spin{ to{ transform: rotate(360deg); } }

/* ---- image placeholders ---- */
.img-placeholder{
  position: relative; overflow: hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  gap:10px; border: 3px dashed var(--teal-dark); border-radius: var(--radius-lg);
  background: var(--teal-light); color: var(--teal-dark);
  padding: 40px 24px;
}
.ph-instructions{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.img-placeholder .ph-icon{ width:44px; height:44px; }
.img-placeholder .ph-icon svg{ width:100%; height:100%; }
.img-placeholder strong{ font-family: var(--font-head); font-size:1.05rem; }
.img-placeholder span{ font-size:.85rem; max-width: 32ch; color:#3d7d7a; }
.hero-placeholder{ aspect-ratio: 4/3.4; }
.module-placeholder{ aspect-ratio: 16/10; margin: 0 0 14px; padding: 20px 16px; }
.module-placeholder .ph-icon{ width:32px; height:32px; }
.module-placeholder .ph-instructions span{ font-size:.78rem; }

.editable-img{
  /* Width/height/left/top are normally set inline (in % of the frame) by
     edit-mode.js / save.php, computed from the image's true pixel
     proportions so zooming out can gap top/bottom without ever gapping
     left/right — these class defaults are only a fallback for images
     saved before that format existed (plain object-position, no
     width/height/left/top), which the inline style below overrides once
     re-saved. Frame must keep a fixed aspect-ratio (see .hero-placeholder)
     for the inline percentages to stay valid responsively. */
  position:absolute; inset:0; width:100%; height:100%;
  object-fit: cover; object-position: 50% 50%;
}
/* "has an image" is derived purely from the img's own src/hidden state —
   no separate class to keep in sync between JS and the save.php writer. */
.img-placeholder:has(.editable-img[src]:not([hidden])){ border-style: solid; padding:0; }
.img-placeholder:has(.editable-img[src]:not([hidden])) .ph-instructions{ display:none; }

body.edit-mode-active .img-placeholder{ cursor: pointer; }
body.edit-mode-active .img-placeholder:hover{ outline: 3px solid var(--teal); outline-offset: 2px; }
body.edit-mode-active .img-placeholder:has(.editable-img[src]:not([hidden])) .editable-img{ cursor: grab; touch-action: none; }
body.edit-mode-active .img-placeholder:has(.editable-img[src]:not([hidden])) .editable-img:active{ cursor: grabbing; }

.edit-img-overlay{
  position:absolute; inset:0; z-index:2; display:none; align-items:center; justify-content:center;
  background: rgba(20,114,111,0.75); color: var(--white); font-family: var(--font-head);
  font-weight:700; border-radius: inherit; text-align:center; padding: 12px;
}
body.edit-mode-active .img-placeholder:not(:has(.editable-img[src]:not([hidden]))):hover .edit-img-overlay{ display:flex; }

.img-pan-zoom[hidden]{ display:none; }
.img-pan-zoom{
  position:absolute; bottom:10px; left:50%; transform: translateX(-50%); z-index:3;
  display:flex; align-items:center; gap:8px; background: rgba(0,0,0,0.65);
  padding: 6px 10px; border-radius: 999px;
}
.pz-btn{
  width:28px; height:28px; border-radius:50%; border:none; background: var(--white);
  color: var(--black); font-weight:800; font-size:1.1rem; line-height:1; cursor:pointer;
}
.pz-hint{ color: var(--white); font-size:.75rem; font-weight:600; white-space:nowrap; }
body.edit-mode-active .img-placeholder:has(.editable-img[src]:not([hidden])):hover .img-pan-zoom{ display:flex !important; }
.sticker-badge{
  position:absolute; top:-14px; right:-6px; width:120px; height:120px; border-radius:50%;
  background: var(--teal); color: var(--white); border: 3px solid var(--black);
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-family: var(--font-head); font-weight:800; font-size:.85rem; line-height:1.25;
  transform: rotate(8deg); box-shadow: var(--shadow-soft);
  animation: bob 4s ease-in-out infinite;
}
@keyframes bob{ 0%,100%{ transform: rotate(8deg) translateY(0); } 50%{ transform: rotate(4deg) translateY(-8px); } }

/* ===================== What kids do ===================== */
.kidsdo{ padding-top: 56px; padding-bottom: 56px; }
.kidsdo .section-head{ margin-bottom: 32px; }
.kidsdo-row{ display:flex; flex-wrap:wrap; justify-content:center; gap: 30px; }
.kidsdo-item{ display:flex; flex-direction:column; align-items:center; gap:10px; width: 150px; text-align:center; }
.kidsdo-ic{
  width:64px; height:64px; border-radius:50%; background: var(--white);
  border:3px solid var(--black); display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-soft);
}
.kidsdo-item span{ font-weight:800; font-family: var(--font-head); font-size:.85rem; letter-spacing:.01em; text-transform:uppercase; }

.promo-banner{
  background: var(--black); color: var(--cream); margin-top: 48px; position:relative; z-index:1;
  overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.promo-banner::-webkit-scrollbar{ display:none; }
.promo-track{
  display:flex; width: max-content;
  animation: marquee 22s linear infinite;
}
/* Swiping the banner (touch or trackpad) hands control to native scroll
   for as long as the finger/pointer is down, so someone who wants to
   read ahead faster isn't stuck waiting on the fixed marquee speed. */
.promo-banner.promo-manual .promo-track{ animation-play-state: paused; }
.promo-set{
  display:flex; align-items:center; gap: 14px; flex-shrink:0;
  padding: 14px 40px; white-space:nowrap;
  font-weight:700; font-size:.98rem;
}
@keyframes marquee{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
@media (max-width: 760px){
  .promo-track{ animation-duration: 11s; }
}
.promo-badge{
  background: var(--orange); color: var(--black); font-family: var(--font-mono);
  font-weight:700; padding: 3px 12px; border-radius: 999px; font-size:.9rem;
}
.promo-link{ color: var(--cream); text-decoration: underline; text-decoration-color: var(--teal); text-underline-offset:3px; font-weight:800; }

/* ===================== Edison ===================== */
.edison{ background: var(--teal-light); }
.edison-inner{ display:grid; grid-template-columns: .8fr 1.2fr; gap:48px; align-items:center; }
.edison-placeholder{ aspect-ratio: 4/3.4; }
.tick-list{ list-style:none; padding:0; margin: 18px 0 0; display:flex; flex-direction:column; gap:10px; }
.tick-list li{ display:flex; align-items:center; gap:10px; font-weight:700; }
.tick-list li::before{
  content:""; width:22px; height:22px; flex-shrink:0; border-radius:50%;
  background: var(--teal); border:2px solid var(--black);
}

/* FER/Rimac credibility line: a real, specific trust signal, so it gets
   the same visual weight as a stat card (white, bordered, dark ink)
   instead of blending into the section like a muted footnote. */
.credibility-line{
  grid-column: 1/-1; margin: 28px 0 0; padding: 18px 24px;
  background: var(--white); border: 3px solid var(--black); border-radius: var(--radius-md);
  color: var(--black); font-weight: 600; font-size: 1rem; text-align:center;
  box-shadow: var(--shadow-soft);
}
.credibility-line strong{ color: var(--teal-dark); font-weight: 800; }

/* ===================== Gallery: 3 independent mini-carousels ===================== */
/* Each of the 3 photo frames cycles through its own 3 images independently
   (own timer, own dots, own drag) - not one big block sliding together. */
.gallery-cells{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.gallery-cell{ position:relative; aspect-ratio: 4/3; overflow:hidden; touch-action: pan-y; }
.gallery-placeholder{ padding: 24px 16px; }
.gallery-frame-slot{
  position:absolute; inset:0; margin:0;
  transition: transform .4s ease;
}
.gallery-frame-slot.no-transition{ transition:none; }
/* Pre-position round 2/3 off-frame so there's no flash of all 3 stacked
   before JS runs place() on load - JS then takes over positioning. */
.gallery-frame-slot[data-round="1"],
.gallery-frame-slot[data-round="2"]{ transform: translateX(100%); }
.gallery-cell-dots{
  position:absolute; bottom:10px; left:50%; transform:translateX(-50%); z-index:4;
  display:flex; gap:6px; background: rgba(0,0,0,.45); padding:5px 9px; border-radius:999px;
}
.gallery-cell-dot{
  width:7px; height:7px; border-radius:50%; padding:0; cursor:pointer;
  background:transparent; border: 1.5px solid rgba(255,255,255,.85);
}
.gallery-cell-dot.active{ background: var(--white); }
@media (prefers-reduced-motion: reduce){
  .gallery-frame-slot{ transition:none; }
}

.build-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 28px 24px; }
.build-card{
  position:relative;
  background: var(--white); border: 3px solid var(--black); border-radius: var(--radius-md);
  padding: 28px 26px 26px; box-shadow: var(--shadow-soft);
  transition: transform .2s ease, box-shadow .2s ease;
}
.build-card:nth-child(odd){ transform: rotate(-1.1deg); }
.build-card:nth-child(even){ transform: rotate(1.1deg); }
.build-card:hover{ transform: rotate(0deg) translateY(-4px); box-shadow: 0 16px 34px rgba(34,32,28,0.16); }
.build-card::before{
  content:""; position:absolute; top:-11px; left: 28px; width:52px; height:22px;
  transform: rotate(-4deg); opacity:.9;
  box-shadow: 0 2px 4px rgba(0,0,0,0.12);
}
.tape-orange::before{ background: var(--orange); }
.tape-teal::before{ background: var(--teal); transform: rotate(4deg); left:auto; right:28px; }
.tape-wood::before{ background: var(--wood); transform: rotate(4deg); left:auto; right:28px; }
.build-icon{
  position: relative; overflow: hidden;
  width:56px; height:56px; border-radius: 16px;
  background: color-mix(in srgb, var(--ic) 16%, white);
  display:flex; align-items:center; justify-content:center;
  margin-bottom: 14px; border: 2.5px solid var(--black);
}
/* Faint brushed-metal diagonal sheen behind each tool icon - a small nod
   to the workshop/hardware feel without leaning fully skeuomorphic. */
.build-icon::before{
  content:""; position:absolute; inset:-40% -10%;
  background: var(--metal); opacity:.5;
  transform: rotate(-18deg);
}
.build-icon svg{ position:relative; z-index:1; }
.build-card h3{ font-size: 1.1rem; margin-bottom:.35em; }
.build-card p{ color:#5b564c; font-size:.95rem; margin:0; }

/* ===================== Quick age pick (early teaser, before the full
   trust-building content) ===================== */
.quick-age-pick{ padding-top: 8px; padding-bottom: 8px; }
.build-grid-2{ grid-template-columns: repeat(2, 1fr); max-width: 760px; margin: 0 auto; }
.quick-pick-more{
  display:inline-block; margin-top:12px; font-weight:800; color: var(--teal-dark);
  text-decoration:none; border-bottom: 2px solid var(--teal-dark);
}
.quick-pick-more:hover{ color: var(--orange-dark); border-color: var(--orange-dark); }
@media (max-width: 640px){
  .build-grid-2{ grid-template-columns: 1fr; }
}

/* Module/age-band icons reuse the same editable-img/img-pan-zoom system
   as photos (edit-mode.js only looks for the generic .img-placeholder
   class), with two differences from a photo slot: the fallback SVG is
   the icon itself (not a "missing photo" dashed box - .build-icon
   already supplies that box's real look), and a swapped-in image uses
   object-fit:contain so an uploaded emoji/PNG isn't cropped like a photo
   would be.
   .build-icon needs overflow:hidden for its own metal-sheen ::before
   pseudo-element, which also clipped the zoom/change button bar -
   moving the bar below the box didn't help, since overflow:hidden clips
   anything outside the box regardless of where a child is positioned.
   So .img-placeholder (what edit-mode.js looks for) lives on a separate
   .icon-wrap that just holds position - .build-icon nests inside it
   unchanged (with its overflow:hidden intact) as the clipped visual box,
   and .img-pan-zoom is a sibling of .build-icon instead of a child of
   it, so it's outside anything that clips. */
/* .icon-wrap carries the .img-placeholder class (edit-mode.js needs it
   to find this element), which also pulls in that class's base decorative
   styles - dashed border, teal background, padding, and overflow:hidden -
   none of which belong here (.build-icon supplies the real look, and
   overflow:hidden here was silently re-clipping the pan-zoom bar again,
   the exact thing this whole restructure was meant to fix). Cancel them
   all explicitly rather than relying on selector-specificity tricks. */
.icon-wrap{
  position: relative; display: inline-flex;
  overflow: visible; border: none; background: none; padding: 0; gap: 0;
}
.icon-placeholder .ph-instructions{ width:100%; height:100%; }
.icon-placeholder .ph-icon{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.icon-placeholder .editable-img{ object-fit: contain; padding:6px; }
.icon-placeholder .edit-img-overlay{ font-size:1.1rem; padding:0; }
.icon-wrap .img-pan-zoom{
  bottom:auto; top:100%; margin-top:6px; transform: translateX(-50%) scale(.72);
  transform-origin: top center;
}

/* ===================== Program ===================== */
.program{ background: var(--cream-2); }
.process-row{ display:flex; align-items:center; justify-content:center; gap: 14px; flex-wrap:wrap; margin-bottom: 56px; }
.process-step{ display:flex; align-items:center; gap:10px; background: var(--white); border:3px solid var(--black); border-radius: 999px; padding: 10px 20px; font-weight:800; font-family: var(--font-head); }
.process-num{ width:28px; height:28px; border-radius:50%; background: var(--orange); border:2px solid var(--black); display:flex; align-items:center; justify-content:center; font-size:.9rem; }
/* .process-leg keeps an arrow glued to the step it points to as one flex
   item, so a row wrap can only happen between legs, never between an
   arrow and its step (which used to leave a dangling arrow at the end
   of a line when the row didn't all fit on one line). */
.process-leg{ display:flex; align-items:center; gap:14px; }
.process-arrow{ font-size:1.4rem; color: var(--teal-dark); font-weight:800; }

.program-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:24px; margin-bottom: 48px; }
.program-fact{
  text-align:center; background: var(--white); border:3px solid var(--black); border-radius: var(--radius-md); padding: 28px 18px;
  /* Grid stretches every card in a row to equal height already; centering
     content vertically means a card with less content (e.g. no CTA link)
     reads as intentionally simpler instead of leaving dead space at the
     bottom while its siblings' buttons sit lower. */
  display:flex; flex-direction:column; justify-content:center;
}
.fact-num{ font-family: var(--font-mono); font-size: 2.6rem; font-weight:700; color: var(--teal-dark); }
.program-fact p{ margin:0; font-weight:700; color:#4d473c; }

.schedule-box{ background: var(--white); border:3px solid var(--black); border-radius: var(--radius-lg); padding: 32px; text-align:center; box-shadow: var(--shadow-soft); }
.schedule-box h3{ margin-bottom:.2em; }
.schedule-box > p{ color:#5b564c; }
.schedule-slots{ display:flex; justify-content:center; gap:14px; flex-wrap:wrap; margin-top: 18px; }
.slot{ background: var(--teal); color:var(--white); font-weight:700; font-family: var(--font-mono); padding: 10px 20px; border-radius: 999px; border: 2.5px solid var(--black); }

/* ---- Info columns (details + why) ---- */
.info-columns{ display:grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 40px; }
.info-card{ background: var(--white); border:3px solid var(--black); border-radius: var(--radius-lg); padding: 30px; box-shadow: var(--shadow-soft); }
.info-card h3{ margin-bottom: 20px; }
.detail-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px; }
.detail-list li{ display:flex; gap:14px; align-items:flex-start; }
.detail-ic{ width:26px; height:26px; flex-shrink:0; color: var(--teal-dark); margin-top:2px; }
.detail-ic svg{ width:100%; height:100%; }
.detail-list li div{ display:flex; flex-direction:column; }
.detail-list li strong{ font-family: var(--font-head); font-size:.92rem; }
.detail-list li span{ color:#5b564c; font-size:.92rem; }
.why-card .tick-list{ margin-bottom: 24px; }
.why-card .tick-list li{ font-weight:600; }

/* ===================== Partners strip ===================== */
.partners{ padding: 40px 0; }
.partners-lead{
  text-align:center; text-transform:uppercase; letter-spacing:.08em; font-weight:800;
  font-size:.8rem; color:#8a8377; margin: 0 0 18px;
}
.partners-list{
  list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap;
  justify-content:center; gap: 12px 16px;
}
.partners-list li{
  background: var(--cream-2); border: 2px solid var(--black); border-radius: 999px;
  padding: 8px 18px; font-weight:700; font-size:.88rem; color: var(--black);
}

/* ===================== Team ===================== */
.team-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.team-card{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px; }
/* Same split as .icon-wrap/.build-icon, for the same reason: the pan/zoom
   system deliberately renders the photo larger than its frame (that's how
   zooming works) and relies on the frame's overflow:hidden to crop it
   back down - so overflow:hidden can't just be removed to unclip the
   button bar the way it looked like it could (an <img> does NOT always
   clip to its own box when its own inline width/height are set past
   100%, unlike a plain background-image - that assumption was wrong and
   briefly shipped a regression where oversized/panned photos spilled
   outside the circle). .team-wrap holds the .img-placeholder class (what
   edit-mode.js looks for) with no clipping of its own; .team-placeholder
   nests inside it as the actual clipped circle and needs every style it
   used to inherit for free from .img-placeholder's base rule, since it
   no longer carries that class. */
/* .team-wrap carries the .img-placeholder class (edit-mode.js needs it
   to find this element), which also pulls in that class's base overflow:
   hidden/border/background/padding - the exact bug hit and fixed on
   .icon-wrap just above, reproduced here since it's the same underlying
   pattern. Cancel all of it explicitly again. */
.team-wrap{
  position: relative; display: inline-block; margin-bottom: 10px;
  overflow: visible; border: none; background: none; padding: 0; gap: 0;
}
.team-placeholder{
  position: relative; overflow: hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  gap:10px; border: 3px dashed var(--teal-dark); border-radius: 50%;
  background: var(--teal-light); color: var(--teal-dark);
  width:140px; height:140px; padding:16px;
}
.team-placeholder .ph-instructions span{ font-size:.72rem; }
.team-placeholder:has(.editable-img[src]:not([hidden])){ border-style: solid; padding:0; }
/* Bar is sized for normal rectangular photo slots and doesn't fit inside
   a 140px circle - render it below the circle instead of overlaying the
   bottom of it. Safe now: it's a sibling of the clipped .team-placeholder,
   not a descendant, so that circle's overflow:hidden doesn't reach it. */
.team-wrap .img-pan-zoom{
  bottom:auto; top:100%; margin-top:8px; left:50%; position:absolute;
  transform: translateX(-50%) scale(.85);
}
.team-name{ font-family: var(--font-head); font-size:1.05rem; }
.team-role{ color:#5b564c; font-size:.88rem; }
.testimonial-card{
  background: var(--cream-2); border-radius: var(--radius-md); border: 2px solid var(--black);
  padding: 20px; text-align:center;
  display:flex; flex-direction:column; justify-content:center; min-height: 240px; box-sizing:border-box;
}
.stars{ color: var(--orange); letter-spacing:2px; font-size:1.1rem; margin-bottom: 8px; }
.testimonial-quote{ font-style:italic; margin: 0 0 8px; color:#4d473c; }
.testimonial-quote.img-placeholder-inline{ color: var(--teal-dark); }
.testimonial-name{ margin:0; font-weight:800; font-family: var(--font-head); font-size:.85rem; color:#5b564c; }
.testimonial-link{ display:inline-block; margin-top:8px; font-size:.8rem; font-weight:700; color: var(--teal-dark); text-decoration:none; }
.testimonial-link:hover{ text-decoration:underline; }

.google-rating-badge{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:fit-content; margin: 0 auto 32px; padding: 10px 20px;
  background: var(--white); border-radius: 999px; border: 1px solid #e3e0d8;
  box-shadow: var(--shadow-soft);
  font-family: var(--font-body); text-decoration:none; color: var(--black);
  transition: transform .15s ease;
}
.google-rating-badge:hover{ transform: translateY(-2px); }
.grb-score{ font-weight:800; font-family: var(--font-head); font-size:1.05rem; }
.grb-stars{ color:#FBBC05; letter-spacing:1px; font-size:.95rem; }
.grb-label{ font-size:.85rem; color:#5b564c; font-weight:600; }
@media (max-width:480px){
  .grb-label{ display:none; }
}

.testimonial-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 24px; }
.testimonial-link-cta{ display:block; text-align:center; font-size:.95rem; }
.testimonial-grid .testimonial-quote,
.testimonial-grid .testimonial-name{ transition: opacity .3s ease; }
.testimonial-grid.testimonial-fade .testimonial-quote,
.testimonial-grid.testimonial-fade .testimonial-name{ opacity:0; }
@media (prefers-reduced-motion: reduce){
  .testimonial-grid .testimonial-quote,
  .testimonial-grid .testimonial-name{ transition:none; }
}

/* ===================== Pricing ===================== */
.pricing-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap: 28px; max-width: 640px; margin: 0 auto; }
.price-card{
  position:relative; background: var(--white); border:3px solid var(--black); border-radius: var(--radius-lg);
  padding: 34px 26px; text-align:center; box-shadow: var(--shadow-soft);
}
.price-card.featured{ background: var(--orange); }
.price-discount{
  position:absolute; top:-14px; right:18px; background: var(--black); color: var(--cream);
  font-weight:800; font-size:.78rem; padding: 5px 12px; border-radius: 999px;
}
.price-tag-badge{ display:inline-block; font-weight:800; font-family: var(--font-head); background: var(--teal-light); color: var(--teal-dark); padding: 5px 14px; border-radius: 999px; font-size:.85rem; margin-bottom: 14px; }
.price-card.featured .price-tag-badge{ background: var(--white); }
.price-amount{ font-family: var(--font-mono); font-size: 3rem; font-weight:700; font-variant-numeric: tabular-nums; }
.price-amount .price-currency{ font-size: 1.4rem; }
.price-period{ font-weight:700; color:#5b564c; margin-bottom: 10px; }
.price-card.featured .price-period{ color: var(--black); }
.price-desc{ font-size:.92rem; color:#5b564c; margin:0; }
.price-card.featured .price-desc{ color: var(--black); }
.pricing-note{ text-align:center; max-width: 560px; margin: 32px auto 0; color:#5b564c; font-size:.95rem; }

.pricing-tiers{ display:grid; grid-template-columns: repeat(2,1fr); gap: 28px; max-width: 760px; margin: 0 auto; }
.price-rows{ display:flex; flex-direction:column; gap:14px; margin: 6px 0 16px; text-align:left; }
.price-row{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding-bottom:12px; border-bottom: 2px dashed var(--cream-2); }
.price-card.featured .price-row{ border-bottom-color: rgba(255,255,255,0.4); }
.price-row:last-child{ border-bottom:none; padding-bottom:0; }
.price-row-period{ font-weight:700; font-size:.92rem; }
.price-row-amount{ font-family: var(--font-mono); font-weight:700; font-size:1.15rem; white-space:nowrap; }
.price-row.discounted .price-row-amount{ display:flex; align-items:baseline; gap:6px; }
.price-old{ font-weight:400; font-size:.82rem; text-decoration: line-through; opacity:.6; }
.price-save{
  display:inline-block; font-family: var(--font-head); font-weight:800; font-size:.72rem;
  background: var(--teal-dark); color: var(--white); padding: 2px 8px; border-radius: 999px;
  vertical-align: middle;
}
.price-card.featured .price-save{ background: var(--black); color: var(--cream); }
@media (max-width: 640px){
  .pricing-tiers{ grid-template-columns: 1fr; }
}

/* ===================== FAQ ===================== */
.faq-list{ max-width: 720px; margin: 0 auto; display:flex; flex-direction:column; gap:12px; }
.faq-item{
  background: var(--cream-2); border: 2px solid var(--black); border-radius: var(--radius-md);
  padding: 4px 20px;
}
.faq-item summary{
  cursor:pointer; list-style:none; padding: 16px 28px 16px 0; position:relative;
  font-family: var(--font-head); font-weight:700; font-size:1.02rem;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+"; position:absolute; right:0; top:50%; transform: translateY(-50%);
  font-size:1.4rem; font-weight:800; color: var(--teal-dark); line-height:1;
}
.faq-item[open] summary::after{ content:"−"; }
.faq-item p{ margin: 0 0 18px; color:#4d473c; }

.philosophy-accordion{
  margin-top: 18px; background: var(--cream-2); border: 2px solid var(--black);
  border-radius: var(--radius-md); padding: 4px 20px; max-width: 640px;
}
.philosophy-accordion summary{
  cursor:pointer; list-style:none; padding: 14px 28px 14px 0; position:relative;
  font-weight:700; font-size:.95rem; color: var(--teal-dark);
}
.philosophy-accordion summary::-webkit-details-marker{ display:none; }
.philosophy-accordion summary::after{
  content:"+"; position:absolute; right:0; top:50%; transform: translateY(-50%);
  font-size:1.3rem; font-weight:800; color: var(--teal-dark); line-height:1;
}
.philosophy-accordion[open] summary::after{ content:"−"; }
.philosophy-accordion p{ margin: 0 0 16px; color:#4d473c; font-size:.92rem; }

/* ===================== Location ===================== */
.location-inner{ display:grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items:center; }
.location-address{ font-weight:800; font-family: var(--font-head); color: var(--orange-dark); }
.location-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-top: 8px; }
.location-map{
  display:block; border-radius: var(--radius-lg); overflow:hidden;
  border:3px solid var(--black); box-shadow: var(--shadow-soft);
}
.location-map iframe{ display:block; width:100%; }
.map-teaser-link{
  display:block; text-align:center; padding: 12px; font-weight:700;
  color: var(--teal-dark); background: var(--teal-light); text-decoration:none;
}
.map-teaser-link:hover{ text-decoration:underline; }

/* ===================== Signup ===================== */
.signup{ background: var(--teal-dark); }
.signup-box{
  background: var(--cream); border:3px solid var(--black); border-radius: var(--radius-lg);
  padding: 40px; max-width: 720px; margin: 0 auto; box-shadow: 0 20px 40px rgba(0,0,0,0.25);
}
.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-field{ margin-bottom: 18px; display:flex; flex-direction:column; gap:6px; min-width:0; }
.form-field label{ font-weight:800; font-size:.92rem; }
.form-field input, .form-field select, .form-field textarea{
  font-family: var(--font-body); font-size: 1rem; padding: 12px 14px;
  border-radius: 12px; border: 2.5px solid var(--black); background: var(--white);
  color: var(--black); width:100%; box-sizing:border-box; max-width:100%;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{
  outline: 3px solid var(--orange); outline-offset: 1px;
}
.checkbox-field{ flex-direction:row; align-items:flex-start; gap:10px; }
.checkbox-field input{ width:20px; height:20px; margin-top:2px; flex-shrink:0; }
.checkbox-field label{ font-weight:600; }
.btn-submit{ width:100%; justify-content:center; font-size:1.05rem; padding: 16px; }
.btn-submit:disabled{ opacity:.6; cursor:not-allowed; transform:none; }
.form-status{ text-align:center; font-weight:700; min-height: 1.4em; margin: 14px 0 0; }
.form-status.success{ color: var(--teal-dark); }
.form-status.error{ color: #C0392B; }

/* ===================== Newsletter / lead capture ===================== */
.newsletter-band{ background: var(--black); padding: 48px 0; }
.newsletter-box{
  background: var(--cream); border:3px solid var(--white); border-radius: var(--radius-lg);
  padding: 32px; max-width: 720px; margin: 0 auto; display:flex; flex-direction:column; gap:18px;
  color: var(--black);
}
.newsletter-copy h3{ margin:0 0 6px; font-size:1.3rem; color: var(--black); }
.newsletter-copy p{ margin:0; color:#5b564c; }
.newsletter-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.newsletter-consent{ display:flex; align-items:flex-start; gap:10px; font-size:.88rem; font-weight:600; cursor:pointer; color: var(--black); }
.newsletter-consent input{ width:18px; height:18px; margin-top:2px; flex-shrink:0; }
@media (max-width: 640px){
  .newsletter-row{ grid-template-columns: 1fr; }
}

/* ===================== Footer ===================== */
.site-footer{ background: var(--black); color: var(--cream); }
.footer-cta-band{ background: var(--teal-dark); padding: 64px 0; }
.footer-cta-inner{ display:grid; grid-template-columns: 1.2fr .8fr; gap: 40px; align-items:center; }
.footer-cta-copy h2{ color: var(--white); font-size: clamp(1.8rem, 3.4vw, 2.6rem); text-transform:uppercase; }
.footer-cta-copy > p{ color:#d7ece9; font-size:1.05rem; max-width:44ch; }
.footer-contact{ margin-top: 20px; }
.footer-contact p{ margin: 0 0 12px; color:#e7f4f2; font-weight:600; display:flex; align-items:center; gap:10px; }
.footer-contact a{ color: var(--cream); }
.footer-contact a:hover{ color: var(--orange); }
.fc-ic{ width:20px; height:20px; flex-shrink:0; color: var(--orange); }
.fc-ic svg{ width:100%; height:100%; }
.footer-cta-action{ display:flex; flex-direction:column; align-items:center; gap: 16px; text-align:center; }
.limited-badge{ background: var(--black); color: var(--orange); font-weight:800; font-family: var(--font-head); padding: 8px 18px; border-radius: 999px; font-size:.85rem; }
.footer-cta-dual{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }
.footer-bottom{ padding: 22px 24px; text-align:center; font-size:.85rem; color:#a49d8e; display:flex; flex-direction:column; align-items:center; gap:8px; }
.footer-bottom .logo-word.small .lw.c1{ color: var(--teal); }
.footer-bottom .logo-word.small .lw.c2{ color: var(--orange); }
.footer-bottom .logo-word.small .lw.c3{ color: var(--cream); }

/* ===================== Responsive ===================== */
@media (max-width: 920px){
  .hero-inner{ grid-template-columns: 1fr; }
  /* width:100% is required, not cosmetic: once an image is set,
     .ph-instructions (the only in-flow content of .hero-placeholder)
     gets display:none, and margin:auto here disables grid stretch —
     with no explicit width, .hero-art shrink-wraps to zero-size
     in-flow content and the whole hero image collapses. */
  .hero-art{ order:-1; width:100%; max-width: 380px; margin: 0 auto 20px; }
  .edison-inner{ grid-template-columns: 1fr; text-align:center; }
  .tick-list li{ justify-content:center; }
  .build-grid{ grid-template-columns: repeat(2,1fr); }
  .gallery-cells{ grid-template-columns: repeat(2,1fr); }
  .team-grid{ grid-template-columns: repeat(2,1fr); }
  .testimonial-grid{ grid-template-columns: repeat(2,1fr); }
  .program-grid{ grid-template-columns: 1fr; }
  .info-columns{ grid-template-columns: 1fr; }
  .location-inner{ grid-template-columns: 1fr; }
  .pricing-grid{ grid-template-columns: 1fr; }
  .footer-cta-inner{ grid-template-columns: 1fr; text-align:center; }
  .footer-cta-copy > p{ margin-left:auto; margin-right:auto; }
  .footer-cta-action{ margin-top: 10px; }
}

/* ===================== Edit toolbar (dev/authoring only, ?edit=1) ===================== */
.edit-toolbar[hidden]{ display: none; }
.edit-toolbar{
  position: fixed; bottom: 20px; right: 20px; z-index: 200;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; max-width: 280px;
  background: var(--black); padding: 10px; border-radius: 14px; box-shadow: var(--shadow-soft);
}
.edit-btn{
  font-family: var(--font-head); font-weight:700; font-size:.85rem;
  border: 2px solid var(--black); border-radius: 999px; padding: 8px 14px; cursor:pointer;
  background: var(--orange); color: var(--black);
}
.edit-btn-save{ background: var(--teal-dark); color: var(--white); }
.edit-btn-promote{ background: #D2570C; color: var(--white); }
.edit-btn:disabled{ opacity:.6; cursor:not-allowed; }
.edit-status{ color: var(--cream); font-size:.75rem; width:100%; }
.edit-note-input[hidden]{ display:none; }
.edit-note-input{
  width:100%; min-height:44px; resize:vertical; box-sizing:border-box;
  font-family: var(--font-body, inherit); font-size:.8rem; padding:8px 10px;
  border-radius:10px; border:2px solid var(--teal-dark); background: var(--cream); color: var(--black);
}

body.edit-mode-active [data-i18n]{
  /* currentColor rather than a fixed hue: every text element already has
     a color chosen to be legible on its own background, so the outline
     inherits that same guarantee instead of vanishing on some sections
     (e.g. orange dashes disappeared on the orange price card). */
  outline: 2px dashed currentColor;
  outline-offset: 2px;
  cursor: text;
  border-radius: 4px;
}
body.edit-mode-active [data-i18n]:hover{ background: rgba(128,128,128,0.15); }
body.edit-mode-active [data-i18n]:focus{ background: rgba(128,128,128,0.22); }

@media (max-width: 760px){
  .main-nav{
    position: fixed; top: 62px; left:0; width:100%;
    /* top+bottom:0 should auto-derive this height, but doesn't reliably
       across viewports/browsers here — set it explicitly instead so the
       panel always covers the full screen below the header, with dvh as
       the modern fallback for mobile browser chrome resizing the viewport. */
    height: calc(100vh - 62px); height: calc(100dvh - 62px);
    overflow-y: auto;
    background: var(--cream); flex-direction:column; align-items:flex-start;
    padding: 24px; gap: 20px; font-size:1.1rem;
    transform: translateX(100%); transition: transform .25s ease;
    z-index: 40;
    box-sizing: border-box;
  }
  .main-nav.open{ transform: translateX(0); }
  .burger{ display:flex; }
  .build-grid{ grid-template-columns: 1fr; }
  .gallery-cells{ grid-template-columns: 1fr; }
  .team-grid{ grid-template-columns: 1fr; max-width:260px; margin:0 auto; }
  .testimonial-grid{ grid-template-columns: 1fr; }
  .form-row{ grid-template-columns: 1fr; }
  section.section{ padding: 64px 0; }
  .signup-box{ padding: 26px; }
}

/* ===================== Placeholder / made-up copy marker ===================== */
/* Flags text that's invented for layout purposes (fake stats, fake blurbs)
   so it's obviously "needs real content" at a glance while browsing
   normally - not just in ?edit=1 mode. Remove the class once real copy
   replaces it (the text itself stays editable via data-i18n either way). */
.fake-content{
  color: var(--orange-dark);
  border-bottom: 2px dashed var(--orange);
  padding-bottom: 1px;
}
.fake-tag{
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--orange-dark);
  border-radius: 999px;
  padding: 2px 8px;
  margin-left: 6px;
  vertical-align: middle;
  white-space: nowrap;
}