/* ============================================================
   YILI ART CHILDREN'S ART STUDIO
   Faithful to the brand brochure + dot "background wall":
   cream paper · vermilion red · gold · cerulean · rounded sans
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  --cream:      #FDF4E5;  /* must equal bg-wall.svg's flat cream, or hero/CTA edges show a seam */
  --cream-2:    #F3E4C9;  /* deep enough to read as a distinct band next to --cream */
  --cream-3:    #F1E4CB;
  --card:       #FFFCF4;
  --red:        #F8391F;
  --red-deep:   #D62D16;  /* large text-bearing red surfaces (footer, bands, subheros) — cream on it passes AA */
  --yellow:     #F9D100;
  --blue:       #2F9CCD;
  --blue-deep:  #1E7CA8;  /* large text-bearing blue surfaces — same readability role as --red-deep */
  --blue-tls:   #339BCE;  /* Three-Levels blue (the .ai uses a slightly different blue here) */
  --ink:        #2C2118;
  --ink-print:  #231916;  /* near-black ink for text inside the brochure infographics */
  --ink-soft:   #8A6F58;
  --dot-yellow: #F5C91F;  /* muted legend yellow from the .ai (not the brand --yellow) */

  --sans: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --hand: 'Caveat', 'Segoe Script', cursive;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --nav-h: 76px;
  --maxw: 1240px;
  --shadow: 0 16px 36px -22px rgba(74, 40, 16, 0.22);  /* soft — the brochure is flat print */
}

/* ---------- Reset ---------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; }

body {
  font-family: var(--sans);
  background: var(--cream);
  color: var(--ink);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* faint paper grain over everything */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.05;
  mix-blend-mode: multiply;
}

img { display: block; max-width: 100%; height: auto; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 28px; }
.section { position: relative; padding: clamp(80px, 12vw, 150px) 0; }

/* ---------- Decorative dots ("background wall" motif) ---------- */
.dot {
  position: absolute;
  width: 22px; height: 22px;
  border-radius: 50%;
  z-index: 1;
  pointer-events: none;
}
.dot--red    { background: var(--red); }
.dot--yellow { background: var(--yellow); }
.dot--blue   { background: var(--blue); }
.float       { animation: float 6.5s var(--ease) infinite; }
.float--slow { animation-duration: 9.5s; }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }

/* ---------- Type helpers ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-weight: 700; font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--red); margin-bottom: 1.1rem;
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: currentColor; border-radius: 2px; }
.eyebrow--cream { color: rgba(255,250,238,0.92); }

.h-section {
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.03;
  letter-spacing: -0.025em;
  color: var(--red);
}
.h-section--cream { color: var(--cream); }

.prose p { font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.75; color: var(--red-deep); }
.prose + .prose { margin-top: 1.1rem; }

.pull {
  font-weight: 600;
  font-size: clamp(1.2rem, 2.5vw, 1.75rem);
  line-height: 1.4;
  color: var(--red);
  padding-left: 1.1rem;
  border-left: 4px solid var(--yellow);
}

.head { max-width: 640px; margin-bottom: clamp(48px, 6vw, 78px); }
.head--center { margin-inline: auto; text-align: center; }
.head--center .eyebrow::before { display: none; }
.head__desc { margin-top: 1.2rem; font-size: 1.06rem; color: var(--ink); opacity: 0.78; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  font-weight: 600; font-size: 1rem; line-height: 1;
  padding: 0.95em 1.75em; border-radius: 999px;
  border: 2px solid transparent; cursor: pointer;
  transition: transform 0.25s var(--ease), background 0.25s var(--ease), color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.btn--solid { background: var(--red); color: var(--cream); box-shadow: 0 12px 26px -14px rgba(248,57,31,0.9); }
.btn--solid:hover { background: var(--red-deep); transform: translateY(-3px); box-shadow: 0 18px 32px -14px rgba(248,57,31,0.95); }
.btn--ghost { border-color: var(--red); color: var(--red); }
.btn--ghost:hover { background: var(--red); color: var(--cream); transform: translateY(-3px); }
.btn--lg { padding: 1.1em 2.3em; font-size: 1.06rem; }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.85s var(--ease), transform 0.85s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal--1 { transition-delay: 0.12s; }
.reveal--2 { transition-delay: 0.24s; }
.reveal--3 { transition-delay: 0.36s; }
.reveal--4 { transition-delay: 0.48s; }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--nav-h);
  display: flex; align-items: center;
  transition: background 0.35s var(--ease), box-shadow 0.35s var(--ease), backdrop-filter 0.35s var(--ease);
}
.nav.scrolled {
  background: rgba(253,245,229,0.86);
  backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 1px 0 rgba(214,45,22,0.1), 0 12px 30px -24px rgba(74,40,16,0.5);
}
.nav__inner { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 28px; display: flex; align-items: center; justify-content: space-between; }

.brand { display: flex; align-items: center; gap: 0.6rem; }

.nav__links { display: flex; align-items: center; gap: 1.5rem; }
.nav__links a { font-weight: 500; font-size: 0.95rem; color: var(--ink); opacity: 0.82; transition: opacity 0.2s, color 0.2s; }
.nav__links a:hover { opacity: 1; color: var(--red); }
.nav__cta { padding: 0.6em 1.3em; border-radius: 999px; background: var(--red); color: var(--cream) !important; opacity: 1 !important; font-weight: 600; transition: background 0.25s var(--ease), transform 0.25s var(--ease); }
.nav__cta:hover { background: var(--red-deep); transform: translateY(-2px); }

.nav__toggle { display: none; flex-direction: column; gap: 5px; width: 30px; background: none; border: 0; cursor: pointer; padding: 4px; }
.nav__toggle span { width: 100%; height: 2.5px; border-radius: 3px; background: var(--red); transition: transform 0.3s var(--ease), opacity 0.3s var(--ease); }
.nav__toggle.active span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav__toggle.active span:nth-child(2) { opacity: 0; }
.nav__toggle.active span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ============================================================
   HERO — the dot "background wall"
   ============================================================ */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; justify-content: center; padding: calc(var(--nav-h) + 40px) 24px 80px; overflow: hidden; }
.hero__wall {
  position: absolute; inset: 0; z-index: 0;
  /* vector dot wall (rebuilt from the brand background-template PDF's circle
     coordinates, brand-token colours) — crisp at any DPI, no scan grain */
  background: url("yiliart_image/bg-wall.svg") center / cover no-repeat;
  will-change: transform;
}
.hero__wall::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(58% 52% at 50% 46%, rgba(253,245,229,0.78) 0%, rgba(253,245,229,0.18) 60%, transparent 100%);
}
.hero__inner { position: relative; z-index: 2; text-align: center; width: 100%; max-width: 1280px; min-width: 0; }
.hero__eyebrow { display: inline-block; padding: 0.55em 1.15em; border-radius: 999px; background: rgba(253,245,229,0.8); color: var(--red); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 1.6rem; box-shadow: 0 6px 18px -10px rgba(74,40,16,0.4); }
.hero__title { font-weight: 800; font-size: clamp(0.9rem, 4.4vw, 4rem); line-height: 1.08; letter-spacing: -0.03em; color: var(--red); }
.hero__title .hl { display: block; white-space: nowrap; }
.hero__accent { position: relative; display: inline-block; }
.scribble { position: absolute; left: -2%; bottom: -0.28em; width: 104%; height: 0.4em; overflow: visible; }
.scribble path { fill: none; stroke: var(--yellow); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 360; stroke-dashoffset: 360; }
.hero.is-drawn .scribble path { transition: stroke-dashoffset 1s var(--ease) 0.5s; stroke-dashoffset: 0; }
/* blue full-stop after the headline — the brochure cover ends "SPACE" with a blue dot */
.hero__title .tdot { display: inline-block; width: 0.16em; height: 0.16em; border-radius: 50%; background: var(--blue); margin-left: 0.1em; }
.hero__sub { margin: 1.6rem auto 0; max-width: 560px; font-size: clamp(1.02rem, 1.6vw, 1.2rem); font-weight: 400; color: var(--red-deep); }
.hero__actions { margin-top: 2.2rem; display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.hero__note { margin-top: 1.6rem; font-family: var(--hand); font-size: 1.5rem; color: var(--blue); }

.hero__scroll { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 2; width: 26px; height: 42px; border: 2px solid var(--red); border-radius: 999px; display: flex; justify-content: center; padding-top: 7px; opacity: 0.7; }
.hero__scroll span { width: 4px; height: 8px; border-radius: 4px; background: var(--red); animation: scrollDot 1.6s var(--ease) infinite; }
@keyframes scrollDot { 0% { transform: translateY(0); opacity: 0; } 30% { opacity: 1; } 70% { transform: translateY(12px); opacity: 0; } 100% { opacity: 0; } }

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee { background: var(--red); color: var(--cream); padding: 1.15rem 0; overflow: hidden; }
.marquee__track { display: flex; align-items: center; gap: 1.6rem; width: max-content; animation: marquee 26s linear infinite; }
.marquee__track span { font-weight: 800; font-size: clamp(1.3rem, 2.4vw, 1.9rem); text-transform: uppercase; letter-spacing: 0.02em; }
.marquee__track i { width: 11px; height: 11px; border-radius: 50%; background: var(--yellow); flex: none; }
.marquee__track i:nth-child(8n+4) { background: var(--blue); }
.marquee__track i:nth-child(8n+2) { background: var(--cream); }
@keyframes marquee { to { transform: translateX(-33.333%); } }

/* ============================================================
   FRAMED PHOTOS
   ============================================================ */
.frame { border-radius: 24px; overflow: hidden; box-shadow: var(--shadow); }
.frame--main { aspect-ratio: 4 / 5; }
.frame--main img { width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   IMAGE DIVIDER
   ============================================================ */
.divider { position: relative; height: clamp(280px, 42vw, 520px); overflow: hidden; }
.divider img { width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   PROGRAMS — three levels
   ============================================================ */
.progs { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(22px, 2.6vw, 36px); }
.prog {
  background: var(--card); border-radius: 26px; overflow: hidden;
  box-shadow: var(--shadow);
  display: flex; flex-direction: column;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.prog:hover { transform: translateY(-8px); box-shadow: 0 36px 70px -30px rgba(74,40,16,0.42); }
.prog__num {
  background: var(--c); color: var(--cream);
  font-weight: 800; font-size: clamp(3rem, 5vw, 4rem); line-height: 1;
  padding: 0.42em 0.6em; display: flex; align-items: center; gap: 0.16em;
}
.prog__num i { width: 0.32em; height: 0.32em; border-radius: 50%; background: var(--cream); display: block; align-self: flex-end; margin-bottom: 0.12em; }
.prog__img { height: 210px; overflow: hidden; }
.prog__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.prog:hover .prog__img img { transform: scale(1.06); }
.prog__body { padding: 26px 26px 30px; display: flex; flex-direction: column; flex: 1; }
.prog__age { font-weight: 600; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
.prog__title { font-weight: 700; font-size: 1.32rem; line-height: 1.2; color: var(--red); margin: 0.5rem 0 0.7rem; }
.prog__desc { font-size: 0.95rem; color: var(--ink); opacity: 0.8; }
.tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: auto; padding-top: 1.3rem; }
.tags li { font-size: 0.76rem; font-weight: 500; padding: 0.4em 0.85em; border-radius: 999px; border: 1.5px solid rgba(248,57,31,0.28); color: var(--red-deep); }
.prog__more { display: inline-block; margin-top: 1.1rem; font-weight: 600; color: var(--red); }
.prog__more:hover { text-decoration: underline; text-underline-offset: 3px; }
/* the yellow card's header numeral flips to ink (cream on yellow washes out) */
.prog[style*="--yellow"] .prog__num { color: var(--ink-print); }
.prog[style*="--yellow"] .prog__num i { background: var(--ink-print); }

/* ============================================================
   THEMES
   ============================================================ */
.themes { background: var(--cream-2); }
/* home collaborations band — deep brand blue for clear separation + readable cream text */
.collab { background: var(--blue-deep); }
.collab .head__desc { color: rgba(253, 245, 229, 0.95); }

/* franchise target-city chips (tri-colour accents) */
.cities { display: flex; flex-wrap: wrap; gap: 12px 14px; justify-content: center; margin-top: 1.8rem; padding: 0; }
.city { border: 2.5px solid var(--c); color: var(--ink); font-weight: 700; font-size: 1.02rem; padding: 0.55em 1.25em; border-radius: 999px; background: var(--card); box-shadow: var(--shadow); }

/* birthday-party inclusions list */
.checklist--party { max-width: 620px; margin: 0.4rem auto 0; }
.checklist--party li { font-size: 1.05rem; padding: 0.35em 0; }
.themes__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(22px, 2.6vw, 38px); }
.theme { background: var(--card); border-radius: 22px; overflow: hidden; box-shadow: var(--shadow); transition: transform 0.35s var(--ease); }
.theme:hover { transform: translateY(-6px); }
.theme__img { height: 188px; overflow: hidden; }
.theme__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.theme:hover .theme__img img { transform: scale(1.07); }
/* theme names in condensed print-black caps beside a big colour dot — the brochure p.7 legend */
.theme h3 { display: flex; align-items: center; gap: 0.5em; font-family: 'Anton', var(--sans); font-weight: 400; font-size: 1.4rem; letter-spacing: 0.015em; text-transform: uppercase; color: var(--ink-print); margin: 20px 24px 0; }
.theme h3 .dot--inline { width: 19px; height: 19px; border-radius: 50%; background: var(--c); flex: none; }
.theme p { font-size: 0.92rem; color: var(--ink); opacity: 0.76; margin: 0.5rem 24px 26px; }

/* ============================================================
   GALLERY STRIP
   ============================================================ */
.gallery { padding: clamp(40px, 6vw, 70px) 0; overflow: hidden; }
.gallery__track { display: flex; gap: 18px; width: max-content; animation: gallery 40s linear infinite; }
.gallery__track img { height: clamp(150px, 18vw, 210px); width: auto; border-radius: 16px; object-fit: cover; box-shadow: var(--shadow); }
@keyframes gallery { to { transform: translateX(-50%); } }

/* ============================================================
   CTA — background wall again
   ============================================================ */
.cta { position: relative; padding: clamp(90px, 13vw, 160px) 0; overflow: hidden; text-align: center; }
.cta__wall { position: absolute; inset: 0; z-index: 0; background: url("yiliart_image/bg-wall.svg") center / cover no-repeat; }
.cta__wall::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 60% at 50% 50%, rgba(253,245,229,0.82) 0%, rgba(253,245,229,0.3) 70%, transparent 100%); }
.cta__inner { position: relative; z-index: 2; }
.cta__dots { display: flex; gap: 0.7rem; justify-content: center; margin-bottom: 1.8rem; }
.cta__dots i { width: 16px; height: 16px; border-radius: 50%; }
.cta__dots i:nth-child(1) { background: var(--red); }
.cta__dots i:nth-child(2) { background: var(--yellow); }
.cta__dots i:nth-child(3) { background: var(--blue); }
.cta__title { font-weight: 800; font-size: clamp(2rem, 5.5vw, 3.8rem); line-height: 1.04; letter-spacing: -0.025em; color: var(--red); }
.cta__sub { margin: 1.4rem auto 0; max-width: 540px; font-size: 1.1rem; color: var(--red-deep); }
.cta__actions { margin-top: 2.4rem; display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { padding: clamp(60px, 8vw, 90px) 0 36px; }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.6fr; gap: clamp(30px, 4vw, 56px); }
.footer__tag { margin-top: 0.8rem; font-size: 0.95rem; max-width: 26ch; }
.footer__col h4 { font-weight: 700; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; }
.footer__col ul { display: flex; flex-direction: column; gap: 0.7rem; }
.footer__col a { transition: color 0.2s, opacity 0.2s; }
.footer__bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.6rem; margin-top: clamp(40px, 5vw, 60px); padding-top: 24px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .footer__grid { grid-template-columns: repeat(3, 1fr); }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 980px) {
  .nav__toggle { display: flex; }
  .nav__links {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch;
    background: rgba(253,244,229,0.97); backdrop-filter: blur(14px);
    padding: 12px 28px 22px; gap: 4px;
    box-shadow: 0 24px 40px -24px rgba(74,40,16,0.5);
    /* the panel must scroll itself: with 7 items + CTA plus an expanded
       accordion it grows taller than the screen, and the nav is fixed */
    max-height: calc(100vh - var(--nav-h));
    max-height: calc(100dvh - var(--nav-h));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    clip-path: inset(0 0 100% 0); opacity: 0; pointer-events: none;
    transition: clip-path 0.4s var(--ease), opacity 0.3s var(--ease);
  }
  .nav__links.open { clip-path: inset(0 0 0 0); opacity: 1; pointer-events: auto; }
  .nav__links a { padding: 0.85rem 0; font-size: 1.05rem; border-bottom: 1px solid rgba(214,45,22,0.1); }
  .nav__cta { text-align: center; margin-top: 0.8rem; }

  .progs { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; }
  .themes__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .container { padding-inline: 20px; }
  .hero { padding-inline: 20px; }
  .hero__title { letter-spacing: -0.02em; }
  .themes__grid { grid-template-columns: 1fr; max-width: 380px; margin-inline: auto; }
  .hero__actions .btn, .cta__actions .btn { width: 100%; max-width: 320px; }
  .footer__grid { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; }
}

/* ---------- Motion preference ---------- */
@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; }
  .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   MULTI-PAGE ADDITIONS (generated site)
   ============================================================ */

/* ---- Subpage: keep nav solid over coloured heroes ---- */
.subpage .nav { background: rgba(253,245,229,0.92); backdrop-filter: blur(14px) saturate(1.2); box-shadow: 0 1px 0 rgba(214,45,22,0.08), 0 10px 30px -24px rgba(74,40,16,0.5); }

/* ---- Nav dropdowns ---- */
.has-sub { position: relative; }
.nav__top { display: inline-flex; align-items: center; gap: 0.35em; }
.caret { width: 9px; height: 6px; transition: transform 0.25s var(--ease); opacity: 0.7; }
@media (min-width: 981px) {
  .has-sub:hover .caret, .has-sub:focus-within .caret { transform: rotate(180deg); }
}
.subnav {
  position: absolute; top: 100%; left: 50%; transform: translate(-50%, 10px);
  min-width: 230px; padding: 10px; margin-top: 6px; z-index: 60;
  background: rgba(255,252,244,0.98); backdrop-filter: blur(16px);
  border-radius: 16px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 2px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease);
}
/* invisible bridge across the gap so moving from the trigger to the panel keeps it open */
.subnav::before { content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 18px; }
/* hover/focus reveal is a DESKTOP behaviour only — on mobile the tapped link keeps
   focus, and an unscoped :focus-within would re-apply the centred translate(-50%)
   to the static accordion, shoving the whole submenu off to the left */
@media (min-width: 981px) {
  .has-sub:hover .subnav, .has-sub:focus-within .subnav { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 4px); }
}
.subnav a { display: block; padding: 0.6em 0.9em; border-radius: 10px; font-size: 0.92rem; color: var(--ink); opacity: 0.85; white-space: nowrap; }
.subnav a:hover { background: rgba(248,57,31,0.1); color: var(--red); opacity: 1; }
.nav__links li.is-active > a, .nav__links li.is-active > .nav__top { color: var(--red); opacity: 1; }
.nav__cta-li { margin-left: 0.2rem; }

/* ---- Real logo (from yili art-logo-eng.pdf) ---- */
.brand__logo { height: 42px; width: auto; display: block; }
.footer__logo { height: 50px; width: auto; display: block; margin-bottom: 14px; }
@media (max-width: 560px) { .brand__logo { height: 38px; } }

/* ---- Subhero (coloured page banners) ---- */
.subhero { position: relative; overflow: hidden; padding: calc(var(--nav-h) + 66px) 0 66px; }
.subhero__inner { position: relative; z-index: 2; max-width: 880px; }
.subhero__big { position: absolute; right: -1%; top: 50%; transform: translateY(-50%); z-index: 0; font-weight: 800; font-size: clamp(7rem, 24vw, 20rem); line-height: 0.78; letter-spacing: -0.04em; pointer-events: none; user-select: none; }
.crumb { display: flex; align-items: center; gap: 0.55em; font-size: 0.82rem; font-weight: 500; margin-bottom: 1.1rem; }
.crumb a { opacity: 0.85; } .crumb a:hover { opacity: 1; text-decoration: underline; }
.crumb i { opacity: 0.4; font-style: normal; }
.subhero__eyebrow { font-weight: 700; font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 1rem; }
.subhero__title { font-weight: 800; font-size: clamp(2.3rem, 6vw, 4.4rem); line-height: 1.02; letter-spacing: -0.03em; }
.subhero__sub { margin-top: 1.3rem; max-width: 620px; font-size: clamp(1.02rem, 1.5vw, 1.18rem); line-height: 1.6; }
.subhero__tag { margin-top: 1.1rem; font-family: var(--hand); font-size: 1.7rem; }
.subhero__actions { margin-top: 2rem; display: flex; gap: 1rem; flex-wrap: wrap; }

/* red/blue banners use the deep variants so cream copy stays readable */
.subhero--red    { background: var(--red-deep);  }
.subhero--blue   { background: var(--blue-deep); }
.subhero--yellow { background: var(--yellow); }
.subhero--cream  { background: var(--cream); border-bottom: 1px solid rgba(214,45,22,0.22); }

.subhero--red, .subhero--blue { color: var(--cream); }
.subhero--red .crumb, .subhero--blue .crumb { color: rgba(255,250,238,0.96); }
.subhero--red .subhero__eyebrow, .subhero--blue .subhero__eyebrow { color: var(--cream); }
.subhero--red .subhero__title, .subhero--blue .subhero__title { color: var(--cream); }
.subhero--red .subhero__sub, .subhero--blue .subhero__sub { color: rgba(255,250,238,0.92); }
.subhero--red .subhero__big, .subhero--blue .subhero__big { color: rgba(255,255,255,0.13); }
.subhero--red .subhero__tag, .subhero--blue .subhero__tag { color: var(--yellow); }

.subhero--yellow .subhero__eyebrow { color: var(--ink); }
.subhero--yellow .subhero__title, .subhero--yellow .subhero__sub, .subhero--yellow .crumb { color: var(--ink); }
.subhero--yellow .subhero__big { color: rgba(44,33,24,0.08); }

.subhero--cream .subhero__eyebrow, .subhero--cream .subhero__title { color: var(--red); }
.subhero--cream .subhero__sub { color: var(--red-deep); }
.subhero--cream .crumb { color: var(--ink); }
.subhero--cream .subhero__big { color: rgba(248,57,31,0.10); }
.subhero--cream .subhero__tag { color: var(--blue); }

.subhero--red .dot, .subhero--blue .dot, .subhero--yellow .dot { display: none; }

.btn--cream { background: var(--cream); color: var(--red); }
.btn--cream:hover { background: #fff; transform: translateY(-3px); }

/* ---- Generic content helpers ---- */
.narrow { max-width: 820px; }
.center { text-align: center; }
.prose p + p { margin-top: 1.1rem; }
/* lead paragraphs read brochure-red on cream, like the printed body copy */
.prose--lead p { font-size: clamp(1.08rem, 1.6vw, 1.3rem); line-height: 1.72; color: var(--red-deep); }
.prose--ink p { color: var(--ink); }
.story-lead { font-family: var(--hand); font-size: clamp(1.7rem, 3.4vw, 2.5rem); line-height: 1.2; color: var(--blue); margin: 1.2rem 0 0.6rem; }
.prose-cream { color: rgba(255,250,238,0.92); font-size: 1.12rem; line-height: 1.7; max-width: 640px; margin-inline: auto; }
.link-more { display: inline-block; margin-top: 1.4rem; font-weight: 600; color: var(--red); }
.link-more:hover { text-decoration: underline; }
.center-link { text-align: center; margin-top: 2.4rem; }
.mini-head { font-weight: 700; font-size: 1.15rem; color: var(--red); margin: 1.6rem 0 0.6rem; }
.note { margin-top: 2rem; font-size: 0.9rem; color: var(--ink-soft); background: var(--cream-2); border-radius: 14px; padding: 16px 20px; }
.tri { display: inline-flex; gap: 5px; margin-left: 0.5em; vertical-align: middle; }
.tri i { width: 8px; height: 8px; border-radius: 50%; }
.tri i:nth-child(1) { background: var(--red); }
.tri i:nth-child(2) { background: var(--yellow); }
.tri i:nth-child(3) { background: var(--blue); }
.placeholder { background: #FFF7E0; border: 1.5px dashed var(--yellow); color: var(--ink); border-radius: 14px; padding: 14px 20px; font-size: 0.94rem; margin-bottom: 2rem; }
.placeholder strong { color: var(--red); }

/* ============================================================
   Brochure chapter language — full-bleed colour bands with a
   giant knockout numeral (cf. brochure pp. 4/6/7), thin red
   rules (p. 3) and vertical side-rail captions (pp. 10/14)
   ============================================================ */
.rule { border: 0; height: 1px; background: rgba(214,45,22,0.4); margin-top: clamp(44px, 6vw, 72px); }
.rail {
  position: absolute; top: 50%; right: 22px; transform: translateY(-50%);
  writing-mode: vertical-rl; white-space: nowrap;
  font-weight: 600; font-size: 0.66rem; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--ink-soft); opacity: 0.6; pointer-events: none; user-select: none;
}
/* 1320 = maxw 1240 + padding; below that the rail can graze full-width .split text */
@media (max-width: 1320px) { .rail { display: none; } }

/* red chapter band (home philosophy) */
.band--red { background: var(--red-deep); color: var(--cream); }
.band__grid { display: grid; grid-template-columns: auto 1fr; gap: clamp(30px, 6vw, 96px); align-items: start; }
.band__num {
  font-family: 'Baloo 2', var(--sans);
  font-weight: 800; font-size: clamp(7rem, 19vw, 17rem); line-height: 0.68;
  letter-spacing: -0.05em; color: var(--cream);
  margin-top: -0.05em;
}
.prose--band p { color: rgba(255,250,238,0.95); }
.band--red .tri i:nth-child(1) { background: var(--cream); }
.band--red .belief { justify-content: flex-start; margin: 2.6rem 0 0; }
.band--red .belief__card { background: var(--cream); color: var(--red); box-shadow: 0 24px 50px -30px rgba(0,0,0,0.45); }
.band__more { margin-top: 2.2rem; }
.band__more a { font-weight: 600; color: var(--cream); border-bottom: 2px solid var(--yellow); padding-bottom: 2px; }
.band__more a:hover { color: #fff; border-bottom-color: #fff; }

/* yellow band (home programs head, about goal) — ink text, as printed on yellow */
.band--yellow { background: var(--yellow); }
.band--yellow .eyebrow { color: var(--ink); }
.band--yellow .h-section { color: var(--ink-print); }
.band--yellow .head__desc, .band--yellow .prose p { color: var(--ink-print); }
.band--yellow .link-more { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
/* tri dots vanish on a same-colour band — swap the matching dot to cream */
.band--yellow .tri i:nth-child(2) { background: var(--cream); }
.collab .tri i:nth-child(3) { background: var(--cream); }

/* cream rounded chip riding a yellow band (brochure p. 8 header) */
.band-chip {
  background: var(--cream); border-radius: 36px;
  max-width: 660px; margin-inline: auto; text-align: center;
  padding: clamp(30px, 5vw, 52px) clamp(24px, 5vw, 58px);
  box-shadow: 0 22px 48px -28px rgba(74,40,16,0.4);
}
.band-chip .eyebrow::before { display: none; }
.band-chip .eyebrow { color: var(--red); }
.band-chip .h-section { color: var(--red); }
.band-chip .head__desc { color: var(--ink); }

/* cream keyline for photos sitting on solid colour bands */
.frame--cream { border: 8px solid var(--cream); }

@media (max-width: 980px) {
  .band__grid { grid-template-columns: 1fr; gap: 10px; }
  .band__num { font-size: clamp(5rem, 18vw, 8rem); margin-bottom: 0.5rem; }
}

/* ============================================================
   Home A·P·S·U·L rosette — full-size PK rebuild (Team A geometry):
   five print-exact blob beziers, one inline SVG per bubble; each
   bubble is its own inline-size container so letters/copy (real DOM
   text at blob-local .ai coordinates, in cqi) track their blob.
   ============================================================ */
.aplus { background: var(--cream); }
.rosette {
  position: relative; width: 100%; max-width: 1020px; margin: 0 auto;
  aspect-ratio: 349.4 / 348.6; container-type: inline-size;
}
.rosette__list { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.bub {
  position: absolute; left: var(--l); top: var(--t); width: var(--w); height: var(--h);
  container-type: inline-size; transition: transform 0.35s ease;
}
/* print painter order: A on top, S/P mid, U/L underneath */
.bub--a { z-index: 5; }
.bub--p, .bub--s { z-index: 4; }
.bub--u, .bub--l { z-index: 3; }
.bub:hover { transform: translateY(-0.8%) scale(1.02); }
/* overflow visible: tails extend past each bubble's body bbox */
.bub svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; display: block; }
.bub svg path { stroke: none; }
.bub__ltr {
  position: absolute; left: var(--lx); top: var(--ly); transform: translate(-50%, -50%);
  font-family: 'Baloo 2', var(--sans); font-weight: 800; line-height: 1;
  font-size: var(--lfs); color: var(--ink-print);
}
.bub__txt { position: absolute; left: var(--tx); top: var(--ty); width: var(--tw); color: var(--ink-print); }
.bub__txt h3 {
  margin: 0; font-family: 'Baloo 2', var(--sans); font-weight: 700; line-height: 1.05;
  font-size: max(15px, var(--hfs)); letter-spacing: 0.01em; color: var(--ink-print);
}
.bub__txt p { margin: 0.45em 0 0; font-weight: 500; font-size: max(11.5px, var(--pfs)); line-height: 1.34; }
/* P: as printed, the first lines stay narrow beside the glyph, then run full
   width beneath it — the float spacer clears the letter box */
.bub--p .bub__txt p::before { content: ""; float: right; width: 27%; height: 5.6em; }

/* wheat mark alone in the cream hole (sized by height — the PNG is 264×678);
   centre sits a touch below 50% so the ear clears the red A bubble above */
.rosette__mark {
  position: absolute; left: 50%; top: 52.6%; transform: translate(-50%, -50%);
  height: 15.2cqi; width: auto; z-index: 6; pointer-events: none;
}

@media (forced-colors: active) {
  .bub svg path, .bub__ltr, .bub__txt { forced-color-adjust: none; }
}

/* mobile: intentional compact stack — wheat leads, blobs keep their exact
   geometry (aspect-ratio = each blob's own viewBox) and tail personality */
@media (max-width: 700px) {
  .rosette { aspect-ratio: auto; max-width: none; container-type: normal; display: flex; flex-direction: column; align-items: center; }
  .rosette__list { position: static; order: 2; display: flex; flex-direction: column; align-items: center; }
  .bub { position: relative; left: auto; top: auto; width: min(64vw, 340px); height: auto; aspect-ratio: var(--ar); margin: 12px 0; }
  /* strict zigzag in APLUS stack order (A left, P right, L left, U right, S left);
     A keeps extra right-side room for its right-pointing tail */
  .bub--a { transform: translateX(-16px); }
  .bub--p, .bub--u { transform: translateX(20px); }
  .bub--l, .bub--s { transform: translateX(-20px); }
  .bub--a:hover { transform: translateX(-16px); }
  .bub--p:hover, .bub--u:hover { transform: translateX(20px); }
  .bub--l:hover, .bub--s:hover { transform: translateX(-20px); }
  .rosette__mark { position: static; order: 1; transform: none; height: 84px; width: auto; margin: 0 auto 10px; }
}

/* ---- Split layout ---- */
.split { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(40px, 6vw, 90px); align-items: center; }
.split__media { position: relative; }
.split--reverse .split__media { order: 2; }
.split--reverse .split__text { order: 1; }
.split__text .pull { margin-top: 1.6rem; }

/* ============================================================
   Three Levels Course System — PK rebuild (Team A geometry):
   real <table> laid over an aria-hidden CSS circle stack. Every
   circle, row height and separator is the print vector coordinate,
   in cqi (container = .tls-wrap, 1cqi = 1% of the 1120px frame).
   ============================================================ */
.tls { background: var(--yellow); overflow: hidden; }

/* visually-hidden caption for screen readers / SEO */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* the container lives on the WRAPPER — .tls-frame's own cqi height must
   resolve against an ancestor container, never against itself */
.tls-wrap { max-width: 1120px; margin: 0 auto; container-type: inline-size; }
.tls-frame { position: relative; height: 119.92cqi; }  /* print crop: towers clip flat at the band edge */

/* ---- tower art (decorative circle stack, print coordinates) ---- */
.tls-art { position: absolute; inset: 0; pointer-events: none; }
.tls-art i { position: absolute; display: block; width: var(--d); aspect-ratio: 1; left: var(--x); top: var(--y); border-radius: 50%; }
.tls-art .t1 { background: var(--cream); }
.tls-art .t2 { background: var(--red); }
.tls-art .t3 { background: var(--blue-tls); }
/* thin yellow cuts across the towers (the printed row separators) */
.tls-cut { position: absolute; left: 50%; transform: translateX(-50%); width: 100vw; top: var(--y); height: clamp(2px, 0.36cqi, 4px); background: var(--yellow); }

/* ---- the real table (transparent cells riding the art) ---- */
.tls-table { position: relative; width: 100%; border-collapse: collapse; table-layout: fixed; height: 119.41cqi; }
.tls-table th[scope="row"] {
  text-align: left; vertical-align: middle; padding: 0 0.8cqi 0 1.8cqi;
  font-weight: 700; font-size: clamp(11px, 1.72cqi, 20px); line-height: 1.25; color: var(--ink-print);
}
.tls-table tr.rw-level th[scope="row"] { vertical-align: bottom; padding-bottom: 1.6cqi; }
.tls-table td {
  vertical-align: middle; text-align: center; padding: 0.4cqi 2.2cqi;
  font-weight: 500; font-size: clamp(12px, 1.95cqi, 22px); line-height: 1.3;
}
.tls-table .c1 { color: var(--ink-print); }
.tls-table .c2, .tls-table .c3 { color: var(--cream); }
/* row heights — the print rhythm (separators at 45.83/53.12/64.52/77.66/92.50/119.41cqi) */
.rw-level  { height: 45.83cqi; }
.rw-age    { height: 7.29cqi; }
.rw-paint  { height: 11.40cqi; }
.rw-focus  { height: 13.14cqi; }
.rw-method { height: 14.84cqi; }
.rw-tics   { height: 26.91cqi; }

/* "level N" chips ride the top bead of each tower (frame coordinates) */
.tls-chip { position: absolute; display: flex; align-items: baseline; gap: 0.14em; transform: translate(-50%, -50%); line-height: 1; white-space: nowrap; z-index: 1; }
.tls-chip .w { font-weight: 700; font-size: 3.85cqi; letter-spacing: 0.01em; }
.tls-chip .n { font-family: 'Baloo 2', var(--sans); font-weight: 800; font-size: 11.6cqi; }
.tls-chip--1 { left: 35.42cqi; top: 33.6cqi; color: var(--ink-print); }
.tls-chip--1 .n { font-size: 9.7cqi; }  /* L1 numeral a touch smaller, as printed */
.tls-chip--2 { left: 60.9cqi; top: 23.2cqi; color: var(--cream); }
.tls-chip--3 { left: 86.25cqi; top: 13.7cqi; color: var(--cream); }

/* teaching characteristics — left-aligned bulleted list */
.tls-tics { display: inline-block; text-align: left; font-weight: 500; font-size: clamp(11px, 1.62cqi, 18px); line-height: 1.42; }
/* keep the level-1 list inside its cream tower: the red level-2 tower starts
   at ~41.7cqi, so pull the centred list left of that edge (desktop art only) */
@media (min-width: 701px) {
  .rw-tics .c1 { padding-right: 6cqi; }
}
.tls-tics li { padding-left: 0.85em; position: relative; }
.tls-tics li::before { content: "·"; position: absolute; left: 0; font-weight: 700; }

/* ============================================================
   TLS mobile ≤700px — per-level cards with bead crowns
   (grid transposition of the same table, zero duplication)
   ============================================================ */
@media (max-width: 700px) {
  .tls { padding: 30px 16px 44px; }
  .tls-wrap { max-width: 430px; }
  .tls-frame { height: auto; }
  .tls-art { display: none; }
  .tls-table { display: block; height: auto; }
  .tls-table colgroup { display: none; }
  .tls-table tbody { display: grid; grid-template-columns: 100%; row-gap: 3px; }
  .tls-table tr { display: contents; }
  /* keep row headers in the accessibility tree (sr-only, not display:none) */
  .tls-table th[scope="row"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .tls-table td, .tls-table th[scope="col"] { display: block; height: auto; padding: 14px 22px; font-size: 14px; }
  .tls-table .c1 { background: var(--cream); color: var(--ink-print); }
  .tls-table .c2 { background: var(--red); color: var(--cream); }
  .tls-table .c3 { background: var(--blue-tls); color: var(--cream); }
  /* transpose: card 1 rows 1-6, card 2 rows 7-12, card 3 rows 13-18 */
  .rw-level .c1 { grid-row: 1; }  .rw-age .c1 { grid-row: 2; }  .rw-paint .c1 { grid-row: 3; }
  .rw-focus .c1 { grid-row: 4; }  .rw-method .c1 { grid-row: 5; } .rw-tics .c1 { grid-row: 6; }
  .rw-level .c2 { grid-row: 7; }  .rw-age .c2 { grid-row: 8; }  .rw-paint .c2 { grid-row: 9; }
  .rw-focus .c2 { grid-row: 10; } .rw-method .c2 { grid-row: 11; } .rw-tics .c2 { grid-row: 12; }
  .rw-level .c3 { grid-row: 13; } .rw-age .c3 { grid-row: 14; } .rw-paint .c3 { grid-row: 15; }
  .rw-focus .c3 { grid-row: 16; } .rw-method .c3 { grid-row: 17; } .rw-tics .c3 { grid-row: 18; }
  /* card head = dome + two-bead crown */
  .rw-level .c1, .rw-level .c2, .rw-level .c3 {
    position: relative; margin-top: 64px; border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    padding: 34px 20px 12px; text-align: center;
  }
  .rw-level .c2, .rw-level .c3 { margin-top: 72px; }
  .rw-level th::before, .rw-level th::after,
  .rw-level .c1::before, .rw-level .c1::after,
  .rw-level .c2::before, .rw-level .c2::after,
  .rw-level .c3::before, .rw-level .c3::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); border-radius: 50%; background: inherit; }
  .rw-level .c1::before, .rw-level .c2::before, .rw-level .c3::before { width: 52px; height: 52px; top: -30px; }
  .rw-level .c1::after, .rw-level .c2::after, .rw-level .c3::after { width: 32px; height: 32px; top: -52px; }
  .rw-tics td { border-radius: 0 0 22px 22px; padding-bottom: 22px; }
  .tls-chip { position: static; display: inline-flex; transform: none; }
  .tls-chip .w { font-size: 15px; }
  .tls-chip .n, .tls-chip--1 .n { font-size: 46px; }
  /* stacked data labels */
  td[data-label]::before { content: attr(data-label); display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.72; margin-bottom: 3px; }
  .tls-tics { font-size: 14px; line-height: 1.5; }
}

/* ---- Course comparison table ---- */
.table-wrap { overflow-x: auto; border-radius: 20px; box-shadow: var(--shadow); background: var(--card); }
.course-table { width: 100%; border-collapse: collapse; min-width: 760px; }
.course-table th, .course-table td { text-align: left; padding: 18px 20px; vertical-align: top; font-size: 0.94rem; }
.course-table thead th { background: var(--ink); color: var(--cream); font-weight: 600; font-size: 0.74rem; letter-spacing: 0.05em; text-transform: uppercase; }
.course-table tbody tr { border-top: 1px solid rgba(44,33,24,0.09); }
.course-table tbody th { font-weight: 700; }
.lvl-pill { display: inline-block; background: var(--c); color: var(--cream); font-size: 0.68rem; font-weight: 700; padding: 0.25em 0.7em; border-radius: 999px; margin-bottom: 0.45em; }
.course-table tbody th a { display: block; color: var(--red); font-size: 1.05rem; }
.course-table .chars { color: var(--ink); opacity: 0.82; line-height: 1.65; }

/* ---- Program detail spec / checklist ---- */
.spec { display: flex; flex-direction: column; gap: 0; margin: 1.6rem 0; }
.spec > div { display: grid; grid-template-columns: 150px 1fr; gap: 1rem; padding: 0.85rem 0; border-bottom: 1px solid rgba(44,33,24,0.1); }
.spec dt { font-weight: 600; font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.spec dd { color: var(--ink); }
.checklist { display: flex; flex-direction: column; gap: 0.7rem; }
.checklist li { display: flex; align-items: center; gap: 0.7em; font-size: 1rem; color: var(--ink); }
.tick { width: 14px; height: 14px; border-radius: 50%; background: var(--c); flex: none; }
.subpage-cta { margin-top: 2rem; }
.pager-row { display: flex; justify-content: space-between; gap: 1rem; margin-top: 3rem; flex-wrap: wrap; }
.pager { display: inline-block; font-weight: 600; color: var(--red); border: 2px solid rgba(248,57,31,0.45); border-radius: 999px; padding: 0.6em 1.25em; transition: background 0.25s var(--ease), color 0.25s var(--ease); }
.pager:hover { background: var(--red); color: var(--cream); }
.pager--next { margin-left: auto; }

/* ---- About: principles — brochure p.3 numbered rows with hairline rules ---- */
.principles { max-width: 900px; margin-inline: auto; }
.principle {
  display: grid; grid-template-columns: clamp(88px, 12vw, 150px) 1fr;
  gap: clamp(20px, 5vw, 56px); align-items: center;
  padding: clamp(28px, 4vw, 44px) 6px;
  border-top: 1px solid rgba(214,45,22,0.38);
}
.principle:last-child { border-bottom: 1px solid rgba(214,45,22,0.38); }
.principle__num {
  display: block; font-weight: 800; font-size: clamp(3.8rem, 7vw, 6rem);
  line-height: 0.78; letter-spacing: -0.04em; color: var(--c); text-align: left;
}
.principle h3 { font-weight: 700; font-size: 1.3rem; color: var(--red); margin: 0 0 0.5rem; }
.principle p { font-size: 1rem; color: var(--ink); opacity: 0.85; max-width: 56ch; }
.diff { background: var(--blue-deep); color: var(--cream); }

/* ---- Teaching method: A P S U L ---- */
.apsul-list { display: flex; flex-direction: column; gap: 18px; }
.apsul { display: flex; gap: 24px; align-items: flex-start; background: var(--card); border-radius: 22px; padding: 28px 30px; box-shadow: var(--shadow); border-left: 6px solid var(--c); }
.apsul__badge { width: 64px; height: 64px; flex: none; border-radius: 50%; background: var(--c); color: var(--cream); font-weight: 800; font-size: 1.8rem; display: grid; place-items: center; }
.apsul__body h3 { font-weight: 700; font-size: 1.3rem; color: var(--red); margin-bottom: 0.3rem; }
.apsul__body p { color: var(--ink); opacity: 0.82; }

/* ---- Philosophy: belief / bigquote ---- */
.belief { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; margin: 3rem 0; }
.belief__card { background: var(--c); color: var(--cream); border-radius: 24px; padding: 26px 46px 30px; font-weight: 800; font-size: 2rem; text-align: center; box-shadow: var(--shadow); }
/* the stacked "I" is big, like the brochure's "I / Believe" lockup — not a stray tick */
.belief__card span { display: block; font-size: 1.5rem; font-weight: 800; line-height: 1.25; }
.belief__card--yellow { color: var(--ink-print); }
.bigquote { font-weight: 600; font-size: clamp(1.4rem, 3vw, 2.1rem); line-height: 1.4; color: var(--red); text-align: center; max-width: 760px; margin: 0 auto; }
.bigquote em { font-style: italic; color: var(--blue); }

/* ---- Founder creds ---- */
.creds-band { background: var(--cream-2); padding: clamp(30px, 4vw, 46px) 0; }
.creds { display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; justify-content: center; }
.cred { display: flex; flex-direction: column; gap: 0.25rem; text-align: center; font-weight: 600; color: var(--red); }
.cred span { font-weight: 600; font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); }

/* ---- Gallery grid ---- */
.gallery-grid { columns: 3; column-gap: 18px; }
.gcell { break-inside: avoid; margin: 0 0 18px; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); }
.gcell img { width: 100%; display: block; }

/* ---- Locations ---- */
.loc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(22px, 3vw, 32px); align-items: start; }
.loc-card { display: block; background: var(--card); border-radius: 24px; padding: 34px; box-shadow: var(--shadow); border-bottom: 6px solid var(--c); transition: transform 0.35s var(--ease); }
.loc-card:hover { transform: translateY(-6px); }
.loc-card__tag { display: inline-block; background: var(--c); color: var(--cream); font-weight: 700; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.3em 0.85em; border-radius: 999px; }
.loc-card__tag--soon { background: var(--ink); }
.loc-card h3 { font-weight: 800; font-size: 1.7rem; color: var(--red); margin: 1rem 0 0.5rem; }
.loc-card p { color: var(--ink); opacity: 0.8; }
.loc-card__go { display: inline-block; margin-top: 1rem; font-weight: 600; color: var(--red); }

/* ---- Join Us ---- */
/* 6-track grid so the 5th card row (2 cards) centres instead of leaving a hole */
.reasons { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(20px, 2.5vw, 30px); }
.reason { grid-column: span 2; }
.reason:nth-child(4) { grid-column: 2 / span 2; }
.reason:nth-child(5) { grid-column: 4 / span 2; }
.reason { background: var(--card); border-radius: 20px; padding: 30px; box-shadow: var(--shadow); }
.reason__dot { display: block; width: 18px; height: 18px; border-radius: 50%; background: var(--c); margin-bottom: 1rem; }
.reason h3 { font-weight: 700; font-size: 1.15rem; color: var(--red); margin-bottom: 0.5rem; }
.reason p { font-size: 0.94rem; color: var(--ink); opacity: 0.8; }
.frq-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.frq { background: var(--card); border-radius: 18px; padding: 26px 28px; box-shadow: var(--shadow); border-left: 5px solid var(--yellow); }
.frq h3 { font-weight: 700; color: var(--red); font-size: 1.12rem; margin-bottom: 0.4rem; }
.frq p { font-size: 0.92rem; color: var(--ink-soft); }

/* ---- Contact ---- */
.contact-info { background: var(--red-deep); color: var(--cream); border-radius: 24px; padding: clamp(26px, 4vw, 40px); box-shadow: var(--shadow); }
.contact-info h3 { font-weight: 700; font-size: 1.3rem; margin-bottom: 1.2rem; }
.ci { display: flex; flex-direction: column; gap: 0.15rem; margin-bottom: 1.1rem; }
.ci span { font-weight: 600; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.92; }
.ci a { color: var(--cream); font-weight: 600; }
.ci-dots { display: flex; gap: 0.5rem; margin: 1.4rem 0 0.8rem; }
.ci-dots .dot { position: static; }
.ci-tag { font-family: var(--hand); font-size: 1.5rem; }
.contact-info--solo { max-width: 760px; margin: 0 auto; text-align: center; }
.ci-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.4rem 3rem; margin: 1.6rem 0 0.4rem; }
.contact-info--solo .ci { align-items: center; }
.contact-info--solo .ci-dots { justify-content: center; }
.ci-actions { margin: 1.4rem 0; }
.contact-info--solo .ci-dots .dot--red { background: var(--cream); }

/* ---- Footer: brand red (May 8 note), deepened for readable cream text ---- */
.footer { background: var(--red-deep); color: var(--cream); border-top: 5px solid var(--yellow); position: relative; overflow: hidden; }
.footer__tag { color: var(--cream); font-family: var(--hand); font-size: 1.45rem; }
.footer__mail { display: inline-block; margin-top: 0.7rem; font-weight: 600; font-size: 0.95rem; color: var(--cream); border-bottom: 2px solid var(--yellow); padding-bottom: 2px; }
.footer__mail:hover { color: #fff; border-bottom-color: #fff; }
.footer__col h4 { color: var(--cream); position: relative; padding-bottom: 0.7rem; margin-bottom: 1.1rem; }
.footer__col h4::after { content: ""; position: absolute; left: 0; bottom: 0; width: 26px; height: 3px; border-radius: 3px; background: var(--yellow); }
.footer__col a { color: var(--cream); opacity: 1; font-size: 1rem; }
.footer__col a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.footer__bottom { border-top: 1px solid rgba(255,250,238,0.28); color: rgba(255,250,238,0.88); font-size: 0.86rem; }

/* ---- Responsive for new components ---- */
@media (max-width: 980px) {
  .split, .split--reverse { grid-template-columns: 1fr; gap: 48px; }
  .split--reverse .split__media, .split--reverse .split__text { order: 0; }
  .split__media { max-width: 460px; margin-inline: auto; }
  .reasons { grid-template-columns: repeat(2, 1fr); }
  .reasons .reason { grid-column: auto; }
  .subhero__big { opacity: 0.6; }

  /* nav dropdown -> accordion */
  .has-sub .subnav::before { content: none; }  /* no hover-bridge in accordion mode */
  .has-sub .subnav {
    position: static; transform: none; opacity: 1; visibility: visible; pointer-events: auto;
    background: transparent; backdrop-filter: none; box-shadow: none;
    margin: 2px 0 6px; padding: 0 0 0 14px; border-left: 2px solid rgba(248,57,31,0.22);
    display: none;
  }
  .has-sub.open .subnav { display: flex; }
  .has-sub > .nav__top { justify-content: space-between; }
  .has-sub.open .caret { transform: rotate(180deg); }
}

@media (max-width: 620px) {
  /* narrow screens pull percent-positioned wall dots into the type — wash them
     out behind hero/CTA headlines and drop loose decorative dots near text */
  .hero__wall::after { background: radial-gradient(78% 62% at 50% 46%, rgba(253,244,229,0.94) 0%, rgba(253,244,229,0.55) 62%, rgba(253,244,229,0.18) 100%); }
  .cta__wall::after { background: radial-gradient(88% 72% at 50% 50%, rgba(253,244,229,0.95) 0%, rgba(253,244,229,0.6) 68%, rgba(253,244,229,0.25) 100%); }
  .subhero .dot, .footer .dot { display: none; }
  .reasons, .frq-grid, .loc-grid { grid-template-columns: 1fr; }
  .reasons .reason { grid-column: auto; }
  .principle { grid-template-columns: 64px 1fr; gap: 18px; }
  .principle__num { font-size: 3rem; }
  .gallery-grid { columns: 2; }
  .apsul { gap: 16px; padding: 22px; }
  .belief__card { padding: 24px 34px; font-size: 1.6rem; }
  .subhero { padding-top: calc(var(--nav-h) + 40px); }
}

@media (max-width: 440px) {
  .gallery-grid { columns: 1; }
}