/* ===================== Design tokens ===================== */
:root{
  --teal: #1E9C97;
  --teal-dark: #14726F;
  --teal-light: #E4F4F2;
  --orange: #F2994A;
  --orange-dark: #DB7B2B;
  --black: #22201C;
  --cream: #F6EFDC;
  --cream-2: #EFE5C9;
  --white: #FFFFFF;
  --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-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; }
.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; overflow:hidden; position:relative; }
.hero-inner{ display:grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items:center; }
.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; }

.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; overflow:hidden; position:relative; z-index:1; }
.promo-track{
  display:flex; width: max-content;
  animation: marquee 22s linear infinite;
}
.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%); } }
.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-svg{ width:100%; max-width: 340px; margin: 0 auto; }
.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);
}

/* ===================== Build grid ===================== */
.gallery-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.gallery-placeholder{ aspect-ratio: 4/3; padding: 24px 16px; }

.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; }
.build-icon{
  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);
}
.build-card h3{ font-size: 1.1rem; margin-bottom:.35em; }
.build-card p{ color:#5b564c; font-size:.95rem; margin:0; }

/* ===================== 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-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; }
.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; }
.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; }

.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; }

/* ===================== 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); text-decoration:none; transition: transform .2s ease; }
.location-map:hover{ transform: translateY(-3px); }
.map-teaser{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  min-height: 300px; text-align:center; padding: 24px;
  background:
    radial-gradient(var(--grid-line) 1.6px, transparent 1.6px) 0 0/24px 24px,
    var(--teal-light);
}
.map-teaser strong{ font-family: var(--font-head); font-size:1.2rem; color: var(--black); }
.map-teaser span{ font-weight:700; color: var(--teal-dark); }

/* ===================== 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; }
.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);
}
.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; }

/* ===================== 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; }
.qr-placeholder{ width:100%; max-width: 220px; padding: 24px 16px; background: var(--white); }
.qr-placeholder .ph-icon{ font-size:2rem; }
.qr-placeholder span{ font-size:.78rem; color: var(--teal-dark); }
.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-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: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-grid{ grid-template-columns: 1fr; }
  .testimonial-grid{ grid-template-columns: 1fr; }
  .form-row{ grid-template-columns: 1fr; }
  section.section{ padding: 64px 0; }
  .signup-box{ padding: 26px; }
}