/* =====================================================
   TEMPLATE.CSS — Homepage Template Styles
   -----------------------------------------------------
   Contains all CSS for homepage templates 1-15.
   Moved from internal <style> blocks (templates 2, 3, 4)
   and from stylenew.css (templates 5-10).
   
   Template mapping:
     1 = Classic       (uses shared .hp-* from stylenew.css)
     2 = Editorial     (.tpl2)
     3 = Bold Split    (.tpl3)
     4 = Prestige      (.tpl4)
     5 = Playful       (.tpl5)
     6 = Corporate     (.tpl6)
     7 = Glassmorphism (.tpl7)
     8 = Heritage Faith(.tpl8)
     9 = STEM Future   (.tpl9)
     10 = Storybook    (.tpl10)
     11 = Yearbook     (.tpl11)
     12 = Blueprint    (.tpl12)  — technical drafting sheet
      13 = Broadsheet   (.tpl13)  — newspaper masthead & columns
      14 = Terrarium    (.tpl14)  — organic growth garden
      15 = Constellation(.tpl15)  — midnight sky & connected stars
   ===================================================== */

/* ─── Template Palette Variables ─── */
:root {
  /* ...
     PLAYFUL HOMEPAGE PALETTE (Template 5)
     Bright, joyful accent family derived from the admin theme tokens
     (--primary / --accent / --gold) so a single saved palette
     recolours the whole homepage consistently. The plain-hex line
     before each color-mix() line is a safe fallback for browsers
     without color-mix() support.
     ... */
  --play-sun:      color-mix(in srgb, var(--gold) 58%, #ffe066);
  --play-sun-2:  color-mix(in srgb, var(--gold) 42%, #fff3b0);
  --play-coral:  color-mix(in srgb, var(--accent) 80%, color-mix(in srgb, var(--accent) 55%, #fff));
  --play-coral-2: color-mix(in srgb, var(--accent) 55%, #ffd0a3);
  --play-coral-d: color-mix(in srgb, var(--accent-dark) 82%, #ff8c42);
  --play-pink:   color-mix(in srgb, var(--accent) 38%, #ff9ec2);
  --play-pink-2: color-mix(in srgb, var(--accent) 22%, #ffc3d8);
  --play-teal:   color-mix(in srgb, var(--primary) 52%, #4fd8ca);
  --play-teal-2: color-mix(in srgb, var(--primary) 38%, #8fe4dc);
  --play-blue:   color-mix(in srgb, var(--primary-light) 55%, #7fb0ff);
  --play-purple: color-mix(in srgb, var(--primary-deeper) 58%, #8a4fd8);
  --play-purple-2: color-mix(in srgb, var(--primary-deeper) 32%, #cdb2ff);
  --play-cream:  color-mix(in srgb, var(--cream) 90%, #fffdf8);
  --play-ink:    color-mix(in srgb, var(--text) 80%, #2b2b4a);
  --play-ink-2:  color-mix(in srgb, var(--text-secondary) 78%, #55557a);

  /* ...
     CORPORATE EDITORIAL HOMEPAGE PALETTE (Template 6)
     A magazine spread identity that reuses the shared theme
     tokens (--primary / --accent / --gold / --primary-deeper /
     --brand-navy) via direct var() aliases. The .tpl6 namespace
     below (in section 106) derives every --t6-* token from
     these, so a single saved palette in School Settings
      recolours the whole editorial surface.
      ... */
}

/* =====================================================
   TEMPLATE 2 — EDITORIAL
   ===================================================== */
/* ════════════════════════════════════════════════════════════
   TEMPLATE 2 — EDITORIAL · Magazine × Modern Web
   Scoped under .tpl2 so it never bleeds into other templates.

   Every colour comes from the shared theme system in stylenew.css
   (--primary, --primary-dark, --primary-deeper, --primary-light,
   --primary-mist, --accent, --gold, --bg, --bg-alt, --text, ...),
   which is driven dynamically by admin_school_settings.php
   (Theme & Brand Colours panel). Updating any swatch in the admin
   recolours this template instantly — no CSS edits required.
   ════════════════════════════════════════════════════════════ */
.tpl2{
  /* ── Theme + motion tokens — footer-fused, 100% dynamic ── */
  --t2-cream: var(--cream);
  --t2-cream-deep: var(--cream-deep);
  --t2-navy: var(--brand-navy);
  --t2-navy-deep: var(--primary-deeper);
  --t2-gold: var(--gold);
  --t2-gold-b: var(--gold-bright);
  --t2-gold-d: var(--gold-dim);
  --t2-accent: var(--accent);
  --t2-accent-b: var(--amber-bright);
  --t2-soft: var(--primary-mist);
  --t2-persp:1600px;
  --t2-tilt:9deg;
  --t2-lift:-8px;
  --t2-ease:cubic-bezier(.2,.8,.2,1);
  --t2-ease-bounce:cubic-bezier(.34,1.56,.64,1);
  --t2-shadow-rest:0 6px 18px rgba(var(--primary-deeper-rgb,4,31,18),.07), 0 1px 3px rgba(var(--primary-deeper-rgb,4,31,18),.05);
  --t2-shadow-hover:0 28px 56px -14px rgba(var(--primary-deeper-rgb,4,31,18),.22), 0 10px 22px -6px rgba(var(--primary-deeper-rgb,4,31,18),.14);
  --t2-shadow-gold:0 18px 40px -12px rgba(var(--gold-rgb,201,168,76),.38);
  --t2-gold-line:linear-gradient(90deg, transparent, var(--gold), transparent);
  --t2-gold-line-soft:linear-gradient(90deg, transparent, rgba(var(--gold-rgb,201,168,76),.5), transparent);
  --t2-primary-line:linear-gradient(90deg, transparent, var(--primary), transparent);

  background:var(--bg);
  color:var(--text);
  font-family:'Source Serif Pro','Trirong', Georgia, serif;
  line-height:1.65;
  overflow-x:hidden;
  position:relative;
}
.tpl2 *, .tpl2 *::before, .tpl2 *::after{ box-sizing:border-box; }
.tpl2 img{ max-width:100%; display:block; }
.tpl2 a{ color:inherit; text-decoration:none; }
.tpl2 .t2-container{ max-width:1260px; margin:0 auto; padding:0 2.6rem; position:relative; }
.tpl2 .t2-narrow{ max-width:780px; margin:0 auto; padding:0 2.6rem; position:relative; }

/* ─── Reveal system ─── */
.tpl2 .t2-reveal{ opacity:0; transform:translateY(40px); transition: opacity 1s var(--t2-ease), transform 1s var(--t2-ease); }
.tpl2 .t2-reveal.is-in{ opacity:1; transform:none; }
.tpl2 .t2-reveal--l{ transform:translate3d(-60px,0,0) rotateY(6deg); }
.tpl2 .t2-reveal--r{ transform:translate3d(60px,0,0) rotateY(-6deg); }
.tpl2 .t2-reveal--3d{ transform:translate3d(0,40px,0) rotateX(8deg); }
.tpl2 .t2-reveal--l.is-in, .tpl2 .t2-reveal--r.is-in, .t2-reveal--3d.is-in{ transform:none; }
.tpl2 .t2-reveal[data-d="1"]{ transition-delay:.08s; }
.tpl2 .t2-reveal[data-d="2"]{ transition-delay:.16s; }
.tpl2 .t2-reveal[data-d="3"]{ transition-delay:.24s; }
.tpl2 .t2-reveal[data-d="4"]{ transition-delay:.32s; }
.tpl2 .t2-reveal[data-d="5"]{ transition-delay:.40s; }
.tpl2 .t2-reveal[data-d="6"]{ transition-delay:.48s; }
.tpl2 .t2-reveal[data-d="7"]{ transition-delay:.56s; }
.tpl2 .t2-reveal[data-d="8"]{ transition-delay:.64s; }

/* ─── Typographic primitives ─── */
.tpl2 .t2-eyebrow{
  display:inline-flex; align-items:center; gap:1.4rem;
  font-family:'Inter','Open Sans',sans-serif;
  font-size:1.15rem; font-weight:700;
  letter-spacing:.32em; text-transform:uppercase;
  color:var(--primary);
}
.tpl2 .t2-eyebrow::before, .tpl2 .t2-eyebrow::after{ content:''; width:2.6rem; height:1px; background:currentColor; opacity:.5; }
.tpl2 .t2-eyebrow--center{ justify-content:center; }
.tpl2 .t2-eyebrow--gold{ color:var(--gold); }
.tpl2 .t2-section-head{ text-align:center; max-width:780px; margin:0 auto 5rem; position:relative; }
.tpl2 .t2-section-head::after{
  content:''; display:block; width:5rem; height:2px;
  background:var(--t2-gold-line);
  margin:2rem auto 0; opacity:.7;
}
.tpl2 .t2-section-head h2{
  font-family:'Playfair Display','Trirong',serif;
  font-size:clamp(2.6rem,4.4vw,4.4rem);
  font-weight:800;
  letter-spacing:-.018em;
  line-height:1.1;
  margin:1.4rem 0 1.4rem;
  color:var(--text);
}
.tpl2 .t2-section-head p{
  font-size:1.55rem; color:var(--text-secondary);
  line-height:1.8; margin:0;
}
.tpl2 .t2-section-head h2 em{ font-style:italic; color:var(--t2-gold-d); }
.tpl2 .t2-section-head h2 em.accent{ color:var(--t2-accent); }
.tpl2 .t2-section-head h2 em.gold{ color:var(--gold); }

/* ════════════════════════════════════════════════════════════
   1. HERO — 3D magazine spread with rotating image carousel
   ════════════════════════════════════════════════════════════ */
.tpl2 .t2-hero{
  position:relative;
  padding:6.5rem 0 7.5rem;
  border-bottom:4px solid var(--t2-accent);
  overflow:hidden;
  background:
    radial-gradient(circle at 10% 15%, rgba(var(--accent-rgb), .18) 0%, transparent 34%),
    radial-gradient(circle at 88% 82%, rgba(var(--gold-rgb),.15) 0%, transparent 36%),
    radial-gradient(circle at 55% 40%, rgba(var(--primary-rgb), .12) 0%, transparent 52%),
    linear-gradient(165deg, var(--t2-navy-deep) 0%, var(--t2-navy) 55%, var(--primary-dark) 100%);
  color:var(--white);
}
.tpl2 .t2-hero-grid{
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:5rem;
  align-items:center;
  position:relative;
  z-index:2;
  perspective:var(--t2-persp);
}

/* Hero content */
.tpl2 .t2-hero-content{ perspective:var(--t2-persp); }
.tpl2 .t2-hero-eyebrow{
  display:inline-flex; align-items:center; gap:1rem;
  font-family:'Inter',sans-serif;
  font-size:1.15rem; letter-spacing:.28em; text-transform:uppercase;
  font-weight:700;
  color:var(--gold);
  margin-bottom:2rem;
  padding:.7rem 1.4rem;
  background:rgba(var(--gold-rgb,201,168,76),.08);
  border:1px solid rgba(var(--gold-rgb,201,168,76),.25);
  border-radius:99px;
  backdrop-filter:blur(4px);
}
.tpl2 .t2-hero-eyebrow .t2-dot{
  width:.6rem; height:.6rem; border-radius:50%;
  background:var(--primary);
  box-shadow:0 0 0 4px rgba(var(--primary-rgb,12,84,48),.18);
  animation:t2pulse 2.4s infinite;
}
@keyframes t2pulse{
  0%,100%{ box-shadow:0 0 0 4px rgba(var(--primary-rgb,12,84,48),.18); }
  50%{ box-shadow:0 0 0 8px rgba(var(--primary-rgb,12,84,48),.05); }
}
.tpl2 .t2-hero h1{
  font-family:'Playfair Display','Trirong',serif;
  font-size:clamp(3.4rem,6vw,6.2rem);
  font-weight:900;
  letter-spacing:-.04em;
  line-height:.92;
  margin:0 0 2.2rem;
  padding-bottom:0;
  color:var(--white);
  position:relative;
  z-index:2;
  display:flex; flex-direction:column; align-items:flex-start; gap:.35rem;
}
.tpl2 .t2-hero h1 br{ display:none; }
.tpl2 .t2-hero h1 .t2-stroke{
  order:-1;
  display:inline-flex; align-items:center; gap:.65rem;
  font-family:'Inter',sans-serif;
  font-size:1.02rem; font-weight:800; letter-spacing:.34em; text-transform:uppercase;
  color:var(--gold);
  background:rgba(var(--gold-rgb),.13);
  border:1px solid rgba(var(--gold-rgb),.38);
  padding:.62rem 1.35rem;
  border-radius:999px;
  -webkit-text-stroke:0;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:0 4px 18px rgba(var(--gold-rgb),.18), inset 0 1px 0 rgba(255,255,255,.14);
  margin-bottom:.9rem;
  line-height:1;
}
.tpl2 .t2-hero h1 .t2-stroke::before{
  content:''; width:.58rem; height:.58rem; border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 0 4px rgba(var(--gold-rgb),.18);
  flex-shrink:0;
}
.tpl2 .t2-hero h1 .t2-accent-word{
  color:var(--white); font-style:normal; font-weight:900; letter-spacing:-.045em;
  display:block; padding-left:1.6rem; border-left:4px solid var(--gold);
  line-height:.88; text-shadow:0 10px 36px rgba(0,0,0,.28);
  margin:.2rem 0 .25rem; max-width:100%; overflow-wrap:break-word; word-break:break-word; text-wrap:balance;
}
.tpl2 .t2-hero h1 .t2-gold-underline{
  position:relative; display:inline-block; max-width:100%; overflow-wrap:break-word; word-break:break-word; text-wrap:balance;
  color:var(--gold); font-style:italic; font-weight:600;
  font-family:'Playfair Display',serif;
  letter-spacing:-.025em; line-height:.92;
  padding-bottom:.75rem;
  text-shadow:0 0 28px rgba(var(--gold-rgb),.42);
}
.tpl2 .t2-hero h1 .t2-gold-underline::before{
  /*content:'—  EDITORIAL COVER  —';*/
  position:absolute; top:-1.55rem; left:0;
  font-family:'Inter',sans-serif; font-size:.7rem; font-weight:700;
  letter-spacing:.32em; text-transform:uppercase;
  color:rgba(255,255,255,.58); font-style:normal; white-space:nowrap;
}
.tpl2 .t2-hero h1 .t2-gold-underline::after{
  content:''; position:absolute; left:0; right:0; bottom:0;
  height:3px; border-radius:999px;
  background:linear-gradient(90deg, var(--gold) 0%, var(--gold) 58%, transparent 100%);
  opacity:.95; animation:none; background-size:auto;
}
@media(max-width:640px){
  .tpl2 .t2-hero h1 .t2-stroke{ font-size:.88rem !important; padding:.5rem 1.1rem !important; letter-spacing:.28em !important; }
  .tpl2 .t2-hero h1 .t2-accent-word{ padding-left:1.1rem !important; border-left-width:3px !important; }
  .tpl2 .t2-hero h1 .t2-gold-underline::before{ font-size:.62rem !important; top:-1.3rem !important; letter-spacing:.24em !important; }
  .tpl2 .t2-hero-cta{ flex-direction:row !important; flex-wrap:nowrap !important; gap:.7rem !important; width:100% !important; }
  .tpl2 .t2-hero-cta .t2-btn{ flex:1 1 0 !important; min-width:0 !important; justify-content:center !important; padding:.95rem .85rem !important; font-size:1.05rem !important; white-space:nowrap !important; text-align:center !important; }
}
@media(max-width:768px){ .tpl2 .t2-hero{ padding:5.5rem 0 4rem !important; } }
@media(max-width:480px){ .tpl2 .t2-hero{ padding:5rem 0 3rem !important; } .tpl2 .t2-hero-cta{ gap:.6rem !important; } .tpl2 .t2-hero-cta .t2-btn{ padding:.85rem .65rem !important; font-size:.98rem !important; } }
@media(max-width:380px){ .tpl2 .t2-hero-cta{ gap:.5rem !important; } .tpl2 .t2-hero-cta .t2-btn{ padding:.8rem .5rem !important; font-size:.9rem !important; } }
.tpl2 .t2-hero-tag{
  font-size:1.7rem;
  line-height:1.6;
  color:rgba(255,255,255,.85);
  max-width:48rem;
  margin:3.6rem 0 2.8rem;
  padding-top:1rem;
  position:relative;
  clear:none;
}
.tpl2 .t2-hero-tag::first-letter{
  font-family:'Playfair Display',serif;
  font-size:3.6em;
  font-weight:900;
  float:left;
  line-height:.9;
  margin:.06em .18em 0 0;
  color:var(--gold);
}
.tpl2 .t2-hero-cta{ display:flex; gap:1.4rem; flex-wrap:wrap; margin-bottom:3rem; }
.tpl2 .t2-btn{
  display:inline-flex; align-items:center; gap:1rem;
  padding:1.3rem 2.6rem;
  border-radius:6px;
  font-family:'Inter',sans-serif;
  font-weight:700; font-size:1.3rem;
  letter-spacing:.1em; text-transform:uppercase;
  transition:.3s var(--t2-ease);
  position:relative;
  border:1.5px solid rgba(255,255,255,.65);
  background:transparent;
  color:var(--white);
  overflow:hidden;
  cursor:pointer;
}
.tpl2 .t2-btn::before{
  content:''; position:absolute; inset:0;
  background:rgba(255,255,255,.14);
  transform:translateY(101%);
  transition:transform .35s var(--t2-ease);
  z-index:-1;
}
.tpl2 .t2-btn:hover::before{ transform:translateY(0); }
.tpl2 .t2-btn:hover{ color:var(--white); transform:translateY(-3px); box-shadow:0 14px 30px -8px rgba(0,0,0,.5); border-color:var(--white); }
.tpl2 .t2-btn--gold{
  background:var(--gold);
  border-color:var(--gold);
  color:var(--white);
  box-shadow:0 10px 26px -6px rgba(var(--gold-rgb,201,168,76),.55);
}
.tpl2 .t2-btn--gold::before{ background:linear-gradient(135deg, rgba(var(--gold-rgb,201,168,76),.7), rgba(var(--gold-rgb,201,168,76),1)); }
.tpl2 .t2-btn--gold:hover{ border-color:rgba(var(--gold-rgb,201,168,76),.7); }
.tpl2 .t2-btn i{ transition:transform .3s; }
.tpl2 .t2-btn:hover i{ transform:translateX(4px); }

/* Hero trust strip */
.tpl2 .t2-hero-trust{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.4rem;
  padding-top:2.4rem;
  border-top:1px solid rgba(255,255,255,.18);
  position:relative;
}
.tpl2 .t2-hero-trust::before{
  content:''; position:absolute; top:-1px; left:0;
  width:5rem; height:1px;
  background:var(--gold);
}
.tpl2 .t2-trust-item{
  display:flex; align-items:center; gap:1rem;
  transition:.4s var(--t2-ease);
}
.tpl2 .t2-trust-item:hover{ transform:translateY(-3px); }
.tpl2 .t2-trust-icon{
  width:3.6rem; height:3.6rem;
  border-radius:50%;
  background:rgba(var(--gold-rgb,201,168,76),.18);
  border:1px solid rgba(var(--gold-rgb,201,168,76),.4);
  display:flex; align-items:center; justify-content:center;
  color:var(--gold);
  font-size:1.4rem;
  flex-shrink:0;
  transition:.4s var(--t2-ease);
}
.tpl2 .t2-trust-item:hover .t2-trust-icon{
  background:var(--gold);
  color:var(--white);
  transform:rotate(-8deg) scale(1.08);
  box-shadow:0 6px 14px rgba(var(--gold-rgb,201,168,76),.4);
}
.tpl2 .t2-trust-text strong{
  display:block;
  font-family:'Playfair Display',serif;
  font-size:1.6rem;
  font-weight:800;
  color:var(--white);
  line-height:1.1;
}
.tpl2 .t2-trust-text span{
  font-family:'Inter',sans-serif;
  font-size:1rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(255,255,255,.7);
  font-weight:600;
}

/* Hero side — magazine spread */
.tpl2 .t2-hero-side{
  position:relative;
  height:64rem;
  perspective:var(--t2-persp);
  --mx:0; --my:0;
}

/* Background ambient orbs */
.tpl2 .t2-orb{
  position:absolute;
  border-radius:50%;
  filter:blur(60px);
  pointer-events:none;
  z-index:0;
}
.tpl2 .t2-orb--1{
  width:32rem; height:32rem;
  top:5%; right:-5rem;
  background:radial-gradient(circle, rgba(var(--gold-rgb,201,168,76),.32), transparent 60%);
  animation:t2float 14s ease-in-out infinite;
}
.tpl2 .t2-orb--2{
  width:26rem; height:26rem;
  bottom:8%; left:-6rem;
  background:radial-gradient(circle, rgba(var(--primary-rgb,12,84,48),.28), transparent 60%);
  animation:t2float 18s ease-in-out infinite reverse;
}
.tpl2 .t2-orb--3{
  width:18rem; height:18rem;
  top:50%; left:40%;
  background:radial-gradient(circle, rgba(var(--gold-rgb,201,168,76),.18), transparent 60%);
  animation:t2float 22s ease-in-out infinite;
}
@keyframes t2float{
  0%,100%{ transform:translate(0,0) scale(1); }
  33%{ transform:translate(2rem,-3rem) scale(1.08); }
  66%{ transform:translate(-3rem,2rem) scale(.95); }
}

/* Decorative dotted/dashed circles */
.tpl2 .t2-hero-deco{ position:absolute; pointer-events:none; z-index:1; }
.tpl2 .t2-hero-deco--1{
  top:6%; left:2%; width:22rem; height:22rem;
  border:1.5px dashed rgba(255,255,255,.22);
  border-radius:50%;
  opacity:.7;
  animation:t2rotate 40s linear infinite;
}
.tpl2 .t2-hero-deco--2{
  bottom:8%; right:2%; width:14rem; height:14rem;
  border:1px solid rgba(var(--gold-rgb,201,168,76),.4);
  border-radius:50%;
  opacity:.7;
}
@keyframes t2rotate{
  to{ transform:rotate(360deg); }
}

/* Magazine cover wrapper */
.tpl2 .t2-hero-cover{
  position:absolute;
  inset:0;
  transform-style:preserve-3d;
  transition:transform 1.2s var(--t2-ease);
  transform:rotateY(calc(var(--mx) * 6deg)) rotateX(calc(var(--my) * -6deg));
  z-index:3;
}

/* Magazine "page" — the photo stack */
.tpl2 .t2-hero-photo{
  position:absolute;
  inset:3rem;
  border-radius:6px;
  overflow:hidden;
  background:linear-gradient(135deg, var(--bg-alt), var(--bg));
  box-shadow:
    0 40px 80px -20px rgba(var(--primary-deeper-rgb,4,31,18),.5),
    0 16px 40px -10px rgba(var(--primary-deeper-rgb,4,31,18),.3),
    inset 0 1px 0 rgba(255,255,255,.5);
  transform-style:preserve-3d;
  transform:translateZ(0);
}
.tpl2 .t2-hero-photo::before{
  content:''; position:absolute; inset:1.2rem;
  border:1px solid rgba(255,255,255,.6);
  z-index:3; pointer-events:none;
  border-radius:2px;
}
.tpl2 .t2-hero-photo::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 45%, rgba(var(--primary-deeper-rgb,4,31,18),.55));
  pointer-events:none; z-index:2;
}

/* Photo carousel inside the magazine cover */
.tpl2 .t2-hero-photo-stack{
  position:absolute; inset:0;
  perspective:1200px;
  transform-style:preserve-3d;
}
.tpl2 .t2-hero-photo-img{
  position:absolute; inset:0;
  opacity:0;
  transition:opacity .65s ease, transform .65s var(--t2-ease);
  transform:translate3d(12px,0,0) scale(1.03) rotateY(4deg);
  will-change:opacity, transform;
}
.tpl2 .t2-hero-photo-img.is-active{
  opacity:1;
  transform:translate3d(0,0,0) rotateY(0) scale(1);
  z-index:1;
}
.tpl2 .t2-hero-photo-img.is-exiting{
  opacity:0;
  transform:translate3d(-12px,0,0) scale(1.02) rotateY(-3deg);
  z-index:0;
}
.tpl2 .t2-hero-photo-img img{
  width:100%; height:100%; object-fit:cover;
}

/* Magazine "issue" badge — top of cover */
.tpl2 .t2-hero-photo-tag{
  position:absolute;
  top:1.6rem; left:1.6rem;
  z-index:4;
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(8px);
  padding:.7rem 1.2rem;
  border-radius:2px;
  font-family:'Inter',sans-serif;
  font-size:1rem; font-weight:800;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--text);
  display:flex; align-items:center; gap:.6rem;
}

.tpl2 .t2-hero-photo-tag::before{
  content:''; width:.5rem; height:.5rem;
  border-radius:50%; background:var(--primary);
  box-shadow:0 0 0 3px rgba(var(--primary-rgb,12,84,48),.2);
}

/* Magazine "story" overlay — bottom of cover */
.tpl2 .t2-hero-photo-overlay{
  position:absolute;
  bottom:1.6rem; left:1.6rem; right:1.6rem;
  z-index:4;
  color:var(--white);
  display:flex; justify-content:space-between; align-items:flex-end;
}
.tpl2 .t2-hero-photo-overlay h3{
  font-family:'Playfair Display',serif;
  font-size:1.7rem;
  font-weight:800;
  margin:0 0 .3rem;
  line-height:1.2;
  letter-spacing:-.01em;
  text-shadow:0 2px 12px rgba(0,0,0,.4);
}
.tpl2 .t2-hero-photo-overlay span{
  font-family:'Inter',sans-serif;
  font-size:1rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--gold);
}
.tpl2 .t2-hero-photo-dots{
  display:flex; gap:.5rem;
}
.tpl2 .t2-hero-photo-dots button{
  width:.6rem; height:.6rem;
  border-radius:50%;
  border:0;
  background:rgba(255,255,255,.4);
  cursor:pointer;
  padding:0;
  transition:.3s var(--t2-ease);
}
.tpl2 .t2-hero-photo-dots button.is-active{
  background:var(--t2-gold-d);
  width:1.8rem;
  border-radius:99px;
  box-shadow:0 0 0 3px rgba(var(--gold-rgb),.18);
}

/* Floating glass cards */
.tpl2 .t2-glass-card{
  position:absolute;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(18px) saturate(180%);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:
    0 30px 60px -16px rgba(var(--primary-deeper-rgb,4,31,18),.22),
    0 8px 22px -6px rgba(var(--primary-deeper-rgb,4,31,18),.12),
    inset 0 1px 0 rgba(255,255,255,.7);
  padding:1.8rem 2.2rem;
  border-radius:6px;
  z-index:5;
  transition:transform .6s var(--t2-ease);
}
.tpl2 .t2-glass-card--issue{
  top:2rem; left:-3rem;
  transform:rotate(-4deg);
  width:18rem;
  animation:t2floatCard 6s ease-in-out infinite;
}
.tpl2 .t2-glass-card--issue:hover{ transform:rotate(-4deg) translateY(-4px) scale(1.02); }
.tpl2 .t2-glass-card--issue strong{
  display:block;
  font-family:'Playfair Display',serif;
  font-size:1.6rem;
  font-weight:800;
  color:var(--primary);
  line-height:1;
}
.tpl2 .t2-glass-card--issue span{
  display:block;
  font-family:'Inter',sans-serif;
  font-size:1rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--text-secondary);
  margin-top:.6rem;
  font-weight:700;
}
.tpl2 .t2-glass-card--issue .t2-ribbon{
  position:absolute; top:-1rem; right:-1rem;
  background:var(--gold);
  color:var(--white);
  font-family:'Inter',sans-serif;
  font-size:1rem; font-weight:800;
  letter-spacing:.18em;
  padding:.4rem .9rem;
  border-radius:2px;
  box-shadow:0 6px 14px rgba(var(--gold-rgb,201,168,76),.5);
}
.tpl2 .t2-glass-card--featured{
  bottom:7rem; right:-4rem;
  width:26rem;
  transform:rotate(3deg);
  animation:t2floatCard 7s ease-in-out infinite reverse;
}
.tpl2 .t2-glass-card--featured:hover{ transform:rotate(3deg) translateY(-4px) scale(1.02); }
.tpl2 .t2-glass-card--featured .t2-tag{
  display:inline-block;
  font-family:'Inter',sans-serif;
  font-size:1rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase;
  background:var(--primary);
  color:var(--white);
  padding:.4rem 1rem;
  border-radius:2px;
  margin-bottom:1rem;
}
.tpl2 .t2-glass-card--featured h4{
  font-family:'Playfair Display',serif;
  font-size:1.7rem;
  font-weight:800;
  margin:0 0 .8rem;
  line-height:1.25;
  letter-spacing:-.01em;
  color:var(--text);
}
.tpl2 .t2-glass-card--featured p{
  font-family:'Source Serif Pro',serif;
  font-size:1.2rem;
  color:var(--text-secondary);
  line-height:1.55;
  margin:0 0 1rem;
}
.tpl2 .t2-glass-card--featured .t2-byline{
  font-family:'Inter',sans-serif;
  font-size:1rem;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold);
  font-weight:700;
  display:flex; align-items:center; gap:.6rem;
}
.tpl2 .t2-glass-card--featured .t2-byline::before{
  content:''; width:2rem; height:1px; background:var(--gold);
}
.tpl2 .t2-glass-card--meta{
  top:50%; left:-5rem;
  transform:translateY(-50%) rotate(-2deg);
  width:14rem;
  text-align:center;
  animation:t2floatCard 8s ease-in-out infinite;
}
.tpl2 .t2-glass-card--meta:hover{ transform:translateY(-50%) rotate(-2deg) translateY(-4px) scale(1.02); }
.tpl2 .t2-glass-card--meta strong{
  display:block;
  font-family:'Playfair Display',serif;
  font-size:3rem;
  font-weight:900;
  color:var(--text);
  line-height:1;
}
.tpl2 .t2-glass-card--meta span{
  display:block;
  font-family:'Inter',sans-serif;
  font-size:1rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--text-secondary);
  margin-top:.4rem;
  font-weight:700;
}
@keyframes t2floatCard{
  0%,100%{ transform:translateY(0) rotate(var(--t2-rot,0deg)); }
  50%{ transform:translateY(-1.2rem) rotate(var(--t2-rot,0deg)); }
}
.tpl2 .t2-glass-card--issue{ --t2-rot:-4deg; }
.tpl2 .t2-glass-card--featured{ --t2-rot:3deg; }
.tpl2 .t2-glass-card--meta{ --t2-rot:-2deg; }

/* Floating entry badge top-right */
.tpl2 .t2-hero-badge{
  position:absolute;
  top:2rem; right:-3rem;
  z-index:5;
  background:linear-gradient(135deg, var(--text), var(--primary-dark));
  color:var(--white);
  padding:1.2rem 1.8rem;
  border-radius:4px;
  font-family:'Inter',sans-serif;
  font-size:1.1rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  display:flex; align-items:center; gap:.8rem;
  box-shadow:0 18px 40px -10px rgba(var(--primary-deeper-rgb,4,31,18),.5);
  transform:rotate(3deg);
  transition:.4s var(--t2-ease);
  animation:t2floatCard 7s ease-in-out infinite;
}
.tpl2 .t2-hero-badge:hover{ transform:rotate(3deg) scale(1.06); }
.tpl2 .t2-hero-badge i{ color:rgba(var(--gold-rgb,201,168,76),1); }

/* ════════════════════════════════════════════════════════════
   2. STATS RIBBON — animated counters with depth
   ════════════════════════════════════════════════════════════ */
.tpl2 .t2-stats{
  padding:2.8rem 0 1.6rem;
  background:
    linear-gradient(160deg, var(--t2-navy-deep) 0%, var(--t2-navy) 60%, var(--primary-dark) 100%);
  border-top:1px solid rgba(var(--gold-rgb),.18);
  border-bottom:4px solid var(--t2-accent);
  color:var(--bg);
  position:relative;
  overflow:hidden;
}
.tpl2 .t2-stats::before{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(circle at 12% 50%, rgba(var(--gold-rgb,201,168,76),.22) 0%, transparent 35%),
    radial-gradient(circle at 88% 50%, rgba(var(--primary-rgb,12,84,48),.22) 0%, transparent 35%);
  pointer-events:none;
}
.tpl2 .t2-stats::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(45deg, rgba(var(--gold-rgb,201,168,76),.05) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(var(--gold-rgb,201,168,76),.05) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(var(--gold-rgb,201,168,76),.05) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(var(--gold-rgb,201,168,76),.05) 75%);
  background-size:6rem 6rem;
  background-position:0 0, 0 3rem, 3rem -3rem, -3rem 0;
  pointer-events:none;
  opacity:.5;
}
.tpl2 .t2-stats-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  position:relative;
  gap:0;
}
.tpl2 .t2-stat{
  text-align:center;
  padding:2rem 2.4rem;
  border-left:1px solid rgba(var(--gold-rgb,201,168,76),.2);
  position:relative;
  transition:.5s var(--t2-ease);
}
.tpl2 .t2-stat:first-child{ border-left:none; }
.tpl2 .t2-stat::before{
  content:''; position:absolute;
  top:50%; left:0;
  width:1px; height:0;
  background:var(--gold);
  transition:height .6s var(--t2-ease);
}
.tpl2 .t2-stat:hover::before{ height:80%; top:10%; }
.tpl2 .t2-stat:hover{ transform:translateY(-6px); }
.tpl2 .t2-stat-num{
  font-family:'Playfair Display',serif;
  font-size:clamp(3.6rem,6vw,6rem);
  font-weight:900;
  color:rgba(var(--gold-rgb,201,168,76),1);
  line-height:1;
  letter-spacing:-.03em;
  display:flex; justify-content:center; align-items:baseline; gap:.2rem;
  text-shadow:0 4px 24px rgba(var(--gold-rgb,201,168,76),.3);
}
.tpl2 .t2-stat-num .t2-suffix{
  font-size:.5em;
  color:var(--bg);
  opacity:.6;
  font-weight:700;
  margin-left:.2rem;
}
.tpl2 .t2-stat-label{
  font-family:'Inter',sans-serif;
  font-size:1.15rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--bg);
  margin-top:1.4rem;
  font-weight:700;
  opacity:.85;
}
.tpl2 .t2-stat-icon{
  display:inline-flex;
  align-items:center; justify-content:center;
  width:4.4rem; height:4.4rem;
  border-radius:50%;
  background:rgba(var(--gold-rgb,201,168,76),.14);
  border:1px solid rgba(var(--gold-rgb,201,168,76),.3);
  color:rgba(var(--gold-rgb,201,168,76),1);
  font-size:1.6rem;
  margin-bottom:1rem;
  transition:.4s var(--t2-ease);
}
.tpl2 .t2-stat:hover .t2-stat-icon{
  background:var(--gold);
  color:var(--white);
  transform:rotate(-8deg) scale(1.08);
  box-shadow:0 8px 18px rgba(var(--gold-rgb,201,168,76),.4);
}

/* ════════════════════════════════════════════════════════════
   3. LEVELS — 3D photo cards with image parallax
   ════════════════════════════════════════════════════════════ */
.tpl2 .t2-levels{
  padding:7.5rem 0;
  background:var(--bg);
  position:relative;
  overflow:hidden;
}
.tpl2 .t2-levels::before{
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:var(--t2-gold-line);
}
.tpl2 .t2-levels::after{
  content:''; position:absolute; bottom:0; left:0; right:0; height:1px;
  background:var(--t2-gold-line);
}
.tpl2 .t2-levels-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2.6rem;
  margin-top:5rem;
  perspective:var(--t2-persp);
}
.tpl2 .t2-level-card{
  position:relative;
  background:var(--white);
  border-radius:10px;
  overflow:hidden;
  border:1px solid rgba(var(--primary-deeper-rgb),.08);
  box-shadow:0 6px 20px rgba(var(--primary-deeper-rgb),.06);
  transition:.45s var(--t2-ease);
  text-decoration:none;
  color:inherit;
  display:flex; flex-direction:column;
  transform-style:preserve-3d;
}
.tpl2 .t2-level-card::after{
  content:''; position:absolute; inset:0 0 auto 0; height:3px;
  background:var(--t2-gold-line);
  opacity:0;
  transition:opacity .5s var(--t2-ease);
  z-index:5;
}
.tpl2 .t2-level-card:hover{
  transform:translateY(var(--t2-lift)) rotateX(4deg) rotateY(-2deg) scale(1.015);
  box-shadow:var(--t2-shadow-hover);
}
.tpl2 .t2-level-card:hover::after{ opacity:1; }
.tpl2 .t2-level-photo{
  aspect-ratio:4/3;
  overflow:hidden;
  position:relative;
  background:var(--bg-alt);
  transform-style:preserve-3d;
}
.tpl2 .t2-level-photo img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.4s var(--t2-ease);
}
.tpl2 .t2-level-card:hover .t2-level-photo img{ transform:scale(1.08); }
.tpl2 .t2-level-photo::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 35%, rgba(var(--primary-deeper-rgb,4,31,18),.65));
  pointer-events:none;
}
.tpl2 .t2-level-num{
  position:absolute;
  top:1.4rem; left:1.4rem;
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(8px);
  padding:.6rem 1.2rem;
  border-radius:2px;
  font-family:'Inter',sans-serif;
  font-size:1rem;
  font-weight:800;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--text);
  z-index:2;
  display:flex; align-items:center; gap:.6rem;
}
.tpl2 .t2-level-num::before{
  content:''; width:.5rem; height:.5rem; border-radius:50%;
  background:var(--gold);
}
.tpl2 .t2-level-tag{
  position:absolute;
  bottom:1.4rem; left:1.4rem;
  font-family:'Inter',sans-serif;
  font-size:1rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--white);
  font-weight:700;
  background:var(--gold);
  padding:.4rem 1rem;
  border-radius:2px;
  z-index:2;
  box-shadow:0 6px 14px rgba(var(--gold-rgb,201,168,76),.4);
}
.tpl2 .t2-level-body{ padding:2.6rem 2.4rem 2.8rem; flex:1; display:flex; flex-direction:column; }
.tpl2 .t2-level-card h3{
  font-family:'Playfair Display',serif;
  font-size:2.4rem;
  font-weight:800;
  margin:0 0 1rem;
  letter-spacing:-.01em;
  color:var(--text);
}
.tpl2 .t2-level-card p{
  font-family:'Source Serif Pro',serif;
  font-size:1.45rem;
  color:var(--text-secondary);
  line-height:1.7;
  margin:0 0 1.4rem;
  flex:1;
}
.tpl2 .t2-level-meta{
  display:flex; gap:1.4rem; flex-wrap:wrap;
  font-family:'Inter',sans-serif;
  font-size:1.05rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--primary);
  font-weight:700;
}
.tpl2 .t2-level-meta span{ display:inline-flex; align-items:center; gap:.5rem; }
.tpl2 .t2-level-meta i{ color:var(--gold); }
.tpl2 .t2-level-cta{
  margin-top:1.6rem;
  padding-top:1.6rem;
  border-top:1px solid var(--border-light);
  display:flex; justify-content:space-between; align-items:center;
  font-family:'Inter',sans-serif;
  font-size:1.2rem;
  font-weight:700;
  color:var(--primary);
  letter-spacing:.06em;
  text-transform:uppercase;
}
.tpl2 .t2-level-cta i{ transition:transform .3s; }
.tpl2 .t2-level-card:hover .t2-level-cta i{ transform:translateX(6px); }

/* ════════════════════════════════════════════════════════════
   4. VISION / MISSION — drop caps, gold tabs, 3D hover
   ════════════════════════════════════════════════════════════ */
.tpl2 .t2-vm{
  padding:7.5rem 0;
  background:
    radial-gradient(ellipse at 80% 0%, rgba(var(--gold-rgb),.08) 0%, transparent 50%),
    radial-gradient(ellipse at 20% 100%, rgba(var(--primary-rgb),.05) 0%, transparent 50%),
    var(--white);
  border-top:1px solid rgba(var(--primary-deeper-rgb),.06);
  border-bottom:1px solid rgba(var(--primary-deeper-rgb),.06);
  position:relative;
}
.tpl2 .t2-vm-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3.4rem;
  align-items:stretch;
  perspective:var(--t2-persp);
}
.tpl2 .t2-vm-card{
  background:var(--white);
  border-radius:6px;
  padding:4.4rem 3.4rem;
  box-shadow:var(--t2-shadow-rest);
  position:relative;
  transition:transform .6s var(--t2-ease), box-shadow .6s var(--t2-ease);
  overflow:hidden;
}
.tpl2 .t2-vm-card::before{
  content:''; position:absolute;
  top:0; left:3.4rem;
  width:5rem; height:4px;
  background:var(--gold);
  border-radius:0 0 4px 4px;
}
.tpl2 .t2-vm-card::after{
  content:''; position:absolute;
  bottom:-6rem; right:-6rem;
  width:18rem; height:18rem;
  border-radius:50%;
  background:radial-gradient(circle, rgba(var(--gold-rgb,201,168,76),.08), transparent 70%);
  transition:transform .6s var(--t2-ease);
  pointer-events:none;
}
.tpl2 .t2-vm-card:hover{
  box-shadow:var(--t2-shadow-hover);
}
.tpl2 .t2-vm-card--vision:hover{ transform:perspective(1400px) rotateY(4deg) rotateX(2deg) translateY(-8px); }
.tpl2 .t2-vm-card--mission:hover{ transform:perspective(1400px) rotateY(-4deg) rotateX(2deg) translateY(-8px); }
.tpl2 .t2-vm-card--vision::before{ background:var(--primary); }
.tpl2 .t2-vm-icon{
  width:6.6rem; height:6.6rem;
  border-radius:50%;
  background:linear-gradient(135deg, var(--bg-alt), var(--bg));
  display:flex; align-items:center; justify-content:center;
  font-size:2.4rem;
  color:var(--primary);
  margin-bottom:2rem;
  border:1.5px solid var(--gold);
  transition:.4s var(--t2-ease);
}
.tpl2 .t2-vm-card:hover .t2-vm-icon{
  background:var(--gold);
  color:var(--white);
  transform:translateZ(20px) scale(1.08) rotate(-4deg);
  box-shadow:0 12px 24px rgba(var(--gold-rgb,201,168,76),.4);
}
.tpl2 .t2-vm-card--mission .t2-vm-icon{ color:var(--gold); border-color:var(--primary); }
.tpl2 .t2-vm-eyebrow{
  font-family:'Inter',sans-serif;
  font-size:1.1rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--gold);
  font-weight:700;
  margin-bottom:1rem;
  display:inline-flex; align-items:center; gap:.8rem;
}
.tpl2 .t2-vm-eyebrow::before{
  content:''; width:2rem; height:1px; background:var(--gold);
}
.tpl2 .t2-vm-card h3{
  font-family:'Playfair Display',serif;
  font-size:2.6rem;
  font-weight:800;
  margin:0 0 1.8rem;
  letter-spacing:-.01em;
  color:var(--text);
}
.tpl2 .t2-vm-text{
  font-family:'Source Serif Pro',serif;
  font-size:1.55rem;
  color:var(--text-secondary);
  line-height:1.85;
}
.tpl2 .t2-vm-text::first-letter{
  font-family:'Playfair Display',serif;
  font-size:4em;
  font-weight:900;
  float:left;
  line-height:.85;
  margin:.08em .12em 0 0;
  color:var(--primary);
}
.tpl2 .t2-vm-list{
  list-style:none;
  padding:0;
  margin:0;
  counter-reset:vm;
}
.tpl2 .t2-vm-list li{
  counter-increment:vm;
  position:relative;
  padding:1.2rem 0 1.2rem 4rem;
  border-bottom:1px dashed var(--border);
  font-family:'Source Serif Pro',serif;
  font-size:1.4rem;
  color:var(--text-secondary);
  line-height:1.65;
  transition:.3s var(--t2-ease);
}
.tpl2 .t2-vm-list li:hover{ padding-left:4.4rem; color:var(--text); }
.tpl2 .t2-vm-list li::before{
  content:counter(vm, decimal-leading-zero);
  position:absolute; left:0; top:1.2rem;
  font-family:'Playfair Display',serif;
  font-weight:800;
  font-size:1.6rem;
  color:var(--gold);
  letter-spacing:.04em;
}
.tpl2 .t2-vm-list li:last-child{ border-bottom:none; }

/* ════════════════════════════════════════════════════════════
   5. PULL QUOTE — letterform mark, gold accent line
   ════════════════════════════════════════════════════════════ */
.tpl2 .t2-pullquote{
  padding:7rem 0;
  background:
    linear-gradient(160deg, var(--t2-navy-deep) 0%, var(--t2-navy) 70%, var(--primary-dark) 100%);
  border-top:4px solid var(--t2-gold);
  border-bottom:1px solid rgba(var(--gold-rgb),.14);
  color:var(--bg);
  position:relative;
  overflow:hidden;
}
.tpl2 .t2-pullquote::before{
  content:''; position:absolute;
  top:-50%; right:-15%;
  width:80rem; height:80rem;
  border-radius:50%;
  background:radial-gradient(circle, rgba(var(--gold-rgb,201,168,76),.20) 0%, transparent 60%);
  pointer-events:none;
}
.tpl2 .t2-pullquote::after{
  content:''; position:absolute;
  bottom:-50%; left:-15%;
  width:60rem; height:60rem;
  border-radius:50%;
  background:radial-gradient(circle, rgba(var(--primary-rgb,12,84,48),.18) 0%, transparent 60%);
  pointer-events:none;
}
.tpl2 .t2-pullquote-inner{
  position:relative;
  max-width:980px;
  margin:0 auto;
  text-align:center;
  z-index:1;
}
.tpl2 .t2-pullquote-mark{
  display:inline-block;
  font-family:'Playfair Display',serif;
  font-size:14rem;
  color:var(--gold);
  line-height:.5;
  margin-bottom:1rem;
  text-shadow:0 4px 30px rgba(var(--gold-rgb,201,168,76),.4);
}
.tpl2 .t2-pullquote blockquote{
  font-family:'Playfair Display',serif;
  font-style:italic;
  font-size:clamp(2.2rem,3.8vw,3.6rem);
  font-weight:500;
  line-height:1.25;
  margin:0 auto;
  color:var(--bg);
  letter-spacing:-.012em;
  position:relative;
  max-width:90rem;
}
.tpl2 .t2-pullquote blockquote em{ color:rgba(var(--gold-rgb,201,168,76),1); font-style:italic; }
.tpl2 .t2-pullquote-cite{
  display:inline-flex; align-items:center; gap:1rem;
  font-family:'Inter',sans-serif;
  font-style:normal;
  font-size:1.2rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:rgba(var(--gold-rgb,201,168,76),1);
  margin-top:2.6rem;
  font-weight:700;
}
.tpl2 .t2-pullquote-cite::before, .tpl2 .t2-pullquote-cite::after{
  content:''; width:2.4rem; height:1px;
  background:rgba(var(--gold-rgb,201,168,76),1);
  opacity:.7;
}

/* ════════════════════════════════════════════════════════════
   6. MISSION CAROUSEL — magazine spread
   ════════════════════════════════════════════════════════════ */
.tpl2 .t2-carousel{
  padding:7.5rem 0;
  background:
    radial-gradient(ellipse at 30% 0%, rgba(var(--gold-rgb,201,168,76),.08) 0%, transparent 50%),
    var(--bg);
  position:relative;
  overflow:hidden;
}
.tpl2 .t2-carousel::before{
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:var(--t2-gold-line);
}
.tpl2 .t2-carousel-stage{
  position:relative;
  overflow:hidden;
  padding:.6rem .3rem 1rem;
  margin:0 -.3rem;
  cursor:grab;
}
.tpl2 .t2-carousel-stage:active{ cursor:grabbing; }
.tpl2 .t2-carousel-track{
  display:flex;
  gap:1.6rem;
  transition:transform .55s var(--t2-ease);
  will-change:transform;
}
.tpl2 .t2-carousel-card{
  flex:0 0 calc((100% - 3.2rem) / 3);
  background:var(--white);
  border-radius:10px;
  overflow:hidden;
  border:1px solid rgba(var(--primary-deeper-rgb),.08);
  box-shadow:0 6px 20px rgba(var(--primary-deeper-rgb),.07);
  transition:transform .5s var(--t2-ease), box-shadow .5s var(--t2-ease);
  transform-style:preserve-3d;
  position:relative;
}
.tpl2 .t2-carousel-card::after{
  content:''; position:absolute; inset:0 0 auto 0; height:3px;
  background:var(--t2-gold-line);
  opacity:0;
  transition:opacity .5s var(--t2-ease);
}
.tpl2 .t2-carousel-card:hover{
  box-shadow:var(--t2-shadow-hover);
  transform:translateY(-10px) rotateX(3deg);
}
.tpl2 .t2-carousel-card:hover::after{ opacity:1; }
.tpl2 .t2-carousel-img{
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
  background:var(--bg-alt);
}
.tpl2 .t2-carousel-img img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.4s var(--t2-ease);
}
.tpl2 .t2-carousel-card:hover .t2-carousel-img img{ transform:scale(1.08); }
.tpl2 .t2-carousel-img::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 50%, rgba(var(--primary-deeper-rgb,4,31,18),.5));
  pointer-events:none;
}
.tpl2 .t2-carousel-img .t2-carousel-tag{
  position:absolute; top:1rem; left:1rem;
  background:var(--t2-accent);
  color:var(--white);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 4px 12px rgba(var(--accent-rgb),.28);
  backdrop-filter:blur(8px);
  font-family:'Inter',sans-serif;
  font-size:.92rem; letter-spacing:.16em; text-transform:uppercase;
  font-weight:800;
  padding:.38rem .85rem;
  border-radius:999px;
  z-index:2;
}
.tpl2 .t2-carousel-card:nth-child(3n+1) .t2-carousel-tag{ background:var(--t2-navy-deep); }
.tpl2 .t2-carousel-body{ padding:2.4rem 2.4rem 2.6rem; }
.tpl2 .t2-carousel-body p{
  font-family:'Source Serif Pro',serif;
  font-size:1.45rem;
  color:var(--text-secondary);
  line-height:1.7;
  margin:0;
}
.tpl2 .t2-carousel-body p::first-letter{
  font-family:'Playfair Display',serif;
  font-weight:900;
  font-size:2.4em;
  float:left;
  line-height:.85;
  margin:.08em .12em 0 0;
  color:var(--gold);
}
.tpl2 .t2-carousel-controls{
  display:flex; justify-content:center; align-items:center;
  gap:1.2rem;
  margin-top:3rem;
}
.tpl2 .t2-carousel-stage{ scroll-snap-type:x proximity; }
.tpl2 .t2-carousel-arrow{
  width:4.8rem; height:4.8rem;
  border-radius:50%;
  border:1.5px solid var(--text);
  background:transparent;
  color:var(--text);
  cursor:pointer;
  font-size:1.4rem;
  transition:.3s var(--t2-ease);
  display:flex; align-items:center; justify-content:center;
}
.tpl2 .t2-carousel-arrow:hover{
  background:var(--text);
  color:var(--white);
  transform:scale(1.08);
  box-shadow:0 10px 22px -6px rgba(var(--primary-deeper-rgb,4,31,18),.4);
}
.tpl2 .t2-carousel-dots{ display:flex; gap:.8rem; align-items:center; }
.tpl2 .t2-carousel-dots button{
  width:.8rem; height:.8rem;
  border-radius:50%;
  border:0;
  background:var(--border);
  cursor:pointer;
  padding:0;
  transition:.3s var(--t2-ease);
}
.tpl2 .t2-carousel-dots button.is-active{
  background:var(--gold);
  width:2rem;
  border-radius:99px;
  box-shadow:0 0 0 4px rgba(var(--gold-rgb,201,168,76),.2);
}

/* ════════════════════════════════════════════════════════════
   7. CORE VALUES — dark hex grid with depth glow
   ════════════════════════════════════════════════════════════ */
.tpl2 .t2-values{
  padding:7.5rem 0;
  background:
    linear-gradient(160deg, var(--t2-navy-deep) 0%, var(--t2-navy) 60%, var(--primary-dark) 100%);
  border-top:4px solid var(--t2-accent);
  color:var(--bg);
  position:relative;
  overflow:hidden;
}
.tpl2 .t2-values::before{
  content:''; position:absolute;
  top:-12rem; right:-8rem;
  width:36rem; height:36rem;
  border-radius:50%;
  background:radial-gradient(circle, rgba(var(--gold-rgb,201,168,76),.22) 0%, transparent 60%);
  pointer-events:none;
}
.tpl2 .t2-values::after{
  content:''; position:absolute;
  bottom:-12rem; left:-8rem;
  width:36rem; height:36rem;
  border-radius:50%;
  background:radial-gradient(circle, rgba(var(--primary-rgb,12,84,48),.22) 0%, transparent 60%);
  pointer-events:none;
}
.tpl2 .t2-values .t2-section-head h2{ color:var(--bg); }
.tpl2 .t2-values .t2-section-head h2 em{ color:rgba(var(--gold-rgb,201,168,76),1); }
.tpl2 .t2-values .t2-section-head p{ color:rgba(250,246,237,.68); }
.tpl2 .t2-values .t2-eyebrow{ color:rgba(var(--gold-rgb,201,168,76),1); }
.tpl2 .t2-values .t2-eyebrow::before, .t2-values .t2-eyebrow::after{ background:rgba(var(--gold-rgb,201,168,76),1); }
.tpl2 .t2-values-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(22rem,1fr));
  gap:2.6rem;
  position:relative;
  margin-top:5rem;
  perspective:var(--t2-persp);
}
.tpl2 .t2-value{
  position:relative;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(var(--gold-rgb,201,168,76),.22);
  border-radius:8px;
  padding:3rem 2.4rem;
  text-align:center;
  transition:transform .55s var(--t2-ease), background .4s, border-color .4s;
  backdrop-filter:blur(8px);
  transform-style:preserve-3d;
}
.tpl2 .t2-value::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(var(--gold-rgb,201,168,76),.10), transparent);
  opacity:0;
  transition:opacity .4s var(--t2-ease);
  border-radius:8px;
  pointer-events:none;
}
.tpl2 .t2-value:hover{
  transform:translateY(-8px) rotateX(6deg);
  border-color:rgba(var(--gold-rgb,201,168,76),1);
  background:rgba(255,255,255,.06);
}
.tpl2 .t2-value:hover::before{ opacity:1; }
.tpl2 .t2-value-num{
  font-family:'Inter',sans-serif;
  font-size:1rem;
  font-weight:700;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:rgba(var(--gold-rgb,201,168,76),1);
  display:block;
  margin-bottom:1.4rem;
}
.tpl2 .t2-value-hex{
  width:8.4rem; height:8.4rem;
  margin:0 auto 1.8rem;
  background:linear-gradient(135deg, var(--gold), rgba(var(--gold-rgb,201,168,76),.7));
  color:var(--text);
  display:flex; align-items:center; justify-content:center;
  font-size:3rem;
  clip-path:polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  transition:transform .55s var(--t2-ease), box-shadow .4s;
  filter:drop-shadow(0 8px 18px rgba(var(--gold-rgb,201,168,76),.4));
}
.tpl2 .t2-value:hover .t2-value-hex{
  transform:translateZ(18px) rotateY(10deg) scale(1.06);
  filter:drop-shadow(0 18px 34px rgba(var(--gold-rgb,201,168,76),.5));
}
.tpl2 .t2-value h3{
  font-family:'Playfair Display',serif;
  font-size:2.1rem;
  font-weight:800;
  color:var(--bg);
  margin:0 0 .8rem;
  letter-spacing:-.01em;
}
.tpl2 .t2-value p{
  font-family:'Source Serif Pro',serif;
  font-size:1.3rem;
  color:rgba(250,246,237,.72);
  line-height:1.6;
  margin:0;
}

/* ════════════════════════════════════════════════════════════
   8. PORTAL FEATURES — bento grid with 3D depth
   ════════════════════════════════════════════════════════════ */
.tpl2 .t2-features{
  padding:7.5rem 0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(var(--gold-rgb),.06) 0%, transparent 50%),
    var(--t2-cream);
  position:relative;
  overflow:hidden;
}
.tpl2 .t2-features::before{
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:var(--t2-gold-line);
}
.tpl2 .t2-features-bento{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:18rem;
  gap:1.6rem;
  perspective:var(--t2-persp);
}
.tpl2 .t2-feat{
  background:var(--white);
  border:1px solid var(--border-light);
  border-radius:8px;
  padding:2.6rem 2.4rem;
  text-decoration:none;
  color:inherit;
  display:flex; flex-direction:column;
  transition:transform .5s var(--t2-ease), box-shadow .5s var(--t2-ease), border-color .4s;
  position:relative;
  overflow:hidden;
  transform-style:preserve-3d;
}
.tpl2 .t2-feat::before{
  content:''; position:absolute; top:-3rem; right:-3rem;
  width:9rem; height:9rem; border-radius:50%;
  background:var(--primary);
  opacity:.05;
  transition:transform .6s var(--t2-ease), opacity .4s;
}
.tpl2 .t2-feat::after{
  content:''; position:absolute; inset:0 0 auto 0; height:3px;
  background:var(--t2-gold-line);
  opacity:0;
  transition:opacity .5s var(--t2-ease);
}
.tpl2 .t2-feat:hover::before{ transform:scale(2.4); opacity:.1; }
.tpl2 .t2-feat:hover{
  border-color:var(--primary);
  transform:translateY(-8px) rotateX(3deg) rotateY(-2deg);
  box-shadow:var(--t2-shadow-hover);
}
.tpl2 .t2-feat:hover::after{ opacity:1; }
.tpl2 .t2-feat-icon{
  width:5.6rem; height:5.6rem;
  border-radius:8px;
  background:linear-gradient(135deg, var(--bg-alt), var(--bg));
  color:var(--primary);
  display:flex; align-items:center; justify-content:center;
  font-size:2.2rem;
  margin-bottom:1.6rem;
  transition:.4s var(--t2-ease);
  border:1px solid var(--border);
}
.tpl2 .t2-feat:hover .t2-feat-icon{
  background:var(--primary);
  color:var(--white);
  transform:translateZ(22px) rotate(-6deg) scale(1.06);
  border-color:var(--primary);
  box-shadow:0 12px 24px rgba(var(--primary-rgb,12,84,48),.3);
}
.tpl2 .t2-feat h4{
  font-family:'Playfair Display',serif;
  font-size:1.9rem;
  font-weight:800;
  margin:0 0 .8rem;
  letter-spacing:-.01em;
  color:var(--text);
}
.tpl2 .t2-feat p{
  font-family:'Source Serif Pro',serif;
  font-size:1.35rem;
  color:var(--text-secondary);
  line-height:1.6;
  margin:0;
}
.tpl2 .t2-feat--wide{ grid-column:span 2; }
.tpl2 .t2-feat--tall{ grid-row:span 2; }
.tpl2 .t2-feat--big{ grid-column:span 2; grid-row:span 2; }
.tpl2 .t2-feat-visual{
  margin-top:auto;
  padding-top:1.6rem;
  display:flex; align-items:flex-end; gap:.6rem;
  height:7rem;
}
.tpl2 .t2-feat-bar{
  flex:1;
  background:linear-gradient(180deg, var(--primary), var(--primary-light));
  border-radius:2px;
  opacity:.85;
  transition:.4s var(--t2-ease);
  transform-origin:bottom;
}
.tpl2 .t2-feat:hover .t2-feat-bar{ opacity:1; }
.tpl2 .t2-feat-link{
  margin-top:1.6rem;
  display:inline-flex; align-items:center; gap:1rem;
  font-family:'Inter',sans-serif;
  font-size:1.2rem;
  font-weight:700;
  color:var(--primary);
  letter-spacing:.06em;
  text-transform:uppercase;
}
.tpl2 .t2-feat-link i{ transition:transform .3s; }
.tpl2 .t2-feat:hover .t2-feat-link i{ transform:translateX(6px); }

/* ════════════════════════════════════════════════════════════
   9. WHY CHOOSE US — 3D card grid
   ════════════════════════════════════════════════════════════ */
.tpl2 .t2-why{
  padding:7.5rem 0;
  background:
    radial-gradient(ellipse at 70% 0%, rgba(var(--gold-rgb,201,168,76),.08) 0%, transparent 50%),
    var(--bg);
  position:relative;
}
.tpl2 .t2-why-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:2rem;
  perspective:var(--t2-persp);
}
.tpl2 .t2-why-card{
  position:relative;
  background:var(--white);
  border-radius:8px;
  padding:3rem 2.4rem;
  text-align:center;
  border:1px solid var(--border-light);
  box-shadow:var(--t2-shadow-rest);
  transition:transform .55s var(--t2-ease), box-shadow .55s var(--t2-ease), border-color .4s;
  transform-style:preserve-3d;
  overflow:hidden;
}
.tpl2 .t2-why-card::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(var(--gold-rgb,201,168,76),.05), transparent);
  opacity:0;
  transition:opacity .4s var(--t2-ease);
}
.tpl2 .t2-why-card::after{
  content:''; position:absolute; bottom:0; left:0; right:0; height:3px;
  background:var(--t2-gold-line);
  opacity:0;
  transition:opacity .5s var(--t2-ease);
}
.tpl2 .t2-why-card:hover{
  transform:translateY(-10px) rotateX(5deg);
  box-shadow:var(--t2-shadow-hover);
  border-color:var(--gold);
}
.tpl2 .t2-why-card:hover::before{ opacity:1; }
.tpl2 .t2-why-card:hover::after{ opacity:1; }
.tpl2 .t2-why-icon{
  width:6.8rem; height:6.8rem;
  border-radius:50%;
  margin:0 auto 1.6rem;
  background:linear-gradient(135deg, var(--bg-alt), var(--bg));
  border:1.5px solid var(--gold);
  display:flex; align-items:center; justify-content:center;
  font-size:2.6rem;
  color:var(--primary);
  transition:transform .5s var(--t2-ease), background .4s, color .4s;
}
.tpl2 .t2-why-card:hover .t2-why-icon{
  background:var(--gold);
  color:var(--white);
  transform:translateZ(20px) rotate(6deg) scale(1.08);
  box-shadow:0 14px 28px rgba(var(--gold-rgb,201,168,76),.4);
}
.tpl2 .t2-why-card h3{
  font-family:'Playfair Display',serif;
  font-size:1.85rem;
  font-weight:800;
  margin:0 0 .8rem;
  letter-spacing:-.01em;
  color:var(--text);
}
.tpl2 .t2-why-card p{
  font-family:'Source Serif Pro',serif;
  font-size:1.35rem;
  color:var(--text-secondary);
  line-height:1.6;
  margin:0;
}

/* ════════════════════════════════════════════════════════════
   10. FOUNDER TESTIMONIAL — paper-lift, framed photo
   ════════════════════════════════════════════════════════════ */
.tpl2 .t2-founder{
  padding:7rem 0;
  background:
    radial-gradient(ellipse at 30% 100%, rgba(var(--gold-rgb,201,168,76),.10) 0%, transparent 50%),
    var(--bg);
  position:relative;
}
.tpl2 .t2-founder-inner{
  display:grid;
  grid-template-columns:24rem 1fr;
  gap:5rem;
  align-items:center;
  background:var(--white);
  border-radius:8px;
  padding:4rem 5rem;
  box-shadow:var(--t2-shadow-rest);
  position:relative;
  transition:transform .5s var(--t2-ease), box-shadow .5s var(--t2-ease);
  overflow:hidden;
}
.tpl2 .t2-founder-inner:hover{
  transform:translateY(-6px);
  box-shadow:var(--t2-shadow-hover);
}
.tpl2 .t2-founder-inner::before{
  content:''; position:absolute; top:0; left:4rem;
  width:5rem; height:4px;
  background:var(--gold);
  border-radius:0 0 4px 4px;
}
.tpl2 .t2-founder-inner::after{
  content:''; position:absolute; bottom:-4rem; right:-4rem;
  width:18rem; height:18rem;
  border-radius:50%;
  background:radial-gradient(circle, rgba(var(--gold-rgb,201,168,76),.10), transparent 70%);
  pointer-events:none;
}
.tpl2 .t2-founder-photo{
  position:relative;
  aspect-ratio:1;
  border-radius:8px;
  overflow:hidden;
  background:var(--bg-alt);
  box-shadow:0 24px 50px -10px rgba(var(--primary-deeper-rgb,4,31,18),.35);
  border:1px solid var(--border);
  transition:.4s var(--t2-ease);
}
.tpl2 .t2-founder-photo:hover{ transform:translateY(-4px) rotate(-1deg); box-shadow:0 30px 60px -10px rgba(var(--primary-deeper-rgb,4,31,18),.45); }
.tpl2 .t2-founder-photo img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.2s var(--t2-ease);
}
.tpl2 .t2-founder-photo:hover img{ transform:scale(1.06); }
.tpl2 .t2-founder-photo::before{
  content:''; position:absolute; inset:.8rem;
  border:1px solid rgba(255,255,255,.5);
  z-index:1; pointer-events:none;
  border-radius:4px;
}
.tpl2 .t2-founder-quote{
  font-family:'Playfair Display',serif;
  font-style:italic;
  font-size:clamp(1.8rem,2.6vw,2.4rem);
  line-height:1.45;
  font-weight:500;
  color:var(--text);
  margin:0 0 2rem;
  letter-spacing:-.01em;
  position:relative;
  padding-left:2.4rem;
}
.tpl2 .t2-founder-quote::before{
  content:'\201C';
  position:absolute;
  left:-1rem; top:-2.4rem;
  font-size:8rem;
  color:var(--gold);
  font-style:normal;
  line-height:1;
  font-weight:900;
  opacity:.9;
}
.tpl2 .t2-founder-author{
  display:flex; align-items:center; gap:1.4rem;
}
.tpl2 .t2-founder-avatar{
  width:5.2rem; height:5.2rem;
  border-radius:50%;
  background:linear-gradient(135deg, var(--primary), var(--primary-light));
  color:var(--white);
  display:flex; align-items:center; justify-content:center;
  font-family:'Playfair Display',serif;
  font-size:2.2rem; font-weight:800;
  flex-shrink:0;
  box-shadow:0 8px 18px rgba(var(--primary-rgb,12,84,48),.3);
}
.tpl2 .t2-founder-meta strong{
  display:block;
  font-family:'Playfair Display',serif;
  font-size:1.8rem;
  font-weight:800;
  color:var(--text);
}
.tpl2 .t2-founder-meta span{
  font-family:'Inter',sans-serif;
  font-size:1.1rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--text-secondary);
  font-weight:700;
}
.tpl2 .t2-founder-stars{
  margin-top:1.2rem;
  color:var(--gold);
  font-size:1.4rem;
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.6rem 1.2rem;
  background:rgba(var(--gold-rgb,201,168,76),.08);
  border:1px solid rgba(var(--gold-rgb,201,168,76),.25);
  border-radius:99px;
}
.tpl2 .t2-founder-stars i{ margin-right:.2rem; }

/* ════════════════════════════════════════════════════════════
   11. NEWS & EVENTS — editorial cards with date chip
   ════════════════════════════════════════════════════════════ */
.tpl2 .t2-news{
  padding:7.5rem 0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(var(--gold-rgb,201,168,76),.06) 0%, transparent 50%),
    var(--bg);
  position:relative;
}
.tpl2 .t2-news-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2.8rem;
  perspective:var(--t2-persp);
}
.tpl2 .t2-news-card{
  background:var(--white);
  border-radius:6px;
  overflow:hidden;
  box-shadow:var(--t2-shadow-rest);
  text-decoration:none;
  color:inherit;
  transition:transform .55s var(--t2-ease), box-shadow .55s var(--t2-ease);
  display:flex; flex-direction:column;
  transform-style:preserve-3d;
  position:relative;
}
.tpl2 .t2-news-card::after{
  content:''; position:absolute; inset:0 0 auto 0; height:3px;
  background:var(--t2-gold-line);
  opacity:0;
  transition:opacity .5s var(--t2-ease);
}
.tpl2 .t2-news-card:hover{
  transform:translateY(-10px) rotateX(3deg);
  box-shadow:var(--t2-shadow-hover);
}
.tpl2 .t2-news-card:hover::after{ opacity:1; }
.tpl2 .t2-news-img{
  position:relative;
  aspect-ratio:16/10;
  overflow:hidden;
  background:var(--bg-alt);
}
.tpl2 .t2-news-img img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.4s var(--t2-ease);
}
.tpl2 .t2-news-card:hover .t2-news-img img{ transform:scale(1.08); }
.tpl2 .t2-news-img::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 50%, rgba(var(--primary-deeper-rgb,4,31,18),.4));
  pointer-events:none;
}
.tpl2 .t2-news-date{
  position:absolute; top:1.4rem; left:1.4rem;
  background:var(--white);
  padding:1rem 1.4rem;
  border-radius:4px;
  text-align:center;
  box-shadow:0 6px 16px rgba(var(--primary-deeper-rgb,4,31,18),.2);
  z-index:2;
  border:1px solid var(--border);
  transition:.4s var(--t2-ease);
}
.tpl2 .t2-news-card:hover .t2-news-date{
  background:var(--gold);
  border-color:var(--gold);
  color:var(--white);
  transform:rotate(-4deg) scale(1.05);
}
.tpl2 .t2-news-date strong{
  display:block;
  font-family:'Playfair Display',serif;
  font-size:2.4rem;
  font-weight:900;
  color:var(--primary);
  line-height:1;
  transition:.4s var(--t2-ease);
}
.tpl2 .t2-news-card:hover .t2-news-date strong{ color:var(--white); }
.tpl2 .t2-news-date span{
  font-family:'Inter',sans-serif;
  font-size:1rem;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--text-secondary);
  transition:.4s var(--t2-ease);
}
.tpl2 .t2-news-card:hover .t2-news-date span{ color:var(--white); }
.tpl2 .t2-news-body{
  padding:2.4rem 2.4rem 2.6rem;
  flex:1; display:flex; flex-direction:column;
}
.tpl2 .t2-news-tag{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:'Inter',sans-serif;
  font-size:1rem; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold);
  margin-bottom:1rem;
  align-self:flex-start;
  padding:.4rem 1rem;
  background:rgba(var(--gold-rgb,201,168,76),.08);
  border-radius:99px;
}
.tpl2 .t2-news-tag i{ color:var(--primary); }
.tpl2 .t2-news-card h3{
  font-family:'Playfair Display',serif;
  font-size:2rem;
  font-weight:800;
  margin:0 0 1rem;
  letter-spacing:-.012em;
  line-height:1.25;
  color:var(--text);
}
.tpl2 .t2-news-card p{
  font-family:'Source Serif Pro',serif;
  font-size:1.35rem;
  color:var(--text-secondary);
  line-height:1.65;
  margin:0 0 1.6rem;
  flex:1;
}
.tpl2 .t2-news-link{
  display:inline-flex; align-items:center; gap:.8rem;
  font-family:'Inter',sans-serif;
  font-size:1.15rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--primary);
  padding-top:1.4rem;
  border-top:1px solid var(--border-light);
}
.tpl2 .t2-news-link i{ transition:transform .3s; }
.tpl2 .t2-news-card:hover .t2-news-link i{ transform:translateX(6px); }

/* ════════════════════════════════════════════════════════════
   12. NEWSLETTER CTA — gradient orbs, glass form
   ════════════════════════════════════════════════════════════ */
.tpl2 .t2-cta{
  padding:7rem 0;
  background:
    linear-gradient(160deg, var(--t2-navy-deep) 0%, var(--t2-navy) 60%, var(--primary-dark) 100%);
  border-top:4px solid var(--t2-gold);
  color:var(--bg);
  position:relative;
  overflow:hidden;
}
.tpl2 .t2-cta::before{
  content:''; position:absolute;
  top:-30%; right:-10%;
  width:60rem; height:60rem;
  border-radius:50%;
  background:radial-gradient(circle, rgba(var(--gold-rgb,201,168,76),.22) 0%, transparent 60%);
  pointer-events:none;
}
.tpl2 .t2-cta::after{
  content:''; position:absolute;
  bottom:-30%; left:-10%;
  width:60rem; height:60rem;
  border-radius:50%;
  background:radial-gradient(circle, rgba(var(--primary-rgb,12,84,48),.26) 0%, transparent 60%);
  pointer-events:none;
}
.tpl2 .t2-cta-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5rem;
  align-items:center;
  position:relative;
}
.tpl2 .t2-cta-text{ position:relative; }
.tpl2 .t2-cta-text h2{
  font-family:'Playfair Display',serif;
  font-size:clamp(2.6rem,4.4vw,4rem);
  font-weight:800;
  line-height:1.1;
  margin:0 0 1.6rem;
  letter-spacing:-.02em;
  color:var(--bg);
}
.tpl2 .t2-cta-text h2 em{ color:rgba(var(--gold-rgb,201,168,76),1); font-style:italic; }
.tpl2 .t2-cta-text p{
  font-family:'Source Serif Pro',serif;
  font-size:1.5rem;
  color:rgba(250,246,237,.78);
  line-height:1.75;
  margin:0 0 2.4rem;
}
.tpl2 .t2-cta-stats{ display:flex; gap:3rem; flex-wrap:wrap; }
.tpl2 .t2-cta-stat{
  transition:.4s var(--t2-ease);
  padding:1rem 0;
}
.tpl2 .t2-cta-stat:hover{ transform:translateY(-4px); }
.tpl2 .t2-cta-stat strong{
  display:block;
  font-family:'Playfair Display',serif;
  font-size:2.8rem;
  font-weight:800;
  color:rgba(var(--gold-rgb,201,168,76),1);
  line-height:1;
  text-shadow:0 4px 24px rgba(var(--gold-rgb,201,168,76),.3);
}
.tpl2 .t2-cta-stat span{
  font-family:'Inter',sans-serif;
  font-size:1.05rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(250,246,237,.7);
  margin-top:.4rem;
  display:block;
  font-weight:700;
}
.tpl2 .t2-cta-form{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(var(--gold-rgb,201,168,76),.28);
  border-radius:8px;
  padding:3.4rem;
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  position:relative;
  overflow:hidden;
  transition:transform .5s var(--t2-ease), box-shadow .5s;
  box-shadow:0 30px 60px -18px rgba(0,0,0,.5);
}
.tpl2 .t2-cta-form::before{
  content:''; position:absolute; top:0; left:0;
  width:5rem; height:3px;
  background:var(--gold);
  border-radius:0 0 3px 3px;
}
.tpl2 .t2-cta-form:hover{
  transform:translateY(-6px);
  box-shadow:0 40px 80px -18px rgba(0,0,0,.6);
}
.tpl2 .t2-cta-form h3{
  font-family:'Playfair Display',serif;
  font-size:2.2rem;
  font-weight:800;
  color:var(--bg);
  margin:0 0 .4rem;
  letter-spacing:-.01em;
}
.tpl2 .t2-cta-form .t2-form-tag{
  font-family:'Inter',sans-serif;
  font-size:1rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:rgba(var(--gold-rgb,201,168,76),1);
  font-weight:700;
  display:inline-flex; align-items:center; gap:.6rem;
  margin-bottom:2rem;
  padding-bottom:1.4rem;
  border-bottom:1px solid rgba(var(--gold-rgb,201,168,76),.2);
  width:100%;
}
.tpl2 .t2-cta-form .t2-form-tag i{ font-size:1.2rem; }
.tpl2 .t2-cta-input{
  width:100%;
  padding:1.4rem 1.8rem;
  font-size:1.4rem;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  border-radius:4px;
  color:var(--bg);
  margin-bottom:1.4rem;
  font-family:'Inter',sans-serif;
  transition:.25s var(--t2-ease);
}
.tpl2 .t2-cta-input:focus{
  outline:none;
  border-color:rgba(var(--gold-rgb,201,168,76),1);
  background:rgba(255,255,255,.10);
  box-shadow:0 0 0 4px rgba(var(--gold-rgb,201,168,76),.15);
}
.tpl2 .t2-cta-input::placeholder{ color:rgba(250,246,237,.45); }
.tpl2 .t2-cta-submit{
  width:100%;
  padding:1.4rem 2rem;
  background:linear-gradient(135deg, var(--gold), rgba(var(--gold-rgb,201,168,76),.7));
  color:var(--text);
  border:0;
  border-radius:4px;
  font-family:'Inter',sans-serif;
  font-size:1.3rem;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  cursor:pointer;
  transition:.3s var(--t2-ease);
  display:inline-flex; align-items:center; justify-content:center; gap:1rem;
  position:relative;
  overflow:hidden;
}
.tpl2 .t2-cta-submit::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(var(--gold-rgb,201,168,76),1), var(--gold));
  opacity:0;
  transition:opacity .3s var(--t2-ease);
}
.tpl2 .t2-cta-submit:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 32px rgba(var(--gold-rgb,201,168,76),.5);
}
.tpl2 .t2-cta-submit:hover::before{ opacity:1; }
.tpl2 .t2-cta-submit i, .t2-cta-submit span{ position:relative; z-index:1; }
.tpl2 .t2-cta-foot{
  font-family:'Inter',sans-serif;
  font-size:1.05rem;
  color:rgba(250,246,237,.55);
  margin-top:1.4rem;
  text-align:center;
  letter-spacing:.04em;
}
.tpl2 .t2-cta-foot i{ color:rgba(var(--gold-rgb,201,168,76),1); margin-right:.4rem; }

/* ─── Reduced motion ─── */
@media (prefers-reduced-motion: reduce){
  .tpl2 .t2-reveal{ opacity:1 !important; transform:none !important; }
  .tpl2 *{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
}

/* ─── Responsive ─── */
@media (max-width: 1100px){
  .tpl2 .t2-hero{ padding:5.5rem 0 5rem; }
  .tpl2 .t2-hero-grid{ grid-template-columns:1fr; gap:3.5rem; }
  .tpl2 .t2-hero-side{ height:42rem; max-width:36rem; margin:0 auto; width:100%; }
  .tpl2 .t2-hero-photo{ inset:1.5rem; }
  .tpl2 .t2-vm-grid, .tpl2 .t2-cta-grid, .tpl2 .t2-founder-inner{ grid-template-columns:1fr; gap:3rem; }
  .tpl2 .t2-founder-photo{ max-width:32rem; margin:0 auto; }
  .tpl2 .t2-features-bento{ grid-template-columns:repeat(2,1fr); }
  .tpl2 .t2-feat--wide, .tpl2 .t2-feat--big{ grid-column:span 2; grid-row:auto; }
  .tpl2 .t2-feat--tall{ grid-row:auto; }
  .tpl2 .t2-founder-inner{ padding:3rem; }
}
@media (max-width: 900px){
  .tpl2 .t2-hero{ padding:4.8rem 0 4rem; }
  .tpl2 .t2-hero-grid{ gap:3rem; }
  .tpl2 .t2-stats-grid{ grid-template-columns:repeat(3,1fr); gap:0; }
  .tpl2 .t2-stat{ border-left:1px solid rgba(var(--gold-rgb,201,168,76),.2); border-top:none; padding:1.6rem .8rem; }
  .tpl2 .t2-stat:first-child{ border-left:none; border-top:none; }
  .tpl2 .t2-stat-num{ font-size:clamp(2.8rem,5vw,3.6rem); }
  .tpl2 .t2-stat-label{ font-size:.95rem; letter-spacing:.14em; }
  .tpl2 .t2-stat-icon{ width:3.6rem; height:3.6rem; font-size:1.3rem; margin-bottom:.6rem; }
  .tpl2 .t2-levels-grid, .tpl2 .t2-news-grid, .tpl2 .t2-why-grid{ grid-template-columns:1fr; gap:2rem; }
  .tpl2 .t2-carousel-card{ flex:0 0 calc((100% - 2.4rem) / 2); }
  .tpl2 .t2-features-bento{ grid-template-columns:1fr; }
  .tpl2 .t2-feat--wide, .tpl2 .t2-feat--big{ grid-column:span 1; }
  .tpl2 .t2-hero-cta{ flex-direction:row; flex-wrap:nowrap; gap:.8rem; }
  .tpl2 .t2-hero-cta .t2-btn{ flex:1 1 0; min-width:0; white-space:nowrap; justify-content:center; }
  .tpl2 .t2-hero-trust{ grid-template-columns:repeat(3,1fr); gap:.6rem; }
  .tpl2 .t2-trust-item{ flex-direction:column; text-align:center; gap:.4rem; align-items:center; }
  .tpl2 .t2-trust-icon{ width:3.2rem; height:3.2rem; font-size:1.2rem; }
  .tpl2 .t2-trust-text strong{ font-size:1.25rem; line-height:1.1; }
  .tpl2 .t2-trust-text span{ font-size:.82rem; letter-spacing:.10em; line-height:1.25; }
  .tpl2 .t2-hero-side{ height:42rem; max-width:34rem; }
  .tpl2 .t2-hero-photo{ inset:1rem; }
}
@media (max-width: 640px){
  .tpl2 .t2-hero{ padding:4.2rem 0 3.8rem; }
  .tpl2 .t2-hero-grid{ gap:2.6rem; }
  .tpl2 .t2-hero-side{ height:34rem; max-width:26rem; }
  .tpl2 .t2-hero-cta{ flex-direction:row !important; flex-wrap:nowrap !important; gap:.6rem !important; }
  .tpl2 .t2-hero-cta .t2-btn{ flex:1 1 0 !important; min-width:0 !important; width:auto !important; justify-content:center !important; white-space:nowrap !important; padding:.85rem .6rem !important; font-size:.95rem !important; }
  .tpl2 .t2-hero-trust{ grid-template-columns:repeat(3,1fr) !important; gap:.4rem !important; }
  .tpl2 .t2-trust-item{ flex-direction:column !important; text-align:center !important; padding:.3rem 0 !important; gap:.35rem !important; align-items:center !important; }
  .tpl2 .t2-trust-icon{ width:2.8rem !important; height:2.8rem !important; font-size:1.05rem !important; }
  .tpl2 .t2-trust-text strong{ font-size:1.02rem !important; line-height:1.1 !important; }
  .tpl2 .t2-trust-text span{ font-size:.72rem !important; letter-spacing:.08em !important; line-height:1.25 !important; }
  .tpl2 .t2-stats-grid{ grid-template-columns:repeat(3,1fr) !important; gap:0 !important; }
  .tpl2 .t2-stat{ padding:1.1rem .35rem !important; border-left:1px solid rgba(var(--gold-rgb,201,168,76),.2) !important; border-top:none !important; }
  .tpl2 .t2-stat:first-child{ border-left:none !important; }
  .tpl2 .t2-stat-num{ font-size:clamp(2.2rem,6vw,2.8rem) !important; }
  .tpl2 .t2-stat-label{ font-size:.78rem !important; letter-spacing:.10em !important; }
  .tpl2 .t2-stat-icon{ width:3rem !important; height:3rem !important; font-size:1.15rem !important; margin-bottom:.4rem !important; }
  .tpl2 .t2-carousel-stage{ overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .tpl2 .t2-carousel-stage::-webkit-scrollbar{ display:none; }
  .tpl2 .t2-carousel-track{ transition:none; }
  .tpl2 .t2-carousel-controls{ gap:1rem; margin-top:2rem; }
  .tpl2 .t2-hero-photo{ inset:1rem; }
  .tpl2 .t2-carousel-card{ flex:0 0 86%; scroll-snap-align:start; }
  .tpl2 .t2-glass-card{ padding:1.2rem 1.4rem; }
  .tpl2 .t2-glass-card--issue{ width:11rem; left:0; top:0; padding:1rem 1.2rem; }
  .tpl2 .t2-glass-card--issue strong{ font-size:1.3rem; }
  .tpl2 .t2-glass-card--issue span{ font-size:.85rem; letter-spacing:.18em; }
  .tpl2 .t2-glass-card--issue .t2-ribbon{ top:-.7rem; right:-.7rem; font-size:.85rem; padding:.3rem .7rem; }
  .tpl2 .t2-glass-card--meta{ display:none; }
  .tpl2 .t2-glass-card--featured{ width:14rem; right:0; bottom:1rem; padding:1rem 1.2rem; }
  .tpl2 .t2-glass-card--featured h4{ font-size:1.3rem; }
  .tpl2 .t2-glass-card--featured p{ font-size:1rem; }
  .tpl2 .t2-glass-card--featured .t2-tag{ font-size:.85rem; padding:.3rem .7rem; margin-bottom:.6rem; }
  .tpl2 .t2-hero-badge{ right:0; top:0; font-size:.9rem; padding:.8rem 1rem; letter-spacing:.1em; }
  .tpl2 .t2-hero-photo-tag{ font-size:.85rem; padding:.5rem 1rem; letter-spacing:.18em; }
  .tpl2 .t2-hero-photo-overlay h3{ font-size:1.3rem; }
  .tpl2 .t2-hero-photo-overlay span{ font-size:.85rem; }
  .tpl2 .t2-hero h1{ font-size:3.4rem; }
  .tpl2 .t2-founder-inner{ padding:2.4rem; }
  .tpl2 .t2-cta-form{ padding:2.4rem; }
  .tpl2 .t2-cta-stats{ gap:1.6rem; }
  .tpl2 .t2-cta-stat strong{ font-size:2.2rem; }
}
@media (max-width: 420px){
  .tpl2 .t2-hero-side{ height:34rem; max-width:24rem; }
  .tpl2 .t2-hero-photo{ inset:.6rem; }
}
@media (max-width: 380px){
  .tpl2 .t2-hero-cta{ gap:.4rem !important; }
  .tpl2 .t2-hero-cta .t2-btn{ padding:.75rem .45rem !important; font-size:.88rem !important; gap:.35rem !important; }
  .tpl2 .t2-hero-trust{ gap:.3rem !important; }
  .tpl2 .t2-trust-icon{ width:2.6rem !important; height:2.6rem !important; font-size:.95rem !important; }
  .tpl2 .t2-trust-text strong{ font-size:.92rem !important; }
  .tpl2 .t2-trust-text span{ font-size:.68rem !important; }
  .tpl2 .t2-stats-grid{ gap:0 !important; }
  .tpl2 .t2-stat{ padding:.9rem .3rem !important; }
  .tpl2 .t2-stat-num{ font-size:2rem !important; }
  .tpl2 .t2-stat-label{ font-size:.72rem !important; }
}


/* =====================================================
   TEMPLATE 3 — BOLD SPLIT (premium) — REBUILT 2026
   First-principles rebuild:
   - 100% dynamic via :root tokens (no hardcoded brand hex)
   - Footer-palette fusion for dark bands
   - Balanced rhythm per-section padding
   - New snapshot mission/values carousel (draggable)
   - Full responsive overhaul
   ===================================================== */
.tpl3{
  --t3-ink:var(--primary-deeper);
  --t3-ink-2:var(--primary-dark);
  --t3-paper:var(--cream);
  --t3-paper-2:var(--white);
  --t3-paper-3:var(--primary-mist);
  --t3-accent:var(--primary);
  --t3-accent-glow:rgba(var(--primary-rgb),.28);
  --t3-accent-2:var(--gold);
  --t3-accent-3:var(--accent);
  --t3-gold:var(--gold);
  --t3-gold-b:var(--gold-bright);
  --t3-gold-d:var(--gold-dim);
  --t3-line:rgba(var(--primary-deeper-rgb),.08);
  --t3-line-strong:rgba(var(--primary-deeper-rgb),.14);
  --t3-white-line:rgba(255,255,255,.14);
  --t3-persp:1600px;
  --t3-ease:cubic-bezier(.2,.8,.2,1);
  --t3-spring:cubic-bezier(.34,1.56,.64,1);
  font-family:'Inter','Open Sans',system-ui,sans-serif;
  color:var(--t3-ink);
  background:var(--t3-paper);
  overflow-x:hidden;
  perspective:var(--t3-persp);
}
.tpl3 *{ box-sizing:border-box; }
.tpl3 img{ max-width:100%; display:block; }
.tpl3 .t3-container{ max-width:1240px; margin:0 auto; padding:0 2.4rem; }
.tpl3 a{ color:inherit; text-decoration:none; }

/* ─── Reveal ─── */
.tpl3 .t3-reveal{ opacity:0; transform:translateY(36px); transition: opacity .7s var(--t3-ease), transform .7s var(--t3-ease); }
.tpl3 .t3-reveal.is-in{ opacity:1; transform:none; }
.tpl3 .t3-reveal--l{ transform:translateX(-40px) rotateY(6deg); transform-origin:left center; }
.tpl3 .t3-reveal--r{ transform:translateX(40px) rotateY(-6deg); transform-origin:right center; }
.tpl3 .t3-reveal--3d{ transform:translateY(40px) rotateX(7deg); transform-origin:center bottom; }
.tpl3 .t3-reveal--l.is-in, .tpl3 .t3-reveal--r.is-in, .tpl3 .t3-reveal--3d.is-in{ transform:none; }
.tpl3 .t3-reveal[data-d="1"]{ transition-delay:.06s; }
.tpl3 .t3-reveal[data-d="2"]{ transition-delay:.14s; }
.tpl3 .t3-reveal[data-d="3"]{ transition-delay:.22s; }
.tpl3 .t3-reveal[data-d="4"]{ transition-delay:.30s; }
.tpl3 .t3-reveal[data-d="5"]{ transition-delay:.38s; }

/* ─── Typographic primitives ─── */
.tpl3 .t3-eyebrow{
  display:inline-flex; align-items:center; gap:.9rem;
  font-family:'Inter',sans-serif;
  font-size:1.12rem; font-weight:700;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--t3-accent);
}
.tpl3 .t3-eyebrow::before{ content:''; width:2.8rem; height:2px; background:var(--t3-accent); border-radius:999px; }
.tpl3 .t3-eyebrow--center{ justify-content:center; }
.tpl3 .t3-eyebrow--center::before{ background:linear-gradient(90deg, transparent, var(--t3-accent), transparent); width:3.6rem; }
.tpl3 .t3-eyebrow--white{ color:var(--t3-gold-b); }
.tpl3 .t3-eyebrow--white::before{ background:var(--t3-gold-b); }
.tpl3 .t3-head{ margin-bottom:3.6rem; max-width:62rem; }
.tpl3 .t3-head h2{
  font-family:'Bricolage Grotesque','Poppins',sans-serif;
  font-size:clamp(2.7rem,4.4vw,4.4rem); font-weight:800;
  letter-spacing:-.03em; margin:1rem 0 0; line-height:.98; color:var(--t3-ink);
}
.tpl3 .t3-head h2::after{
  content:''; display:block; width:5rem; height:3px; border-radius:999px;
  background:linear-gradient(90deg, var(--t3-accent), var(--t3-gold));
  margin-top:1.4rem;
}
.tpl3 .t3-head--center{ text-align:center; margin-left:auto; margin-right:auto; }
.tpl3 .t3-head--center h2::after{ margin-left:auto; margin-right:auto; }

/* ─── HERO — 3D layered split with depth (footer-fused dark) ─── */
.tpl3 .t3-hero{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  min-height:min(88vh, 860px);
  position:relative;
  background:
    radial-gradient(circle at 12% 86%,rgba(var(--gold-rgb),.16),transparent 30%),
    radial-gradient(circle at 82% 12%,rgba(var(--primary-light-rgb),.24),transparent 36%),
    linear-gradient(145deg,var(--t3-ink) 0%,var(--t3-ink-2) 58%,var(--t3-ink) 100%);
  color:var(--white);
  overflow:hidden;
  transform-style:preserve-3d;
  border-bottom:4px solid var(--t3-accent-3);
}
.tpl3 .t3-hero::before{
  content:''; position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 15% 90%, rgba(var(--gold-rgb),.14) 0%, transparent 34%),
    radial-gradient(circle at 80% 10%, rgba(var(--primary-rgb),.26) 0%, transparent 38%);
  pointer-events:none;
  opacity:.9;
}
.tpl3 .t3-hero::after{
  content:''; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size: 4.8rem 4.8rem;
  mask-image: radial-gradient(ellipse at center, black 36%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 36%, transparent 80%);
  pointer-events:none;
}
.tpl3 .t3-hero-left{
  display:flex; flex-direction:column; justify-content:center;
  padding:7rem clamp(2rem,4vw,5rem) 6rem;
  position:relative; z-index:2;
}
.tpl3 .t3-hero-left::after{
  content:''; position:absolute; width:20rem; height:20rem; left:-9rem; top:13%;
  border:1px solid rgba(255,255,255,.07); border-radius:50%;
  box-shadow:0 0 0 3.5rem rgba(255,255,255,.015),0 0 0 7rem rgba(255,255,255,.01);
  pointer-events:none;
}
.tpl3 .t3-tag{
  display:inline-flex; align-items:center; gap:.9rem;
  background:linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,.04));
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.16);
  padding:.7rem 1.3rem .7rem 1rem;
  border-radius:999px;
  font-size:1.02rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  width:fit-content; margin-bottom:2.2rem;
  position:relative; overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 10px 28px rgba(0,0,0,.18);
  color:rgba(255,255,255,.92);
}
.tpl3 .t3-tag::before{
  content:''; position:absolute; left:1.1rem; top:50%; transform:translateY(-50%);
  width:.62rem; height:.62rem; background:var(--t3-gold); border-radius:50%;
  box-shadow:0 0 0 0 rgba(var(--gold-rgb),.55);
  animation:t3pulse 2.2s ease-in-out infinite;
}
@keyframes t3pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(var(--gold-rgb),.55); }
  50%{ box-shadow:0 0 0 8px rgba(var(--gold-rgb),0); }
}
.tpl3 .t3-tag span{ margin-left:1.3rem; }
.tpl3 .t3-hero h1{
  font-family:'Bricolage Grotesque','Poppins',sans-serif;
  font-size:clamp(3.4rem,6vw,6.4rem);
  font-weight:800;
  line-height:.96;
  letter-spacing:-.04em;
  margin:0 0 2rem;
  color:var(--white);
  text-wrap:balance;
  max-width:42rem;
  text-shadow:0 10px 32px rgba(0,0,0,.22);
}
.tpl3 .t3-hero h1 .t3-stroke{
  -webkit-text-stroke:1.6px rgba(255,255,255,.88); color:transparent;
  font-style:italic; font-weight:700;
}
.tpl3 .t3-hero h1 .t3-accent-word{ color:var(--t3-gold-b); text-shadow:0 0 28px rgba(var(--gold-rgb),.22); }
.tpl3 .t3-hero p{
  font-size:1.52rem; color:rgba(255,255,255,.72); line-height:1.66;
  max-width:48rem; margin:0 0 2.8rem;
}
.tpl3 .t3-cta-row{ display:flex; gap:1.2rem; flex-wrap:wrap; }
.tpl3 .t3-btn{
  display:inline-flex; align-items:center; gap:.8rem;
  padding:1.35rem 2.6rem;
  border-radius:999px;
  font-weight:800; font-size:1.32rem;
  text-decoration:none;
  transition:transform .3s var(--t3-ease), box-shadow .3s var(--t3-ease), background .3s, border-color .3s;
  position:relative;
  font-family:'Inter',sans-serif;
  letter-spacing:.01em;
  border:0; cursor:pointer;
  will-change:transform;
  overflow:hidden; isolation:isolate;
  white-space:nowrap;
}
.tpl3 .t3-btn::before{
  content:''; position:absolute; inset:-1px; z-index:-1;
  background:linear-gradient(110deg,transparent 18%,rgba(255,255,255,.38) 46%,transparent 70%);
  transform:translateX(-120%); transition:transform .6s var(--t3-ease);
}
.tpl3 .t3-btn:hover::before{ transform:translateX(120%); }
.tpl3 .t3-btn--solid{
  background:linear-gradient(135deg,var(--t3-gold-b) 0%, var(--t3-gold) 52%, var(--t3-accent-3) 100%);
  color:var(--t3-ink);
  box-shadow:0 12px 28px rgba(var(--gold-rgb),.28), inset 0 1px 0 rgba(255,255,255,.45), inset 0 -3px 0 rgba(0,0,0,.14);
}
.tpl3 .t3-btn--solid:hover{ transform:translateY(-3px); box-shadow:0 18px 38px rgba(var(--gold-rgb),.38), inset 0 1px 0 rgba(255,255,255,.45); }
.tpl3 .t3-btn--solid::after{ content:'\2192'; transition:transform .25s; margin-left:.2rem; }
.tpl3 .t3-btn--solid:hover::after{ transform:translateX(4px); }
.tpl3 .t3-btn--outline{
  border:1.5px solid rgba(255,255,255,.32); color:var(--white);
  background:rgba(255,255,255,.05);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.tpl3 .t3-btn--outline:hover{ border-color:var(--t3-gold-b); color:var(--t3-gold-b); background:rgba(255,255,255,.10); transform:translateY(-3px); }

.tpl3 .t3-hero-right{ position:relative; overflow:visible; transform-style:preserve-3d; isolation:isolate; }
.tpl3 .t3-hero-right::before{
  content:''; position:absolute; width:30rem; height:30rem; right:8%; top:9%; border-radius:50%;
  background:var(--t3-gold); opacity:.10; filter:blur(42px); pointer-events:none;
}
.tpl3 .t3-collage{
  position:absolute; inset:4.5rem 3rem 4.5rem 0;
  display:grid; grid-template-columns:1.2fr 1fr; grid-template-rows:1fr 1fr;
  gap:1.1rem; padding:1rem;
  border:1px solid rgba(255,255,255,.13); border-radius:2.6rem;
  background:rgba(255,255,255,.05); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  box-shadow:0 32px 70px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.12);
  transform:perspective(1400px) rotateX(var(--t3-tilt-x,0deg)) rotateY(var(--t3-tilt-y,-4deg)) translateZ(0);
  transition:transform .35s ease-out; transform-style:preserve-3d;
}
.tpl3 .t3-collage > *{
  position:relative; overflow:hidden; border-radius:1.8rem;
  background:var(--t3-ink-2);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 14px 32px rgba(0,0,0,.32);
  transition:transform .5s var(--t3-ease);
}
.tpl3 .t3-collage > *:hover{ transform:translateZ(10px); z-index:2; }
.tpl3 .t3-collage > *:first-child{ grid-row:span 2; transform:translateZ(2px); }
.tpl3 .t3-collage > *:nth-child(2){ transform:translateZ(4px); }
.tpl3 .t3-collage > *:nth-child(3){ transform:translateZ(6px); }
.tpl3 .t3-collage img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s ease; }
.tpl3 .t3-collage > *:hover img{ transform:scale(1.06); }
.tpl3 .t3-collage > *::after{
  content:attr(data-label); position:absolute; left:.9rem; bottom:.9rem; z-index:2;
  padding:.5rem .85rem; border:1px solid rgba(255,255,255,.16); border-radius:999px;
  background:rgba(var(--primary-deeper-rgb),.68); color:var(--white);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  font-size:.84rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
}
.tpl3 .t3-hero-stat{
  position:absolute; bottom:2.6rem; right:1.6rem;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  color:var(--t3-ink);
  padding:1.6rem 1.9rem; border-radius:1.6rem;
  box-shadow:0 18px 48px rgba(0,0,0,.38), inset 0 0 0 1px rgba(255,255,255,.5);
  z-index:3;
  min-width:15rem;
  transform:rotate(1.5deg) translateZ(8px);
  border:1px solid rgba(var(--gold-rgb),.18);
}
.tpl3 .t3-hero-stat::before{
  content:''; position:absolute; top:-.4rem; left:1.6rem;
  width:.9rem; height:.9rem; background:var(--t3-gold); border-radius:50%;
  box-shadow:0 0 0 5px rgba(var(--gold-rgb),.16);
}
.tpl3 .t3-hero-stat strong{
  display:block; font-family:'Bricolage Grotesque',sans-serif;
  font-size:2.9rem; font-weight:800;
  color:var(--t3-accent); line-height:1;
  letter-spacing:-.02em;
}
.tpl3 .t3-hero-stat span{
  display:block; margin-top:.3rem;
  font-size:1rem; color:var(--t3-ink);
  text-transform:uppercase; letter-spacing:.14em;
  font-weight:700; opacity:.62;
}
.tpl3 .t3-floating-card{
  position:absolute; left:-1rem; top:5.5rem;
  background:rgba(var(--primary-deeper-rgb),.76);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.13);
  border-radius:1.4rem;
  padding:1rem 1.2rem;
  display:flex; align-items:center; gap:.9rem;
  z-index:3;
  transform:translateZ(9px);
  box-shadow:0 16px 36px rgba(0,0,0,.28);
  animation: t3float 5s ease-in-out infinite;
}
@keyframes t3float{ 0%,100%{ transform:translateZ(9px) translateY(0); } 50%{ transform:translateZ(9px) translateY(-8px); } }
.tpl3 .t3-floating-card .t3-fc-icon{
  width:3.2rem; height:3.2rem;
  border-radius:.9rem;
  background:linear-gradient(135deg, var(--t3-gold-b), var(--t3-gold));
  display:flex; align-items:center; justify-content:center;
  color:var(--t3-ink); font-size:1.3rem; flex-shrink:0;
  box-shadow:0 6px 14px rgba(var(--gold-rgb),.28);
}
.tpl3 .t3-floating-card strong{ display:block; font-size:1.12rem; font-weight:800; color:var(--white); line-height:1.1; }
.tpl3 .t3-floating-card span{ font-size:.95rem; color:rgba(255,255,255,.72); line-height:1.2; }

.tpl3 .t3-hero-trust{ display:flex; gap:.9rem; flex-wrap:wrap; margin-top:2.8rem; }
.tpl3 .t3-trust-pill{
  display:flex; align-items:center; gap:.7rem; min-width:12rem;
  padding:.9rem 1.1rem; border:1px solid rgba(255,255,255,.10); border-radius:1.2rem;
  background:rgba(255,255,255,.04); color:rgba(255,255,255,.72);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05); transition:all .25s var(--t3-ease);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}
.tpl3 .t3-trust-pill:hover{ transform:translateY(-3px); background:rgba(255,255,255,.08); border-color:rgba(var(--gold-rgb),.38); }
.tpl3 .t3-trust-pill i{ color:var(--t3-gold-b); font-size:1.32rem; }
.tpl3 .t3-trust-pill span{ font-size:.98rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; }

.tpl3 .t3-scroll-cue{
  position:absolute; left:2rem; bottom:1.6rem;
  display:flex; align-items:center; gap:.9rem;
  font-size:1rem; letter-spacing:.14em; text-transform:uppercase;
  font-weight:700; color:rgba(255,255,255,.48);
  z-index:3;
}
.tpl3 .t3-scroll-cue::after{
  content:''; width:.12rem; height:3.2rem; background:rgba(255,255,255,.24);
  animation:t3scroll-cue 2s ease-in-out infinite;
  transform-origin: top; border-radius:999px;
}
@keyframes t3scroll-cue{ 0%,100%{ transform:scaleY(.45); opacity:.3; } 50%{ transform:scaleY(1); opacity:1; } }

/* ─── Ticker marquee — footer accent strip ─── */
.tpl3 .t3-ticker{ background:var(--t3-gold); color:var(--t3-ink); padding:1.1rem 0; overflow:hidden; white-space:nowrap; position:relative; border-top:1px solid rgba(255,255,255,.18); border-bottom:1px solid rgba(0,0,0,.08); box-shadow:0 10px 28px rgba(var(--gold-rgb),.14); }
.tpl3 .t3-ticker::before, .tpl3 .t3-ticker::after{
  content:''; position:absolute; top:0; bottom:0; width:5rem; z-index:2; pointer-events:none;
}
.tpl3 .t3-ticker::before{ left:0; background:linear-gradient(90deg, var(--t3-gold), transparent); }
.tpl3 .t3-ticker::after{ right:0; background:linear-gradient(270deg, var(--t3-gold), transparent); }
.tpl3 .t3-ticker-track{
  display:inline-flex; gap:3.2rem; align-items:center;
  font-weight:800; font-size:1.32rem;
  text-transform:uppercase; letter-spacing:.11em;
  animation:t3scroll 30s linear infinite;
  padding-left:3.2rem;
  will-change:transform;
}
.tpl3 .t3-ticker-track span{ display:inline-flex; align-items:center; gap:1.1rem; }
.tpl3 .t3-ticker-track .t3-dot{ width:.62rem; height:.62rem; background:var(--t3-ink); border-radius:50%; flex-shrink:0; }
@keyframes t3scroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
.tpl3 .t3-ticker-track:hover{ animation-play-state:paused; }

/* ─── Levels — MODERN PROFESSIONAL CARDS — balanced padding ─── */
.tpl3 .t3-levels{
  padding:7.5rem 0;
  background:
    radial-gradient(ellipse at 18% 10%, rgba(var(--primary-rgb),.05) 0%, transparent 48%),
    radial-gradient(ellipse at 92% 88%, rgba(var(--gold-rgb),.06) 0%, transparent 44%),
    linear-gradient(180deg, var(--t3-paper) 0%, var(--t3-paper-2) 100%);
  position:relative; overflow:hidden;
}
.tpl3 .t3-levels::before{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(rgba(var(--primary-deeper-rgb),.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--primary-deeper-rgb),.025) 1px, transparent 1px);
  background-size:46px 46px;
  mask-image: radial-gradient(ellipse at center, #000 32%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 32%, transparent 72%);
  opacity:.32; pointer-events:none;
}
.tpl3 .t3-levels-header{ text-align:center; max-width:68rem; margin:0 auto 4.5rem; position:relative; z-index:2; }
.tpl3 .t3-levels-header .t3-eyebrow{ justify-content:center; }
.tpl3 .t3-levels-title{
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:clamp(2.8rem,4.6vw,4.6rem); font-weight:800;
  letter-spacing:-.03em; line-height:1.02; margin:1.2rem 0 0;
  color:var(--t3-ink);
}
.tpl3 .t3-levels-title-accent{
  background:linear-gradient(135deg, var(--t3-accent) 0%, var(--t3-gold-d) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}
.tpl3 .t3-levels-sub{
  font-size:1.38rem; font-weight:500;
  line-height:1.68; color:var(--t3-ink); opacity:.58;
  max-width:50rem; margin:1.3rem auto 0;
}
.tpl3 .t3-level-cards{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem;
  position:relative; z-index:2;
}
.tpl3 .t3-level-card{
  display:flex; flex-direction:column;
  background:var(--white);
  border:1px solid var(--t3-line-strong);
  border-radius:2rem;
  padding:2.6rem 2.2rem 2rem;
  text-decoration:none; color:var(--t3-ink);
  position:relative; overflow:hidden;
  box-shadow:0 8px 28px rgba(var(--primary-deeper-rgb),.07), inset 0 1px 0 rgba(255,255,255,.7);
  transition: transform .4s var(--t3-ease), box-shadow .4s var(--t3-ease), border-color .3s;
}
.tpl3 .t3-level-card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  transform:scaleX(0); transform-origin:left;
  transition:transform .5s var(--t3-ease); z-index:3;
}
.tpl3 .t3-level-card--1::before{ background:linear-gradient(90deg, var(--primary), var(--primary-light)); }
.tpl3 .t3-level-card--2::before{ background:linear-gradient(90deg, var(--primary), var(--t3-gold)); }
.tpl3 .t3-level-card--3::before{ background:linear-gradient(90deg, var(--t3-gold), var(--accent)); }
.tpl3 .t3-level-card:hover::before{ transform:scaleX(1); }
.tpl3 .t3-level-card:hover{
  transform:translateY(-8px);
  box-shadow:0 22px 48px rgba(var(--primary-deeper-rgb),.11), 0 6px 18px rgba(var(--primary-deeper-rgb),.06);
  border-color:rgba(var(--primary-rgb),.14);
}
.tpl3 .t3-level-card-glow{
  position:absolute; top:-42%; right:-32%; width:72%; height:72%;
  border-radius:50%; opacity:0;
  transition:opacity .4s var(--t3-ease); pointer-events:none;
}
.tpl3 .t3-level-card--1 .t3-level-card-glow{ background:radial-gradient(circle, rgba(var(--primary-rgb),.10) 0%, transparent 66%); }
.tpl3 .t3-level-card--2 .t3-level-card-glow{ background:radial-gradient(circle, rgba(var(--gold-rgb),.11) 0%, transparent 66%); }
.tpl3 .t3-level-card--3 .t3-level-card-glow{ background:radial-gradient(circle, rgba(var(--accent-rgb),.11) 0%, transparent 66%); }
.tpl3 .t3-level-card:hover .t3-level-card-glow{ opacity:1; }
.tpl3 .t3-level-card-top{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:1.8rem;
}
.tpl3 .t3-level-card-num{
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:clamp(3.6rem,4.2vw,4.8rem); font-weight:800;
  line-height:1; letter-spacing:-.03em;
  background:linear-gradient(180deg, rgba(var(--primary-deeper-rgb),.11) 0%, rgba(var(--primary-deeper-rgb),.03) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}
.tpl3 .t3-level-card:hover .t3-level-card-num{
  background:linear-gradient(180deg, var(--t3-accent) 0%, var(--t3-gold) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}
.tpl3 .t3-level-card-icon{
  width:4.8rem; height:4.8rem; border-radius:1.2rem;
  display:grid; place-items:center;
  font-size:2rem;
  transition: transform .35s var(--t3-ease), box-shadow .3s var(--t3-ease);
  border:1px solid transparent;
}
.tpl3 .t3-level-card--1 .t3-level-card-icon{ background:var(--primary-mist); color:var(--primary); border-color:rgba(var(--primary-rgb),.14); }
.tpl3 .t3-level-card--2 .t3-level-card-icon{ background:var(--gold-pale); color:var(--t3-gold-d); border-color:rgba(var(--gold-rgb),.18); }
.tpl3 .t3-level-card--3 .t3-level-card-icon{ background:rgba(var(--accent-rgb),.12); color:var(--accent); border-color:rgba(var(--accent-rgb),.18); }
.tpl3 .t3-level-card:hover .t3-level-card-icon{ transform:scale(1.06) rotate(-5deg); box-shadow:0 8px 18px rgba(var(--primary-deeper-rgb),.09); }
.tpl3 .t3-level-card-body{ flex:1; }
.tpl3 .t3-level-card-name{
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:clamp(2rem,2.4vw,2.7rem); font-weight:800;
  letter-spacing:-.02em; line-height:1.06;
  margin:0 0 1.2rem; color:var(--t3-ink);
}
.tpl3 .t3-level-card-tags{ display:flex; flex-wrap:wrap; gap:.5rem; }
.tpl3 .t3-level-card-tags span{
  font-size:.86rem; font-weight:600;
  letter-spacing:.02em;
  padding:.42rem .85rem; border-radius:999px;
  background:var(--t3-paper-3);
  color:var(--t3-ink); opacity:.72;
  border:1px solid var(--t3-line);
  transition: background .25s, opacity .25s;
}
.tpl3 .t3-level-card:hover .t3-level-card-tags span{ opacity:1; }
.tpl3 .t3-level-card--1:hover .t3-level-card-tags span{ background:rgba(var(--primary-rgb),.09); }
.tpl3 .t3-level-card--2:hover .t3-level-card-tags span{ background:rgba(var(--gold-rgb),.10); }
.tpl3 .t3-level-card--3:hover .t3-level-card-tags span{ background:rgba(var(--accent-rgb),.10); }
.tpl3 .t3-level-card-foot{
  margin-top:1.8rem; padding-top:1.4rem;
  border-top:1px solid var(--t3-line);
}
.tpl3 .t3-level-card-cta{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:.96rem; font-weight:700;
  letter-spacing:.01em;
  color:var(--t3-accent);
  transition: gap .25s var(--t3-ease);
}
.tpl3 .t3-level-card:hover .t3-level-card-cta{ gap:.95rem; color:var(--t3-gold-d); }
.tpl3 .t3-level-card-cta i{ font-size:.82rem; transition:transform .25s var(--t3-ease); }
.tpl3 .t3-level-card:hover .t3-level-card-cta i{ transform:translateX(3px); }

/* ─── Manifesto (vision/mission) — clean rhythm ─── */
.tpl3 .t3-manifesto{ padding:7.5rem 0; background:var(--white); position:relative; overflow:hidden; border-top:1px solid var(--t3-line); border-bottom:1px solid var(--t3-line); }
.tpl3 .t3-manifesto::before{
  content:''; position:absolute; width:44rem; height:44rem; right:-18rem; bottom:-24rem; border-radius:50%;
  background:rgba(var(--primary-rgb),.06); filter:blur(1px); pointer-events:none;
}
.tpl3 .t3-manifesto-grid{ display:grid; grid-template-columns:1.08fr .92fr; gap:1.8rem; align-items:stretch; position:relative; z-index:1; }
.tpl3 .t3-manifesto-photo{
  min-height:52rem; border-radius:2.4rem; overflow:hidden; position:relative;
  box-shadow:0 24px 56px rgba(var(--primary-deeper-rgb),.16); transform-style:preserve-3d;
  background:var(--t3-paper-3);
}
.tpl3 .t3-manifesto-photo img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--t3-ease); }
.tpl3 .t3-manifesto-photo:hover img{ transform:scale(1.04); }
.tpl3 .t3-manifesto-photo::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 44%,rgba(var(--primary-deeper-rgb),.82)); pointer-events:none; }
.tpl3 .t3-manifesto-caption{ position:absolute; z-index:2; left:2.2rem; right:2.2rem; bottom:2.2rem; color:var(--white); }
.tpl3 .t3-manifesto-caption strong{ display:block; font:800 clamp(2.2rem,3.4vw,3.4rem)/1.05 'Poppins',sans-serif; letter-spacing:-.03em; }
.tpl3 .t3-manifesto-caption span{ display:block; margin-top:.8rem; color:rgba(255,255,255,.72); font-size:1.18rem; text-transform:uppercase; letter-spacing:.12em; font-weight:600; }
.tpl3 .t3-manifesto-stack{ display:grid; gap:1.6rem; align-content:start; }
.tpl3 .t3-manifesto-card{
  padding:2.6rem 2.4rem; border:1px solid var(--t3-line-strong); border-radius:1.8rem;
  background:var(--white); box-shadow:0 10px 28px rgba(var(--primary-deeper-rgb),.06); transition:all .35s var(--t3-ease);
  position:relative; overflow:hidden;
}
.tpl3 .t3-manifesto-card::before{ content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, var(--t3-accent), var(--t3-gold)); opacity:0; transition:opacity .3s; }
.tpl3 .t3-manifesto-card:hover::before{ opacity:1; }
.tpl3 .t3-manifesto-card:hover{ transform:translateY(-5px); box-shadow:0 18px 42px rgba(var(--primary-deeper-rgb),.11); }
.tpl3 .t3-manifesto-card--dark{ color:var(--white); background:linear-gradient(150deg,var(--t3-ink-2),var(--t3-ink)); border-color:rgba(255,255,255,.12); box-shadow:0 18px 42px rgba(var(--primary-deeper-rgb),.18); }
.tpl3 .t3-manifesto-card--dark::before{ background:linear-gradient(90deg, var(--t3-gold), var(--accent)); }
.tpl3 .t3-manifesto-icon{ width:4.6rem; height:4.6rem; display:grid; place-items:center; margin-bottom:1.4rem; border-radius:1.2rem; background:var(--t3-paper-3); color:var(--t3-accent); font-size:1.9rem; border:1px solid var(--t3-line); }
.tpl3 .t3-manifesto-card--dark .t3-manifesto-icon{ background:rgba(255,255,255,.12); color:var(--t3-gold-b); border-color:rgba(255,255,255,.14); }
.tpl3 .t3-manifesto-card h3{ margin:0 0 .9rem; font:800 1.95rem/1.1 'Poppins',sans-serif; color:inherit; }
.tpl3 .t3-manifesto-card p{ margin:0; font-size:1.33rem; line-height:1.7; color:inherit; opacity:.72; }
.tpl3 .t3-manifesto-card--dark p{ opacity:.78; }
.tpl3 .t3-manifesto-list{ display:grid; gap:.7rem; margin:0; padding:0; list-style:none; }
.tpl3 .t3-manifesto-list li{ display:flex; align-items:flex-start; gap:.8rem; color:rgba(255,255,255,.78); font-size:1.26rem; line-height:1.55; }
.tpl3 .t3-manifesto-list i{ color:var(--t3-gold-b); margin-top:.28rem; flex-shrink:0; }

/* ─── SNAPSHOT — mission & values carousel (NEW — footer-fused) ─── */
.tpl3 .t3-snapshot{ padding:7.5rem 0; background:var(--t3-paper-3); border-top:1px solid var(--t3-line); border-bottom:1px solid var(--t3-line); position:relative; overflow:hidden; }
.tpl3 .t3-snapshot::before{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(circle at 8% 14%, rgba(var(--gold-rgb),.08) 0%, transparent 38%),
    radial-gradient(circle at 92% 86%, rgba(var(--primary-rgb),.06) 0%, transparent 42%);
  pointer-events:none;
}
.tpl3 .t3-snapshot-head{ text-align:center; max-width:68rem; margin:0 auto 3.6rem; position:relative; z-index:1; }
.tpl3 .t3-snapshot-head .t3-eyebrow{ justify-content:center; }
.tpl3 .t3-snapshot-head h2{ font-family:'Bricolage Grotesque',sans-serif; font-size:clamp(2.6rem,4vw,4rem); font-weight:800; letter-spacing:-.03em; margin:.9rem 0 0; color:var(--t3-ink); }
.tpl3 .t3-snapshot-head h2 em{ font-style:italic; color:var(--t3-gold-d); font-weight:700; }
.tpl3 .t3-snapshot-head p{ font-size:1.38rem; color:var(--t3-ink); opacity:.58; max-width:52rem; margin:1.1rem auto 0; line-height:1.65; }
.tpl3 .t3-snapshot-stage{ position:relative; z-index:1; overflow:hidden; padding:.4rem .2rem 1rem; margin:0 -.2rem; cursor:grab; }
.tpl3 .t3-snapshot-stage:active{ cursor:grabbing; }
.tpl3 .t3-snapshot-track{ display:flex; gap:1.4rem; will-change:transform; transition:transform .52s var(--t3-ease); }
.tpl3 .t3-snap-card{
  flex:0 0 calc(33.333% - .94rem); min-width:0;
  background:var(--white);
  border:1px solid var(--t3-line-strong);
  border-radius:1.6rem;
  overflow:hidden;
  box-shadow:0 6px 20px rgba(var(--primary-deeper-rgb),.06);
  display:flex; flex-direction:column;
  transition:transform .3s var(--t3-ease), box-shadow .3s, border-color .25s;
  border-top:3px solid var(--t3-accent);
}
.tpl3 .t3-snap-card:nth-child(3n+2){ border-top-color:var(--t3-gold); }
.tpl3 .t3-snap-card:nth-child(3n+3){ border-top-color:var(--t3-accent-3); }
.tpl3 .t3-snap-card:hover{ transform:translateY(-5px); box-shadow:0 16px 36px rgba(var(--primary-deeper-rgb),.11); border-color:rgba(var(--primary-rgb),.14); }
.tpl3 .t3-snap-img{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--t3-paper-3); flex-shrink:0; }
.tpl3 .t3-snap-img img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--t3-ease); }
.tpl3 .t3-snap-card:hover .t3-snap-img img{ transform:scale(1.05); }
.tpl3 .t3-snap-tag{
  position:absolute; top:.9rem; left:.9rem; z-index:2;
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.32rem .75rem;
  background:var(--t3-accent);
  color:var(--white);
  font-size:.86rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
  border-radius:999px;
  box-shadow:0 4px 12px rgba(var(--primary-rgb),.22);
  border:1px solid rgba(255,255,255,.88);
}
.tpl3 .t3-snap-tag--vision{ background:var(--t3-ink); }
.tpl3 .t3-snap-body{ padding:1.6rem 1.5rem 1.4rem; flex:1; display:flex; flex-direction:column; }
.tpl3 .t3-snap-text{ font-size:1.32rem; line-height:1.68; color:var(--t3-ink); opacity:.72; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; flex:1; }
.tpl3 .t3-snap-foot{ margin-top:1rem; padding-top:.9rem; border-top:1px dashed var(--t3-line); display:flex; align-items:center; gap:.5rem; font-size:1.02rem; font-weight:700; color:var(--t3-gold-d); }
.tpl3 .t3-snapshot-controls{ display:flex; align-items:center; justify-content:center; gap:1.2rem; margin-top:1.8rem; position:relative; z-index:1; }
.tpl3 .t3-snap-arrow{
  width:4rem; height:4rem; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--white); border:1px solid var(--t3-line-strong);
  color:var(--t3-ink); box-shadow:0 6px 16px rgba(var(--primary-deeper-rgb),.07);
  cursor:pointer; transition:all .25s var(--t3-ease); flex-shrink:0;
}
.tpl3 .t3-snap-arrow:hover{ background:var(--t3-ink); color:var(--white); border-color:var(--t3-ink); transform:translateY(-2px); box-shadow:0 10px 22px rgba(var(--primary-deeper-rgb),.14); }
.tpl3 .t3-snap-dots{ display:flex; gap:.5rem; align-items:center; }
.tpl3 .t3-snap-dots button{ width:.58rem; height:.58rem; border-radius:50%; border:0; padding:0; background:rgba(var(--primary-deeper-rgb),.16); cursor:pointer; transition:all .25s var(--t3-ease); }
.tpl3 .t3-snap-dots button.is-active{ background:var(--t3-gold-d); width:1.8rem; border-radius:999px; }

/* ─── Stats — hex tiles — footer-fused dark ─── */
.tpl3 .t3-stats{ background:linear-gradient(155deg, var(--t3-ink) 0%, var(--t3-ink-2) 62%, var(--t3-ink) 100%); color:var(--white); padding:7.5rem 0; position:relative; overflow:hidden; border-top:4px solid var(--t3-accent-3); border-bottom:1px solid rgba(255,255,255,.06); }
.tpl3 .t3-stats::before{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(circle at 14% 18%, rgba(var(--gold-rgb),.09) 0%, transparent 42%),
    radial-gradient(circle at 86% 78%, rgba(var(--primary-rgb),.12) 0%, transparent 44%);
  pointer-events:none;
}
.tpl3 .t3-stats::after{ content:''; position:absolute; top:-7rem; right:-5rem; width:24rem; height:24rem; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.04) 0%, transparent 70%); pointer-events:none; }
.tpl3 .t3-stats-head{ text-align:center; margin-bottom:4rem; position:relative; z-index:1; }
.tpl3 .t3-stats-head h2{ font-family:'Bricolage Grotesque',sans-serif; font-size:clamp(2.4rem,3.8vw,3.6rem); font-weight:800; letter-spacing:-.02em; margin:.9rem 0 0; color:var(--white); }
.tpl3 .t3-stats-head h2 em{ color:var(--t3-gold-b); font-style:italic; }
.tpl3 .t3-stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; text-align:center; position:relative; z-index:1; }
.tpl3 .t3-stat-item{
  position:relative;
  padding:2.6rem 1.4rem 2rem;
  border:1px solid var(--t3-white-line); border-radius:1.8rem;
  background:linear-gradient(150deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 14px 32px rgba(0,0,0,.18);
  transition:all .35s var(--t3-ease); overflow:hidden;
}
.tpl3 .t3-stat-item::before{ content:''; position:absolute; width:9rem; height:9rem; right:-4rem; top:-4rem; border-radius:50%; background:var(--t3-gold); opacity:.07; transition:all .35s var(--t3-ease); }
.tpl3 .t3-stat-item:hover{ transform:translateY(-6px); border-color:rgba(var(--gold-rgb),.36); box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 18px 40px rgba(0,0,0,.24); }
.tpl3 .t3-stat-item:hover::before{ transform:scale(1.7); opacity:.11; }
.tpl3 .t3-stat-hex{
  width:5.2rem; height:5.2rem;
  margin:0 auto 1.2rem;
  background:linear-gradient(135deg, var(--t3-gold-b), var(--t3-gold));
  clip-path:polygon(25% 5%,75% 5%,100% 50%,75% 95%,25% 95%,0% 50%);
  display:flex; align-items:center; justify-content:center;
  color:var(--t3-ink); font-size:1.7rem;
  box-shadow:0 10px 20px rgba(var(--gold-rgb),.28);
  transition:transform .35s var(--t3-ease);
}
.tpl3 .t3-stat-item:hover .t3-stat-hex{ transform:rotate(10deg) scale(1.06); }
.tpl3 .t3-stat-item strong{
  display:block; font-family:'Bricolage Grotesque',sans-serif;
  font-size:clamp(3rem,4.4vw,4.4rem); font-weight:800;
  color:var(--t3-gold-b); line-height:1;
  letter-spacing:-.03em;
}
.tpl3 .t3-stat-item span:last-child{
  display:block; margin-top:.6rem;
  font-size:1.08rem; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.68); font-weight:700;
}
.tpl3 .t3-stat-suffix{ font-size:.56em; margin-left:.12rem; color:var(--t3-gold-b); }

/* ─── Bento features (3D) — balanced ─── */
.tpl3 .t3-features{ padding:7.5rem 0; background:linear-gradient(150deg,var(--white) 0%, var(--t3-paper-3) 100%); position:relative; overflow:hidden; border-top:1px solid var(--t3-line); }
.tpl3 .t3-features::before{ content:''; position:absolute; width:38rem; height:38rem; left:-18rem; top:6rem; border-radius:50%; border:6rem solid rgba(var(--primary-rgb),.04); pointer-events:none; }
.tpl3 .t3-feat-bento{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-auto-rows:minmax(18rem, auto);
  gap:1.4rem;
  position:relative; z-index:1;
}
.tpl3 .t3-feat-card{
  background:var(--white);
  border:1px solid var(--t3-line-strong);
  border-radius:1.6rem;
  padding:2.2rem 2rem;
  transition:all .35s var(--t3-ease);
  position:relative; overflow:hidden;
  display:flex; flex-direction:column;
  box-shadow:0 8px 24px rgba(var(--primary-deeper-rgb),.05), inset 0 1px 0 rgba(255,255,255,.7);
}
.tpl3 .t3-feat-card::before{
  content:''; position:absolute; inset:auto -1.5rem -1.5rem auto;
  width:9rem; height:9rem; border-radius:50%;
  background:var(--t3-accent); opacity:.05;
  transition:transform .4s var(--t3-ease);
}
.tpl3 .t3-feat-card:nth-child(3n+2)::before{ background:var(--t3-gold); }
.tpl3 .t3-feat-card:nth-child(3n+3)::before{ background:var(--t3-accent-3); }
.tpl3 .t3-feat-card:hover::before{ transform:scale(1.5); opacity:.08; }
.tpl3 .t3-feat-card:hover{ transform:translateY(-5px); box-shadow:0 18px 38px rgba(var(--primary-deeper-rgb),.10); border-color:rgba(var(--primary-rgb),.14); }
.tpl3 .t3-feat-icon{
  width:4.6rem; height:4.6rem;
  border-radius:1.1rem;
  background:var(--t3-ink); color:var(--white);
  display:flex; align-items:center; justify-content:center;
  font-size:1.9rem; margin-bottom:1.4rem;
  position:relative; z-index:1;
  transition:all .3s var(--t3-ease);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 8px 18px rgba(var(--primary-deeper-rgb),.14);
}
.tpl3 .t3-feat-card:hover .t3-feat-icon{ background:var(--t3-gold); color:var(--t3-ink); transform:rotate(-6deg) scale(1.05); }
.tpl3 .t3-feat-card h4{
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:1.75rem; font-weight:800;
  margin:0 0 .7rem; color:var(--t3-ink);
  letter-spacing:-.01em;
}
.tpl3 .t3-feat-card p{ font-size:1.28rem; line-height:1.62; color:var(--t3-ink); opacity:.62; margin:0; }

/* ─── Parallax gallery strip — footer dark ─── */
.tpl3 .t3-gallery{
  position:relative; padding:0;
  background:var(--t3-ink);
  overflow:hidden;
  border-top:4px solid var(--t3-gold);
}
.tpl3 .t3-gallery-track{
  display:flex; gap:1.3rem;
  padding:5.5rem 0;
  animation:t3gallery 42s linear infinite;
  width:max-content;
  will-change:transform;
}
@keyframes t3gallery{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
.tpl3 .t3-gallery-track:hover{ animation-play-state:paused; }
.tpl3 .t3-gallery-item{
  width:28rem; height:21rem; border-radius:1.4rem; overflow:hidden;
  position:relative; flex-shrink:0; background:var(--t3-ink-2);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 14px 32px rgba(0,0,0,.34);
  transition:transform .4s var(--t3-ease);
}
.tpl3 .t3-gallery-item:hover{ transform:translateY(-6px) scale(1.01); }
.tpl3 .t3-gallery-item img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--t3-ease); }
.tpl3 .t3-gallery-item:hover img{ transform:scale(1.06); }
.tpl3 .t3-gallery-item::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 52%,rgba(var(--primary-deeper-rgb),.62)); pointer-events:none; }
.tpl3 .t3-gallery-item span{
  position:absolute; left:1rem; bottom:1rem; z-index:2;
  background:rgba(var(--primary-deeper-rgb),.78); color:var(--white);
  padding:.55rem 1rem;
  font-size:.96rem; letter-spacing:.13em; text-transform:uppercase;
  font-weight:700;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.12); border-radius:999px;
}
.tpl3 .t3-gallery-head{ position:absolute; z-index:3; left:2.4rem; top:2.2rem; color:var(--white); pointer-events:none; }
.tpl3 .t3-gallery-head strong{ display:block; font:800 clamp(2.2rem,3.6vw,3.4rem)/1 'Poppins',sans-serif; letter-spacing:-.02em; color:var(--white); }
.tpl3 .t3-gallery-head span{ display:block; margin-bottom:.6rem; color:var(--t3-gold-b); font-size:1rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }

/* ─── CTA — footer-fused ─── */
.tpl3 .t3-cta{
  background:
    radial-gradient(ellipse at 15% 45%, rgba(var(--primary-rgb),.07) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 25%, rgba(var(--gold-rgb),.08) 0%, transparent 44%),
    linear-gradient(180deg, var(--white) 0%, var(--t3-paper-3) 100%);
  color:var(--t3-ink); padding:7.5rem 0; text-align:center;
  position:relative; overflow:hidden;
  border-top:1px solid var(--t3-line);
}
.tpl3 .t3-cta-bg{ position:absolute; inset:0; pointer-events:none; }
.tpl3 .t3-cta-mesh{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 15% 45%, rgba(var(--primary-rgb),.06) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 25%, rgba(var(--gold-rgb),.07) 0%, transparent 44%);
  opacity:.9;
}
.tpl3 .t3-cta-orb{
  position:absolute; border-radius:50%;
  border:1px solid rgba(var(--primary-deeper-rgb),.05);
}
.tpl3 .t3-cta-orb--1{
  width:36rem; height:36rem; left:-10rem; top:-8rem;
  background:radial-gradient(circle, rgba(var(--primary-rgb),.06) 0%, transparent 70%);
}
.tpl3 .t3-cta-orb--2{
  width:24rem; height:24rem; right:-5rem; bottom:-6rem;
  background:radial-gradient(circle, rgba(var(--gold-rgb),.08) 0%, transparent 70%);
}
.tpl3 .t3-cta-orb--3{
  width:16rem; height:16rem; right:16%; top:9%;
  background:radial-gradient(circle, rgba(var(--primary-rgb),.05) 0%, transparent 70%);
}
.tpl3 .t3-cta-ring{ position:absolute; border-radius:50%; border:1px solid rgba(var(--primary-deeper-rgb),.04); }
.tpl3 .t3-cta-ring--1{ width:52rem; height:52rem; left:-16rem; top:-14rem; }
.tpl3 .t3-cta-ring--2{ width:40rem; height:40rem; right:-12rem; bottom:-16rem; }
.tpl3 .t3-cta-inner{ position:relative; z-index:2; max-width:68rem; margin:0 auto; padding:0 2.4rem; }
.tpl3 .t3-cta-badge{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:.86rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--t3-accent);
  padding:.6rem 1.3rem; border-radius:999px;
  border:1px solid rgba(var(--primary-rgb),.13);
  background:var(--white);
  box-shadow:0 4px 14px rgba(var(--primary-deeper-rgb),.06);
  margin-bottom:2rem;
}
.tpl3 .t3-cta-badge::before{
  content:''; width:.55rem; height:.55rem; border-radius:50%;
  background:var(--t3-accent);
  box-shadow:0 0 0 4px rgba(var(--primary-rgb),.12);
}
.tpl3 .t3-cta h3{
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:clamp(3.2rem,6vw,5.8rem);
  font-weight:800;
  color:var(--t3-ink);
  margin:0 0 1.6rem;
  letter-spacing:-.03em; line-height:.96;
}
.tpl3 .t3-cta-glow{
  background:linear-gradient(135deg, var(--t3-accent) 0%, var(--t3-gold-d) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}
.tpl3 .t3-cta p{
  font-size:1.42rem; max-width:52rem; margin:0 auto 2.8rem;
  color:var(--t3-ink); opacity:.58;
  line-height:1.68; font-weight:500;
}
.tpl3 .t3-cta-btn{
  display:inline-flex; align-items:center; gap:.8rem;
  font-size:1.12rem; font-weight:700;
  letter-spacing:.02em;
  color:var(--white);
  background:linear-gradient(135deg, var(--t3-ink) 0%, var(--t3-ink-2) 100%);
  padding:1.2rem 2.8rem; border-radius:999px;
  text-decoration:none;
  box-shadow:0 14px 32px rgba(var(--primary-deeper-rgb),.22), inset 0 1px 0 rgba(255,255,255,.08);
  transition: transform .3s var(--t3-ease), box-shadow .3s var(--t3-ease);
  border:1px solid rgba(255,255,255,.06);
}
.tpl3 .t3-cta-btn:hover{
  transform:translateY(-3px) scale(1.01);
  box-shadow:0 20px 44px rgba(var(--primary-deeper-rgb),.26), 0 0 28px rgba(var(--gold-rgb),.12);
}
.tpl3 .t3-cta-btn i{ font-size:.88rem; transition:transform .25s var(--t3-ease); }
.tpl3 .t3-cta-btn:hover i{ transform:translateX(4px); }

.tpl3 ::selection{ background:var(--t3-gold); color:var(--t3-ink); }
.tpl3 a:focus-visible{ outline:2px solid var(--t3-gold); outline-offset:3px; border-radius:4px; }

/* ─── Reduced motion ─── */
@media (prefers-reduced-motion: reduce){
  .tpl3 .t3-reveal{ opacity:1 !important; transform:none !important; }
  .tpl3 .t3-ticker-track, .tpl3 .t3-gallery-track, .tpl3 .t3-tag::before, .tpl3 .t3-floating-card{ animation:none !important; }
  .tpl3 .t3-collage, .tpl3 .t3-collage > *{ transform:none !important; transition:none !important; }
}

/* ─── Responsive ─── */
@media (max-width: 1100px){
  .tpl3 .t3-hero{ grid-template-columns:1fr; min-height:auto; }
  .tpl3 .t3-hero-left{ padding:6rem 2.4rem 4rem; }
  .tpl3 .t3-hero-right{ min-height:48rem; overflow:hidden; }
  .tpl3 .t3-collage{ inset:1.5rem 2.4rem 3.5rem; transform:none; border-radius:2rem; }
  .tpl3 .t3-floating-card{ left:2rem; top:2rem; }
  .tpl3 .t3-scroll-cue{ display:none; }
  .tpl3 .t3-manifesto-grid{ grid-template-columns:1fr; }
  .tpl3 .t3-manifesto-photo{ min-height:44rem; }
  .tpl3 .t3-feat-bento{ grid-template-columns:repeat(2,1fr); }
  .tpl3 .t3-level-cards{ gap:1.4rem; }
  .tpl3 .t3-snapshot-track{ gap:1.2rem; }
  .tpl3 .t3-snap-card{ flex:0 0 calc(50% - .7rem); }
}
@media (max-width: 768px){
  .tpl3 .t3-container{ padding:0 1.8rem; }
  .tpl3 .t3-hero-left{ padding:5rem 1.8rem 3.5rem; }
  .tpl3 .t3-hero-right{ min-height:40rem; }
  .tpl3 .t3-collage{ inset:1rem 1.8rem 2.4rem; padding:.7rem; gap:.7rem; border-radius:1.8rem; }
  .tpl3 .t3-collage > *{ border-radius:1.3rem; }
  .tpl3 .t3-collage > *::after{ font-size:.78rem; padding:.42rem .7rem; }
  .tpl3 .t3-floating-card{ left:1.8rem; top:1.8rem; padding:.85rem 1rem; }
  .tpl3 .t3-floating-card strong{ font-size:1.02rem; }
  .tpl3 .t3-hero-stat{ right:1.8rem; bottom:2.8rem; padding:1.3rem 1.6rem; min-width:13rem; }
  .tpl3 .t3-hero-stat strong{ font-size:2.5rem; }
  .tpl3 .t3-hero h1{ font-size:clamp(3rem,10vw,4.6rem); }
  .tpl3 .t3-hero p{ font-size:1.38rem; }
  .tpl3 .t3-hero-trust{ display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; }
  .tpl3 .t3-trust-pill{ min-width:0; justify-content:center; padding:.65rem .4rem; gap:.35rem; border-radius:.9rem; }
  .tpl3 .t3-trust-pill i{ font-size:1.05rem; }
  .tpl3 .t3-trust-pill span{ display:inline; font-size:.72rem; letter-spacing:.04em; line-height:1.2; text-align:center; }
  .tpl3 .t3-cta-row{ display:flex; flex-direction:row; flex-wrap:nowrap; gap:.6rem; }
  .tpl3 .t3-cta-row .t3-btn{ flex:1 1 0; min-width:0; justify-content:center; white-space:nowrap; padding:.95rem .6rem; font-size:1.02rem; }
  .tpl3 .t3-stats-grid{ grid-template-columns:repeat(2,1fr); gap:1rem; }
  .tpl3 .t3-stat-item{ padding:2rem 1rem; }
  .tpl3 .t3-feat-bento{ grid-template-columns:1fr; grid-auto-rows:auto; }
  .tpl3 .t3-feat-card{ min-height:auto; padding:2rem 1.8rem; }
  .tpl3 .t3-level-cards{ grid-template-columns:1fr; gap:1.3rem; }
  .tpl3 .t3-level-card{ padding:2.2rem 1.8rem; border-radius:1.6rem; }
  .tpl3 .t3-manifesto-photo{ min-height:36rem; border-radius:1.6rem; }
  .tpl3 .t3-manifesto-card{ padding:2rem 1.8rem; border-radius:1.4rem; }
  .tpl3 .t3-manifesto{ padding:5.5rem 0; }
  .tpl3 .t3-levels, .tpl3 .t3-features, .tpl3 .t3-stats, .tpl3 .t3-cta, .tpl3 .t3-snapshot{ padding:5.5rem 0; }
  .tpl3 .t3-gallery-item{ width:24rem; height:18.5rem; }
  .tpl3 .t3-gallery-track{ padding:4.5rem 0 3rem; }
  .tpl3 .t3-gallery-head{ left:1.8rem; top:1.6rem; }
  .tpl3 .t3-ticker-track{ font-size:1.18rem; gap:2.4rem; }
}
@media (max-width: 480px){
  .tpl3 .t3-hero h1{ font-size:clamp(2.9rem,11vw,4rem); }
  .tpl3 .t3-hero-right{ min-height:36rem; }
  .tpl3 .t3-collage{ grid-template-columns:1fr 1fr; gap:.6rem; }
  .tpl3 .t3-floating-card{ max-width:18rem; }
  .tpl3 .t3-hero-stat{ min-width:12rem; padding:1.2rem 1.4rem; }
  .tpl3 .t3-hero-stat strong{ font-size:2.3rem; }
  .tpl3 .t3-hero-trust{ grid-template-columns:repeat(3,1fr); gap:.4rem; }
  .tpl3 .t3-trust-pill{ padding:.55rem .3rem; gap:.3rem; }
  .tpl3 .t3-trust-pill span{ font-size:.66rem; }
  .tpl3 .t3-cta-row{ flex-direction:row; flex-wrap:nowrap; gap:.45rem; }
  .tpl3 .t3-cta-row .t3-btn{ flex:1 1 0; min-width:0; padding:.85rem .45rem; font-size:.92rem; white-space:nowrap; }
  .tpl3 .t3-stats-grid{ grid-template-columns:repeat(2,1fr); gap:.7rem; }
  .tpl3 .t3-stat-item{ padding:2.2rem 1.4rem; }
  .tpl3 .t3-levels, .tpl3 .t3-features, .tpl3 .t3-manifesto, .tpl3 .t3-cta, .tpl3 .t3-snapshot{ padding:4.2rem 0; }
  .tpl3 .t3-level-cards{ gap:1.1rem; }
  .tpl3 .t3-feat-bento{ gap:1rem; }
  .tpl3 .t3-manifesto-photo{ min-height:30rem; }
  .tpl3 .t3-manifesto-caption strong{ font-size:clamp(2rem,7vw,2.6rem); }
  .tpl3 .t3-cta h3{ font-size:clamp(2.8rem,10vw,4.2rem); }
  .tpl3 .t3-cta-btn{ padding:1rem 2.2rem; font-size:1.04rem; width:100%; justify-content:center; }
  .tpl3 .t3-ticker{ padding:.9rem 0; }
  .tpl3 .t3-gallery-item{ width:22rem; height:16.5rem; }
  .tpl3 .t3-snap-card{ flex:0 0 86%; }
  .tpl3 .t3-snapshot-stage{ overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .tpl3 .t3-snapshot-stage::-webkit-scrollbar{ display:none; }
  .tpl3 .t3-snapshot-track{ transition:none; }
  .tpl3 .t3-snap-arrow{ width:3.6rem; height:3.6rem; }
}

/* =====================================================
   TEMPLATE 4 — PRESTIGE (magazine-modern) — REBUILT 2026
   First-principles rebuild:
   - 100% dynamic via :root tokens (no hardcoded brand hex)
   - Footer-palette fusion for dark sections
   - Balanced vertical rhythm (distinct section padding)
   - True sliding cover (translate + opacity) + snapshot carousel
   - Full responsive overhaul (phone/tablet/desktop)
   ===================================================== */
.tpl4{
  --t4-ink:        var(--text);
  --t4-muted:      var(--text-secondary);
  --t4-faint:      var(--text-muted);
  --t4-cream:      var(--cream);
  --t4-cream-deep: var(--cream-deep);
  --t4-paper:      var(--white);
  --t4-navy:       var(--brand-navy);
  --t4-navy-deep:  var(--primary-deeper);
  --t4-gold:       var(--gold);
  --t4-gold-b:     var(--gold-bright);
  --t4-gold-s:     var(--gold-soft);
  --t4-gold-p:     var(--gold-pale);
  --t4-gold-d:     var(--gold-dim);
  --t4-accent:     var(--accent);
  --t4-accent-b:   var(--amber-bright);
  --t4-soft:       var(--primary-mist);
  --t4-line:       rgba(var(--primary-rgb), .14);
  --t4-line-soft:  rgba(var(--primary-rgb), .08);
  --t4-white-line: rgba(255,255,255,.14);
  --t4-ease:       cubic-bezier(.2,.8,.2,1);
  --t4-spring:     cubic-bezier(.34,1.56,.64,1);
  --t4-seri: 'Trirong', Georgia, serif;
  --t4-sans: 'Poppins', 'Open Sans', system-ui, sans-serif;
  --t4-body: 'Open Sans', system-ui, -apple-system, sans-serif;
  font-family:var(--t4-body);
  background:var(--t4-cream);
  color:var(--t4-ink);
  line-height:1.7;
  overflow-x:hidden;
}
.tpl4 *{ box-sizing:border-box; }
.tpl4 img{ max-width:100%; display:block; }
.tpl4 a{ color:inherit; text-decoration:none; }
.tpl4 button{ font-family:inherit; }
.tpl4 .t4-container{ max-width:1240px; margin:0 auto; padding:0 2.4rem; }
.tpl4 .t4-narrow{ max-width:860px; margin:0 auto; padding:0 2.4rem; }

/* ─── Scroll reveal ─── */
.tpl4 .t4-reveal{
  opacity:0; transform:translateY(32px);
  transition:opacity .75s var(--t4-ease), transform .75s var(--t4-ease);
}
.tpl4 .t4-reveal.is-in{ opacity:1; transform:none; }
.tpl4 .t4-reveal--3d-l{ transform:translateX(-40px) rotateY(5deg); transform-origin:left center; }
.tpl4 .t4-reveal--3d-r{ transform:translateX(40px) rotateY(-5deg); transform-origin:right center; }
.tpl4 .t4-reveal--3d-l.is-in, .tpl4 .t4-reveal--3d-r.is-in{ transform:none; }
.tpl4 .t4-reveal[data-d="1"]{ transition-delay:.07s; }
.tpl4 .t4-reveal[data-d="2"]{ transition-delay:.14s; }
.tpl4 .t4-reveal[data-d="3"]{ transition-delay:.22s; }
.tpl4 .t4-reveal[data-d="4"]{ transition-delay:.30s; }
.tpl4 .t4-reveal[data-d="5"]{ transition-delay:.38s; }

/* ─── Magazine type primitives ─── */
.tpl4 .t4-eyebrow{
  display:inline-flex; align-items:center; gap:1rem;
  font-family:var(--t4-sans);
  font-size:1.12rem; font-weight:700;
  letter-spacing:.28em; text-transform:uppercase;
  color:var(--t4-gold-d);
}
.tpl4 .t4-eyebrow::before{
  content:''; width:2.8rem; height:1px;
  background:linear-gradient(90deg, var(--t4-gold) 0%, transparent 100%);
}
.tpl4 .t4-eyebrow--center{ justify-content:center; }
.tpl4 .t4-eyebrow--center::before{ background:linear-gradient(90deg, transparent, var(--t4-gold), transparent); }
.tpl4 .t4-eyebrow--center::after{ content:''; width:2.8rem; height:1px; background:linear-gradient(90deg, transparent, var(--t4-gold)); }
.tpl4 .t4-eyebrow--light{ color:var(--t4-gold-b); }
.tpl4 .t4-eyebrow--light::before{ background:linear-gradient(90deg, var(--t4-gold-b) 0%, transparent 100%); }
.tpl4 .t4-eyebrow--light::after{ background:linear-gradient(90deg, transparent, var(--t4-gold-b)); }
.tpl4 .t4-title{
  font-family:var(--t4-seri);
  font-size:clamp(2.7rem,4.2vw,4.4rem);
  font-weight:600; line-height:1.13; letter-spacing:-.015em;
  margin:1.2rem 0 1.6rem; color:var(--t4-navy-deep);
}
.tpl4 .t4-title em, .tpl4 .t4-title .accent{
  font-style:italic; color:var(--t4-gold-d);
}
.tpl4 .t4-title--light{ color:var(--white); }
.tpl4 .t4-title--light em{ color:var(--t4-gold-b); }
.tpl4 .t4-lead{
  font-size:1.55rem; line-height:1.82; color:var(--t4-muted); max-width:68rem; margin:0 auto;
}
.tpl4 .t4-lead--light{ color:rgba(255,255,255,.78); }
.tpl4 .t4-rule{
  width:6rem; height:2px; border:0;
  background:linear-gradient(90deg, var(--t4-gold), transparent);
  margin:1.8rem auto 0;
}
.tpl4 .t4-rule--light{ background:linear-gradient(90deg, var(--t4-gold-b), transparent); }
.tpl4 .t4-kicker{
  display:inline-flex; align-items:center; gap:1rem;
  font-family:var(--t4-sans);
  font-size:1.12rem; font-weight:700; letter-spacing:.26em; text-transform:uppercase;
  color:var(--t4-accent);
}
.tpl4 .t4-kicker::before{ content:''; width:3.2rem; height:2px; background:var(--t4-accent); }

/* ─── Buttons ─── */
.tpl4 .t4-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:1rem;
  padding:1.35rem 2.8rem;
  font-family:var(--t4-sans);
  font-weight:700; font-size:1.32rem;
  letter-spacing:.13em; text-transform:uppercase;
  border-radius:999px;
  border:0; cursor:pointer; position:relative; overflow:hidden;
  transition:transform .35s var(--t4-ease), box-shadow .35s var(--t4-ease), background .3s, color .3s, border-color .3s;
  isolation:isolate;
  white-space:nowrap;
}
.tpl4 .t4-btn i{ font-size:1.3rem; transition:transform .3s var(--t4-ease); }
.tpl4 .t4-btn--gold{
  background:linear-gradient(135deg, var(--t4-gold-b) 0%, var(--t4-gold) 48%, var(--t4-accent-b) 100%);
  color:var(--t4-navy-deep);
  box-shadow:0 10px 28px rgba(var(--gold-rgb),.32), inset 0 1px 0 rgba(255,255,255,.5);
}
.tpl4 .t4-btn--gold::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(135deg, var(--t4-gold-b), var(--t4-accent-b));
  opacity:0; transition:opacity .35s;
}
.tpl4 .t4-btn--gold:hover{ transform:translateY(-3px); box-shadow:0 16px 40px rgba(var(--gold-rgb),.42); }
.tpl4 .t4-btn--gold:hover::after{ opacity:1; }
.tpl4 .t4-btn--gold:hover i{ transform:translateX(3px); }
.tpl4 .t4-btn--ghost{
  background:rgba(255,255,255,.07);
  color:var(--white); border:1.5px solid var(--t4-white-line);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.tpl4 .t4-btn--ghost:hover{ border-color:var(--t4-gold-b); color:var(--t4-gold-b); transform:translateY(-3px); }
.tpl4 .t4-btn--ghost:hover i{ transform:translateX(3px); }
.tpl4 .t4-btn--ghost-dark{
  background:var(--white);
  color:var(--t4-navy-deep); border:1.5px solid var(--t4-line);
  box-shadow:0 6px 18px rgba(var(--primary-deeper-rgb),.08);
}
.tpl4 .t4-btn--ghost-dark:hover{ background:var(--t4-navy-deep); color:var(--white); border-color:var(--t4-navy-deep); transform:translateY(-3px); }
.tpl4 .t4-btn--dark{
  background:linear-gradient(135deg, var(--t4-navy) 0%, var(--t4-navy-deep) 100%);
  color:var(--white);
  box-shadow:0 10px 28px rgba(var(--primary-deeper-rgb),.3);
}
.tpl4 .t4-btn--dark:hover{ transform:translateY(-3px); box-shadow:0 16px 40px rgba(var(--primary-deeper-rgb),.4); }
.tpl4 .t4-btn--dark:hover i{ transform:translateX(3px); }

/* ══════════════════════════════════════════════════════════
   HERO — magazine masthead cover (footer-fused)
   ══════════════════════════════════════════════════════════ */
.tpl4 .t4-hero{
  position:relative;
  padding:7.5rem 0 10rem;
  background:
    radial-gradient(circle at 10% 15%, rgba(var(--accent-rgb), .18) 0%, transparent 32%),
    radial-gradient(circle at 88% 84%, rgba(var(--gold-rgb), .15) 0%, transparent 34%),
    radial-gradient(circle at 55% 42%, rgba(var(--primary-rgb), .12) 0%, transparent 50%),
    linear-gradient(165deg, var(--t4-navy-deep) 0%, var(--t4-navy) 55%, var(--primary-dark) 100%);
  color:var(--white);
  overflow:hidden;
  isolation:isolate;
  border-bottom:4px solid var(--t4-accent);
}
.tpl4 .t4-hero::before{
  content:''; position:absolute; inset:0; z-index:-2;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image:radial-gradient(ellipse at 50% 32%, #000 0%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 32%, #000 0%, transparent 78%);
  pointer-events:none;
  opacity:.9;
}
.tpl4 .t4-hero::after{
  content:''; position:absolute; left:0; right:0; bottom:-1px; height:72px; z-index:3;
  background:var(--t4-cream);
  clip-path:polygon(0 36%, 100% 100%, 0 100%);
  pointer-events:none;
}
.tpl4 .t4-hero-deco{ position:absolute; border-radius:50%; z-index:-1; pointer-events:none; filter:blur(1px); }
.tpl4 .t4-hero-deco--1{ top:5%; left:3%; width:22rem; height:22rem; background:radial-gradient(circle, rgba(var(--primary-light-rgb),.30) 0%, transparent 70%); animation:t4Float1 14s ease-in-out infinite; }
.tpl4 .t4-hero-deco--2{ bottom:8%; right:5%; width:26rem; height:26rem; background:radial-gradient(circle, rgba(var(--gold-rgb),.18) 0%, transparent 70%); animation:t4Float2 18s ease-in-out infinite; }
.tpl4 .t4-hero-deco--3{ top:32%; right:16%; width:8rem; height:8rem; border:1px solid rgba(255,255,255,.14); transform:rotate(45deg); animation:t4Spin 32s linear infinite; }
@keyframes t4Float1{ 0%,100%{transform:translateY(0)}50%{transform:translateY(-22px)} }
@keyframes t4Float2{ 0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-26px) scale(1.05)} }
@keyframes t4Spin{ 0%{transform:rotate(45deg)}100%{transform:rotate(405deg)} }

.tpl4 .t4-hero-grid{
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:4.5rem;
  align-items:center;
  position:relative;
  z-index:4;
}

/* Issue bar (magazine masthead top strip) — footer accent */
.tpl4 .t4-issuebar{
  display:inline-flex; align-items:center; gap:1rem; flex-wrap:wrap;
  font-family:var(--t4-sans);
  font-size:1.05rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(255,255,255,.68);
  padding:0 0 1.4rem; margin-bottom:2rem;
  border-bottom:1px solid var(--t4-white-line);
}
.tpl4 .t4-issuebar-brand{ color:var(--t4-gold-b); }
.tpl4 .t4-issuebar-dot{ width:.45rem; height:.45rem; border-radius:50%; background:var(--t4-gold); box-shadow:0 0 0 3px rgba(var(--gold-rgb),.22); }

.tpl4 .t4-hero-eyebrow{
  display:inline-flex; align-items:center; gap:.8rem;
  padding:.5rem 1.3rem;
  background:rgba(255,255,255,.08);
  border:1px solid var(--t4-white-line);
  border-radius:999px;
  font-family:var(--t4-sans);
  font-size:1.1rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--white); margin-bottom:2rem;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.tpl4 .t4-hero-eyebrow i{ color:var(--t4-gold-b); }

.tpl4 .t4-masthead-line{
  display:block;
  font-family:var(--t4-seri);
  font-size:clamp(3.6rem,6.8vw,6.6rem);
  font-weight:600; line-height:1.02; letter-spacing:-.015em;
  color:var(--white); margin-bottom:.9rem;
  text-shadow:0 6px 30px rgba(0,0,0,.28);
}
.tpl4 .t4-masthead-motto{
  display:block;
  font-family:var(--t4-seri); font-style:italic;
  font-size:clamp(1.7rem,2.5vw,2.35rem); font-weight:500;
  color:var(--t4-gold-b); margin-bottom:2rem;
}
.tpl4 .t4-hero-dek{
  font-size:1.55rem; line-height:1.82; color:rgba(255,255,255,.84);
  max-width:58rem; margin:0 0 2.2rem;
}
.tpl4 .t4-hero-byline{
  display:flex; flex-wrap:wrap; gap:1.8rem;
  font-family:var(--t4-sans);
  font-size:1.12rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
  color:rgba(255,255,255,.58);
  padding:1.3rem 0; margin-bottom:2.2rem;
  border-top:1px dashed var(--t4-white-line);
  border-bottom:1px dashed var(--t4-white-line);
}
.tpl4 .t4-hero-byline span{ display:inline-flex; align-items:center; gap:.6rem; }
.tpl4 .t4-hero-byline i{ color:var(--t4-gold-b); }

.tpl4 .t4-hero-cta{ display:flex; flex-wrap:wrap; gap:1.2rem; margin-bottom:2.4rem; }
.tpl4 .t4-hero-trust{ display:flex; flex-wrap:wrap; gap:1.8rem; }
.tpl4 .t4-trust{ display:inline-flex; align-items:center; gap:.7rem; font-size:1.28rem; color:rgba(255,255,255,.76); font-weight:600; }
.tpl4 .t4-trust i{ color:var(--t4-gold-b); font-size:1.4rem; }

/* Hero right — floating magazine cover — FIXED SLIDER */
.tpl4 .t4-hero-side{ position:relative; }
.tpl4 .t4-cover-wrap{
  position:relative;
  max-width:400px; margin:0 auto;
  perspective:1400px;
}
.tpl4 .t4-cover{
  position:relative;
  aspect-ratio:3/4.1;
  border-radius:18px;
  background:linear-gradient(160deg, var(--white) 0%, var(--t4-cream-deep) 100%);
  border:1px solid rgba(var(--gold-rgb),.18);
  box-shadow:0 28px 64px rgba(0,0,0,.38), 0 8px 22px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.75);
  transform:rotateY(-7deg) rotateX(4deg) translateZ(8px);
  transform-style:preserve-3d;
  overflow:hidden;
  transition:transform .5s var(--t4-ease);
  animation:t4CoverFloat 7s ease-in-out infinite;
}
@keyframes t4CoverFloat{ 0%,100%{transform:rotateY(-7deg) rotateX(4deg) translateZ(8px) translateY(0)}50%{transform:rotateY(-7deg) rotateX(4deg) translateZ(8px) translateY(-10px)} }
.tpl4 .t4-cover-wrap:hover .t4-cover{ transform:rotateY(-3deg) rotateX(1deg) translateZ(14px) translateY(-3px); }
.tpl4 .t4-cover-slides{ position:absolute; inset:0; overflow:hidden; }
.tpl4 .t4-slide{
  position:absolute; inset:0; opacity:0;
  transform:scale(1.04) translateX(18px);
  transition:opacity .65s ease, transform .65s var(--t4-ease);
  will-change:opacity, transform;
}
.tpl4 .t4-slide.is-active{ opacity:1; transform:scale(1) translateX(0); z-index:1; }
.tpl4 .t4-slide.is-exiting{ opacity:0; transform:scale(1.02) translateX(-18px); z-index:0; }
.tpl4 .t4-slide img{ width:100%; height:100%; object-fit:cover; }
.tpl4 .t4-cover-rule{
  position:absolute; left:0; right:0; bottom:8.2rem; height:1px;
  background:rgba(var(--primary-deeper-rgb),.12);
  z-index:2;
}
.tpl4 .t4-cover-foot{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:1.5rem 1.8rem 1.6rem;
  background:linear-gradient(0deg, rgba(255,255,255,.96) 58%, rgba(255,255,255,.55) 100%);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  border-top:1px solid rgba(255,255,255,.65);
}
.tpl4 .t4-cover-logo{
  width:3.2rem; height:3.2rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--t4-gold) 0%, var(--t4-accent-b) 100%);
  color:var(--white); font-size:1.4rem;
  box-shadow:0 6px 16px rgba(var(--gold-rgb),.35);
  margin-bottom:.7rem;
}
.tpl4 .t4-cover-title{
  font-family:var(--t4-seri); font-weight:700;
  font-size:1.85rem; letter-spacing:.01em; color:var(--t4-navy-deep);
  line-height:1.1;
}
.tpl4 .t4-cover-tag{
  font-family:var(--t4-sans); font-weight:700;
  font-size:1rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--t4-gold-d); margin-top:.3rem;
  transition:opacity .3s;
}
.tpl4 .t4-cover-stamp{
  position:absolute; top:-1.2rem; right:-1.2rem; z-index:4;
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.65rem 1.1rem;
  background:var(--t4-accent);
  color:var(--white);
  font-family:var(--t4-sans); font-weight:700; font-size:1rem; letter-spacing:.12em; text-transform:uppercase;
  border-radius:999px;
  border:1.5px solid rgba(255,255,255,.9);
  box-shadow:0 10px 22px rgba(var(--accent-rgb),.4);
  transform:rotate(5deg);
  animation:t4Stamp 6s ease-in-out infinite;
}
@keyframes t4Stamp{ 0%,100%{transform:rotate(5deg) translateY(0)}50%{transform:rotate(5deg) translateY(-5px)} }

.tpl4 .t4-float-card{
  position:absolute; z-index:5;
  display:flex; align-items:center; gap:1rem;
  padding:1.1rem 1.45rem;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(255,255,255,.6);
  border-radius:16px;
  box-shadow:0 16px 36px rgba(0,0,0,.28);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  color:var(--t4-navy-deep);
  animation:t4FloatCard 6s ease-in-out infinite;
}
.tpl4 .t4-float-card i{ font-size:2rem; color:var(--t4-gold-d); flex-shrink:0; }
.tpl4 .t4-float-card strong{ display:block; font-family:var(--t4-seri); font-size:2.1rem; font-weight:700; line-height:1; color:var(--t4-navy-deep); }
.tpl4 .t4-float-card span{ font-family:var(--t4-sans); font-size:.95rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--t4-faint); }
.tpl4 .t4-float-card--1{ top:8%; left:-5%; animation-delay:0s; }
.tpl4 .t4-float-card--1 i{ color:var(--t4-accent); }
.tpl4 .t4-float-card--2{ bottom:22%; right:-6%; animation-delay:1.4s; }
@keyframes t4FloatCard{ 0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)} }

.tpl4 .t4-cover-dots{
  position:absolute; bottom:8.4rem; right:1.4rem; z-index:6;
  display:flex; gap:.5rem; align-items:center;
  padding:.35rem .5rem;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(var(--gold-rgb),.18);
  border-radius:999px;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  box-shadow:0 6px 16px rgba(0,0,0,.12);
}
.tpl4 .t4-cover-dots button{
  width:.62rem; height:.62rem; padding:0; border:0; border-radius:50%;
  background:rgba(var(--primary-deeper-rgb),.22); cursor:pointer; transition:all .3s var(--t4-ease);
}
.tpl4 .t4-cover-dots button.is-active{ background:var(--t4-gold-d); transform:scale(1.5); box-shadow:0 0 0 3px rgba(var(--gold-rgb),.18); }
.tpl4 .t4-cover-dots button:focus-visible{ outline:2px solid var(--t4-accent); outline-offset:2px; }

/* ══════════════════════════════════════════════════════════
   STAT BAND — glass counters (magazine contents) — footer-fused
   ══════════════════════════════════════════════════════════ */
.tpl4 .t4-stats{ position:relative; z-index:5; padding:2.8rem 0 1.5rem; margin-top:-5.2rem; }
.tpl4 .t4-stats-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.6rem;
}
.tpl4 .t4-stat{
  position:relative;
  padding:2.6rem 1.8rem 2.2rem;
  text-align:center;
  background:rgba(255,255,255,.86);
  border:1px solid var(--t4-line);
  border-top:3px solid var(--t4-gold);
  border-radius:18px;
  box-shadow:0 14px 36px rgba(var(--primary-deeper-rgb),.11), inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  overflow:hidden;
  transition:transform .4s var(--t4-ease), box-shadow .4s var(--t4-ease), border-color .3s;
}
.tpl4 .t4-stat::before{
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--t4-gold) 0%, var(--t4-accent-b) 100%);
  transform:scaleX(0); transform-origin:left; transition:transform .45s var(--t4-ease);
}
.tpl4 .t4-stat:hover{ transform:translateY(-6px); box-shadow:0 22px 50px rgba(var(--primary-deeper-rgb),.16); border-color:rgba(var(--gold-rgb),.32); }
.tpl4 .t4-stat:hover::before{ transform:scaleX(1); }
.tpl4 .t4-stat-num{
  display:block;
  font-family:var(--t4-seri);
  font-size:clamp(2.9rem,4vw,4rem); font-weight:700; line-height:1;
  color:var(--t4-navy-deep);
  margin-bottom:.8rem;
  font-feature-settings:"lnum";
}
.tpl4 .t4-stat-num em{ font-style:normal; color:var(--t4-gold-d); }
.tpl4 .t4-stat-label{
  font-family:var(--t4-sans); font-weight:700;
  font-size:1.08rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--t4-muted);
}

/* ══════════════════════════════════════════════════════════
   FEATURE SPREAD — school levels (magazine feature stories)
   ══════════════════════════════════════════════════════════ */
.tpl4 .t4-features{ padding:7.5rem 0; position:relative; background:var(--t4-cream); }
.tpl4 .t4-features-head{ text-align:center; margin-bottom:4.5rem; max-width:72rem; margin-left:auto; margin-right:auto; }
.tpl4 .t4-features-grid{
  display:grid; gap:2.2rem;
  grid-template-columns:repeat(3,1fr);
}
.tpl4 .t4-features-grid--1{ grid-template-columns:minmax(0,560px); justify-content:center; }
.tpl4 .t4-features-grid--2{ grid-template-columns:repeat(2,1fr); max-width:860px; margin:0 auto; }
.tpl4 .t4-feature{
  position:relative;
  background:var(--white);
  border:1px solid var(--t4-line);
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 6px 24px rgba(var(--primary-deeper-rgb),.07);
  transition:transform .45s var(--t4-ease), box-shadow .45s var(--t4-ease), border-color .3s;
}
.tpl4 .t4-feature:hover{ transform:translateY(-8px); box-shadow:0 22px 56px rgba(var(--primary-deeper-rgb),.14); border-color:rgba(var(--gold-rgb),.22); }
.tpl4 .t4-feature-visual{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--t4-soft); }
.tpl4 .t4-feature-visual::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 55%, rgba(var(--primary-deeper-rgb),.22) 100%); pointer-events:none; }
.tpl4 .t4-feature-visual img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--t4-ease); }
.tpl4 .t4-feature:hover .t4-feature-visual img{ transform:scale(1.06); }
.tpl4 .t4-feature-num{
  position:absolute; top:1.2rem; left:1.2rem; z-index:2;
  width:4.2rem; height:4.2rem;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--t4-seri); font-weight:700; font-size:1.5rem;
  color:var(--t4-gold-d);
  background:rgba(255,255,255,.92);
  border:1px solid rgba(var(--gold-rgb),.35);
  border-radius:50%;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  box-shadow:0 6px 16px rgba(0,0,0,.14);
}
.tpl4 .t4-feature-ages{
  position:absolute; bottom:1rem; left:1.2rem; z-index:2;
  font-family:var(--t4-sans); font-weight:700;
  font-size:.95rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--white);
  padding:.5rem 1rem;
  background:rgba(var(--primary-deeper-rgb),.68);
  border:1px solid rgba(255,255,255,.28);
  border-radius:999px;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.tpl4 .t4-feature-body{ padding:2.4rem 2.2rem 2.2rem; position:relative; }
.tpl4 .t4-feature-icon{
  width:5rem; height:5rem; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--t4-gold-p) 0%, var(--t4-cream-deep) 100%);
  border:1px solid rgba(var(--gold-rgb),.28);
  color:var(--t4-gold-d);
  font-size:2rem;
  margin:-3.8rem 0 1.4rem;
  position:relative; z-index:3;
  box-shadow:0 8px 20px rgba(var(--gold-rgb),.22);
  transition:transform .4s var(--t4-ease), color .3s, background .3s;
}
.tpl4 .t4-feature:hover .t4-feature-icon{ transform:rotate(-6deg) scale(1.06); background:linear-gradient(135deg, var(--t4-gold) 0%, var(--t4-accent-b) 100%); color:var(--white); border-color:transparent; }
.tpl4 .t4-feature-roman{
  font-family:var(--t4-sans); font-weight:700;
  font-size:1rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--t4-gold-d); margin-bottom:.7rem;
}
.tpl4 .t4-feature h3{
  font-family:var(--t4-seri); font-weight:600;
  font-size:clamp(1.9rem,2.2vw,2.35rem); color:var(--t4-navy-deep);
  margin:0 0 1rem; line-height:1.18;
}
.tpl4 .t4-feature p{
  font-size:1.42rem; line-height:1.74; color:var(--t4-muted); margin:0 0 1.6rem;
}
.tpl4 .t4-feature-link{
  display:inline-flex; align-items:center; gap:.7rem;
  font-family:var(--t4-sans); font-weight:700; font-size:1.22rem;
  color:var(--t4-accent);
  border-bottom:2px solid rgba(var(--accent-rgb),.28);
  padding-bottom:.2rem;
  transition:gap .3s var(--t4-ease), color .3s, border-color .3s;
}
.tpl4 .t4-feature-link i{ transition:transform .3s var(--t4-ease); }
.tpl4 .t4-feature:hover .t4-feature-link{ gap:1.1rem; color:var(--t4-gold-d); border-color:var(--t4-gold); }
.tpl4 .t4-feature:hover .t4-feature-link i{ transform:translateX(3px); }

/* ══════════════════════════════════════════════════════════
   EDITORIAL SPLIT — vision & mission (drop-cap, numbered list)
   ══════════════════════════════════════════════════════════ */
.tpl4 .t4-editorial{ padding:7.5rem 0; position:relative; overflow:hidden; background:var(--white); border-top:1px solid var(--t4-line-soft); border-bottom:1px solid var(--t4-line-soft); }
.tpl4 .t4-editorial::before{
  content:'\201C'; position:absolute; top:2rem; right:3%;
  font-family:var(--t4-seri); font-size:28rem; line-height:1;
  color:rgba(var(--primary-rgb),.04); pointer-events:none;
  transform:rotate(10deg);
}
.tpl4 .t4-editorial-grid{
  display:grid; grid-template-columns:1.02fr 1fr; gap:4.5rem; align-items:start;
}
.tpl4 .t4-editorial .t4-kicker{ margin-bottom:1.2rem; }
.tpl4 .t4-editorial .t4-title{ margin-top:0; font-size:clamp(2.6rem,3.8vw,3.8rem); }
.tpl4 .t4-vision-text{
  font-size:1.62rem; line-height:1.92; color:var(--t4-ink);
  font-family:var(--t4-seri);
  margin-top:1.2rem;
}
.tpl4 .t4-vision-text::first-letter{
  font-family:var(--t4-seri);
  font-size:5rem; font-weight:700; line-height:.82;
  float:left; margin:.1em .12em 0 0;
  color:var(--t4-gold-d);
}
.tpl4 .t4-mission{ background:var(--t4-cream); border:1px solid var(--t4-line); border-radius:20px; padding:2.8rem 2.6rem; box-shadow:0 8px 28px rgba(var(--primary-deeper-rgb),.07); position:relative; }
.tpl4 .t4-mission::before{ content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, var(--t4-gold) 0%, var(--t4-accent-b) 100%); border-radius:20px 20px 0 0; }
.tpl4 .t4-mission-title{
  font-family:var(--t4-seri); font-size:2rem; font-weight:600; color:var(--t4-navy-deep);
  margin-bottom:1.8rem; display:flex; align-items:center; gap:.9rem;
}
.tpl4 .t4-mission-title::before{ content:''; width:.9rem; height:.9rem; background:var(--t4-gold); clip-path:polygon(25% 5%,75% 5%,100% 50%,75% 95%,25% 95%,0% 50%); flex-shrink:0; }
.tpl4 .t4-mission-list{ list-style:none; margin:0; padding:0; counter-reset:t4m; }
.tpl4 .t4-mission-list li{
  counter-increment:t4m;
  position:relative;
  padding:1.35rem 0 1.35rem 5rem;
  border-bottom:1px dashed var(--t4-line);
  font-size:1.4rem; line-height:1.68; color:var(--t4-muted);
  transition:color .25s, padding-left .3s var(--t4-ease);
}
.tpl4 .t4-mission-list li:last-child{ border-bottom:none; }
.tpl4 .t4-mission-list li::before{
  content:counter(t4m, decimal-leading-zero);
  position:absolute; left:0; top:1.35rem;
  width:3.4rem; height:3.4rem;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--t4-sans); font-weight:700; font-size:1.25rem;
  color:var(--t4-gold-d);
  background:var(--t4-gold-p);
  border:1px solid rgba(var(--gold-rgb),.28);
  border-radius:10px;
  transition:background .3s, color .3s, transform .3s var(--t4-ease);
}
.tpl4 .t4-mission-list li:hover{ color:var(--t4-navy-deep); padding-left:5.5rem; }
.tpl4 .t4-mission-list li:hover::before{ background:linear-gradient(135deg, var(--t4-gold), var(--t4-accent-b)); color:var(--white); transform:rotate(-4deg) scale(1.04); border-color:transparent; }

/* ══════════════════════════════════════════════════════════
   SNAPSHOT — mission & values carousel (NEW — footer-fused)
   This is the 'A snapshot of our mission & values' slider that
   was missing/broken in template 4. Now a proper draggable
   track with footer accent palette.
   ══════════════════════════════════════════════════════════ */
.tpl4 .t4-snapshot{ padding:7.5rem 0; background:var(--t4-cream-deep); border-top:1px solid var(--t4-line-soft); position:relative; overflow:hidden; }
.tpl4 .t4-snapshot::before{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(circle at 8% 18%, rgba(var(--gold-rgb),.09) 0%, transparent 38%),
    radial-gradient(circle at 92% 85%, rgba(var(--accent-rgb),.08) 0%, transparent 40%);
  pointer-events:none;
}
.tpl4 .t4-snapshot-head{ text-align:center; margin-bottom:4rem; position:relative; z-index:1; }
.tpl4 .t4-snapshot-head .t4-title{ color:var(--t4-navy-deep); }
.tpl4 .t4-snapshot-head .t4-lead{ color:var(--t4-muted); }
.tpl4 .t4-snapshot-stage{
  position:relative; z-index:1;
  overflow:hidden;
  padding:.6rem .4rem 1.2rem;
  margin:0 -.4rem;
  cursor:grab;
}
.tpl4 .t4-snapshot-stage:active{ cursor:grabbing; }
.tpl4 .t4-snapshot-track{
  display:flex; gap:1.6rem;
  will-change:transform;
  transition:transform .55s var(--t4-ease);
}
.tpl4 .t4-snap-card{
  flex:0 0 calc(33.333% - 1.07rem);
  min-width:0;
  background:var(--white);
  border:1px solid var(--t4-line);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 6px 20px rgba(var(--primary-deeper-rgb),.07);
  display:flex; flex-direction:column;
  transition:transform .35s var(--t4-ease), box-shadow .35s var(--t4-ease), border-color .3s;
}
.tpl4 .t4-snap-card:hover{ transform:translateY(-6px); box-shadow:0 18px 42px rgba(var(--primary-deeper-rgb),.13); border-color:rgba(var(--gold-rgb),.28); }
.tpl4 .t4-snap-img{
  position:relative; aspect-ratio:16/10.2; overflow:hidden; background:var(--t4-soft);
  flex-shrink:0;
}
.tpl4 .t4-snap-img img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--t4-ease); }
.tpl4 .t4-snap-card:hover .t4-snap-img img{ transform:scale(1.05); }
.tpl4 .t4-snap-tag{
  position:absolute; top:1rem; left:1rem; z-index:2;
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.38rem .85rem;
  background:var(--t4-accent);
  color:var(--white);
  font-family:var(--t4-sans); font-weight:700; font-size:.92rem; letter-spacing:.16em; text-transform:uppercase;
  border-radius:999px;
  box-shadow:0 4px 12px rgba(var(--accent-rgb),.32);
  border:1px solid rgba(255,255,255,.85);
}
.tpl4 .t4-snap-tag--vision{ background:var(--t4-navy-deep); }
.tpl4 .t4-snap-body{ padding:1.8rem 1.7rem 1.7rem; flex:1; display:flex; flex-direction:column; }
.tpl4 .t4-snap-text{
  font-size:1.38rem; line-height:1.72; color:var(--t4-muted);
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;
  flex:1;
}
.tpl4 .t4-snap-foot{
  margin-top:1.2rem; padding-top:1rem;
  border-top:1px dashed var(--t4-line-soft);
  display:flex; align-items:center; gap:.6rem;
  font-family:var(--t4-sans); font-weight:700; font-size:1.08rem; color:var(--t4-gold-d);
}
.tpl4 .t4-snapshot-controls{
  display:flex; align-items:center; justify-content:center; gap:1.4rem;
  margin-top:2.2rem; position:relative; z-index:1;
}
.tpl4 .t4-snap-arrow{
  width:4.2rem; height:4.2rem; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--white);
  border:1px solid var(--t4-line);
  color:var(--t4-navy-deep);
  box-shadow:0 6px 18px rgba(var(--primary-deeper-rgb),.08);
  cursor:pointer; transition:all .3s var(--t4-ease);
  flex-shrink:0;
}
.tpl4 .t4-snap-arrow:hover{ background:var(--t4-navy-deep); color:var(--white); border-color:var(--t4-navy-deep); transform:translateY(-2px); box-shadow:0 10px 24px rgba(var(--primary-deeper-rgb),.18); }
.tpl4 .t4-snap-arrow:active{ transform:translateY(0); }
.tpl4 .t4-snap-dots{ display:flex; gap:.55rem; align-items:center; }
.tpl4 .t4-snap-dots button{
  width:.62rem; height:.62rem; border-radius:50%; border:0; padding:0;
  background:rgba(var(--primary-deeper-rgb),.18); cursor:pointer; transition:all .3s var(--t4-ease);
}
.tpl4 .t4-snap-dots button.is-active{ background:var(--t4-gold-d); width:2rem; border-radius:999px; }

/* ══════════════════════════════════════════════════════════
   IN THIS ISSUE — bento grid of portal features
   ══════════════════════════════════════════════════════════ */
.tpl4 .t4-bento-wrap{ padding:7.5rem 0; background:var(--white); border-top:1px solid var(--t4-line-soft); position:relative; overflow:hidden; }
.tpl4 .t4-bento-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:2.5rem; flex-wrap:wrap; margin-bottom:3.8rem; }
.tpl4 .t4-bento-head .t4-lead{ margin:0; text-align:left; max-width:42rem; }
.tpl4 .t4-bento-head .t4-kicker{ margin-bottom:.6rem; }
.tpl4 .t4-bento{
  display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:minmax(12.5rem,auto); gap:1.6rem;
}
.tpl4 .t4-bento-item{
  position:relative;
  border:1px solid var(--t4-line);
  border-radius:20px;
  padding:2.4rem 2.2rem;
  background:linear-gradient(160deg, var(--white) 0%, var(--t4-cream) 100%);
  box-shadow:0 4px 18px rgba(var(--primary-deeper-rgb),.05);
  overflow:hidden;
  isolation:isolate;
  transition:transform .4s var(--t4-ease), box-shadow .4s var(--t4-ease), border-color .3s;
}
.tpl4 .t4-bento-item::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(circle at 18% 0%, rgba(var(--gold-rgb),.10) 0%, transparent 55%),
    radial-gradient(circle at 88% 100%, rgba(var(--primary-rgb),.07) 0%, transparent 55%);
  opacity:0; transition:opacity .4s;
}
.tpl4 .t4-bento-item:hover{ transform:translateY(-7px); box-shadow:0 20px 50px rgba(var(--primary-deeper-rgb),.12); border-color:rgba(var(--gold-rgb),.28); }
.tpl4 .t4-bento-item:hover::before{ opacity:1; }
.tpl4 .t4-bento-icon{
  width:4.8rem; height:4.8rem; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background:var(--t4-gold-p);
  border:1px solid rgba(var(--gold-rgb),.22);
  color:var(--t4-gold-d);
  font-size:2rem;
  margin-bottom:1.6rem;
  transition:transform .4s var(--t4-ease), background .3s, color .3s;
}
.tpl4 .t4-bento-item:hover .t4-bento-icon{ transform:rotate(-6deg) scale(1.06); background:var(--t4-gold); color:var(--white); border-color:transparent; }
.tpl4 .t4-bento-title{
  font-family:var(--t4-seri); font-weight:600;
  font-size:1.95rem; color:var(--t4-navy-deep); margin:0 0 .7rem; line-height:1.18;
}
.tpl4 .t4-bento-desc{ font-size:1.35rem; line-height:1.7; color:var(--t4-muted); margin:0 0 1.4rem; }
.tpl4 .t4-bento-link{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--t4-sans); font-weight:700; font-size:1.15rem;
  color:var(--t4-accent); transition:gap .3s var(--t4-ease), color .3s;
}
.tpl4 .t4-bento-link i{ transition:transform .3s var(--t4-ease); }
.tpl4 .t4-bento-item:hover .t4-bento-link{ gap:1rem; color:var(--t4-gold-d); }
.tpl4 .t4-bento-item:hover .t4-bento-link i{ transform:translateX(3px); }

/* ══════════════════════════════════════════════════════════
   VALUES — dark bento with glass tiles (footer-fused dark)
   ══════════════════════════════════════════════════════════ */
.tpl4 .t4-values{ padding:7.5rem 0; background:linear-gradient(160deg, var(--t4-navy-deep) 0%, var(--t4-navy) 60%, var(--primary-dark) 100%); color:var(--white); position:relative; overflow:hidden; border-top:4px solid var(--t4-accent); }
.tpl4 .t4-values::before{
  content:''; position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 12% 20%, rgba(var(--gold-rgb),.10) 0%, transparent 40%),
    radial-gradient(circle at 88% 80%, rgba(var(--accent-rgb),.10) 0%, transparent 42%);
  pointer-events:none;
}
.tpl4 .t4-values::after{
  content:''; position:absolute; top:-8rem; right:-6rem; width:26rem; height:26rem; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.05) 0%, transparent 70%); pointer-events:none;
}
.tpl4 .t4-values-head{ text-align:center; margin-bottom:4.5rem; position:relative; z-index:1; }
.tpl4 .t4-values-head .t4-title{ color:var(--white); }
.tpl4 .t4-values-head .t4-lead{ color:rgba(255,255,255,.72); }
.tpl4 .t4-values-head .t4-rule{ background:linear-gradient(90deg, var(--t4-gold-b), transparent); }
.tpl4 .t4-values-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; position:relative; z-index:1; }
.tpl4 .t4-value{
  position:relative;
  padding:2.6rem 2.2rem;
  background:rgba(255,255,255,.06);
  border:1px solid var(--t4-white-line);
  border-radius:18px;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  overflow:hidden;
  transition:transform .4s var(--t4-ease), background .35s, border-color .3s, box-shadow .4s;
}
.tpl4 .t4-value::before{
  content:''; position:absolute; top:-30%; right:-20%;
  width:65%; height:160%; border-radius:50%;
  background:radial-gradient(circle, rgba(var(--gold-rgb),.16) 0%, transparent 70%);
  opacity:0; transition:opacity .4s; pointer-events:none;
}
.tpl4 .t4-value:hover{ transform:translateY(-7px); background:rgba(255,255,255,.10); border-color:rgba(var(--gold-rgb),.42); box-shadow:0 20px 44px rgba(0,0,0,.32); }
.tpl4 .t4-value:hover::before{ opacity:1; }
.tpl4 .t4-value-num{
  font-family:var(--t4-seri); font-size:3.8rem; font-weight:700; line-height:1;
  color:rgba(255,255,255,.10); position:absolute; top:1.2rem; right:1.4rem;
  font-feature-settings:"lnum";
}
.tpl4 .t4-value-icon{
  width:5rem; height:5rem; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--t4-gold) 0%, var(--t4-accent-b) 100%);
  color:var(--white); font-size:2rem;
  margin-bottom:1.4rem;
  box-shadow:0 8px 22px rgba(var(--gold-rgb),.30);
  transition:transform .35s var(--t4-ease);
  position:relative; z-index:1;
}
.tpl4 .t4-value:hover .t4-value-icon{ transform:rotate(-6deg) scale(1.06); }
.tpl4 .t4-value h3{ font-family:var(--t4-seri); font-weight:600; font-size:2rem; color:var(--white); margin:0 0 .8rem; position:relative; z-index:1; }
.tpl4 .t4-value p{ font-size:1.33rem; color:rgba(255,255,255,.70); line-height:1.7; margin:0; position:relative; z-index:1; }

/* ══════════════════════════════════════════════════════════
   FOUNDER'S NOTE — pull quote (cream on footer accent)
   ══════════════════════════════════════════════════════════ */
.tpl4 .t4-founder{ padding:7rem 0; position:relative; overflow:hidden; background:var(--t4-cream); border-top:1px solid var(--t4-line-soft); }
.tpl4 .t4-founder::before{
  content:'\201C'; position:absolute; top:.5rem; left:50%; transform:translateX(-50%);
  font-family:var(--t4-seri); font-size:22rem; line-height:1; color:rgba(var(--gold-rgb),.09);
  pointer-events:none;
}
.tpl4 .t4-founder-quote{
  font-family:var(--t4-seri); font-style:italic; font-weight:500;
  font-size:clamp(2.05rem,3.2vw,3rem); line-height:1.44;
  color:var(--t4-navy-deep); text-align:center;
  max-width:82rem; margin:0 auto 2.8rem; position:relative;
}
.tpl4 .t4-founder-quote .t4-quote-mark{ color:var(--t4-gold-d); }
.tpl4 .t4-founder-author{ display:flex; align-items:center; justify-content:center; gap:1.4rem; }
.tpl4 .t4-founder-avatar{
  width:5.4rem; height:5.4rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--t4-seri); font-size:2.2rem; font-weight:700;
  color:var(--white);
  background:linear-gradient(135deg, var(--t4-gold) 0%, var(--t4-accent-b) 100%);
  border:2.5px solid rgba(var(--gold-rgb),.35);
  box-shadow:0 10px 24px rgba(var(--gold-rgb),.30);
}
.tpl4 .t4-founder-meta{ text-align:left; }
.tpl4 .t4-founder-meta strong{ display:block; font-family:var(--t4-seri); font-size:1.75rem; font-weight:600; color:var(--t4-navy-deep); }
.tpl4 .t4-founder-meta span{ font-family:var(--t4-sans); font-size:1.05rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--t4-gold-d); }
.tpl4 .t4-founder-stars{ color:var(--t4-gold); font-size:1.2rem; margin-top:.4rem; letter-spacing:.25em; }

/* ══════════════════════════════════════════════════════════
   NEWS & EVENTS — magazine article cards
   ══════════════════════════════════════════════════════════ */
.tpl4 .t4-news{ padding:7.5rem 0; background:var(--white); border-top:1px solid var(--t4-line-soft); }
.tpl4 .t4-news-head{ text-align:center; margin-bottom:4rem; }
.tpl4 .t4-news-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; }
.tpl4 .t4-news-card{
  display:block;
  background:var(--white);
  border:1px solid var(--t4-line);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 4px 18px rgba(var(--primary-deeper-rgb),.06);
  transition:transform .4s var(--t4-ease), box-shadow .4s var(--t4-ease), border-color .3s;
}
.tpl4 .t4-news-card:hover{ transform:translateY(-8px); box-shadow:0 22px 52px rgba(var(--primary-deeper-rgb),.14); border-color:rgba(var(--gold-rgb),.22); }
.tpl4 .t4-news-img{ position:relative; aspect-ratio:16/10.2; overflow:hidden; background:var(--t4-soft); }
.tpl4 .t4-news-img::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 62%, rgba(var(--primary-deeper-rgb),.14) 100%); pointer-events:none; }
.tpl4 .t4-news-img img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--t4-ease); }
.tpl4 .t4-news-card:hover .t4-news-img img{ transform:scale(1.05); }
.tpl4 .t4-news-date{
  position:absolute; top:1.2rem; left:1.2rem; z-index:2;
  width:5rem; padding:.65rem 0; text-align:center;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(var(--gold-rgb),.32);
  border-radius:12px;
  box-shadow:0 8px 20px rgba(0,0,0,.14);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.tpl4 .t4-news-date strong{ display:block; font-family:var(--t4-seri); font-size:2rem; font-weight:700; line-height:1; color:var(--t4-navy-deep); font-feature-settings:"lnum"; }
.tpl4 .t4-news-date span{ font-family:var(--t4-sans); font-weight:700; font-size:.92rem; letter-spacing:.16em; text-transform:uppercase; color:var(--t4-gold-d); }
.tpl4 .t4-news-body{ padding:2rem 2rem 2.1rem; }
.tpl4 .t4-news-tag{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--t4-sans); font-weight:700; font-size:.95rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--t4-accent); margin-bottom:1rem;
}
.tpl4 .t4-news-title{
  font-family:var(--t4-seri); font-weight:600; font-size:1.95rem; line-height:1.24; color:var(--t4-navy-deep);
  margin:0 0 .7rem; transition:color .25s;
}
.tpl4 .t4-news-card:hover .t4-news-title{ color:var(--t4-gold-d); }
.tpl4 .t4-news-excerpt{ font-size:1.33rem; line-height:1.72; color:var(--t4-muted); margin:0 0 1.2rem; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.tpl4 .t4-news-link{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--t4-sans); font-weight:700; font-size:1.15rem; color:var(--t4-accent);
  border-bottom:2px solid rgba(var(--accent-rgb),.24); padding-bottom:.15rem;
  transition:gap .3s var(--t4-ease), color .3s, border-color .3s;
}
.tpl4 .t4-news-link i{ transition:transform .25s var(--t4-ease); }
.tpl4 .t4-news-card:hover .t4-news-link{ gap:1rem; color:var(--t4-gold-d); border-color:var(--t4-gold); }
.tpl4 .t4-news-card:hover .t4-news-link i{ transform:translateX(3px); }

/* ══════════════════════════════════════════════════════════
   CTA — enrollment card (footer-fused)
   ══════════════════════════════════════════════════════════ */
.tpl4 .t4-cta{ padding:7rem 0; position:relative; background:var(--t4-cream); border-top:1px solid var(--t4-line-soft); }
.tpl4 .t4-cta-card{
  position:relative;
  max-width:980px; margin:0 auto;
  padding:5.5rem 3.5rem;
  text-align:center;
  border-radius:28px;
  color:var(--white);
  background:
    radial-gradient(circle at 12% 18%, rgba(var(--gold-rgb),.16) 0%, transparent 42%),
    radial-gradient(circle at 88% 78%, rgba(var(--accent-rgb),.18) 0%, transparent 42%),
    linear-gradient(155deg, var(--t4-navy) 0%, var(--t4-navy-deep) 100%);
  border:1px solid rgba(var(--gold-rgb),.30);
  border-top:4px solid var(--t4-accent);
  box-shadow:0 24px 60px rgba(var(--primary-deeper-rgb),.28);
  overflow:hidden;
  isolation:isolate;
}
.tpl4 .t4-cta-card::before{
  content:''; position:absolute; inset:1.3rem; z-index:-1;
  border:1px dashed rgba(var(--gold-rgb),.28); border-radius:18px; pointer-events:none;
}
.tpl4 .t4-cta-card h3{
  font-family:var(--t4-seri); font-weight:600;
  font-size:clamp(2.7rem,4.5vw,4.2rem); line-height:1.13; color:var(--white); margin:1.2rem 0 1.4rem;
  position:relative; z-index:1;
}
.tpl4 .t4-cta-card h3 em{ color:var(--t4-gold-b); font-style:italic; }
.tpl4 .t4-cta-card p{
  font-size:1.5rem; color:rgba(255,255,255,.78);
  max-width:54rem; margin:0 auto 2.4rem; line-height:1.75; position:relative; z-index:1;
}
.tpl4 .t4-cta-actions{ display:flex; justify-content:center; gap:1.2rem; flex-wrap:wrap; position:relative; z-index:1; }
.tpl4 .t4-cta-meta{
  display:flex; justify-content:center; gap:2rem; flex-wrap:wrap;
  margin-top:2.4rem; position:relative; z-index:1;
  font-family:var(--t4-sans); font-weight:700; font-size:1.08rem; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(255,255,255,.62);
}
.tpl4 .t4-cta-meta span{ display:inline-flex; align-items:center; gap:.5rem; }
.tpl4 .t4-cta-meta i{ color:var(--t4-gold-b); }

/* ══════════════════════════════════════════════════════════
   Reduced motion
   ══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce){
  .tpl4 .t4-reveal{ opacity:1 !important; transform:none !important; }
  .tpl4 .t4-cover, .tpl4 .t4-cover-stamp, .tpl4 .t4-float-card,
  .tpl4 .t4-hero-deco--1, .tpl4 .t4-hero-deco--2, .tpl4 .t4-hero-deco--3{ animation:none !important; }
}

/* ══════════════════════════════════════════════════════════
   Responsive — TABLET & MOBILE overhaul
   ══════════════════════════════════════════════════════════ */
@media (max-width:1100px){
  .tpl4 .t4-hero-grid{ gap:3.5rem; }
  .tpl4 .t4-stats-grid{ grid-template-columns:repeat(2,1fr); gap:1.4rem; }
  .tpl4 .t4-features-grid{ gap:1.8rem; }
  .tpl4 .t4-bento{ grid-template-columns:repeat(2,1fr); }
  .tpl4 .t4-values-grid{ grid-template-columns:repeat(2,1fr); }
  .tpl4 .t4-news-grid{ grid-template-columns:1fr 1fr; gap:1.6rem; }
  .tpl4 .t4-snap-card{ flex:0 0 calc(50% - .8rem); }
}
@media (max-width:900px){
  .tpl4 .t4-container, .tpl4 .t4-narrow{ padding:0 1.8rem; }
  .tpl4 .t4-hero{ padding:6rem 0 8rem; }
  .tpl4 .t4-hero::after{ height:52px; clip-path:polygon(0 40%, 100% 100%, 0 100%); }
  .tpl4 .t4-hero-grid{ grid-template-columns:1fr; gap:3.2rem; }
  .tpl4 .t4-hero-side{ order:2; max-width:420px; margin:0 auto; width:100%; }
  .tpl4 .t4-cover-wrap{ max-width:360px; }
  .tpl4 .t4-float-card--1{ left:-.4rem; top:6%; }
  .tpl4 .t4-float-card--2{ right:-.4rem; bottom:18%; }
  .tpl4 .t4-features, .tpl4 .t4-editorial, .tpl4 .t4-snapshot, .tpl4 .t4-bento-wrap, .tpl4 .t4-values, .tpl4 .t4-founder, .tpl4 .t4-news, .tpl4 .t4-cta{ padding:5.5rem 0; }
  .tpl4 .t4-features-grid{ grid-template-columns:1fr; max-width:520px; margin:0 auto; }
  .tpl4 .t4-features-grid--2{ grid-template-columns:1fr; max-width:520px; }
  .tpl4 .t4-editorial-grid{ grid-template-columns:1fr; gap:3rem; }
  .tpl4 .t4-editorial::before{ font-size:18rem; top:1rem; }
  .tpl4 .t4-values-grid{ grid-template-columns:1fr; max-width:520px; margin:0 auto; }
  .tpl4 .t4-news-grid{ grid-template-columns:1fr; max-width:520px; margin:0 auto; }
  .tpl4 .t4-cta-card{ padding:4rem 2.2rem; border-radius:22px; }
  .tpl4 .t4-bento-head{ flex-direction:column; align-items:flex-start; gap:1rem; margin-bottom:2.8rem; }
  .tpl4 .t4-bento{ gap:1.4rem; }
  .tpl4 .t4-snapshot-track{ gap:1.4rem; }
}
@media (max-width:640px){
  .tpl4 .t4-container, .tpl4 .t4-narrow{ padding:0 1.4rem; }
  .tpl4 .t4-hero{ padding:4.5rem 0 6.5rem; }
  .tpl4 .t4-hero::after{ height:36px; }
  .tpl4 .t4-stats{ margin-top:-3.2rem; padding:1.8rem 0 1rem; }
  .tpl4 .t4-stats-grid{ grid-template-columns:repeat(2,1fr); gap:.8rem; }
  .tpl4 .t4-stat{ padding:1.6rem 1rem 1.4rem; }
  .tpl4 .t4-stat-num{ font-size:2.6rem; }
  .tpl4 .t4-masthead-line{ font-size:clamp(3rem,9vw,4.2rem); }
  .tpl4 .t4-hero-dek{ font-size:1.42rem; }
  .tpl4 .t4-hero-cta{ display:flex; flex-direction:row; flex-wrap:nowrap; gap:.6rem; }
  .tpl4 .t4-hero-cta .t4-btn{ flex:1 1 0; min-width:0; width:auto; justify-content:center; padding:1rem .6rem; font-size:1.05rem; white-space:nowrap; }
  .tpl4 .t4-hero-trust{ display:flex; flex-direction:row; flex-wrap:nowrap; gap:.6rem; }
  .tpl4 .t4-trust{ font-size:1.05rem; white-space:nowrap; gap:.5rem; }
  .tpl4 .t4-hero-byline{ gap:1rem; font-size:1.05rem; }
  .tpl4 .t4-cover-wrap{ max-width:300px; }
  .tpl4 .t4-cover{ border-radius:14px; }
  .tpl4 .t4-float-card{ padding:.9rem 1.2rem; gap:.8rem; }
  .tpl4 .t4-float-card strong{ font-size:1.7rem; }
  .tpl4 .t4-float-card span{ font-size:.88rem; }
  .tpl4 .t4-float-card--1{ left:-.2rem; }
  .tpl4 .t4-float-card--2{ right:-.2rem; bottom:16%; }
  .tpl4 .t4-cover-dots{ bottom:7.8rem; right:1rem; }
  .tpl4 .t4-cover-stamp{ top:-.8rem; right:-.6rem; padding:.5rem .9rem; font-size:.92rem; }
  .tpl4 .t4-features, .tpl4 .t4-editorial, .tpl4 .t4-snapshot, .tpl4 .t4-bento-wrap, .tpl4 .t4-values, .tpl4 .t4-founder, .tpl4 .t4-news, .tpl4 .t4-cta{ padding:4.2rem 0; }
  .tpl4 .t4-title{ font-size:clamp(2.4rem,7vw,3rem); }
  .tpl4 .t4-lead{ font-size:1.42rem; }
  .tpl4 .t4-bento{ grid-template-columns:1fr; }
  .tpl4 .t4-bento-item{ padding:2rem 1.7rem; }
  .tpl4 .t4-snap-card{ flex:0 0 88%; }
  .tpl4 .t4-snapshot-stage{ overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .tpl4 .t4-snapshot-stage::-webkit-scrollbar{ display:none; }
  .tpl4 .t4-snapshot-track{ transition:none; }
  .tpl4 .t4-snap-arrow{ width:3.6rem; height:3.6rem; }
  .tpl4 .t4-founder-quote{ font-size:clamp(1.9rem,5.5vw,2.4rem); }
  .tpl4 .t4-founder-author{ flex-direction:column; text-align:center; }
  .tpl4 .t4-founder-meta{ text-align:center; }
  .tpl4 .t4-news-body{ padding:1.6rem 1.6rem 1.7rem; }
  .tpl4 .t4-cta-card{ padding:3.2rem 1.6rem; border-radius:18px; }
  .tpl4 .t4-cta-card::before{ inset:1rem; }
  .tpl4 .t4-cta-meta{ flex-direction:row; flex-wrap:wrap; gap:.5rem; justify-content:center; font-size:.95rem; }
  .tpl4 .t4-cta-actions{ display:flex; flex-direction:row; flex-wrap:nowrap; gap:.6rem; justify-content:center; }
  .tpl4 .t4-cta-actions .t4-btn{ flex:1 1 0; min-width:0; width:auto; justify-content:center; white-space:nowrap; padding:1rem .6rem; font-size:1.05rem; }
  /* First-principle fallback: any twin-button row stays side-by-side on mobile */
  .tpl4 .t4-hero-cta, .tpl4 .t4-cta-actions{ flex-direction:row !important; flex-wrap:nowrap !important; }
  .tpl4 .t4-vision-text::first-letter{ font-size:3.8rem; }
  .tpl4 .t4-mission{ padding:2rem 1.7rem; }
}
@media (max-width:380px){
  .tpl4 .t4-cover-wrap{ max-width:268px; }
  .tpl4 .t4-snap-card{ flex:0 0 92%; }
  .tpl4 .t4-hero-cta{ gap:.45rem; }
  .tpl4 .t4-hero-cta .t4-btn{ padding:.85rem .45rem; font-size:.92rem; gap:.4rem; }
  .tpl4 .t4-hero-trust{ gap:.35rem; }
  .tpl4 .t4-trust{ font-size:.88rem; gap:.35rem; }
  .tpl4 .t4-stats-grid{ gap:.6rem; }
  .tpl4 .t4-stat{ padding:1.3rem .8rem 1.1rem; }
  .tpl4 .t4-stat-num{ font-size:2.2rem; }
  .tpl4 .t4-cta-actions{ gap:.45rem; }
  .tpl4 .t4-cta-actions .t4-btn{ padding:.85rem .45rem; font-size:.92rem; gap:.4rem; }
  .tpl4 .t4-cta-meta{ gap:.35rem; font-size:.88rem; }
}

/* =====================================================
   TEMPLATE 5 — PLAYFUL
   ===================================================== */
.tpl5{
  --t5-sun:       var(--play-sun, #ffd93d);
  --t5-sun-2:     var(--play-sun-2, #ffe066);
  --t5-coral:     var(--play-coral, #ff8c42);
  --t5-coral-2:   var(--play-coral-2, #ffae72);
  --t5-coral-d:   var(--play-coral-d, #e97020);
  --t5-pink:      var(--play-pink, #ff6b9d);
  --t5-pink-2:    var(--play-pink-2, #ff9bbf);
  --t5-teal:      var(--play-teal, #2ec4b6);
  --t5-teal-2:    var(--play-teal-2, #5fd6cb);
  --t5-blue:      var(--play-blue, #4f8cf7);
  --t5-purple:    var(--play-purple, #9b5de5);
  --t5-purple-2:  var(--play-purple-2, #c39bff);
  --t5-cream: var(--primary-mist);
  --t5-cream-2: var(--white);
  --t5-cream-3: var(--gray-50);
  --t5-ink: var(--primary-dark);
  --t5-ink-2: var(--text-secondary);
  --t5-navy:      var(--brand-navy, #0a2540);
  --t5-navy-deep: var(--primary-deeper, #041f12);
  --t5-gold:      var(--gold, #c9a84c);
  --t5-gold-b:    var(--gold-bright, #ffd98a);
  --t5-gold-s:    var(--gold-soft, #f0d999);
  --t5-gold-p:    var(--gold-pale, #f7ecd2);
  --t5-gold-d:    var(--gold-dim, #a8842f);
  --t5-line:      rgba(var(--primary-rgb, 12,84,48), .14);
  --t5-line-soft: rgba(var(--primary-rgb, 12,84,48), .08);
  --t5-white-line: rgba(255,255,255,.16);
  --t5-ease:      cubic-bezier(.34,1.56,.64,1);
  --t5-smooth:    cubic-bezier(.2,.8,.2,1);
  --t5-wobble:    cubic-bezier(.36,.07,.19,.97);
  --t5-display:   'Caveat', 'Comic Neue', 'Patrick Hand', 'Fredoka', 'Nunito', 'Poppins', system-ui, sans-serif;
  --t5-head:      'Patrick Hand', 'Fredoka', 'Poppins', system-ui, sans-serif;
  --t5-body:      'Nunito', 'Comic Neue', 'Open Sans', system-ui, -apple-system, sans-serif;
  --t5-paper: var(--primary-mist); --t5-paper-size: auto;
  font-family:var(--t5-body);
  background:var(--t5-cream);
  color:var(--t5-ink);
  line-height:1.7;
  overflow:clip;
  position:relative;
}
.tpl5 *{ box-sizing:border-box; }
.tpl5 img{ max-width:100%; display:block; }
.tpl5 a{ color:inherit; text-decoration:none; }
.tpl5 button{ font-family:inherit; }
.tpl5 .t5-container{ max-width:1240px; margin:0 auto; padding:0 clamp(1rem,1.8vw,1.6rem); }
.tpl5 .t5-narrow{ max-width:880px; margin:0 auto; padding:0 clamp(1rem,1.8vw,1.6rem); }

/* ...
   UNIQUE: Paper-grain backdrop. The entire page sits on warm
   paper with a tiny noise/dot texture so it never feels plastic.
   ... */
.tpl5::before{
  content:''; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:var(--t5-paper);
  background-size:var(--t5-paper-size);
  opacity:.55;
}
.tpl5::after{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:var(--white); }

/* ...
   UNIQUE: Hand-drawn crayon underline & marker highlight.
   These are used inline with text to create the
   kindergarten-magazine feel.
   ... */
.tpl5 .t5-crayon{
  position:relative; display:inline-block;
}
.tpl5 .t5-crayon::after{
  content:''; position:absolute; left:-3%; right:-3%; bottom:.08em;
  height:.34em;
  background:var(--t5-sun-2);
  border-radius:50% 48% 52% 46% / 60% 40% 60% 40%;
  transform:rotate(-1.2deg) skewX(-3deg);
  z-index:-1;
  filter:url(#t5-crayon-rough);
}
.tpl5 .t5-marker{
  background:var(--t5-coral-2);
  padding:0 .15em;
  border-radius:2px;
  font-weight:700;
}

/* ...
   UNIQUE: Scallop border (top & bottom). A kindergarten
   staple ... paper with wavy cut edges.
   ... */
.tpl5 .t5-scallop-top,
.tpl5 .t5-scallop-bot{
  position:relative;
}
.tpl5 .t5-scallop-top::before{
  content:''; position:absolute; top:-1.4rem; left:-2%; right:-2%; height:2.8rem;
  background:var(--t5-cream);
  -webkit-mask: radial-gradient(circle, #000 1px, transparent 1.4px) repeat-x left top / 2.8rem 2.8rem;
          mask: radial-gradient(circle, #000 1px, transparent 1.4px) repeat-x left top / 2.8rem 2.8rem;
}
.tpl5 .t5-scallop-bot::after{
  content:''; position:absolute; bottom:-1.4rem; left:-2%; right:-2%; height:2.8rem;
  background:var(--t5-cream);
  -webkit-mask: radial-gradient(circle, #000 1px, transparent 1.4px) repeat-x left top / 2.8rem 2.8rem;
          mask: radial-gradient(circle, #000 1px, transparent 1.4px) repeat-x left top / 2.8rem 2.8rem;
}
.tpl5 .t5-zigzag-top::before{
  content:''; position:absolute; top:-1rem; left:0; right:0; height:2rem;
  background:var(--t5-cream);
  -webkit-mask:#000 -1.4rem 0/2.8rem 2rem,
              #000 -1.4rem 0/2.8rem 2rem;
  -webkit-mask-composite:xor;
          mask:#000 -1.4rem 0/2.8rem 2rem,
              #000 -1.4rem 0/2.8rem 2rem;
          mask-composite:exclude;
}

/* ...
   Scroll reveal ... bouncy, organic, slightly rotated
   ... */
.tpl5 .t5-reveal{
  opacity:0; transform:translateY(50px) rotate(-1.4deg) scale(.96);
  transform-origin:left bottom;
  transition: opacity .9s var(--t5-smooth), transform .9s var(--t5-wobble);
}
.tpl5 .t5-reveal.is-in{ opacity:1; transform:none; }
.tpl5 .t5-reveal--3d-l{ transform:translateX(-60px) rotateY(7deg); transform-origin:left center; }
.tpl5 .t5-reveal--3d-r{ transform:translateX(60px) rotateY(-7deg); transform-origin:right center; }
.tpl5 .t5-reveal--3d-l.is-in, .tpl5 .t5-reveal--3d-r.is-in{ transform:none; }
.tpl5 .t5-reveal--pop{ transform:scale(.7) rotate(8deg); }
.tpl5 .t5-reveal--pop.is-in{ transform:none; }
.tpl5 .t5-reveal--swing{ transform:rotate(-10deg) translateY(20px); transform-origin:top center; }
.tpl5 .t5-reveal--swing.is-in{ transform:none; }
.tpl5 .t5-reveal[data-d="1"]{ transition-delay:.08s; }
.tpl5 .t5-reveal[data-d="2"]{ transition-delay:.18s; }
.tpl5 .t5-reveal[data-d="3"]{ transition-delay:.28s; }
.tpl5 .t5-reveal[data-d="4"]{ transition-delay:.38s; }
.tpl5 .t5-reveal[data-d="5"]{ transition-delay:.48s; }
.tpl5 .t5-reveal[data-d="6"]{ transition-delay:.58s; }

/* ...
   UNIQUE: Hand-drawn typeface primitives ... eyebrow ribbons,
   issue bars, kickers shaped like little flag bookmarks
   ... */
.tpl5 .t5-issuebar{
  display:inline-flex; align-items:center; gap:1.2rem; flex-wrap:wrap;
  font-family:var(--t5-display);
  font-size:1.6rem; font-weight:600; letter-spacing:.02em;
  color:var(--t5-ink-2);
  padding:.4rem 1.6rem .4rem 0; margin-bottom:2rem;
  border-bottom:3px solid var(--t5-ink);
  border-image:var(--t5-ink) 7 / 0 0 3px 0;
}
.tpl5 .t5-issuebar-brand{ color:var(--t5-coral); font-weight:700; }
.tpl5 .t5-issuebar-dot{
  width:.9rem; height:.9rem; border-radius:50%;
  background:var(--t5-coral);
  box-shadow:inset -.2rem -.2rem 0 rgba(0,0,0,.18);
}

/* Hand-drawn ribbon flag (kicker) */
.tpl5 .t5-kicker{
  display:inline-flex; align-items:center; gap:.8rem;
  font-family:var(--t5-display);
  font-size:1.6rem; font-weight:700; letter-spacing:.04em;
  color:var(--t5-ink);
  position:relative;
  padding:.5rem 1.4rem .5rem 1rem;
  background:var(--t5-sun);
  border-radius:2px 14px 14px 2px;
  box-shadow:0 6px 0 var(--t5-gold-d), 0 10px 24px rgba(var(--accent-rgb,217,119,6),.25);
  transform:rotate(-1.5deg);
}
.tpl5 .t5-kicker::before{
  content:''; position:absolute; left:-1.4rem; top:0;
  width:1.4rem; height:100%;
  background:var(--t5-coral);
  clip-path:polygon(0 0, 100% 0, 100% 50%, 50% 100%, 0 50%);
}
.tpl5 .t5-kicker--center{ transform:rotate(-1.5deg) translateX(0); }
.tpl5 .t5-kicker--light{ background:var(--t5-coral); color:var(--white); }
.tpl5 .t5-kicker--light::before{ background:var(--t5-pink); }
.tpl5 .t5-kicker--teal{ background:var(--t5-teal); color:var(--white); }
.tpl5 .t5-kicker--teal::before{ background:var(--t5-teal-2); }
.tpl5 .t5-kicker--purple{ background:var(--t5-purple); color:var(--white); }
.tpl5 .t5-kicker--purple::before{ background:var(--t5-purple-2); }

/* Glassmorphic pill eyebrow (rarely used, for variety) */
.tpl5 .t5-eyebrow{
  display:inline-flex; align-items:center; gap:.9rem;
  padding:.7rem 1.5rem;
  background:rgba(255,255,255,.85);
  border:2px dashed var(--t5-ink);
  border-radius:99px;
  font-family:var(--t5-display); font-weight:600; font-size:1.5rem;
  color:var(--t5-ink);
  margin-bottom:2rem;
  transform:rotate(1deg);
  box-shadow:0 4px 0 rgba(0,0,0,.06);
}
.tpl5 .t5-eyebrow i{ color:var(--t5-coral); }

/* Hand-drawn headline */
.tpl5 .t5-h{
  font-family:var(--t5-display);
  font-size:clamp(3.4rem,5.6vw,5.6rem);
  font-weight:700; line-height:1.05; letter-spacing:-.01em;
  color:var(--t5-ink); margin:0 0 1.6rem;
}
.tpl5 .t5-h em, .tpl5 .t5-h .accent{
  font-style:normal;
}
.tpl5 .t5-h .t5-word-coral{ color:var(--t5-coral); }
.tpl5 .t5-h .t5-word-teal{ color:var(--t5-teal); }
.tpl5 .t5-h .t5-word-pink{ color:var(--t5-pink); }
.tpl5 .t5-h .t5-word-purple{ color:var(--t5-purple); }
.tpl5 .t5-lead{
  font-family:var(--t5-body);
  font-size:1.75rem; line-height:1.85; color:var(--t5-ink-2);
  max-width:64rem; margin:0 auto;
}
.tpl5 .t5-rule{
  width:9rem; height:5px; border:0; border-radius:99px;
  background:var(--t5-coral);
  margin:2rem auto 0;
}

/* ...
   UNIQUE: Crayon buttons ... chunky, with hand-drawn arrows
   and wobble-on-hover. Different from any other template.
   ... */
.tpl5 .t5-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:1rem;
  padding:1.5rem 2.8rem;
  font-family:var(--t5-display);
  font-weight:700; font-size:1.7rem;
  letter-spacing:.01em;
  border-radius:24px 24px 24px 24px / 28px 28px 28px 28px;
  border:3px solid var(--t5-ink);
  cursor:pointer; position:relative; overflow:hidden;
  transition:transform .35s var(--t5-ease), box-shadow .35s var(--t5-ease);
  isolation:isolate;
  text-decoration:none;
}
.tpl5 .t5-btn::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background-image:var(--t5-paper);
  background-size:var(--t5-paper-size);
  opacity:.18; pointer-events:none;
}
.tpl5 .t5-btn i{ font-size:1.4rem; transition:transform .35s var(--t5-ease); }
.tpl5 .t5-btn--big{ font-size:1.95rem; padding:1.8rem 3.4rem; }
.tpl5 .t5-btn--coral{
  background:var(--t5-coral); color:var(--white);
  box-shadow:0 6px 0 var(--t5-coral-d), 0 12px 0 rgba(0,0,0,.06), 0 16px 32px rgba(var(--accent-rgb,217,119,6),.35);
}
.tpl5 .t5-btn--coral:hover{ transform:translate(-2px,-4px) rotate(-2deg); box-shadow:0 10px 0 var(--t5-coral-d), 0 16px 0 rgba(0,0,0,.06), 0 22px 44px rgba(var(--accent-rgb,217,119,6),.45); }
.tpl5 .t5-btn--coral:hover i{ transform:translateX(4px) rotate(-6deg); }
.tpl5 .t5-btn--coral:active{ transform:translate(0,2px) rotate(-1deg); box-shadow:0 3px 0 var(--t5-coral-d), 0 8px 0 rgba(0,0,0,.06); }
.tpl5 .t5-btn--teal{
  background:var(--t5-teal); color:var(--white);
  box-shadow:0 6px 0 var(--primary-dark, #052d1a), 0 12px 0 rgba(0,0,0,.06), 0 16px 32px rgba(var(--primary-rgb,12,84,48),.35);
}
.tpl5 .t5-btn--teal:hover{ transform:translate(-2px,-4px) rotate(2deg); box-shadow:0 10px 0 var(--primary-dark, #052d1a), 0 16px 0 rgba(0,0,0,.06), 0 22px 44px rgba(var(--primary-rgb,12,84,48),.45); }
.tpl5 .t5-btn--sun{
  background:var(--t5-sun); color:var(--t5-ink);
  box-shadow:0 6px 0 var(--t5-gold-d), 0 12px 0 rgba(0,0,0,.06), 0 16px 32px rgba(var(--gold-rgb,201,168,76),.4);
}
.tpl5 .t5-btn--sun:hover{ transform:translate(-2px,-4px) rotate(-1.5deg); box-shadow:0 10px 0 var(--t5-gold-d), 0 16px 0 rgba(0,0,0,.06), 0 22px 44px rgba(var(--gold-rgb,201,168,76),.5); }
.tpl5 .t5-btn--purple{
  background:var(--t5-purple); color:var(--white);
  box-shadow:0 6px 0 rgba(var(--primary-deeper-rgb,4,31,18),.85), 0 12px 0 rgba(0,0,0,.06), 0 16px 32px rgba(var(--primary-deeper-rgb,4,31,18),.4);
}
.tpl5 .t5-btn--purple:hover{ transform:translate(-2px,-4px) rotate(1.5deg); box-shadow:0 10px 0 rgba(var(--primary-deeper-rgb,4,31,18),.85), 0 16px 0 rgba(0,0,0,.06), 0 22px 44px rgba(var(--primary-deeper-rgb,4,31,18),.5); }
.tpl5 .t5-btn--white{
  background:var(--white); color:var(--t5-ink);
  box-shadow:0 6px 0 rgba(0,0,0,.18), 0 12px 0 rgba(0,0,0,.04), 0 16px 32px rgba(0,0,0,.18);
}
.tpl5 .t5-btn--white:hover{ transform:translate(-2px,-4px) rotate(-1deg); box-shadow:0 10px 0 rgba(0,0,0,.18), 0 16px 0 rgba(0,0,0,.04), 0 22px 44px rgba(0,0,0,.22); }
.tpl5 .t5-btn--ghost{
  background:rgba(255,255,255,.1); color:var(--white);
  border-color:rgba(255,255,255,.5);
}
.tpl5 .t5-btn--ghost:hover{ background:rgba(255,255,255,.18); transform:translate(-2px,-4px) rotate(1deg); }

/* ...
   UNIQUE: Top bar ... washi tape ribbon with hand-written feel
   ... */
.tpl5 .t5-topbar{ position:relative; z-index:60; background:var(--primary-deeper); color:var(--white); padding:1.1rem clamp(1.6rem,2.5vw,3rem);
  border-bottom:3px dashed rgba(0,0,0,.18);
  overflow:hidden;
}
.tpl5 .t5-topbar::before{
  content:''; position:absolute; left:0; right:0; top:0; height:.6rem;
  background:var(--t5-sun);
  opacity:.9;
}
.tpl5 .t5-topbar::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:.4rem;
  background:var(--t5-sun);
  opacity:.7;
}
.tpl5 .t5-topbar-in{ display:flex; justify-content:space-between; align-items:center; gap:1.4rem; flex-wrap:wrap; position:relative; z-index:1; }
.tpl5 .t5-topbar-in > div{ display:flex; gap:2rem; align-items:center; flex-wrap:wrap; }
.tpl5 .t5-topbar a{ color:var(--white); text-decoration:none; font-family:var(--t5-display); font-size:1.5rem; font-weight:700; }
.tpl5 .t5-topbar a:hover{ color:var(--t5-sun); }
.tpl5 .t5-topbar .t5-sparkle{ color:var(--t5-sun); margin-right:.5rem; animation:t5spin 5s linear infinite; display:inline-block; }
@keyframes t5spin{ from{transform:rotate(0);} to{transform:rotate(360deg);} }
.tpl5 .t5-topbar .t5-top-cta{
  background:var(--white); color:var(--t5-coral) !important;
  padding:.8rem 2rem; border-radius:99px;
  border:2.5px solid var(--t5-ink);
  font-weight:700;
  box-shadow:0 4px 0 var(--t5-ink); transition:.3s var(--t5-wobble);
  transform:rotate(-2deg);
}
.tpl5 .t5-topbar .t5-top-cta:hover{
  background:var(--t5-sun) !important; color:var(--t5-ink) !important;
  transform:translate(-1px,-3px) rotate(-3deg);
  box-shadow:0 7px 0 var(--t5-ink);
}

/* ...
   UNIQUE: HERO ... magazine cover spread.
   - Hand-drawn crayon title on lined notebook paper
   - Polaroid stack instead of 3D card
   - Sticker burst with comic-book POW!
   - Doodle confetti
   ... */
.tpl5 .t5-hero{ position:relative; padding:7rem clamp(1.6rem,2.5vw,3rem) 12rem clamp(1.6rem,2.5vw,3rem); background:var(--white); overflow:clip;
  isolation:isolate;
}
.tpl5 .t5-hero::before{ display:none !important; }
.tpl5 .t5-hero::after{
  content:''; position:absolute; left:0; right:0; bottom:-1px; height:90px;
  background:var(--t5-cream);
  -webkit-mask: radial-gradient(circle, #000 1px, transparent 1.4px) repeat-x left bottom / 3.6rem 3.6rem;
          mask: radial-gradient(circle, #000 1px, transparent 1.4px) repeat-x left bottom / 3.6rem 3.6rem;
  z-index:3; pointer-events:none;
}
.tpl5 .t5-hero-atmos{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }

.tpl5 .t5-atmos-blob{
  position:absolute; border-radius:50%; filter:blur(70px);
  animation:t5-atmos-drift 16s ease-in-out infinite;
}
.tpl5 .t5-atmos-blob--1{ width:34rem; height:34rem; top:-8rem; right:-6rem; background:var(--t5-coral); opacity:.16; }
.tpl5 .t5-atmos-blob--2{ width:26rem; height:26rem; bottom:-10rem; left:-4rem; background:var(--t5-teal); opacity:.14; animation-delay:-5s; }
.tpl5 .t5-atmos-blob--3{ width:20rem; height:20rem; top:38%; left:56%; background:var(--t5-purple); opacity:.12; animation-delay:-9s; }
@keyframes t5-atmos-drift{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(2.4rem,-1.6rem) scale(1.08); }
}
.tpl5 .t5-atmos-mesh{
  position:absolute; inset:0;
  background-image:none; background-size:2.6rem 2.6rem;
  opacity:.05;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 35%, #000 0%, transparent 75%);
          mask-image:radial-gradient(ellipse 70% 60% at 50% 35%, #000 0%, transparent 75%);
}
.tpl5 .t5-atmos-ring{
  position:absolute; border-radius:50%;
  border:1.5px solid var(--t5-ink);
  opacity:.08;
}
.tpl5 .t5-atmos-ring--1{ width:46rem; height:46rem; top:-14rem; right:-14rem; animation:t5spin 60s linear infinite; }
.tpl5 .t5-atmos-ring--2{ width:24rem; height:24rem; bottom:6%; left:4%; border-style:dashed; opacity:.12; animation:t5spin 40s linear infinite reverse; }
@media(prefers-reduced-motion:reduce){
  .tpl5 .t5-atmos-blob, .tpl5 .t5-atmos-ring{ animation:none; }
}
@media(max-width:640px){
  .tpl5 .t5-atmos-ring--1{ width:30rem; height:30rem; }
}

.tpl5 .t5-hero-grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:4.6rem;
  align-items:start;
  position:relative;
  z-index:2;
  padding-top:2rem;
}
.tpl5 .t5-hero-copy{ position:relative; padding:2rem 0; }

/* Notebook-paper masthead */
.tpl5 .t5-masthead{
  background:var(--white);
  border:3px solid var(--t5-ink);
  border-radius:8px 26px 8px 26px;
  padding:2.4rem 2.4rem 2.8rem;
  margin-bottom:2.4rem;
  box-shadow:8px 8px 0 var(--t5-sun), 8px 8px 0 3px var(--t5-ink);
  transform:rotate(-.6deg);
  position:relative;
}
.tpl5 .t5-masthead::before{
  content:''; position:absolute; left:5.6rem; top:.4rem; bottom:.4rem; width:2px;
  background:rgba(var(--accent-rgb,217,119,6),.5);
}
.tpl5 .t5-masthead-line{
  display:block;
  font-family:var(--t5-display);
  font-size:clamp(4rem,7.6vw,7.8rem);
  font-weight:700; line-height:1.0; letter-spacing:-.02em;
  color:var(--t5-ink); margin-bottom:.4rem;
}
.tpl5 .t5-masthead-line .t5-dot{ color:var(--t5-coral); }
.tpl5 .t5-masthead-motto{
  display:block;
  font-family:var(--t5-display); font-weight:700;
  font-size:clamp(2rem,2.8vw,2.6rem);
  color:var(--t5-coral); margin-bottom:1.4rem;
}
.tpl5 .t5-masthead-motto .t5-word-teal{ color:var(--t5-teal); }
.tpl5 .t5-hero-dek{
  font-family:var(--t5-body);
  font-size:1.65rem; line-height:1.85; color:var(--t5-ink-2);
  margin:0 0 2.2rem;
  max-width:54rem;
}
.tpl5 .t5-hero-byline{
  display:flex; flex-wrap:wrap; gap:1.6rem;
  font-family:var(--t5-display);
  font-size:1.4rem; font-weight:600;
  color:var(--t5-ink-2);
  padding:1.2rem 0; margin-bottom:2rem;
  border-top:2px solid var(--t5-ink);
  border-bottom:2px solid var(--t5-ink);
}
.tpl5 .t5-hero-byline span{ display:inline-flex; align-items:center; gap:.7rem; }
.tpl5 .t5-hero-byline i{ color:var(--t5-coral); }
.tpl5 .t5-hero-cta{ display:flex; flex-wrap:wrap; gap:1.6rem; margin-bottom:2.4rem; }
.tpl5 .t5-hero-trust{ display:flex; flex-wrap:wrap; gap:1.6rem; }
.tpl5 .t5-trust{
  display:inline-flex; align-items:center; gap:.7rem;
  font-family:var(--t5-display); font-size:1.5rem; color:var(--t5-ink); font-weight:700;
}
.tpl5 .t5-trust i{ color:var(--t5-coral); font-size:1.4rem; }

/* Sticker burst ... comic-book style */
.tpl5 .t5-sticker{
  position:absolute; z-index:5;
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.8rem 1.4rem;
  font-family:var(--t5-display); font-weight:700; font-size:1.4rem;
  color:var(--t5-ink);
  background:var(--white);
  border:3px solid var(--t5-ink);
  border-radius:99px;
  box-shadow:0 5px 0 var(--t5-ink);
  animation:t5sticker-wobble 4s ease-in-out infinite;
}
.tpl5 .t5-sticker i{ color:var(--t5-coral); }
.tpl5 .t5-sticker--1{ top:-1.5rem; left:-4rem; transform:rotate(-8deg); }
.tpl5 .t5-sticker--2{ bottom:34%; right:-3rem; transform:rotate(6deg); animation-delay:1.2s; }
.tpl5 .t5-sticker--2 i{ color:var(--t5-teal); }
.tpl5 .t5-sticker--3{ top:42%; left:-3.5rem; transform:rotate(10deg); animation-delay:2s; background:var(--t5-sun); }
.tpl5 .t5-sticker--3 i{ color:var(--t5-coral-d); }
@keyframes t5sticker-wobble{ 0%,100%{transform:rotate(var(--r,-8deg)) translateY(0);}50%{transform:rotate(calc(var(--r,-8deg) * -1.4)) translateY(-6px);} }
.tpl5 .t5-sticker--1{ --r:-8deg; }
.tpl5 .t5-sticker--2{ --r:6deg; }
.tpl5 .t5-sticker--3{ --r:10deg; }

/* Comic burst */
.tpl5 .t5-burst{
  position:absolute; top:-3rem; right:-3rem; z-index:6;
  width:11rem; height:11rem;
  display:flex; align-items:center; justify-content:center; text-align:center;
  background:var(--t5-coral);
  color:var(--white);
  font-family:var(--t5-display); font-weight:700; font-size:1.4rem;
  letter-spacing:.04em; line-height:1.1;
  clip-path:polygon(
    50% 0%, 60% 14%, 76% 6%, 76% 24%, 92% 22%, 84% 38%,
    100% 50%, 84% 62%, 92% 78%, 76% 76%, 76% 94%, 60% 86%,
    50% 100%, 40% 86%, 24% 94%, 24% 76%, 8% 78%, 16% 62%,
    0% 50%, 16% 38%, 8% 22%, 24% 24%, 24% 6%, 40% 14%);
  transform:rotate(14deg);
  box-shadow:0 12px 28px rgba(var(--accent-rgb,217,119,6),.45);
  animation:t5burst-pulse 4s ease-in-out infinite;
}
.tpl5 .t5-burst strong{ display:block; font-size:2.4rem; margin-bottom:.2rem; }
@keyframes t5burst-pulse{ 0%,100%{transform:rotate(14deg) scale(1);}50%{transform:rotate(14deg) scale(1.06);} }

/* ...
   UNIQUE: Polaroid stack (replaces the 3D card)
   ... */
.tpl5 .t5-hero-side{ position:relative; padding:3rem 0 0; }
.tpl5 .t5-pola-wrap{ position:relative; max-width:430px; margin:0 auto; }
.tpl5 .t5-pola{
  position:relative;
  background:var(--white);
  padding:1.4rem 1.4rem 5rem;
  border:1px solid rgba(0,0,0,.08);
  border-radius:4px;
  box-shadow:0 16px 36px rgba(var(--primary-deeper-rgb,4,31,18),.28), 0 4px 10px rgba(0,0,0,.1);
  transition:transform .5s var(--t5-wobble);
}
.tpl5 .t5-pola--back{
  position:absolute; inset:0; z-index:-1;
  background:var(--white);
  transform:rotate(7deg) translate(2rem,-1.4rem);
}
.tpl5 .t5-pola--back2{
  position:absolute; inset:0; z-index:-2;
  background:var(--t5-sun);
  transform:rotate(-9deg) translate(-2rem,1.6rem);
}
.tpl5 .t5-pola-slides{ position:relative; aspect-ratio:1/1; overflow:hidden; border-radius:2px; }
.tpl5 .t5-pola-slide{
  position:absolute; inset:0; opacity:0;
  transition:opacity .9s ease, transform .9s var(--t5-wobble);
  transform:scale(1.06) rotate(-2deg);
}
.tpl5 .t5-pola-slide.is-active{ opacity:1; transform:scale(1) rotate(0); }
.tpl5 .t5-pola-slide img{ width:100%; height:100%; object-fit:cover; }
.tpl5 .t5-pola-cap{
  position:absolute; left:1.4rem; right:1.4rem; bottom:1.4rem;
  font-family:var(--t5-display); font-weight:700; font-size:1.9rem;
  color:var(--t5-ink);
  transform:rotate(-1deg);
  transition:opacity .3s;
}
.tpl5 .t5-pola-cap small{
  display:block; font-size:1.1rem; font-weight:600;
  color:var(--t5-coral); letter-spacing:.14em; text-transform:uppercase;
  margin-bottom:.2rem;
}
.tpl5 .t5-pola-wrap:hover .t5-pola{ transform:rotate(1.5deg); }
.tpl5 .t5-pola-dots{
  position:absolute; bottom:-2.6rem; left:50%; transform:translateX(-50%);
  display:flex; gap:.8rem; z-index:3;
}
.tpl5 .t5-pola-dots button{
  width:1.1rem; height:1.1rem; padding:0; border:2px solid var(--t5-ink); border-radius:50%;
  background:var(--white); cursor:pointer; transition:.3s;
}
.tpl5 .t5-pola-dots button.is-active{ background:var(--t5-coral); transform:scale(1.2); }

/* Washi tape strip on polaroid */
.tpl5 .t5-washi{
  position:absolute; left:-2rem; top:-1rem; z-index:4;
  width:14rem; padding:.5rem 1rem;
  background:var(--t5-coral);
  color:var(--white);
  font-family:var(--t5-display); font-weight:700; font-size:1.2rem; letter-spacing:.12em; text-transform:uppercase;
  text-align:center;
  transform:rotate(-12deg);
  box-shadow:0 4px 12px rgba(var(--accent-rgb,217,119,6),.35);
  -webkit-mask:
    #000 0 0/100% 4px,
    #000 0 100%/100% 4px,
    circle 0 0/8px 4px,
    circle 100% 0/8px 4px;
          mask:
    #000 0 0/100% 4px,
    #000 0 100%/100% 4px,
    circle 0 0/8px 4px,
    circle 100% 0/8px 4px;
  -webkit-mask-composite:xor;
          mask-composite:exclude;
}
.tpl5 .t5-washi--teal{ background:var(--t5-teal); box-shadow:0 4px 12px rgba(var(--primary-rgb,12,84,48),.35); }

/* Floating sticker cards */
.tpl5 .t5-float-card{
  position:absolute; z-index:5;
  display:flex; align-items:center; gap:1.2rem;
  padding:1.4rem 1.8rem;
  background:var(--white);
  border:3px solid var(--t5-ink);
  border-radius:99px;
  box-shadow:0 6px 0 var(--t5-ink), 0 14px 28px rgba(var(--primary-deeper-rgb,4,31,18),.2);
  color:var(--t5-ink);
  animation:t5FloatCard 5s ease-in-out infinite;
}
.tpl5 .t5-float-card i{ font-size:1.8rem; color:var(--t5-coral); }
.tpl5 .t5-float-card strong{ display:block; font-family:var(--t5-display); font-size:2.4rem; font-weight:700; line-height:1; color:var(--t5-ink); }
.tpl5 .t5-float-card span{ font-family:var(--t5-display); font-size:1.05rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--t5-ink-2); }
.tpl5 .t5-float-card--1{ top:-2rem; left:-5rem; animation-delay:0s; }
.tpl5 .t5-float-card--1 i{ color:var(--t5-teal); }
.tpl5 .t5-float-card--2{ bottom:18%; right:-7%; animation-delay:1.4s; }
.tpl5 .t5-float-card--2 i{ color:var(--t5-pink); }
.tpl5 .t5-float-card--3{ bottom:-4rem; left:14%; animation-delay:2.6s; background:var(--t5-sun); }
.tpl5 .t5-float-card--3 i{ color:var(--t5-coral-d); }
@keyframes t5FloatCard{ 0%,100%{transform:translateY(0) rotate(-2deg);}50%{transform:translateY(-10px) rotate(2deg);} }

/* Doodle confetti */
.tpl5 .t5-doodle{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  font-size:3rem;
  display:flex; justify-content:space-between; align-items:flex-start;
  padding:0 1rem;
}
.tpl5 .t5-doodle span{ display:inline-block; }
.tpl5 .t5-doodle span:nth-child(1){ transform:translateY(1rem) rotate(-14deg); animation:t5doodle 6s ease-in-out infinite; }
.tpl5 .t5-doodle span:nth-child(2){ transform:translateY(8rem) rotate(20deg); animation:t5doodle 5s ease-in-out infinite .6s; }
.tpl5 .t5-doodle span:nth-child(3){ transform:translateY(2rem) rotate(8deg); animation:t5doodle 7s ease-in-out infinite 1.2s; }
@keyframes t5doodle{ 0%,100%{transform:translateY(0) rotate(0);}50%{transform:translateY(-12px) rotate(10deg);} }

/* Hand-drawn scroll cue */
.tpl5 .t5-scroll-cue{
  position:absolute; left:50%; bottom:2.4rem; transform:translateX(-50%);
  z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  color:var(--t5-ink); font-family:var(--t5-display);
  font-size:1.3rem; font-weight:700;
  text-decoration:none;
  animation:t5cue 2.4s ease-in-out infinite;
}
.tpl5 .t5-scroll-cue .t5-arrow{
  width:3rem; height:2.4rem;
  background:
    circle 0 0/100% 100%,
    circle 0 0/100% 100%,
    circle 0 0/100% 100%;
}
@keyframes t5cue{ 0%,100%{transform:translate(-50%,0);}50%{transform:translate(-50%,6px);} }

/* ...
   UNIQUE: Marquee ... hand-painted banner
   ... */
.tpl5 .t5-marquee{ background:var(--primary-deeper); color:var(--gold); padding:1.6rem clamp(1.6rem,2.5vw,3rem);
  overflow:hidden; white-space:nowrap;
  position:relative; z-index:4;
  border-top:4px dashed var(--t5-sun);
  border-bottom:4px dashed var(--t5-sun);
  transform:rotate(-1deg);
  margin:0 -2%;
}
.tpl5 .t5-marquee-track{
  display:inline-flex; gap:3rem;
  font-family:var(--t5-display);
  font-weight:700; font-size:1.9rem; letter-spacing:.04em;
  animation:t5m-scroll 26s linear infinite;
  padding-left:3rem;
}
.tpl5 .t5-marquee-track span{ display:inline-flex; align-items:center; gap:1rem; }
.tpl5 .t5-marquee-track .t5-star{ color:var(--t5-coral); transform:rotate(0); animation:t5spin 4s linear infinite; display:inline-block; }
@keyframes t5m-scroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ...
   UNIQUE: Bento Features ... Redesigned.
   Modern, clean & professional layout built on template 1's
   primary / navy / amber / gold palette (no cream).
   ... */
.tpl5 .t5-features{ padding:9rem clamp(1.6rem,2.5vw,3rem) 8rem clamp(1.6rem,2.5vw,3rem); position:relative; overflow:hidden; background:var(--primary-mist);
}
.tpl5 .t5-features-bg{
  position:absolute; inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:0;
}
.tpl5 .t5-features-doodle{
  position:absolute;
  font-size:3rem;
  opacity:.16;
  animation:t5doodle-spin 24s linear infinite;
}
.tpl5 .t5-features-doodle--1{ top:8%;  left:6%;  animation-delay:0s;   color:var(--accent); }
.tpl5 .t5-features-doodle--2{ top:18%; right:8%; font-size:2.4rem; opacity:.12; animation-delay:-4s;  color:var(--primary); }
.tpl5 .t5-features-doodle--3{ top:48%; left:2%;  font-size:2.8rem; opacity:.10; animation-delay:-9s;  color:var(--gold); }
.tpl5 .t5-features-doodle--4{ bottom:24%; right:6%; font-size:3.4rem; opacity:.14; animation-delay:-13s; color:var(--brand-navy); }
.tpl5 .t5-features-doodle--5{ bottom:8%;  left:14%; font-size:2.2rem; opacity:.10; animation-delay:-17s; color:var(--primary); }
@keyframes t5doodle-spin{ from{transform:rotate(0) translateY(0);}50%{transform:rotate(180deg) translateY(-12px);}to{transform:rotate(360deg);} }

.tpl5 .t5-features .t5-container{ position:relative; z-index:1; }
.tpl5 .t5-features-head{
  text-align:center;
  max-width:760px;
  margin:0 auto 4.5rem;
  position:relative;
}
.tpl5 .t5-features-head .t5-kicker{
  background:var(--primary);
  color:var(--white);
  box-shadow:0 6px 0 var(--primary-dark), 0 12px 28px rgba(var(--primary-rgb,12,84,48),.28);
}
.tpl5 .t5-features-head .t5-kicker::before{
  background:var(--gold);
}
.tpl5 .t5-features-head .t5-h{
  font-family:var(--font-heading);
  font-size:clamp(3rem,5vw,4.8rem);
  font-weight:800;
  line-height:1.1;
  letter-spacing:-.02em;
  color:var(--primary);
  margin:0 0 1.4rem;
}
.tpl5 .t5-features-head .t5-h em{
  font-style:normal;
  display:inline-block;
  color:var(--primary-dark);
  position:relative;
  padding:0 .15em;
}
.tpl5 .t5-features-head .t5-h em::after{
  content:'';
  position:absolute;
  left:0; right:0; bottom:.08em;
  height:.32em;
  background:var(--amber-soft);
  border-radius:8px;
  z-index:-1;
  transform:skewX(-3deg);
}
.tpl5 .t5-features-head .t5-lead{
  font-family:var(--font-body);
  font-size:1.65rem;
  line-height:1.8;
  color:var(--text-secondary);
  max-width:60rem;
  margin:0 auto 1.8rem;
}

/* ... Stats ribbon (4-col clean cards, brand green) ... */
.tpl5 .t5-features-stats{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1rem;
  margin:2.8rem auto 3.2rem;
  max-width:880px;
  padding:1.4rem 1.6rem;
  background:var(--white);
  border:1px solid var(--green-200);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-md);
  transform:rotate(-.3deg);
}
.tpl5 .t5-features-stat{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.4rem;
  padding:.4rem;
  text-align:center;
}
.tpl5 .t5-features-stat i{
  display:inline-flex; align-items:center; justify-content:center;
  width:3.4rem; height:3.4rem;
  background:var(--primary-mist);
  color:var(--primary);
  border-radius:50%;
  font-size:1.35rem;
  transition:transform .35s var(--t5-wobble), background .25s, color .25s;
}
.tpl5 .t5-features-stat:hover i{ transform:rotate(8deg) scale(1.1); background:var(--primary); color:var(--white); }
.tpl5 .t5-features-stat strong{
  display:block;
  font-family:var(--font-heading);
  font-size:2rem; font-weight:800;
  color:var(--primary);
  line-height:1.1;
  margin-top:.2rem;
}
.tpl5 .t5-features-stat span{
  font-size:1.25rem; font-weight:500;
  color:var(--text-secondary);
  line-height:1.3;
}

/* ... Category filter pills (clean, brand-driven) ... */
.tpl5 .t5-features-filters{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem;
  margin:0 auto 3.8rem;
  max-width:760px;
}
.tpl5 .t5-filter{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.7rem 1.4rem;
  font-family:var(--font-heading);
  font-size:1.35rem; font-weight:600;
  letter-spacing:.01em;
  color:var(--text-secondary);
  background:var(--white);
  border:1.5px solid var(--border);
  border-radius:var(--r-full);
  cursor:pointer;
  transition:all var(--t-base);
}
.tpl5 .t5-filter i{ color:var(--primary); font-size:1.15rem; transition:color var(--t-base); }
.tpl5 .t5-filter:hover{
  color:var(--primary);
  border-color:var(--primary);
  background:var(--primary-mist);
  transform:translateY(-1px);
}
.tpl5 .t5-filter.is-active{
  color:var(--white);
  background:var(--primary);
  border-color:var(--primary);
  box-shadow:0 6px 16px rgba(var(--primary-rgb,12,84,48),.25);
}
.tpl5 .t5-filter.is-active i{ color:var(--white); }

/* ... Bento sub-element decorations (tape, sticker, chat, medals) ... */

/* Washi tape */
.tpl5 .t5-bento-tape{
  position:absolute; top:-.6rem; left:-1rem; z-index:3;
  width:9rem; height:2rem;
  background:rgba(var(--accent-rgb,217,119,6),.35);
  -webkit-mask:
    #000 0 0/100% 6px,
    #000 0 100%/100% 6px,
    circle 0 0/12px 6px,
    circle 100% 0/12px 6px;
          mask:
    #000 0 0/100% 6px,
    #000 0 100%/100% 6px,
    circle 0 0/12px 6px,
    circle 100% 0/12px 6px;
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  transform:rotate(-6deg);
  opacity:.85;
}
.tpl5 .t5-bento-tape--alt{
  top:auto; bottom:-.6rem; left:auto; right:-1rem;
  transform:rotate(5deg);
  background:rgba(var(--gold-rgb,201,168,76),.45);
  opacity:.85;
}

/* Sticker badge (corner accent) */
.tpl5 .t5-bento-sticker{
  position:absolute; top:1rem; left:1rem; z-index:4;
  display:inline-flex; align-items:center; justify-content:center;
  width:3rem; height:3rem;
  background:var(--t5-coral);
  color:var(--white);
  border-radius:50%;
  font-size:1.2rem;
  box-shadow:0 4px 10px rgba(0,0,0,.18);
  transform:rotate(-8deg);
  transition:transform .4s var(--t5-wobble);
}
.tpl5 .t5-bento-sticker--alt{
  background:var(--gold);
  color:var(--primary-dark);
  transform:rotate(8deg);
}
.tpl5 .t5-bento-item:hover .t5-bento-sticker{ transform:rotate(0) scale(1.05); }
.tpl5 .t5-bento-item:hover .t5-bento-sticker{ background:var(--white); color:var(--t5-coral); }

/* Chat preview (messaging card) */
.tpl5 .t5-bento-chat{
  display:flex; flex-direction:column; gap:.6rem;
  margin:0 0 1.4rem;
  padding:1rem 1.1rem;
  background:rgba(var(--primary-rgb),.08);
  border:1px solid rgba(var(--primary-rgb),.14);
  border-radius:var(--r-md);
  transition:all .4s;
}
.tpl5 .t5-bento-chat-bubble{
  font-size:1.25rem;
  padding:.6rem 1rem;
  border-radius:12px 12px 12px 4px;
  max-width:85%; line-height:1.4;
  background:var(--white);
  color:var(--text);
  align-self:flex-start;
  transition:all .4s;
}
.tpl5 .t5-bento-chat-bubble--out{
  align-self:flex-end;
  border-radius:12px 12px 4px 12px;
  background:var(--t5-purple);
  color:var(--white);
}
.tpl5 .t5-bento-item:hover .t5-bento-chat{ background:rgba(255,255,255,.15); border-color:rgba(255,255,255,.3); }
.tpl5 .t5-bento-item:hover .t5-bento-chat-bubble{ background:rgba(255,255,255,.18); color:var(--white); }
.tpl5 .t5-bento-item:hover .t5-bento-chat-bubble--out{ background:var(--white); color:var(--t5-purple); }

/* Medals row (badges card) */
.tpl5 .t5-bento-medals{
  display:flex; gap:.7rem; margin:1rem 0 1.4rem;
  flex-wrap:wrap;
}
.tpl5 .t5-bento-medals span{
  display:inline-flex; align-items:center; justify-content:center;
  width:2.9rem; height:2.9rem;
  background:var(--t5-gold-p);
  border:1.5px solid rgba(var(--gold-rgb,201,168,76),.32);
  border-radius:50%;
  color:var(--t5-gold-d);
  font-size:1.15rem;
  transition:all .4s;
}
.tpl5 .t5-bento-medals span:nth-child(1){ background:rgba(255,140,66,.12); color:var(--t5-coral); border-color:rgba(255,140,66,.22); }
.tpl5 .t5-bento-medals span:nth-child(2){ background:rgba(var(--primary-rgb),.10); color:var(--t5-teal); border-color:rgba(var(--primary-rgb),.18); }
.tpl5 .t5-bento-medals span:nth-child(3){ background:rgba(155,93,229,.12); color:var(--t5-purple); border-color:rgba(155,93,229,.22); }
.tpl5 .t5-bento-medals span:nth-child(4){ background:var(--t5-gold-p); color:var(--t5-gold-d); border-color:rgba(var(--gold-rgb,201,168,76),.32); }
.tpl5 .t5-bento-item:hover .t5-bento-medals span{
  background:rgba(255,255,255,.18);
  color:var(--white);
  border-color:rgba(255,255,255,.4);
}

/* ...
   UNIQUE: Programs ... notebook page with tabbed sticky notes
   ... */
.tpl5 .t5-programs{ padding:10rem clamp(1.6rem,2.5vw,3rem) 8rem clamp(1.6rem,2.5vw,3rem); background:var(--t5-cream-3); position:relative; overflow:hidden; }
.tpl5 .t5-programs::before{ display:none !important; }
.tpl5 .t5-programs-head{ text-align:center; max-width:64rem; margin:0 auto 5rem; position:relative; padding:3rem 0 0; }
.tpl5 .t5-program-tabs{
  display:grid; grid-template-columns:repeat(3,1fr); gap:2.2rem;
}
.tpl5 .t5-program{
  position:relative;
  padding:3.2rem 2.4rem 2.6rem;
  background:var(--white);
  border:2.5px solid var(--t5-ink);
  border-radius:4px 4px 4px 4px;
  box-shadow:6px 6px 0 var(--t5-ink);
  transition:transform .4s var(--t5-wobble), box-shadow .4s var(--t5-wobble);
  transform:rotate(-.8deg);
}
.tpl5 .t5-program:nth-child(2){ transform:rotate(.6deg); border-color:var(--t5-ink); }
.tpl5 .t5-program:nth-child(3){ transform:rotate(-1deg); }
.tpl5 .t5-program:hover{ transform:rotate(0) translate(-3px,-5px); box-shadow:10px 10px 0 var(--t5-ink); }
.tpl5 .t5-program::before{
  content:'NOTE'; position:absolute; top:-1.4rem; left:1.6rem;
  font-family:var(--t5-display); font-size:1.1rem; font-weight:700; letter-spacing:.18em;
  color:var(--t5-ink-2);
  padding:.3rem 1rem;
  background:var(--t5-sun);
  border:2px solid var(--t5-ink);
  border-radius:99px;
  transform:rotate(-2deg);
}
.tpl5 .t5-program--teal::before{ content:'ART'; background:var(--t5-teal); color:var(--white); }
.tpl5 .t5-program--teal .t5-program-meta{ color:var(--t5-teal); }
.tpl5 .t5-program--teal .t5-program-meta i{ color:var(--t5-coral); }
.tpl5 .t5-program--purple::before{ content:'STEM'; background:var(--t5-purple); color:var(--white); }
.tpl5 .t5-program--purple .t5-program-meta{ color:var(--t5-purple); }
.tpl5 .t5-program--purple .t5-program-meta i{ color:var(--t5-coral); }
.tpl5 .t5-program-emoji{
  font-size:5rem; display:block; margin-bottom:1.4rem;
  transition:transform .4s var(--t5-ease);
}
.tpl5 .t5-program:hover .t5-program-emoji{ transform:rotate(-10deg) scale(1.1); }
.tpl5 .t5-program-title{
  font-family:var(--t5-display); font-weight:700; font-size:2.6rem;
  color:var(--t5-ink); margin:0 0 1rem; line-height:1.1;
}
.tpl5 .t5-program-desc{ font-family:var(--t5-body); font-size:1.5rem; color:var(--t5-ink-2); line-height:1.75; margin:0 0 1.6rem; }
.tpl5 .t5-program-meta{
  display:flex; flex-wrap:wrap; gap:.8rem 1.4rem;
  font-family:var(--t5-display); font-weight:700; font-size:1.2rem;
  color:var(--t5-coral);
}
.tpl5 .t5-program-meta i{ color:var(--t5-teal); margin-right:.4rem; }

/* ═══════════════ CLASSES — horizontal journey path (no gradients) ═══════════════ */
.tpl5 .t5-levels{ padding:9rem clamp(1.6rem,2.5vw,3rem) 8rem clamp(1.6rem,2.5vw,3rem); background:var(--white); }
.tpl5 .t5-levels::before{ display:none !important; }
.tpl5 .t5-levels-head{ text-align:center; max-width:760px; margin:0 auto 5rem; position:relative; }
.tpl5 .t5-levels-head .t5-kicker{
  background:var(--primary);
  color:var(--white);
  box-shadow:0 6px 0 var(--primary-dark), 0 12px 28px rgba(var(--primary-rgb,12,84,48),.28);
}
.tpl5 .t5-levels-head .t5-kicker::before{ background:var(--gold); }
.tpl5 .t5-levels-head .t5-h{
  font-family:var(--font-heading);
  font-size:clamp(3rem,5vw,4.8rem);
  font-weight:800;
  line-height:1.1;
  letter-spacing:-.02em;
  color:var(--primary);
  margin:0 0 1.4rem;
}
.tpl5 .t5-levels-head .t5-h em{
  font-style:normal;
  display:inline-block;
  color:var(--primary-dark);
  position:relative;
  padding:0 .15em;
}
.tpl5 .t5-levels-head .t5-h em::after{
  content:''; position:absolute; left:0; right:0; bottom:.05em;
  height:.12em; background:var(--gold); opacity:.35; border-radius:99px;
  transform:skewX(-2deg);
}
.tpl5 .t5-levels-head p{ font-family:var(--t5-body); font-size:1.5rem; color:var(--t5-ink-2); margin-top:1rem; line-height:1.7; }

.tpl5 .t5-journey{ position:relative; display:flex; align-items:flex-start; gap:0; }
.tpl5 .t5-journey-item{
  flex:1; position:relative; text-align:center; padding:0 1.6rem;
}
.tpl5 .t5-journey-item::after{
  content:''; position:absolute; top:3.6rem; left:calc(50% + 4.4rem); right:calc(-50% + 4.4rem);
  height:2px; background:var(--t5-line);
}
.tpl5 .t5-journey-item:last-child::after{ display:none; }

.tpl5 .t5-journey-node{
  width:7.2rem; height:7.2rem; margin:0 auto 1.6rem;
  border-radius:50%;
  background:var(--white); border:2px solid var(--jc,var(--t5-coral));
  display:flex; align-items:center; justify-content:center;
  font-size:2.6rem; color:var(--jc,var(--t5-coral));
  position:relative; z-index:1;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1), background .3s, color .3s;
}
.tpl5 .t5-journey-item:hover .t5-journey-node{ transform:scale(1.08); background:var(--jc,var(--t5-coral)); color:var(--white); }

.tpl5 .t5-journey-item--1{ --jc:var(--t5-pink); }
.tpl5 .t5-journey-item--2{ --jc:var(--t5-teal); }
.tpl5 .t5-journey-item--3{ --jc:var(--t5-blue); }

.tpl5 .t5-journey-age{
  display:inline-block; font-family:var(--t5-display); font-weight:700; font-size:1.05rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--jc,var(--t5-coral));
  background:var(--t5-cream-3); padding:.4rem 1.1rem; border-radius:999px; margin-bottom:1rem;
}
.tpl5 .t5-journey-item h4{
  font-family:var(--t5-display); font-weight:700; font-size:2rem; color:var(--t5-ink); margin:0 0 .8rem;
}
.tpl5 .t5-journey-item p{
  font-family:var(--t5-body); font-size:1.35rem; color:var(--t5-ink-2); line-height:1.6; margin:0 0 1.4rem;
}
.tpl5 .t5-journey-link{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--t5-display); font-weight:700; font-size:1.2rem; color:var(--jc,var(--t5-coral));
  border-bottom:2px solid var(--jc,var(--t5-coral)); padding-bottom:.2rem;
}

@media(max-width:900px){
  .tpl5 .t5-journey{ flex-direction:column; gap:2.4rem; }
  .tpl5 .t5-journey-item{ display:flex; align-items:flex-start; gap:1.6rem; text-align:left; padding:0; }
  .tpl5 .t5-journey-item::after{ display:none; }
  .tpl5 .t5-journey-node{ flex-shrink:0; width:6rem; height:6rem; font-size:2.2rem; margin:0; }
  .tpl5 .t5-journey-item:last-child{ padding-bottom:0; }
}

/* ═══════════════ STATS — clean horizontal bar (no gradients) ═══════════════ */
.tpl5 .t5-stats{ padding:9rem clamp(1.6rem,2.5vw,3rem) 8rem clamp(1.6rem,2.5vw,3rem); position:relative; overflow:hidden; background:var(--white); }
.tpl5 .t5-stats::before{ display:none !important; }
.tpl5 .t5-stats-head{ text-align:center; max-width:760px; margin:0 auto 5rem; position:relative; }
.tpl5 .t5-stats-head .t5-kicker{
  background:var(--primary);
  color:var(--white);
  box-shadow:0 6px 0 var(--primary-dark), 0 12px 28px rgba(var(--primary-rgb,12,84,48),.28);
}
.tpl5 .t5-stats-head .t5-kicker::before{ background:var(--gold); }
.tpl5 .t5-stats-head .t5-h{
  font-family:var(--font-heading);
  font-size:clamp(3rem,5vw,4.8rem);
  font-weight:800;
  line-height:1.1;
  letter-spacing:-.02em;
  color:var(--primary);
  margin:0 0 1.4rem;
}
.tpl5 .t5-stats-head .t5-h em{
  font-style:normal;
  display:inline-block;
  color:var(--primary-dark);
  position:relative;
  padding:0 .15em;
}
.tpl5 .t5-stats-head .t5-h em::after{
  content:''; position:absolute; left:0; right:0; bottom:.05em;
  height:.12em; background:var(--gold); opacity:.35; border-radius:99px;
  transform:skewX(-2deg);
}

.tpl5 .t5-stat-bar{
  display:flex; background:var(--white); border:1px solid var(--t5-line); border-radius:20px;
  overflow:hidden;
}
.tpl5 .t5-stat{
  flex:1; text-align:center; padding:3rem 1.6rem;
  border-left:1px solid var(--t5-line);
  transition:background .25s;
}
.tpl5 .t5-stat:first-child{ border-left:none; }
.tpl5 .t5-stat:hover{ background:var(--t5-cream-3); }
.tpl5 .t5-stat-hex{
  width:5.2rem; height:5.2rem; margin:0 auto 1.2rem; border-radius:50%;
  background:var(--sc,var(--t5-coral)); color:var(--white);
  display:flex; align-items:center; justify-content:center; font-size:1.9rem;
}
.tpl5 .t5-stat--1 .t5-stat-hex{ --sc:var(--t5-coral); }
.tpl5 .t5-stat--2 .t5-stat-hex{ --sc:var(--t5-teal); }
.tpl5 .t5-stat--3 .t5-stat-hex{ --sc:var(--t5-purple); }
.tpl5 .t5-stat--4 .t5-stat-hex{ --sc:var(--t5-blue); }
.tpl5 .t5-stat-num{ display:block; font-family:var(--t5-display); font-weight:700; font-size:3.2rem; color:var(--t5-ink); line-height:1; }
.tpl5 .t5-stat-num em{ font-style:normal; color:var(--sc,var(--t5-coral)); }
.tpl5 .t5-stat-label{ display:block; margin-top:.6rem; font-family:var(--t5-body); font-weight:600; font-size:1.2rem; color:var(--t5-ink-2); }

@media(max-width:768px){
  .tpl5 .t5-stat-bar{ flex-wrap:wrap; }
  .tpl5 .t5-stat{ flex:0 0 50%; border-left:none; border-top:1px solid var(--t5-line); padding:2.2rem 1.2rem; }
  .tpl5 .t5-stat:nth-child(2){ border-left:1px solid var(--t5-line); }
  .tpl5 .t5-stat:nth-child(1),.tpl5 .t5-stat:nth-child(2){ border-top:none; }
  .tpl5 .t5-stat:nth-child(4){ border-left:1px solid var(--t5-line); }
  .tpl5 .t5-stat-num{ font-size:2.6rem; }
}

/* ...
   UNIQUE: Editorial ... torn-page split
   ... */
.tpl5 .t5-editorial{ padding:10rem clamp(1.6rem,2.5vw,3rem); position:relative; overflow:hidden; background:var(--t5-cream-3); }
.tpl5 .t5-editorial::before{ display:none !important; }
.tpl5 .t5-editorial-grid{
  display:grid; grid-template-columns:1.05fr 1fr; gap:5rem; align-items:start;
  padding-top:2rem;
}
.tpl5 .t5-vision-card{
  position:relative;
  padding:3rem 2.8rem;
  background:var(--white);
  border:2.5px dashed var(--t5-ink);
  border-radius:6px 32px 6px 32px;
  box-shadow:6px 6px 0 var(--t5-ink);
  transform:rotate(-.5deg);
}
.tpl5 .t5-vision-text{
  font-family:var(--t5-body);
  font-size:1.75rem; line-height:1.95; color:var(--t5-ink);
}
.tpl5 .t5-vision-text::first-letter{
  font-family:var(--t5-display);
  font-size:6rem; font-weight:700; line-height:.85;
  float:left; margin:.1em .2em 0 0;
  color:var(--t5-coral);
  transform:rotate(-6deg);
}
.tpl5 .t5-mission{
  background:var(--t5-sun);
  border:2.5px solid var(--t5-ink);
  border-radius:32px 6px 32px 6px;
  padding:3rem 2.8rem;
  box-shadow:6px 6px 0 var(--t5-ink);
  transform:rotate(.5deg);
  position:relative;
}
.tpl5 .t5-mission-title{
  font-family:var(--t5-display); font-size:2.4rem; font-weight:700; color:var(--t5-ink);
  margin-bottom:2rem; display:flex; align-items:center; gap:1rem;
}
.tpl5 .t5-mission-title::before{
  content:''; width:1.4rem; height:1.4rem;
  background:var(--t5-coral); border:2px solid var(--t5-ink);
  border-radius:50%;
  transform:rotate(45deg);
}
.tpl5 .t5-mission-list{ list-style:none; margin:0; padding:0; counter-reset:t5m; }
.tpl5 .t5-mission-list li{
  counter-increment:t5m;
  position:relative;
  padding:1.4rem 0 1.4rem 5.6rem;
  border-bottom:2px dashed var(--t5-ink);
  font-family:var(--t5-body);
  font-size:1.45rem; line-height:1.7; color:var(--t5-ink);
  transition:padding-left .35s var(--t5-wobble);
}
.tpl5 .t5-mission-list li:last-child{ border-bottom:none; }
.tpl5 .t5-mission-list li::before{
  content:counter(t5m);
  position:absolute; left:0; top:1.4rem;
  width:4rem; height:4rem;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--t5-display); font-weight:700; font-size:1.8rem;
  color:var(--white);
  background:var(--t5-coral);
  border:2.5px solid var(--t5-ink);
  border-radius:50%;
  box-shadow:3px 3px 0 var(--t5-ink);
  transition:transform .35s var(--t5-wobble);
}
.tpl5 .t5-mission-list li:hover{ padding-left:6.6rem; }
.tpl5 .t5-mission-list li:hover::before{ transform:rotate(-12deg) scale(1.1); }

/* ...
   UNIQUE: Values ... blackboard with chalk handwriting
   ... */
.tpl5 .t5-values{ padding:10rem clamp(1.6rem,2.5vw,3rem); background:var(--primary-deeper); color:var(--white); position:relative; overflow:hidden;
}
.tpl5 .t5-values::before{ display:none !important; }
.tpl5 .t5-values::after{
  content:''; position:absolute; top:0; left:0; right:0; height:1rem;
  background:var(--t5-coral);
  border-bottom:4px solid var(--t5-sun);
}
.tpl5 .t5-values-head{ text-align:center; margin-bottom:6rem; position:relative; z-index:1; }
.tpl5 .t5-values-head .t5-h{ color:var(--white); }
.tpl5 .t5-values-head .t5-lead{ color:rgba(255,255,255,.85); }
.tpl5 .t5-values-head .t5-kicker{ background:var(--t5-coral); color:var(--white); box-shadow:0 6px 0 rgba(0,0,0,.4); }
.tpl5 .t5-values-head .t5-kicker::before{ background:var(--t5-pink); }
.tpl5 .t5-values-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2.2rem; position:relative; z-index:1; }
.tpl5 .t5-value{
  position:relative;
  padding:3rem 2.6rem;
  background:rgba(255,255,255,.04);
  border:3px dashed rgba(255,255,255,.3);
  border-radius:12px 26px 12px 26px;
  transform:rotate(-.5deg);
  transition:transform .4s var(--t5-wobble), background .4s, border-color .3s;
}
.tpl5 .t5-value:nth-child(2n){ transform:rotate(.6deg); border-radius:26px 12px 26px 12px; }
.tpl5 .t5-value:hover{ transform:rotate(0) translate(-3px,-5px); background:rgba(255,255,255,.08); border-color:var(--t5-sun); }
.tpl5 .t5-value-num{
  font-family:var(--t5-display); font-size:4.6rem; font-weight:700; line-height:1;
  color:rgba(255,255,255,.18); position:absolute; top:1.2rem; right:1.6rem;
}
.tpl5 .t5-value-icon{
  width:5.6rem; height:5.6rem;
  display:flex; align-items:center; justify-content:center;
  background:var(--white); color:var(--primary-deeper); border:3px solid var(--white);
  border-radius:50%;
  font-size:2.2rem;
  margin-bottom:1.6rem;
  box-shadow:4px 4px 0 var(--t5-ink);
  transition:transform .45s var(--t5-ease);
}
.tpl5 .t5-value:hover .t5-value-icon{ transform:rotate(-12deg) scale(1.1); }
.tpl5 .t5-value h3{ font-family:var(--t5-display); font-weight:700; font-size:2.4rem; color:var(--t5-sun); margin:0 0 .8rem; }
.tpl5 .t5-value p{ font-family:var(--t5-body); font-size:1.4rem; color:rgba(255,255,255,.85); line-height:1.75; margin:0; }

/* ...
   UNIQUE: Gallery ... photo booth strip
   ... */
.tpl5 .t5-gallery{ padding:10rem clamp(1.6rem,2.5vw,3rem) 8rem clamp(1.6rem,2.5vw,3rem); background:var(--white); position:relative; overflow:hidden; }
.tpl5 .t5-gallery-head{ text-align:center; margin-bottom:5rem; }
.tpl5 .t5-mosaic{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  grid-auto-rows:11rem;
  gap:1.4rem;
}
.tpl5 .t5-mosaic-item{
  position:relative;
  background:var(--white);
  padding:.8rem .8rem 3.4rem;
  border:2px solid var(--t5-ink);
  border-radius:2px;
  box-shadow:4px 4px 0 var(--t5-ink);
  overflow:hidden;
  transition:transform .4s var(--t5-wobble), box-shadow .4s var(--t5-wobble);
  cursor:pointer;
}
.tpl5 .t5-mosaic-item:nth-child(3n){ transform:rotate(-1deg); }
.tpl5 .t5-mosaic-item:nth-child(5n){ transform:rotate(1deg); }
.tpl5 .t5-mosaic-item:hover{ transform:rotate(0) translate(-3px,-5px); box-shadow:8px 8px 0 var(--t5-ink); }
.tpl5 .t5-mosaic-item img{
  width:100%; height:100%; object-fit:cover;
  border-radius:1px;
  transition:transform .9s var(--t5-wobble);
}
.tpl5 .t5-mosaic-item:hover img{ transform:scale(1.08); }
.tpl5 .t5-mosaic-item .t5-mosaic-cap{
  position:absolute; left:.8rem; right:.8rem; bottom:.8rem; z-index:2;
  background:var(--white);
  color:var(--t5-ink);
  font-family:var(--t5-display); font-weight:700; font-size:1.3rem;
  padding:.3rem .8rem;
  text-align:center;
  transform:rotate(-1deg);
}
.tpl5 .t5-mosaic-item .t5-mosaic-tag{
  position:absolute; top:-1rem; left:1rem; z-index:3;
  padding:.4rem .9rem;
  background:var(--t5-coral);
  color:var(--white);
  border:2px solid var(--t5-ink);
  border-radius:99px;
  font-family:var(--t5-display); font-weight:700; font-size:1.1rem;
  letter-spacing:.1em; text-transform:uppercase;
  box-shadow:2px 2px 0 var(--t5-ink);
  transform:rotate(-4deg);
}
.tpl5 .t5-mosaic-item--big{ grid-column:span 5; grid-row:span 2; }
.tpl5 .t5-mosaic-item--wide{ grid-column:span 7; }
.tpl5 .t5-mosaic-item--half{ grid-column:span 6; }
.tpl5 .t5-mosaic-item--third{ grid-column:span 4; }

/* ...
   UNIQUE: Founder's note ... handwritten letter card
   ... */
.tpl5 .t5-founder{ padding:11rem clamp(1.6rem,2.5vw,3rem); position:relative; overflow:hidden; background:var(--t5-cream-3); }
.tpl5 .t5-founder::before{ display:none !important; }
.tpl5 .t5-letter{
  position:relative;
  background:var(--white);
  border:2.5px solid var(--t5-ink);
  border-radius:6px;
  padding:4rem 3.6rem;
  max-width:84rem; margin:0 auto;
  box-shadow:8px 8px 0 var(--t5-sun), 8px 8px 0 3px var(--t5-ink);
  transform:rotate(-.8deg);
}
.tpl5 .t5-letter::before{
  content:''; position:absolute; left:4.4rem; top:1rem; bottom:1rem; width:2px;
  background:rgba(var(--accent-rgb,217,119,6),.45);
}
.tpl5 .t5-founder-quote{
  font-family:var(--t5-display); font-weight:700; font-style:normal;
  font-size:clamp(2rem,3.4vw,3rem); line-height:1.4;
  color:var(--t5-ink); text-align:left;
  margin:0 0 3rem;
}
.tpl5 .t5-founder-quote .t5-quote-mark{ color:var(--t5-coral); font-size:1.2em; }
.tpl5 .t5-founder-author{ display:flex; align-items:center; gap:1.6rem; }
.tpl5 .t5-founder-avatar{
  width:6rem; height:6rem;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--t5-display); font-size:2.6rem; font-weight:700;
  color:var(--t5-ink);
  background:var(--t5-sun);
  border:3px solid var(--t5-ink);
  border-radius:50%;
  box-shadow:4px 4px 0 var(--t5-ink);
  transform:rotate(-6deg);
}
.tpl5 .t5-founder-meta{ text-align:left; }
.tpl5 .t5-founder-meta strong{ display:block; font-family:var(--t5-display); font-size:2rem; font-weight:700; color:var(--t5-ink); }
.tpl5 .t5-founder-meta span{ font-family:var(--t5-display); font-size:1.2rem; font-weight:600; letter-spacing:.04em; color:var(--t5-coral); }
.tpl5 .t5-founder-stars{ color:var(--t5-coral); font-size:1.4rem; margin-top:.4rem; letter-spacing:.2em; }

/* ...
   UNIQUE: CTA ... hand-drawn envelope with a letter
   ... */
.tpl5 .t5-cta{ padding:10rem clamp(1.6rem,2.5vw,3rem); background:var(--primary-deeper); border-top:4px solid var(--accent); position:relative; overflow:hidden; }
.tpl5 .t5-cta-card{ position:relative; max-width:1080px; margin:0 auto; padding:6rem 4rem; text-align:center; background:var(--white); color:var(--primary-deeper); border:3px solid var(--white); border-radius:16px; box-shadow:0 16px 40px rgba(0,0,0,.22); overflow:hidden; transform:rotate(-.6deg); }
.tpl5 .t5-cta-card::before{ content:''; position:absolute; inset:1.2rem; z-index:0; border:1.5px dashed var(--border); border-radius:12px; pointer-events:none; }
.tpl5 .t5-cta-card h3{ font-family:var(--t5-display); font-weight:700; font-size:clamp(3rem,5vw,4.8rem); line-height:1.1; color:var(--primary-deeper); margin:1.6rem 0 1.8rem; position:relative; z-index:1; }
.tpl5 .t5-cta-card h3 em{ color:var(--accent); }
.tpl5 .t5-cta-card p{ font-family:var(--t5-body); font-size:1.65rem; color:var(--text-secondary); max-width:58rem; margin:0 auto 2.6rem; line-height:1.8; position:relative; z-index:1; }
.tpl5 .t5-cta-actions{ display:flex; justify-content:center; gap:1.4rem; flex-wrap:wrap; position:relative; z-index:1; }
.tpl5 .t5-cta-meta{ display:flex; justify-content:center; gap:2.4rem; flex-wrap:wrap; margin-top:2.6rem; position:relative; z-index:1; font-family:var(--t5-display); font-weight:700; font-size:1.25rem; letter-spacing:.04em; color:var(--primary-deeper); }
.tpl5 .t5-cta-meta i{ color:var(--accent); margin-right:.6rem; }
.tpl5 .t5-cta .t5-btn--white{
  background:var(--white) !important;
  color:var(--primary-deeper) !important;
  border:1.5px solid var(--primary-deeper) !important;
  box-shadow:0 6px 0 var(--primary-deeper), 0 12px 28px rgba(0,0,0,.12) !important;
}
.tpl5 .t5-cta .t5-btn--white:hover{
  background:var(--primary-deeper) !important;
  color:var(--white) !important;
}
.tpl5 .t5-cta .t5-btn--coral{
  background:var(--accent) !important;
  color:var(--white) !important;
  box-shadow:0 6px 0 var(--accent-dark), 0 12px 28px rgba(var(--accent-rgb),.25) !important;
}

/* ...
   SVG filter & reduced motion
   ... */
@media (prefers-reduced-motion: reduce){
  .tpl5 .t5-reveal{ opacity:1 !important; transform:none !important; }
  .tpl5 .t5-cover, .tpl5 .t5-cover-stamp, .tpl5 .t5-float-card,
  .tpl5 .t5-atmos-blob, .tpl5 .t5-atmos-ring, .tpl5 .t5-emoji-confetti span, .tpl5 .t5-doodle span,
  .tpl5 .t5-topbar::before, .tpl5 .t5-topbar::after, .tpl5 .t5-marquee-track,
  .tpl5 .t5-burst, .tpl5 .t5-scroll-cue, .tpl5 .t5-sticker{ animation:none !important; }
  .tpl5 .t5-bars span{ animation:none !important; transform:scaleY(1); }
}

/* ...
   Responsive ... keep the playful personality on every screen
   ... */
@media (max-width:1100px){
  .tpl5 .t5-values-grid{ grid-template-columns:repeat(2,1fr); }
  .tpl5 .t5-program-tabs{ grid-template-columns:1fr; }
  .tpl5 .t5-mosaic{ grid-template-columns:repeat(6,1fr); }
  .tpl5 .t5-mosaic-item--big{ grid-column:span 6; grid-row:auto; }
  .tpl5 .t5-mosaic-item--wide{ grid-column:span 6; }
  .tpl5 .t5-mosaic-item--half{ grid-column:span 6; }
  .tpl5 .t5-mosaic-item--third{ grid-column:span 6; }
  .tpl5 .t5-marquee{ transform:rotate(0); margin:0; }
}
@media (max-width:900px){
  .tpl5 .t5-hero-grid{ gap:3rem; }
  .tpl5 .t5-hero-side{ order:2; }
  .tpl5 .t5-editorial-grid{ grid-template-columns:1fr; gap:3rem; }
  .tpl5 .t5-values-grid{ grid-template-columns:1fr; }
  .tpl5 .t5-cta-card{ padding:5rem 2.4rem; }
  .tpl5 .t5-topbar-in{ flex-direction:column; }
  .tpl5 .t5-sticker--1{ left:-1rem; top:.5rem; }
  .tpl5 .t5-sticker--2{ right:0; }
  .tpl5 .t5-sticker--3{ left:0; }
  .tpl5 .t5-burst{ width:9rem; height:9rem; top:-2rem; right:-1rem; font-size:1.2rem; }
  .tpl5 .t5-burst strong{ font-size:2rem; }
  .tpl5 .t5-mosaic{ grid-template-columns:repeat(3,1fr); }
  .tpl5 .t5-mosaic-item--big{ grid-column:span 3; }
  .tpl5 .t5-mosaic-item--wide{ grid-column:span 3; }
  .tpl5 .t5-mosaic-item--half{ grid-column:span 3; }
  .tpl5 .t5-mosaic-item--third{ grid-column:span 3; }
  .tpl5 .t5-vision-card, .tpl5 .t5-mission{ transform:rotate(0); }
  .tpl5 .t5-float-card--1{ left:-2rem; }
  .tpl5 .t5-float-card--2{ right:-2rem; }
  .tpl5 .t5-float-card--3{ display:none; }
  .tpl5 .t5-hero-cta{ flex-wrap:nowrap !important; gap:1.2rem !important; }
  .tpl5 .t5-hero-cta .t5-btn{ flex:1 1 0; min-width:0; padding:1.3rem 1.6rem !important; font-size:1.3rem !important; white-space:nowrap; justify-content:center; }
  .tpl5 .t5-hero-cta .t5-btn i{ font-size:1.2rem; }
}
@media (max-width:640px){
  .tpl5 .t5-cta-meta{ flex-direction:column; gap:1rem; }
  .tpl5 .t5-doodle{ display:none; }
  .tpl5 .t5-scroll-cue{ display:none; }
  .tpl5 .t5-hero-cta{ flex-wrap:nowrap !important; gap:1rem !important; width:100%; }
  .tpl5 .t5-hero-cta .t5-btn{ flex:1 1 0; min-width:0; padding:1.2rem 1rem !important; font-size:1.15rem !important; white-space:nowrap; justify-content:center; box-shadow:0 6px 0 var(--btn-shadow, var(--t5-coral-d)), 0 10px 20px rgba(0,0,0,.12); }
  .tpl5 .t5-hero-cta .t5-btn i{ font-size:1.1rem; }
  .tpl5 .t5-hero-cta .t5-btn--big{ padding:1.2rem 1rem !important; font-size:1.15rem !important; }
  .tpl5 .t5-mosaic{ grid-template-columns:repeat(2,1fr); grid-auto-rows:9rem; }
  .tpl5 .t5-mosaic-item--big{ grid-column:span 2; }
  .tpl5 .t5-mosaic-item--wide{ grid-column:span 2; }
  .tpl5 .t5-mosaic-item--half{ grid-column:span 2; }
  .tpl5 .t5-mosaic-item--third{ grid-column:span 2; }
  .tpl5 .t5-sticker{ display:none; }
  .tpl5 .t5-burst{ display:none; }
  .tpl5 .t5-washi{ font-size:1rem; padding:.4rem .8rem; }
}
.tpl5 {
  --t5-sun:       var(--play-sun, #ffd93d);
  --t5-sun-2:     var(--play-sun-2, #ffe066);
  --t5-coral:     var(--play-coral, #ff8c42);
  --t5-coral-2:   var(--play-coral-2, #ffae72);
  --t5-coral-d:   var(--play-coral-d, #e97020);
  --t5-pink:      var(--play-pink, #ff6b9d);
  --t5-pink-2:    var(--play-pink-2, #ff9bbf);
  --t5-teal:      var(--play-teal, #2ec4b6);
  --t5-teal-2:    var(--play-teal-2, #5fd6cb);
  --t5-blue:      var(--play-blue, #4f8cf7);
  --t5-purple:    var(--play-purple, #9b5de5);
  --t5-purple-2:  var(--play-purple-2, #c39bff);
  --t5-cream: var(--primary-mist);
  --t5-cream-2: var(--white);
  --t5-cream-3: var(--gray-50);
  --t5-ink: var(--primary-dark);
  --t5-ink-2: var(--text-secondary);
  --t5-navy:      var(--brand-navy, #0a2540);
  --t5-navy-deep: var(--primary-deeper, #041f12);
  --t5-gold:      var(--gold, #c9a84c);
  --t5-gold-b:    var(--gold-bright, #ffd98a);
  --t5-gold-s:    var(--gold-soft, #f0d999);
  --t5-gold-p:    var(--gold-pale, #f7ecd2);
  --t5-gold-d:    var(--gold-dim, #a8842f);
  --t5-line:      rgba(var(--primary-rgb, 12,84,48), .14);
  --t5-line-soft: rgba(var(--primary-rgb, 12,84,48), .08);
  --t5-white-line: rgba(255,255,255,.16);
  --t5-ease:      cubic-bezier(.34,1.56,.64,1);
  --t5-smooth:    cubic-bezier(.2,.8,.2,1);
  --t5-display:   'Fredoka', 'Nunito', 'Poppins', 'Open Sans', system-ui, sans-serif;
  --t5-body:      'Nunito', 'Open Sans', system-ui, -apple-system, sans-serif;
  font-family:var(--t5-body);
  background:var(--t5-cream);
  color:var(--t5-ink);
  line-height:1.7;
  overflow-x:hidden;
  perspective:1800px;
}
.tpl5 *{ box-sizing:border-box; }
.tpl5 img{ max-width:100%; display:block; }
.tpl5 a{ color:inherit; text-decoration:none; }
.tpl5 button{ font-family:inherit; }
.tpl5 .t5-container{ max-width:1240px; margin:0 auto; padding:0 clamp(1rem,1.8vw,1.6rem); }
.tpl5 .t5-narrow{ max-width:880px; margin:0 auto; padding:0 clamp(1rem,1.8vw,1.6rem); }

/* ... Scroll reveal (3D bouncy) ... */
.tpl5 .t5-reveal{
  opacity:0; transform:translateY(44px) rotateX(6deg) scale(.97);
  transform-origin:center bottom;
  transition: opacity .85s var(--t5-smooth), transform .85s var(--t5-smooth);
}
.tpl5 .t5-reveal.is-in{ opacity:1; transform:none; }
.tpl5 .t5-reveal--3d-l{ transform:translateX(-60px) rotateY(7deg); transform-origin:left center; }
.tpl5 .t5-reveal--3d-r{ transform:translateX(60px) rotateY(-7deg); transform-origin:right center; }
.tpl5 .t5-reveal--3d-l.is-in, .tpl5 .t5-reveal--3d-r.is-in{ transform:none; }
.tpl5 .t5-reveal--pop{ transform:scale(.9); }
.tpl5 .t5-reveal--pop.is-in{ transform:none; }
.tpl5 .t5-reveal[data-d="1"]{ transition-delay:.08s; }
.tpl5 .t5-reveal[data-d="2"]{ transition-delay:.18s; }
.tpl5 .t5-reveal[data-d="3"]{ transition-delay:.28s; }
.tpl5 .t5-reveal[data-d="4"]{ transition-delay:.38s; }
.tpl5 .t5-reveal[data-d="5"]{ transition-delay:.48s; }
.tpl5 .t5-reveal[data-d="6"]{ transition-delay:.58s; }

/* ... Typography primitives ... */
.tpl5 .t5-issuebar{
  display:inline-flex; align-items:center; gap:1.2rem; flex-wrap:wrap;
  font-family:var(--t5-display);
  font-size:1.15rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--t5-ink-2);
  padding:0 0 1.5rem; margin-bottom:2rem;
  border-bottom:2px dashed var(--t5-line);
}
.tpl5 .t5-issuebar-brand{ color:var(--t5-gold-d); }
.tpl5 .t5-issuebar-dot{ width:.6rem; height:.6rem; border-radius:50%; background:var(--t5-coral); box-shadow:0 0 0 4px rgba(var(--accent-rgb,217,119,6),.18); }

.tpl5 .t5-eyebrow{
  display:inline-flex; align-items:center; gap:.9rem;
  padding:.7rem 1.7rem;
  background:rgba(255,255,255,.8);
  border:1.5px solid var(--t5-line);
  border-radius:999px;
  font-family:var(--t5-display);
  font-size:1.15rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--t5-ink);
  margin-bottom:2rem;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  box-shadow:0 8px 24px rgba(var(--primary-deeper-rgb,4,31,18),.08);
}
.tpl5 .t5-eyebrow i{ color:var(--t5-coral); }
.tpl5 .t5-eyebrow--center{ justify-content:center; }
.tpl5 .t5-eyebrow--dark{
  background:rgba(var(--primary-deeper-rgb,4,31,18),.85);
  color:var(--white); border-color:transparent;
}
.tpl5 .t5-eyebrow--dark i{ color:var(--t5-sun); }

.tpl5 .t5-h{
  font-family:var(--t5-display);
  font-size:clamp(2.8rem,4.6vw,4.4rem);
  font-weight:700; line-height:1.08; letter-spacing:-.01em;
  color:var(--t5-ink); margin:0 0 1.6rem;
}
.tpl5 .t5-h em, .tpl5 .t5-h .accent{
  font-style:normal;
  display:inline-block;
  background:var(--t5-sun-2);
  padding:0 .12em;
}
.tpl5 .t5-h .t5-word-coral{ color:var(--t5-coral); }
.tpl5 .t5-h .t5-word-teal{ color:var(--t5-teal); }
.tpl5 .t5-h .t5-word-pink{ color:var(--t5-pink); }
.tpl5 .t5-h .t5-word-purple{ color:var(--t5-purple); }
.tpl5 .t5-lead{
  font-size:1.6rem; line-height:1.85; color:var(--t5-ink-2);
  max-width:66rem; margin:0 auto;
}
.tpl5 .t5-kicker{
  display:inline-flex; align-items:center; gap:1rem;
  font-family:var(--t5-display);
  font-size:1.1rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase;
  color:var(--t5-coral);
}
.tpl5 .t5-kicker::before{ content:''; width:3.4rem; height:3px; border-radius:99px; background:var(--t5-coral); }
.tpl5 .t5-kicker--center{ justify-content:center; }
.tpl5 .t5-kicker--center::before{ background:var(--t5-coral); }
.tpl5 .t5-kicker--center::after{ content:''; width:3.4rem; height:3px; border-radius:99px; background:var(--t5-coral); }
.tpl5 .t5-kicker--light{ color:var(--t5-gold-b); }
.tpl5 .t5-kicker--light::before{ background:var(--t5-gold-b); }
.tpl5 .t5-kicker--light::after{ background:var(--t5-gold-b); }
.tpl5 .t5-rule{
  width:7rem; height:4px; border:0; border-radius:99px;
  background:var(--t5-coral);
  margin:2rem auto 0;
}

/* ... Buttons ... */
.tpl5 .t5-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:1rem;
  padding:1.4rem 2.8rem;
  font-family:var(--t5-display);
  font-weight:600; font-size:1.45rem;
  letter-spacing:.02em;
  border-radius:999px;
  border:0; cursor:pointer; position:relative; overflow:hidden;
  transition:transform .4s var(--t5-ease), box-shadow .4s var(--t5-ease), background .3s, color .3s, border-color .3s;
  isolation:isolate;
}
.tpl5 .t5-btn i{ font-size:1.35rem; transition:transform .35s var(--t5-ease); }
.tpl5 .t5-btn--big{ font-size:1.6rem; padding:1.6rem 3.2rem; }
.tpl5 .t5-btn--coral{
  background:var(--t5-coral-2);
  color:var(--white);
  box-shadow:0 10px 0 var(--t5-coral-d), 0 18px 40px rgba(var(--accent-rgb,217,119,6),.4);
}
.tpl5 .t5-btn--coral::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:var(--t5-sun);
  opacity:0; transition:opacity .35s;
}
.tpl5 .t5-btn--coral:hover{ transform:translateY(-5px) rotate(-1.5deg); box-shadow:0 16px 0 var(--t5-coral-d), 0 26px 54px rgba(var(--accent-rgb,217,119,6),.5); }
.tpl5 .t5-btn--coral:hover::after{ opacity:1; }
.tpl5 .t5-btn--coral:hover i{ transform:translateX(5px); }
.tpl5 .t5-btn--white{
  background:var(--white); color:var(--t5-ink);
  box-shadow:0 8px 0 rgba(0,0,0,.1), 0 18px 40px rgba(var(--primary-deeper-rgb,4,31,18),.14);
  border:1.5px solid var(--t5-line);
}
.tpl5 .t5-btn--white:hover{ transform:translateY(-5px) rotate(1.5deg); box-shadow:0 14px 0 rgba(0,0,0,.1), 0 26px 54px rgba(var(--primary-deeper-rgb,4,31,18),.2); }
.tpl5 .t5-btn--white:hover i{ transform:translateX(5px); }
.tpl5 .t5-btn--teal{
  background:var(--t5-teal-2);
  color:var(--white); box-shadow:0 10px 0 var(--primary-dark, #052d1a), 0 18px 40px rgba(var(--primary-rgb,12,84,48),.4);
}
.tpl5 .t5-btn--teal:hover{ transform:translateY(-5px); box-shadow:0 16px 0 var(--primary-dark, #052d1a), 0 26px 54px rgba(var(--primary-rgb,12,84,48),.5); }
.tpl5 .t5-btn--purple{
  background:var(--t5-purple-2);
  color:var(--white); box-shadow:0 10px 0 rgba(var(--primary-deeper-rgb,4,31,18),.6), 0 18px 40px rgba(var(--primary-deeper-rgb,4,31,18),.45);
}
.tpl5 .t5-btn--purple:hover{ transform:translateY(-5px) rotate(-1.2deg); box-shadow:0 16px 0 rgba(var(--primary-deeper-rgb,4,31,18),.6), 0 26px 54px rgba(var(--primary-deeper-rgb,4,31,18),.55); }
.tpl5 .t5-btn--ghost{
  background:rgba(255,255,255,.08);
  color:var(--white); border:1.5px solid var(--t5-white-line);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.tpl5 .t5-btn--ghost:hover{ border-color:var(--t5-gold); color:var(--t5-gold-b); transform:translateY(-5px); }
.tpl5 .t5-btn--ghost:hover i{ transform:translateX(5px); }

/* ...
   TOP BAR ... rainbow ribbon, glassmorphic, sparkles
   ... */
.tpl5 .t5-topbar{
  background:rgba(var(--primary-deeper-rgb,4,31,18),.92);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  color:var(--white); padding:1.1rem 0; position:relative; z-index:60;
}
.tpl5 .t5-topbar::before{
  content:''; position:absolute; left:0; right:0; bottom:0; height:4px;
  background:var(--t5-sun);
  animation:t5RibbonShift 14s linear infinite;
  background-size:200% 100%;
}
@keyframes t5RibbonShift{ from{background-position:0 0;} to{background-position:200% 0;} }
.tpl5 .t5-topbar-in{ display:flex; justify-content:space-between; align-items:center; gap:1.4rem; flex-wrap:wrap; }
.tpl5 .t5-topbar-in > div{ display:flex; gap:2rem; align-items:center; flex-wrap:wrap; }
.tpl5 .t5-topbar a{ color:var(--white); text-decoration:none; font-family:var(--t5-display); font-size:1.3rem; font-weight:600; }
.tpl5 .t5-topbar a:hover{ color:var(--t5-sun); }
.tpl5 .t5-topbar .t5-sparkle{ color:var(--t5-sun); margin-right:.5rem; animation:t5spin 4s linear infinite; display:inline-block; }
@keyframes t5spin{ from{transform:rotate(0);} to{transform:rotate(360deg);} }
.tpl5 .t5-topbar .t5-top-cta{
  background:var(--t5-coral-2);
  color:var(--white) !important; padding:.8rem 2rem; border-radius:999px;
  box-shadow:0 4px 0 var(--t5-coral-d); transition:.3s;
}
.tpl5 .t5-topbar .t5-top-cta:hover{
  background:var(--t5-sun) !important; color:var(--t5-ink) !important;
  transform:translateY(-2px); box-shadow:0 6px 0 var(--t5-gold-d);
}

/* ...
   HERO ... playful magazine masthead with 4th deco,
   parallax dot-mesh, scroll-cue, sticker badges
   ... */
.tpl5 .t5-hero{ position:relative; padding:7rem clamp(1.6rem,2.5vw,3rem) 12rem clamp(1.6rem,2.5vw,3rem); background:var(--white); overflow:clip;
  isolation:isolate;
}
.tpl5 .t5-hero::before{ display:none !important; }
.tpl5 .t5-hero::after{
  content:''; position:absolute; left:0; right:0; bottom:-1px; height:60px;
  background:var(--bg);
  clip-path:polygon(0 100%, 100% 100%, 100% 30%, 0 100%);
  z-index:2; pointer-events:none;
}
@keyframes t5twinkle{ from{opacity:.5;} to{opacity:.95;} }
.tpl5 .t5-hero-atmos{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }

.tpl5 .t5-atmos-blob{
  position:absolute; border-radius:50%; filter:blur(70px);
  animation:t5-atmos-drift 16s ease-in-out infinite;
}
.tpl5 .t5-atmos-blob--1{ width:34rem; height:34rem; top:-8rem; right:-6rem; background:var(--t5-coral); opacity:.16; }
.tpl5 .t5-atmos-blob--2{ width:26rem; height:26rem; bottom:-10rem; left:-4rem; background:var(--t5-teal); opacity:.14; animation-delay:-5s; }
.tpl5 .t5-atmos-blob--3{ width:20rem; height:20rem; top:38%; left:56%; background:var(--t5-purple); opacity:.12; animation-delay:-9s; }
@keyframes t5-atmos-drift{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(2.4rem,-1.6rem) scale(1.08); }
}

/* fine dot mesh, faded toward edges — flat single-color dots, not a directional gradient */
.tpl5 .t5-atmos-mesh{
  position:absolute; inset:0;
  background-image:none; background-size:2.6rem 2.6rem;
  opacity:.05;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 35%, #000 0%, transparent 75%);
          mask-image:radial-gradient(ellipse 70% 60% at 50% 35%, #000 0%, transparent 75%);
}

/* thin decorative rings for depth */
.tpl5 .t5-atmos-ring{
  position:absolute; border-radius:50%;
  border:1.5px solid var(--t5-ink);
  opacity:.08;
}
.tpl5 .t5-atmos-ring--1{ width:46rem; height:46rem; top:-14rem; right:-14rem; animation:t5spin 60s linear infinite; }
.tpl5 .t5-atmos-ring--2{ width:24rem; height:24rem; bottom:6%; left:4%; border-style:dashed; opacity:.12; animation:t5spin 40s linear infinite reverse; }

@media(prefers-reduced-motion:reduce){
  .tpl5 .t5-atmos-blob, .tpl5 .t5-atmos-ring{ animation:none; }
}
@media(max-width:640px){
  .tpl5 .t5-atmos-ring--1{ width:30rem; height:30rem; }
}

/* ─── Playful 3D paper-stack layer (flat colors, no gradients) ─── */
.tpl5 .t5-hero-3d{ position:absolute; inset:0; z-index:1; pointer-events:none; perspective:1400px; }
.tpl5 .t5-3d-shape{
  position:absolute; display:block;
  transform-style:preserve-3d;
  animation:t5-3d-float 7s ease-in-out infinite;
}
.tpl5 .t5-3d-shape--sq{
  top:10%; left:6%; width:5.4rem; height:5.4rem; border-radius:14px;
  background:var(--t5-sun);
  transform:rotate(18deg) rotateX(28deg) rotateY(-12deg);
  box-shadow:
    -.6rem .6rem 0 var(--t5-coral),
    -1.2rem 1.2rem 0 rgba(0,0,0,.10);
}
.tpl5 .t5-3d-shape--tri{
  top:66%; left:9%; width:0; height:0;
  border-left:2.8rem solid transparent;
  border-right:2.8rem solid transparent;
  border-bottom:4.6rem solid var(--t5-teal);
  transform:rotate(-14deg) rotateX(20deg);
  filter:drop-shadow(-.5rem .6rem 0 rgba(0,0,0,.10));
  animation-delay:1.2s;
}
.tpl5 .t5-3d-shape--circ{
  top:22%; right:10%; width:6.2rem; height:6.2rem; border-radius:50%;
  background:var(--t5-purple);
  transform:rotateX(30deg) rotateY(20deg);
  box-shadow:
    .6rem .7rem 0 var(--t5-pink),
    1.2rem 1.4rem 0 rgba(0,0,0,.10);
  animation-delay:2.1s;
}
.tpl5 .t5-3d-shape--sq2{
  bottom:14%; right:14%; width:4.4rem; height:4.4rem; border-radius:10px;
  background:var(--t5-blue);
  transform:rotate(-20deg) rotateX(-24deg);
  box-shadow:-.5rem .5rem 0 rgba(0,0,0,.10);
  animation-delay:.6s;
}
.tpl5 .t5-3d-shape--ring{
  top:44%; left:44%; width:5rem; height:5rem; border-radius:50%;
  border:.9rem solid var(--t5-gold);
  background:transparent;
  transform:rotateX(35deg);
  box-shadow:.4rem .5rem 0 rgba(0,0,0,.08);
  animation-delay:1.8s;
}
@keyframes t5-3d-float{
  0%,100%{ transform-origin:center; translate:0 0; }
  50%{ translate:0 -1.2rem; }
}
@media(prefers-reduced-motion:reduce){ .tpl5 .t5-3d-shape{ animation:none; } }
@media(max-width:900px){
  .tpl5 .t5-hero-3d{ display:block !important; opacity:1 !important; visibility:visible !important; }
  .tpl5 .t5-hero-atmos{ display:block !important; opacity:1 !important; visibility:visible !important; }
  .tpl5 .t5-atmos-blob{ opacity:.22 !important; filter:blur(50px) !important; }
  .tpl5 .t5-atmos-mesh{ opacity:.08 !important; }
  .tpl5 .t5-atmos-ring{ opacity:.14 !important; }
  .tpl5 .t5-3d-shape--sq{ width:3.6rem; height:3.6rem; top:6%; left:4%; opacity:1 !important; }
  .tpl5 .t5-3d-shape--tri{ border-left-width:1.8rem; border-right-width:1.8rem; border-bottom-width:3rem; top:58%; left:4%; opacity:1 !important; }
  .tpl5 .t5-3d-shape--circ{ width:4rem; height:4rem; top:18%; right:4%; opacity:1 !important; }
  .tpl5 .t5-3d-shape--sq2{ width:3rem; height:3rem; bottom:8%; right:6%; opacity:1 !important; }
  .tpl5 .t5-3d-shape--ring{ width:3.2rem; height:3.2rem; border-width:.6rem; top:42%; left:42%; opacity:1 !important; }
}
@media(max-width:640px){
  .tpl5 .t5-hero-3d{ opacity:1 !important; }
  .tpl5 .t5-hero-atmos{ opacity:1 !important; }
  .tpl5 .t5-3d-shape--sq{ width:2.8rem; height:2.8rem; }
  .tpl5 .t5-3d-shape--circ{ width:3.2rem; height:3.2rem; }
}

.tpl5 .t5-hero-grid{
  display:grid;
  grid-template-columns:1.1fr .92fr;
  gap:5rem;
  align-items:center;
  position:relative;
  z-index:2;
}
@media(max-width:900px){
  .tpl5 .t5-hero{ overflow:clip; }
  .tpl5 .t5-hero-grid{ grid-template-columns:1fr; gap:3rem; position:relative; z-index:3; }
  .tpl5 .t5-hero-side{ order:2; position:relative; z-index:3; min-height:1px; }
  .tpl5 .t5-pola-wrap{ position:relative; z-index:3; max-width:360px; margin:1rem auto 5rem; }
  .tpl5 .t5-pola{ min-height:26rem; }
  .tpl5 .t5-pola-slides{ position:relative; width:100%; aspect-ratio:1/1; min-height:24rem; overflow:hidden; }
  .tpl5 .t5-pola-slide{ position:absolute; inset:0; }
  .tpl5 .t5-pola-slide img{ display:block; width:100%; height:100%; object-fit:cover; }
}
@media(max-width:480px){
  .tpl5 .t5-pola{ min-height:22rem; }
  .tpl5 .t5-pola-slides{ min-height:20rem; }
}
.tpl5 .t5-masthead-line{
  display:block;
  font-family:var(--t5-display);
  font-size:clamp(3.6rem,6.8vw,6.8rem);
  font-weight:700; line-height:1.02; letter-spacing:-.015em;
  color:var(--t5-ink); margin-bottom:1rem;
}
.tpl5 .t5-masthead-line .t5-dot{ color:var(--t5-coral); }
.tpl5 .t5-masthead-motto{
  display:block;
  font-family:var(--t5-display); font-weight:600;
  font-size:clamp(1.8rem,2.6vw,2.4rem);
  color:var(--t5-teal); margin-bottom:2.2rem;
}
.tpl5 .t5-hero-dek{
  font-size:1.65rem; line-height:1.85; color:var(--t5-ink-2);
  max-width:56rem; margin:0 0 2.4rem;
}
.tpl5 .t5-hero-byline{
  display:flex; flex-wrap:wrap; gap:2rem;
  font-family:var(--t5-display);
  font-size:1.15rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--t5-ink-2);
  padding:1.5rem 0; margin-bottom:2.4rem;
  border-top:2px dashed var(--t5-line);
  border-bottom:2px dashed var(--t5-line);
}
.tpl5 .t5-hero-byline span{ display:inline-flex; align-items:center; gap:.7rem; }
.tpl5 .t5-hero-byline i{ color:var(--t5-coral); }
.tpl5 .t5-hero-cta{ display:flex; flex-wrap:wrap; gap:1.6rem; margin-bottom:2.6rem; }
.tpl5 .t5-hero-trust{ display:flex; flex-wrap:wrap; gap:2rem; }
.tpl5 .t5-trust{ display:inline-flex; align-items:center; gap:.8rem; font-family:var(--t5-display); font-size:1.3rem; color:var(--t5-ink-2); font-weight:600; }
.tpl5 .t5-trust i{ color:var(--t5-teal); font-size:1.5rem; }

/* Sticker badges on hero copy (new) */
.tpl5 .t5-sticker{
  position:absolute; z-index:5;
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.5rem 1.1rem;
  font-family:var(--t5-display); font-weight:700; font-size:1rem;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--t5-ink);
  background:var(--white);
  border:1.5px solid var(--t5-line);
  border-radius:999px;
  box-shadow:0 10px 24px rgba(var(--primary-deeper-rgb,4,31,18),.18);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  animation:t5StickerFloat 5s ease-in-out infinite;
}
.tpl5 .t5-sticker i{ color:var(--t5-coral); }
.tpl5 .t5-sticker--1{ top:1.5rem; left:-3rem; transform:rotate(-6deg); }
.tpl5 .t5-sticker--2{ bottom:6rem; right:-2.4rem; transform:rotate(5deg); animation-delay:1.4s; }
.tpl5 .t5-sticker--2 i{ color:var(--t5-teal); }
@keyframes t5StickerFloat{ 0%,100%{transform:translateY(0) rotate(var(--r,-6deg));}50%{transform:translateY(-10px) rotate(calc(var(--r,-6deg) * -1));} }
.tpl5 .t5-sticker--1{ --r:-6deg; }
.tpl5 .t5-sticker--2{ --r:5deg; }

/* Hero right ... floating 3D cover */
.tpl5 .t5-hero-side{ position:relative; }
.tpl5 .t5-cover-wrap{ position:relative; max-width:410px; margin:0 auto; perspective:1600px; }
.tpl5 .t5-cover{
  position:relative;
  aspect-ratio:4/5;
  border-radius:26px;
  background:var(--white);
  box-shadow:0 40px 90px rgba(var(--primary-deeper-rgb,4,31,18),.35), 0 12px 32px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.85);
  transform:rotateY(-9deg) rotateX(5deg) translateZ(10px);
  transform-style:preserve-3d;
  overflow:hidden;
  transition:transform .5s var(--t5-smooth);
  animation:t5CoverFloat 7s ease-in-out infinite;
}
@keyframes t5CoverFloat{ 0%,100%{transform:rotateY(-9deg) rotateX(5deg) translateZ(10px) translateY(0)}50%{transform:rotateY(-9deg) rotateX(5deg) translateZ(10px) translateY(-14px)} }
.tpl5 .t5-cover-wrap:hover .t5-cover{ transform:rotateY(-4deg) rotateX(2deg) translateZ(20px) translateY(-4px); }
.tpl5 .t5-cover-slides{ position:absolute; inset:0; }
.tpl5 .t5-slide{ position:absolute; inset:0; opacity:0; transition:opacity 1s ease, transform 1s var(--t5-smooth); transform:scale(1.06); }
.tpl5 .t5-slide.is-active{ opacity:1; transform:scale(1); }
.tpl5 .t5-slide img{ width:100%; height:100%; object-fit:cover; }
.tpl5 .t5-cover-rule{ position:absolute; left:0; right:0; bottom:8.2rem; height:2px; background:rgba(0,0,0,.12); }
.tpl5 .t5-cover-foot{
  position:absolute; left:0; right:0; bottom:0;
  padding:1.5rem 2.2rem 1.7rem;
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border-top:1px solid rgba(255,255,255,.75);
}
.tpl5 .t5-cover-logo{
  width:3.4rem; height:3.4rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--t5-coral);
  color:var(--white); font-size:1.5rem;
  box-shadow:0 8px 20px rgba(var(--accent-rgb,217,119,6),.45);
  margin-bottom:.7rem;
}
.tpl5 .t5-cover-title{
  font-family:var(--t5-display); font-weight:700;
  font-size:2rem; letter-spacing:.02em; color:var(--t5-ink); line-height:1.1;
}
.tpl5 .t5-cover-tag{
  font-family:var(--t5-display); font-weight:600;
  font-size:1.05rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--t5-gold-d); margin-top:.3rem; transition:opacity .3s;
}
.tpl5 .t5-cover-stamp{
  position:absolute; top:-1.6rem; right:-1.4rem; z-index:4;
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.8rem 1.3rem;
  background:var(--t5-coral);
  color:var(--white);
  font-family:var(--t5-display); font-weight:600; font-size:1.05rem; letter-spacing:.1em; text-transform:uppercase;
  border-radius:999px;
  box-shadow:0 12px 28px rgba(var(--accent-rgb,217,119,6),.5);
  transform:rotate(6deg);
  animation:t5Stamp 6s ease-in-out infinite;
}
@keyframes t5Stamp{ 0%,100%{transform:rotate(6deg) translateY(0)}50%{transform:rotate(6deg) translateY(-6px)} }

.tpl5 .t5-float-card{
  position:absolute; z-index:5;
  display:flex; align-items:center; gap:1.2rem;
  padding:1.3rem 1.7rem;
  background:rgba(255,255,255,.88);
  border:1.5px solid rgba(255,255,255,.7);
  border-radius:18px;
  box-shadow:0 24px 50px rgba(var(--primary-deeper-rgb,4,31,18),.28);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  color:var(--t5-ink);
  animation:t5FloatCard 6s ease-in-out infinite;
}
.tpl5 .t5-float-card i{ font-size:2.1rem; color:var(--t5-gold-d); }
.tpl5 .t5-float-card strong{ display:block; font-family:var(--t5-display); font-size:2.3rem; font-weight:700; line-height:1; color:var(--t5-ink); }
.tpl5 .t5-float-card span{ font-family:var(--t5-display); font-size:1rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--t5-ink-2); }
.tpl5 .t5-float-card--1{ top:6%; left:-6%; animation-delay:0s; }
.tpl5 .t5-float-card--1 i{ color:var(--t5-teal); }
.tpl5 .t5-float-card--2{ bottom:30%; right:-7%; animation-delay:1.6s; }
.tpl5 .t5-float-card--2 i{ color:var(--t5-pink); }
.tpl5 .t5-float-card--3{ bottom:-3rem; left:18%; animation-delay:2.8s; }
.tpl5 .t5-float-card--3 i{ color:var(--t5-coral); }
@keyframes t5FloatCard{ 0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-12px) rotate(2deg)} }

.tpl5 .t5-cover-dots{
  position:absolute; bottom:8.2rem; right:2rem; z-index:6;
  display:flex; gap:.6rem;
}
.tpl5 .t5-cover-dots button{
  width:.8rem; height:.8rem; padding:0; border:0; border-radius:50%;
  background:rgba(0,0,0,.22); cursor:pointer; transition:all .3s var(--t5-smooth);
}
.tpl5 .t5-cover-dots button.is-active{ background:var(--t5-coral); transform:scale(1.35); }

.tpl5 .t5-emoji-confetti{
  position:absolute; inset:0; z-index:3;
  pointer-events:none; font-size:2.6rem;
  display:flex; justify-content:space-between; align-items:center;
}
.tpl5 .t5-emoji-confetti span:nth-child(1){ transform:translateY(-24px) rotate(-15deg); animation:t5bob 4s ease-in-out infinite; }
.tpl5 .t5-emoji-confetti span:nth-child(2){ transform:translateY(24px) rotate(15deg); animation:t5bob 4s ease-in-out infinite; animation-delay:.6s; }
.tpl5 .t5-emoji-confetti span:nth-child(3){ transform:translateY(-32px) rotate(8deg); animation:t5bob 4s ease-in-out infinite; animation-delay:1.2s; }
@keyframes t5bob{ 0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(4deg)} }

/* Scroll cue (new) */
.tpl5 .t5-scroll-cue{
  position:absolute; left:50%; bottom:2.4rem; transform:translateX(-50%);
  z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  color:var(--t5-ink-2); font-family:var(--t5-display);
  font-size:1rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  text-decoration:none;
  animation:t5ScrollCue 2.4s ease-in-out infinite;
}
.tpl5 .t5-scroll-cue .t5-mouse{
  width:1.8rem; height:2.8rem; border:2px solid var(--t5-ink-2);
  border-radius:99px; position:relative;
}
.tpl5 .t5-scroll-cue .t5-mouse::after{
  content:''; position:absolute; left:50%; top:.4rem;
  width:.4rem; height:.6rem; border-radius:99px; background:var(--t5-ink-2);
  transform:translateX(-50%);
  animation:t5MouseWheel 1.6s ease-in-out infinite;
}
@keyframes t5MouseWheel{ 0%{transform:translate(-50%,0);opacity:1;}100%{transform:translate(-50%,.8rem);opacity:0;} }
@keyframes t5ScrollCue{ 0%,100%{transform:translate(-50%,0);}50%{transform:translate(-50%,6px);} }

/* ...
   MARQUEE ... playful ticker
   ... */
.tpl5 .t5-marquee{
  background:var(--t5-navy);
  color:var(--white); padding:1.4rem 0; overflow:hidden; white-space:nowrap; position:relative; z-index:4;
}
.tpl5 .t5-marquee::before, .tpl5 .t5-marquee::after{
  content:''; position:absolute; top:0; bottom:0; width:6rem; z-index:2; pointer-events:none;
}
.tpl5 .t5-marquee::before{ left:0; background:var(--t5-navy); }
.tpl5 .t5-marquee::after{ right:0; background:var(--t5-navy); }
.tpl5 .t5-marquee-track{
  display:inline-flex; gap:3rem;
  font-family:var(--t5-display);
  font-weight:600; font-size:1.5rem;
  animation:t5m-scroll 26s linear infinite;
  padding-left:3rem;
}
.tpl5 .t5-marquee-track span{ display:inline-flex; align-items:center; gap:1rem; }
.tpl5 .t5-marquee-track .t5-star{ color:var(--t5-sun); }
@keyframes t5m-scroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ...
   FEATURES ... playful bento grid (richer)
   ... */
.tpl5 .t5-features{ padding:6rem clamp(1.4rem,2.5vw,2.4rem) 5rem clamp(1.4rem,2.5vw,2.4rem); position:relative; overflow:hidden; }
.tpl5 .t5-features::before{
  content:''; position:absolute; inset:0;
  background:var(--white); pointer-events:none;
}
.tpl5 .t5-features-head{ text-align:center; margin-bottom:3.2rem; position:relative; max-width:60rem; margin:0 auto 3.2rem; }
.tpl5 .t5-bento{
  display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:auto; gap:1.2rem;
  position:relative;
  align-items:stretch;
}
.tpl5 .t5-bento-item{
  position:relative;
  border:1.5px solid var(--t5-line);
  border-radius:20px;
  padding:2rem 1.8rem 1.6rem;
  background:var(--white);
  box-shadow:0 6px 18px rgba(var(--primary-deeper-rgb,4,31,18),.06);
  overflow:hidden;
  isolation:isolate;
  transform-style:preserve-3d;
  transition:transform .45s var(--t5-smooth), box-shadow .45s var(--t5-smooth), border-color .3s;
  display:flex; flex-direction:column;
}
.tpl5 .t5-bento-item::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:var(--white); opacity:0; transition:opacity .5s;
}
.tpl5 .t5-bento-item::after{
  content:''; position:absolute; top:0; left:1.6rem; right:1.6rem; height:3px;
  border-radius:0 0 99px 99px;
  background:var(--accent, var(--t5-coral));
  transition:background .3s;
}
.tpl5 .t5-bento-item:hover{ transform:translateY(-6px) translateZ(12px); box-shadow:0 20px 40px rgba(var(--primary-deeper-rgb,4,31,18),.12); border-color:rgba(var(--accent-rgb,217,119,6),.35); }
.tpl5 .t5-bento-item:hover::before{ opacity:1; }
.tpl5 .t5-bento-item--1{ --accent:var(--t5-coral); }
.tpl5 .t5-bento-item--1 .t5-bento-icon{ background:rgba(255,140,66,.12); color:var(--t5-coral); border-color:rgba(255,140,66,.22); }
.tpl5 .t5-bento-item--2{ --accent:var(--t5-teal); }
.tpl5 .t5-bento-item--2 .t5-bento-icon{ background:rgba(var(--primary-rgb),.10); color:var(--t5-teal); border-color:rgba(var(--primary-rgb),.18); }
.tpl5 .t5-bento-item--3{ --accent:var(--t5-purple); }
.tpl5 .t5-bento-item--3 .t5-bento-icon{ background:rgba(155,93,229,.12); color:var(--t5-purple); border-color:rgba(155,93,229,.22); }
.tpl5 .t5-bento-item--4{ --accent:var(--t5-gold-d); }
.tpl5 .t5-bento-item--4 .t5-bento-icon{ background:var(--t5-gold-p); color:var(--t5-gold-d); border-color:rgba(var(--gold-rgb,201,168,76),.32); }
.tpl5 .t5-bento-icon{
  width:4.6rem; height:4.6rem; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background:var(--t5-gold-p);
  border:1.5px solid rgba(var(--gold-rgb,201,168,76),.32);
  color:var(--t5-gold-d);
  font-size:1.9rem;
  margin-bottom:1.2rem;
  transition:transform .45s var(--t5-ease), background .3s, color .3s;
}
.tpl5 .t5-bento-item:hover .t5-bento-icon{ transform:rotate(-8deg) scale(1.1); }
.tpl5 .t5-bento-tag{
  font-family:var(--t5-display); font-weight:600;
  font-size:.92rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--t5-gold-d); margin-bottom:.35rem;
}
.tpl5 .t5-bento-title{
  font-family:var(--t5-display); font-weight:700;
  font-size:1.85rem; color:var(--t5-ink); margin:.35rem 0 .6rem; line-height:1.18;
}
.tpl5 .t5-bento-desc{ font-size:1.32rem; line-height:1.65; color:var(--t5-ink-2); margin:0 0 1.1rem; flex:1; }
.tpl5 .t5-bento-link{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--t5-display); font-weight:600; font-size:1.2rem;
  color:var(--t5-coral); transition:gap .3s var(--t5-ease), color .3s; margin-top:auto;
}
.tpl5 .t5-bento-link i{ transition:transform .3s var(--t5-ease); }
.tpl5 .t5-bento-item:hover .t5-bento-link{ gap:1.2rem; color:var(--t5-gold-d); }
.tpl5 .t5-bento-item:hover .t5-bento-link i{ transform:translateX(4px); }

/* Mini bar visual (results tile) */
.tpl5 .t5-bars{ display:flex; align-items:flex-end; gap:.4rem; height:5rem; margin:.6rem 0 .8rem; }
.tpl5 .t5-bars span{
  flex:1; border-radius:6px 6px 0 0;
  background:var(--t5-coral);
  transform-origin:bottom; transform:scaleY(0);
  animation:t5BarGrow 1s var(--t5-smooth) forwards;
}
.tpl5 .t5-bars span:nth-child(2){ animation-delay:.08s; }
.tpl5 .t5-bars span:nth-child(3){ animation-delay:.16s; }
.tpl5 .t5-bars span:nth-child(4){ animation-delay:.24s; }
.tpl5 .t5-bars span:nth-child(5){ animation-delay:.32s; }
.tpl5 .t5-bars span:nth-child(6){ animation-delay:.4s; }
.tpl5 .t5-bars span:nth-child(7){ animation-delay:.48s; }
@keyframes t5BarGrow{ to{ transform:scaleY(1); } }
.tpl5 .t5-bento-num{ width:2.7rem; height:2.7rem; font-size:1.05rem; top:1rem; right:1rem; }

@media(max-width:1100px){
  .tpl5 .t5-bento{ gap:1rem; }
  .tpl5 .t5-features{ padding:5rem clamp(1.2rem,4vw,1.8rem) 4rem clamp(1.2rem,4vw,1.8rem); }
}
@media(max-width:900px){
  .tpl5 .t5-bento{ grid-template-columns:repeat(2,1fr); gap:1rem; }
  .tpl5 .t5-features-head{ margin-bottom:2.6rem; }
  .tpl5 .t5-bento-item{ padding:1.8rem 1.6rem 1.6rem; }
  .tpl5 .t5-bento-item:hover{ transform:translateY(-4px); }
}
@media(max-width:640px){
  .tpl5 .t5-features{ padding:4rem clamp(1.2rem,4vw,1.8rem) 3rem clamp(1.2rem,4vw,1.8rem); }
  .tpl5 .t5-bento{ grid-template-columns:1fr; gap:1rem; }
  .tpl5 .t5-bento-item{ padding:1.6rem 1.4rem 1.6rem; }
  .tpl5 .t5-bento-icon{ width:4rem; height:4rem; font-size:1.6rem; margin-bottom:1rem; }
  .tpl5 .t5-bento-title{ font-size:1.7rem; }
  .tpl5 .t5-bento-desc{ font-size:1.25rem; }
  .tpl5 .t5-bento-num{ width:2.4rem; height:2.4rem; font-size:.95rem; }
  .tpl5 .t5-bento-medals span{ width:2.6rem; height:2.6rem; font-size:1.05rem; }
  .tpl5 .t5-bars{ height:5rem; }
  .tpl5 .t5-bento-chat{ padding:.8rem; }
  .tpl5 .t5-bento-chat-bubble{ font-size:1.15rem; }
}

/* Bento dot-pattern accent */
.tpl5 .t5-bento-item .t5-dots{
  position:absolute; right:-1.5rem; bottom:-1.5rem; z-index:0;
  width:9rem; height:9rem;
background:var(--white); background-size:1.2rem 1.2rem;
  opacity:.6; transition:transform .5s var(--t5-smooth), opacity .4s;
}
.tpl5 .t5-bento-item:hover .t5-dots{ transform:translate(-1rem,-1rem) rotate(15deg); opacity:1; }

/* ...
   PROGRAMS ... magazine spread (3-up cards, new)
   ... */
.tpl5 .t5-programs{ padding:9rem clamp(1.6rem,2.5vw,3rem) 8rem clamp(1.6rem,2.5vw,3rem); background:var(--gray-50); }
.tpl5 .t5-programs::before{ display:none !important; }
.tpl5 .t5-programs-head{ text-align:center; max-width:760px; margin:0 auto 5rem; position:relative; }
.tpl5 .t5-programs-head .t5-kicker{
  background:var(--primary);
  color:var(--white);
  box-shadow:0 6px 0 var(--primary-dark), 0 12px 28px rgba(var(--primary-rgb,12,84,48),.28);
}
.tpl5 .t5-programs-head .t5-kicker::before{ background:var(--gold); }
.tpl5 .t5-programs-head .t5-h{
  font-family:var(--font-heading);
  font-size:clamp(3rem,5vw,4.8rem);
  font-weight:800;
  line-height:1.1;
  letter-spacing:-.02em;
  color:var(--primary);
  margin:0 0 1.4rem;
}
.tpl5 .t5-programs-head .t5-h em{
  font-style:normal;
  display:inline-block;
  color:var(--primary-dark);
  position:relative;
  padding:0 .15em;
}
.tpl5 .t5-programs-head .t5-h em::after{
  content:''; position:absolute; left:0; right:0; bottom:.05em;
  height:.12em; background:var(--gold); opacity:.35; border-radius:99px;
  transform:skewX(-2deg);
}
.tpl5 .t5-program-tabs{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.8rem;
  perspective:1500px; position:relative;
}
.tpl5 .t5-program{
  position:relative;
  border:1.5px solid var(--t5-line);
  border-radius:26px;
  padding:2.8rem 2.6rem;
  background:var(--white);
  box-shadow:0 8px 26px rgba(var(--primary-deeper-rgb,4,31,18),.07);
  overflow:hidden; isolation:isolate; transform-style:preserve-3d;
  transition:transform .5s var(--t5-smooth), box-shadow .5s var(--t5-smooth), border-color .3s;
}
.tpl5 .t5-program::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:var(--white); opacity:0; transition:opacity .5s;
}
.tpl5 .t5-program:hover{ transform:translateY(-10px) translateZ(22px); box-shadow:0 32px 70px rgba(var(--primary-deeper-rgb,4,31,18),.16); border-color:rgba(var(--accent-rgb,217,119,6),.4); }
.tpl5 .t5-program:hover::before{ opacity:1; }
.tpl5 .t5-program-emoji{
  width:5.4rem; height:5.4rem; border-radius:18px;
  display:flex; align-items:center; justify-content:center;
  background:var(--t5-gold-p); border:1.5px solid rgba(var(--gold-rgb,201,168,76),.32);
  color:var(--t5-gold-d); font-size:2.4rem; margin-bottom:1.8rem;
  transition:transform .45s var(--t5-ease);
}
.tpl5 .t5-program:nth-child(1) .t5-program-emoji{ background:var(--t5-gold-p); color:var(--t5-gold-d); }
.tpl5 .t5-program--teal .t5-program-emoji{ background:rgba(var(--primary-rgb),.10); color:var(--t5-teal); border-color:rgba(var(--primary-rgb),.18); }
.tpl5 .t5-program--purple .t5-program-emoji{ background:rgba(155,93,229,.12); color:var(--t5-purple); border-color:rgba(155,93,229,.22); }
.tpl5 .t5-program:hover .t5-program-emoji{ transform:rotate(-8deg) scale(1.1); }
.tpl5 .t5-program-title{
  font-family:var(--t5-display); font-weight:700; font-size:2.3rem;
  color:var(--t5-ink); margin:0 0 1rem; line-height:1.15;
}
.tpl5 .t5-program-desc{ font-size:1.42rem; color:var(--t5-ink-2); line-height:1.72; margin:0 0 1.6rem; }
.tpl5 .t5-program-meta{
  display:flex; flex-wrap:wrap; gap:.8rem 1.4rem;
  font-family:var(--t5-display); font-weight:600; font-size:1rem;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--t5-gold-d);
}
.tpl5 .t5-program-meta i{ color:var(--t5-coral); margin-right:.3rem; }
.tpl5 .t5-program--teal .t5-program-meta{ color:var(--t5-teal); }
.tpl5 .t5-program--teal .t5-program-meta i{ color:var(--t5-coral); }
.tpl5 .t5-program--purple .t5-program-meta{ color:var(--t5-purple); }

/* ...
   EDITORIAL ... vision & mission
   ... */
.tpl5 .t5-editorial{ padding:10rem clamp(1.6rem,2.5vw,3rem); position:relative; overflow:hidden; }
.tpl5 .t5-editorial::before{ display:none !important; }
.tpl5 .t5-editorial-grid{ display:grid; grid-template-columns:1.05fr 1fr; gap:6rem; align-items:start; }
.tpl5 .t5-vision-text{
  font-size:1.75rem; line-height:1.95; color:var(--t5-ink);
  font-family:var(--t5-body);
}
.tpl5 .t5-vision-text::first-letter{
  font-family:var(--t5-display);
  font-size:5.6rem; font-weight:700; line-height:.85;
  float:left; margin:.12em .16em 0 0;
  color:var(--t5-coral);
}
.tpl5 .t5-mission{
  background:var(--t5-cream-2);
  border:1.5px solid var(--t5-line);
  border-radius:26px; padding:3.4rem 3rem;
  box-shadow:0 10px 36px rgba(var(--primary-deeper-rgb,4,31,18),.08);
}
.tpl5 .t5-mission-title{
  font-family:var(--t5-display); font-size:2.2rem; font-weight:700; color:var(--t5-ink);
  margin-bottom:2.2rem; display:flex; align-items:center; gap:1rem;
}
.tpl5 .t5-mission-title::before{
  content:''; width:1.1rem; height:1.1rem; background:var(--t5-coral);
  clip-path:polygon(25% 5%,75% 5%,100% 50%,75% 95%,25% 95%,0% 50%);
}
.tpl5 .t5-mission-list{ list-style:none; margin:0; padding:0; counter-reset:t5m; }
.tpl5 .t5-mission-list li{
  counter-increment:t5m;
  position:relative;
  padding:1.6rem 0 1.6rem 5.6rem;
  border-bottom:1px dashed var(--t5-line);
  font-size:1.45rem; line-height:1.7; color:var(--t5-ink-2);
  transition:color .3s, padding-left .35s var(--t5-smooth);
}
.tpl5 .t5-mission-list li:last-child{ border-bottom:none; }
.tpl5 .t5-mission-list li::before{
  content:counter(t5m, decimal-leading-zero);
  position:absolute; left:0; top:1.6rem;
  width:3.8rem; height:3.8rem;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--t5-display); font-weight:700; font-size:1.5rem;
  color:var(--white);
  background:var(--t5-coral);
  border-radius:12px;
  box-shadow:0 8px 20px rgba(var(--accent-rgb,217,119,6),.32);
  transition:transform .35s var(--t5-smooth);
}
.tpl5 .t5-mission-list li:hover{ color:var(--t5-ink); padding-left:6.4rem; }
.tpl5 .t5-mission-list li:hover::before{ transform:rotate(-6deg) scale(1.08); }

/* ...
   VALUES ... dark glass bento
   ... */
.tpl5 .t5-values{
  padding:10rem clamp(1.6rem,2.5vw,3rem);
  background:var(--t5-navy-deep);
  color:var(--white); position:relative; overflow:hidden;
}
.tpl5 .t5-values::before{ display:none !important; }
.tpl5 .t5-values-head{ text-align:center; margin-bottom:6rem; position:relative; z-index:1; }
.tpl5 .t5-values-head .t5-h{ color:var(--white); }
.tpl5 .t5-values-head .t5-lead{ color:rgba(255,255,255,.75); }
.tpl5 .t5-values-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.8rem; position:relative; z-index:1; }
.tpl5 .t5-value{
  position:relative;
  padding:3rem 2.6rem;
  background:rgba(255,255,255,.06);
  border:1.5px solid var(--t5-white-line);
  border-radius:24px;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  overflow:hidden;
  transition:transform .5s var(--t5-smooth), background .4s, border-color .3s, box-shadow .5s;
}
.tpl5 .t5-value::before{
  content:''; position:absolute; top:-40%; right:-25%;
  width:70%; height:180%; border-radius:50%;
background:var(--white); opacity:0; transition:opacity .5s; pointer-events:none;
}
.tpl5 .t5-value:hover{ transform:translateY(-10px); background:rgba(255,255,255,.1); border-color:rgba(var(--gold-rgb,201,168,76),.5); box-shadow:0 30px 60px rgba(0,0,0,.35); }
.tpl5 .t5-value:hover::before{ opacity:1; }
.tpl5 .t5-value-num{
  font-family:var(--t5-display); font-size:4.6rem; font-weight:700; line-height:1;
  color:rgba(255,255,255,.14); position:absolute; top:1.4rem; right:1.8rem;
  font-feature-settings:"lnum";
}
.tpl5 .t5-value-icon{
  width:5.6rem; height:5.6rem; border-radius:18px;
  display:flex; align-items:center; justify-content:center;
  background:var(--t5-coral);
  color:var(--white); font-size:2.2rem;
  margin-bottom:1.8rem;
  box-shadow:0 12px 28px rgba(var(--accent-rgb,217,119,6),.4);
  transition:transform .45s var(--t5-ease);
}
.tpl5 .t5-value:hover .t5-value-icon{ transform:rotate(-8deg) scale(1.1); }
.tpl5 .t5-value h3{ font-family:var(--t5-display); font-weight:600; font-size:2.2rem; color:var(--white); margin:0 0 1rem; }
.tpl5 .t5-value p{ font-size:1.4rem; color:rgba(255,255,255,.72); line-height:1.75; margin:0; }

/* ═══════════════ GALLERY — draggable carousel (flat, no gradients) ═══════════════ */
.tpl5 .t5-gallery{ padding:9rem clamp(1.6rem,2.5vw,3rem) 8rem clamp(1.6rem,2.5vw,3rem); background:var(--white); position:relative; overflow:hidden; }
.tpl5 .t5-gallery-head{ text-align:center; max-width:60rem; margin:0 auto 4.4rem; }
.tpl5 .t5-gallery-head .t5-kicker{
  background:var(--primary);
  color:var(--white);
  box-shadow:0 6px 0 var(--primary-dark), 0 12px 28px rgba(var(--primary-rgb,12,84,48),.28);
}
.tpl5 .t5-gallery-head .t5-kicker::before{ background:var(--gold); }

.tpl5 .t5-gal-carousel{ position:relative; }
.tpl5 .t5-gal-track{
  display:flex; gap:2rem;
  overflow-x:auto; scroll-snap-type:x mandatory;
  padding:.6rem .6rem 2.4rem;
  margin:0 -.6rem;
  scrollbar-width:none;
}
.tpl5 .t5-gal-track::-webkit-scrollbar{ display:none; }

.tpl5 .t5-gal-slide{
  position:relative; flex:0 0 auto;
  width:min(38rem,72vw);
  aspect-ratio:4/5;
  border-radius:20px;
  overflow:hidden;
  scroll-snap-align:center;
  background:var(--white);
  border:1px solid var(--t5-line);
  box-shadow:0 1px 3px rgba(0,0,0,.06);
  text-decoration:none;
  display:block;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s;
}
.tpl5 .t5-gal-slide:hover{ transform:translateY(-6px); box-shadow:0 22px 44px rgba(var(--primary-deeper-rgb,4,31,18),.16); }

.tpl5 .t5-gal-slide img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.tpl5 .t5-gal-slide:hover img{ transform:scale(1.06); }

.tpl5 .t5-gal-tag{
  position:absolute; top:1.4rem; left:1.4rem; z-index:2;
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--t5-display); font-weight:700; font-size:1rem;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--white); padding:.5rem 1.1rem; border-radius:999px;
}
.tpl5 .t5-gal-slide--c1 .t5-gal-tag{ background:var(--t5-coral); }
.tpl5 .t5-gal-slide--c2 .t5-gal-tag{ background:var(--t5-teal); }
.tpl5 .t5-gal-slide--c3 .t5-gal-tag{ background:var(--t5-purple); }
.tpl5 .t5-gal-slide--c4 .t5-gal-tag{ background:var(--t5-blue); }
.tpl5 .t5-gal-slide--c5 .t5-gal-tag{ background:var(--t5-gold-d); }
.tpl5 .t5-gal-slide--c6 .t5-gal-tag{ background:var(--t5-pink); }

.tpl5 .t5-gal-caption{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  background:rgba(var(--primary-deeper-rgb,4,31,18),.86);
  color:var(--white); padding:1.6rem 1.8rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.tpl5 .t5-gal-caption strong{ font-family:var(--t5-display); font-weight:700; font-size:1.6rem; line-height:1.2; }
.tpl5 .t5-gal-caption span{ display:block; font-family:var(--t5-body); font-size:1.15rem; color:rgba(255,255,255,.72); margin-top:.3rem; }
.tpl5 .t5-gal-caption i{ font-size:1.3rem; flex-shrink:0; transition:transform .3s; }
.tpl5 .t5-gal-slide:hover .t5-gal-caption i{ transform:translateX(4px); }

/* controls */
.tpl5 .t5-gal-nav{ display:flex; align-items:center; justify-content:center; gap:1.6rem; margin-top:1.2rem; }
.tpl5 .t5-gal-arrow{
  width:4.6rem; height:4.6rem; border-radius:50%;
  background:var(--white); border:2px solid var(--t5-ink);
  color:var(--t5-ink); font-size:1.4rem;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:.25s;
}
.tpl5 .t5-gal-arrow:hover{ background:var(--t5-ink); color:var(--white); }
.tpl5 .t5-gal-dots{ display:flex; align-items:center; gap:.7rem; }
.tpl5 .t5-gal-dots button{
  width:.9rem; height:.9rem; border-radius:50%; padding:0; border:none;
  background:var(--t5-line); cursor:pointer; transition:.25s;
}
.tpl5 .t5-gal-dots button.is-active{ width:2.2rem; border-radius:999px; background:var(--t5-coral); }

@media(max-width:640px){
  .tpl5 .t5-gal-slide{ width:82vw; }
  .tpl5 .t5-gal-caption{ padding:1.3rem 1.4rem; }
}

/* ...
   FOUNDER'S NOTE ... pull quote
   ... */
.tpl5 .t5-founder{ padding:11rem clamp(1.6rem,2.5vw,3rem); position:relative; overflow:hidden; background:var(--white); }
.tpl5 .t5-founder::before{ display:none !important; }
.tpl5 .t5-founder-quote{
  font-family:var(--t5-body); font-style:italic; font-weight:700;
  font-size:clamp(2.2rem,3.6vw,3.2rem); line-height:1.45;
  color:var(--t5-ink); text-align:center;
  max-width:88rem; margin:0 auto 3.4rem; position:relative;
}
.tpl5 .t5-founder-quote .t5-quote-mark{ color:var(--t5-coral); }
.tpl5 .t5-founder-author{ display:flex; align-items:center; justify-content:center; gap:1.6rem; }
.tpl5 .t5-founder-avatar{
  width:6rem; height:6rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--t5-display); font-size:2.5rem; font-weight:700;
  color:var(--white);
  background:var(--t5-coral);
  border:3px solid rgba(var(--accent-rgb,217,119,6),.4);
  box-shadow:0 14px 30px rgba(var(--accent-rgb,217,119,6),.35);
}
.tpl5 .t5-founder-meta{ text-align:left; }
.tpl5 .t5-founder-meta strong{ display:block; font-family:var(--t5-display); font-size:1.9rem; font-weight:700; color:var(--t5-ink); }
.tpl5 .t5-founder-meta span{ font-family:var(--t5-display); font-size:1.1rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--t5-gold-d); }
.tpl5 .t5-founder-stars{ color:var(--t5-sun); font-size:1.3rem; margin-top:.5rem; letter-spacing:.3em; }

/* ═══════════════ THIS WEEK — scroll-snap rail (no gradients) ═══════════════ */
.tpl5 .t5-week{ padding:6rem clamp(1.6rem,2.5vw,3rem); background:var(--white); }
.tpl5 .t5-week-head{ text-align:center; max-width:54rem; margin:0 auto 4rem; }
.tpl5 .t5-week-head .t5-kicker{
  background:var(--primary);
  color:var(--white);
  box-shadow:0 6px 0 var(--primary-dark), 0 12px 28px rgba(var(--primary-rgb,12,84,48),.28);
}
.tpl5 .t5-week-head .t5-kicker::before{ background:var(--gold); }
.tpl5 .t5-week-head p{ font-family:var(--t5-body); font-size:1.4rem; color:var(--t5-ink-2); margin-top:.8rem; }

.tpl5 .t5-week-rail{ display:flex; gap:1.4rem; justify-content:center; flex-wrap:wrap; overflow-x:auto; scroll-snap-type:x mandatory; padding:.6rem .6rem 1.2rem; margin:0 auto; scrollbar-width:none; max-width:fit-content; }
.tpl5 .t5-week-rail::-webkit-scrollbar{ display:none; }

.tpl5 .t5-day{
  flex:0 0 auto; width:14rem; scroll-snap-align:start;
  background:var(--white); border:1.5px solid var(--t5-line); border-radius:16px;
  padding:2rem 1.6rem; text-align:center;
  transition:transform .25s, border-color .25s, box-shadow .25s;
}
.tpl5 .t5-day:hover{ transform:translateY(-4px); box-shadow:0 12px 24px rgba(var(--primary-deeper-rgb,4,31,18),.10); border-color:var(--dc,var(--t5-coral)); }
.tpl5 .t5-day-icon{
  width:4.6rem; height:4.6rem; margin:0 auto 1.2rem; border-radius:50%;
  background:var(--t5-cream-3); color:var(--dc,var(--t5-coral));
  display:flex; align-items:center; justify-content:center; font-size:1.6rem;
}
.tpl5 .t5-day-name{ font-family:var(--t5-display); font-weight:700; font-size:1.15rem; letter-spacing:.08em; text-transform:uppercase; color:var(--t5-ink-2); margin-bottom:.5rem; }
.tpl5 .t5-day-tag{ font-family:var(--t5-body); font-weight:600; font-size:1.25rem; color:var(--t5-ink); line-height:1.3; }

.tpl5 .t5-day--1{ --dc:var(--t5-coral); }
.tpl5 .t5-day--2{ --dc:var(--t5-teal); }
.tpl5 .t5-day--3{ --dc:var(--t5-purple); }
.tpl5 .t5-day--4{ --dc:var(--t5-blue); }
.tpl5 .t5-day--5{ --dc:var(--t5-gold-d); }
.tpl5 .t5-day--6{ --dc:var(--t5-pink); }
.tpl5 .t5-day--7{ --dc:var(--t5-coral); }

.tpl5 .t5-day--today{ border-color:var(--dc); background:var(--t5-cream-3); }
.tpl5 .t5-day--today .t5-day-icon{ background:var(--dc); color:var(--white); }
.tpl5 .t5-day--today .t5-day-name{ color:var(--dc); }

@media(max-width:600px){ .tpl5 .t5-day{ width:12.4rem; } }

/* ═══════════════ NEWS — magazine grid (no gradients) ═══════════════ */
.tpl5 .t5-news{ padding:8rem clamp(1.6rem,2.5vw,3rem); background:var(--white); }
.tpl5 .t5-news-head{ text-align:center; max-width:54rem; margin:0 auto 4.4rem; }
.tpl5 .t5-news-head .t5-kicker{
  background:var(--primary);
  color:var(--white);
  box-shadow:0 6px 0 var(--primary-dark), 0 12px 28px rgba(var(--primary-rgb,12,84,48),.28);
}
.tpl5 .t5-news-head .t5-kicker::before{ background:var(--gold); }
.tpl5 .t5-news-head p{ font-family:var(--t5-body); font-size:1.4rem; color:var(--t5-ink-2); margin-top:.8rem; }

.tpl5 .t5-news-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; }
.tpl5 .t5-news-card{
  display:block; background:var(--white); border:1px solid var(--t5-line); border-radius:18px;
  overflow:hidden; text-decoration:none; color:inherit;
  transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s;
}
.tpl5 .t5-news-card:hover{ transform:translateY(-6px); box-shadow:0 18px 36px rgba(var(--primary-deeper-rgb,4,31,18),.14); }
.tpl5 .t5-news-img{ position:relative; aspect-ratio:16/10; overflow:hidden; }
.tpl5 .t5-news-img img{ width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.tpl5 .t5-news-card:hover .t5-news-img img{ transform:scale(1.06); }
.tpl5 .t5-news-date{
  position:absolute; top:1rem; left:1rem; background:var(--white); border-radius:10px;
  padding:.5rem .8rem; text-align:center; line-height:1.1; box-shadow:0 4px 10px rgba(0,0,0,.14);
}
.tpl5 .t5-news-date strong{ display:block; font-family:var(--t5-display); font-weight:700; font-size:1.5rem; color:var(--t5-ink); }
.tpl5 .t5-news-date span{ font-family:var(--t5-body); font-size:.9rem; font-weight:700; text-transform:uppercase; color:var(--t5-ink-2); }
.tpl5 .t5-news-body{ padding:1.6rem 1.8rem 1.8rem; }
.tpl5 .t5-news-title{ font-family:var(--t5-display); font-weight:700; font-size:1.6rem; color:var(--t5-ink); margin:0 0 .8rem; line-height:1.3; }
.tpl5 .t5-news-link{ display:inline-flex; align-items:center; gap:.5rem; font-family:var(--t5-display); font-weight:700; font-size:1.15rem; color:var(--t5-coral); }

@media(max-width:900px){ .tpl5 .t5-news-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:600px){ .tpl5 .t5-news-grid{ grid-template-columns:1fr; } }

/* ...
   CTA ... playful enrollment card
   ... */
.tpl5 .t5-cta{ padding:10rem clamp(1.6rem,2.5vw,3rem); background:var(--primary-deeper); border-top:4px solid var(--accent); position:relative; overflow:hidden; }
.tpl5 .t5-cta-card{ position:relative; max-width:1080px; margin:0 auto; padding:6rem 4rem; text-align:center; background:var(--white); color:var(--primary-deeper); border:3px solid var(--white); border-radius:16px; box-shadow:0 16px 40px rgba(0,0,0,.22); overflow:hidden; transform:rotate(-.6deg); }
.tpl5 .t5-cta-card::before{ content:''; position:absolute; inset:1.2rem; z-index:0; border:1.5px dashed var(--border); border-radius:12px; pointer-events:none; }
.tpl5 .t5-cta-card::after{ display:none; }
@keyframes t5Conic{ to{ transform:rotate(360deg); } }
.tpl5 .t5-cta-card h3{ font-family:var(--t5-display); font-weight:700; font-size:clamp(3rem,5vw,4.8rem); line-height:1.1; color:var(--primary-deeper); margin:1.6rem 0 1.8rem; position:relative; z-index:1; }
.tpl5 .t5-cta-card .t5-kicker{ background:var(--primary-deeper); color:var(--white); } .tpl5 .t5-cta-card .t5-kicker::before{ background:var(--gold); }
.tpl5 .t5-cta-card .t5-kicker::before{ background:var(--gold); }

.tpl5 .t5-cta-card h3 em{ color:var(--accent); }
.tpl5 .t5-cta-card p{ font-size:1.65rem; color:var(--text-secondary);
  max-width:58rem; margin:0 auto 3rem; line-height:1.8; position:relative; z-index:1;
}
.tpl5 .t5-cta-actions{ display:flex; justify-content:center; gap:1.4rem; flex-wrap:wrap; position:relative; z-index:1; }
.tpl5 .t5-cta-meta{ display:flex; justify-content:center; gap:2.4rem; flex-wrap:wrap; margin-top:2.6rem; position:relative; z-index:1; font-family:var(--t5-display); font-weight:700; font-size:1.25rem; letter-spacing:.04em; color:var(--primary-deeper); }
.tpl5 .t5-cta-meta i{ color:var(--accent); margin-right:.6rem; }
.tpl5 .t5-cta .t5-btn--white{
  background:var(--white) !important;
  color:var(--primary-deeper) !important;
  border:1.5px solid var(--primary-deeper) !important;
  box-shadow:0 6px 0 var(--primary-deeper), 0 12px 28px rgba(0,0,0,.12) !important;
}
.tpl5 .t5-cta .t5-btn--white:hover{
  background:var(--primary-deeper) !important;
  color:var(--white) !important;
}
.tpl5 .t5-cta .t5-btn--coral{
  background:var(--accent) !important;
  color:var(--white) !important;
  box-shadow:0 6px 0 var(--accent-dark), 0 12px 28px rgba(var(--accent-rgb),.25) !important;
}


/* =====================================================
    TEMPLATE 5 — MOBILE FIRST-PRINCIPLE FIX (playful)
    Mirrors TEMPLATE 15: keep paired buttons and trust
    side-by-side on mobile, not stacked vertically.
    Overrides BOTH tpl5 definitions above (first + second)
    and earlier 900px/640px blocks — last wins.
    FIX v3: keep desktop-like size on mobile (user request:
    same size as desktop, side-by-side)
    ===================================================== */
@media(max-width:768px){
  .tpl5 .t5-hero-cta{ display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important; gap:.7rem !important; margin-bottom:1.6rem !important; width:100% !important; }
  .tpl5 .t5-hero-cta .t5-btn{ flex:1 1 0 !important; min-width:0 !important; width:auto !important; padding:1.45rem 1.1rem !important; font-size:1.45rem !important; white-space:nowrap !important; justify-content:center !important; gap:.5rem !important; line-height:1.15 !important; }
  .tpl5 .t5-hero-cta .t5-btn i{ font-size:1.25rem !important; }
  .tpl5 .t5-hero-cta .t5-btn--big{ padding:1.45rem 1.1rem !important; font-size:1.45rem !important; }
  .tpl5 .t5-hero-trust{ display:grid !important; grid-template-columns:repeat(3,1fr) !important; gap:.4rem !important; }
  .tpl5 .t5-hero-trust .t5-trust{ flex-direction:column !important; align-items:center !important; text-align:center !important; gap:.25rem !important; font-size:.88rem !important; justify-content:center !important; padding:.3rem .2rem !important; line-height:1.25 !important; }
  .tpl5 .t5-hero-trust .t5-trust i{ font-size:1.15rem !important; }
  .tpl5 .t5-cta-actions{ display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important; gap:.7rem !important; justify-content:center !important; width:100% !important; }
  .tpl5 .t5-cta-actions .t5-btn{ flex:1 1 0 !important; min-width:0 !important; width:auto !important; white-space:nowrap !important; justify-content:center !important; padding:1.45rem 1.1rem !important; font-size:1.45rem !important; gap:.5rem !important; line-height:1.15 !important; }
  .tpl5 .t5-cta-actions .t5-btn--big{ padding:1.45rem 1.1rem !important; font-size:1.45rem !important; }
  .tpl5 .t5-hero-cta, .tpl5 .t5-cta-actions{ flex-direction:row !important; flex-wrap:nowrap !important; }
}
/* extra narrow — keep side-by-side, only slightly tighten to avoid wrap */
@media(max-width:480px){
  .tpl5 .t5-hero-cta{ gap:.5rem !important; }
  .tpl5 .t5-hero-cta .t5-btn{ padding:1.25rem .75rem !important; font-size:1.22rem !important; }
  .tpl5 .t5-hero-trust{ gap:.3rem !important; }
  .tpl5 .t5-hero-trust .t5-trust{ font-size:.8rem !important; }
  .tpl5 .t5-hero-trust .t5-trust i{ font-size:1rem !important; }
  .tpl5 .t5-cta-actions{ gap:.5rem !important; }
  .tpl5 .t5-cta-actions .t5-btn{ padding:1.25rem .75rem !important; font-size:1.22rem !important; }
}
@media(max-width:400px){
  .tpl5 .t5-hero-cta{ gap:.45rem !important; }
  .tpl5 .t5-hero-cta .t5-btn{ padding:1.15rem .6rem !important; font-size:1.12rem !important; }
  .tpl5 .t5-hero-trust{ gap:.3rem !important; }
  .tpl5 .t5-hero-trust .t5-trust{ font-size:.78rem !important; }
  .tpl5 .t5-hero-trust .t5-trust i{ font-size:.95rem !important; }
  .tpl5 .t5-cta-actions{ gap:.45rem !important; }
  .tpl5 .t5-cta-actions .t5-btn{ padding:1.15rem .6rem !important; font-size:1.12rem !important; }
}

/* — ensure 769-900px also stays row (900 block came earlier, so re-assert) — */
@media(max-width:900px){
  .tpl5 .t5-hero-cta{ flex-direction:row !important; flex-wrap:nowrap !important; }
  .tpl5 .t5-hero-cta .t5-btn{ flex:1 1 0 !important; min-width:0 !important; white-space:nowrap !important; }
  .tpl5 .t5-cta-actions{ flex-direction:row !important; flex-wrap:nowrap !important; }
}

/* =====================================================
    TEMPLATE 6 — CORPORATE / EDITORIAL
    ===================================================== */
/* =====================================================
   106. HOMEPAGE TEMPLATE 6 ... "EDITORIAL"
   Premium magazine-meets-modern-web experience.
   Editorial identity (Playfair Display serifs, cream
   paper, gold rules, navy ink, photographer credits,
   drop-caps, pull-quotes) fused with T1 design language
   (3D card stack, glassmorphism, animated counters,
   bento features with hover gradient fills, bento
   levels with hover gradient fills, glassmorphic dark
   counter band, hexagonal core values, magnetic CTAs,
   3D reveals, perspective tilt).

   Layout:
   1.  Editorial masthead strip
   2.  Cover hero ... 3D magazine-cover stack with
       rotating ID-card backs + glassy chips
   3.  Pull-quote sidebar with serif quote mark
   4.  Featured editorial ... 2/3 + 1/3 spread + Editor's
       Notes sidebar
   5.  Three-column magazine spread
   6.  BENTO ... Signature programmes (hover gradient fill)
   7.  SCHOOL LEVELS ... Bento (hover gradient fill)
   8.  COUNTERS ... Glassmorphic on dark band
   9.  CORE VALUES ... Hexagonal icons
   10. BENTO ... Showcase (Result / Yearbook / Gallery)
   11. NEWS ... Bento editorial cards
   12. Letter from the Editor (ruled)
   13. CTA ... Navy panel with bento stats

   Colours: 100% driven by the unified theme tokens in
   :root via the .tpl6 --t6-* aliases below (a single
   saved palette in School Settings ... "Theme & Brand
   Colours" recolours every surface here automatically).
   ===================================================== */
.tpl6{

  /* ... Surface (kept literal ... magazine identity) ... */
  --t6-paper:        #fdfbf6;
  --t6-cream:        #faf6ef;
  --t6-cream-deep:   #f1e9d8;
  --t6-rule:         #ddd2bb;

  /* Brand-driven tones (THEME AWARE ... single source of
     truth: --primary / --accent / --gold / --brand-navy
     from :root, overridden by render_theme_css() in
     inc/theme_vars.php on every page load). */
  --t6-navy:         var(--brand-navy, #0a2540);
  --t6-navy-deep:    var(--primary-deeper, #041f12);
  --t6-navy-soft:    #f4f6fa;

  --t6-primary:      var(--primary, #0c5430);
  --t6-primary-2:    var(--primary-light, #1d8450);
  --t6-primary-soft: rgba(var(--primary-rgb), .10);
  --t6-primary-line: rgba(var(--primary-rgb), .18);

  --t6-accent:       var(--accent, #d97706);
  --t6-accent-soft:  rgba(var(--accent-rgb), .14);
  --t6-accent-line:  rgba(var(--accent-rgb), .32);

  --t6-gold:         var(--gold, #c9a84c);
  --t6-gold-b:       var(--gold-bright, #ffd98a);
  --t6-gold-soft:    var(--gold-soft, #f0d999);
  --t6-gold-pale:    var(--gold-pale, #f7ecd2);
  --t6-gold-deep:    var(--gold-dim, #a8842f);
  --t6-gold-darker:  var(--gold-deep, #5a3a00);

  /* ... Typography ... */
  --t6-seri: 'Playfair Display', 'Trirong', Georgia, serif;
  --t6-sans: 'Inter', 'Poppins', 'Open Sans', system-ui, sans-serif;
  --t6-body: 'Inter', 'Open Sans', system-ui, -apple-system, sans-serif;
  --t6-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* ... Ink / text tones (missing aliases — first-principle fix) ... */
  --t6-ink:      var(--text, #1a1d21);
  --t6-ink-soft: var(--text-secondary, #4a5058);
  --t6-paper-2:  #fff;
  --t6-muted:    var(--text-muted, #9aa0a8);

  /* ... Motion ... */
  --t6-ease: cubic-bezier(.2,.8,.2,1);
  --t6-shadow-card: 0 2px 12px rgba(20,33,61,.06), 0 1px 3px rgba(20,33,61,.04);
  --t6-shadow-lift: 0 18px 50px rgba(20,33,61,.10), 0 4px 12px rgba(20,33,61,.05);

  font-family: var(--t6-body);
  background: var(--t6-cream);
  color: var(--t6-ink);
  line-height: 1.65;
  overflow-x: hidden;
  position: relative;
}
.tpl6 *, .tpl6 *::before, .tpl6 *::after{ box-sizing:border-box; }
.tpl6 img{ max-width:100%; display:block; }
.tpl6 a{ color:inherit; text-decoration:none; }
.tpl6 button{ font-family:inherit; cursor:pointer; }
.tpl6 .t6-container{ max-width:1280px; margin:0 auto; padding:0 clamp(1rem,1.8vw,1.6rem); position:relative; }

/* paper background ... solid only (no gradients) */
.tpl6::before{
  content:"";
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background: var(--t6-cream);
}
.tpl6::after{
  content:"";
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='11'><circle cx='1' cy='2' r='1' fill='rgba(20,33,61,0.04)'/></svg>");
  background-size: 11px 11px;
  opacity:.4;
  pointer-events: none;
}

/* Decorative orbs ... solid color + blur filter (gradient-free) */
.tpl6 .t6-orb{
  position: absolute; border-radius: 50%;
  filter: blur(80px); pointer-events: none; z-index: 0;
  will-change: transform;
  animation: t6-orb-drift 14s ease-in-out infinite;
}
.tpl6 .t6-orb--1{ top: 6%; left: 4%; width: 38rem; height: 38rem; background: rgba(var(--gold-rgb), .35); }
.tpl6 .t6-orb--2{ top: 38%; right: -8%; width: 44rem; height: 44rem; background: rgba(var(--primary-rgb), .30); animation-delay: -4s; }
.tpl6 .t6-orb--3{ bottom: 8%; left: 28%; width: 32rem; height: 32rem; background: rgba(var(--accent-rgb), .18); animation-delay: -8s; }
.tpl6 .t6-orb--4{ top: 10%; right: -6%; width: 48rem; height: 48rem; background: rgba(var(--accent-rgb), .38); animation-delay: -3s; }
.tpl6 .t6-orb--5{ bottom: 6%; left: -10%; width: 42rem; height: 42rem; background: rgba(var(--gold-rgb), .28); animation-delay: -6s; }
@keyframes t6-orb-drift{
  0%, 100%{ transform: translate3d(0,0,0) scale(1); }
  50%     { transform: translate3d(40px,-30px,0) scale(1.07); }
}
.tpl6 .t6-section,
.tpl6 .t6-hero,
.tpl6 .t6-pullquote-section,
.tpl6 .t6-stats,
.tpl6 .t6-cta{
  position: relative;
  z-index: 1;
}

/* ... REVEAL ANIMATIONS ... */
.tpl6 .t6-reveal{
  opacity: 0;
  transform: translateY(36px);
  transition: opacity .9s var(--t6-ease), transform .9s var(--t6-ease);
}
.tpl6 .t6-reveal.is-in{ opacity: 1; transform: none; }
.tpl6 .t6-reveal[data-d="1"]{ transition-delay: .06s; }
.tpl6 .t6-reveal[data-d="2"]{ transition-delay: .16s; }
.tpl6 .t6-reveal[data-d="3"]{ transition-delay: .26s; }
.tpl6 .t6-reveal[data-d="4"]{ transition-delay: .36s; }
.tpl6 .t6-reveal[data-d="5"]{ transition-delay: .46s; }

/* 3D-from-left / right reveal variants */
.tpl6 .t6-reveal--3d-l{
  transform: perspective(1100px) translateY(40px) rotateY(7deg);
  transform-origin: left center;
  transition: opacity 1s var(--t6-ease), transform 1s var(--t6-ease);
}
.tpl6 .t6-reveal--3d-r{
  transform: perspective(1100px) translateY(40px) rotateY(-7deg);
  transform-origin: right center;
  transition: opacity 1s var(--t6-ease), transform 1s var(--t6-ease);
}
.tpl6 .t6-reveal--3d-l.is-in,
.tpl6 .t6-reveal--3d-r.is-in{ transform: perspective(1100px) translateY(0) rotateY(0); }

/* ... MASTHEAD ... */
.tpl6 .t6-masthead{
  border-bottom: 2px solid var(--t6-ink);
  padding: 1.2rem clamp(1.6rem,2.5vw,3rem);
  background: var(--t6-paper);
  font-family: var(--t6-mono);
  font-size: 1.15rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--t6-ink-soft);
  position: relative;
  z-index: 3;
}
.tpl6 .t6-masthead-in{
  display:flex; justify-content:space-between; align-items:center;
  gap: 2rem; flex-wrap: wrap;
}
.tpl6 .t6-masthead strong{ color: var(--t6-ink); font-weight: 700; }
.tpl6 .t6-masthead span{ transition: color .35s var(--t6-ease); }
.tpl6 .t6-masthead:hover span:hover{ color: var(--t6-navy); }

/* ... EYEBROW + SECTION HEADER ... */
.tpl6 .t6-eyebrow{
  display: inline-flex; align-items: center; gap: .8rem;
  padding: .6rem 1.4rem;
  background: var(--t6-paper-2);
  border: 1px solid var(--t6-rule);
  color: var(--t6-ink);
  font-family: var(--t6-mono);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  border-radius: 9999px;
  margin-bottom: 1.8rem;
  transition: background .35s var(--t6-ease), border-color .35s, transform .35s var(--t6-ease);
}
.tpl6 .t6-eyebrow:hover{
  background: var(--t6-ink);
  color: var(--t6-paper);
  border-color: var(--t6-ink);
  transform: translateY(-2px);
}
.tpl6 .t6-eyebrow i{ color: var(--t6-accent); }
.tpl6 .t6-eyebrow--dark{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.22);
  color:var(--white);
}
.tpl6 .t6-eyebrow--dark i{ color: var(--t6-gold-b); }
.tpl6 .t6-eyebrow--dark:hover{
  background: rgba(255,255,255,.18);
  color:var(--white);
  border-color: rgba(255,255,255,.45);
}

.tpl6 .t6-section-head{
  text-align: center;
  max-width: 760px;
  margin: 0 auto 5rem;
}
.tpl6 .t6-section-title{
  font-family: var(--t6-seri);
  font-size: clamp(2.6rem, 4.2vw, 4rem);
  font-weight: 700;
  letter-spacing: -.022em;
  line-height: 1.12;
  color: var(--t6-ink);
  margin: 0 0 1.4rem;
}
.tpl6 .t6-section-title em{ font-style: italic; color: var(--t6-navy); }
.tpl6 .t6-section-sub{
  font-size: 1.6rem;
  color: var(--t6-ink-soft);
  line-height: 1.7;
  margin: 0;
}

/* ... COVER HERO ... */
.tpl6 .t6-hero{
  padding: 6.5rem clamp(1.6rem,2.5vw,3rem) 6.5rem clamp(1.6rem,2.5vw,3rem);
  background: var(--t6-navy-deep);
  color:var(--white);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.tpl6 .t6-hero::before{
  content: '';
  position: absolute;
  inset: 0;
  background: transparent;
  pointer-events: none;
}
.tpl6 .t6-hero::after{
  content: '';
  position: absolute;
  bottom: -2px; left: 0; right: 0;
  height: 80px;
  background: var(--t6-cream);
  clip-path: polygon(0 100%, 100% 100%, 100% 30%, 0 100%);
  z-index: 2;
  pointer-events: none;
}
.tpl6 .t6-hero-orb{
  position: absolute; border-radius: 50%;
  filter: blur(80px); pointer-events: none;
  z-index: 0;
  will-change: transform;
  animation: t6-orb-drift 14s ease-in-out infinite;
}
.tpl6 .t6-hero .t6-hero-orb--1,
.tpl6 .t6-hero .t6-orb--1{
  top: 6%;  left: 4%;  width: 38rem; height: 38rem;
  background: rgba(var(--gold-rgb), .50);
}
.tpl6 .t6-hero .t6-hero-orb--2,
.tpl6 .t6-hero .t6-orb--2{
  top: 38%; right: -8%; width: 44rem; height: 44rem;
  background: rgba(var(--accent-rgb), .42);
  animation-delay: -4s;
}
.tpl6 .t6-hero .t6-hero-orb--3,
.tpl6 .t6-hero .t6-orb--3{
  bottom: 8%; left: 28%; width: 32rem; height: 32rem;
  background: rgba(var(--primary-light-rgb, 29, 132, 80), .40);
  animation-delay: -8s;
}
.tpl6 .t6-hero-issue{
  font-family: var(--t6-mono);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
  margin-bottom: 1.8rem;
  padding-bottom: 1.6rem;
  border-bottom: 1px solid rgba(255,255,255,.18);
  display:flex; justify-content:space-between; align-items:center;
  gap: 1.4rem;
  flex-wrap: wrap;
}
.tpl6 .t6-hero-issue strong{ color: var(--t6-gold-b); font-weight: 700; }
.tpl6 .t6-hero-issue .t6-issue-tag{
  background: var(--t6-gold);
  color: var(--t6-navy-deep);
  padding: .4rem 1rem;
  font-weight: 700;
  letter-spacing: .14em;
  box-shadow: 0 6px 16px rgba(var(--gold-rgb), .35);
}

/* Hero grid (left + right 3D) */
.tpl6 .t6-hero-grid{
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 4.6rem;
  align-items: center;
}

/* Left column */
.tpl6 .t6-hero-copy{ position: relative; z-index: 2; }

.tpl6 .t6-hero-eyebrow{
  display: inline-flex; align-items: center; gap: .8rem;
  padding: .7rem 1.4rem;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.28);
  color:var(--white);
  font-family: var(--t6-mono);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  border-radius: 9999px;
  margin-bottom: 2rem;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
}
.tpl6 .t6-hero-eyebrow .dot{
  width: .8rem; height: .8rem;
  background: var(--t6-gold-b);
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(var(--gold-rgb),.32);
  animation: t6Pulse 2s ease-in-out infinite;
}
@keyframes t6Pulse { 0%,100%{box-shadow:0 0 0 5px rgba(var(--gold-rgb),.32)} 50%{box-shadow:0 0 0 12px rgba(var(--gold-rgb),0)} }

.tpl6 .t6-hero h1{
  font-family: var(--t6-seri);
  font-size: clamp(3.4rem, 5.4vw, 5.6rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.025em;
  color:var(--white);
  margin: 0 0 2rem;
  text-shadow: 0 6px 32px rgba(0,0,0,.30);
}
.tpl6 .t6-hero-school{
  display: block;
  margin-bottom: .8rem;
}
.tpl6 .t6-hero-motto{
  display: block;
  font-style: italic;
  color: var(--t6-gold-b);
  font-size: clamp(2.4rem, 3.4vw, 3rem);
}

.tpl6 .t6-hero-tag{
  font-size: 1.6rem;
  color: rgba(255,255,255,.85);
  line-height: 1.75;
  max-width: 56rem;
  margin: 0 0 2.4rem;
}

/* CTAs */
.tpl6 .t6-hero-cta{
  display: flex; flex-wrap: wrap; gap: 1.2rem;
  margin-bottom: 3rem;
}
.tpl6 .t6-btn{
  display: inline-flex; align-items: center; justify-content: center; gap: .8rem;
  padding: 1.4rem 2.6rem;
  font-family: var(--t6-sans);
  font-size: 1.45rem;
  font-weight: 700;
  border-radius: 9999px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all .35s var(--t6-ease);
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.tpl6 .t6-btn i{ font-size: 1.4rem; transition: transform .35s var(--t6-ease); }
.tpl6 .t6-btn:hover i{ transform: translateX(4px); }
.tpl6 .t6-btn--ink{
  background: rgba(255,255,255,.95);
  color: var(--t6-navy-deep);
  border-color: rgba(255,255,255,.95);
  box-shadow: 0 14px 32px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.4);
}
.tpl6 .t6-btn--ink:hover{
  background: var(--t6-gold-b);
  color: var(--t6-navy-deep);
  border-color: var(--t6-gold-b);
  transform: translateY(-3px);
  box-shadow: 0 20px 44px rgba(var(--gold-rgb),.45), inset 0 1px 0 rgba(255,255,255,.4);
}
.tpl6 .t6-btn--outline{
  background: var(--t6-paper-2);
  color: var(--t6-ink);
  border-color: var(--t6-ink);
}
.tpl6 .t6-btn--outline:hover{
  background: var(--t6-ink);
  color: var(--t6-paper);
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(20,33,61,.18);
}
.tpl6 .t6-btn--ghost{
  background: rgba(255,255,255,.10);
  color:var(--white);
  border-color: rgba(255,255,255,.40);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.tpl6 .t6-btn--ghost:hover{
  background: rgba(255,255,255,.22);
  border-color: rgba(255,255,255,.7);
  color:var(--white);
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(0,0,0,.20);
}
.tpl6 .t6-btn--gold{
  background: var(--t6-gold);
  color: var(--t6-ink);
  border-color: var(--t6-gold-deep);
  box-shadow: 0 14px 32px rgba(var(--gold-rgb),.32), inset 0 1px 0 rgba(255,255,255,.5);
}
.tpl6 .t6-btn--gold:hover{
  background: var(--t6-gold-deep);
  color: var(--t6-paper);
  border-color: var(--t6-gold-darker);
  transform: translateY(-3px);
  box-shadow: 0 20px 44px rgba(var(--gold-rgb),.45), inset 0 1px 0 rgba(255,255,255,.5);
}

/* Trust strip */
.tpl6 .t6-hero-trust{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  padding: 2.4rem 0;
  margin-bottom: 3rem;
  border-top: 1px solid rgba(255,255,255,.18);
  border-bottom: 1px solid rgba(255,255,255,.18);
}
.tpl6 .t6-trust-item{
  display: flex; align-items: center; gap: 1.2rem;
}
.tpl6 .t6-trust-item i{
  width: 4.4rem; height: 4.4rem;
  flex-shrink: 0;
  border-radius: 14px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.22);
  color: var(--t6-gold-b);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.7rem;
  transition: all .35s var(--t6-ease);
}
.tpl6 .t6-trust-item:hover i{
  background: var(--t6-gold-b);
  color: var(--t6-navy-deep);
  border-color: var(--t6-gold-b);
  transform: rotate(-6deg);
}
.tpl6 .t6-trust-item strong{
  display: block;
  font-family: var(--t6-seri);
  font-size: 1.7rem;
  font-weight: 700;
  color:var(--white);
  line-height: 1.05;
  margin-bottom: .4rem;
}
.tpl6 .t6-trust-item span{
  display: block;
  font-size: 1.25rem;
  color: rgba(255,255,255,.7);
}

/* Glassy counter chips at bottom-left of hero */
.tpl6 .t6-hero-chips{
  display: flex; flex-wrap: wrap;
  gap: 1.2rem;
}
.tpl6 .t6-chip{
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding: .9rem 1.6rem;
  background: rgba(255,255,255,.10);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: 0 10px 28px -10px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.18);
  border-radius: 9999px;
  transition: transform .35s var(--t6-ease), box-shadow .35s var(--t6-ease);
}
.tpl6 .t6-chip:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 36px -10px rgba(0,0,0,.40), 0 0 0 1.5px rgba(var(--gold-rgb),.35);
}
.tpl6 .t6-chip i{
  width: 3.4rem; height: 3.4rem;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--t6-gold);
  color: var(--t6-navy-deep);
  font-size: 1.3rem;
  box-shadow: 0 4px 10px rgba(var(--gold-rgb), .35);
}
.tpl6 .t6-chip:nth-child(2) i{
  background: #fff;
  color: var(--t6-navy-deep);
  box-shadow: 0 4px 10px rgba(0,0,0,.25);
}
.tpl6 .t6-chip:nth-child(3) i{
  background: var(--t6-accent);
  color:var(--white);
  box-shadow: 0 4px 10px rgba(var(--accent-rgb), .35);
}
.tpl6 .t6-chip strong{
  font-family: var(--t6-seri);
  font-size: 1.9rem;
  font-weight: 700;
  color:var(--white);
  line-height: 1;
  margin-right: .4rem;
}
.tpl6 .t6-chip span{
  font-family: var(--t6-mono);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.75);
}

/* ... HERO 3D STAGE (T1-style mock deck) ... */
.tpl6 .t6-hero-3d{
  position: relative;
  perspective: 1800px;
  min-height: 580px;
  display: flex; align-items: center; justify-content: center;
}
.tpl6 .t6-stage{
  position: relative;
  width: 100%;
  max-width: 46rem;
  aspect-ratio: 4/5;
}

/* Common card */
.tpl6 .t6-card{
  position: absolute;
  border-radius: 22px;
  overflow: hidden;
  background: var(--t6-paper-2);
  border: 1px solid rgba(255,255,255,.4);
  box-shadow:
    0 30px 80px rgba(0,0,0,.32),
    0 12px 30px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.4);
  transition: transform .8s var(--t6-ease), box-shadow .8s var(--t6-ease);
  will-change: transform;
}
.tpl6 .t6-card-inner{ padding: 1.8rem; height: 100%; display: flex; flex-direction: column; color: var(--t6-ink); }
.tpl6 .t6-card-bar{
  display: flex; align-items: center; gap: .8rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid rgba(0,0,0,.08);
  margin-bottom: 1.2rem;
}
.tpl6 .t6-card-dot{
  width: 2.2rem; height: 2.2rem;
  background: var(--t6-primary);
  border-radius: 50%;
  flex-shrink: 0;
}
.tpl6 .t6-card-dot--ink{ background: var(--t6-ink); }
.tpl6 .t6-card-txt{
  font-family: var(--t6-mono);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--t6-ink-soft);
}
.tpl6 .t6-card-photo{
  width: 8rem; height: 8rem;
  border-radius: 50%;
  background: var(--t6-gold-deep);
  color:var(--white);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--t6-seri);
  font-size: 2.6rem;
  font-weight: 700;
  margin: 1.6rem auto 1rem;
  border: 3px solid #fff;
  box-shadow: 0 6px 16px rgba(var(--gold-rgb), .28);
}
.tpl6 .t6-card-photo--ink{ background: var(--t6-primary); }
.tpl6 .t6-card-name{
  text-align: center;
  font-family: var(--t6-seri);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--t6-ink);
  margin-bottom: .3rem;
}
.tpl6 .t6-card-meta{
  text-align: center;
  font-family: var(--t6-mono);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--t6-muted);
  margin-bottom: 1rem;
}
.tpl6 .t6-card-row{
  display: flex; justify-content: space-between; align-items: center;
  padding: .8rem 0;
  border-bottom: 1px dashed rgba(0,0,0,.10);
  font-size: 1.3rem;
  color: var(--t6-ink-soft);
}
.tpl6 .t6-card-row:last-of-type{ border-bottom: none; }
.tpl6 .t6-card-row strong{ color: var(--t6-ink); font-family: var(--t6-seri); font-weight: 700; }
.tpl6 .t6-card-foot{
  margin-top: auto;
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(0,0,0,.08);
  font-family: var(--t6-mono);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--t6-muted);
}
.tpl6 .t6-card-foot-dot{
  width: .8rem; height: .8rem;
  border-radius: 50%;
  background: var(--t6-accent);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .22);
}

/* Back card 2 ... gold */
.tpl6 .t6-card--back1{
  width: 70%; top: -4%; right: -4%;
  background: var(--t6-gold-deep);
  border: 1px solid rgba(255,255,255,.35);
  transform: rotateY(10deg) rotateX(-4deg) rotateZ(6deg) translateZ(-30px);
  animation: t6-hero-back1 8s ease-in-out infinite;
  z-index: 2;
  color: var(--t6-navy-deep);
}
.tpl6 .t6-card--back1 .t6-card-bar{ border-bottom-color: rgba(0,0,0,.18); }
.tpl6 .t6-card--back1 .t6-card-txt{ color: var(--t6-navy-deep); font-weight: 800; }
.tpl6 .t6-card--back1 .t6-card-photo{ background: var(--t6-navy-deep); color: var(--t6-gold-b); }
.tpl6 .t6-card--back1 .t6-card-name{ color: var(--t6-navy-deep); }
.tpl6 .t6-card--back1 .t6-card-meta{ color: var(--t6-navy-deep); font-weight: 700; }
.tpl6 .t6-card--back1 .t6-card-row{ color: rgba(0,0,0,.7); border-bottom-color: rgba(0,0,0,.18); }
.tpl6 .t6-card--back1 .t6-card-row strong{ color: var(--t6-navy-deep); }
.tpl6 .t6-card--back1 .t6-card-foot{ border-top-color: rgba(0,0,0,.18); color: var(--t6-navy-deep); font-weight: 700; }
.tpl6 .t6-card--back1 .t6-card-inner{ color:var(--white); }
.tpl6 .t6-card--back1 .t6-card-bar{ border-bottom-color: rgba(0,0,0,.18); }
.tpl6 .t6-card--back1 .t6-card-dot{ background: var(--t6-navy-deep); }
.tpl6 .t6-card--back1 .t6-card-txt{ color: var(--t6-navy-deep); }
.tpl6 .t6-card--back1 .t6-card-name,
.tpl6 .t6-card--back1 .t6-card-row strong{ color: var(--t6-navy-deep); }
.tpl6 .t6-card--back1 .t6-card-row{ color: rgba(0,0,0,.7); border-bottom-color: rgba(0,0,0,.18); }
.tpl6 .t6-card--back1 .t6-card-row:last-of-type{ border-bottom: none; }
.tpl6 .t6-card--back1 .t6-card-meta{ color: var(--t6-navy-deep); }
.tpl6 .t6-card--back1 .t6-card-foot{ border-top-color: rgba(0,0,0,.18); color: var(--t6-navy-deep); }
@keyframes t6-hero-back1 { 0%,100%{transform:rotateY(10deg) rotateX(-4deg) rotateZ(6deg) translateZ(-30px)} 50%{transform:rotateY(13deg) rotateX(-2deg) rotateZ(8deg) translateZ(-15px)} }

/* Back card 2 ... light cream so it pops against dark hero */
.tpl6 .t6-card--back2{
  width: 60%; bottom: -2%; left: -8%;
  background: var(--t6-paper);
  border: 1px solid var(--t6-rule);
  transform: rotateY(-8deg) rotateX(5deg) rotateZ(-8deg) translateZ(-60px);
  animation: t6-hero-back2 10s ease-in-out infinite;
  z-index: 1;
  color: var(--t6-ink);
}
.tpl6 .t6-card--back2 .t6-card-inner{ color: var(--t6-ink); }
.tpl6 .t6-card--back2 .t6-card-bar{ border-bottom-color: var(--t6-rule); }
.tpl6 .t6-card--back2 .t6-card-txt{ color: var(--t6-muted); }
.tpl6 .t6-card--back2 .t6-card-row{ color: var(--t6-ink-soft); border-bottom-color: var(--t6-rule); }
.tpl6 .t6-card--back2 .t6-card-row strong{ color: var(--t6-ink); }
.tpl6 .t6-card--back2 .t6-card-foot{ border-top-color: var(--t6-rule); color: var(--t6-muted); }
@keyframes t6-hero-back2 { 0%,100%{transform:rotateY(-8deg) rotateX(5deg) rotateZ(-8deg) translateZ(-60px)} 50%{transform:rotateY(-10deg) rotateX(7deg) rotateZ(-5deg) translateZ(-45px)} }

/* Main magazine cover (front) */
.tpl6 .t6-card--main{
  width: 80%; top: 8%; left: 10%;
  z-index: 5;
  transform: rotateY(-12deg) rotateX(6deg) translateZ(40px);
  animation: t6-hero-main 6s ease-in-out infinite;
  background: var(--t6-paper-2);
  border: 1px solid rgba(255,255,255,.6);
  box-shadow:
    0 36px 96px rgba(0,0,0,.55),
    0 16px 36px rgba(var(--gold-rgb),.18),
    inset 0 1px 0 rgba(255,255,255,.5);
}
.tpl6 .t6-card--main:hover{
  transform: rotateY(-12deg) rotateX(4deg) translateZ(60px);
  box-shadow: 0 44px 116px rgba(0,0,0,.62), 0 18px 44px rgba(var(--gold-rgb),.32), inset 0 1px 0 rgba(255,255,255,.5);
}
@keyframes t6-hero-main { 0%,100%{transform:rotateY(-12deg) rotateX(6deg) translateZ(40px)} 50%{transform:rotateY(-10deg) rotateX(4deg) translateZ(60px)} }

.tpl6 .t6-cover-inner{ padding: 1.6rem; }
.tpl6 .t6-cover-inner .t6-card-bar{
  border-bottom: 1px solid rgba(0,0,0,.08);
  margin-bottom: 1rem;
}
.tpl6 .t6-cover-photo{
  position: relative;
  flex: 1;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 1rem;
  box-shadow: 0 14px 36px rgba(0,0,0,.22);
}
.tpl6 .t6-cover-slide{
  position: absolute; inset: 0;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity .9s var(--t6-ease), transform 1.4s var(--t6-ease);
}
.tpl6 .t6-cover-slide.is-active{ opacity: 1; transform: scale(1); }
.tpl6 .t6-cover-slide.enter-next{ animation: t6-cover-in-right .9s var(--t6-ease); }
.tpl6 .t6-cover-slide.enter-prev{ animation: t6-cover-in-left .9s var(--t6-ease); }
@keyframes t6-cover-in-right { from{opacity:0;transform:translateX(40px) scale(1.06)} to{opacity:1;transform:translateX(0) scale(1)} }
@keyframes t6-cover-in-left { from{opacity:0;transform:translateX(-40px) scale(1.06)} to{opacity:1;transform:translateX(0) scale(1)} }
.tpl6 .t6-cover-slide img{ width:100%; height:100%; object-fit:cover; transition: transform 1.6s var(--t6-ease); }
.tpl6 .t6-card--main:hover .t6-cover-slide.is-active img{ transform: scale(1.06); }
.tpl6 .t6-cover-foot{
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 1rem;
}
.tpl6 .t6-cover-foot small{
  display: block;
  font-family: var(--t6-mono);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--t6-muted);
  margin-bottom: .4rem;
}
.tpl6 .t6-cover-foot strong{
  display: block;
  font-family: var(--t6-seri);
  font-size: 2rem;
  font-weight: 700;
  color: var(--t6-ink);
  line-height: 1.15;
  transition: opacity .35s var(--t6-ease);
}
.tpl6 .t6-cover-num{
  font-family: var(--t6-mono);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--t6-accent);
}
.tpl6 .t6-cover-dots{
  position: absolute;
  left: 1.6rem; right: 1.6rem; bottom: 4.4rem;
  display: flex;
  justify-content: center;
  gap: .8rem;
  z-index: 4;
}
.tpl6 .t6-cover-dots button{
  width: .8rem; height: .8rem;
  border-radius: 50%;
  background: rgba(255,255,255,.5);
  border: none;
  cursor: pointer;
  transition: all .35s var(--t6-ease);
  padding: 0;
}
.tpl6 .t6-cover-dots button.is-active{
  width: 2.4rem;
  border-radius: 9999px;
  background: var(--t6-gold-b);
}

/* Floating glassy chips beside the magazine */
.tpl6 .t6-float{
  position: absolute;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 14px;
  padding: 1.2rem 1.6rem;
  display: inline-flex; align-items: center; gap: 1rem;
  box-shadow: 0 14px 32px -8px rgba(20,33,61,.22), inset 0 1px 0 rgba(255,255,255,.7);
  transition: transform .55s var(--t6-ease), box-shadow .55s var(--t6-ease);
  z-index: 6;
  animation: t6-float-up 5s ease-in-out infinite;
  will-change: transform;
  --mx: 0px; --my: 0px;
  transform: translate3d(var(--mx, 0px), var(--my, 0px), 0);
}
@keyframes t6-float-up { 0%,100%{transform:translate3d(var(--mx),var(--my),0)} 50%{transform:translate3d(var(--mx),calc(var(--my) - 8px),0)} }
.tpl6 .t6-float i{
  width: 3.6rem; height: 3.6rem;
  border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}
.tpl6 .t6-float strong{
  font-family: var(--t6-seri);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--t6-ink);
  line-height: 1;
}
.tpl6 .t6-float small{
  display: block;
  font-family: var(--t6-mono);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--t6-muted);
  margin-top: .3rem;
}
.tpl6 .t6-float:hover{
  box-shadow: 0 22px 44px -8px rgba(20,33,61,.3), inset 0 1px 0 rgba(255,255,255,.7), 0 0 0 1.5px rgba(var(--primary-rgb),.18);
}
.tpl6 .t6-float--1{ top: 6%; right: -6%; animation-delay: 0s; }
.tpl6 .t6-float--1 i{ background: var(--t6-gold); color:var(--white); }
.tpl6 .t6-float--2{ top: 42%; left: -10%; animation-delay: 1.6s; flex-direction: column; align-items: flex-start; padding: 1.2rem 1.4rem; gap: .4rem; }
.tpl6 .t6-float--2 i{ background: var(--t6-primary); color: var(--t6-gold-b); width: 3.4rem; height: 3.4rem; border-radius: 50%; }
.tpl6 .t6-float--3{ bottom: 4%; right: -4%; animation-delay: 2.8s; flex-direction: column; align-items: flex-start; padding: 1.2rem 1.4rem; gap: .4rem; }
.tpl6 .t6-float--3 i{ background: var(--t6-accent); color:var(--white); width: 3.4rem; height: 3.4rem; border-radius: 50%; }

/* Scroll cue */
.tpl6 .t6-scroll-cue{
  display: flex; flex-direction: column; align-items: center; gap: 1.2rem;
  margin-top: 5rem;
  font-family: var(--t6-mono);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(255,255,255,.75);
  text-decoration: none;
  transition: color .3s var(--t6-ease);
}
.tpl6 .t6-scroll-cue:hover{ color: var(--t6-gold-b); }
.tpl6 .t6-scroll-line{
  width: 1.5px;
  height: 4rem;
  background: rgba(255,255,255,.55);
  position: relative;
}
.tpl6 .t6-scroll-line::after{
  content: "";
  position: absolute; left: 50%; top: 0;
  width: .6rem; height: .6rem;
  border-radius: 50%;
  background: var(--t6-gold-b);
  transform: translate(-50%, -.3rem);
  animation: t6-scroll-pulse 1.8s ease-in-out infinite;
}
@keyframes t6-scroll-pulse { 0%,100%{transform:translate(-50%, -.3rem); opacity:1} 50%{transform:translate(-50%, -.9rem); opacity:.6} }

/* ... SECTIONS ... common ... */
.tpl6 .t6-section{
  padding: 6.5rem clamp(1.6rem,2.5vw,3rem);
  position: relative;
}
.tpl6 .t6-section--alt{ background: var(--t6-paper); border-top: 1px solid var(--t6-rule); border-bottom: 1px solid var(--t6-rule); }
.tpl6 .t6-section-head{ position: relative; }

/* ... PULL-QUOTE SIDEBAR ... 3D layered quote card ... */
.tpl6 .t6-pullquote-section{
  padding: 6.5rem clamp(1.6rem,2.5vw,3rem);
  background: var(--t6-paper);
  border-top: 1px solid var(--t6-rule);
  border-bottom: 1px solid var(--t6-rule);
  position: relative;
  overflow: hidden;
}
.tpl6 .t6-pullquote-grid{
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 5rem;
  align-items: center;
  position: relative;
}
.tpl6 .t6-pullquote-side{
  border-left: 3px solid var(--t6-accent);
  padding-left: 2.4rem;
}
.tpl6 .t6-pullquote-side h2{
  font-family: var(--t6-seri);
  font-size: clamp(2.4rem, 3.6vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.16;
  color: var(--t6-ink);
  margin: 0 0 1.4rem;
}
.tpl6 .t6-pullquote-side p{
  font-size: 1.5rem;
  color: var(--t6-ink-soft);
  line-height: 1.75;
  margin: 0 0 2.4rem;
}

/* Right column ... 3D layered pull-quote */
.tpl6 .t6-pullquote{
  position: relative;
  perspective: 1800px;
  transform-style: preserve-3d;
  min-height: 44rem;
  padding: 2rem 2rem 2rem 8rem;
}
.tpl6 .t6-pullquote-mark{
  position: absolute;
  font-family: var(--t6-seri);
  font-weight: 700;
  line-height: .65;
  pointer-events: none;
  user-select: none;
  will-change: transform;
  transition: transform .8s var(--t6-ease), color .8s var(--t6-ease);
}
.tpl6 .t6-pullquote-mark--back{
  font-size: 38rem;
  top: 28%; left: -24%;
  color: rgba(201,168,76,.10);
  z-index: 0;
  transform: translateZ(-220px) rotate(-8deg);
}
.tpl6 .t6-pullquote-mark--mid{
  font-size: 22rem;
  top: 14%; left: -8%;
  color: rgba(201,168,76,.22);
  z-index: 1;
  transform: translateZ(-100px) rotate(-4deg);
}
.tpl6 .t6-pullquote-mark--front{
  font-size: 13rem;
  top: -2rem; left: 6%;
  color: var(--t6-gold);
  z-index: 3;
  transform: translateZ(80px) rotate(-1deg);
  text-shadow: 0 8px 32px rgba(201,168,76,.42);
}
.tpl6 .t6-pullquote:hover .t6-pullquote-mark--back{
  transform: translateZ(-180px) rotate(-12deg);
  color: rgba(201,168,76,.18);
}
.tpl6 .t6-pullquote:hover .t6-pullquote-mark--mid{
  transform: translateZ(-60px) rotate(-6deg);
  color: rgba(201,168,76,.32);
}
.tpl6 .t6-pullquote:hover .t6-pullquote-mark--front{
  transform: translateZ(120px) rotate(-2deg);
}

/* The actual quote card */
.tpl6 .t6-pullquote-card{
  position: relative;
  z-index: 2;
  background: var(--t6-cream);
  border: 1px solid var(--t6-rule);
  border-radius: 16px;
  padding: 4.6rem 4.6rem 4rem;
  transform: translateZ(50px);
  box-shadow:
    0 50px 90px -10px rgba(20,33,61,.22),
    0 16px 32px -10px rgba(20,33,61,.12),
    inset 0 0 0 1px rgba(255,255,255,.4);
  transition: transform .8s var(--t6-ease), box-shadow .8s var(--t6-ease);
}
.tpl6 .t6-pullquote:hover .t6-pullquote-card{
  transform: translateZ(70px) rotate(-.5deg);
  box-shadow:
    0 60px 110px -10px rgba(20,33,61,.28),
    0 22px 40px -10px rgba(20,33,61,.14),
    inset 0 0 0 1px rgba(255,255,255,.5);
}
/* Dashed inner frame for the editorial plate look */
.tpl6 .t6-pullquote-card::before{
  content: "";
  position: absolute;
  top: 1.2rem; left: 1.2rem; right: 1.2rem; bottom: 1.2rem;
  border: 1px dashed var(--t6-rule);
  pointer-events: none;
  border-radius: 10px;
}
/* Gold left rule */
.tpl6 .t6-pullquote-card::after{
  content: "";
  position: absolute;
  left: 2.4rem; top: 2.6rem; bottom: 2.6rem;
  width: 1.5px;
  background: var(--t6-gold);
  pointer-events: none;
}
.tpl6 .t6-pullquote-kicker{
  display: inline-flex; align-items: center; gap: .8rem;
  font-family: var(--t6-mono);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--t6-accent);
  margin-bottom: 2rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--t6-rule);
}
.tpl6 .t6-pullquote-kicker i{ color: var(--t6-gold-deep); }
.tpl6 .t6-pullquote blockquote{
  font-family: var(--t6-seri);
  font-size: clamp(2rem, 2.8vw, 2.6rem);
  line-height: 1.55;
  font-style: italic;
  margin: 0 0 2.4rem;
  font-weight: 500;
  letter-spacing: -.005em;
  color: var(--t6-ink);
  position: relative;
}
.tpl6 .t6-pullquote-cite{
  font-family: var(--t6-mono);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--t6-muted);
  display: inline-flex; align-items: center; gap: 1rem;
}
.tpl6 .t6-pullquote-cite::before{
  content: "";
  width: 2.4rem;
  height: 1.5px;
  background: var(--t6-gold);
  flex-shrink: 0;
}

/* ... FEATURED EDITORIAL ... 2/3 + 1/3 ... */
.tpl6 .t6-feature-spread{
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 4.6rem;
  align-items: start;
}
.tpl6 .t6-feature-main{ min-width: 0; }
.tpl6 .t6-feature-photo{
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 28px 60px rgba(20,33,61,.20), 0 8px 20px rgba(20,33,61,.08);
  margin-bottom: 2.6rem;
  transition: transform .6s var(--t6-ease), box-shadow .6s var(--t6-ease);
}
.tpl6 .t6-feature-photo:hover{
  transform: translateY(-6px);
  box-shadow: 0 36px 78px rgba(20,33,61,.26), 0 12px 28px rgba(var(--primary-rgb),.18);
}
.tpl6 .t6-feature-photo img{
  width: 100%; aspect-ratio: 16/10; object-fit: cover;
  transition: transform 1.4s var(--t6-ease);
}
.tpl6 .t6-feature-photo:hover img{ transform: scale(1.06); }
.tpl6 .t6-feature-credit{
  position: absolute; right: 1rem; bottom: 1rem;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: .5rem 1rem;
  border-radius: 9999px;
  font-family: var(--t6-mono);
  font-size: 1rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--t6-ink);
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 700;
  box-shadow: 0 6px 16px rgba(20,33,61,.16);
}
.tpl6 .t6-feature-kicker{
  font-family: var(--t6-mono);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--t6-accent);
  margin-bottom: 1.2rem;
  display: inline-flex; align-items: center; gap: 1rem;
}
.tpl6 .t6-feature-kicker::before{
  content: ""; width: 2.4rem; height: 2px; background: var(--t6-accent);
}
.tpl6 .t6-feature-title{
  font-family: var(--t6-seri);
  font-size: clamp(2.4rem, 3.6vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -.022em;
  line-height: 1.16;
  color: var(--t6-ink);
  margin: 0 0 1.6rem;
}
.tpl6 .t6-feature-body{
  font-family: var(--t6-seri);
  font-size: 1.65rem;
  line-height: 1.78;
  color: var(--t6-ink);
  columns: 2;
  column-gap: 3rem;
  column-rule: 1px solid var(--t6-rule);
  text-align: justify;
}
.tpl6 .t6-feature-body p{ margin: 0 0 1.4rem; }
.tpl6 .t6-dropcap::first-letter{
  font-family: var(--t6-seri);
  font-size: 4.6em;
  float: left;
  line-height: .85;
  padding: .08em .14em .1em 0;
  font-weight: 700;
  color: var(--t6-navy);
}
.tpl6 .t6-feature-side{
  border-top: 4px double var(--t6-ink);
  border-bottom: 1px solid var(--t6-rule);
  padding: 2.6rem;
  background: var(--t6-paper-2);
  border-radius: 12px;
  box-shadow: var(--t6-shadow-card);
  transition: transform .5s var(--t6-ease), box-shadow .5s var(--t6-ease);
}
.tpl6 .t6-feature-side:hover{
  transform: translateY(-6px);
  box-shadow: var(--t6-shadow-lift);
}
.tpl6 .t6-feature-side h3{
  font-family: var(--t6-mono);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--t6-ink);
  margin: 0 0 1.6rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--t6-rule);
}
.tpl6 .t6-feature-side-meta{ list-style: none; padding: 0; margin: 0 0 2rem; }
.tpl6 .t6-feature-side-meta li{
  display: flex; justify-content: space-between;
  padding: 1rem 0;
  border-bottom: 1px dashed var(--t6-rule);
  font-size: 1.4rem;
  color: var(--t6-ink-soft);
  transition: padding .35s var(--t6-ease), color .35s;
}
.tpl6 .t6-feature-side-meta li:hover{ padding-left: .8rem; color: var(--t6-navy); }
.tpl6 .t6-feature-side-meta li:last-child{ border-bottom: none; }
.tpl6 .t6-feature-side-meta strong{
  color: var(--t6-ink);
  font-weight: 700;
  font-family: var(--t6-seri);
  font-size: 1.6rem;
}
.tpl6 .t6-feature-side-quote{
  background: var(--t6-cream);
  border: 1px solid var(--t6-rule);
  padding: 2rem;
  font-family: var(--t6-seri);
  font-style: italic;
  font-size: 1.5rem;
  line-height: 1.5;
  color: var(--t6-ink);
  margin: 0 0 2rem;
  position: relative;
  border-radius: 4px;
}
.tpl6 .t6-feature-side-quote::before{
  content: "\201C";
  position: absolute;
  top: -.6rem; left: .8rem;
  font-size: 4rem; line-height: 1;
  color: var(--t6-gold);
  font-family: var(--t6-seri);
}
.tpl6 .t6-feature-side-cta{
  display: inline-flex; align-items: center; gap: .6rem;
  padding: 1.2rem 2rem;
  font-family: var(--t6-sans);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: .04em;
  background: var(--t6-ink);
  color:var(--white);
  border: 1.5px solid var(--t6-ink);
  border-radius: 9999px;
  transition: all .35s var(--t6-ease);
}
.tpl6 .t6-feature-side-cta:hover{
  background: var(--t6-navy-deep);
  border-color: var(--t6-navy-deep);
  transform: translateY(-2px);
}

/* ... THREE-COLUMN MAGAZINE SPREAD ... */
.tpl6 .t6-spread-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4rem;
}
.tpl6 .t6-spread-story{
  position: relative;
  transition: transform .5s var(--t6-ease);
}
.tpl6 .t6-spread-story:hover{ transform: translateY(-8px); }
.tpl6 .t6-spread-story + .t6-spread-story::before{
  content: "";
  position: absolute;
  left: -2rem; top: 2rem; bottom: 2rem;
  width: 1px;
  background: var(--t6-rule);
}
.tpl6 .t6-spread-num{
  font-family: var(--t6-seri);
  font-size: 4.4rem;
  font-weight: 700;
  line-height: 1;
  color: var(--t6-gold);
  margin-bottom: 1.2rem;
  font-feature-settings: "lnum";
  transition: transform .5s var(--t6-ease);
}
.tpl6 .t6-spread-story:hover .t6-spread-num{ transform: translateX(8px); }
.tpl6 .t6-spread-tag{
  font-family: var(--t6-mono);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--t6-accent);
  margin-bottom: 1rem;
  display: inline-block;
}
.tpl6 .t6-spread-story h3{
  font-family: var(--t6-seri);
  font-size: 2.1rem;
  font-weight: 700;
  letter-spacing: -.012em;
  line-height: 1.2;
  color: var(--t6-ink);
  margin: 0 0 1.2rem;
}
.tpl6 .t6-spread-story p{
  font-size: 1.45rem;
  color: var(--t6-ink-soft);
  line-height: 1.7;
  margin: 0 0 1.6rem;
}
.tpl6 .t6-spread-link{
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--t6-sans);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--t6-navy);
  border-bottom: 1.5px solid var(--t6-navy);
  padding-bottom: .3rem;
  transition: gap .35s var(--t6-ease), color .35s, border-color .35s;
}
.tpl6 .t6-spread-story:hover .t6-spread-link{
  gap: 1rem;
  color: var(--t6-accent);
  border-color: var(--t6-accent);
}

/* ... BENTO FEATURES (programmes / showcase) ... */
.tpl6 .t6-features{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}
.tpl6 .t6-feature{
  position: relative;
  background: var(--t6-paper-2);
  border-radius: 18px;
  padding: 3rem 2.6rem;
  border: 1px solid var(--t6-rule);
  transition: all .5s cubic-bezier(.4,0,.2,1);
  overflow: hidden;
  isolation: isolate;
  text-decoration: none;
  color: inherit;
  display: flex; flex-direction: column;
}
.tpl6 .t6-feature::before{
  content: '';
  position: absolute; inset: 0; z-index: -2;
background: var(--t6-feat-grad, var(--t6-primary));
  opacity: 0; transition: opacity .5s;
}
.tpl6 .t6-feature::after{
  content: '';
  position: absolute;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: var(--t6-feat-soft2, rgba(var(--primary-rgb), .12));
  top: -60px; right: -60px;
  z-index: -1;
  opacity: 1;
  transition: transform .55s var(--t6-ease), opacity .55s;
}
.tpl6 .t6-feature:hover{
  transform: translateY(-8px);
  border-color: transparent;
  box-shadow: 0 22px 48px rgba(0,0,0,.16);
  color:var(--white);
}
.tpl6 .t6-feature:hover::before{ opacity: 1; }
.tpl6 .t6-feature:hover::after{ transform: scale(2.4); opacity: 1; }
.tpl6 .t6-feature:hover .t6-feature-title,
.tpl6 .t6-feature:hover .t6-feature-desc,
.tpl6 .t6-feature:hover .t6-feature-meta{ color:var(--white); }
.tpl6 .t6-feature:hover .t6-feature-icon{ background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.4); }
.tpl6 .t6-feature:hover .t6-feature-icon i{ color:var(--white); }
.tpl6 .t6-feature:hover .t6-feature-link{ color:var(--white); gap: 1rem; }
.tpl6 .t6-feature-tag{
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .35rem 1rem;
  font-family: var(--t6-mono);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--t6-feat-color, var(--t6-primary));
  background: var(--t6-feat-soft, var(--t6-primary-soft));
  border: 1px solid var(--t6-feat-line, var(--t6-primary-line));
  border-radius: 9999px;
  margin-bottom: 1.4rem;
  align-self: flex-start;
  transition: all .4s var(--t6-ease);
}
.tpl6 .t6-feature:hover .t6-feature-tag{
  color:var(--white);
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.35);
}

.tpl6 .t6-feature-icon{
  width: 5.8rem; height: 5.8rem;
  border-radius: 18px;
  background: var(--t6-feat-soft, var(--t6-primary-soft));
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.6rem;
  border: 1px solid var(--t6-feat-line, var(--t6-primary-line));
  transition: all .5s var(--t6-ease);
}
.tpl6 .t6-feature-icon i{
  font-size: 2.4rem;
  color: var(--t6-feat-color, var(--t6-primary));
  transition: all .5s var(--t6-ease);
}
.tpl6 .t6-feature-title{
  font-family: var(--t6-seri);
  font-size: 2rem;
  font-weight: 700;
  color: var(--t6-ink);
  letter-spacing: -.012em;
  margin: 0 0 .8rem;
  transition: color .5s;
  line-height: 1.18;
}
.tpl6 .t6-feature-desc{
  font-size: 1.4rem;
  color: var(--t6-ink-soft);
  line-height: 1.7;
  margin: 0 0 1.6rem;
  transition: color .5s;
  flex: 1;
}
.tpl6 .t6-feature-meta{
  display: flex; gap: 1.6rem;
  font-family: var(--t6-mono);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--t6-muted);
  flex-wrap: wrap;
  padding: 1.2rem 0;
  border-top: 1px solid var(--t6-rule);
  margin-bottom: 1.4rem;
  transition: color .5s, border-color .5s;
}
.tpl6 .t6-feature:hover .t6-feature-meta{ border-top-color: rgba(255,255,255,.18); }
.tpl6 .t6-feature-meta span{ display: inline-flex; align-items: center; gap: .5rem; }
.tpl6 .t6-feature-meta i{ color: var(--t6-feat-color, var(--t6-primary)); transition: color .5s; }
.tpl6 .t6-feature:hover .t6-feature-meta i{ color:var(--white); }
.tpl6 .t6-feature-link{
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--t6-sans);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--t6-feat-color, var(--t6-primary));
  transition: gap .35s var(--t6-ease), color .35s;
  align-self: flex-start;
}
.tpl6 .t6-feature-link i{ transition: transform .35s var(--t6-ease); }
.tpl6 .t6-feature:hover .t6-feature-link i{ transform: translateX(4px); }

/* per-feature palettes (5 programmes) */
.tpl6 .t6-feature--1{ --t6-feat-color:var(--t6-primary); --t6-feat-soft:var(--t6-primary-soft); --t6-feat-line:var(--t6-primary-line); --t6-feat-grad:var(--t6-primary); --t6-feat-soft2:rgba(var(--primary-rgb), .25); }
.tpl6 .t6-feature--2{ --t6-feat-color:var(--brand-navy); --t6-feat-soft:var(--navy-soft); --t6-feat-line:var(--navy-border); --t6-feat-grad:var(--brand-navy); --t6-feat-soft2:rgba(10,37,64,.25); }
.tpl6 .t6-feature--3{ --t6-feat-color:var(--t6-accent); --t6-feat-soft:var(--amber-soft); --t6-feat-line:var(--amber-line); --t6-feat-grad:var(--accent-dark); --t6-feat-soft2:rgba(var(--accent-rgb), .25); }
.tpl6 .t6-feature--4{ --t6-feat-color:var(--gold); --t6-feat-soft:var(--gold-pale); --t6-feat-line:var(--gold-soft); --t6-feat-grad:var(--t6-gold-darker); --t6-feat-soft2:rgba(var(--gold-rgb), .28); }
.tpl6 .t6-feature--5{ --t6-feat-color:var(--t6-primary); --t6-feat-soft:var(--t6-primary-soft); --t6-feat-line:var(--t6-primary-line); --t6-feat-grad:var(--t6-primary); --t6-feat-soft2:rgba(var(--primary-rgb), .28); }
.tpl6 .t6-feature--6{ --t6-feat-color:var(--brand-navy); --t6-feat-soft:var(--navy-soft); --t6-feat-line:var(--navy-border); --t6-feat-grad:var(--brand-navy); --t6-feat-soft2:rgba(10,37,64,.28); }
.tpl6 .t6-feature--7{ --t6-feat-color:var(--t6-accent); --t6-feat-soft:var(--amber-soft); --t6-feat-line:var(--amber-line); --t6-feat-grad:var(--accent-dark); --t6-feat-soft2:rgba(var(--accent-rgb), .28); }
.tpl6 .t6-feature--8{ --t6-feat-color:var(--t6-primary); --t6-feat-soft:var(--t6-primary-soft); --t6-feat-line:var(--t6-primary-line); --t6-feat-grad:var(--t6-primary); --t6-feat-soft2:rgba(var(--primary-rgb), .28); }

/* T1-style "wide" feature cell (spans 2 cols) */
.tpl6 .t6-feature--wide{ grid-column: span 2; }
.tpl6 .t6-feature--wide .t6-feature-title{ font-size: 2.4rem; }
.tpl6 .t6-feature--wide .t6-feature-desc{ font-size: 1.5rem; }

/* Academic Excellence — center the 3 showcase cards (was 4-col grid leaving an empty column) */
.tpl6 #t6-showcase .t6-features{
  grid-template-columns: repeat(3, minmax(0, 1fr));
  justify-content: center;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 1100px){
  .tpl6 #t6-showcase .t6-features{ grid-template-columns: 1fr; max-width: none; }
}

/* ... BENTO SCHOOL LEVELS ... */
.tpl6 .t6-levels{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.4rem;
}
.tpl6 .t6-level{
  position: relative;
  background: var(--t6-paper-2);
  border-radius: 20px;
  padding: 3.4rem 2.6rem 3rem;
  text-align: center;
  transition: all .5s cubic-bezier(.4,0,.2,1);
  border: 1px solid var(--t6-rule);
  box-shadow: 0 4px 16px rgba(0,0,0,.04);
  overflow: hidden;
  isolation: isolate;
  text-decoration: none;
  color: inherit;
  display: flex; flex-direction: column;
}
.tpl6 .t6-level::before{
  content: '';
  position: absolute; inset: 0; z-index: -2;
  background: var(--t6-level-grad, var(--t6-primary));
  opacity: 0; transition: opacity .5s;
}
.tpl6 .t6-level::after{
  content: '';
  position: absolute;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: var(--t6-level-soft2, rgba(var(--primary-rgb), .12));
  bottom: -80px; right: -80px;
  z-index: -1;
  opacity: 1;
  transition: transform .6s var(--t6-ease);
}
.tpl6 .t6-level:hover{
  transform: translateY(-12px);
  border-color: transparent;
  box-shadow: 0 26px 56px rgba(0,0,0,.16);
  color:var(--white);
}
.tpl6 .t6-level:hover::before{ opacity: 1; }
.tpl6 .t6-level:hover::after{ transform: scale(2.4); }
.tpl6 .t6-level:hover .t6-level-num,
.tpl6 .t6-level:hover .t6-level-name,
.tpl6 .t6-level:hover .t6-level-desc{ color:var(--white); }
.tpl6 .t6-level:hover .t6-level-meta{ color: rgba(255,255,255,.85); }
.tpl6 .t6-level-meta i{ color: rgba(255,255,255,.85); }
.tpl6 .t6-level:hover .t6-level-meta i{ color:var(--white); }
.tpl6 .t6-level:hover .t6-level-icon{ background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.4); }
.tpl6 .t6-level:hover .t6-level-icon i{ color:var(--white); }
.tpl6 .t6-level:hover .t6-level-cta{ color:var(--white); border-color: rgba(255,255,255,.45); }

.tpl6 .t6-level-icon{
  width: 7.6rem; height: 7.6rem;
  border-radius: 24px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.8rem;
  background: var(--t6-level-soft, var(--t6-primary-soft));
  border: 1px solid var(--t6-level-line, var(--t6-primary-line));
  transition: all .5s var(--t6-ease);
}
.tpl6 .t6-level-icon i{
  font-size: 3rem;
  color: var(--t6-level-color, var(--t6-primary));
  transition: all .5s var(--t6-ease);
}
.tpl6 .t6-level-num{
  display: inline-block;
  font-family: var(--t6-mono);
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: .22em;
  color: var(--t6-level-color, var(--t6-primary));
  margin-bottom: 1rem;
  transition: color .5s;
}
.tpl6 .t6-level-name{
  font-family: var(--t6-seri);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--t6-ink);
  letter-spacing: -.012em;
  line-height: 1.2;
  margin: 0 0 1rem;
  transition: color .5s;
}
.tpl6 .t6-level-desc{
  font-size: 1.4rem;
  color: var(--t6-ink-soft);
  line-height: 1.7;
  margin: 0 0 1.6rem;
  transition: color .5s;
  flex: 1;
}
.tpl6 .t6-level-meta{
  display: flex; gap: 1.6rem; justify-content: center;
  font-family: var(--t6-mono);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--t6-muted);
  flex-wrap: wrap;
  margin-bottom: 1.6rem;
  padding-bottom: 1.6rem;
  border-bottom: 1px dashed var(--t6-rule);
  transition: color .5s, border-color .5s;
}
.tpl6 .t6-level:hover .t6-level-meta{ border-bottom-color: rgba(255,255,255,.2); }
.tpl6 .t6-level-meta span{ display: inline-flex; align-items: center; gap: .5rem; }
.tpl6 .t6-level-meta i{ color: var(--t6-level-color, var(--t6-primary)); transition: color .5s; }
.tpl6 .t6-level-cta{
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--t6-sans);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--t6-level-color, var(--t6-primary));
  padding-bottom: .3rem;
  border-bottom: 1.5px solid var(--t6-level-color, var(--t6-primary));
  align-self: center;
  transition: gap .35s var(--t6-ease), color .35s, border-color .35s;
}
.tpl6 .t6-level:hover .t6-level-cta{ gap: 1rem; }

/* per-level palettes */
.tpl6 .t6-level[data-level="nursery"]   { --t6-level-color:var(--accent); --t6-level-soft:var(--amber-soft); --t6-level-line:var(--amber-line); --t6-level-grad:var(--accent-dark); --t6-level-soft2:rgba(var(--accent-rgb), .25); }
.tpl6 .t6-level[data-level="primary"]   { --t6-level-color:var(--primary); --t6-level-soft:var(--t6-primary-soft); --t6-level-line:var(--t6-primary-line); --t6-level-grad:var(--t6-primary); --t6-level-soft2:rgba(var(--primary-rgb), .25); }
.tpl6 .t6-level[data-level="secondary"] { --t6-level-color:var(--brand-navy); --t6-level-soft:var(--navy-soft); --t6-level-line:var(--navy-border); --t6-level-grad:var(--brand-navy); --t6-level-soft2:rgba(10,37,64,.25); }

/* ... PROGRAMMES ... colorful soft mesh background ... */
.tpl6 .t6-section--programs{
padding: 6.5rem clamp(1.6rem,2.5vw,3rem);
  position: relative;
  overflow: hidden;
  background: var(--t6-paper);
  border-top: 1px solid var(--t6-rule);
  border-bottom: 1px solid var(--t6-rule);
}
.tpl6 .t6-section--programs::before{
  content: '';
  position: absolute;
  top: 14%; right: 8%;
  width: 18rem; height: 18rem;
  border-radius: 50%;
  background: rgba(var(--primary-rgb), .14);
  filter: blur(40px);
  pointer-events: none;
}
.tpl6 .t6-section--programs::after{
  content: '';
  position: absolute;
  bottom: 16%; left: 6%;
  width: 22rem; height: 22rem;
  border-radius: 50%;
  background: rgba(var(--accent-rgb), .14);
  filter: blur(40px);
  pointer-events: none;
}

/* ... GLASSMORPHIC STATS BAND ... */
.tpl6 .t6-stats{
  position: relative;
  padding: 6.5rem clamp(1.6rem,2.5vw,3rem) 6.5rem clamp(1.6rem,2.5vw,3rem);
  background: var(--t6-navy-deep);
  color:var(--white);
  overflow: hidden;
  isolation: isolate;
}
.tpl6 .t6-stats::before{
  content: '';
  position: absolute;
  top: -1px; left: 0; right: 0;
  height: 60px;
  background: var(--t6-cream);
  clip-path: polygon(0 100%, 100% 100%, 100% 35%, 0 100%);
  z-index: 2;
  pointer-events: none;
}
.tpl6 .t6-section-head{ color:var(--white); }
.tpl6 .t6-stats .t6-section-title{ color:var(--white); }
.tpl6 .t6-stats .t6-section-title em{ color: var(--t6-gold-b); }
.tpl6 .t6-stats .t6-section-sub{ color: rgba(255,255,255,.78); }

.tpl6 .t6-stats-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.4rem;
  position: relative;
  z-index: 1;
}
.tpl6 .t6-stat{
  position: relative;
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 18px;
  padding: 3.4rem 2.6rem;
  text-align: center;
  transition: all .5s var(--t6-ease);
  overflow: hidden;
  isolation: isolate;
}
.tpl6 .t6-stat::before{
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--stat-color, var(--t6-gold-b));
  z-index: 1;
}
.tpl6 .t6-stat::after{
  content: '';
  position: absolute; top: -50px; right: -50px;
  width: 160px; height: 160px;
  border-radius: 50%;
  background: var(--stat-color, var(--t6-gold-b));
  opacity: .18;
  z-index: -1;
  transition: transform .6s var(--t6-ease), opacity .6s;
}
.tpl6 .t6-stat:hover{ transform: translateY(-8px); border-color: rgba(255,255,255,.35); }
.tpl6 .t6-stat:hover::after{ transform: scale(1.5); opacity: .28; }
.tpl6 .t6-stat-icon{
  width: 6.4rem; height: 6.4rem;
  border-radius: 18px;
  background: rgba(255,255,255,.10);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.8rem;
  border: 1px solid rgba(255,255,255,.18);
  transition: transform .5s var(--t6-ease);
}
.tpl6 .t6-stat:hover .t6-stat-icon{ transform: scale(1.1) rotate(-8deg); }
.tpl6 .t6-stat-icon i{ font-size: 2.6rem; color: var(--stat-color, var(--t6-gold-b)); }
.tpl6 .t6-stat-num{
  font-family: var(--t6-seri);
  font-size: clamp(4rem, 5.6vw, 5.6rem);
  font-weight: 700;
  line-height: 1;
  color:var(--white);
  letter-spacing: -.02em;
  margin-bottom: .8rem;
  display: inline-flex;
  align-items: baseline;
  gap: .3rem;
  font-feature-settings: "lnum";
}
.tpl6 .t6-stat-num .suffix{
  font-size: .45em;
  color: var(--stat-color, var(--t6-gold-b));
}
.tpl6 .t6-stat-label{
  font-family: var(--t6-mono);
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--t6-gold-b);
  margin-bottom: 1rem;
}
.tpl6 .t6-stat-desc{
  font-size: 1.35rem;
  color: rgba(255,255,255,.78);
  line-height: 1.65;
  margin: 0;
}

/* ... CORE VALUES ... Hexagonal ... */
.tpl6 .t6-values{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.4rem;
}
.tpl6 .t6-value{
  position: relative;
  text-align: center;
  padding: 3rem 2rem 2.4rem;
  border-radius: 20px;
  background: var(--t6-paper-2);
  border: 1px solid var(--t6-rule);
  transition: all .5s var(--t6-ease);
  overflow: hidden;
}
.tpl6 .t6-value:hover{
  transform: translateY(-8px);
  box-shadow: 0 24px 50px rgba(20,33,61,.12);
  border-color: var(--t6-val-color, var(--t6-primary));
}
.tpl6 .t6-value-num{
  position: absolute;
  top: 1.4rem; right: 1.6rem;
  font-family: var(--t6-mono);
  font-size: 1.2rem; font-weight: 800;
  color: var(--t6-muted);
  letter-spacing: .14em;
}
.tpl6 .t6-value-hex{
  width: 7.4rem; height: 7.4rem;
  margin: 0 auto 1.8rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--t6-val-color, var(--t6-primary));
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  box-shadow: 0 12px 28px rgba(var(--primary-rgb), .22);
  transition: transform .5s var(--t6-ease);
}
.tpl6 .t6-value:hover .t6-value-hex{ transform: rotate(8deg) scale(1.06); }
.tpl6 .t6-value-hex i{ font-size: 2.4rem; color:var(--white); }
.tpl6 .t6-value-name{
  font-family: var(--t6-seri);
  font-size: 2rem;
  font-weight: 700;
  color: var(--t6-ink);
  margin: 0 0 .8rem;
}
.tpl6 .t6-value-desc{
  font-size: 1.35rem;
  color: var(--t6-ink-soft);
  line-height: 1.65;
  margin: 0;
}
.tpl6 .t6-value[data-val="1"] { --t6-val-color:var(--t6-primary); --t6-val-color2:var(--t6-primary-2); }
.tpl6 .t6-value[data-val="2"] { --t6-val-color:var(--accent); --t6-val-color2:var(--accent-dark); }
.tpl6 .t6-value[data-val="3"] { --t6-val-color:#60a5fa; --t6-val-color2:#1e40af; }
.tpl6 .t6-value[data-val="4"] { --t6-val-color:#c084fc; --t6-val-color2:#6d28d9; }
.tpl6 .t6-value[data-val="5"] { --t6-val-color:#f87171; --t6-val-color2:#b91c1c; }
.tpl6 .t6-value[data-val="6"] { --t6-val-color:var(--t6-primary-2); --t6-val-color2:var(--t6-navy-deep); }

/* ... NEWS ... Bento editorial cards ... */
.tpl6 .t6-news-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.4rem;
}
.tpl6 .t6-news-card{
  position: relative;
  background: var(--t6-paper-2);
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--t6-rule);
  text-decoration: none;
  color: inherit;
  transition: all .5s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column;
  isolation: isolate;
}
.tpl6 .t6-news-card:hover{
  transform: translateY(-10px);
  border-color: transparent;
  box-shadow: 0 26px 60px rgba(0,0,0,.14);
}
.tpl6 .t6-news-card .t6-news-img{
  position: relative;
  aspect-ratio: 16/10;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.tpl6 .t6-news-card .t6-news-img::after{
  content: '';
  position: absolute; inset: 0;
  background: rgba(20,33,61,.40);
  transition: opacity .4s var(--t6-ease);
}
.tpl6 .t6-news-card:hover .t6-news-img::after{ opacity: .8; }
.tpl6 .t6-news-card .t6-news-img{ transition: background-size .6s var(--t6-ease); }
.tpl6 .t6-news-card:hover .t6-news-img{ background-size: 110% auto; }
.tpl6 .t6-news-date{
  position: absolute;
  top: 1.6rem; left: 1.6rem;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 1.2rem 1.4rem;
  border-radius: 14px;
  z-index: 2;
  text-align: center;
  box-shadow: 0 6px 16px rgba(20,33,61,.18);
}
.tpl6 .t6-news-date strong{
  display: block;
  font-family: var(--t6-seri);
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1;
  color: var(--t6-ink);
  letter-spacing: -.02em;
}
.tpl6 .t6-news-date span{
  display: block;
  font-family: var(--t6-mono);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--t6-accent);
  margin-top: .4rem;
}
.tpl6 .t6-news-card .t6-news-body{
  padding: 2.6rem 2.6rem 2.8rem;
  flex: 1;
  display: flex; flex-direction: column;
}
.tpl6 .t6-news-tag{
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .35rem 1rem;
  font-family: var(--t6-mono);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--t6-accent);
  background: var(--t6-primary-soft);
  border: 1px solid var(--t6-primary-line);
  border-radius: 9999px;
  align-self: flex-start;
  margin-bottom: 1.2rem;
}
.tpl6 .t6-news-card .t6-news-title{
  font-family: var(--t6-seri);
  font-size: 2rem;
  font-weight: 700;
  color: var(--t6-ink);
  letter-spacing: -.012em;
  line-height: 1.2;
  margin: 0 0 1rem;
  transition: color .35s var(--t6-ease);
}
.tpl6 .t6-news-card:hover .t6-news-title{ color: var(--t6-navy); }
.tpl6 .t6-news-card .t6-news-excerpt{
  font-size: 1.4rem;
  color: var(--t6-ink-soft);
  line-height: 1.7;
  margin: 0 0 1.6rem;
  flex: 1;
}
.tpl6 .t6-news-card .t6-news-link{
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--t6-sans);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--t6-primary);
  transition: gap .35s var(--t6-ease);
  align-self: flex-start;
}
.tpl6 .t6-news-card:hover .t6-news-link{ gap: 1rem; color: var(--t6-accent); }

/* ... LETTER ... */
.tpl6 .t6-letter-section{ background: var(--t6-paper); border-top: 1px solid var(--t6-rule); border-bottom: 1px solid var(--t6-rule); }
.tpl6 .t6-letter{
  max-width: 920px;
  margin: 0 auto;
  background: var(--t6-cream);
  border: 1px solid var(--t6-rule);
  padding: 5rem 6rem 4.4rem;
  position: relative;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1' height='72'><line x1='0' y1='36' x2='1' y2='36' stroke='rgba(20,33,61,0.06)' stroke-width='1.5'/></svg>");
  background-position: 5rem 0;
  background-repeat: repeat-y;
  border-radius: 12px;
  box-shadow: var(--t6-shadow-card);
  transition: transform .5s var(--t6-ease), box-shadow .5s var(--t6-ease);
}
.tpl6 .t6-letter:hover{ transform: translateY(-6px); box-shadow: var(--t6-shadow-lift); }
.tpl6 .t6-letter::before{
  content: "";
  position: absolute;
  left: 5rem; top: 0; bottom: 0;
  width: 1.5px;
  background: var(--t6-accent);
}
.tpl6 .t6-letter-kicker{
  font-family: var(--t6-mono);
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--t6-accent);
  margin-bottom: 1.2rem;
}
.tpl6 .t6-letter-dear{
  font-family: var(--t6-seri);
  font-size: 2.4rem;
  font-style: italic;
  color: var(--t6-ink);
  margin: 0 0 1.6rem;
}
.tpl6 .t6-letter-body{
  font-family: var(--t6-seri);
  font-size: 1.7rem;
  line-height: 1.78;
  color: var(--t6-ink);
  margin: 0 0 2.6rem;
  font-style: italic;
}
.tpl6 .t6-letter-sign{
  font-family: var(--t6-seri);
  font-size: 1.8rem;
  font-style: italic;
  color: var(--t6-ink-soft);
  margin: 0 0 2rem;
}
.tpl6 .t6-letter-author{
  display: flex; align-items: center; gap: 1.4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--t6-rule);
}
.tpl6 .t6-letter-avatar{
  width: 5.4rem; height: 5.4rem;
  border-radius: 50%;
  background: var(--t6-primary);
  color: var(--t6-gold-b);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--t6-seri);
  font-size: 2.2rem;
  font-weight: 700;
  flex-shrink: 0;
  box-shadow: 0 10px 24px rgba(var(--primary-rgb), .25);
}
.tpl6 .t6-letter-author-meta strong{
  display: block;
  font-family: var(--t6-seri);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--t6-ink);
}
.tpl6 .t6-letter-author-meta span{
  display: block;
  font-family: var(--t6-mono);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--t6-muted);
  margin-top: .4rem;
}

/* ... CTA ... */
.tpl6 .t6-cta{
  padding: 6.5rem clamp(1.6rem,2.5vw,3rem);
  background: var(--t6-cream);
}
.tpl6 .t6-cta-inner{
  background: var(--t6-navy);
  color:var(--white);
  border-radius: 20px;
  padding: 6rem;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 5rem;
  align-items: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 30px 80px -20px rgba(20,33,61,.32);
}
.tpl6 .t6-cta-inner::before{
  content: "";
  position: absolute; inset: 1rem;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 14px;
  pointer-events: none;
}
.tpl6 .t6-cta-inner::after{
  content: "";
  position: absolute;
  top: -6rem; right: -6rem;
  width: 22rem; height: 22rem;
  background: rgba(var(--gold-rgb), .40);
  filter: blur(40px);
  border-radius: 50%;
  pointer-events: none;
}
.tpl6 .t6-cta-text h2{
  font-family: var(--t6-seri);
  font-size: clamp(2.6rem, 3.8vw, 3.6rem);
  font-weight: 700;
  letter-spacing: -.022em;
  line-height: 1.12;
  margin: 0 0 1.4rem;
  position: relative;
  color: var(--white);
}
.tpl6 .t6-cta-text h2 em{
  font-style: italic;
  color: var(--t6-gold-b);
}
.tpl6 .t6-cta-text p{
  font-size: 1.55rem;
  color: var(--white);
  line-height: 1.7;
  margin: 0 0 2rem;
  max-width: 56rem;
  position: relative;
}
.tpl6 .t6-cta-stats{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,.18);
  position: relative;
}
.tpl6 .t6-cta-stat strong{
  display: block;
  font-family: var(--t6-seri);
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--t6-gold-b);
  line-height: 1;
  margin-bottom: .6rem;
}
.tpl6 .t6-cta-stat span{
  display: block;
  font-family: var(--t6-mono);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--white);
}
.tpl6 .t6-cta-form{
  background: var(--t6-cream);
  color: var(--t6-ink);
  padding: 3rem;
  border-radius: 14px;
  position: relative;
  box-shadow: 0 18px 40px -10px rgba(0,0,0,.25);
}
.tpl6 .t6-cta-form h3{
  font-family: var(--t6-seri);
  font-size: 2.1rem;
  font-weight: 700;
  color: var(--t6-ink);
  margin: 0 0 2rem;
  display: flex; align-items: center; gap: .8rem;
}
.tpl6 .t6-cta-form h3 i{ color: var(--t6-accent); }
.tpl6 .t6-cta-input{
  width: 100%;
  padding: 1.3rem 1.6rem;
  border-radius: 10px;
  border: 1.5px solid var(--t6-rule);
  background: var(--t6-paper-2);
  font-family: var(--t6-sans);
  font-size: 1.4rem;
  color: var(--t6-ink);
  margin-bottom: 1.2rem;
  transition: border-color .3s, box-shadow .3s;
}
.tpl6 .t6-cta-input:focus{
  outline: none;
  border-color: var(--t6-accent);
  box-shadow: 0 0 0 3px var(--t6-accent-soft);
}
.tpl6 .t6-cta-submit{
  width: 100%;
  padding: 1.4rem 1.6rem;
  border-radius: 10px;
  border: none;
  background: var(--t6-gold);
  color: var(--t6-ink);
  font-family: var(--t6-sans);
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: .04em;
  cursor: pointer;
  transition: .3s var(--t6-ease);
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  box-shadow: 0 10px 24px rgba(var(--gold-rgb), .35);
}
.tpl6 .t6-cta-submit:hover{
  background: var(--t6-navy-deep);
  color: var(--t6-gold-b);
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(var(--primary-rgb), .42);
}
.tpl6 .t6-cta-foot{
  font-size: 1.2rem;
  color: var(--t6-muted);
  margin-top: 1.2rem;
  display: flex; align-items: center; gap: .6rem;
  justify-content: center;
}
.tpl6 .t6-cta-foot i{ color: var(--t6-accent); }

/* ... REDUCED MOTION ... */
@media (prefers-reduced-motion: reduce){
  .tpl6 .t6-reveal,
  .tpl6 .t6-reveal--3d-l,
  .tpl6 .t6-reveal--3d-r{ opacity: 1 !important; transform: none !important; }
  .tpl6 *, .tpl6 *::before, .tpl6 *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ... RESPONSIVE ... */
@media (max-width: 1100px){
  .tpl6 .t6-hero-grid,
  .tpl6 .t6-pullquote-grid,
  .tpl6 .t6-feature-spread,
  .tpl6 .t6-values,
  .tpl6 .t6-levels,
  .tpl6 .t6-features,
  .tpl6 .t6-news-grid{ grid-template-columns: 1fr; gap: 4rem; }
  .tpl6 .t6-features{ gap: 2rem; }
  .tpl6 .t6-feature--wide{ grid-column: span 1; }
  .tpl6 .t6-stats-grid{ grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
  .tpl6 .t6-stat{ padding: 2.4rem 1.8rem; }
  .tpl6 .t6-stat-icon{ width: 5rem; height: 5rem; font-size: 2rem; margin-bottom: 1.2rem; }
  .tpl6 .t6-stat-num{ font-size: clamp(2.8rem, 5vw, 3.6rem); }
  .tpl6 .t6-stat-desc{ display: none; }
  .tpl6 .t6-cta{ padding: 5rem clamp(1.4rem,2.5vw,2.4rem); }
  .tpl6 .t6-cta-inner{ grid-template-columns: 1fr; padding: 4rem 3rem; gap: 3rem; }
  .tpl6 .t6-cta-text p{ font-size: 1.4rem; margin-bottom: 1.4rem; }
  .tpl6 .t6-cta-stats{ gap: 1.2rem; }
  .tpl6 .t6-cta-stat strong{ font-size: 2.2rem; }
  .tpl6 .t6-cta-stat span{ font-size: .95rem; }
  .tpl6 .t6-cta-form{ padding: 2.4rem; }
  .tpl6 .t6-cta-form h3{ font-size: 1.8rem; margin-bottom: 1.4rem; }
  .tpl6 .t6-section{ padding: 6rem clamp(1.4rem,2.5vw,2.4rem); }
  .tpl6 .t6-stats{ padding: 6rem clamp(1.4rem,2.5vw,2.4rem); }
  .tpl6 .t6-hero{ padding: 4rem clamp(1.4rem,2.5vw,2.4rem) 5rem clamp(1.4rem,2.5vw,2.4rem); }
  .tpl6 .t6-hero-3d{ min-height: 480px; }
  .tpl6 .t6-float--1{ right: -2%; }
  .tpl6 .t6-float--2{ left: -2%; }
  .tpl6 .t6-float--3{ right: -2%; }
}
@media (max-width: 900px){
  .tpl6 .t6-masthead-in{ gap: .8rem; font-size: 1rem; }
  .tpl6 .t6-feature-body{ columns: 1; }
  .tpl6 .t6-letter{ padding: 3.4rem 2.4rem; }
  .tpl6 .t6-letter::before{ left: 2rem; }
  .tpl6 .t6-letter{ background-position: 2rem 0; }
  .tpl6 .t6-float{ display: none; }
  .tpl6 .t6-hero-trust{ grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
  .tpl6 .t6-hero-trust .t6-trust-item{ font-size: 1.05rem; padding: .8rem .6rem; text-align: center; }
  .tpl6 .t6-hero-trust .t6-trust-item i{ font-size: 1.3rem; margin-bottom: .4rem; }
  .tpl6 .t6-cta{ padding: 5rem clamp(1.4rem,2.5vw,2.4rem); }
  .tpl6 .t6-cta-inner{ grid-template-columns: 1fr; padding: 4rem 3rem; gap: 3rem; }
  .tpl6 .t6-cta-text p{ font-size: 1.4rem; margin-bottom: 1.4rem; }
  .tpl6 .t6-cta-stats{ grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
  .tpl6 .t6-cta-stat strong{ font-size: 2.2rem; }
  .tpl6 .t6-cta-stat span{ font-size: .95rem; }
  .tpl6 .t6-cta-form{ padding: 2.4rem; }
  .tpl6 .t6-cta-form h3{ font-size: 1.8rem; margin-bottom: 1.4rem; }
  .tpl6 .t6-hero-chips{ gap: .8rem; justify-content: center; }
  .tpl6 .t6-chip{ flex: 1 1 0; min-width: 0; justify-content: center; padding: .8rem .6rem; gap: .6rem; }
  .tpl6 .t6-chip i{ width: 2.8rem; height: 2.8rem; font-size: 1.15rem; }
  .tpl6 .t6-chip strong{ font-size: 1.4rem; }
  .tpl6 .t6-chip span{ font-size: .85rem; }
}
@media (max-width: 600px){
  .tpl6 .t6-container{ padding: 0 1.4rem; }
  .tpl6 .t6-hero{ padding: 3rem clamp(1.2rem,4vw,1.8rem) 4rem clamp(1.2rem,4vw,1.8rem); }
  .tpl6 .t6-hero-grid{ gap: 3rem; }
  .tpl6 .t6-hero-3d{ min-height: 360px; }
  .tpl6 .t6-hero-cta{ flex-wrap: nowrap !important; gap: .6rem !important; width: 100%; }
  .tpl6 .t6-hero-cta .t6-btn{
    flex: 1 1 0; min-width: 0;
    padding: .95rem .75rem !important;
    font-size: clamp(1rem, 3.2vw, 1.15rem) !important;
    white-space: nowrap;
    justify-content: center;
    text-align: center;
    line-height: 1.25;
  }
  .tpl6 .t6-hero-cta .t6-btn i{ font-size: 1.05rem; margin-right: .25rem; }
  .tpl6 .t6-hero-trust{ grid-template-columns: repeat(3, 1fr); gap: .5rem; }
  .tpl6 .t6-hero-trust .t6-trust-item{
    display: flex; flex-direction: column; align-items: center;
    font-size: clamp(.72rem, 2.2vw, .88rem); padding: .5rem .25rem;
    text-align: center; line-height: 1.25; gap: .3rem;
  }
  .tpl6 .t6-hero-trust .t6-trust-item i{ width:2.8rem !important; height:2.8rem !important; font-size: 1.05rem !important; margin-bottom: 0 !important; display:flex !important; align-items:center !important; justify-content:center !important; }
  .tpl6 .t6-hero-trust .t6-trust-item strong{ font-size: clamp(.95rem, 2.6vw, 1.1rem) !important; line-height:1.15 !important; text-align:center !important; }
  .tpl6 .t6-hero-trust .t6-trust-item span{ display: block !important; font-size: clamp(.7rem, 2vw, .82rem) !important; line-height:1.25 !important; text-align:center !important; }
  .tpl6 .t6-hero-issue{ flex-direction: column; align-items: flex-start; }
  .tpl6 .t6-stats-grid{ grid-template-columns: repeat(3, 1fr); gap: .7rem; }
  .tpl6 .t6-stat{ padding: 1.6rem .8rem; border-radius: 14px; }
  .tpl6 .t6-stat::after{ width: 100px; height: 100px; top: -30px; right: -30px; }
  .tpl6 .t6-stat-icon{ width: 3.4rem; height: 3.4rem; margin-bottom: .7rem; }
  .tpl6 .t6-stat-icon i{ font-size: 1.4rem; }
  .tpl6 .t6-stat-num{ font-size: clamp(2rem, 6vw, 2.6rem); margin-bottom: .2rem; }
  .tpl6 .t6-stat-label{ font-size: clamp(.72rem, 2.2vw, .85rem); }
  .tpl6 .t6-stat-desc{ display: none; }
  .tpl6 .t6-cta{ padding: 3.5rem clamp(1.2rem,4vw,1.8rem); }
  .tpl6 .t6-cta-inner{ grid-template-columns: 1fr; padding: 2.4rem 1.4rem; gap: 2rem; border-radius: 14px; }
  .tpl6 .t6-cta-inner::before{ inset: .5rem; border-radius: 10px; }
  .tpl6 .t6-cta-text h2{ font-size: clamp(2rem, 5vw, 2.6rem); margin-bottom: 1rem; }
  .tpl6 .t6-cta-text p{ font-size: 1.25rem; line-height: 1.6; margin-bottom: 1rem; }
  .tpl6 .t6-cta-stats{ grid-template-columns: repeat(3, 1fr); gap: .8rem; margin-top: 1.2rem; padding-top: 1.2rem; }
  .tpl6 .t6-cta-stat strong{ font-size: 1.8rem; margin-bottom: .3rem; }
  .tpl6 .t6-cta-stat span{ font-size: .85rem; letter-spacing: .1em; }
  .tpl6 .t6-cta-form{ padding: 1.8rem; border-radius: 12px; }
  .tpl6 .t6-cta-form h3{ font-size: 1.5rem; margin-bottom: 1rem; gap: .5rem; }
  .tpl6 .t6-cta-form h3 i{ font-size: 1.3rem; }
  .tpl6 .t6-cta-input{ padding: 1.1rem 1.2rem; font-size: 1.25rem; margin-bottom: .8rem; border-radius: 8px; }
  .tpl6 .t6-cta-submit{ padding: 1.2rem; font-size: 1.3rem; border-radius: 8px; gap: .6rem; }
  .tpl6 .t6-cta-foot{ font-size: 1rem; margin-top: .8rem; }
  .tpl6 .t6-chip{ padding: .7rem 1rem; }
  .tpl6 .t6-chip strong{ font-size: 1.5rem; }
  /* Spread cards — mobile redesign */
  .tpl6 .t6-spread-grid{ gap: 0; }
  .tpl6 .t6-spread-story{
    padding: 2.4rem 2rem;
    background: var(--t6-paper);
    border: 1px solid var(--t6-rule);
    border-radius: 16px;
    margin-bottom: 1.2rem;
  }
  .tpl6 .t6-spread-story + .t6-spread-story::before{ display: none; }
  .tpl6 .t6-spread-num{
    font-size: 2.8rem;
    margin-bottom: .6rem;
    color: var(--t6-accent);
  }
  .tpl6 .t6-spread-story h3{ font-size: 1.7rem; margin-bottom: .8rem; }
  .tpl6 .t6-spread-story p{ font-size: 1.3rem; line-height: 1.6; margin-bottom: 1.2rem; }
  .tpl6 .t6-spread-link{ font-size: 1.2rem; padding-bottom: .2rem; }
}
@media (max-width: 420px){
  .tpl6 .t6-container{ padding: 0 1rem; }
  .tpl6 .t6-hero-cta{ gap:.45rem !important; }
  .tpl6 .t6-hero-cta .t6-btn{
    padding: .8rem .5rem !important;
    font-size: clamp(.92rem, 3.5vw, 1.1rem) !important;
    gap: .35rem;
  }
  .tpl6 .t6-hero-cta .t6-btn i{ font-size: 1rem; margin-right: .15rem; }
  .tpl6 .t6-hero-trust{ gap: .35rem; }
  .tpl6 .t6-hero-trust .t6-trust-item{ font-size: .7rem; padding: .4rem .15rem; gap:.25rem !important; }
  .tpl6 .t6-hero-trust .t6-trust-item i{ width:2.4rem !important; height:2.4rem !important; font-size: .95rem !important; }
  .tpl6 .t6-hero-trust .t6-trust-item strong{ font-size:.88rem !important; }
  .tpl6 .t6-hero-trust .t6-trust-item span{ font-size:.7rem !important; }
  .tpl6 .t6-hero-chips{ gap: .5rem; flex-wrap: wrap; justify-content: center; }
  .tpl6 .t6-chip{ padding: .6rem .8rem; gap: .6rem; }
  .tpl6 .t6-chip i{ width: 2.6rem; height: 2.6rem; font-size: 1.1rem; }
  .tpl6 .t6-chip strong{ font-size: 1.3rem; margin-right: .2rem; }
  .tpl6 .t6-chip span{ font-size: .8rem; letter-spacing: .08em; }
  .tpl6 .t6-stats-grid{ gap: .5rem; }
  .tpl6 .t6-stat{ padding: 1.2rem .6rem; border-radius: 12px; }
  .tpl6 .t6-stat-icon{ width: 2.8rem; height: 2.8rem; margin-bottom: .5rem; }
  .tpl6 .t6-stat-icon i{ font-size: 1.2rem; }
  .tpl6 .t6-stat-num{ font-size: 1.7rem; }
  .tpl6 .t6-stat-label{ font-size: .68rem; }
  .tpl6 .t6-cta{ padding: 2.5rem 0; }
  .tpl6 .t6-cta-inner{ padding: 1.8rem 1rem; gap: 1.4rem; border-radius: 12px; }
  .tpl6 .t6-cta-inner::before{ display: none; }
  .tpl6 .t6-cta-text h2{ font-size: 1.8rem; }
  .tpl6 .t6-cta-text p{ font-size: 1.15rem; }
  .tpl6 .t6-cta-stats{ gap: .5rem; }
  .tpl6 .t6-cta-stat strong{ font-size: 1.5rem; }
  .tpl6 .t6-cta-stat span{ font-size: .75rem; }
  .tpl6 .t6-cta-form{ padding: 1.4rem; }
  .tpl6 .t6-cta-form h3{ font-size: 1.3rem; }
  .tpl6 .t6-cta-input{ padding: 1rem; font-size: 1.15rem; }
  .tpl6 .t6-cta-submit{ padding: 1rem; font-size: 1.2rem; }
  /* Spread cards — small mobile */
  .tpl6 .t6-spread-story{ padding: 2rem 1.4rem; }
  .tpl6 .t6-spread-num{ font-size: 2.4rem; margin-bottom: .4rem; }
  .tpl6 .t6-spread-story h3{ font-size: 1.5rem; }
  .tpl6 .t6-spread-story p{ font-size: 1.2rem; }
}

/* ============================================================
   CLOCK IN / OUT SCANNER + LOG  (admin_clock_in_out.php,
   admin_clock_log.php, print_clock_log_pdf.php styles not
   needed ... that page builds its own PDF)
   All colours are tokens from the existing brand palette so a
   single School Settings palette swap recolours this surface.
   ============================================================ */

/* ----- Page wrap ----- */
.ck-wrap{
  background:
    radial-gradient(circle at 12% -10%, rgba(var(--primary-rgb),.10) 0%, transparent 55%),
    radial-gradient(circle at 88% 110%, rgba(var(--gold-rgb),.10) 0%, transparent 55%),
    linear-gradient(180deg, #ffffff 0%, var(--primary-mist) 100%);
  min-height: 80vh;
  padding: 2.2rem 0 4rem;
  font-family: var(--font-body);
}
.ck-container{
  max-width: 120rem;
  margin: 0 auto;
  padding: 0 1.8rem;
}

/* ----- Hero / header card ----- */
.ck-header{
  background: var(--primary-dark);
  color: var(--white);
  border-radius: var(--r-lg);
  padding: 2rem 2.6rem;
  margin-bottom: 2rem;
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.6rem;
  position: relative;
  overflow: hidden;
}
/* Force white text everywhere — the global h1-h6 / p reset in
   stylenew.css sets color: var(--text) on element selectors which
   beats inheritance, so we have to override explicitly. */
.ck-header,
.ck-header h1, .ck-header h2, .ck-header h3,
.ck-header h4, .ck-header h5, .ck-header h6,
.ck-header p, .ck-header small, .ck-header span,
.ck-header div, .ck-header strong, .ck-header em,
.ck-header a, .ck-header a:hover,
.ck-header i{ color: var(--white); }
.ck-header h1 i, .ck-header h2 i, .ck-header h3 i{ color: var(--gold); }
.ck-header h1{
  margin: 0;
  font-family: var(--font-heading);
  font-size: 2.2rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.ck-header h1 i{ color: var(--gold); }
.ck-header p{
  margin: .4rem 0 0;
  opacity: .85;
  font-size: 1.3rem;
}
.ck-late-pill{
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem 1.2rem;
  background: rgba(var(--gold-rgb),.18);
  border: 1px solid rgba(var(--gold-rgb),.35);
  color: var(--gold);
  border-radius: var(--r-full);
  font-size: 1.2rem;
  font-weight: 700;
  margin-top: .8rem;
}
.ck-clock{ text-align: right; }
.ck-clock .ck-time{
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: .1rem;
  font-family: 'JetBrains Mono','Courier New', monospace;
  color: var(--gold);
  line-height: 1;
}
.ck-clock .ck-date{
  font-size: 1.2rem;
  opacity: .85;
  margin-top: .3rem;
}

/* ----- Stats grid ----- */
.ck-stats{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.2rem;
  margin-bottom: 2rem;
}
.ck-stat{
  background: var(--white);
  border-radius: var(--r-md);
  padding: 1.6rem;
  text-align: center;
  border: 2px solid var(--border-light);
  transition: all var(--t-base);
}
.ck-stat:hover{ border-color: var(--primary-mist); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.ck-stat .ck-num{
  font-family: var(--font-heading);
  font-size: 2.8rem;
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
}
.ck-stat .ck-lbl{
  font-size: 1.1rem;
  color: var(--text-secondary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-top: .4rem;
}
.ck-stat.green   .ck-num{ color: var(--green-700); }
.ck-stat.yellow  .ck-num{ color: var(--amber-700); }
.ck-stat.blue    .ck-num{ color: var(--primary); }
.ck-stat.purple  .ck-num{ color: var(--green-300); }

/* ----- Tabs ----- */
.ck-tabs{
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  background: transparent;
  flex-wrap: wrap;
  gap: .4rem;
}
.ck-tabs li{
  flex: 1 1 14rem;
  padding: 1.3rem 1rem;
  text-align: center;
  cursor: pointer;
  font-weight: 700;
  font-size: 1.3rem;
  background: var(--bg-alt);
  color: var(--text-secondary);
  border: 2px solid var(--border);
  border-bottom: none;
  border-radius: var(--r-md) var(--r-md) 0 0;
  transition: all var(--t-base);
  user-select: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
}
.ck-tabs li:hover{ background: var(--primary-mist); color: var(--primary); }
.ck-tabs li.active{
  background: var(--white);
  color: var(--accent);
  border-color: var(--accent);
  border-bottom-color: var(--white);
  z-index: 2;
  box-shadow: 0 -3px 10px rgba(var(--accent-rgb),.10);
}

/* ----- Main panel ----- */
.ck-panel{
  background: var(--white);
  border: 2px solid var(--accent);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  padding: 2.4rem 2.6rem;
  box-shadow: var(--shadow-md);
  margin-bottom: 2rem;
}
.ck-panel-head{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.6rem;
  padding-bottom: 1.2rem;
  border-bottom: 2px solid var(--gold);
  flex-wrap: wrap;
  gap: 1rem;
}
.ck-panel-title{
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 800;
  color: var(--primary);
  margin: 0;
  display: flex;
  align-items: center;
  gap: .6rem;
}
.ck-panel-sub{
  font-size: 1.2rem;
  color: var(--text-secondary);
  margin: .2rem 0 0;
  max-width: 54rem;
  line-height: 1.5;
}
.ck-status{
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .6rem 1.4rem;
  background: var(--green-tint-100);
  color: var(--green-700);
  border-radius: var(--r-full);
  font-size: 1.2rem;
  font-weight: 700;
  border: 1px solid var(--green-tint-200);
}
.ck-status .ck-dot{
  width: .8rem;
  height: .8rem;
  background: var(--green-700);
  border-radius: 50%;
  animation: ckPulse 2s infinite;
}
.ck-status.paused{
  background: var(--amber-100);
  color: var(--amber-700);
  border-color: var(--amber-200);
}
.ck-status.paused .ck-dot{
  background: var(--amber-700);
  animation: none;
}
@keyframes ckPulse{ 0%,100%{opacity:1} 50%{opacity:.4} }

/* ----- Day picker ----- */
.ck-day-pick{
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-bottom: 1.4rem;
  padding: 1rem 1.4rem;
  background: var(--primary-mist);
  border-radius: var(--r-md);
  flex-wrap: wrap;
}
.ck-day-pick label{
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.ck-day-pick input[type="date"]{
  padding: .7rem 1.1rem;
  border: 2px solid var(--border);
  border-radius: var(--r-sm);
  font-size: 1.3rem;
  outline: none;
  background: var(--white);
  width: auto;
  min-width: 16rem;
}
.ck-day-pick input[type="date"]:focus{
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb),.15);
}
.ck-day-pick .ck-today{
  padding: .7rem 1.2rem;
  background: var(--primary);
  color: var(--white);
  border: none;
  border-radius: var(--r-sm);
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--t-base);
}
.ck-day-pick .ck-today:hover{ background: var(--primary-dark); }
.ck-day-pick .ck-note{
  font-size: 1.1rem;
  color: var(--accent);
  font-weight: 700;
  margin-left: .8rem;
}

/* ----- Search ----- */
.ck-search{ margin-bottom: 1.4rem; position: relative; }
.ck-search-row{ display: flex; gap: .8rem; }
.ck-search-row input{
  flex: 1;
  padding: 1.1rem 1.4rem;
  border: 2px solid var(--border);
  border-radius: var(--r-md);
  font-size: 1.4rem;
  outline: none;
  transition: border-color var(--t-base);
}
.ck-search-row input:focus{
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb),.15);
}
.ck-search-row .ck-clr{
  padding: 1.1rem 1.8rem;
  background: var(--accent);
  color: var(--white);
  border: none;
  border-radius: var(--r-md);
  font-weight: 700;
  font-size: 1.3rem;
  cursor: pointer;
  transition: all var(--t-base);
}
.ck-search-row .ck-clr:hover{ background: var(--accent-dark); }

.ck-results{
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--white);
  border: 2px solid var(--accent);
  border-radius: 0 0 var(--r-md) var(--r-md);
  max-height: 36rem;
  overflow-y: auto;
  z-index: 100;
  box-shadow: var(--shadow-xl);
}
.ck-results.show{ display: block; }
.ck-result{
  padding: 1.1rem 1.4rem;
  cursor: pointer;
  border-bottom: 1px solid var(--border-light);
  transition: background var(--t-fast);
  display: flex;
  align-items: center;
  gap: 1rem;
}
.ck-result:hover{ background: var(--primary-mist); }
.ck-result:last-child{ border-bottom: none; }
.ck-result .ck-av{
  width: 3.8rem;
  height: 3.8rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--white);
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
  overflow: hidden;
}
.ck-result .ck-av img{ width: 100%; height: 100%; object-fit: cover; }
.ck-result .ck-info{ flex: 1; min-width: 0; }
.ck-result .ck-name{
  font-weight: 700;
  color: var(--primary);
  font-size: 1.4rem;
}
.ck-result .ck-meta{
  font-size: 1.1rem;
  color: var(--text-muted);
}
.ck-result .ck-badge{
  font-size: 1rem;
  padding: .3rem .9rem;
  border-radius: var(--r-full);
  font-weight: 700;
}
.ck-result .ck-badge.in{
  background: var(--green-tint-100);
  color: var(--green-700);
}
.ck-result .ck-badge.out{
  background: var(--primary-mist);
  color: var(--primary-dark);
}
.ck-result .ck-badge.absent{
  background: var(--amber-100);
  color: var(--amber-700);
}
.ck-empty{
  padding: 1.6rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 1.3rem;
}

/* ----- QR reader area ----- */
.ck-qr-wrap,
#ck-qr-reader{
  border-radius: var(--r-md);
  overflow: hidden;
  max-width: 50rem;
  min-height: 32rem;
  margin: 0 auto;
  background: var(--bg-alt);
  border: 2px dashed var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.ck-qr-wrap.scanning,
#ck-qr-reader.scanning{
  border: 2px solid var(--accent);
  background: transparent;
  min-height: auto;
}
.ck-qr-wrap.paused-state,
#ck-qr-reader.paused-state{
  border: 2px solid var(--amber-700);
  background: #fffdf5;
  min-height: 22rem;
}
.ck-qr-wrap.scanning::after,
#ck-qr-reader.scanning::after{
  content: '';
  position: absolute;
  left: 8%;
  right: 8%;
  height: 3px;
  background: var(--accent);
  top: 20%;
  z-index: 20;
  pointer-events: none;
  animation: ckScan 2.8s cubic-bezier(.4,0,.6,1) infinite;
  box-shadow:
    0 0 6px rgba(var(--accent-rgb),.7),
    0 0 16px rgba(var(--accent-rgb),.35),
    0 0 32px rgba(var(--accent-rgb),.15);
  border-radius: 2px;
}
@keyframes ckScan{
  0%  { top: 10%; opacity: 0; }
  5%  { opacity: 1; }
  50% { top: 50%; opacity: 1; }
  95% { opacity: 1; }
  100%{ top: 85%; opacity: 0; }
}
.ck-placeholder{
  text-align: center;
  color: var(--text-muted);
  padding: 3rem;
}
.ck-placeholder i{
  font-size: 4.4rem;
  display: block;
  margin-bottom: .8rem;
  opacity: .4;
}
.ck-placeholder span{ font-size: 1.3rem; }

/* ----- Controls ----- */
.ck-controls{
  display: flex;
  gap: .8rem;
  margin: 1.4rem 0 1.6rem;
  flex-wrap: wrap;
  align-items: center;
}
.ck-btn{
  padding: .9rem 1.6rem;
  background: var(--primary);
  color: var(--white);
  border: none;
  border-radius: var(--r-sm);
  font-weight: 700;
  font-size: 1.2rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  transition: all var(--t-base);
  text-decoration: none;
}
.ck-btn:hover{ background: var(--accent); color: var(--white); transform: translateY(-1px); }
.ck-btn.ghost{
  background: var(--primary-mist);
  color: var(--primary);
}
.ck-btn.ghost:hover{ background: var(--accent); color: var(--white); }
.ck-sound{
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .9rem 1.6rem;
  background: var(--primary-mist);
  border-radius: var(--r-sm);
  cursor: pointer;
  user-select: none;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--primary);
  border: 1px solid var(--border-light);
  transition: all var(--t-base);
}
.ck-sound.on{ background: var(--green-700); color: var(--white); border-color: var(--green-700); }

/* ----- Recent list ----- */
.ck-recent{
  background: var(--white);
  border-radius: var(--r-lg);
  padding: 2.4rem 2.6rem;
  box-shadow: var(--shadow-md);
}
.ck-section-head{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.6rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--primary-mist);
  flex-wrap: wrap;
  gap: 1rem;
}
.ck-section-title{
  font-family: var(--font-heading);
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--primary);
  margin: 0;
  display: flex;
  align-items: center;
  gap: .6rem;
}
.ck-section-title i{ color: var(--accent); }
.ck-section-actions{ display: flex; gap: .8rem; flex-wrap: wrap; }
.ck-export{
  padding: .7rem 1.4rem;
  background: var(--green-700);
  color: var(--white);
  border: none;
  border-radius: var(--r-sm);
  font-weight: 700;
  font-size: 1.2rem;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  transition: all var(--t-base);
}
.ck-export:hover{ background: var(--green-800); color: var(--white); }
.ck-export.navy{ background: var(--primary); }
.ck-export.navy:hover{ background: var(--primary-dark); }
.ck-refresh{
  padding: .7rem 1.4rem;
  background: var(--primary-mist);
  color: var(--primary);
  border: none;
  border-radius: var(--r-sm);
  font-weight: 700;
  font-size: 1.2rem;
  cursor: pointer;
  transition: all var(--t-base);
  display: inline-flex;
  align-items: center;
  gap: .6rem;
}
.ck-refresh:hover{ background: var(--accent); color: var(--white); }

.ck-list{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(31rem, 1fr));
  gap: 1rem;
}
.ck-item{
  background: var(--primary-mist);
  padding: 1.2rem 1.4rem;
  border-radius: var(--r-md);
  border-left: 4px solid var(--gold);
  display: flex;
  align-items: center;
  gap: 1.2rem;
  transition: all var(--t-base);
}
.ck-item:hover{ transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.ck-item.in{
  border-left-color: var(--green-700);
  background: var(--green-tint-50);
}
.ck-item.out{
  border-left-color: var(--primary);
  background: var(--primary-mist);
}
.ck-item.late{
  border-left-color: var(--amber-700);
  background: var(--amber-100);
}
.ck-item .ck-item-av{
  width: 4.4rem;
  height: 4.4rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--white);
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  overflow: hidden;
  flex-shrink: 0;
}
.ck-item .ck-item-av img{ width: 100%; height: 100%; object-fit: cover; }
.ck-item .ck-body{ flex: 1; min-width: 0; }
.ck-item .ck-nm{
  font-weight: 800;
  color: var(--primary);
  font-size: 1.4rem;
}
.ck-item .ck-sub{
  font-size: 1.1rem;
  color: var(--text-secondary);
  margin-top: .2rem;
}
.ck-item .ck-times{
  font-size: 1.1rem;
  color: var(--primary);
  margin-top: .4rem;
  font-family: 'JetBrains Mono','Courier New', monospace;
  font-weight: 700;
}
.ck-item .ck-pills{
  display: flex;
  gap: .4rem;
  margin-top: .4rem;
  flex-wrap: wrap;
}
.ck-pill{
  font-size: 1rem;
  padding: .2rem .8rem;
  border-radius: var(--r-full);
  font-weight: 700;
}
.ck-pill.student{ background: var(--primary-mist); color: var(--primary-dark); }
.ck-pill.staff  { background: var(--amber-100);  color: var(--amber-700); }
.ck-pill.late   { background: var(--amber-100);  color: var(--amber-700); }
.ck-pill.present{ background: var(--green-tint-100); color: var(--green-700); }

.ck-empty-state{
  text-align: center;
  padding: 3.6rem 2rem;
  color: var(--text-muted);
}
.ck-empty-state i{
  font-size: 4.4rem;
  opacity: .25;
  display: block;
  margin-bottom: 1rem;
}

/* ----- Success / Error / Warn popup overlays ----- */
.ck-pop-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.65);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: ckFadeIn .2s ease;
}
.ck-pop{
  background: var(--white);
  border-radius: var(--r-lg);
  padding: 3.2rem 2.8rem 2.4rem;
  text-align: center;
  max-width: 43rem;
  width: 92%;
  box-shadow: var(--shadow-2xl);
  animation: ckBounceIn .4s cubic-bezier(.175,.885,.32,1.275);
  position: relative;
  overflow: hidden;
}
.ck-pop::before{
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
}
.ck-pop.ck-ok::before   { background: var(--green-700); }
.ck-pop.ck-err::before  { background: var(--accent); }
.ck-pop.ck-warn::before { background: var(--amber-700); }
.ck-pop .ck-icon{
  width: 8.4rem;
  height: 8.4rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.4rem;
  font-size: 3.8rem;
}
.ck-pop .ck-icon.g{
  background: var(--green-tint-100);
  color: var(--green-700);
  box-shadow: 0 0 0 1rem rgba(var(--green-700-rgb),.08);
}
.ck-pop .ck-icon.r{
  background: var(--amber-100);
  color: var(--accent);
  box-shadow: 0 0 0 1rem rgba(var(--accent-rgb),.08);
}
.ck-pop .ck-icon.a{
  background: var(--amber-100);
  color: var(--amber-700);
  box-shadow: 0 0 0 1rem rgba(var(--accent-rgb),.08);
}
.ck-pop .ck-pbadge{
  display: inline-block;
  padding: .4rem 1.2rem;
  border-radius: var(--r-full);
  font-size: 1rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: .6rem;
}
.ck-pop .ck-pbadge.g{ background: var(--green-tint-100); color: var(--green-700); }
.ck-pop .ck-pbadge.r{ background: var(--amber-100);  color: var(--accent); }
.ck-pop .ck-pbadge.a{ background: var(--amber-100);  color: var(--amber-700); }
.ck-pop h2{
  font-family: var(--font-heading);
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--primary);
  margin: 0 0 .6rem;
}
.ck-pop .ck-msg{
  font-size: 1.3rem;
  color: var(--text-secondary);
  line-height: 1.5;
  padding: 0 .8rem;
  margin-bottom: 1.4rem;
}
.ck-pop .ck-msg strong{ color: var(--primary); }
.ck-pop .ck-msg .ck-msg-ok{ color: var(--green-700); font-weight: 700; }
.ck-pop .ck-msg .ck-msg-late{ color: var(--amber-700); font-weight: 700; }
.ck-pop .ck-msg .ck-msg-out{ color: var(--primary); font-weight: 700; }
.ck-pop .ck-details{
  background: var(--bg-alt);
  border-radius: var(--r-md);
  padding: 1.2rem 1.6rem;
  margin-bottom: 1.6rem;
  text-align: left;
}
.ck-pop .ck-details .ck-row{
  display: flex;
  justify-content: space-between;
  padding: .6rem 0;
  border-bottom: 1px solid var(--border-light);
  font-size: 1.2rem;
}
.ck-pop .ck-details .ck-row:last-child{ border-bottom: none; }
.ck-pop .ck-details .ck-row .ck-l{
  color: var(--text-muted);
  font-weight: 600;
  min-width: 9rem;
}
.ck-pop .ck-details .ck-row .ck-v{
  color: var(--primary);
  font-weight: 800;
  text-align: right;
}
.ck-pop .ck-btn{
  padding: 1.1rem 2.8rem;
  border: none;
  border-radius: var(--r-sm);
  font-weight: 800;
  font-size: 1.3rem;
  cursor: pointer;
  color: var(--white);
  display: inline-flex;
  align-items: center;
  gap: .6rem;
}
.ck-pop .ck-btn.g{ background: var(--green-700); }
.ck-pop .ck-btn.g:hover{ background: var(--green-800); }
.ck-pop .ck-btn.r{ background: var(--accent); }
.ck-pop .ck-btn.r:hover{ background: var(--accent-dark); }
.ck-pop .ck-btn.a{ background: var(--amber-700); }
.ck-pop .ck-qrinfo{
  margin-top: 1.4rem;
  padding: .9rem 1.1rem;
  background: var(--bg-alt);
  border-radius: var(--r-xs);
  text-align: left;
  font-size: 1.1rem;
  font-family: 'JetBrains Mono','Courier New', monospace;
  word-break: break-all;
  color: var(--text-secondary);
}
.ck-pop .ck-qrinfo .ck-qrlabel{
  color: var(--text-muted);
  font-weight: 700;
  margin-bottom: .4rem;
  font-family: var(--font-body);
}
@keyframes ckFadeIn   { from{opacity:0} to{opacity:1} }
@keyframes ckBounceIn { from{transform:scale(.6);opacity:0} to{transform:scale(1);opacity:1} }

/* ----- Responsive ----- */
@media (max-width: 768px){
  .ck-tabs li{ font-size: 1.2rem; padding: 1rem .6rem; flex: 1 1 48%; }
  .ck-panel { padding: 1.8rem 1.4rem; }
  .ck-stats { grid-template-columns: repeat(2, 1fr); }
  .ck-qr-wrap{ max-width: 100%; min-height: 38rem; }
  .ck-qr-wrap.paused-state{ min-height: 24rem; }
  .ck-clock .ck-time{ font-size: 2.4rem; }
}

/* ============================================================
   CLOCK IN / OUT LOG PAGE  (admin_clock_log.php)
   Re-uses .cl-* namespace introduced earlier; styled here so
   the log page is theme-driven too.
   ============================================================ */
.cl-wrap{
  max-width: 128rem;
  margin: 0 auto;
  padding: 2.4rem 1.8rem 6rem;
  font-family: var(--font-body);
}
.cl-fl{
  background: var(--white);
  border-radius: var(--r-lg);
  padding: 1.8rem 2.2rem;
  box-shadow: var(--shadow-sm);
  margin-bottom: 1.8rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  align-items: flex-end;
}
.cl-fl-grp{ display: flex; flex-direction: column; gap: .4rem; }
.cl-fl-grp label{
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: .4px;
}
.cl-fl-grp input,
.cl-fl-grp select{
  padding: .8rem 1.2rem;
  border: 2px solid var(--border);
  border-radius: var(--r-sm);
  font-size: 1.3rem;
  outline: none;
  min-width: 15rem;
  background: var(--white);
  width: auto;
}
.cl-fl-grp input:focus,
.cl-fl-grp select:focus{
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb),.15);
}
.cl-mode-toggle{
  display: inline-flex;
  background: var(--primary-mist);
  border-radius: var(--r-sm);
  padding: .3rem;
  gap: .2rem;
}
.cl-mode-btn{
  padding: .7rem 1.4rem;
  background: transparent;
  border: none;
  border-radius: var(--r-xs);
  font-weight: 700;
  font-size: 1.2rem;
  cursor: pointer;
  color: var(--text-secondary);
  transition: all var(--t-base);
}
.cl-mode-btn.active{
  background: var(--white);
  color: var(--accent);
  box-shadow: var(--shadow-xs);
}
.cl-apply{
  padding: .9rem 1.8rem;
  background: var(--primary);
  color: var(--white);
  border: none;
  border-radius: var(--r-sm);
  font-weight: 700;
  font-size: 1.2rem;
  cursor: pointer;
  transition: all var(--t-base);
  display: inline-flex;
  align-items: center;
  gap: .6rem;
}
.cl-apply:hover{ background: var(--accent); }
.cl-pdf{
  padding: .9rem 1.8rem;
  background: var(--green-700);
  color: var(--white);
  border: none;
  border-radius: var(--r-sm);
  font-weight: 700;
  font-size: 1.2rem;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  transition: all var(--t-base);
}
.cl-pdf:hover{ background: var(--green-800); color: var(--white); }
.cl-kiosk{
  padding: .9rem 1.8rem;
  background: var(--accent);
  color: var(--white);
  border: none;
  border-radius: var(--r-sm);
  font-weight: 700;
  font-size: 1.2rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  transition: all var(--t-base);
}
.cl-kiosk:hover{ background: var(--accent-dark); color: var(--white); }

.cl-stats{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.2rem;
  margin-bottom: 1.8rem;
}
.cl-stat{
  background: var(--white);
  border-radius: var(--r-md);
  padding: 1.6rem;
  text-align: center;
  border: 2px solid var(--border-light);
}
.cl-stat .cl-n{
  font-family: var(--font-heading);
  font-size: 2.6rem;
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
}
.cl-stat .cl-l{
  font-size: 1.1rem;
  color: var(--text-secondary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
  margin-top: .4rem;
}
.cl-stat.green  .cl-n{ color: var(--green-700); }
.cl-stat.yellow .cl-n{ color: var(--amber-700); }
.cl-stat.blue   .cl-n{ color: var(--primary); }
.cl-stat.purple .cl-n{ color: var(--green-300); }

.cl-card{
  background: var(--white);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  margin-bottom: 1.8rem;
  overflow: hidden;
}
.cl-card-head{
  padding: 1.6rem 2.2rem;
  border-bottom: 2px solid var(--primary-mist);
}
.cl-card-head h3{
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.6rem;
  color: var(--primary);
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: .6rem;
}
.cl-card-head h3 i{ color: var(--accent); }
.cl-tbl-wrap{ overflow-x: auto; }
.cl-tbl{ width: 100%; border-collapse: collapse; font-size: 1.3rem; }
.cl-tbl th{
  background: var(--primary-mist);
  padding: 1rem 1.4rem;
  text-align: left;
  font-weight: 700;
  color: var(--primary);
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: .4px;
  white-space: nowrap;
}
.cl-tbl td{
  padding: 1rem 1.4rem;
  border-bottom: 1px solid var(--border-light);
}
.cl-tbl tr:hover td{ background: var(--bg-alt); }
.cl-name{ display: flex; align-items: center; gap: 1rem; }
.cl-name .cl-av{
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--white);
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  overflow: hidden;
  flex-shrink: 0;
}
.cl-name .cl-av img{ width: 100%; height: 100%; object-fit: cover; }
.cl-badge{
  display: inline-block;
  padding: .3rem .9rem;
  border-radius: var(--r-full);
  font-size: 1rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.cl-badge.student{ background: var(--primary-mist); color: var(--primary-dark); }
.cl-badge.staff  { background: var(--amber-100);  color: var(--amber-700); }
.cl-badge.late   { background: var(--amber-100);  color: var(--amber-700); }
.cl-badge.present{ background: var(--green-tint-100); color: var(--green-700); }
.cl-badge.absent { background: var(--accent); color: var(--white); }
.cl-mono{
  font-family: 'JetBrains Mono','Courier New', monospace;
  font-weight: 700;
  color: var(--primary);
}
.cl-empty{
  padding: 4rem 2rem;
  text-align: center;
  color: var(--text-muted);
}
.cl-empty i{
  font-size: 4rem;
  opacity: .25;
  display: block;
  margin-bottom: 1rem;
}

.pct-row{
  display: flex;
  align-items: center;
  gap: .8rem;
  min-width: 18rem;
}
.pct-bar{
  flex: 1;
  height: 1rem;
  background: var(--border-light);
  border-radius: var(--r-full);
  overflow: hidden;
}
.pct-fill{
  height: 100%;
  border-radius: var(--r-full);
  transition: width .4s;
}
.pct-fill.good{ background: var(--green-700); }
.pct-fill.warn{ background: var(--amber-700); }
.pct-fill.bad { background: var(--accent); }
.pct-lbl{
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--primary);
  min-width: 4rem;
  text-align: right;
}

@media (max-width: 768px){
  .cl-fl{ padding: 1.4rem; }
  .cl-fl-grp input, .cl-fl-grp select{ min-width: 100%; }
  .cl-tbl{ font-size: 1.2rem; }
  .cl-tbl th, .cl-tbl td{ padding: .8rem 1rem; }
}

/* =====================================================
   TEMPLATE 7 — GLASSMORPHISM
   ===================================================== */
/* =====================================================
   TEMPLATE 7: GLASSMORPHISM - scoped under .tpl7
   Multi-layered frosted glass over animated mesh + orbs.
   Each section uses a unique glass treatment so the page
   reads as ONE cohesive design language, distinct from
   the other templates' classic / editorial / corporate looks.
   Colours resolve through --primary* / --accent* so the
   admin theme picker drives every panel live.
   ===================================================== */
.tpl7{ --t7-ink:#0b1220; --t7-ink-soft:#5a6472; --t7-line:rgba(15,23,42,.08);
  --t7-glass:rgba(255,255,255,.55); --t7-glass-strong:rgba(255,255,255,.72);
  --t7-glass-line:rgba(255,255,255,.9); --t7-glass-dark:rgba(15,23,42,.55);
  --t7-shadow:0 28px 60px rgba(8,15,30,.18); --t7-shadow-lg:0 40px 90px rgba(8,15,30,.28);
  font-family:'Poppins','Open Sans',sans-serif; color:var(--t7-ink); background:#eef2f7; overflow-x:hidden; }
.tpl7 *{ box-sizing:border-box; }
.tpl7 .t7-container{ max-width:1240px; margin:0 auto; padding:0 2.4rem; }
.tpl7 .t7-eyebrow{ display:inline-flex; align-items:center; gap:.8rem; padding:.6rem 1.4rem; border-radius:999px; background:rgba(var(--primary-rgb),.08); border:1px solid rgba(var(--primary-rgb),.18); color:var(--primary); font-weight:800; letter-spacing:.12em; text-transform:uppercase; font-size:1.2rem; }
.tpl7 .t7-eyebrow i{ font-size:1rem; }

/* =========== HERO =========== */
.tpl7 .t7-hero{ position:relative; padding:10rem 0 9rem; overflow:hidden; isolation:isolate;
  background:linear-gradient(125deg,var(--primary-deeper) 0%,var(--primary) 38%,var(--primary-light) 78%,var(--accent) 115%);
  background-size:260% 260%; animation:t7mesh 22s ease-in-out infinite; }
@keyframes t7mesh{ 0%,100%{background-position:0% 50%;} 50%{background-position:100% 50%;} }
.tpl7 .t7-hero::before,
.tpl7 .t7-hero::after{ content:''; position:absolute; border-radius:50%; filter:blur(60px); pointer-events:none; z-index:0; }
.tpl7 .t7-hero::before{ width:38rem; height:38rem; top:-10rem; left:-10rem; background:radial-gradient(circle,rgba(var(--primary-light-rgb),.55) 0%,transparent 70%); animation:t7floatA 18s ease-in-out infinite; }
.tpl7 .t7-hero::after{ width:32rem; height:32rem; bottom:-12rem; right:-8rem; background:radial-gradient(circle,rgba(var(--accent-rgb),.55) 0%,transparent 70%); animation:t7floatB 22s ease-in-out infinite; }
@keyframes t7floatA{ 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(8rem,4rem) scale(1.1);} }
@keyframes t7floatB{ 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-6rem,-5rem) scale(1.15);} }
.tpl7 .t7-hero-grid-bg{ position:absolute; inset:0; z-index:1; opacity:.35; pointer-events:none;
  background-image:radial-gradient(circle,rgba(255,255,255,.55) 1px,transparent 1.4px); background-size:26px 26px;
  mask-image:radial-gradient(ellipse at 50% 35%,#000 0%,transparent 75%); -webkit-mask-image:radial-gradient(ellipse at 50% 35%,#000 0%,transparent 75%); }
.tpl7 .t7-hero-grid{ position:relative; z-index:2; display:grid; grid-template-columns:1.05fr .95fr; gap:4.5rem; align-items:center; }
.tpl7 .t7-badge{ display:inline-flex; align-items:center; gap:.9rem; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.32); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); color:var(--white); padding:.9rem 1.8rem; border-radius:999px; font-size:1.2rem; font-weight:700; letter-spacing:.06em; box-shadow:0 8px 24px rgba(0,0,0,.18); }
.tpl7 .t7-badge i{ font-size:1.1rem; color:var(--primary-light); text-shadow:0 0 18px rgba(var(--primary-light-rgb),.8); }
.tpl7 .t7-hero h1{ color:var(--white); font-size:clamp(3.4rem,5.4vw,5.8rem); font-weight:800; line-height:1.05; letter-spacing:-.025em; margin:2.2rem 0 1.8rem; text-shadow:0 12px 40px rgba(0,0,0,.3); }
.tpl7 .t7-hero h1 span{ background:linear-gradient(120deg,#fff 0%,var(--primary-light) 45%,var(--accent) 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; display:inline-block; }
.tpl7 .t7-hero p{ color:rgba(255,255,255,.88); font-size:1.55rem; line-height:1.75; max-width:52rem; margin:0 0 3rem; text-shadow:0 4px 20px rgba(0,0,0,.2); }
.tpl7 .t7-btn{ display:inline-flex; align-items:center; gap:1rem; padding:1.4rem 2.8rem; border-radius:14px; font-weight:700; font-size:1.4rem; text-decoration:none; transition:.3s cubic-bezier(.2,.8,.2,1); position:relative; overflow:hidden; cursor:pointer; border:none; }
.tpl7 .t7-btn--glass{ background:rgba(255,255,255,.94); color:var(--t7-ink); backdrop-filter:blur(14px); box-shadow:0 18px 44px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.6); }
.tpl7 .t7-btn--glass::after{ content:''; position:absolute; inset:0; background:linear-gradient(120deg,transparent 30%,rgba(var(--primary-rgb),.18) 50%,transparent 70%); transform:translateX(-100%); transition:transform .6s; }
.tpl7 .t7-btn--glass:hover{ transform:translateY(-4px); box-shadow:0 28px 60px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.7); }
.tpl7 .t7-btn--glass:hover::after{ transform:translateX(100%); }
.tpl7 .t7-btn--outline{ border:1.5px solid rgba(255,255,255,.5); color:var(--white); margin-left:1.2rem; background:rgba(255,255,255,.06); backdrop-filter:blur(8px); }
.tpl7 .t7-btn--outline:hover{ background:rgba(255,255,255,.18); border-color:var(--white); transform:translateY(-3px); }
/* — Hero & CTA twin-button wrappers (first-principle: side-by-side on all screens) — */
.tpl7 .t7-hero-cta{ display:flex; flex-wrap:wrap; gap:1rem; align-items:center; margin:0 0 2.4rem; }
.tpl7 .t7-hero-cta .t7-btn{ margin-left:0 !important; }
.tpl7 .t7-cta-actions{ display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:center; margin:1.6rem 0 0; }
.tpl7 .t7-cta-actions .t7-btn{ margin-left:0 !important; }
.tpl7 .t7-hero-side{ position:relative; perspective:1400px; }
.tpl7 .t7-glass-card{ position:relative; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.28); backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px); border-radius:28px; padding:2rem; box-shadow:0 40px 90px rgba(8,15,30,.28),inset 0 1px 0 rgba(255,255,255,.25); transform:rotate(-1.5deg); transition:transform .6s cubic-bezier(.2,.8,.2,1); }
.tpl7 .t7-glass-card:hover{ transform:rotate(0); }
.tpl7 .t7-glass-card::before{ content:''; position:absolute; inset:0; border-radius:28px; padding:1px; background:linear-gradient(135deg,rgba(255,255,255,.55),rgba(255,255,255,0) 40%,rgba(255,255,255,.35)); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; }
.tpl7 .t7-glass-card::after{ content:''; position:absolute; top:-1.5rem; right:-1.5rem; width:3.5rem; height:3.5rem; border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.95) 0%,rgba(255,255,255,.4) 40%,transparent 70%); filter:blur(6px); pointer-events:none; }
.tpl7 .t7-glass-card img{ width:100%; border-radius:18px; margin-bottom:1.8rem; display:block; box-shadow:0 20px 40px rgba(0,0,0,.3); }
.tpl7 .t7-glass-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; }
.tpl7 .t7-glass-stat{ position:relative; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22); border-radius:14px; padding:1.4rem .8rem; text-align:center; overflow:hidden; }
.tpl7 .t7-glass-stat::before{ content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent); }
.tpl7 .t7-glass-stat strong{ display:block; color:var(--white); font-size:2.1rem; font-weight:800; letter-spacing:-.02em; }
.tpl7 .t7-glass-stat span{ color:rgba(255,255,255,.78); font-size:1.05rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em; }
.tpl7 .t7-float-chip{ position:absolute; background:rgba(255,255,255,.16); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,.3); border-radius:14px; padding:.9rem 1.2rem; display:flex; align-items:center; gap:.8rem; color:var(--white); font-size:1.15rem; font-weight:700; box-shadow:0 14px 30px rgba(0,0,0,.22); z-index:3; }
.tpl7 .t7-float-chip i{ width:2.6rem; height:2.6rem; border-radius:8px; background:rgba(255,255,255,.22); display:flex; align-items:center; justify-content:center; font-size:1.2rem; }
.tpl7 .t7-float-chip--a{ top:-1.5rem; left:-2.2rem; transform:rotate(-6deg); animation:t7chipA 6s ease-in-out infinite; }
.tpl7 .t7-float-chip--b{ bottom:-1.8rem; right:-2.4rem; transform:rotate(5deg); animation:t7chipB 7.5s ease-in-out infinite; }
@keyframes t7chipA{ 0%,100%{transform:rotate(-6deg) translateY(0);} 50%{transform:rotate(-6deg) translateY(-12px);} }
@keyframes t7chipB{ 0%,100%{transform:rotate(5deg) translateY(0);} 50%{transform:rotate(5deg) translateY(10px);} }

/* =========== MARQUEE STRIP (replaces t7-trust) =========== */
.tpl7 .t7-marquee{ position:relative; background:linear-gradient(90deg,var(--primary-deeper) 0%,var(--primary) 50%,var(--primary-deeper) 100%); padding:1.6rem 0; overflow:hidden; isolation:isolate; }
.tpl7 .t7-marquee::before,
.tpl7 .t7-marquee::after{ content:''; position:absolute; top:0; bottom:0; width:12rem; z-index:2; pointer-events:none; }
.tpl7 .t7-marquee::before{ left:0; background:linear-gradient(90deg,var(--primary-deeper),transparent); }
.tpl7 .t7-marquee::after{ right:0; background:linear-gradient(270deg,var(--primary-deeper),transparent); }
.tpl7 .t7-marquee-track{ display:inline-flex; gap:4rem; white-space:nowrap; animation:t7marquee 36s linear infinite; color:var(--white); font-size:1.4rem; font-weight:700; letter-spacing:.04em; }
.tpl7 .t7-marquee-track span{ display:inline-flex; align-items:center; gap:.9rem; padding:0 1.4rem; }
.tpl7 .t7-marquee-track i{ font-size:1.6rem; color:var(--primary-light); text-shadow:0 0 14px rgba(var(--primary-light-rgb),.7); }
@keyframes t7marquee{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* =========== SHARED SECTION HEAD =========== */
.tpl7 .t7-head{ text-align:center; max-width:64rem; margin:0 auto 5.5rem; position:relative; z-index:1; }
.tpl7 .t7-head span{ display:inline-flex; align-items:center; gap:.8rem; padding:.6rem 1.4rem; border-radius:999px; background:rgba(var(--primary-rgb),.08); border:1px solid rgba(var(--primary-rgb),.18); color:var(--primary); font-weight:800; letter-spacing:.12em; text-transform:uppercase; font-size:1.2rem; }
.tpl7 .t7-head span i{ font-size:1rem; }
.tpl7 .t7-head h2{ font-size:clamp(2.8rem,4.4vw,4.2rem); font-weight:800; letter-spacing:-.025em; margin:1.6rem 0 1.4rem; line-height:1.1; }
.tpl7 .t7-head h2 em{ font-style:normal; background:linear-gradient(120deg,var(--primary),var(--accent)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.tpl7 .t7-head p{ color:var(--t7-ink-soft); font-size:1.55rem; line-height:1.7; max-width:58rem; margin:0 auto; }
.tpl7 .t7-head--light h2{ color:var(--white); }
.tpl7 .t7-head--light p{ color:rgba(255,255,255,.78); }
.tpl7 .t7-head--light span{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.28); color:var(--white); }

/* =========== REVEAL ON SCROLL =========== */
.tpl7 .t7-reveal{ opacity:0; transform:translateY(40px); transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1); }
.tpl7 .t7-reveal.is-in{ opacity:1; transform:translateY(0); }

/* =========== LEVELS - Liquid Mesh Pills (replaces t7-level-card grid) =========== */
.tpl7 .t7-levels{ position:relative; padding:9rem 0; background:linear-gradient(180deg,#eef2f7 0%,#f7f9fc 50%,#eef2f7 100%); overflow:hidden; isolation:isolate; }
.tpl7 .t7-orb{ position:absolute; border-radius:50%; filter:blur(70px); pointer-events:none; z-index:0; }
.tpl7 .t7-orb--a{ width:34rem; height:34rem; top:-12rem; left:-10rem; background:radial-gradient(circle,rgba(var(--primary-rgb),.32) 0%,transparent 70%); animation:t7floatA 16s ease-in-out infinite; }
.tpl7 .t7-orb--b{ width:30rem; height:30rem; bottom:-14rem; right:-10rem; background:radial-gradient(circle,rgba(var(--accent-rgb),.28) 0%,transparent 70%); animation:t7floatB 20s ease-in-out infinite; }
.tpl7 .t7-level-stack{ display:flex; flex-direction:column; gap:1.6rem; position:relative; z-index:1; max-width:96rem; margin:0 auto; }
.tpl7 .t7-level-pill{ position:relative; display:grid; grid-template-columns:8rem 7.2rem 1fr auto; gap:2.4rem; align-items:center; padding:2.2rem 3rem; border-radius:80px; text-decoration:none; color:var(--white); overflow:hidden; transition:.45s cubic-bezier(.2,.8,.2,1); box-shadow:0 22px 50px rgba(15,23,42,.18); isolation:isolate; }
.tpl7 .t7-level-pill::before{ content:''; position:absolute; inset:0; background:linear-gradient(120deg,rgba(255,255,255,.18) 0%,transparent 50%); opacity:.6; pointer-events:none; }
.tpl7 .t7-level-pill::after{ content:''; position:absolute; right:-8rem; top:-8rem; width:20rem; height:20rem; border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.18) 0%,transparent 70%); transition:transform .6s; pointer-events:none; }
.tpl7 .t7-level-pill:hover{ transform:translateY(-6px) scale(1.01); box-shadow:0 32px 70px rgba(15,23,42,.28); }
.tpl7 .t7-level-pill:hover::after{ transform:scale(1.4); }
.tpl7 .t7-level-pill--1{ background:linear-gradient(110deg,var(--primary) 0%,var(--primary-deeper) 50%,var(--primary) 100%); background-size:200% 100%; animation:t7liquid 12s ease-in-out infinite; }
.tpl7 .t7-level-pill--2{ background:linear-gradient(110deg,var(--primary-light) 0%,var(--primary) 50%,var(--primary-light) 100%); background-size:200% 100%; animation:t7liquid 12s ease-in-out infinite 3s; }
.tpl7 .t7-level-pill--3{ background:linear-gradient(110deg,var(--accent) 0%,var(--accent-dark) 50%,var(--accent) 100%); background-size:200% 100%; animation:t7liquid 12s ease-in-out infinite 6s; }
@keyframes t7liquid{ 0%,100%{background-position:0% 50%;} 50%{background-position:100% 50%;} }
.tpl7 .t7-level-pill-num{ font-size:3.2rem; font-weight:800; color:rgba(255,255,255,.45); letter-spacing:-.02em; line-height:1; }
.tpl7 .t7-level-pill-icon{ width:6.4rem; height:6.4rem; border-radius:50%; background:rgba(255,255,255,.2); border:1.5px solid rgba(255,255,255,.32); display:flex; align-items:center; justify-content:center; font-size:2.4rem; backdrop-filter:blur(8px); box-shadow:inset 0 1px 0 rgba(255,255,255,.4); }
.tpl7 .t7-level-pill-body h4{ font-size:2.4rem; font-weight:800; margin:0 0 .4rem; letter-spacing:-.015em; }
.tpl7 .t7-level-pill-body > p{ font-size:1.35rem; opacity:.92; margin:0 0 .8rem; line-height:1.55; }
.tpl7 .t7-level-pill-meta{ display:flex; flex-wrap:wrap; gap:.6rem; }
.tpl7 .t7-level-pill-meta span{ display:inline-flex; align-items:center; gap:.5rem; padding:.4rem .9rem; border-radius:999px; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.28); font-size:1.1rem; font-weight:600; }
.tpl7 .t7-level-pill-cta{ display:inline-flex; align-items:center; gap:.8rem; padding:1.1rem 1.8rem; border-radius:999px; background:var(--white); color:var(--t7-ink); font-weight:800; font-size:1.25rem; transition:.3s; box-shadow:0 12px 28px rgba(0,0,0,.2); }
.tpl7 .t7-level-pill:hover .t7-level-pill-cta{ background:var(--t7-ink); color:var(--white); gap:1.1rem; }

/* =========== COMPASS (Vision/Mission) - Orb Tower design =========== */
.tpl7 .t7-compass{ padding:10rem 0; position:relative; background:linear-gradient(180deg,#f7f9fc 0%,#eef2f7 100%); overflow:hidden; isolation:isolate; }
.tpl7 .t7-compass::before{ content:''; position:absolute; width:36rem; height:36rem; border-radius:50%; background:radial-gradient(circle,rgba(var(--primary-rgb),.18) 0%,transparent 70%); top:30%; left:50%; transform:translateX(-50%); filter:blur(60px); pointer-events:none; }
.tpl7 .t7-compass-split{ display:grid; grid-template-columns:1fr 6rem 1fr; gap:0; align-items:stretch; position:relative; z-index:1; }
.tpl7 .t7-compass-card{ position:relative; background:rgba(255,255,255,.78); border:1px solid rgba(255,255,255,.9); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-radius:32px; padding:4.4rem 3.6rem; box-shadow:0 28px 60px rgba(15,23,42,.1); transition:.5s cubic-bezier(.2,.8,.2,1); overflow:hidden; }
.tpl7 .t7-compass-card:hover{ transform:translateY(-8px); box-shadow:0 38px 80px rgba(15,23,42,.16); }
.tpl7 .t7-compass-card::before{ content:''; position:absolute; width:24rem; height:24rem; border-radius:50%; background:radial-gradient(circle,var(--compass-color) 0%,transparent 70%); bottom:-12rem; right:-12rem; opacity:.18; transition:transform .6s; }
.tpl7 .t7-compass-card:hover::before{ transform:scale(1.3); }
.tpl7 .t7-compass-card--vision{ --compass-color:var(--primary); }
.tpl7 .t7-compass-card--mission{ --compass-color:var(--accent); }
.tpl7 .t7-compass-orb{ position:relative; width:9rem; height:9rem; margin:0 0 2.4rem; display:flex; align-items:center; justify-content:center; }
.tpl7 .t7-compass-orb-inner{ position:relative; z-index:2; width:6.4rem; height:6.4rem; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:2.6rem; color:var(--white); background:linear-gradient(135deg,var(--compass-color),color-mix(in srgb,var(--compass-color) 60%,#000)); box-shadow:0 18px 40px rgba(15,23,42,.25),inset 0 -8px 16px rgba(0,0,0,.18),inset 0 4px 8px rgba(255,255,255,.3); }
.tpl7 .t7-compass-orb-ring{ position:absolute; inset:0; border-radius:50%; border:1.5px solid var(--compass-color); opacity:.5; animation:t7orbPulse 3s ease-out infinite; }
.tpl7 .t7-compass-orb-ring--2{ animation-delay:1.5s; }
.tpl7 .t7-compass-orb--accent{ --compass-color:var(--accent); }
@keyframes t7orbPulse{ 0%{transform:scale(1);opacity:.6;} 100%{transform:scale(1.6);opacity:0;} }
.tpl7 .t7-compass-card h3{ position:relative; font-size:2.6rem; font-weight:800; margin:0 0 1.4rem; letter-spacing:-.02em; }
.tpl7 .t7-compass-card p{ position:relative; color:#3a4452; font-size:1.55rem; line-height:1.75; margin:0 0 2rem; }
.tpl7 .t7-compass-tag{ position:relative; display:inline-flex; align-items:center; gap:.6rem; padding:.6rem 1.4rem; border-radius:999px; background:rgba(var(--primary-rgb),.08); border:1px solid rgba(var(--primary-rgb),.16); color:var(--primary); font-size:1.15rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.tpl7 .t7-compass-card--mission .t7-compass-tag{ background:rgba(var(--accent-rgb),.1); border-color:rgba(var(--accent-rgb),.18); color:var(--accent); }
.tpl7 .t7-compass-list{ position:relative; list-style:none; padding:0; margin:0; }
.tpl7 .t7-compass-list li{ display:flex; gap:1.4rem; padding:1.1rem 0; border-bottom:1px dashed rgba(15,23,42,.08); font-size:1.4rem; line-height:1.6; color:#3a4452; }
.tpl7 .t7-compass-list li:last-child{ border-bottom:none; }
.tpl7 .t7-compass-dot{ width:.9rem; height:.9rem; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent-dark)); flex-shrink:0; margin-top:.7rem; box-shadow:0 0 0 4px rgba(var(--accent-rgb),.18); }
.tpl7 .t7-compass-connector{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem; }
.tpl7 .t7-compass-connector span{ width:1.4rem; height:1.4rem; border-radius:50%; background:rgba(var(--primary-rgb),.16); border:2px solid #fff; box-shadow:0 4px 14px rgba(15,23,42,.1); }
.tpl7 .t7-compass-connector span:nth-child(2){ background:linear-gradient(135deg,var(--primary),var(--primary-light)); width:2rem; height:2rem; }
.tpl7 .t7-compass-connector span:nth-child(3){ background:rgba(var(--primary-rgb),.16); }

/* =========== STORIES CAROUSEL (replaces t7-mission cards) =========== */
.tpl7 .t7-stories{ padding:10rem 0 9rem; position:relative; background:var(--white); overflow:hidden; isolation:isolate; }
.tpl7 .t7-stories::before{ content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(var(--primary-rgb),.18),transparent); }
.tpl7 .t7-stories::after{ content:''; position:absolute; width:30rem; height:30rem; border-radius:50%; background:radial-gradient(circle,rgba(var(--accent-rgb),.12) 0%,transparent 70%); bottom:-12rem; left:-10rem; filter:blur(60px); pointer-events:none; }
.tpl7 .t7-stories-stage{ overflow:hidden; padding:1rem 0; position:relative; z-index:1; }
.tpl7 .t7-stories-track{ display:flex; gap:2rem; transition:transform .7s cubic-bezier(.2,.8,.2,1); }
.tpl7 .t7-story{ flex:0 0 calc((100% - 4rem) / 3); position:relative; border-radius:26px; overflow:hidden; background:var(--t7-ink); box-shadow:0 22px 50px rgba(15,23,42,.18); aspect-ratio:3/4; cursor:pointer; transition:transform .4s,box-shadow .4s; }
.tpl7 .t7-story:hover{ transform:translateY(-8px) scale(1.01); box-shadow:0 32px 70px rgba(15,23,42,.28); }
.tpl7 .t7-story-img{ position:absolute; inset:0; background-size:cover; background-position:center; transition:transform .8s; }
.tpl7 .t7-story:hover .t7-story-img{ transform:scale(1.08); }
.tpl7 .t7-story-shade{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(15,23,42,.4) 0%,transparent 30%,rgba(15,23,42,.92) 100%); }
.tpl7 .t7-story-icon{ position:absolute; top:1.6rem; right:1.6rem; z-index:2; width:4.2rem; height:4.2rem; border-radius:50%; background:rgba(255,255,255,.18); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.32); display:flex; align-items:center; justify-content:center; color:var(--white); font-size:1.7rem; }
.tpl7 .t7-story-body{ position:absolute; left:0; right:0; bottom:0; padding:2.2rem 2.2rem 2.4rem; color:var(--white); z-index:2; }
.tpl7 .t7-story-tag{ display:inline-block; padding:.4rem 1rem; border-radius:999px; background:rgba(255,255,255,.18); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.32); font-size:1.1rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; margin-bottom:1.2rem; }
.tpl7 .t7-story-text{ font-size:1.45rem; line-height:1.7; margin:0; color:rgba(255,255,255,.92); }
.tpl7 .t7-stories-controls{ display:flex; align-items:center; justify-content:center; gap:1.6rem; margin-top:3.5rem; position:relative; z-index:1; }
.tpl7 .t7-stories-arrow{ width:5rem; height:5rem; border-radius:50%; background:var(--white); border:1.5px solid rgba(var(--primary-rgb),.16); color:var(--primary); font-size:1.4rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:.3s; box-shadow:0 12px 28px rgba(15,23,42,.1); }
.tpl7 .t7-stories-arrow:hover{ background:var(--primary); color:var(--white); transform:scale(1.08); box-shadow:0 16px 36px rgba(var(--primary-rgb),.32); }
.tpl7 .t7-stories-progress{ flex:0 0 22rem; max-width:22rem; height:.5rem; border-radius:99px; background:rgba(var(--primary-rgb),.12); overflow:hidden; position:relative; }
.tpl7 .t7-stories-progress span{ display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--primary),var(--accent)); border-radius:99px; transition:width .6s cubic-bezier(.2,.8,.2,1); }

/* =========== ORBIT (Core Values) - circular orbit design =========== */
.tpl7 .t7-orbit{ position:relative; padding:11rem 0 10rem; overflow:hidden; isolation:isolate; color:var(--white);
  background:linear-gradient(160deg,var(--primary-deeper) 0%,var(--primary) 45%,var(--primary-dark) 100%); }
.tpl7 .t7-orbit-grid{ position:absolute; inset:0; background-image:radial-gradient(circle,rgba(255,255,255,.1) 1px,transparent 1.4px); background-size:34px 34px; pointer-events:none; opacity:.5; mask-image:radial-gradient(ellipse at 50% 50%,#000 0%,transparent 75%); -webkit-mask-image:radial-gradient(ellipse at 50% 50%,#000 0%,transparent 75%); }
.tpl7 .t7-orbit::after{ content:''; position:absolute; width:40rem; height:40rem; border-radius:50%; background:radial-gradient(circle,rgba(var(--accent-rgb),.32) 0%,transparent 70%); top:-14rem; right:-10rem; filter:blur(70px); pointer-events:none; }
.tpl7 .t7-orbit-stage{ position:relative; z-index:1; display:grid; grid-template-columns:1fr; gap:5rem; align-items:center; }
.tpl7 .t7-orbit-core{ position:relative; width:14rem; height:14rem; margin:0 auto; display:flex; align-items:center; justify-content:center; }
.tpl7 .t7-orbit-core-inner{ position:relative; z-index:2; width:10rem; height:10rem; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent-dark)); display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--white); text-align:center; box-shadow:0 18px 50px rgba(0,0,0,.4),inset 0 -8px 16px rgba(0,0,0,.18),inset 0 4px 8px rgba(255,255,255,.3); }
.tpl7 .t7-orbit-core-eyebrow{ font-size:1.1rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; opacity:.85; }
.tpl7 .t7-orbit-core-inner strong{ font-size:2.2rem; font-weight:800; letter-spacing:-.01em; line-height:1; margin:.2rem 0; }
.tpl7 .t7-orbit-core-sub{ font-size:1.1rem; opacity:.85; }
.tpl7 .t7-orbit-core-ring{ position:absolute; inset:0; border-radius:50%; border:1.5px dashed rgba(255,255,255,.4); animation:t7coreSpin 24s linear infinite; }
.tpl7 .t7-orbit-core-ring--2{ inset:-1.5rem; border-style:dotted; opacity:.6; animation:t7coreSpin 32s linear infinite reverse; }
@keyframes t7coreSpin{ to{transform:rotate(360deg);} }
.tpl7 .t7-orbit-items{ display:grid; grid-template-columns:repeat(3,1fr); gap:2.4rem; }
.tpl7 .t7-orbit-item{ display:flex; }
.tpl7 .t7-orbit-item-card{ position:relative; width:100%; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-radius:24px; padding:3rem 2.4rem; text-align:center; transition:.4s; overflow:hidden; }
.tpl7 .t7-orbit-item-card::before{ content:''; position:absolute; inset:0; background:radial-gradient(circle at 50% 0%,rgba(var(--accent-rgb),.18) 0%,transparent 60%); pointer-events:none; }
.tpl7 .t7-orbit-item-card:hover{ transform:translateY(-8px); background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.32); box-shadow:0 28px 60px rgba(0,0,0,.32); }
.tpl7 .t7-orbit-item-num{ position:absolute; top:1.6rem; right:2rem; font-size:1.1rem; font-weight:800; color:rgba(255,255,255,.4); letter-spacing:.18em; }
.tpl7 .t7-orbit-item-icon{ width:6.4rem; height:6.4rem; margin:0 auto 1.6rem; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:2.4rem; color:var(--white); background:linear-gradient(135deg,rgba(255,255,255,.2),rgba(255,255,255,.05)); border:1.5px solid rgba(255,255,255,.3); box-shadow:inset 0 1px 0 rgba(255,255,255,.4); position:relative; }
.tpl7 .t7-orbit-item-card:hover .t7-orbit-item-icon{ background:linear-gradient(135deg,var(--accent),var(--accent-dark)); border-color:transparent; transform:rotate(360deg); transition:transform .8s,background .4s; }
.tpl7 .t7-orbit-item-card h3{ font-size:1.95rem; font-weight:800; margin:0 0 1rem; letter-spacing:-.01em; }
.tpl7 .t7-orbit-item-card p{ color:rgba(255,255,255,.75); font-size:1.35rem; line-height:1.65; margin:0; }

/* =========== TILT (Video + Stats) - skew stat cards =========== */
.tpl7 .t7-tilt{ padding:10rem 0; position:relative; background:linear-gradient(180deg,#e4eaf3 0%,#edf1f7 50%,#e8edf4 100%); overflow:hidden; isolation:isolate; }
.tpl7 .t7-tilt::before{ content:''; position:absolute; width:34rem; height:34rem; border-radius:50%; background:radial-gradient(circle,rgba(var(--primary-rgb),.16) 0%,transparent 70%); bottom:-14rem; right:-8rem; filter:blur(60px); pointer-events:none; }
.tpl7 .t7-tilt-head{ text-align:center; max-width:64rem; margin:0 auto 5rem; position:relative; z-index:1; }
.tpl7 .t7-tilt-head h2{ font-size:clamp(2.4rem,3.8vw,3.6rem); font-weight:800; margin:1.4rem 0; letter-spacing:-.02em; }
.tpl7 .t7-tilt-head h2 em{ font-style:normal; background:linear-gradient(120deg,var(--primary),var(--accent)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.tpl7 .t7-tilt-head p{ color:var(--t7-ink-soft); font-size:1.5rem; line-height:1.7; margin:0 auto; max-width:54rem; }
.tpl7 .t7-tilt-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:4rem; align-items:stretch; position:relative; z-index:1; }
.tpl7 .t7-tilt-video{ display:flex; flex-direction:column; gap:1.6rem; }
.tpl7 .t7-tilt-video-frame{ position:relative; border-radius:30px; overflow:hidden; cursor:pointer; box-shadow:0 30px 70px rgba(15,23,42,.22); aspect-ratio:16/10; background:#000; transform:perspective(1200px) rotateY(-3deg); transition:transform .5s; }
.tpl7 .t7-tilt-video-frame:hover{ transform:perspective(1200px) rotateY(0deg); }
.tpl7 .t7-tilt-video-frame img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s; }
.tpl7 .t7-tilt-video-frame:hover img{ transform:scale(1.06); }
.tpl7 .t7-tilt-video-overlay{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.0) 30%,rgba(0,0,0,.6) 100%); z-index:1; }
.tpl7 .t7-tilt-play{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:7.2rem; height:7.2rem; border-radius:50%; background:rgba(255,255,255,.94); color:var(--primary); display:flex; align-items:center; justify-content:center; font-size:2.2rem; z-index:2; box-shadow:0 18px 50px rgba(0,0,0,.4); transition:.3s; }
.tpl7 .t7-tilt-play::before,
.tpl7 .t7-tilt-play::after{ content:''; position:absolute; inset:0; border-radius:50%; border:2px solid rgba(255,255,255,.5); animation:t7pulse 2.4s ease-out infinite; }
.tpl7 .t7-tilt-play::after{ animation-delay:1.2s; }
.tpl7 .t7-tilt-video-frame:hover .t7-tilt-play{ transform:translate(-50%,-50%) scale(1.08); }
.tpl7 .t7-tilt-video-meta{ position:absolute; bottom:1.6rem; left:1.8rem; right:1.8rem; z-index:2; display:flex; justify-content:space-between; align-items:flex-end; }
.tpl7 .t7-tilt-video-time{ display:inline-flex; align-items:center; gap:.5rem; background:rgba(0,0,0,.4); backdrop-filter:blur(10px); color:var(--white); padding:.4rem 1rem; border-radius:99px; font-size:1.15rem; font-weight:600; }
.tpl7 .t7-tilt-video-name{ color:var(--white); font-size:1.6rem; font-weight:800; text-shadow:0 4px 14px rgba(0,0,0,.5); }
@keyframes t7pulse{ 0%{transform:scale(1);opacity:1;} 100%{transform:scale(1.7);opacity:0;} }
.tpl7 .t7-tilt-cta{ align-self:flex-start; display:inline-flex; align-items:center; gap:1rem; padding:1.2rem 2.2rem; border-radius:99px; background:linear-gradient(135deg,var(--primary),var(--primary-light)); color:var(--white); font-weight:800; font-size:1.35rem; text-decoration:none; box-shadow:0 14px 30px rgba(var(--primary-rgb),.32); transition:.3s; }
.tpl7 .t7-tilt-cta:hover{ transform:translateY(-3px); box-shadow:0 22px 44px rgba(var(--primary-rgb),.42); }
.tpl7 .t7-tilt-stats{ display:flex; flex-direction:column; gap:1.4rem; }
.tpl7 .t7-tilt-stat{ position:relative; padding:2rem 2.2rem; background:rgba(255,255,255,.85); border:1px solid rgba(255,255,255,.9); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-radius:24px; box-shadow:0 18px 44px rgba(15,23,42,.08); transition:.4s; overflow:hidden; display:grid; grid-template-columns:6rem 1fr; grid-template-rows:auto auto auto; gap:.4rem 1.6rem; align-items:center; }
.tpl7 .t7-tilt-stat::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:linear-gradient(180deg,var(--tilt-color),color-mix(in srgb,var(--tilt-color) 60%,#000)); }
.tpl7 .t7-tilt-stat:hover{ transform:translateX(4px); box-shadow:0 26px 60px rgba(15,23,42,.14); }
.tpl7 .t7-tilt-stat--1{ --tilt-color:#6ee7b7; }
.tpl7 .t7-tilt-stat--2{ --tilt-color:#fbbf24; }
.tpl7 .t7-tilt-stat--3{ --tilt-color:#60a5fa; }
.tpl7 .t7-tilt-stat-icon{ grid-row:1 / span 2; width:5.4rem; height:5.4rem; border-radius:18px; display:flex; align-items:center; justify-content:center; font-size:2.2rem; color:var(--white); background:linear-gradient(135deg,var(--tilt-color),color-mix(in srgb,var(--tilt-color) 50%,#000)); box-shadow:0 12px 26px rgba(0,0,0,.16); }
.tpl7 .t7-tilt-stat-num{ font-size:3.2rem; font-weight:800; letter-spacing:-.025em; color:var(--t7-ink); line-height:1; }
.tpl7 .t7-tilt-stat-num .suffix{ color:var(--tilt-color); }
.tpl7 .t7-tilt-stat-label{ font-size:1.35rem; font-weight:800; color:var(--t7-ink-soft); letter-spacing:.02em; }
.tpl7 .t7-tilt-stat-bar{ grid-column:1 / -1; height:8px; border-radius:99px; background:rgba(15,23,42,.06); overflow:hidden; margin-top:.6rem; }
.tpl7 .t7-tilt-stat-bar span{ display:block; height:100%; background:linear-gradient(90deg,var(--tilt-color),color-mix(in srgb,var(--tilt-color) 50%,#000)); border-radius:99px; transition:width 1.6s ease-out; }
.tpl7 .t7-tilt-stat-desc{ grid-column:1 / -1; font-size:1.25rem; color:var(--t7-ink-soft); line-height:1.55; margin:.4rem 0 0; }

/* =========== MOSAIC (Bento Portal Features) - floating glow tiles =========== */
.tpl7 .t7-mosaic{ padding:10rem 0 9rem; position:relative; background:linear-gradient(180deg,#f8f5f0 0%,#f5f0e8 50%,#f0ebe2 100%); overflow:hidden; isolation:isolate; }
.tpl7 .t7-mosaic::before,
.tpl7 .t7-mosaic::after{ content:''; position:absolute; border-radius:50%; filter:blur(80px); pointer-events:none; z-index:0; }
.tpl7 .t7-mosaic::before{ width:36rem; height:36rem; top:-12rem; right:-10rem; background:radial-gradient(circle,rgba(var(--primary-light-rgb),.22) 0%,transparent 70%); }
.tpl7 .t7-mosaic::after{ width:30rem; height:30rem; bottom:-10rem; left:-8rem; background:radial-gradient(circle,rgba(var(--accent-rgb),.18) 0%,transparent 70%); }
.tpl7 .t7-mosaic-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; position:relative; z-index:1; }
.tpl7 .t7-mosaic-tile{ position:relative; padding:2.6rem 2.4rem; background:rgba(255,255,255,.78); border:1px solid rgba(255,255,255,.9); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-radius:24px; text-decoration:none; color:var(--t7-ink); box-shadow:0 18px 44px rgba(15,23,42,.08); transition:.45s cubic-bezier(.2,.8,.2,1); overflow:hidden; display:flex; flex-direction:column; min-height:22rem; }
.tpl7 .t7-mosaic-tile-glow{ position:absolute; width:16rem; height:16rem; border-radius:50%; background:radial-gradient(circle,var(--tile-color) 0%,transparent 70%); top:-8rem; right:-8rem; opacity:.22; transition:transform .6s,opacity .4s; pointer-events:none; }
.tpl7 .t7-mosaic-tile::before{ content:''; position:absolute; inset:0; border-radius:24px; padding:1.5px; background:linear-gradient(135deg,var(--tile-color),transparent 50%,var(--tile-color)); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity .4s; pointer-events:none; }
.tpl7 .t7-mosaic-tile:hover{ transform:translateY(-10px); background:rgba(255,255,255,.94); box-shadow:0 32px 70px rgba(15,23,42,.18); }
.tpl7 .t7-mosaic-tile:hover::before{ opacity:.6; }
.tpl7 .t7-mosaic-tile:hover .t7-mosaic-tile-glow{ transform:scale(1.4); opacity:.32; }
.tpl7 .t7-mosaic-tile--hero{ grid-row:span 2; background:linear-gradient(160deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.78) 100%); }
.tpl7 .t7-mosaic-tile--wide{ grid-column:span 2; }
.tpl7 .t7-mosaic-tile-icon{ position:relative; width:5.6rem; height:5.6rem; border-radius:18px; display:flex; align-items:center; justify-content:center; font-size:2.2rem; color:var(--white); margin-bottom:1.6rem; background:linear-gradient(135deg,var(--tile-color),color-mix(in srgb,var(--tile-color) 55%,#000)); box-shadow:0 16px 32px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.4); flex-shrink:0; }
.tpl7 .t7-mosaic-tile-tag{ display:inline-flex; align-items:center; align-self:flex-start; padding:.3rem .9rem; border-radius:99px; background:rgba(var(--tile-color-rgb,var(--primary-rgb)),.12); color:var(--tile-color); font-size:1.1rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; margin-bottom:1rem; }
.tpl7 .t7-mosaic-tile--hero .t7-mosaic-tile-tag{ color:var(--primary); background:rgba(var(--primary-rgb),.12); }
.tpl7 .t7-mosaic-tile h3{ font-size:1.95rem; font-weight:800; margin:0 0 .8rem; color:var(--t7-ink); letter-spacing:-.01em; }
.tpl7 .t7-mosaic-tile p{ color:var(--t7-ink-soft); font-size:1.35rem; line-height:1.65; margin:0 0 1.4rem; }
.tpl7 .t7-mosaic-tile--hero h3{ font-size:2.6rem; }
.tpl7 .t7-mosaic-tile--hero p{ font-size:1.5rem; max-width:36rem; }
.tpl7 .t7-mosaic-tile-chart{ display:flex; align-items:flex-end; gap:.4rem; height:9rem; margin-top:auto; padding-top:1.4rem; }
.tpl7 .t7-mosaic-tile-chart span{ flex:1; background:linear-gradient(180deg,var(--primary),color-mix(in srgb,var(--primary) 50%,#fff)); border-radius:6px 6px 0 0; opacity:.7; min-height:6%; transition:.4s; }
.tpl7 .t7-mosaic-tile:hover .t7-mosaic-tile-chart span{ opacity:1; }
.tpl7 .t7-mosaic-tile-chart span:nth-child(odd){ background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 50%,#fff)); }
.tpl7 .t7-mosaic-tile-link{ display:inline-flex; align-items:center; gap:.6rem; font-weight:800; font-size:1.3rem; color:var(--tile-color); margin-top:1.4rem; transition:gap .3s; }
.tpl7 .t7-mosaic-tile:hover .t7-mosaic-tile-link{ gap:1rem; }
.tpl7 .t7-mosaic-tile--hero{ --tile-color:var(--primary); }
.tpl7 .t7-mosaic-tile--s1{ --tile-color:var(--primary-light); }
.tpl7 .t7-mosaic-tile--s2{ --tile-color:var(--accent); }
.tpl7 .t7-mosaic-tile--s3{ --tile-color:#7c3aed; }
.tpl7 .t7-mosaic-tile--s4{ --tile-color:#0891b2; }
.tpl7 .t7-mosaic-tile--s5{ --tile-color:#dc2626; }
.tpl7 .t7-mosaic-tile--s6{ --tile-color:#0f766e; }
/* Wide tile: split layout */
.tpl7 .t7-mosaic-tile--wide{ background:linear-gradient(135deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.74) 100%); }
.tpl7 .t7-mosaic-tile--wide{ --tile-color:#db2777; }
.tpl7 .t7-mosaic-tile-row{ display:grid; grid-template-columns:1.1fr .9fr; gap:2.4rem; align-items:center; flex:1; }
.tpl7 .t7-mosaic-tile-bubbles{ display:flex; flex-direction:column; gap:.6rem; }
.tpl7 .t7-mosaic-bubble{ font-size:1.15rem; padding:.8rem 1.2rem; border-radius:18px 18px 18px 4px; max-width:24rem; line-height:1.4; }
.tpl7 .t7-mosaic-bubble--in{ background:rgba(var(--primary-rgb),.12); color:var(--primary); align-self:flex-start; }
.tpl7 .t7-mosaic-bubble--out{ background:var(--t7-ink); color:var(--white); align-self:flex-end; border-radius:18px 18px 4px 18px; }

/* =========== WHY - 3D isometric stair tiles =========== */
.tpl7 .t7-why{ padding:10rem 0; position:relative; background:linear-gradient(180deg,#ffffff 0%,#f5f9f6 50%,#eef7f0 100%); overflow:hidden; isolation:isolate; }
.tpl7 .t7-why::before{ content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(var(--primary-rgb),.18),transparent); }
.tpl7 .t7-why::after{ content:''; position:absolute; width:28rem; height:28rem; border-radius:50%; background:radial-gradient(circle,rgba(var(--accent-rgb),.12) 0%,transparent 70%); bottom:-10rem; right:-8rem; filter:blur(60px); pointer-events:none; }
.tpl7 .t7-why-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; position:relative; z-index:1; perspective:1400px; }
.tpl7 .t7-why-tile{ position:relative; padding:3rem 2.4rem 2.8rem; min-height:30rem; border-radius:24px; background:rgba(255,255,255,.92); border:1px solid rgba(255,255,255,.9); backdrop-filter:blur(20px); box-shadow:0 18px 40px rgba(15,23,42,.08); transition:.5s cubic-bezier(.2,.8,.2,1); overflow:hidden; transform-style:preserve-3d; }
.tpl7 .t7-why-tile::before{ content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(255,255,255,.4) 0%,transparent 60%); border-radius:24px; pointer-events:none; opacity:0; transition:opacity .4s; }
.tpl7 .t7-why-tile::after{ content:''; position:absolute; left:0; right:0; bottom:-1.2rem; height:1.2rem; background:rgba(15,23,42,.08); border-radius:0 0 24px 24px; filter:blur(8px); transform-origin:bottom; transform:scaleY(.4); transition:transform .5s,opacity .5s; opacity:.6; }
.tpl7 .t7-why-tile:hover{ transform:translateY(-14px) rotateX(4deg); box-shadow:0 32px 70px rgba(15,23,42,.16); }
.tpl7 .t7-why-tile:hover::after{ transform:scaleY(1); opacity:1; }
.tpl7 .t7-why-tile-num{ position:absolute; top:2rem; right:2.2rem; font-size:4.2rem; font-weight:800; line-height:1; letter-spacing:-.04em;
  background:linear-gradient(180deg,var(--why-color) 0%,transparent 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; opacity:.32; transition:opacity .4s,transform .4s; }
.tpl7 .t7-why-tile:hover .t7-why-tile-num{ opacity:.6; transform:scale(1.1); }
.tpl7 .t7-why-tile-icon{ position:relative; width:6.4rem; height:6.4rem; margin-bottom:2.4rem; border-radius:22px; display:flex; align-items:center; justify-content:center; font-size:2.4rem; color:var(--white); background:linear-gradient(135deg,var(--why-color),color-mix(in srgb,var(--why-color) 50%,#000)); box-shadow:0 18px 40px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.4),0 0 0 6px rgba(255,255,255,.4); }
.tpl7 .t7-why-tile:hover .t7-why-tile-icon{ transform:rotate(-6deg) scale(1.05); box-shadow:0 22px 50px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.4),0 0 0 6px rgba(255,255,255,.4); }
.tpl7 .t7-why-tile h3{ position:relative; font-size:1.95rem; font-weight:800; margin:0 0 1rem; color:var(--t7-ink); letter-spacing:-.01em; }
.tpl7 .t7-why-tile p{ position:relative; color:var(--t7-ink-soft); font-size:1.35rem; line-height:1.65; margin:0; }
.tpl7 .t7-why-tile--1{ --why-color:var(--primary); }
.tpl7 .t7-why-tile--2{ --why-color:var(--primary-light); }
.tpl7 .t7-why-tile--3{ --why-color:var(--accent); }
.tpl7 .t7-why-tile--4{ --why-color:#7c3aed; }

/* =========== FOUNDER - chat bubble design =========== */
.tpl7 .t7-founder{ padding:10rem 0; position:relative; background:linear-gradient(180deg,#f7f9fc 0%,#eef2f7 100%); overflow:hidden; isolation:isolate; }
.tpl7 .t7-founder::before{ content:''; position:absolute; width:34rem; height:34rem; border-radius:50%; background:radial-gradient(circle,rgba(var(--accent-rgb),.16) 0%,transparent 70%); top:-14rem; right:-10rem; filter:blur(70px); pointer-events:none; }
.tpl7 .t7-founder-card{ position:relative; max-width:96rem; margin:0 auto; display:grid; grid-template-columns:18rem 1fr; gap:3rem; align-items:start; background:rgba(255,255,255,.85); border:1px solid rgba(255,255,255,.9); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-radius:32px; padding:4rem 4.4rem; box-shadow:0 32px 70px rgba(15,23,42,.12); z-index:1; }
.tpl7 .t7-founder-card::before{ content:''; position:absolute; width:20rem; height:20rem; border-radius:50%; background:radial-gradient(circle,rgba(var(--primary-rgb),.18) 0%,transparent 70%); bottom:-10rem; left:-8rem; filter:blur(40px); pointer-events:none; }
.tpl7 .t7-founder-avatar-col{ display:flex; flex-direction:column; align-items:center; gap:1.6rem; }
.tpl7 .t7-founder-avatar{ width:13rem; height:13rem; border-radius:50%; background:linear-gradient(135deg,var(--primary),var(--accent)); color:var(--white); display:flex; align-items:center; justify-content:center; font-size:5.4rem; font-weight:800; box-shadow:0 24px 50px rgba(var(--primary-rgb),.32),inset 0 -12px 24px rgba(0,0,0,.18),inset 0 4px 8px rgba(255,255,255,.3); }
.tpl7 .t7-founder-stars{ display:flex; gap:.4rem; color:var(--accent); font-size:1.4rem; }
.tpl7 .t7-founder-bubble{ position:relative; padding:2.6rem 3rem 2.8rem; background:linear-gradient(135deg,var(--primary) 0%,var(--primary-light) 100%); border-radius:32px 32px 32px 8px; color:var(--white); box-shadow:0 22px 50px rgba(var(--primary-rgb),.32); }
.tpl7 .t7-founder-bubble::before{ content:''; position:absolute; left:-1.2rem; top:3rem; width:0; height:0; border:1.2rem solid transparent; border-right-color:var(--primary); }
.tpl7 .t7-founder-quote{ font-size:1.85rem; line-height:1.75; margin:0 0 2.4rem; font-weight:500; font-style:italic; color:rgba(255,255,255,.96); }
.tpl7 .t7-founder-meta h3{ font-size:1.8rem; font-weight:800; margin:0 0 .3rem; color:var(--white); }
.tpl7 .t7-founder-meta p{ color:rgba(255,255,255,.78); font-size:1.3rem; margin:0; }

/* =========== PRESS (News) - magazine ribbon cards =========== */
.tpl7 .t7-press{ padding:10rem 0; position:relative; background:var(--white); overflow:hidden; isolation:isolate; }
.tpl7 .t7-press::before{ content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(var(--primary-rgb),.18),transparent); }
.tpl7 .t7-press::after{ content:''; position:absolute; width:32rem; height:32rem; border-radius:50%; background:radial-gradient(circle,rgba(var(--primary-rgb),.12) 0%,transparent 70%); top:30%; left:-10rem; filter:blur(50px); pointer-events:none; }
.tpl7 .t7-press-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2.4rem; position:relative; z-index:1; }
.tpl7 .t7-press-card{ position:relative; background:rgba(255,255,255,.85); border:1px solid rgba(255,255,255,.9); backdrop-filter:blur(18px); border-radius:24px; overflow:hidden; text-decoration:none; color:var(--t7-ink); box-shadow:0 18px 40px rgba(15,23,42,.08); transition:.4s; display:flex; flex-direction:column; }
.tpl7 .t7-press-card:hover{ transform:translateY(-10px) rotate(-.4deg); box-shadow:0 32px 70px rgba(15,23,42,.16); }
.tpl7 .t7-press-ribbon{ position:absolute; top:1.6rem; right:-3.2rem; z-index:2; width:14rem; background:linear-gradient(135deg,var(--accent),var(--accent-dark)); color:var(--white); text-align:center; padding:.5rem 0; transform:rotate(38deg); box-shadow:0 4px 12px rgba(0,0,0,.18); font-size:1.15rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em; line-height:1.2; }
.tpl7 .t7-press-ribbon strong{ display:block; font-size:1.6rem; font-weight:800; }
.tpl7 .t7-press-img{ position:relative; aspect-ratio:16/10; background-size:cover; background-position:center; }
.tpl7 .t7-press-img::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,0) 50%,rgba(0,0,0,.4) 100%); }
.tpl7 .t7-press-body{ padding:2.4rem 2.4rem 2.6rem; flex:1; display:flex; flex-direction:column; }
.tpl7 .t7-press-tag{ display:inline-flex; align-items:center; gap:.5rem; align-self:flex-start; padding:.4rem 1rem; border-radius:99px; background:rgba(var(--primary-rgb),.08); color:var(--primary); font-size:1.15rem; font-weight:800; margin-bottom:1.2rem; }
.tpl7 .t7-press-card h3{ font-size:2rem; font-weight:800; margin:0 0 1rem; letter-spacing:-.01em; }
.tpl7 .t7-press-card p{ color:var(--t7-ink-soft); font-size:1.4rem; line-height:1.65; margin:0 0 1.6rem; flex:1; }
.tpl7 .t7-press-link{ display:inline-flex; align-items:center; gap:.6rem; font-weight:800; font-size:1.3rem; color:var(--primary); margin-top:auto; transition:gap .3s; }
.tpl7 .t7-press-card:hover .t7-press-link{ gap:1rem; }

/* =========== GALLERY (Academic Showcase) - phone, book, image cards =========== */
.tpl7 .t7-gallery{ padding:10rem 0; position:relative; background:linear-gradient(180deg,#f7f9fc 0%,#eef2f7 100%); overflow:hidden; isolation:isolate; }
.tpl7 .t7-gallery::before{ content:''; position:absolute; width:34rem; height:34rem; border-radius:50%; background:radial-gradient(circle,rgba(var(--accent-rgb),.14) 0%,transparent 70%); top:-10rem; left:-10rem; filter:blur(60px); pointer-events:none; }
.tpl7 .t7-gallery-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:2.4rem; position:relative; z-index:1; }
.tpl7 .t7-gallery-card{ position:relative; background:var(--white); border-radius:26px; overflow:hidden; text-decoration:none; color:var(--t7-ink); box-shadow:0 18px 40px rgba(15,23,42,.08); transition:.45s; display:flex; flex-direction:column; }
.tpl7 .t7-gallery-card:hover{ transform:translateY(-10px); box-shadow:0 32px 70px rgba(15,23,42,.16); }

.tpl7 .t7-gallery-card--phone .t7-gallery-phone{ padding:3rem 2rem 2rem; background:linear-gradient(160deg,var(--primary-mist) 0%,#e0eaf5 100%); display:flex; align-items:center; justify-content:center; }
.tpl7 .t7-gallery-phone{ position:relative; width:18rem; aspect-ratio:9/19; background:#1a1d21; border-radius:32px; padding:.8rem; box-shadow:0 30px 60px rgba(15,23,42,.32),inset 0 0 0 2px rgba(255,255,255,.08); }
.tpl7 .t7-gallery-phone-notch{ position:absolute; top:.8rem; left:50%; transform:translateX(-50%); width:6rem; height:1.4rem; background:#1a1d21; border-radius:0 0 14px 14px; z-index:2; }
.tpl7 .t7-gallery-phone-screen{ position:relative; width:100%; height:100%; background:var(--white); border-radius:22px; overflow:hidden; padding:1.4rem 1rem; display:flex; flex-direction:column; gap:1rem; }
.tpl7 .t7-phone-doc{ display:flex; flex-direction:column; gap:.6rem; }
.tpl7 .t7-phone-band{ height:.6rem; background:linear-gradient(90deg,var(--primary),var(--primary-light)); border-radius:99px; }
.tpl7 .t7-phone-rows{ display:flex; flex-direction:column; gap:.4rem; }
.tpl7 .t7-phone-row{ display:flex; gap:.4rem; align-items:center; }
.tpl7 .t7-phone-row span{ flex:1; height:.5rem; background:#e8eaed; border-radius:2px; }
.tpl7 .t7-phone-row span:nth-child(3){ flex:0 0 1.6rem; }
.tpl7 .t7-phone-grade{ display:flex !important; align-items:center; justify-content:center; flex:0 0 1.6rem !important; height:1.6rem !important; width:1.6rem; border-radius:6px; font-size:.9rem; font-weight:800; color:var(--white); }
.tpl7 .t7-phone-grade--a{ background:#16a34a; }
.tpl7 .t7-phone-grade--b{ background:#2563eb; }
.tpl7 .t7-phone-grade--c{ background:#f59e0b; }
.tpl7 .t7-phone-foot{ margin-top:auto; display:flex; justify-content:space-between; padding-top:.6rem; border-top:1px dashed #e8eaed; }
.tpl7 .t7-phone-pct{ font-size:1.4rem; font-weight:800; color:var(--primary); }
.tpl7 .t7-phone-rank{ font-size:1rem; font-weight:700; color:var(--accent); padding:.2rem .6rem; border-radius:99px; background:rgba(var(--accent-rgb),.1); align-self:center; }

.tpl7 .t7-gallery-card--book{ background:linear-gradient(160deg,#fff8e6,#f3e6c8); }
.tpl7 .t7-gallery-book{ position:relative; padding:4rem 2rem; aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; }
.tpl7 .t7-gallery-book-stack{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:18rem; height:22rem; }
.tpl7 .t7-gallery-book-stack span{ position:absolute; inset:0; border-radius:8px; box-shadow:0 18px 40px rgba(15,23,42,.18); }
.tpl7 .t7-gallery-book-stack span:nth-child(1){ background:var(--white); transform:rotate(-6deg) translate(-8px,-2px); }
.tpl7 .t7-gallery-book-stack span:nth-child(2){ background:var(--white); transform:rotate(2deg) translate(0,0); }
.tpl7 .t7-gallery-book-cover{ position:relative; width:18rem; height:22rem; background:linear-gradient(135deg,var(--primary),var(--primary-light)); border-radius:8px; box-shadow:0 22px 50px rgba(15,23,42,.32); display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--white); padding:1.4rem; transform:rotate(-3deg); transition:transform .4s; z-index:2; overflow:hidden; }
.tpl7 .t7-gallery-card:hover .t7-gallery-book-cover{ transform:rotate(0); }
.tpl7 .t7-gallery-book-cover::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:.5rem; background:rgba(0,0,0,.18); }
.tpl7 .t7-gallery-book-year{ font-size:1.6rem; font-weight:800; opacity:.6; letter-spacing:.18em; }
.tpl7 .t7-gallery-book-title{ font-size:2.6rem; font-weight:800; letter-spacing:.08em; margin:.4rem 0; }
.tpl7 .t7-gallery-book-sub{ font-size:1.3rem; opacity:.8; font-style:italic; }
.tpl7 .t7-gallery-book-shine{ position:absolute; inset:0; background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.4) 50%,transparent 70%); z-index:3; pointer-events:none; transform:translateX(-100%); transition:transform .8s; }
.tpl7 .t7-gallery-card:hover .t7-gallery-book-shine{ transform:translateX(100%); }

.tpl7 .t7-gallery-card--image .t7-gallery-image{ position:relative; aspect-ratio:4/3; overflow:hidden; }
.tpl7 .t7-gallery-image img{ width:100%; height:100%; object-fit:cover; transition:transform .6s; }
.tpl7 .t7-gallery-card:hover .t7-gallery-image img{ transform:scale(1.08); }
.tpl7 .t7-gallery-image-corner{ position:absolute; top:1.2rem; right:1.2rem; width:3.6rem; height:3.6rem; border-radius:50%; background:rgba(255,255,255,.92); color:var(--primary); display:flex; align-items:center; justify-content:center; font-size:1.4rem; backdrop-filter:blur(8px); transition:.3s; }
.tpl7 .t7-gallery-card:hover .t7-gallery-image-corner{ transform:scale(1.1) rotate(90deg); }
.tpl7 .t7-gallery-image-caption{ position:absolute; left:1.2rem; bottom:1.2rem; background:rgba(255,255,255,.92); color:var(--primary); padding:.5rem 1rem; border-radius:99px; font-size:1.2rem; font-weight:700; display:inline-flex; align-items:center; gap:.5rem; backdrop-filter:blur(8px); }
.tpl7 .t7-gallery-body{ padding:2.4rem 2.4rem 2.6rem; flex:1; }
.tpl7 .t7-gallery-tag{ display:inline-flex; align-items:center; gap:.5rem; padding:.4rem 1rem; border-radius:99px; background:rgba(var(--primary-rgb),.1); color:var(--primary); font-size:1.15rem; font-weight:800; margin-bottom:1.2rem; }
.tpl7 .t7-gallery-body h3{ font-size:2rem; font-weight:800; margin:0 0 1rem; letter-spacing:-.01em; }
.tpl7 .t7-gallery-body p{ color:var(--t7-ink-soft); font-size:1.4rem; line-height:1.65; margin:0 0 1.6rem; }
.tpl7 .t7-gallery-link{ display:inline-flex; align-items:center; gap:.6rem; font-weight:800; font-size:1.3rem; color:var(--primary); transition:gap .3s; }
.tpl7 .t7-gallery-card:hover .t7-gallery-link{ gap:1rem; }

/* =========== JOIN (Newsletter) - glass card with floating particles =========== */
.tpl7 .t7-join{ padding:10rem 0; background:var(--white); position:relative; overflow:hidden; }
.tpl7 .t7-join::before{ content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(var(--primary-rgb),.18),transparent); }
.tpl7 .t7-join-card{ position:relative; background:linear-gradient(135deg,var(--primary-deeper) 0%,var(--primary) 60%,var(--primary-light) 100%); border-radius:36px; padding:5rem 5rem; color:var(--white); box-shadow:0 40px 90px rgba(var(--primary-rgb),.32); overflow:hidden; isolation:isolate; display:grid; grid-template-columns:1.1fr .9fr; gap:4rem; align-items:center; }
.tpl7 .t7-join-card::before{ content:''; position:absolute; inset:0; background-image:radial-gradient(circle,rgba(255,255,255,.06) 1px,transparent 1.4px); background-size:30px 30px; pointer-events:none; opacity:.5; }
.tpl7 .t7-join-card::after{ content:''; position:absolute; width:30rem; height:30rem; border-radius:50%; background:radial-gradient(circle,rgba(var(--accent-rgb),.32) 0%,transparent 70%); top:-14rem; left:-10rem; filter:blur(60px); pointer-events:none; }
.tpl7 .t7-join-particle{ position:absolute; border-radius:50%; background:rgba(255,255,255,.5); pointer-events:none; }
.tpl7 .t7-join-particle--1{ width:1rem; height:1rem; top:12%; right:18%; animation:t7floatA 8s ease-in-out infinite; box-shadow:0 0 18px rgba(255,255,255,.5); }
.tpl7 .t7-join-particle--2{ width:.7rem; height:.7rem; top:38%; right:8%; animation:t7floatB 9s ease-in-out infinite 1.2s; box-shadow:0 0 14px rgba(255,255,255,.5); }
.tpl7 .t7-join-particle--3{ width:1.4rem; height:1.4rem; bottom:18%; left:30%; animation:t7floatA 10s ease-in-out infinite 2.4s; box-shadow:0 0 22px rgba(255,255,255,.5); }
.tpl7 .t7-join-particle--4{ width:.6rem; height:.6rem; top:60%; left:48%; animation:t7floatB 11s ease-in-out infinite 3.6s; box-shadow:0 0 12px rgba(255,255,255,.5); }
.tpl7 .t7-join-text{ position:relative; z-index:1; }
.tpl7 .t7-join-text .t7-eyebrow{ background:rgba(var(--gold-rgb),.14); border-color:rgba(var(--gold-rgb),.28); color:var(--gold-bright); margin-bottom:1.6rem; }
.tpl7 .t7-join-text h2{ font-size:clamp(2.6rem,4.2vw,3.8rem); font-weight:800; margin:0 0 1.4rem; letter-spacing:-.025em; color:var(--gold-bright); }
.tpl7 .t7-join-text h2 em{ font-style:italic; background:none; -webkit-background-clip:initial; background-clip:initial; -webkit-text-fill-color:var(--primary-mist); color:var(--primary-mist); }
.tpl7 .t7-join-text p{ color:rgba(255,255,255,.85); font-size:1.5rem; line-height:1.7; margin:0 0 2.4rem; }
.tpl7 .t7-join-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.tpl7 .t7-join-stats > div{ background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); border-radius:18px; padding:1.4rem 1rem; text-align:center; backdrop-filter:blur(8px); }
.tpl7 .t7-join-stats strong{ display:block; font-size:2rem; font-weight:800; color:var(--white); }
.tpl7 .t7-join-stats span{ display:block; color:rgba(255,255,255,.78); font-size:1.15rem; margin-top:.3rem; }
.tpl7 .t7-join-form{ position:relative; z-index:1; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); backdrop-filter:blur(20px); border-radius:28px; padding:3.4rem 3rem; }
.tpl7 .t7-join-form h3{ font-size:2.2rem; font-weight:800; margin:0 0 1.8rem; color:var(--white); display:flex; align-items:center; gap:.8rem; }
.tpl7 .t7-join-input-wrap{ position:relative; margin-bottom:1.2rem; }
.tpl7 .t7-join-input-wrap i{ position:absolute; left:1.6rem; top:50%; transform:translateY(-50%); color:rgba(255,255,255,.7); font-size:1.4rem; }
.tpl7 .t7-join-input{ width:100%; padding:1.4rem 1.6rem 1.4rem 4.4rem; border-radius:14px; border:1.5px solid rgba(255,255,255,.28); background:rgba(255,255,255,.08); color:var(--white); font-size:1.4rem; backdrop-filter:blur(10px); outline:none; transition:.3s; }
.tpl7 .t7-join-input::placeholder{ color:rgba(255,255,255,.6); }
.tpl7 .t7-join-input:focus{ border-color:var(--white); background:rgba(255,255,255,.16); }
.tpl7 .t7-join-submit{ width:100%; padding:1.5rem 2rem; border-radius:14px; border:none; background:var(--white); color:var(--primary); font-size:1.45rem; font-weight:800; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:.8rem; transition:.3s; box-shadow:0 14px 30px rgba(0,0,0,.2); }
.tpl7 .t7-join-submit:hover{ transform:translateY(-3px); box-shadow:0 22px 44px rgba(0,0,0,.32); }
.tpl7 .t7-join-foot{ color:rgba(255,255,255,.78); font-size:1.2rem; margin:1.4rem 0 0; display:flex; align-items:center; gap:.5rem; justify-content:center; }

/* =========== BOTTOM CTA =========== */
.tpl7 .t7-cta{ position:relative; overflow:hidden; isolation:isolate; margin:0 2.4rem 9rem; border-radius:36px; padding:7rem 4rem; text-align:center;
  background:linear-gradient(125deg,var(--primary-deeper) 0%,var(--primary) 40%,var(--primary-light) 80%,var(--accent) 115%);
  background-size:220% 220%; animation:t7mesh 22s ease-in-out infinite; box-shadow:0 40px 90px rgba(15,23,42,.25); }
.tpl7 .t7-cta::before{ content:''; position:absolute; width:30rem; height:30rem; border-radius:50%; background:radial-gradient(circle,rgba(var(--accent-rgb),.55) 0%,transparent 70%); top:-10rem; left:-8rem; filter:blur(60px); pointer-events:none; animation:t7floatA 18s ease-in-out infinite; }
.tpl7 .t7-cta::after{ content:''; position:absolute; width:26rem; height:26rem; border-radius:50%; background:radial-gradient(circle,rgba(var(--primary-light-rgb),.6) 0%,transparent 70%); bottom:-10rem; right:-6rem; filter:blur(60px); pointer-events:none; animation:t7floatB 22s ease-in-out infinite; }
.tpl7 .t7-cta-inner{ position:relative; z-index:1; }
.tpl7 .t7-cta-eyebrow{ display:inline-flex; align-items:center; gap:.8rem; padding:.7rem 1.6rem; border-radius:999px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.32); backdrop-filter:blur(12px); color:var(--white); font-weight:700; letter-spacing:.1em; text-transform:uppercase; font-size:1.15rem; margin-bottom:2rem; }
.tpl7 .t7-cta h3{ color:var(--white); font-size:clamp(2.8rem,4.6vw,4.4rem); font-weight:800; margin:0 0 1.4rem; line-height:1.1; letter-spacing:-.025em; text-shadow:0 12px 40px rgba(0,0,0,.25); }
.tpl7 .t7-cta p{ color:rgba(255,255,255,.88); font-size:1.55rem; max-width:56rem; margin:0 auto 3rem; line-height:1.7; }
.tpl7 .t7-cta .t7-btn--glass{ background:var(--white); color:var(--primary); }
.tpl7 .t7-cta .t7-btn--outline{ margin-left:1.2rem; }

/* =========== RESPONSIVE =========== */
@media(max-width:1199px){
  .tpl7 .t7-glass-card{ transform:rotate(0); }
  .tpl7 .t7-float-chip--a{ left:-1rem; top:-1rem; }
  .tpl7 .t7-float-chip--b{ right:-1rem; bottom:-1rem; }
  .tpl7 .t7-why-grid{ grid-template-columns:repeat(2,1fr); }
  .tpl7 .t7-gallery-row{ grid-template-columns:repeat(2,1fr); }
  .tpl7 .t7-gallery-card:nth-child(3){ grid-column:span 2; }
  .tpl7 .t7-join-card{ grid-template-columns:1fr; gap:3rem; padding:4rem 3.4rem; }
  .tpl7 .t7-tilt-grid{ grid-template-columns:1fr; gap:3rem; }
  .tpl7 .t7-orbit-items{ grid-template-columns:repeat(2,1fr); }
  .tpl7 .t7-mosaic-tile--hero{ grid-row:auto; grid-column:span 2; }
  .tpl7 .t7-mosaic-tile--wide{ grid-column:span 2; }
  .tpl7 .t7-press-grid{ grid-template-columns:1fr; max-width:50rem; margin:0 auto; }
  .tpl7 .t7-founder-card{ grid-template-columns:1fr; gap:2rem; padding:3rem; }
  .tpl7 .t7-founder-avatar-col{ flex-direction:row; gap:1.6rem; }
  .tpl7 .t7-founder-avatar{ width:9rem; height:9rem; font-size:3.6rem; }
  .tpl7 .t7-founder-bubble::before{ display:none; }
}
@media(max-width:991px){
  .tpl7 .t7-hero-grid{ grid-template-columns:1fr; gap:6rem; }
  .tpl7 .t7-compass-split{ grid-template-columns:1fr; gap:3rem; }
  .tpl7 .t7-compass-connector{ flex-direction:row; padding:1rem 0; }
  .tpl7 .t7-mosaic-grid{ grid-template-columns:repeat(2,1fr); }
  .tpl7 .t7-mosaic-tile--hero{ grid-row:auto; grid-column:span 2; }
  .tpl7 .t7-mosaic-tile--wide{ grid-column:span 2; }
  .tpl7 .t7-mosaic-tile-row{ grid-template-columns:1fr; }
  .tpl7 .t7-level-pill{ grid-template-columns:5rem 5.6rem 1fr; gap:1.6rem; padding:1.8rem 2rem; border-radius:32px; }
  .tpl7 .t7-level-pill-cta{ grid-column:1 / -1; justify-self:start; }
  .tpl7 .t7-btn--outline{ margin-left:0; margin-top:0; display:inline-flex; flex:1 1 0; min-width:0; justify-content:center; }
  .tpl7 .t7-btn--glass{ flex:1 1 0; min-width:0; justify-content:center; }
  .tpl7 .t7-hero .t7-btn--glass + .t7-btn--outline{ margin-left:1.2rem; }
  .tpl7 .t7-hero-grid > div:first-child{ display:flex; flex-wrap:nowrap; gap:1.2rem; align-items:center; }
  .tpl7 .t7-cta-inner{ display:flex; flex-wrap:nowrap; gap:1.2rem; align-items:center; justify-content:center; }
  .tpl7 .t7-cta .t7-btn--glass{ flex:1 1 0; min-width:0; justify-content:center; }
  .tpl7 .t7-cta .t7-btn--outline{ margin-left:1.2rem; flex:1 1 0; min-width:0; justify-content:center; }
  .tpl7 .t7-cta{ margin:0 1.2rem 6rem; padding:5rem 2.4rem; }
  .tpl7 .t7-float-chip{ display:none; }
  .tpl7 .t7-story{ flex:0 0 calc((100% - 2rem) / 2); }
  .tpl7 .t7-press-grid{ grid-template-columns:1fr; }
}
@media(max-width:600px){
  .tpl7 .t7-hero{ padding:7rem 0 6rem; }
  .tpl7 .t7-hero-cta{ display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important; gap:.6rem !important; }
  .tpl7 .t7-hero-cta .t7-btn{ flex:1 1 0 !important; min-width:0 !important; padding:.95rem .7rem !important; font-size:1.05rem !important; white-space:nowrap !important; justify-content:center !important; margin-left:0 !important; }
  .tpl7 .t7-hero .t7-btn i{ font-size:1.1rem; }
  .tpl7 .t7-cta-actions{ display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important; gap:.6rem !important; justify-content:center !important; }
  .tpl7 .t7-cta-actions .t7-btn{ flex:1 1 0 !important; min-width:0 !important; padding:.95rem .7rem !important; font-size:1.05rem !important; white-space:nowrap !important; justify-content:center !important; margin-left:0 !important; }
  .tpl7 .t7-glass-stats{ grid-template-columns:repeat(3,1fr) !important; gap:.6rem; }
  .tpl7 .t7-glass-stat{ padding:1rem .6rem; }
  .tpl7 .t7-glass-stat strong{ font-size:1.6rem; }
  .tpl7 .t7-glass-stat span{ font-size:.9rem; }
  .tpl7 .t7-levels, .tpl7 .t7-compass, .tpl7 .t7-stories, .tpl7 .t7-orbit, .tpl7 .t7-tilt, .tpl7 .t7-mosaic, .tpl7 .t7-why, .tpl7 .t7-founder, .tpl7 .t7-press, .tpl7 .t7-gallery, .tpl7 .t7-join{ padding:6rem 0; }
  .tpl7 .t7-head{ margin:0 auto 3.5rem; }
  .tpl7 .t7-mosaic-grid{ grid-template-columns:1fr; }
  .tpl7 .t7-mosaic-tile--hero, .tpl7 .t7-mosaic-tile--wide{ grid-row:auto; grid-column:auto; }
  .tpl7 .t7-orbit-items{ grid-template-columns:1fr; }
  .tpl7 .t7-why-grid{ grid-template-columns:1fr; }
  .tpl7 .t7-gallery-row{ grid-template-columns:1fr; }
  .tpl7 .t7-gallery-card:nth-child(3){ grid-column:auto; }
  .tpl7 .t7-join-stats{ grid-template-columns:repeat(3,1fr) !important; gap:1rem; }
  .tpl7 .t7-join-stats > div{ padding:1.2rem .8rem; }
  .tpl7 .t7-join-stats strong{ font-size:1.6rem; }
  .tpl7 .t7-join-card{ padding:3rem 2rem; }
  .tpl7 .t7-founder-card{ padding:2.2rem 1.8rem; }
  .tpl7 .t7-founder-avatar-col{ flex-direction:column; }
  .tpl7 .t7-founder-bubble{ padding:2rem 1.6rem; }
  .tpl7 .t7-founder-quote{ font-size:1.55rem; }
  .tpl7 .t7-level-pill{ grid-template-columns:1fr; text-align:center; padding:2rem; }
  .tpl7 .t7-level-pill-num, .tpl7 .t7-level-pill-icon{ margin:0 auto; }
  .tpl7 .t7-level-pill-meta{ justify-content:center; }
  .tpl7 .t7-level-pill-cta{ justify-self:center; }
  .tpl7 .t7-story{ flex:0 0 100%; }
  .tpl7 .t7-stories-progress{ display:none; }
}

/* =====================================================
   TEMPLATE 7 — SOLID MODERATE OVERRIDE (no gradients, footer palette, good padding)
   Mirrors the beautiful fix applied to Template 12, but solid-only as requested.
   Every section gets generous clamp() horizontal breathing so content never
   kisses the container edge. All colours are dynamic var(--primary*) /
   var(--accent)/var(--gold) — no hardcoded hex, no gradients.
   ===================================================== */
.tpl7{ --t7-ink:var(--text); --t7-ink-soft:var(--text-secondary); --t7-line:var(--border-light);
  --t7-glass:var(--white); --t7-glass-strong:var(--white);
  --t7-glass-line:var(--border-light); --t7-glass-dark:var(--primary-deeper);
  --t7-shadow:var(--shadow-card); --t7-shadow-lg:var(--shadow-hover);
  background:var(--primary-deeper); color:var(--text); }
.tpl7 .t7-container{ max-width:1240px; margin:0 auto; padding:0 clamp(1rem,1.8vw,1.6rem); }
.tpl7 section{ scroll-margin-top:8rem; }
.tpl7 .t7-hero{
  background:var(--primary-deeper) !important;
  background-size:auto !important; animation:none !important;
  border-top:4px solid var(--accent);
  padding:7rem clamp(1.6rem,3vw,3.2rem) 6.5rem clamp(1.6rem,3vw,3.2rem) !important;
  position:relative; overflow:hidden;
}
.tpl7 .t7-hero::before{ content:''; position:absolute; top:4px; left:0; width:10rem; height:2px; background:var(--gold); border-radius:0 2px 2px 0; z-index:2; display:block !important; }
.tpl7 .t7-hero::after{ display:none; }
.tpl7 .t7-hero-grid-bg{ display:none; }
.tpl7 .t7-hero h1 span{
  background:none !important; -webkit-background-clip:initial !important; background-clip:initial !important;
  -webkit-text-fill-color:initial !important; color:var(--gold) !important;
}
.tpl7 .t7-head h2 em{
  background:none !important; -webkit-background-clip:initial !important; background-clip:initial !important;
  -webkit-text-fill-color:initial !important; color:var(--gold) !important;
}
.tpl7 .t7-badge{ background:rgba(255,255,255,.07) !important; border-color:rgba(var(--gold-rgb),.38) !important; color:var(--gold) !important; }
.tpl7 .t7-btn--glass{ background:var(--accent) !important; color:var(--white) !important; border-color:var(--accent) !important; box-shadow:0 6px 18px rgba(var(--accent-rgb),.28) !important; backdrop-filter:none !important; }
.tpl7 .t7-btn--glass::after{ display:none !important; }
.tpl7 .t7-btn--glass:hover{ background:var(--accent-dark) !important; transform:translateY(-3px) !important; }
.tpl7 .t7-btn--outline{ background:rgba(255,255,255,.06) !important; border-color:rgba(255,255,255,.22) !important; color:var(--white) !important; }
.tpl7 .t7-glass-card{ background:var(--primary-dark) !important; border-color:rgba(255,255,255,.1) !important; backdrop-filter:none !important; box-shadow:var(--shadow-lg) !important; }
.tpl7 .t7-glass-card::before, .tpl7 .t7-glass-card::after{ display:none !important; }
.tpl7 .t7-glass-stat{ background:rgba(255,255,255,.06) !important; border-color:rgba(255,255,255,.08) !important; }
.tpl7 .t7-glass-stat::before{ display:none !important; }
.tpl7 .t7-float-chip{ background:var(--white) !important; color:var(--primary-dark) !important; border-color:var(--border-light) !important; backdrop-filter:none !important; }
.tpl7 .t7-marquee{ background:var(--primary-dark) !important; border-top:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06); }
.tpl7 .t7-marquee::before, .tpl7 .t7-marquee::after{ display:none !important; }
.tpl7 .t7-levels{ background:var(--primary-deeper) !important; padding:6.5rem clamp(1.6rem,2.5vw,3rem) 6.5rem clamp(1.6rem,2.5vw,3rem) !important; border-top:1px solid rgba(255,255,255,.06); }
/* Levels heading — mixed light palette (gold / mist / white) — not flat single white */
.tpl7 .t7-levels .t7-head span{ background:rgba(var(--gold-rgb),.12) !important; border-color:rgba(var(--gold-rgb),.28) !important; color:var(--gold) !important; }
.tpl7 .t7-levels .t7-head h2{ color:var(--white) !important; }
.tpl7 .t7-levels .t7-head h2 em{ color:var(--gold) !important; } /* thoughtfully designed — warm light accent */
.tpl7 .t7-levels .t7-head p{ color:var(--primary-mist) !important; } /* very light mist, softer than pure white */
.tpl7 .t7-level-pill-body h4{ color:var(--white) !important; }
.tpl7 .t7-level-pill-body > p{ color:rgba(255,255,255,.78) !important; }
.tpl7 .t7-level-pill-num{ color:rgba(var(--gold-rgb),.55) !important; }
.tpl7 .t7-level-pill--1 .t7-level-pill-meta span,
.tpl7 .t7-level-pill--2 .t7-level-pill-meta span,
.tpl7 .t7-level-pill--3 .t7-level-pill-meta span{ color:var(--gold) !important; background:rgba(var(--gold-rgb),.12) !important; border-color:rgba(var(--gold-rgb),.22) !important; }
.tpl7 .t7-level-pill--1 .t7-level-pill-icon{ background:rgba(var(--gold-rgb),.14) !important; border-color:rgba(var(--gold-rgb),.28) !important; color:var(--gold) !important; }
.tpl7 .t7-level-pill--2 .t7-level-pill-icon{ background:rgba(var(--primary-mist-rgb),.14) !important; border-color:rgba(var(--primary-mist-rgb),.28) !important; color:var(--primary-mist) !important; }
.tpl7 .t7-level-pill--3 .t7-level-pill-icon{ background:rgba(255,255,255,.10) !important; border-color:rgba(255,255,255,.18) !important; color:var(--white) !important; }
.tpl7 .t7-level-pill{ background:var(--primary-dark) !important; animation:none !important; background-size:auto !important; }
.tpl7 .t7-level-pill--1{ background:var(--primary-dark) !important; }
.tpl7 .t7-level-pill--2{ background:var(--primary) !important; }
.tpl7 .t7-level-pill--3{ background:var(--accent) !important; }
.tpl7 .t7-level-pill::before, .tpl7 .t7-level-pill::after{ display:none !important; }
.tpl7 .t7-compass{ background:var(--white) !important; padding:6.5rem clamp(1.6rem,2.5vw,3rem) 6.5rem clamp(1.6rem,2.5vw,3rem) !important; }
.tpl7 .t7-compass::before{ display:none !important; }
.tpl7 .t7-compass-card{ background:var(--white) !important; border-color:var(--border-light) !important; backdrop-filter:none !important; }
.tpl7 .t7-compass-card::before{ display:none !important; }
.tpl7 .t7-compass-orb-inner{ background:var(--primary) !important; }
.tpl7 .t7-compass-orb--accent .t7-compass-orb-inner{ background:var(--accent) !important; }
.tpl7 .t7-compass-dot{ background:var(--accent) !important; }
.tpl7 .t7-stories{ background:var(--white) !important; padding:6.5rem clamp(1.6rem,2.5vw,3rem) 6.5rem clamp(1.6rem,2.5vw,3rem) !important; border-top:1px solid var(--border-light); overflow:hidden; }
.tpl7 .t7-stories::before{ background:var(--border-light) !important; height:1px !important; }
.tpl7 .t7-stories::after{ display:none !important; }
.tpl7 .t7-stories-stage{ overflow:hidden !important; }
.tpl7 .t7-stories-track{ gap:2rem !important; will-change:transform; }
.tpl7 .t7-story{ background:var(--primary-deeper) !important; box-shadow:var(--shadow-card) !important; }
.tpl7 .t7-story-icon{ background:var(--white) !important; color:var(--primary) !important; border-color:var(--border-light) !important; }
.tpl7 .t7-stories-progress{ background:var(--border-light) !important; }
.tpl7 .t7-stories-progress span{ background:var(--accent) !important; }
.tpl7 .t7-stories-arrow{ background:var(--white) !important; border-color:var(--border) !important; color:var(--primary) !important; box-shadow:var(--shadow-sm) !important; }
.tpl7 .t7-stories-arrow:hover{ background:var(--primary) !important; color:var(--white) !important; }
.tpl7 .t7-orbit{ background:var(--primary-deeper) !important; padding:6.5rem clamp(1.6rem,2.5vw,3rem) 6.5rem clamp(1.6rem,2.5vw,3rem) !important; border-top:4px solid var(--accent); }
.tpl7 .t7-orbit::after{ display:none !important; }
.tpl7 .t7-orbit-grid{ display:none !important; }
.tpl7 .t7-orbit-core-inner{ background:var(--accent) !important; }
.tpl7 .t7-orbit-item-card{ background:rgba(255,255,255,.06) !important; border-color:rgba(255,255,255,.08) !important; backdrop-filter:none !important; }
.tpl7 .t7-orbit-item-card::before{ display:none !important; }
.tpl7 .t7-orbit-item-card:hover{ background:rgba(255,255,255,.1) !important; }
.tpl7 .t7-tilt{ background:var(--gray-50) !important; padding:6.5rem clamp(1.6rem,2.5vw,3rem) 6.5rem clamp(1.6rem,2.5vw,3rem) !important; border-top:1px solid var(--border-light); }
.tpl7 .t7-tilt::before{ display:none !important; }
.tpl7 .t7-tilt-video-frame{ background:var(--primary-deeper) !important; border:1px solid var(--border-light) !important; }
.tpl7 .t7-tilt-stat{ background:var(--white) !important; border-color:var(--border-light) !important; backdrop-filter:none !important; }
.tpl7 .t7-tilt-stat::before{ display:none !important; }
.tpl7 .t7-tilt-stat--1{ --tilt-color:var(--primary); }
.tpl7 .t7-tilt-stat--2{ --tilt-color:var(--accent); }
.tpl7 .t7-tilt-stat--3{ --tilt-color:var(--gold); }
.tpl7 .t7-tilt-stat-icon{ background:var(--primary) !important; }
.tpl7 .t7-tilt-stat--2 .t7-tilt-stat-icon{ background:var(--accent) !important; }
.tpl7 .t7-tilt-stat--3 .t7-tilt-stat-icon{ background:var(--gold) !important; color:var(--primary-deeper) !important; }
.tpl7 .t7-tilt-stat-bar{ background:var(--border-light) !important; }
.tpl7 .t7-tilt-stat-bar span{ background:var(--primary) !important; }
.tpl7 .t7-tilt-stat--2 .t7-tilt-stat-bar span{ background:var(--accent) !important; }
.tpl7 .t7-tilt-stat--3 .t7-tilt-stat-bar span{ background:var(--gold) !important; }
.tpl7 .t7-tilt-cta{ background:var(--accent) !important; color:var(--white) !important; }
.tpl7 .t7-mosaic{ background:var(--white) !important; padding:6.5rem clamp(1.6rem,2.5vw,3rem) 6.5rem clamp(1.6rem,2.5vw,3rem) !important; }
.tpl7 .t7-mosaic::before, .tpl7 .t7-mosaic::after{ display:none !important; }
.tpl7 .t7-mosaic-tile{ background:var(--white) !important; border-color:var(--border-light) !important; backdrop-filter:none !important; }
.tpl7 .t7-mosaic-tile--hero{ background:var(--white) !important; }
.tpl7 .t7-mosaic-tile-glow{ display:none !important; }
.tpl7 .t7-mosaic-tile::before{ display:none !important; }
.tpl7 .t7-mosaic-tile-icon{ background:var(--primary) !important; }
.tpl7 .t7-mosaic-tile--s1 .t7-mosaic-tile-icon{ background:var(--primary-light) !important; }
.tpl7 .t7-mosaic-tile--s2 .t7-mosaic-tile-icon{ background:var(--accent) !important; }
.tpl7 .t7-mosaic-tile--s3 .t7-mosaic-tile-icon{ background:var(--gold) !important; color:var(--primary-deeper) !important; }
.tpl7 .t7-mosaic-tile-tag{ background:var(--primary-mist) !important; color:var(--primary) !important; }
.tpl7 .t7-mosaic-tile-link{ color:var(--accent) !important; }
.tpl7 .t7-why{ background:var(--gray-50) !important; padding:6.5rem clamp(1.6rem,2.5vw,3rem) 6.5rem clamp(1.6rem,2.5vw,3rem) !important; border-top:1px solid var(--border-light); }
.tpl7 .t7-why::before, .tpl7 .t7-why::after{ display:none !important; }
.tpl7 .t7-why-tile{ background:var(--white) !important; border-color:var(--border-light) !important; backdrop-filter:none !important; }
.tpl7 .t7-why-tile::before, .tpl7 .t7-why-tile::after{ display:none !important; }
.tpl7 .t7-why-tile-num{ background:none !important; -webkit-text-fill-color:var(--primary-mist) !important; color:var(--primary-mist) !important; opacity:1 !important; }
.tpl7 .t7-why-tile-icon{ background:var(--primary) !important; }
.tpl7 .t7-why-tile--2 .t7-why-tile-icon{ background:var(--accent) !important; }
.tpl7 .t7-why-tile--3 .t7-why-tile-icon{ background:var(--gold) !important; color:var(--primary-deeper) !important; }
.tpl7 .t7-founder{ background:var(--white) !important; padding:6.5rem clamp(1.6rem,2.5vw,3rem) 6.5rem clamp(1.6rem,2.5vw,3rem) !important; border-top:1px solid var(--border-light); }
.tpl7 .t7-founder::before{ display:none !important; }
.tpl7 .t7-founder-card{ background:var(--white) !important; border-color:var(--border-light) !important; backdrop-filter:none !important; box-shadow:var(--shadow-card) !important; }
.tpl7 .t7-founder-avatar{ background:var(--primary) !important; }
.tpl7 .t7-founder-bubble{ background:var(--primary-dark) !important; }
.tpl7 .t7-founder-bubble::before{ border-right-color:var(--primary-dark) !important; }
.tpl7 .t7-press{ background:var(--white) !important; padding:6.5rem clamp(1.6rem,2.5vw,3rem) 6.5rem clamp(1.6rem,2.5vw,3rem) !important; border-top:1px solid var(--border-light); }
.tpl7 .t7-press::before, .tpl7 .t7-press::after{ display:none !important; }
.tpl7 .t7-press-card{ background:var(--white) !important; border-color:var(--border-light) !important; backdrop-filter:none !important; }
.tpl7 .t7-press-ribbon{ background:var(--accent) !important; }
.tpl7 .t7-gallery{ background:var(--gray-50) !important; padding:6.5rem clamp(1.6rem,2.5vw,3rem) 6.5rem clamp(1.6rem,2.5vw,3rem) !important; border-top:1px solid var(--border-light); }
.tpl7 .t7-gallery::before{ display:none !important; }
.tpl7 .t7-gallery-card{ background:var(--white) !important; }
.tpl7 .t7-gallery-card--book{ background:var(--white) !important; }
.tpl7 .t7-gallery-book-cover{ background:var(--primary) !important; }
.tpl7 .t7-gallery-book-shine{ display:none !important; }
.tpl7 .t7-join{ background:var(--white) !important; padding:6.5rem clamp(1.6rem,2.5vw,3rem) 6.5rem clamp(1.6rem,2.5vw,3rem) !important; }
.tpl7 .t7-join::before{ display:none !important; }
.tpl7 .t7-join-card{ background:var(--primary-deeper) !important; border-radius:16px !important; box-shadow:var(--shadow-lg) !important; }
.tpl7 .t7-join-card::before, .tpl7 .t7-join-card::after{ display:none !important; }
.tpl7 .t7-join-particle{ display:none !important; }
.tpl7 .t7-join-form{ background:rgba(255,255,255,.06) !important; border-color:rgba(255,255,255,.08) !important; backdrop-filter:none !important; }
.tpl7 .t7-cta{ background:var(--primary-deeper) !important; background-size:auto !important; animation:none !important; margin:0 !important; border-radius:0 !important; padding:6.5rem clamp(1.6rem,2.5vw,3rem) 5.5rem clamp(1.6rem,2.5vw,3rem) !important; border-top:4px solid var(--accent); box-shadow:none !important; }
.tpl7 .t7-cta::before, .tpl7 .t7-cta::after{ display:none !important; }
@media(max-width:991px){
  .tpl7 .t7-hero, .tpl7 .t7-levels, .tpl7 .t7-compass, .tpl7 .t7-stories, .tpl7 .t7-orbit, .tpl7 .t7-tilt, .tpl7 .t7-mosaic, .tpl7 .t7-why, .tpl7 .t7-founder, .tpl7 .t7-press, .tpl7 .t7-gallery, .tpl7 .t7-join, .tpl7 .t7-cta{ padding:5rem clamp(1.4rem,2.5vw,2.4rem) !important; }
}
@media(max-width:600px){
  .tpl7 .t7-hero, .tpl7 .t7-levels, .tpl7 .t7-compass, .tpl7 .t7-stories, .tpl7 .t7-orbit, .tpl7 .t7-tilt, .tpl7 .t7-mosaic, .tpl7 .t7-why, .tpl7 .t7-founder, .tpl7 .t7-press, .tpl7 .t7-gallery, .tpl7 .t7-join, .tpl7 .t7-cta{ padding:4rem clamp(1.2rem,4vw,1.8rem) !important; }
  .tpl7 .t7-container{ padding:0 1.4rem !important; }
}

/* =====================================================
   TEMPLATE 7 — MOBILE FIRST-PRINCIPLES PATCH (Aug 2026)
   Goals: avoid endless vertical scroll on mobile, fix
   alignment bugs, keep desktop untouched.
   - Hero & CTA: fix broken flex-row on content wrapper
   - Compact vertical rhythm (padding/head margins)
   - Convert only the LONG repeat sections to horizontal
     swipe carousels: orbit, why, mosaic, press, gallery.
     Other sections stay stacked but tightened.
   - Reduce card heights & hide heavy decor on mobile
   ===================================================== */
@media(max-width:991px){
  /* fix hero/cta inner bug: content wrapper was forced to flex row */
  .tpl7 .t7-hero-grid > div:first-child{ display:block !important; }
  .tpl7 .t7-hero-grid{ gap:2.8rem !important; }
  .tpl7 .t7-cta-inner{ display:block !important; text-align:center; }
  .tpl7 .t7-cta-inner .t7-btn--glass,
  .tpl7 .t7-cta-inner .t7-btn--outline{ flex:0 1 auto !important; }
}
@media(max-width:767px){
  /* global mobile rhythm */
  .tpl7 section{ scroll-margin-top:6rem; }
  .tpl7 .t7-head{ margin:0 auto 2.4rem !important; }
  .tpl7 .t7-head h2{ font-size:clamp(2.2rem,6vw,3rem) !important; margin:1rem 0 .8rem !important; }
  .tpl7 .t7-head p{ font-size:1.35rem !important; line-height:1.65 !important; }
  .tpl7 .t7-container{ padding:0 1.4rem !important; }

  /* hero: tighter, buttons stay side-by-side without breaking layout */
  .tpl7 .t7-hero{ padding:5rem 1.4rem 4rem !important; }
  .tpl7 .t7-hero h1{ font-size:clamp(2.6rem,8vw,3.8rem) !important; margin:1.4rem 0 1rem !important; line-height:1.08 !important; }
  .tpl7 .t7-hero p{ font-size:1.35rem !important; margin:0 0 1.8rem !important; max-width:none !important; }
  .tpl7 .t7-badge{ font-size:1.05rem !important; padding:.6rem 1.2rem !important; }
  .tpl7 .t7-hero-grid{ grid-template-columns:1fr !important; gap:2rem !important; }
  .tpl7 .t7-hero-side{ max-width:420px; margin:0 auto; width:100%; }
  .tpl7 .t7-glass-card{ padding:1.4rem !important; border-radius:20px !important; }
  .tpl7 .t7-glass-card img{ margin-bottom:1.2rem !important; border-radius:12px !important; }
  .tpl7 .t7-glass-stats{ display:grid !important; grid-template-columns:repeat(3,1fr) !important; gap:.45rem !important; }
  .tpl7 .t7-glass-stat{ padding:.85rem .4rem !important; }
  .tpl7 .t7-glass-stat strong{ font-size:1.7rem !important; }
  .tpl7 .t7-glass-stat span{ font-size:.82rem !important; }
  .tpl7 .t7-float-chip{ display:none !important; }
  /* keep two CTAs on one row, centred, compact — first-principle side-by-side */
  .tpl7 .t7-hero-cta{ display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important; gap:.6rem !important; justify-content:flex-start !important; }
  .tpl7 .t7-hero-cta .t7-btn{ flex:1 1 0 !important; min-width:0 !important; justify-content:center !important; white-space:nowrap !important; padding:.95rem .7rem !important; font-size:1.05rem !important; display:inline-flex !important; }
  .tpl7 .t7-cta-actions{ display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important; gap:.6rem !important; justify-content:center !important; width:100% !important; }
  .tpl7 .t7-cta-actions .t7-btn{ flex:1 1 0 !important; min-width:0 !important; justify-content:center !important; white-space:nowrap !important; padding:.95rem .7rem !important; font-size:1.05rem !important; display:inline-flex !important; }
  .tpl7 .t7-hero-grid > div:first-child br{ display:none; }
  /* fallback: any twin-button group stays row */
  .tpl7 .t7-hero-cta, .tpl7 .t7-cta-actions{ flex-wrap:nowrap !important; }
  /* trust triples stay side-by-side */
  .tpl7 .t7-glass-stats, .tpl7 .t7-join-stats{ grid-template-columns:repeat(3,1fr) !important; }

  /* levels: compact pill */
  .tpl7 .t7-level-stack{ gap:1rem !important; }
  .tpl7 .t7-level-pill{ padding:1.4rem 1.6rem !important; border-radius:24px !important; grid-template-columns:1fr !important; text-align:center !important; gap:1rem !important; }
  .tpl7 .t7-level-pill-num{ font-size:2.4rem !important; }
  .tpl7 .t7-level-pill-icon{ width:5.2rem !important; height:5.2rem !important; font-size:1.9rem !important; margin:0 auto !important; }
  .tpl7 .t7-level-pill-body h4{ font-size:1.85rem !important; }
  .tpl7 .t7-level-pill-body > p{ font-size:1.25rem !important; margin:0 0 .6rem !important; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .tpl7 .t7-level-pill-meta{ justify-content:center !important; gap:.45rem !important; }
  .tpl7 .t7-level-pill-meta span{ font-size:1rem !important; padding:.35rem .75rem !important; }
  .tpl7 .t7-level-pill-cta{ justify-self:center !important; padding:.9rem 1.5rem !important; font-size:1.15rem !important; }

  /* compass: tighter cards */
  .tpl7 .t7-compass-split{ gap:1.4rem !important; }
  .tpl7 .t7-compass-card{ padding:2.2rem 1.8rem !important; border-radius:20px !important; }
  .tpl7 .t7-compass-orb{ width:7rem !important; height:7rem !important; margin:0 0 1.4rem !important; }
  .tpl7 .t7-compass-orb-inner{ width:5.2rem !important; height:5.2rem !important; font-size:2rem !important; }
  .tpl7 .t7-compass-card h3{ font-size:2rem !important; margin:0 0 .8rem !important; }
  .tpl7 .t7-compass-card p,
  .tpl7 .t7-compass-list li{ font-size:1.3rem !important; line-height:1.6 !important; }

  /* stories: reduce tall 3/4 aspect, keep JS transform carousel (no native scroll) */
  .tpl7 .t7-stories{ padding:3.5rem 0 !important; }
  .tpl7 .t7-stories-stage{ overflow:hidden !important; padding:0 !important; }
  .tpl7 .t7-stories-track{ gap:1.2rem !important; }
  .tpl7 .t7-story{ flex:0 0 82% !important; max-width:82% !important; aspect-ratio:4/3 !important; border-radius:18px !important; }
  .tpl7 .t7-story-body{ padding:1.6rem !important; }
  .tpl7 .t7-story-text{ font-size:1.3rem !important; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
  .tpl7 .t7-stories-controls{ margin-top:1.6rem !important; gap:1rem !important; }
  .tpl7 .t7-stories-arrow{ width:4.2rem !important; height:4.2rem !important; font-size:1.2rem !important; }

  /* === LONG SECTIONS → horizontal swipe to avoid endless scroll === */
  /* orbit (core values) */
  .tpl7 .t7-orbit{ padding:3.5rem 0 !important; }
  .tpl7 .t7-orbit-stage{ gap:2rem !important; }
  .tpl7 .t7-orbit-core{ width:11rem !important; height:11rem !important; }
  .tpl7 .t7-orbit-core-inner{ width:8.5rem !important; height:8.5rem !important; }
  .tpl7 .t7-orbit-items{
    display:flex !important; flex-wrap:nowrap !important; gap:1.2rem !important;
    overflow-x:auto !important; overflow-y:visible !important;
    padding:0 1.4rem 1rem !important; margin:0 -1.4rem !important;
    scroll-snap-type:x mandatory !important; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; grid-template-columns:none !important;
  }
  .tpl7 .t7-orbit-items::-webkit-scrollbar{ display:none; }
  .tpl7 .t7-orbit-item{ flex:0 0 260px !important; max-width:260px !important; scroll-snap-align:start; }
  .tpl7 .t7-orbit-item-card{ padding:2rem 1.6rem !important; min-height:220px !important; border-radius:18px !important; }
  .tpl7 .t7-orbit-item-icon{ width:5rem !important; height:5rem !important; font-size:1.9rem !important; margin:0 auto 1rem !important; }
  .tpl7 .t7-orbit-item-card h3{ font-size:1.6rem !important; }
  .tpl7 .t7-orbit-item-card p{ font-size:1.25rem !important; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

  /* why (6 tiles) */
  .tpl7 .t7-why{ padding:3.5rem 0 !important; }
  .tpl7 .t7-why-grid{
    display:flex !important; flex-wrap:nowrap !important; gap:1.2rem !important;
    overflow-x:auto !important; padding:0 1.4rem 1.2rem !important; margin:0 -1.4rem !important;
    scroll-snap-type:x mandatory !important; -webkit-overflow-scrolling:touch; scrollbar-width:none;
    grid-template-columns:none !important; perspective:none !important;
  }
  .tpl7 .t7-why-grid::-webkit-scrollbar{ display:none; }
  .tpl7 .t7-why-tile{ flex:0 0 260px !important; max-width:260px !important; min-height:0 !important; padding:2rem 1.6rem !important; border-radius:18px !important; scroll-snap-align:start; }
  .tpl7 .t7-why-tile-num{ font-size:3rem !important; top:1.2rem !important; right:1.4rem !important; }
  .tpl7 .t7-why-tile-icon{ width:5rem !important; height:5rem !important; font-size:1.9rem !important; margin-bottom:1.4rem !important; border-radius:16px !important; }
  .tpl7 .t7-why-tile h3{ font-size:1.55rem !important; }
  .tpl7 .t7-why-tile p{ font-size:1.25rem !important; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }

  /* mosaic (portal bento) */
  .tpl7 .t7-mosaic{ padding:3.5rem 0 !important; }
  .tpl7 .t7-mosaic-grid{
    display:flex !important; flex-wrap:nowrap !important; gap:1.2rem !important;
    overflow-x:auto !important; padding:0 1.4rem 1.2rem !important; margin:0 -1.4rem !important;
    scroll-snap-type:x mandatory !important; -webkit-overflow-scrolling:touch; scrollbar-width:none;
    grid-template-columns:none !important;
  }
  .tpl7 .t7-mosaic-grid::-webkit-scrollbar{ display:none; }
  .tpl7 .t7-mosaic-tile{ flex:0 0 280px !important; max-width:280px !important; min-height:200px !important; padding:1.8rem 1.6rem !important; border-radius:18px !important; scroll-snap-align:start; }
  .tpl7 .t7-mosaic-tile--hero{ flex:0 0 300px !important; max-width:300px !important; }
  .tpl7 .t7-mosaic-tile--hero h3{ font-size:1.85rem !important; }
  .tpl7 .t7-mosaic-tile--hero p{ font-size:1.3rem !important; }
  .tpl7 .t7-mosaic-tile-icon{ width:4.6rem !important; height:4.6rem !important; font-size:1.7rem !important; margin-bottom:1rem !important; border-radius:14px !important; }
  .tpl7 .t7-mosaic-tile h3{ font-size:1.55rem !important; }
  .tpl7 .t7-mosaic-tile p{ font-size:1.25rem !important; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

  /* press (news) */
  .tpl7 .t7-press{ padding:3.5rem 0 !important; }
  .tpl7 .t7-press-grid{
    display:flex !important; flex-wrap:nowrap !important; gap:1.2rem !important;
    overflow-x:auto !important; padding:0 1.4rem 1.2rem !important; margin:0 -1.4rem !important;
    scroll-snap-type:x mandatory !important; -webkit-overflow-scrolling:touch; scrollbar-width:none;
    grid-template-columns:none !important; max-width:none !important;
  }
  .tpl7 .t7-press-grid::-webkit-scrollbar{ display:none; }
  .tpl7 .t7-press-card{ flex:0 0 280px !important; max-width:280px !important; border-radius:18px !important; scroll-snap-align:start; }
  .tpl7 .t7-press-img{ aspect-ratio:16/10 !important; }
  .tpl7 .t7-press-body{ padding:1.6rem !important; }
  .tpl7 .t7-press-card h3{ font-size:1.6rem !important; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .tpl7 .t7-press-card p{ font-size:1.25rem !important; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

  /* gallery (showcase) */
  .tpl7 .t7-gallery{ padding:3.5rem 0 !important; }
  .tpl7 .t7-gallery-row{
    display:flex !important; flex-wrap:nowrap !important; gap:1.2rem !important;
    overflow-x:auto !important; padding:0 1.4rem 1.2rem !important; margin:0 -1.4rem !important;
    scroll-snap-type:x mandatory !important; -webkit-overflow-scrolling:touch; scrollbar-width:none;
    grid-template-columns:none !important;
  }
  .tpl7 .t7-gallery-row::-webkit-scrollbar{ display:none; }
  .tpl7 .t7-gallery-card{ flex:0 0 280px !important; max-width:280px !important; border-radius:18px !important; scroll-snap-align:start; }
  .tpl7 .t7-gallery-book, .tpl7 .t7-gallery-card--image .t7-gallery-image{ aspect-ratio:4/3 !important; padding:2rem 1rem !important; }
  .tpl7 .t7-gallery-body{ padding:1.6rem !important; }
  .tpl7 .t7-gallery-body h3{ font-size:1.55rem !important; }
  .tpl7 .t7-gallery-body p{ font-size:1.25rem !important; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

  /* tilt (video + stats) — keep stacked but compact */
  .tpl7 .t7-tilt{ padding:3.5rem 0 !important; }
  .tpl7 .t7-tilt-grid{ gap:1.6rem !important; }
  .tpl7 .t7-tilt-video-frame{ border-radius:18px !important; transform:none !important; aspect-ratio:16/9 !important; }
  .tpl7 .t7-tilt-play{ width:5.4rem !important; height:5.4rem !important; font-size:1.6rem !important; }
  .tpl7 .t7-tilt-stat{ padding:1.4rem 1.4rem !important; border-radius:16px !important; gap:.3rem 1rem !important; }
  .tpl7 .t7-tilt-stat-icon{ width:4.4rem !important; height:4.4rem !important; font-size:1.7rem !important; border-radius:12px !important; }
  .tpl7 .t7-tilt-stat-num{ font-size:2.4rem !important; }
  .tpl7 .t7-tilt-stat-label{ font-size:1.2rem !important; }
  .tpl7 .t7-tilt-stat-desc{ font-size:1.2rem !important; }
  .tpl7 .t7-tilt-cta{ padding:1rem 1.6rem !important; font-size:1.2rem !important; }

  /* founder / join / cta compact */
  .tpl7 .t7-founder{ padding:3.5rem 0 !important; }
  .tpl7 .t7-founder-card{ padding:1.8rem !important; border-radius:18px !important; gap:1.4rem !important; }
  .tpl7 .t7-founder-avatar{ width:7.5rem !important; height:7.5rem !important; font-size:2.8rem !important; }
  .tpl7 .t7-founder-bubble{ padding:1.6rem !important; border-radius:18px 18px 18px 6px !important; }
  .tpl7 .t7-founder-bubble::before{ display:none !important; }
  .tpl7 .t7-founder-quote{ font-size:1.35rem !important; margin:0 0 1.2rem !important; }
  .tpl7 .t7-join{ padding:3.5rem 0 !important; }
  .tpl7 .t7-join-card{ padding:2rem 1.6rem !important; border-radius:20px !important; gap:1.6rem !important; }
  .tpl7 .t7-join-text h2{ font-size:clamp(2rem,6vw,2.6rem) !important; }
  .tpl7 .t7-join-text p{ font-size:1.3rem !important; margin:0 0 1.4rem !important; }
  .tpl7 .t7-join-stats{ gap:.6rem !important; }
  .tpl7 .t7-join-stats > div{ padding:1rem .6rem !important; border-radius:12px !important; }
  .tpl7 .t7-join-stats strong{ font-size:1.4rem !important; }
  .tpl7 .t7-join-stats span{ font-size:.95rem !important; }
  .tpl7 .t7-join-form{ padding:1.8rem 1.4rem !important; border-radius:18px !important; }
  .tpl7 .t7-join-form h3{ font-size:1.6rem !important; margin:0 0 1rem !important; }
  .tpl7 .t7-cta{ padding:3.5rem 1.4rem !important; margin:0 !important; border-radius:0 !important; }
  .tpl7 .t7-cta h3{ font-size:clamp(2rem,6vw,2.8rem) !important; }
  .tpl7 .t7-cta p{ font-size:1.3rem !important; margin:0 auto 1.6rem !important; }
  .tpl7 .t7-orb, .tpl7 .t7-join-particle{ display:none !important; }
}
@media(max-width:480px){
  .tpl7 .t7-hero-cta{ gap:.45rem !important; }
  .tpl7 .t7-hero-cta .t7-btn{ padding:.85rem .5rem !important; font-size:.92rem !important; gap:.4rem !important; }
  .tpl7 .t7-cta-actions{ gap:.45rem !important; }
  .tpl7 .t7-cta-actions .t7-btn{ padding:.85rem .5rem !important; font-size:.92rem !important; gap:.4rem !important; }
  .tpl7 .t7-glass-stats{ gap:.35rem !important; }
  .tpl7 .t7-glass-stat{ padding:.7rem .3rem !important; }
  .tpl7 .t7-glass-stat strong{ font-size:1.5rem !important; }
  .tpl7 .t7-glass-stat span{ font-size:.78rem !important; }
  .tpl7 .t7-story{ flex:0 0 88% !important; max-width:88% !important; aspect-ratio:4/3.2 !important; }
  .tpl7 .t7-orbit-item{ flex:0 0 240px !important; max-width:240px !important; }
  .tpl7 .t7-why-tile{ flex:0 0 240px !important; max-width:240px !important; }
  .tpl7 .t7-mosaic-tile{ flex:0 0 260px !important; max-width:260px !important; }
  .tpl7 .t7-press-card,
  .tpl7 .t7-gallery-card{ flex:0 0 260px !important; max-width:260px !important; }
}

/* =====================================================
   TEMPLATE 8 — HERITAGE FAITH
   ===================================================== */
/* =====================================================
   TEMPLATE 8: HERITAGE FAITH ... scoped under .tpl8
   Warm, ornamental, geometric-pattern-accented layout
   suited to faith-based schools (Islamic, Christian, or
   values-led institutions). Deep emerald + warm gold,
   arch motifs, generous whitespace, calm & dignified tone.

   Every colour token resolves through the global theme
   variables (--primary, --primary-dark, --gold) so a
   single change in admin_school_settings.php recolours
   the whole template automatically.
   ===================================================== */
.tpl8{
  --t8-emerald:var(--primary);
  --t8-emerald-2:var(--primary-dark);
  --t8-emerald-3:var(--primary-deeper);
  --t8-gold:var(--gold);
  --t8-accent:var(--accent);
  --t8-gold-bright:color-mix(in srgb, var(--gold) 78%, #ffffff);
  --t8-gold-soft:color-mix(in srgb, var(--gold) 22%, #ffffff);
  --t8-cream:color-mix(in srgb, var(--primary-mist) 62%, #ffffff);
  --t8-cream-2:color-mix(in srgb, var(--primary-mist) 78%, #ffffff);
  --t8-parchment:var(--white);
  --t8-ink:var(--text);
  --t8-ink-soft:var(--text-secondary);
  --t8-ink-mute:var(--text-muted);
  --t8-line:var(--border-light);
  --t8-line-soft:var(--border);
  --t8-on-dark:var(--white);
  --t8-on-dark-soft:rgba(255,255,255,.78);
  --t8-on-dark-mute:rgba(255,255,255,.62);
  background:var(--t8-cream); font-family:'Trirong',Georgia,serif; color:var(--t8-ink); }
.tpl8 *{ box-sizing:border-box; }
.tpl8 .t8-container{ max-width:1180px; margin:0 auto; padding:0 clamp(1rem,1.8vw,1.6rem); position:relative; }
.tpl8 section{ scroll-margin-top:8rem; }
.tpl8 .t8-reveal{ opacity:0; transform:translateY(28px); transition:opacity .9s ease, transform .9s cubic-bezier(.22,.61,.36,1); }
.tpl8 .t8-reveal.is-in{ opacity:1; transform:none; }
.tpl8 .t8-eyebrow{ display:inline-flex; align-items:center; gap:1rem; font-family:'Open Sans',sans-serif; font-size:1.2rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--t8-gold); }
.tpl8 .t8-eyebrow i{ font-size:1.4rem; }
.tpl8 .t8-eyebrow .fa-circle{ font-size:.7rem; color:var(--t8-emerald); animation:t8Blink 1.6s ease-in-out infinite; }
@keyframes t8Blink{ 0%,100%{ opacity:1 } 50%{ opacity:.35 } }
.tpl8 .t8-accent{ color:var(--t8-gold); font-style:italic; }

/* Ornamental geometric pattern strip (top & bottom dividers) */
.tpl8 .t8-pattern{ height:4px; background:var(--gold); opacity:1; }
.tpl8 .t8-pattern--top{ margin-bottom:0; }

/* Decorative SVG corner flourishes */
.tpl8 .t8-corner{ position:absolute; width:120px; height:120px; pointer-events:none; opacity:.4; }
.tpl8 .t8-corner::before,
.tpl8 .t8-corner::after{ content:''; position:absolute; background:var(--t8-gold); }
.tpl8 .t8-corner::before{ width:2px; height:100%; }
.tpl8 .t8-corner::after{ height:2px; width:100%; }
.tpl8 .t8-corner--tl{ top:24px; left:24px; }
.tpl8 .t8-corner--tl::before{ top:0; left:0; }
.tpl8 .t8-corner--tl::after{ top:0; left:0; }
.tpl8 .t8-corner--tr{ top:24px; right:24px; }
.tpl8 .t8-corner--tr::before{ top:0; right:0; }
.tpl8 .t8-corner--tr::after{ top:0; right:0; }
.tpl8 .t8-corner--bl{ bottom:24px; left:24px; }
.tpl8 .t8-corner--bl::before{ bottom:0; left:0; }
.tpl8 .t8-corner--bl::after{ bottom:0; left:0; }
.tpl8 .t8-corner--br{ bottom:24px; right:24px; }
.tpl8 .t8-corner--br::before{ bottom:0; right:0; }
.tpl8 .t8-corner--br::after{ bottom:0; right:0; }

/* Faint star/asterisk pattern (random twinkle dots) */
.tpl8 .t8-hero-stars{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.tpl8 .t8-hero-stars span{ position:absolute; width:6px; height:6px; background:var(--t8-gold); opacity:.35; clip-path:polygon(50% 0,61% 35%,100% 50%,61% 65%,50% 100%,39% 65%,0 50%,39% 35%); }
.tpl8 .t8-hero-stars span:nth-child(1){ top:8%; left:6%; animation:t8Twinkle 4s ease-in-out infinite; }
.tpl8 .t8-hero-stars span:nth-child(2){ top:14%; right:12%; width:8px; height:8px; animation:t8Twinkle 5s ease-in-out infinite .5s; }
.tpl8 .t8-hero-stars span:nth-child(3){ top:30%; left:14%; width:4px; height:4px; animation:t8Twinkle 3.5s ease-in-out infinite 1s; }
.tpl8 .t8-hero-stars span:nth-child(4){ top:42%; right:6%; animation:t8Twinkle 4.5s ease-in-out infinite 1.5s; }
.tpl8 .t8-hero-stars span:nth-child(5){ top:55%; left:8%; width:4px; height:4px; animation:t8Twinkle 3s ease-in-out infinite .8s; }
.tpl8 .t8-hero-stars span:nth-child(6){ top:62%; right:18%; width:8px; height:8px; animation:t8Twinkle 5.5s ease-in-out infinite 1.2s; }
.tpl8 .t8-hero-stars span:nth-child(7){ top:74%; left:18%; animation:t8Twinkle 4.2s ease-in-out infinite .3s; }
.tpl8 .t8-hero-stars span:nth-child(8){ top:78%; right:8%; width:4px; height:4px; animation:t8Twinkle 3.8s ease-in-out infinite 1.7s; }
.tpl8 .t8-hero-stars span:nth-child(9){ top:88%; left:48%; width:8px; height:8px; animation:t8Twinkle 4.8s ease-in-out infinite .9s; }
.tpl8 .t8-hero-stars span:nth-child(10){ top:18%; left:48%; width:4px; height:4px; animation:t8Twinkle 3.2s ease-in-out infinite 1.4s; }
@keyframes t8Twinkle{ 0%,100%{ opacity:.15; transform:scale(.8); } 50%{ opacity:.55; transform:scale(1.2); } }

/* ====================================================
   1. HERO
   ==================================================== */
.tpl8 .t8-hero{
  background:var(--primary-deeper);
  color:var(--white);
  padding:7rem clamp(1.6rem,2.5vw,3rem) 6.5rem clamp(1.6rem,2.5vw,3rem);
  position:relative; overflow:hidden;
  border-top:4px solid var(--accent);
}
.tpl8 .t8-hero::before{ display:none; }
.tpl8 .t8-hero::after{ content:''; position:absolute; top:4px; left:0; width:10rem; height:2px; background:var(--gold); border-radius:0 2px 2px 0; z-index:2; }

.tpl8 .t8-hero-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:5rem; align-items:center; position:relative; z-index:2; }

.tpl8 .t8-hero-text{ text-align:left; }
.tpl8 .t8-hero-text .t8-eyebrow{ margin-bottom:1.8rem; }
.tpl8 .t8-hero h1{ font-size:clamp(3.2rem,5.6vw,5.2rem); font-weight:700; margin:0 0 1.2rem; line-height:1.05; color:var(--white); letter-spacing:-.01em; }
.tpl8 .t8-hero-school{ display:inline-block; position:relative; }
.tpl8 .t8-hero-school::after{ content:''; position:absolute; left:0; right:0; bottom:.1em; height:.5em; background:var(--t8-gold); opacity:.18; z-index:-1; }
.tpl8 .t8-hero-motto{ font-style:italic; color:var(--t8-gold); font-size:1.85rem; margin:0 0 2rem; line-height:1.5; max-width:46rem; font-family:'Trirong',Georgia,serif; position:relative; padding-left:2.4rem; }
.tpl8 .t8-hero-motto::before{ content:'\201C'; position:absolute; left:-.4rem; top:-1.2rem; font-size:5rem; color:var(--t8-gold); opacity:.6; line-height:1; font-family:Georgia,serif; }
.tpl8 .t8-hero-tag{ font-family:'Open Sans',sans-serif; font-size:1.5rem; color:var(--t8-on-dark-soft); max-width:50rem; margin:0 0 2.8rem; line-height:1.85; }

.tpl8 .t8-hero-cta{ display:flex; flex-wrap:wrap; gap:1.2rem; margin-bottom:3.6rem; }
.tpl8 .t8-btn{ display:inline-flex; align-items:center; gap:1rem; padding:1.3rem 2.8rem; font-family:'Open Sans',sans-serif; font-weight:700; font-size:1.35rem; letter-spacing:.03em; text-decoration:none; border-radius:4px; transition:all .3s; position:relative; overflow:hidden; cursor:pointer; }
.tpl8 .t8-btn--gold{ background:var(--t8-gold); color:var(--t8-emerald-3); box-shadow:0 6px 20px rgba(var(--gold-rgb),.35); }
.tpl8 .t8-btn--gold::before{ content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:rgba(255,255,255,.22); transition:left .6s; }
.tpl8 .t8-btn--gold:hover{ background:var(--t8-gold-bright); transform:translateY(-3px); box-shadow:0 14px 32px rgba(var(--gold-rgb),.5); }
.tpl8 .t8-btn--gold:hover::before{ left:100%; }
.tpl8 .t8-btn--ghost{ border:1.5px solid rgba(255,255,255,.4); color:var(--white); background:transparent; }
.tpl8 .t8-btn--ghost:hover{ border-color:var(--t8-gold); color:var(--t8-gold); background:rgba(var(--gold-rgb),.08); }
.tpl8 .t8-btn--ghost-dark{ border-color:rgba(0,0,0,.3); color:var(--t8-emerald); }
.tpl8 .t8-btn--ghost-dark:hover{ border-color:var(--t8-gold); color:var(--t8-gold); background:rgba(var(--gold-rgb),.1); }

/* Trust row */
.tpl8 .t8-hero-trust{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; padding-top:2.4rem; border-top:1px solid rgba(255,255,255,.18); }
.tpl8 .t8-trust-item{ display:flex; align-items:flex-start; gap:1.2rem; }
.tpl8 .t8-trust-icon{ width:4.4rem; height:4.4rem; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:rgba(var(--gold-rgb),.14); border:1.5px solid rgba(var(--gold-rgb),.35); border-radius:50%; color:var(--t8-gold); font-size:1.7rem; }
.tpl8 .t8-trust-item strong{ display:block; font-family:'Open Sans',sans-serif; font-size:1.45rem; color:var(--white); font-weight:800; line-height:1.2; }
.tpl8 .t8-trust-item span{ display:block; font-family:'Open Sans',sans-serif; font-size:1.15rem; color:var(--t8-on-dark-mute); margin-top:.3rem; line-height:1.4; }

/* Hero side: illuminated manuscript frame */
.tpl8 .t8-hero-side{ position:relative; }
.tpl8 .t8-hero-frame{ position:relative; padding:2.4rem; }
.tpl8 .t8-frame-ring{ position:absolute; border:1.5px solid var(--t8-gold); border-radius:24px; pointer-events:none; }
.tpl8 .t8-frame-ring--1{ inset:0; opacity:.5; }
.tpl8 .t8-frame-ring--2{ inset:14px; opacity:.25; border-style:dashed; }

.tpl8 .t8-hero-illumination{ position:relative; background:var(--white); border-radius:16px; padding:1.4rem; box-shadow:0 18px 40px rgba(0,0,0,.22), 0 4px 12px rgba(0,0,0,.12); border:1px solid var(--t8-line); }
.tpl8 .t8-hero-illumination::before,
.tpl8 .t8-hero-illumination::after{ content:''; position:absolute; width:36px; height:36px; border:2px solid var(--t8-gold); pointer-events:none; }
.tpl8 .t8-hero-illumination::before{ top:6px; left:6px; border-right:none; border-bottom:none; border-radius:8px 0 0 0; }
.tpl8 .t8-hero-illumination::after{ bottom:6px; right:6px; border-left:none; border-top:none; border-radius:0 0 8px 0; }

.tpl8 .t8-illum-badge{ display:flex; align-items:center; gap:.8rem; padding:.6rem 1rem; background:var(--t8-emerald); color:var(--white); border-radius:6px; font-family:'Open Sans',sans-serif; font-size:1.05rem; font-weight:800; letter-spacing:.08em; margin-bottom:1rem; box-shadow:0 4px 10px rgba(var(--primary-rgb),.25); }
.tpl8 .t8-illum-dot{ width:8px; height:8px; border-radius:50%; background:var(--t8-gold); box-shadow:0 0 0 4px rgba(var(--gold-rgb),.3); animation:t8Blink 1.6s ease-in-out infinite; }

.tpl8 .t8-illum-stage{ position:relative; aspect-ratio:4/3; border-radius:10px; overflow:hidden; border:1px solid var(--t8-line); box-shadow:inset 0 0 0 1px rgba(255,255,255,.5); }
.tpl8 .t8-illum-slide{ position:absolute; inset:0; opacity:0; transition:opacity .8s ease, transform 1.2s ease; transform:scale(1.05); }
.tpl8 .t8-illum-slide.is-active{ opacity:1; transform:scale(1); }
.tpl8 .t8-illum-slide img{ width:100%; height:100%; object-fit:cover; }

.tpl8 .t8-illum-meta{ display:flex; align-items:center; gap:1.2rem; margin-top:1.2rem; padding-top:1.2rem; border-top:1px dashed var(--t8-line); }
.tpl8 .t8-illum-num{ font-family:'Open Sans',sans-serif; font-size:1.4rem; font-weight:800; color:var(--t8-emerald); letter-spacing:.1em; }
.tpl8 .t8-illum-name{ font-family:'Trirong',Georgia,serif; font-style:italic; font-size:1.5rem; color:var(--t8-ink); font-weight:600; }

.tpl8 .t8-illum-dots{ display:flex; gap:.6rem; margin-top:1rem; }
.tpl8 .t8-illum-dots button{ width:30px; height:4px; border:none; background:var(--t8-line); border-radius:2px; cursor:pointer; padding:0; transition:background .25s; }
.tpl8 .t8-illum-dots button.is-active{ background:var(--t8-gold); width:46px; }

.tpl8 .t8-hero-quill{ position:absolute; bottom:-20px; right:-20px; width:64px; height:64px; background:var(--t8-gold); color:var(--t8-emerald-3); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:2.4rem; box-shadow:0 8px 22px rgba(var(--gold-rgb),.4); transform:rotate(-15deg); border:3px solid var(--t8-cream); }

/* ====================================================
   2. SECTION GENERIC — moderate, solid, no gradients
   ==================================================== */
.tpl8 .t8-section{ position:relative; padding:6.5rem clamp(1.6rem,2.5vw,3rem) 6.5rem clamp(1.6rem,2.5vw,3rem); overflow:hidden; background:var(--white); }
.tpl8 .t8-section--tight{ padding:5rem clamp(1.6rem,2.5vw,3rem); }
.tpl8 .t8-section--alt{ background:var(--t8-cream); }
.tpl8 .t8-section--dark{ background:var(--primary-deeper); color:var(--white); border-top:4px solid var(--accent); }
.tpl8 .t8-section--dark::before{ content:''; position:absolute; top:4px; left:0; width:10rem; height:2px; background:var(--gold); border-radius:0 2px 2px 0; z-index:2; }
.tpl8 .t8-section-head{ text-align:center; max-width:78rem; margin:0 auto 5rem; position:relative; z-index:1; }
.tpl8 .t8-section-title{ font-size:clamp(2.8rem,4.4vw,4.2rem); font-weight:700; margin:1.2rem 0 0; line-height:1.15; letter-spacing:-.01em; color:inherit; }
.tpl8 .t8-section-title .t8-accent{ font-style:italic; }
.tpl8 .t8-section-sub{ font-family:'Open Sans',sans-serif; font-size:1.5rem; color:var(--t8-ink-soft); line-height:1.8; margin:1.4rem auto 0; max-width:64rem; }
.tpl8 .t8-section--dark .t8-section-sub{ color:rgba(255,255,255,.78); }

/* ====================================================
   3. LEVELS ... Arch-topped cards with stepped crests
   ==================================================== */
.tpl8 .t8-levels{ display:grid; grid-template-columns:repeat(3,1fr); gap:2.4rem; align-items:stretch; }
.tpl8 .t8-levels--count-1{ grid-template-columns:minmax(0, 720px); justify-content:center; }
.tpl8 .t8-levels--count-2{ grid-template-columns:repeat(2,1fr); max-width:880px; margin:0 auto; }
.tpl8 .t8-level{ position:relative; background:var(--white); border:1px solid var(--t8-line); border-radius:0 0 14px 14px; padding:8rem 2.4rem 2.8rem; text-decoration:none; color:var(--t8-ink); transition:all .35s cubic-bezier(.22,.61,.36,1); overflow:visible; margin-top:30px; }
.tpl8 .t8-level:hover{ transform:translateY(-10px); border-color:var(--t8-gold); box-shadow:0 30px 60px rgba(var(--primary-rgb),.18); }
.tpl8 .t8-level-crest{ position:absolute; top:-50px; left:50%; transform:translateX(-50%); width:120px; height:60px; color:var(--t8-gold); transition:all .35s; }
.tpl8 .t8-level-crest svg{ width:100%; height:100%; }
.tpl8 .t8-level:hover .t8-level-crest{ color:var(--t8-gold-bright); transform:translateX(-50%) scale(1.1); }
.tpl8 .t8-level::before{ content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--gold); }
.tpl8 .t8-level-icon{ width:7rem; height:7rem; margin:-5rem auto 1.4rem; background:var(--primary); color:var(--gold); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:2.8rem; border:4px solid var(--t8-cream); box-shadow:0 8px 22px rgba(var(--primary-rgb),.25); position:relative; z-index:1; }
.tpl8 .t8-level-num{ display:inline-block; font-family:'Open Sans',sans-serif; font-size:1.15rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--t8-gold); padding:.4rem 1rem; background:var(--t8-cream-2); border-radius:4px; margin-bottom:1.2rem; }
.tpl8 .t8-level-name{ font-size:2.2rem; font-weight:700; margin:0 0 1.2rem; text-align:center; }
.tpl8 .t8-level-desc{ font-family:'Open Sans',sans-serif; font-size:1.35rem; color:var(--t8-ink-soft); line-height:1.7; margin:0 0 1.6rem; text-align:center; }
.tpl8 .t8-level-meta{ display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; margin-bottom:1.8rem; }
.tpl8 .t8-level-meta span{ display:inline-flex; align-items:center; gap:.5rem; font-family:'Open Sans',sans-serif; font-size:1.1rem; font-weight:600; color:var(--t8-emerald); padding:.5rem 1rem; background:var(--t8-cream-2); border-radius:4px; }
.tpl8 .t8-level-meta span i{ color:var(--t8-gold); }
.tpl8 .t8-level-cta{ display:inline-flex; align-items:center; gap:.6rem; font-family:'Open Sans',sans-serif; font-weight:800; font-size:1.3rem; color:var(--t8-emerald); border-top:1px solid var(--t8-line); padding-top:1.6rem; width:100%; justify-content:center; }
.tpl8 .t8-level-cta i{ transition:transform .25s; }
.tpl8 .t8-level:hover .t8-level-cta{ color:var(--t8-gold); }
.tpl8 .t8-level:hover .t8-level-cta i{ transform:translateX(6px); }

/* ====================================================
   4. VISION / MISSION ... Twin illuminated scrolls
   ==================================================== */
.tpl8 .t8-vm{ display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:stretch; }
.tpl8 .t8-vm-card{ position:relative; background:var(--white); border:1px solid var(--t8-line); border-radius:16px; padding:3.2rem 2.6rem 2.6rem; box-shadow:0 12px 30px rgba(var(--primary-rgb),.08); }
.tpl8 .t8-vm-card--mission{ background:var(--primary-dark); color:var(--white); border-color:transparent; }
.tpl8 .t8-vm-card--mission .t8-vm-text,
.tpl8 .t8-vm-card--mission .t8-vm-list li{ color:rgba(255,255,255,.92); }
.tpl8 .t8-vm-card--mission .t8-vm-list li{ border-bottom-color:rgba(255,255,255,.18); }
.tpl8 .t8-vm-card--mission .t8-vm-list li i{ color:var(--t8-gold); }
.tpl8 .t8-vm-card--mission .t8-vm-icon{ background:rgba(var(--gold-rgb),.18); border-color:var(--t8-gold); color:var(--t8-gold); }
.tpl8 .t8-vm-card--mission .t8-vm-corner{ border-color:var(--t8-gold); }
.tpl8 .t8-vm-ribbon{ position:absolute; top:0; left:50%; transform:translate(-50%, -50%); background:var(--t8-gold); color:var(--t8-emerald-3); font-family:'Open Sans',sans-serif; font-size:1.15rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; padding:.7rem 2rem; border-radius:4px; box-shadow:0 6px 14px rgba(var(--gold-rgb),.3); }
.tpl8 .t8-vm-ribbon--alt{ background:var(--white); color:var(--t8-emerald); }
.tpl8 .t8-vm-icon{ width:7rem; height:7rem; margin:0 auto 1.6rem; background:var(--t8-cream-2); border:1.5px solid var(--t8-gold); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:2.8rem; color:var(--t8-emerald); }
.tpl8 .t8-vm-title{ font-size:2.4rem; font-weight:700; margin:0 0 1.6rem; text-align:center; }
.tpl8 .t8-vm-text{ font-family:'Open Sans',sans-serif; font-size:1.5rem; line-height:1.85; color:var(--t8-ink-soft); text-align:center; font-style:italic; }
.tpl8 .t8-vm-list{ list-style:none; padding:0; margin:0; }
.tpl8 .t8-vm-list li{ display:flex; gap:1.2rem; padding:1.2rem 0; border-bottom:1px solid var(--t8-line); font-family:'Open Sans',sans-serif; font-size:1.4rem; line-height:1.6; color:var(--t8-ink-soft); }
.tpl8 .t8-vm-list li:last-child{ border-bottom:none; }
.tpl8 .t8-vm-list li i{ color:var(--t8-gold); margin-top:.5rem; flex-shrink:0; font-size:1.2rem; }
.tpl8 .t8-vm-corner{ position:absolute; width:32px; height:32px; border:2px solid var(--t8-gold); }
.tpl8 .t8-vm-corner--tl{ top:1.2rem; left:1.2rem; border-right:none; border-bottom:none; }
.tpl8 .t8-vm-corner--br{ bottom:1.2rem; right:1.2rem; border-left:none; border-top:none; }

/* ====================================================
   5. MISSION CAROUSEL ... Illuminated cards
   ==================================================== */
.tpl8 .t8-ms-stage{ position:relative; overflow:hidden; padding:0.5rem 0 1rem; }
.tpl8 .t8-ms-track{ display:flex; gap:2rem; transition:transform .55s cubic-bezier(.22,.61,.36,1); will-change:transform; }
.tpl8 .t8-ms-card{ flex:0 0 calc((100% - 4rem) / 3); min-width:0; background:var(--white); border:1px solid var(--t8-line); border-radius:16px; overflow:hidden; box-shadow:0 8px 24px rgba(var(--primary-rgb),.08); transition:all .3s; }
.tpl8 .t8-ms-card:hover{ transform:translateY(-6px); box-shadow:0 22px 50px rgba(var(--primary-rgb),.16); border-color:var(--t8-gold); }
.tpl8 .t8-ms-card-img{ position:relative; aspect-ratio:16/10; overflow:hidden; }
.tpl8 .t8-ms-card-img img{ width:100%; height:100%; object-fit:cover; transition:transform .6s; }
.tpl8 .t8-ms-card:hover .t8-ms-card-img img{ transform:scale(1.05); }
.tpl8 .t8-ms-card-tag{ position:absolute; top:1rem; left:1rem; background:var(--t8-gold); color:var(--t8-emerald-3); font-family:'Open Sans',sans-serif; font-size:1.05rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; padding:.5rem 1.2rem; border-radius:4px; z-index:2; box-shadow:0 6px 14px rgba(0,0,0,.2); }
.tpl8 .t8-ms-card-frame{ position:absolute; inset:0; border:1.5px solid var(--t8-gold); margin:.6rem; border-radius:6px; pointer-events:none; }
.tpl8 .t8-ms-card-body{ padding:2rem; }
.tpl8 .t8-ms-card-text{ font-family:'Open Sans',sans-serif; font-size:1.4rem; line-height:1.7; color:var(--t8-ink-soft); margin:0; font-style:italic; position:relative; padding-left:1.6rem; }
.tpl8 .t8-ms-card-text::before{ content:'\201C'; position:absolute; left:-.4rem; top:-1rem; font-size:3.6rem; color:var(--t8-gold); opacity:.5; font-family:Georgia,serif; line-height:1; }
.tpl8 .t8-ms-controls{ display:flex; align-items:center; justify-content:center; gap:1.2rem; margin-top:2.8rem; }
.tpl8 .t8-ms-arrow{ width:44px; height:44px; border-radius:50%; background:var(--white); color:var(--primary); border:1.5px solid var(--border-light); cursor:pointer; font-size:1.3rem; display:flex; align-items:center; justify-content:center; transition:all .25s; box-shadow:0 4px 12px rgba(var(--primary-rgb),.08); }
.tpl8 .t8-ms-arrow:hover{ background:var(--primary); color:var(--white); border-color:var(--primary); transform:translateY(-2px); box-shadow:0 8px 18px rgba(var(--primary-rgb),.18); }
.tpl8 .t8-ms-dots{ display:flex; gap:.55rem; align-items:center; }
.tpl8 .t8-ms-dots button{ width:.9rem; height:.9rem; border:none; background:var(--border); border-radius:50%; cursor:pointer; padding:0; transition:.25s; }
.tpl8 .t8-ms-dots button.is-active{ background:var(--accent); width:2.2rem; border-radius:999px; box-shadow:0 0 0 4px rgba(var(--accent-rgb),.14); }

/* ====================================================
   6. CORE VALUES ... Hexagonal crests on dark bg
   ==================================================== */
.tpl8 .t8-section--dark .t8-eyebrow{ color:var(--t8-gold); }
.tpl8 .t8-section--dark .t8-section-title .t8-accent{ color:var(--t8-gold-bright); }
.tpl8 .t8-values{ display:grid; grid-template-columns:repeat(auto-fit, minmax(20rem, 1fr)); gap:3rem 2rem; padding-top:2rem; }
.tpl8 .t8-value{ position:relative; text-align:center; padding:0 1rem; }
.tpl8 .t8-value-num{ position:absolute; top:-1rem; left:50%; transform:translateX(-50%); font-family:'Open Sans',sans-serif; font-size:1.1rem; font-weight:800; color:var(--t8-gold); letter-spacing:.18em; background:var(--t8-emerald-3); padding:.3rem 1rem; border-radius:12px; border:1px solid var(--t8-gold); }
.tpl8 .t8-value-hex{ position:relative; width:120px; height:130px; margin:0 auto 1.6rem; color:var(--t8-gold); display:flex; align-items:center; justify-content:center; }
.tpl8 .t8-hex-svg{ position:absolute; inset:0; width:100%; height:100%; transition:transform .4s, color .3s; }
.tpl8 .t8-value-hex i{ font-size:2.8rem; color:var(--t8-gold); z-index:1; }
.tpl8 .t8-value:hover .t8-hex-svg{ transform:rotate(30deg); color:var(--t8-gold-bright); }
.tpl8 .t8-value:hover .t8-value-hex i{ transform:scale(1.1); }
.tpl8 .t8-value-name{ font-size:1.85rem; font-weight:700; margin:0 0 .8rem; color:var(--white); }
.tpl8 .t8-value-desc{ font-family:'Open Sans',sans-serif; font-size:1.3rem; line-height:1.6; color:rgba(255,255,255,.75); margin:0; }

/* ====================================================
   7. STATS / VIDEO ... Arched video frame + counter pillars
   ==================================================== */
.tpl8 .t8-stats{ position:relative; padding:6.5rem clamp(1.6rem,2.5vw,3rem) 6.5rem clamp(1.6rem,2.5vw,3rem); background:var(--primary-deeper); color:var(--white); overflow:hidden; border-top:4px solid var(--accent); }
.tpl8 .t8-stats::before{ display:none; }
.tpl8 .t8-vv{ display:grid; grid-template-columns:1.1fr .9fr; gap:5rem; align-items:center; margin-bottom:7rem; position:relative; z-index:1; }
.tpl8 .t8-vv-video{ position:relative; aspect-ratio:16/10; cursor:pointer; border-radius:200px 200px 14px 14px; overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.5); transition:all .4s; border:3px solid var(--t8-gold); }
.tpl8 .t8-vv-video:hover{ transform:translateY(-6px); box-shadow:0 40px 100px rgba(var(--gold-rgb),.35); }
.tpl8 .t8-vv-arch{ width:100%; height:100%; overflow:hidden; }
.tpl8 .t8-vv-arch img{ width:100%; height:100%; object-fit:cover; transition:transform .6s; }
.tpl8 .t8-vv-video:hover .t8-vv-arch img{ transform:scale(1.06); }
.tpl8 .t8-vv-play{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:90px; height:90px; background:rgba(255,255,255,.95); color:var(--t8-emerald-3); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:2.6rem; padding-left:.5rem; box-shadow:0 12px 30px rgba(0,0,0,.4); transition:all .3s; }
.tpl8 .t8-vv-video:hover .t8-vv-play{ background:var(--t8-gold); transform:translate(-50%,-50%) scale(1.08); }
.tpl8 .t8-vv-badge{ position:absolute; bottom:1.6rem; left:50%; transform:translateX(-50%); background:rgba(0,0,0,.7); color:var(--white); font-family:'Open Sans',sans-serif; font-size:1.15rem; font-weight:700; padding:.7rem 1.6rem; border-radius:24px; backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.18); display:flex; align-items:center; gap:.6rem; }
.tpl8 .t8-vv-text .t8-eyebrow{ color:var(--t8-gold); margin-bottom:1.2rem; }
.tpl8 .t8-vv-text .t8-section-title{ color:var(--white); text-align:left; }
.tpl8 .t8-vv-text .t8-section-sub{ color:rgba(255,255,255,.82); text-align:left; margin:1.4rem 0 2.4rem; }

.tpl8 .t8-stats-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2.4rem; position:relative; z-index:1; }
.tpl8 .t8-stat{ position:relative; text-align:center; padding:2.8rem 1.8rem 2.4rem; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10); border-radius:16px; transition:all .35s; }
.tpl8 .t8-stat::before{ content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--gold); border-radius:16px 16px 0 0; }
.tpl8 .t8-stat:hover{ transform:translateY(-6px); border-color:rgba(var(--gold-rgb),.32); box-shadow:0 18px 40px rgba(0,0,0,.28); }
.tpl8 .t8-stat-icon{ width:6rem; height:6rem; margin:0 auto 1.4rem; background:var(--primary); border:1.5px solid var(--gold); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:2.2rem; color:var(--gold); }
.tpl8 .t8-stat-num{ font-family:'Trirong',Georgia,serif; font-size:5rem; font-weight:700; line-height:1; color:var(--stat-color, var(--t8-gold)); margin-bottom:1rem; }
.tpl8 .t8-stat-num .suffix{ font-size:3rem; opacity:.85; }
.tpl8 .t8-stat-label{ font-family:'Open Sans',sans-serif; font-size:1.4rem; font-weight:800; color:var(--white); letter-spacing:.06em; text-transform:uppercase; margin-bottom:1rem; }
.tpl8 .t8-stat-desc{ font-family:'Open Sans',sans-serif; font-size:1.3rem; line-height:1.6; color:rgba(255,255,255,.75); margin:0; }

/* ====================================================
   8. PORTAL FEATURES ... Tiled mosaic (unique heritage)
   ==================================================== */
.tpl8 .t8-features{ display:grid; grid-template-columns:repeat(4, 1fr); grid-auto-rows:minmax(220px, auto); gap:1.8rem; }
.tpl8 .t8-feature{ position:relative; display:flex; flex-direction:column; padding:2.8rem 2.4rem; background:var(--white); border:1px solid var(--t8-line); border-radius:6px; text-decoration:none; color:var(--t8-ink); transition:all .35s cubic-bezier(.22,.61,.36,1); overflow:hidden; }
.tpl8 .t8-feature::before{ content:''; position:absolute; top:0; left:0; right:0; height:4px; background:var(--t8-emerald); transform:scaleX(0); transform-origin:left; transition:transform .4s; }
.tpl8 .t8-feature::after{ content:''; position:absolute; bottom:0; right:0; width:0; height:0; border-style:solid; border-width:0 0 24px 24px; border-color:transparent transparent var(--t8-gold) transparent; transition:border-width .3s; }
.tpl8 .t8-feature:hover{ transform:translateY(-6px); border-color:var(--t8-gold); box-shadow:0 22px 50px rgba(var(--primary-rgb),.18); }
.tpl8 .t8-feature:hover::before{ transform:scaleX(1); }
.tpl8 .t8-feature:hover::after{ border-width:0 0 36px 36px; }
.tpl8 .t8-feature--1{ grid-column:span 2; grid-row:span 2; background:var(--white); }
.tpl8 .t8-feature--5{ grid-column:span 2; background:var(--primary-deeper); color:var(--white); border-color:transparent; }
.tpl8 .t8-feature--5 .t8-feature-title,
.tpl8 .t8-feature--5 .t8-feature-desc{ color:var(--white); }
.tpl8 .t8-feature--5 .t8-feature-desc{ color:rgba(255,255,255,.85); }
.tpl8 .t8-feature--5 .t8-feature-icon{ background:rgba(var(--gold-rgb),.18); border-color:var(--t8-gold); color:var(--t8-gold); }
.tpl8 .t8-feature--5 .t8-feature-link{ color:var(--t8-gold); }
.tpl8 .t8-feature-icon{ width:5.6rem; height:5.6rem; background:var(--t8-cream-2); border:1.5px solid var(--t8-gold); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:2.2rem; color:var(--t8-emerald); margin-bottom:1.6rem; transition:all .3s; }
.tpl8 .t8-feature:hover .t8-feature-icon{ background:var(--t8-gold); color:var(--t8-emerald-3); transform:rotate(8deg); }
.tpl8 .t8-feature-title{ font-size:1.9rem; font-weight:700; margin:0 0 .8rem; line-height:1.2; }
.tpl8 .t8-feature-desc{ font-family:'Open Sans',sans-serif; font-size:1.3rem; line-height:1.6; color:var(--t8-ink-soft); margin:0 0 1.4rem; flex:1; }
.tpl8 .t8-feature-link{ display:inline-flex; align-items:center; gap:.6rem; font-family:'Open Sans',sans-serif; font-size:1.2rem; font-weight:800; color:var(--t8-emerald); text-transform:uppercase; letter-spacing:.06em; }
.tpl8 .t8-feature-link i{ transition:transform .25s; }
.tpl8 .t8-feature:hover .t8-feature-link i{ transform:translateX(4px); }

.tpl8 .t8-feature-visual{ display:flex; align-items:flex-end; gap:.6rem; height:90px; margin-top:1.4rem; padding-top:1rem; border-top:1px solid var(--t8-line); }
.tpl8 .t8-feature--5 .t8-feature-visual{ border-top-color:rgba(255,255,255,.18); }
.tpl8 .t8-feature-bar{ flex:1; background:var(--gold); border-radius:3px 3px 0 0; min-height:8%; transition:transform .3s; }
.tpl8 .t8-feature:hover .t8-feature-bar{ transform:scaleY(1.05); }

/* ====================================================
   9. WHY CHOOSE US ... Calligraphic pillars
   ==================================================== */
.tpl8 .t8-why{ display:grid; grid-template-columns:repeat(4,1fr); gap:2.4rem; }
.tpl8 .t8-why-card{ position:relative; background:var(--white); border:1px solid var(--t8-line); border-radius:8px; padding:3rem 2.4rem 2.8rem; text-align:center; transition:all .35s; overflow:hidden; }
.tpl8 .t8-why-card::before{ content:''; position:absolute; left:0; right:0; top:0; height:0; background:var(--primary-mist); transition:height .35s; z-index:0; }
.tpl8 .t8-why-card:hover{ transform:translateY(-6px); border-color:var(--t8-gold); box-shadow:0 22px 50px rgba(var(--primary-rgb),.16); }
.tpl8 .t8-why-card:hover::before{ height:100%; }
.tpl8 .t8-why-card > *{ position:relative; z-index:1; }
.tpl8 .t8-why-num{ font-family:'Trirong',Georgia,serif; font-size:4.8rem; font-weight:700; font-style:italic; color:var(--t8-gold); line-height:1; margin-bottom:.8rem; opacity:.85; }
.tpl8 .t8-why-icon{ width:6rem; height:6rem; margin:0 auto 1.4rem; background:var(--primary); border:1.5px solid var(--gold); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:2.4rem; color:var(--gold); transition:all .3s; }
.tpl8 .t8-why-card:hover .t8-why-icon{ background:var(--t8-gold); color:var(--t8-emerald-3); transform:scale(1.06); }
.tpl8 .t8-why-title{ font-size:1.7rem; font-weight:700; margin:0 0 .8rem; color:var(--t8-ink); }
.tpl8 .t8-why-desc{ font-family:'Open Sans',sans-serif; font-size:1.25rem; line-height:1.6; color:var(--t8-ink-soft); margin:0; }

/* ====================================================
   10. TESTIMONIAL ... Manuscript testimonial
   ==================================================== */
.tpl8 .t8-testimonials{ position:relative; }
.tpl8 .t8-testimonial{ position:relative; max-width:84rem; margin:0 auto; background:var(--white); border:1px solid var(--t8-line); border-radius:16px; padding:3.6rem 3rem 3rem; box-shadow:0 18px 40px rgba(var(--primary-rgb),.10); }
.tpl8 .t8-testimonial::before,
.tpl8 .t8-testimonial::after{ content:''; position:absolute; width:48px; height:48px; border:2px solid var(--t8-gold); }
.tpl8 .t8-testimonial::before{ top:1.4rem; left:1.4rem; border-right:none; border-bottom:none; }
.tpl8 .t8-testimonial::after{ bottom:1.4rem; right:1.4rem; border-left:none; border-top:none; }
.tpl8 .t8-testimonial-quill{ position:absolute; top:-30px; right:4rem; width:80px; height:80px; background:var(--t8-emerald); color:var(--t8-gold); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:3rem; border:4px solid var(--t8-cream); box-shadow:0 12px 30px rgba(var(--primary-rgb),.35); transform:rotate(-12deg); }
.tpl8 .t8-testimonial-quote{ font-family:'Trirong',Georgia,serif; font-style:italic; font-size:1.85rem; line-height:1.85; color:var(--t8-ink); margin:0 0 3rem; text-align:center; position:relative; padding:0 2rem; }
.tpl8 .t8-testimonial-quote::before{ content:'\201C'; position:absolute; left:-.4rem; top:-2.4rem; font-size:8rem; color:var(--t8-gold); opacity:.3; line-height:1; font-family:Georgia,serif; }
.tpl8 .t8-testimonial-author{ display:flex; align-items:center; gap:2rem; justify-content:center; padding-top:2.4rem; border-top:1px dashed var(--t8-line); }
.tpl8 .t8-testimonial-avatar{ width:72px; height:72px; border-radius:50%; background:var(--primary); color:var(--gold); display:flex; align-items:center; justify-content:center; font-size:2.4rem; font-weight:700; font-family:'Trirong',Georgia,serif; border:3px solid var(--gold); flex-shrink:0; }
.tpl8 .t8-testimonial-meta{ text-align:left; }
.tpl8 .t8-testimonial-name{ font-size:1.7rem; font-weight:700; margin:0 0 .2rem; }
.tpl8 .t8-testimonial-role{ font-family:'Open Sans',sans-serif; font-size:1.2rem; color:var(--t8-ink-soft); margin:0 0 .6rem; }
.tpl8 .t8-testimonial-stars{ display:flex; gap:.2rem; color:var(--t8-gold); font-size:1.15rem; }

/* ====================================================
   11. NEWS ... Arched image frames
   ==================================================== */
.tpl8 .t8-news{ display:grid; grid-template-columns:repeat(3,1fr); gap:2.4rem; }
.tpl8 .t8-news-card{ display:flex; flex-direction:column; background:var(--white); border:1px solid var(--t8-line); border-radius:8px; overflow:hidden; text-decoration:none; color:var(--t8-ink); transition:all .35s; }
.tpl8 .t8-news-card:hover{ transform:translateY(-6px); box-shadow:0 22px 50px rgba(var(--primary-rgb),.16); border-color:var(--t8-gold); }
.tpl8 .t8-news-img{ position:relative; aspect-ratio:16/10; overflow:hidden; }
.tpl8 .t8-news-img img{ width:100%; height:100%; object-fit:cover; transition:transform .6s; }
.tpl8 .t8-news-card:hover .t8-news-img img{ transform:scale(1.05); }
.tpl8 .t8-news-date{ position:absolute; top:1.2rem; left:1.2rem; background:var(--t8-gold); color:var(--t8-emerald-3); padding:.7rem 1.2rem; border-radius:4px; text-align:center; box-shadow:0 6px 14px rgba(0,0,0,.2); z-index:2; line-height:1.1; }
.tpl8 .t8-news-date strong{ display:block; font-family:'Trirong',Georgia,serif; font-size:2.2rem; font-weight:700; }
.tpl8 .t8-news-date span{ display:block; font-family:'Open Sans',sans-serif; font-size:1rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.tpl8 .t8-news-arch{ position:absolute; inset:0; border:1.5px solid var(--t8-gold); margin:.6rem; border-radius:6px; pointer-events:none; }
.tpl8 .t8-news-body{ padding:2.2rem 2.2rem 2.6rem; flex:1; display:flex; flex-direction:column; }
.tpl8 .t8-news-tag{ display:inline-flex; align-items:center; gap:.4rem; align-self:flex-start; font-family:'Open Sans',sans-serif; font-size:1.1rem; font-weight:800; color:var(--t8-emerald); text-transform:uppercase; letter-spacing:.1em; margin-bottom:1rem; padding:.4rem .8rem; background:var(--t8-cream-2); border-radius:4px; }
.tpl8 .t8-news-title{ font-size:1.9rem; font-weight:700; margin:0 0 1rem; line-height:1.25; }
.tpl8 .t8-news-excerpt{ font-family:'Open Sans',sans-serif; font-size:1.3rem; line-height:1.65; color:var(--t8-ink-soft); margin:0 0 1.4rem; flex:1; }
.tpl8 .t8-news-link{ display:inline-flex; align-items:center; gap:.6rem; font-family:'Open Sans',sans-serif; font-size:1.2rem; font-weight:800; color:var(--t8-gold); text-transform:uppercase; letter-spacing:.06em; margin-top:auto; }
.tpl8 .t8-news-link i{ transition:transform .25s; }
.tpl8 .t8-news-card:hover .t8-news-link i{ transform:translateX(4px); }

/* ====================================================
   12. ACADEMIC SHOWCASE ... Result + Yearbook + Gallery
   ==================================================== */
.tpl8 .t8-showcase-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2.4rem; }
.tpl8 .t8-showcase-card{ display:flex; flex-direction:column; background:var(--white); border:1px solid var(--t8-line); border-radius:8px; overflow:hidden; text-decoration:none; color:var(--t8-ink); transition:all .35s; }
.tpl8 .t8-showcase-card:hover{ transform:translateY(-6px); box-shadow:0 22px 50px rgba(var(--primary-rgb),.16); border-color:var(--t8-gold); }
.tpl8 .t8-showcase-visual{ position:relative; aspect-ratio:4/3; background:var(--t8-cream-2); display:flex; align-items:center; justify-content:center; padding:2rem; overflow:hidden; }
.tpl8 .t8-showcase-doc{ width:80%; height:90%; background:var(--white); border-radius:4px; box-shadow:0 12px 30px rgba(0,0,0,.18); padding:1rem; display:flex; flex-direction:column; gap:.5rem; transform:rotate(-2deg); transition:transform .4s; }
.tpl8 .t8-showcase-card:hover .t8-showcase-doc{ transform:rotate(0); }
.tpl8 .t8-doc-band{ display:flex; align-items:center; gap:.6rem; padding-bottom:.5rem; border-bottom:1px solid var(--border); }
.tpl8 .t8-doc-logo{ width:24px; height:24px; border-radius:50%; background:var(--t8-emerald); }
.tpl8 .t8-doc-lines{ flex:1; }
.tpl8 .t8-doc-line{ height:4px; background:var(--gray-200); border-radius:2px; }
.tpl8 .t8-doc-stamp{ width:24px; height:24px; border:2px solid var(--t8-gold); border-radius:50%; }
.tpl8 .t8-doc-title-strip{ height:8px; background:var(--primary); border-radius:2px; }
.tpl8 .t8-doc-info{ display:flex; flex-direction:column; gap:.4rem; padding:.4rem 0; }
.tpl8 .t8-doc-info-row{ display:flex; gap:.6rem; }
.tpl8 .t8-doc-info-row .t8-doc-line{ height:6px; }
.tpl8 .t8-doc-badges{ display:flex; gap:.4rem; padding:.4rem 0; }
.tpl8 .t8-doc-badge{ padding:.2rem .5rem; border-radius:3px; color:var(--white); font-family:'Open Sans',sans-serif; font-size:.85rem; font-weight:800; }
.tpl8 .t8-doc-badge--gold{ background:var(--t8-gold); color:var(--t8-emerald-3); }
.tpl8 .t8-doc-badge--emerald{ background:var(--t8-emerald); }
.tpl8 .t8-doc-table{ display:flex; flex-direction:column; gap:3px; flex:1; padding:.3rem 0; }
.tpl8 .t8-doc-row{ display:flex; gap:2px; }
.tpl8 .t8-doc-cell{ height:8px; border-radius:1px; background:var(--white); }
.tpl8 .t8-doc-cell--label{ background:var(--gray-200); }
.tpl8 .t8-doc-cell--total{ background:#1a1d21; }
.tpl8 .t8-doc-foot{ display:flex; flex-direction:column; }

.tpl8 .t8-showcase-visual--book{ background:var(--primary-deeper); }
.tpl8 .t8-showcase-book{ position:relative; width:160px; height:200px; transform:rotate(-4deg); transition:transform .4s; }
.tpl8 .t8-showcase-card:hover .t8-showcase-book{ transform:rotate(0); }
.tpl8 .t8-book-spine{ position:absolute; left:0; top:0; width:14px; height:100%; background:var(--primary-deeper); border-radius:2px 0 0 2px; }
.tpl8 .t8-book-cover{ position:absolute; inset:0 0 0 14px; background:var(--t8-gold); border-radius:2px 8px 8px 2px; padding:1.2rem .8rem; display:flex; flex-direction:column; align-items:center; justify-content:center; box-shadow:0 14px 30px rgba(0,0,0,.35); }
.tpl8 .t8-book-rings{ position:absolute; left:-2px; top:14px; bottom:14px; width:18px; display:flex; flex-direction:column; justify-content:space-between; }
.tpl8 .t8-book-rings span{ display:block; width:18px; height:18px; border-radius:50%; background:transparent; border:3px solid var(--primary-deeper); }
.tpl8 .t8-book-year{ font-family:'Trirong',Georgia,serif; font-size:2.6rem; font-weight:700; color:var(--t8-emerald-3); line-height:1; }
.tpl8 .t8-book-title{ font-family:'Trirong',Georgia,serif; font-size:1.2rem; font-weight:800; color:var(--t8-emerald-3); letter-spacing:.18em; margin-top:.4rem; }
.tpl8 .t8-book-sub{ font-family:'Open Sans',sans-serif; font-size:.8rem; font-weight:700; color:var(--t8-emerald-3); letter-spacing:.14em; text-transform:uppercase; margin-top:.2rem; }
.tpl8 .t8-book-deco{ position:absolute; background:var(--t8-emerald-3); opacity:.18; border-radius:50%; }
.tpl8 .t8-book-deco--1{ top:8px; right:8px; width:30px; height:30px; }
.tpl8 .t8-book-deco--2{ bottom:14px; left:30px; width:20px; height:20px; }
.tpl8 .t8-book-deco--3{ bottom:36px; right:14px; width:12px; height:12px; }
.tpl8 .t8-book-edge{ position:absolute; right:-3px; top:0; bottom:0; width:3px; background:var(--gold); border-radius:0 2px 2px 0; }

.tpl8 .t8-showcase-visual--gallery{ padding:1.6rem; }
.tpl8 .t8-gallery-single{ position:relative; width:100%; height:100%; border-radius:8px; overflow:hidden; box-shadow:0 14px 30px rgba(0,0,0,.18); border:1.5px solid var(--t8-gold); }
.tpl8 .t8-gallery-single img{ width:100%; height:100%; object-fit:cover; transition:transform .6s; }
.tpl8 .t8-showcase-card:hover .t8-gallery-single img{ transform:scale(1.05); }
.tpl8 .t8-gallery-caption{ position:absolute; bottom:1rem; left:1rem; background:rgba(0,0,0,.7); color:var(--white); font-family:'Open Sans',sans-serif; font-size:1.05rem; font-weight:700; padding:.5rem 1rem; border-radius:4px; display:flex; align-items:center; gap:.5rem; backdrop-filter:blur(8px); }
.tpl8 .t8-gallery-corner{ position:absolute; top:1rem; right:1rem; width:36px; height:36px; background:var(--t8-gold); color:var(--t8-emerald-3); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.1rem; }
.tpl8 .t8-gallery-arch{ position:absolute; inset:0; border:1.5px solid var(--t8-gold); margin:.5rem; border-radius:6px; pointer-events:none; }

.tpl8 .t8-showcase-body{ padding:2.4rem 2.4rem 2.8rem; }
.tpl8 .t8-showcase-tag{ display:inline-flex; align-items:center; gap:.4rem; font-family:'Open Sans',sans-serif; font-size:1.1rem; font-weight:800; color:var(--t8-emerald); text-transform:uppercase; letter-spacing:.1em; padding:.4rem 1rem; background:var(--t8-cream-2); border-radius:4px; margin-bottom:1.2rem; }
.tpl8 .t8-showcase-title{ font-size:2rem; font-weight:700; margin:0 0 1rem; }
.tpl8 .t8-showcase-desc{ font-family:'Open Sans',sans-serif; font-size:1.3rem; line-height:1.65; color:var(--t8-ink-soft); margin:0 0 1.6rem; }
.tpl8 .t8-showcase-link{ display:inline-flex; align-items:center; gap:.6rem; font-family:'Open Sans',sans-serif; font-size:1.2rem; font-weight:800; color:var(--t8-gold); text-transform:uppercase; letter-spacing:.06em; }
.tpl8 .t8-showcase-link i{ transition:transform .25s; }
.tpl8 .t8-showcase-card:hover .t8-showcase-link i{ transform:translateX(4px); }

/* ====================================================
   13. CTA / NEWSLETTER ... Manuscript envelope — solid, no gradients
   ==================================================== */
.tpl8 .t8-cta{ position:relative; padding:6.5rem clamp(1.6rem,2.5vw,3rem) 5.5rem clamp(1.6rem,2.5vw,3rem); background:var(--primary-deeper); color:var(--white); overflow:hidden; border-top:4px solid var(--accent); }
.tpl8 .t8-cta::before{ display:none; }
.tpl8 .t8-cta::after{ content:''; position:absolute; top:4px; left:0; width:10rem; height:2px; background:var(--gold); border-radius:0 2px 2px 0; z-index:2; }
.tpl8 .t8-cta-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:5rem; align-items:center; position:relative; z-index:1; }
.tpl8 .t8-cta-text .t8-eyebrow{ color:var(--t8-gold); margin-bottom:1.4rem; }
.tpl8 .t8-cta-text h2{ font-size:clamp(2.8rem,4.4vw,4.2rem); font-weight:700; margin:0 0 1.4rem; line-height:1.15; color:var(--white); }
.tpl8 .t8-cta-text h2 .t8-gold-text{ color:var(--t8-gold); font-style:italic; }
.tpl8 .t8-cta-text p{ font-family:'Open Sans',sans-serif; font-size:1.5rem; line-height:1.75; color:rgba(255,255,255,.85); margin:0 0 2.4rem; max-width:50rem; }
.tpl8 .t8-cta-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; padding-top:2rem; border-top:1px solid rgba(255,255,255,.18); }
.tpl8 .t8-cta-stat strong{ display:block; font-family:'Trirong',Georgia,serif; font-size:2.8rem; font-weight:700; color:var(--t8-gold); line-height:1; margin-bottom:.4rem; }
.tpl8 .t8-cta-stat span{ font-family:'Open Sans',sans-serif; font-size:1.2rem; color:rgba(255,255,255,.78); }

.tpl8 .t8-cta-form{ position:relative; background:var(--white); color:var(--t8-ink); border:1px solid var(--t8-line); border-radius:16px; padding:2.8rem 2.4rem; box-shadow:0 16px 40px rgba(0,0,0,.18); }
.tpl8 .t8-cta-form::before,
.tpl8 .t8-cta-form::after{ content:''; position:absolute; width:36px; height:36px; border:2px solid var(--t8-gold); }
.tpl8 .t8-cta-form::before{ top:10px; left:10px; border-right:none; border-bottom:none; }
.tpl8 .t8-cta-form::after{ bottom:10px; right:10px; border-left:none; border-top:none; }
.tpl8 .t8-cta-form h3{ font-size:2rem; font-weight:700; margin:0 0 1.6rem; display:flex; align-items:center; gap:1rem; }
.tpl8 .t8-cta-form h3 i{ color:var(--t8-gold); }
.tpl8 .t8-cta-input{ width:100%; padding:1.3rem 1.6rem; font-family:'Open Sans',sans-serif; font-size:1.35rem; color:var(--t8-ink); background:var(--white); border:1.5px solid var(--t8-line); border-radius:4px; margin-bottom:1.2rem; transition:border-color .25s; }
.tpl8 .t8-cta-input:focus{ outline:none; border-color:var(--t8-gold); box-shadow:0 0 0 3px rgba(var(--gold-rgb),.18); }
.tpl8 .t8-cta-submit{ width:100%; padding:1.3rem 2rem; background:var(--t8-emerald); color:var(--white); border:1.5px solid var(--t8-gold); border-radius:4px; font-family:'Open Sans',sans-serif; font-size:1.4rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; cursor:pointer; transition:all .25s; display:flex; align-items:center; justify-content:center; gap:1rem; }
.tpl8 .t8-cta-submit:hover{ background:var(--t8-gold); color:var(--t8-emerald-3); }
.tpl8 .t8-cta-foot{ display:flex; align-items:center; gap:.6rem; font-family:'Open Sans',sans-serif; font-size:1.2rem; color:var(--t8-ink-soft); margin:1.2rem 0 0; }
.tpl8 .t8-cta-foot i{ color:var(--t8-gold); }

/* ====================================================
   RESPONSIVE
   ==================================================== */
@media(max-width: 1199px){
  .tpl8 .t8-hero-grid{ gap:3.6rem; }
  .tpl8 .t8-features{ grid-template-columns:repeat(3,1fr); }
  .tpl8 .t8-feature--1{ grid-column:span 2; }
  .tpl8 .t8-feature--5{ grid-column:span 3; }
  .tpl8 .t8-why{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width: 991px){
  .tpl8 .t8-hero-grid{ grid-template-columns:1fr; gap:3.2rem; text-align:center; }
  .tpl8 .t8-hero-text{ text-align:center; }
  .tpl8 .t8-hero-trust{ grid-template-columns:repeat(3,1fr) !important; gap:1.4rem; text-align:left; }
  .tpl8 .t8-hero-motto{ padding-left:0; }
  .tpl8 .t8-hero-motto::before{ left:50%; transform:translateX(-50%); }
  .tpl8 .t8-hero-cta{ justify-content:center; flex-wrap:nowrap !important; gap:1.2rem !important; }
  .tpl8 .t8-hero-cta .t8-btn{ flex:1 1 0; min-width:0; justify-content:center; white-space:nowrap; }
  .tpl8 .t8-btn--ghost{ margin-left:0; }
  .tpl8 .t8-levels,
  .tpl8 .t8-levels--count-2{ grid-template-columns:1fr; }
  .tpl8 .t8-vm,
  .tpl8 .t8-vv{ grid-template-columns:1fr; }
  .tpl8 .t8-stats-grid{ grid-template-columns:repeat(3,1fr) !important; gap:1.6rem; }
  .tpl8 .t8-news,
  .tpl8 .t8-showcase-grid,
  .tpl8 .t8-cta-grid{ grid-template-columns:1fr; }
  .tpl8 .t8-features{ grid-template-columns:repeat(2,1fr); }
  .tpl8 .t8-feature--1,
  .tpl8 .t8-feature--5{ grid-column:span 2; }
  .tpl8 .t8-feature--1{ grid-row:span 1; }
  .tpl8 .t8-why{ grid-template-columns:1fr 1fr; }
  .tpl8 .t8-section{ padding:5rem clamp(1.4rem,2.5vw,2.4rem) 5rem clamp(1.4rem,2.5vw,2.4rem); }
  .tpl8 .t8-stats{ padding:5rem clamp(1.4rem,2.5vw,2.4rem); }
  .tpl8 .t8-testimonial{ padding:4rem 2.4rem 2.4rem; }
  .tpl8 .t8-cta-stats{ grid-template-columns:1fr 1fr 1fr; }
  .tpl8 .t8-cta-text{ text-align:center; }
  .tpl8 .t8-cta-text p{ margin-left:auto; margin-right:auto; }
}
@media(max-width: 767px){
  .tpl8 .t8-hero{ padding:5rem clamp(1.2rem,4vw,1.8rem) 5.5rem clamp(1.2rem,4vw,1.8rem); }
  .tpl8 .t8-hero-frame{ padding:1.2rem; }
  .tpl8 .t8-hero-cta{ flex-wrap:nowrap !important; gap:1rem !important; width:100%; }
  .tpl8 .t8-hero-cta .t8-btn{ flex:1 1 0; min-width:0; padding:1.1rem 1.2rem !important; font-size:1.15rem !important; white-space:nowrap; justify-content:center; }
  .tpl8 .t8-hero-trust{ grid-template-columns:repeat(3,1fr) !important; }
  .tpl8 .t8-trust-item{ flex-direction:column; text-align:center; gap:.6rem; }
  .tpl8 .t8-trust-item strong{ font-size:1.25rem; }
  .tpl8 .t8-trust-item span{ font-size:1rem; }
  .tpl8 .t8-vv-video{ border-radius:120px 120px 14px 14px; }
  .tpl8 .t8-stats-grid{ grid-template-columns:repeat(3,1fr) !important; gap:1.2rem; }
  .tpl8 .t8-stat{ padding:2rem 1rem 1.8rem; }
  .tpl8 .t8-stat-icon{ width:4.4rem; height:4.4rem; font-size:1.6rem; margin-bottom:1rem; }
  .tpl8 .t8-stat-num{ font-size:3.4rem; }
  .tpl8 .t8-stat-num .suffix{ font-size:2rem; }
  .tpl8 .t8-stat-label{ font-size:1rem; letter-spacing:.04em; }
  .tpl8 .t8-stat-desc{ font-size:1.1rem; }
  /* — Mobile first-principle: avoid vertical tower — */
  /* LEVELS: 3 cards → horizontal snap slider (was 1fr stack) */
  .tpl8 .t8-levels{
    display:flex; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden;
    gap:1rem; padding:0 .2rem 1rem; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; grid-template-columns:none;
  }
  .tpl8 .t8-levels::-webkit-scrollbar{ display:none; }
  .tpl8 .t8-level{ flex:0 0 78%; max-width:78%; scroll-snap-align:start; scroll-snap-stop:always; }
  /* FEATURES: 6+ cards → slider (biggest scroll saver) */
  .tpl8 .t8-features{
    display:flex; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden;
    gap:1rem; padding:0 .2rem 1rem; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; grid-template-columns:none; grid-auto-rows:auto;
  }
  .tpl8 .t8-features::-webkit-scrollbar{ display:none; }
  .tpl8 .t8-feature{ flex:0 0 68%; max-width:68%; scroll-snap-align:start; scroll-snap-stop:always; }
  .tpl8 .t8-feature--1, .tpl8 .t8-feature--5{ grid-column:auto; grid-row:auto; }
  /* VALUES: slider instead of tall 1-col tower */
  .tpl8 .t8-values{
    display:flex; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden;
    gap:1rem; padding:0 .2rem 1rem; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; grid-template-columns:none;
  }
  .tpl8 .t8-values::-webkit-scrollbar{ display:none; }
  .tpl8 .t8-value{ flex:0 0 72%; max-width:72%; scroll-snap-align:start; scroll-snap-stop:always; }
  /* NEWS: 3 cards → slider */
  .tpl8 .t8-news{
    display:flex; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden;
    gap:1rem; padding:0 .2rem 1rem; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; grid-template-columns:none;
  }
  .tpl8 .t8-news::-webkit-scrollbar{ display:none; }
  .tpl8 .t8-news-card{ flex:0 0 78%; max-width:78%; scroll-snap-align:start; scroll-snap-stop:always; }
  /* SHOWCASE: 3 cards → slider */
  .tpl8 .t8-showcase-grid{
    display:flex; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden;
    gap:1rem; padding:0 .2rem 1rem; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; grid-template-columns:none;
  }
  .tpl8 .t8-showcase-grid::-webkit-scrollbar{ display:none; }
  .tpl8 .t8-showcase-card{ flex:0 0 80%; max-width:80%; scroll-snap-align:start; scroll-snap-stop:always; }
  /* WHY: compact 2-col grid (4 cards → 2×2, shorter than slider UX) */
  .tpl8 .t8-why{ grid-template-columns:repeat(2,1fr); gap:.8rem; }
  /* CTA STATS: keep 3-col side-by-side, not stacked */
  .tpl8 .t8-cta-stats{ grid-template-columns:repeat(3,1fr); gap:.6rem; }
  .tpl8 .t8-section-head{ margin-bottom:2.8rem; }
  .tpl8 .t8-section{ padding:4rem clamp(1.2rem,4vw,1.8rem) 4rem clamp(1.2rem,4vw,1.8rem); }
  .tpl8 .t8-stats{ padding:4rem clamp(1.2rem,4vw,1.8rem); }
  .tpl8 .t8-cta{ padding:4rem clamp(1.2rem,4vw,1.8rem) 4rem clamp(1.2rem,4vw,1.8rem); }
  .tpl8 .t8-level{ padding:7rem 1.8rem 2.2rem; }
  .tpl8 .t8-testimonial{ padding:3rem 1.6rem 2rem; }
  .tpl8 .t8-testimonial-author{ flex-direction:column; text-align:center; }
  .tpl8 .t8-cta-form{ padding:2.4rem 1.8rem; }
  .tpl8 .t8-ms-card{ flex:0 0 calc(100% - 2rem); }
  .tpl8 .t8-ms-track{ gap:1.6rem; }
}
@media(max-width:400px){
  .tpl8 .t8-hero-cta{ gap:.5rem !important; }
  .tpl8 .t8-hero-cta .t8-btn{ padding:.85rem .55rem !important; font-size:.95rem !important; gap:.4rem; }
  .tpl8 .t8-hero-trust{ gap:.35rem !important; }
  .tpl8 .t8-trust-item strong{ font-size:1.08rem; }
  .tpl8 .t8-trust-item span{ font-size:.86rem; }
  .tpl8 .t8-stats-grid{ gap:.6rem !important; }
  .tpl8 .t8-stat{ padding:1.4rem .5rem 1.1rem; }
  .tpl8 .t8-stat-num{ font-size:2.8rem; }
  .tpl8 .t8-cta-stats{ gap:.4rem; }
  .tpl8 .t8-level{ flex:0 0 84%; max-width:84%; }
  .tpl8 .t8-feature{ flex:0 0 76%; max-width:76%; }
  .tpl8 .t8-value{ flex:0 0 78%; max-width:78%; }
  .tpl8 .t8-news-card{ flex:0 0 84%; max-width:84%; }
  .tpl8 .t8-showcase-card{ flex:0 0 86%; max-width:86%; }
  .tpl8 .t8-why{ gap:.6rem; }
}

/* =====================================================
   TEMPLATE 9 — STEM FUTURE
   ===================================================== */
/* =====================================================
   TEMPLATE 9: STEM FUTURE ... scoped under .tpl9
   Dark charcoal + neon cyan, circuit grid backdrop,
   terminal panels, holographic accents, hex chips.
   ===================================================== */
.tpl9{
  /* SOLID palette — no gradients, fully derived from header/footer theme vars like tpl12 */
  --t9-cyan:var(--primary-light);
  --t9-blue:var(--accent);
  --t9-gold:var(--gold);
  --t9-charcoal:var(--primary-deeper);
  --t9-panel:var(--primary-dark);
  --t9-panel-2:var(--primary-deeper);
  --t9-line:rgba(255,255,255,.08);
  --t9-line-bright:rgba(255,255,255,.14);
  --t9-text:var(--white);
  --t9-mute:rgba(255,255,255,.72);
  --t9-soft:rgba(255,255,255,.86);
  background:var(--primary-deeper);
  color:var(--white);
  font-family:'Poppins','Open Sans',sans-serif;
  overflow-x:hidden;
}
.tpl9 *{ box-sizing:border-box; }
.tpl9 .t9-container{ max-width:1280px; margin:0 auto; padding:0 clamp(1.6rem,2.5vw,3rem); }
.tpl9 section{ scroll-margin-top:8rem; }
.tpl9 .t9-mono{ font-family:'JetBrains Mono','Courier New',monospace; }

/* ... Shared section heading & accent ... */
.tpl9 .t9-kicker{
  display:inline-flex; align-items:center; gap:.8rem;
  color:var(--t9-cyan);
  font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  font-size:1.2rem;
  padding:.6rem 1.2rem;
  border:1px solid rgba(var(--primary-light-rgb),.4);
  background:rgba(var(--primary-light-rgb),.08);
  border-radius:6px;
  margin-bottom:1.4rem;
}
.tpl9 .t9-kicker i{ font-size:1rem; }
.tpl9 .t9-head{ text-align:center; max-width:68rem; margin:0 auto 4.2rem; position:relative; z-index:2; }
.tpl9 .t9-head h2{ color:var(--white); font-size:clamp(2.6rem,4vw,3.8rem); font-weight:800; letter-spacing:-.02em; margin:1rem 0 1.1rem; line-height:1.15; }
.tpl9 .t9-head p{ color:rgba(255,255,255,.74); font-size:1.48rem; line-height:1.72; max-width:62rem; margin:1.1rem auto 0; }
.tpl9 .t9-vm .t9-head h2, .tpl9 .t9-mission .t9-head h2, .tpl9 .t9-why .t9-head h2, .tpl9 .t9-news .t9-head h2{ color:var(--primary-dark); }
.tpl9 .t9-vm .t9-head p, .tpl9 .t9-mission .t9-head p, .tpl9 .t9-why .t9-head p, .tpl9 .t9-news .t9-head p{ color:var(--text-secondary); }
.tpl9 .t9-accent{
  background:none;
  -webkit-background-clip:initial; background-clip:initial;
  -webkit-text-fill-color:initial;
  color:var(--gold);
}

/* ... Reveal animations ... */
.tpl9 .t9-reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s cubic-bezier(.4,0,.2,1), transform .8s cubic-bezier(.4,0,.2,1); }
.tpl9 .t9-reveal.is-in{ opacity:1; transform:translateY(0); }

/* ... HERO ... */
.tpl9 .t9-hero{
  position:relative; padding:8rem clamp(1.6rem,2.5vw,3rem) 6.5rem clamp(1.6rem,2.5vw,3rem); overflow:hidden;
  background:var(--primary-deeper);
  border-top:4px solid var(--accent);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.tpl9 .t9-hero::before{
  content:''; position:absolute; top:4px; left:0; width:10rem; height:2px;
  background:var(--gold); border-radius:0 2px 2px 0; z-index:2;
}
.tpl9 .t9-hero::after{ display:none; }
.tpl9 .t9-hero-glow{ display:none; }
.tpl9 .t9-hero-scan{ display:none; }
@keyframes t9float{ 0%,100%{transform:translate(0,0);} 50%{transform:translate(2rem,-2rem);} }
@keyframes t9scan{ 0%{top:0;} 100%{top:100%;} }

.tpl9 .t9-hero-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.05fr .95fr; gap:5.5rem; align-items:center;
}
.tpl9 .t9-hero-copy{ position:relative; }
.tpl9 .t9-badge{
  display:inline-flex; align-items:center; gap:.7rem;
  border:1px solid rgba(var(--gold-rgb),.38);
  background:rgba(255,255,255,.07);
  color:var(--gold);
  padding:.55rem 1.2rem; border-radius:999px;
  font-size:1.05rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  font-family:var(--font-body);
  position:relative; overflow:hidden;
}
.tpl9 .t9-badge i{ font-size:.9rem; animation:t9blink 1.6s infinite; }
@keyframes t9blink{ 0%,100%{opacity:1;} 50%{opacity:.35;} }

.tpl9 .t9-hero-title{
  margin:2rem 0 1.8rem;
  font-size:clamp(3.4rem,5.4vw,5.8rem);
  font-weight:800; line-height:1.04; letter-spacing:-.025em;
}
.tpl9 .t9-hero-line{ display:block; color:var(--white); }
.tpl9 .t9-hero-line--accent{
  background:none;
  -webkit-background-clip:initial; background-clip:initial;
  -webkit-text-fill-color:initial;
  color:var(--gold);
  background-size:auto;
  animation:none;
}
@keyframes t9shimmer{ 0%{background-position:0% 50%;} 100%{background-position:200% 50%;} }
.tpl9 .t9-hero-desc{
  color:var(--t9-mute); font-size:1.55rem; line-height:1.75;
  max-width:54rem; margin:0 0 2.8rem;
}
.tpl9 .t9-hero-actions{ display:flex; flex-wrap:wrap; gap:1rem; margin-bottom:3.6rem; }

.tpl9 .t9-btn{
  display:inline-flex; align-items:center; gap:1rem;
  padding:1.4rem 2.6rem; border-radius:6px;
  font-weight:700; font-size:1.4rem; text-decoration:none;
  transition:.3s cubic-bezier(.4,0,.2,1); cursor:pointer; border:none;
  font-family:inherit;
}
.tpl9 .t9-btn--cyan{
  background:var(--accent); color:var(--white);
  box-shadow:0 6px 18px rgba(var(--accent-rgb),.28);
  position:relative;
  border-radius:999px;
}
.tpl9 .t9-btn--cyan:hover{
  transform:translateY(-3px);
  background:var(--accent-dark);
  box-shadow:0 10px 24px rgba(var(--accent-rgb),.38);
}
.tpl9 .t9-btn--cyan i{ transition:transform .25s; }
.tpl9 .t9-btn--cyan:hover i{ transform:translateX(4px); }
.tpl9 .t9-btn--ghost{
  background:rgba(255,255,255,.06);
  border:1.5px solid rgba(255,255,255,.22);
  color:var(--white);
  border-radius:999px;
}
.tpl9 .t9-btn--ghost:hover{
  border-color:var(--white);
  color:var(--white);
  background:rgba(255,255,255,.12);
}
.tpl9 .t9-btn--block{ width:100%; justify-content:center; }

.tpl9 .t9-hero-meta{
  list-style:none; padding:0; margin:0;
  display:grid; grid-template-columns:repeat(3,auto); gap:2.4rem;
  border-top:1px dashed var(--t9-line-bright); padding-top:2.4rem;
  max-width:50rem;
}
.tpl9 .t9-hero-meta li{ display:flex; align-items:center; gap:1.2rem; }
.tpl9 .t9-hero-meta li i{
  width:4.2rem; height:4.2rem; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(var(--primary-light-rgb),.1);
  border:1px solid rgba(var(--primary-light-rgb),.25);
  color:var(--t9-cyan);
  font-size:1.7rem;
}
.tpl9 .t9-hero-meta li div{ display:flex; flex-direction:column; }
.tpl9 .t9-hero-meta li strong{ color:var(--white); font-size:1.7rem; font-weight:800; line-height:1.1; }
.tpl9 .t9-hero-meta li span{ color:var(--t9-mute); font-size:1.05rem; letter-spacing:.05em; }

/* Hero terminal panel — solid, footer-like */
.tpl9 .t9-hero-panel{
  position:relative;
  background:var(--primary-dark);
  border:1px solid rgba(255,255,255,.1);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 16px 40px rgba(0,0,0,.28);
}
.tpl9 .t9-hero-panel::before{ display:none; }
.tpl9 .t9-panel-bar{
  display:flex; align-items:center; gap:.7rem;
  padding:1.1rem 1.6rem;
  background:var(--primary-deeper);
  border-bottom:1px solid rgba(255,255,255,.08);
  position:relative;
}
.tpl9 .t9-panel-dot{ width:1.1rem; height:1.1rem; border-radius:50%; }
.tpl9 .t9-panel-dot--r{ background:#ff5f57; box-shadow:0 0 6px rgba(255,95,87,.5); }
.tpl9 .t9-panel-dot--y{ background:#febc2e; box-shadow:0 0 6px rgba(254,188,46,.5); }
.tpl9 .t9-panel-dot--g{ background:#28c840; box-shadow:0 0 6px rgba(40,200,64,.5); }
.tpl9 .t9-panel-url{
  margin-left:1.4rem; font-size:1.1rem; color:var(--t9-mute);
  flex:1;
}
.tpl9 .t9-panel-pulse{
  width:.9rem; height:.9rem; border-radius:50%;
  background:#28c840; box-shadow:0 0 0 0 rgba(40,200,64,.7);
  animation:t9pulse 2s infinite;
}
@keyframes t9pulse{
  0%{ box-shadow:0 0 0 0 rgba(40,200,64,.7); }
  70%{ box-shadow:0 0 0 10px rgba(40,200,64,0); }
  100%{ box-shadow:0 0 0 0 rgba(40,200,64,0); }
}
.tpl9 .t9-panel-screen{
  position:relative; aspect-ratio:16/10; overflow:hidden;
}
.tpl9 .t9-panel-screen img{
  width:100%; height:100%; display:block; object-fit:cover; opacity:.85;
  filter:saturate(.95) contrast(1.05);
}
.tpl9 .t9-panel-overlay{
  position:absolute; top:1.2rem; left:1.2rem;
  background:rgba(7,9,13,.78); backdrop-filter:blur(8px);
  border:1px solid var(--t9-line-bright);
  border-radius:6px; padding:.8rem 1.1rem;
  font-family:'JetBrains Mono','Courier New',monospace;
  font-size:1.05rem; line-height:1.6; z-index:2;
}
.tpl9 .t9-panel-overlay-row{ display:flex; gap:1rem; }
.tpl9 .t9-panel-overlay-row span:first-child{ color:var(--t9-cyan); font-weight:700; }
.tpl9 .t9-panel-overlay-row .ok{ color:#28c840; }
.tpl9 .t9-panel-overlay-row .warn{ color:var(--t9-gold); animation:t9blink 1.4s infinite; }

.tpl9 .t9-panel-stats{
  display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--t9-line);
  background:var(--t9-panel-2);
}
.tpl9 .t9-panel-stat{ text-align:center; padding:1.8rem 1rem; border-left:1px solid var(--t9-line); position:relative; }
.tpl9 .t9-panel-stat:first-child{ border-left:none; }
.tpl9 .t9-panel-stat::before{
  content:''; position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--t9-cyan), transparent);
  opacity:0; transition:opacity .3s;
}
.tpl9 .t9-panel-stat:hover::before{ opacity:1; }
.tpl9 .t9-panel-stat strong{
  display:block; color:var(--t9-cyan); font-size:2.2rem; font-weight:800;
  font-family:'JetBrains Mono','Courier New',monospace;
}
.tpl9 .t9-panel-stat span{
  font-size:1rem; color:var(--t9-mute); letter-spacing:.08em; text-transform:uppercase;
  font-family:'JetBrains Mono','Courier New',monospace;
}

/* ... Marquee ticker — solid footer strip ... */
.tpl9 .t9-ticker{
  background:var(--primary-dark);
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
  padding:1.05rem 0; overflow:hidden; white-space:nowrap;
  position:relative;
}
.tpl9 .t9-ticker::before, .tpl9 .t9-ticker::after{ display:none; }
.tpl9 .t9-ticker-track{
  display:inline-flex; gap:4rem;
  animation:t9scroll 26s linear infinite;
  font-size:1.2rem; color:var(--white);
  font-family:'JetBrains Mono','Courier New',monospace;
  padding-left:2rem;
}
.tpl9 .t9-ticker-track span{ color:var(--white); font-weight:700; letter-spacing:.04em; }
.tpl9 .t9-ticker-track span:nth-child(4n+1){ color:var(--gold-bright); }
.tpl9 .t9-ticker-track span:nth-child(4n+2){ color:var(--primary-mist); }
.tpl9 .t9-ticker-track span:nth-child(4n+3){ color:var(--white); }
.tpl9 .t9-ticker-track span:nth-child(4n+4){ color:var(--gold-soft); }
@keyframes t9scroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ... Generic chip / dot ... */
.tpl9 .t9-dot{ width:1rem; height:1rem; border-radius:50%; display:inline-block; }
.tpl9 .t9-dot--cyan{ background:var(--t9-cyan); box-shadow:0 0 6px rgba(var(--primary-light-rgb),.6); }
.tpl9 .t9-tag{
  display:inline-block; font-family:'JetBrains Mono','Courier New',monospace;
  font-size:1.1rem; padding:.2rem .6rem; border-radius:4px;
  background:rgba(var(--primary-light-rgb),.12); color:var(--t9-cyan);
  border:1px solid rgba(var(--primary-light-rgb),.25);
}
.tpl9 .t9-tag--mute{ background:transparent; border:1px dashed var(--t9-line-bright); color:var(--t9-mute); }

/* ... LEVELS — solid footer dark, good padding ... */
.tpl9 .t9-levels{ padding:6.5rem clamp(1.6rem,2.5vw,3rem) 6.5rem clamp(1.6rem,2.5vw,3rem); background:var(--primary-deeper); border-top:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06); position:relative; overflow:hidden; }
.tpl9 .t9-levels::before{
  content:''; position:absolute; top:4px; left:0; width:10rem; height:2px;
  background:var(--gold); border-radius:0 2px 2px 0; z-index:2;
}
.tpl9 .t9-level-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; position:relative; z-index:1; }
.tpl9 .t9-level-card{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px; text-decoration:none; color:var(--white);
  overflow:hidden; transition:.3s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column; position:relative;
}
.tpl9 .t9-level-card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--accent);
  transform:scaleX(0); transform-origin:left; transition:transform .4s;
}
.tpl9 .t9-level-card:hover{ border-color:rgba(var(--gold-rgb),.38); transform:translateY(-6px); box-shadow:0 18px 36px rgba(0,0,0,.28); background:rgba(255,255,255,.06); }
.tpl9 .t9-level-card:hover::before{ transform:scaleX(1); }
.tpl9 .t9-level-head{
  padding:1.4rem 2rem;
  background:#07090d; border-bottom:1px solid var(--t9-line);
  font-family:'JetBrains Mono','Courier New',monospace;
  font-size:1.15rem; display:flex; justify-content:space-between; align-items:center;
  gap:1rem;
}
.tpl9 .t9-level-body{ padding:2.6rem 2.2rem 2.8rem; flex:1; display:flex; flex-direction:column; }
.tpl9 .t9-level-icon{
  width:5.6rem; height:5.6rem; border-radius:14px;
  background:rgba(var(--accent-rgb),.12);
  border:1px solid rgba(var(--accent-rgb),.22);
  color:var(--gold);
  display:flex; align-items:center; justify-content:center;
  font-size:2.2rem;
  margin-bottom:1.6rem;
  position:relative;
}
.tpl9 .t9-level-icon::after{ display:none; }
.tpl9 .t9-level-body h4{ font-size:2.1rem; font-weight:800; margin:0 0 1rem; color:var(--white); letter-spacing:-.01em; }
.tpl9 .t9-level-body p{ color:var(--t9-mute); font-size:1.35rem; line-height:1.65; margin:0 0 1.6rem; flex:1; }
.tpl9 .t9-level-meta{ display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:1.8rem; }
.tpl9 .t9-level-meta span{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:1.1rem; color:var(--t9-soft);
  padding:.5rem .9rem; border-radius:6px;
  background:rgba(var(--primary-light-rgb),.06);
  border:1px solid var(--t9-line);
  font-family:'JetBrains Mono','Courier New',monospace;
}
.tpl9 .t9-level-meta span i{ color:var(--t9-cyan); font-size:.95rem; }
.tpl9 .t9-level-cta{
  display:inline-flex; align-items:center; gap:.6rem;
  font-weight:700; font-size:1.3rem; color:var(--t9-cyan);
  font-family:'JetBrains Mono','Courier New',monospace;
}
.tpl9 .t9-level-cta i{ transition:transform .25s; }
.tpl9 .t9-level-card:hover .t9-level-cta i{ transform:translateX(4px); }

/* ... VISION / MISSION — solid moderate cards, good padding ... */
.tpl9 .t9-vm{ padding:6.5rem clamp(1.6rem,2.5vw,3rem) 6.5rem clamp(1.6rem,2.5vw,3rem); position:relative; background:var(--white); }
.tpl9 .t9-vm-grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:2.2rem; }
.tpl9 .t9-vm-card{
  background:var(--white);
  border:1px solid var(--border-light);
  border-radius:16px; padding:0;
  overflow:hidden;
  position:relative;
  transition:.3s;
  box-shadow:var(--shadow-card);
}
.tpl9 .t9-vm-card:hover{ border-color:rgba(var(--primary-rgb),.18); box-shadow:var(--shadow-hover); }
.tpl9 .t9-vm-bar{
  display:flex; align-items:center; gap:1rem;
  padding:1.1rem 1.6rem;
  background:var(--primary-deeper);
  border-bottom:1px solid rgba(255,255,255,.08);
  font-size:1.15rem; color:rgba(255,255,255,.78);
}
.tpl9 .t9-vm-card--vision, .tpl9 .t9-vm-card--mission{ padding:2.8rem 2.4rem 3rem; }
.tpl9 .t9-vm-icon{
  width:5.2rem; height:5.2rem; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background:var(--primary);
  color:var(--white); font-size:2.1rem;
  margin-bottom:1.6rem;
  box-shadow:0 8px 18px rgba(var(--primary-rgb),.18);
}
.tpl9 .t9-vm-card--mission .t9-vm-icon{ background:var(--accent); }
.tpl9 .t9-vm-card h3{ font-size:2rem; font-weight:800; color:var(--primary-dark); margin:0 0 1.2rem; letter-spacing:-.01em; }
.tpl9 .t9-vm-card--vision p{ color:var(--text-secondary); font-size:1.45rem; line-height:1.75; margin:0; }
.tpl9 .t9-vm-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:1.1rem; }
.tpl9 .t9-vm-list li{ display:flex; gap:1.2rem; align-items:flex-start; }
.tpl9 .t9-vm-num{
  flex-shrink:0;
  font-family:'JetBrains Mono','Courier New',monospace;
  font-weight:800; font-size:1.2rem;
  color:var(--t9-cyan);
  padding:.4rem .7rem; border-radius:4px;
  background:rgba(var(--primary-light-rgb),.1);
  border:1px solid rgba(var(--primary-light-rgb),.25);
  min-width:3.2rem; text-align:center;
}
.tpl9 .t9-vm-list li span:last-child{ color:var(--text-secondary); font-size:1.35rem; line-height:1.6; }

/* ... MISSION CAROUSEL — solid, moderate, padded ... */
.tpl9 .t9-mission{ padding:6.5rem clamp(1.6rem,2.5vw,3rem) 6.5rem clamp(1.6rem,2.5vw,3rem); background:var(--white); border-top:1px solid var(--border-light); border-bottom:1px solid var(--border-light); position:relative; overflow:hidden; }
.tpl9 .t9-mission::before{ display:none; }
.tpl9 .t9-mission-stage{ overflow:hidden; padding:1rem 0; position:relative; }
.tpl9 .t9-mission-track{
  display:flex; gap:2rem;
  transition:transform .55s cubic-bezier(.22,.8,.22,1);
  will-change:transform;
}
.tpl9 .t9-mission-card{
  flex:0 0 calc((100% - 4rem) / 3);
  background:var(--white);
  border:1px solid var(--border-light);
  border-radius:16px; overflow:hidden;
  display:flex; flex-direction:column;
  transition:.3s;
  position:relative;
  box-shadow:var(--shadow-card);
}
.tpl9 .t9-mission-card:hover{ transform:translateY(-4px); border-color:rgba(var(--primary-rgb),.18); box-shadow:var(--shadow-hover); }
.tpl9 .t9-mission-card-img{
  position:relative; aspect-ratio:16/10; overflow:hidden;
  background:#000;
}
.tpl9 .t9-mission-card-img img{ width:100%; height:100%; object-fit:cover; transition:transform .5s; filter:saturate(.9); }
.tpl9 .t9-mission-card:hover .t9-mission-card-img img{ transform:scale(1.05); }
.tpl9 .t9-mission-card-img::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, transparent 30%, rgba(7,9,13,.85) 100%);
}
.tpl9 .t9-mission-card-tag{
  position:absolute; top:1rem; left:1rem; z-index:2;
  background:var(--primary); color:var(--white);
  border:none;
  font-size:1rem; font-weight:800;
  padding:.4rem .85rem; border-radius:999px; letter-spacing:.06em; text-transform:uppercase;
  font-family:var(--font-body);
}
.tpl9 .t9-mission-card-corner{
  position:absolute; top:1rem; right:1rem; z-index:2;
  background:rgba(7,9,13,.85); backdrop-filter:blur(6px);
  color:var(--t9-mute); font-size:1rem; padding:.3rem .6rem; border-radius:4px;
}
.tpl9 .t9-mission-card-glare{ display:none; }
.tpl9 .t9-mission-card-body{ padding:1.8rem 2rem 2.2rem; flex:1; display:flex; flex-direction:column; }
.tpl9 .t9-mission-card-prompt{
  color:var(--primary); font-size:1.15rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  margin-bottom:.9rem;
}
.tpl9 .t9-mission-card-text{
  color:var(--text-secondary); font-size:1.35rem; line-height:1.65; margin:0;
}
.tpl9 .t9-mission-controls{
  display:flex; align-items:center; justify-content:center; gap:1.2rem; margin-top:2.6rem;
}
.tpl9 .t9-mission-arrow{
  width:4.4rem; height:4.4rem; border-radius:50%;
  background:var(--white);
  border:1.5px solid var(--border);
  color:var(--primary); font-size:1.25rem; cursor:pointer;
  transition:.25s;
  box-shadow:var(--shadow-sm);
}
.tpl9 .t9-mission-arrow:hover{ border-color:var(--primary); color:var(--white); background:var(--primary); transform:translateY(-2px); box-shadow:0 8px 18px var(--primary-glow); }
.tpl9 .t9-mission-dots{ display:flex; gap:.55rem; align-items:center; }
.tpl9 .t9-mission-dots button{
  width:.9rem; height:.9rem; border-radius:50%;
  background:var(--border); border:none; cursor:pointer; padding:0;
  transition:.25s;
}
.tpl9 .t9-mission-dots button.is-active{ background:var(--accent); width:2.2rem; border-radius:999px; box-shadow:0 0 0 4px rgba(var(--accent-rgb),.14); }

/* ... CORE VALUES — solid footer dark, no gradients ... */
.tpl9 .t9-values{
  padding:6.5rem clamp(1.6rem,2.5vw,3rem) 6.5rem clamp(1.6rem,2.5vw,3rem); position:relative; overflow:hidden;
  background:var(--primary-deeper);
  border-top:4px solid var(--accent);
}
.tpl9 .t9-values::before{
  content:''; position:absolute; top:4px; left:0; width:10rem; height:2px;
  background:var(--gold); border-radius:0 2px 2px 0; z-index:2;
}
.tpl9 .t9-grid-deco{ display:none; }
.tpl9 .t9-values-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(16rem, 1fr)); gap:2rem;
  position:relative; z-index:1;
}
.tpl9 .t9-value{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px; padding:2.6rem 1.8rem 2.4rem;
  text-align:center; position:relative; overflow:hidden;
  transition:.3s cubic-bezier(.4,0,.2,1);
}
.tpl9 .t9-value::before{ display:none; }
.tpl9 .t9-value:hover{ transform:translateY(-6px); border-color:rgba(var(--gold-rgb),.38); background:rgba(255,255,255,.07); }
.tpl9 .t9-value-num{
  position:absolute; top:1.2rem; right:1.6rem;
  font-size:1rem; color:var(--t9-cyan);
  letter-spacing:.1em;
}
.tpl9 .t9-value-hex{
  width:6rem; height:6rem;
  margin:0 auto 1.6rem;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent);
  color:var(--white);
  font-size:2.2rem;
  clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  position:relative;
  transition:transform .3s;
}
.tpl9 .t9-value:hover .t9-value-hex{ transform:scale(1.06); }
.tpl9 .t9-value-hex::before{
  content:''; position:absolute; inset:6px;
  background:var(--t9-panel);
  clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.tpl9 .t9-value-hex i{ position:relative; z-index:1; }
.tpl9 .t9-value h3{
  color:var(--white); font-size:1.55rem; font-weight:800;
  margin:0 0 .8rem; letter-spacing:.02em; text-transform:uppercase;
}
.tpl9 .t9-value p{
  color:var(--t9-mute); font-size:1.2rem; line-height:1.55; margin:0;
}
.tpl9 .t9-value-glow{ display:none; }

/* ... VIDEO + STATS — solid, padded ... */
.tpl9 .t9-stats{ padding:6.5rem clamp(1.6rem,2.5vw,3rem) 6.5rem clamp(1.6rem,2.5vw,3rem); background:var(--primary-dark); border-top:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06); position:relative; overflow:hidden; }
.tpl9 .t9-vv{ display:grid; grid-template-columns:1.1fr 1fr; gap:5rem; align-items:center; margin-bottom:6rem; }
.tpl9 .t9-vv-video{
  position:relative; border-radius:16px; overflow:hidden;
  background:#000; cursor:pointer;
  border:1px solid var(--t9-line-bright);
  box-shadow:0 30px 70px rgba(0,0,0,.5);
}
.tpl9 .t9-vv-frame{ position:relative; }
.tpl9 .t9-vv-frame img{ width:100%; display:block; aspect-ratio:16/10; object-fit:cover; opacity:.7; transition:opacity .3s; }
.tpl9 .t9-vv-video:hover .t9-vv-frame img{ opacity:.9; }
.tpl9 .t9-vv-corner{
  position:absolute; width:2.4rem; height:2.4rem;
  border:2px solid var(--t9-cyan);
  pointer-events:none;
}
.tpl9 .t9-vv-corner--tl{ top:1rem; left:1rem; border-right:none; border-bottom:none; }
.tpl9 .t9-vv-corner--tr{ top:1rem; right:1rem; border-left:none; border-bottom:none; }
.tpl9 .t9-vv-corner--bl{ bottom:1rem; left:1rem; border-right:none; border-top:none; }
.tpl9 .t9-vv-corner--br{ bottom:1rem; right:1rem; border-left:none; border-top:none; }
.tpl9 .t9-vv-play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:7rem; height:7rem; border-radius:50%;
  background:rgba(7,9,13,.7);
  backdrop-filter:blur(8px);
  border:2px solid var(--t9-cyan);
  color:var(--t9-cyan);
  display:flex; align-items:center; justify-content:center;
  font-size:2.2rem;
  box-shadow:0 0 0 0 rgba(var(--primary-light-rgb),.5);
  animation:t9pulse-ring 2.5s infinite;
  transition:.25s;
}
@keyframes t9pulse-ring{
  0%{ box-shadow:0 0 0 0 rgba(var(--primary-light-rgb),.5); }
  70%{ box-shadow:0 0 0 24px rgba(var(--primary-light-rgb),0); }
  100%{ box-shadow:0 0 0 0 rgba(var(--primary-light-rgb),0); }
}
.tpl9 .t9-vv-video:hover .t9-vv-play{ transform:translate(-50%,-50%) scale(1.08); }
.tpl9 .t9-vv-rec{
  position:absolute; top:1.2rem; left:50%; transform:translateX(-50%);
  background:rgba(7,9,13,.8); backdrop-filter:blur(6px);
  border:1px solid rgba(217, 95, 95, .6);
  color:#ff8a8a; font-size:1rem; padding:.4rem .9rem; border-radius:4px;
  display:flex; align-items:center; gap:.6rem;
  font-weight:700; letter-spacing:.1em;
}
.tpl9 .t9-rec-dot{
  width:.7rem; height:.7rem; border-radius:50%; background:#ff5f57;
  box-shadow:0 0 6px rgba(255,95,87,.7);
  animation:t9blink 1.2s infinite;
}
.tpl9 .t9-vv-video-badge{
  position:absolute; bottom:1.2rem; left:1.2rem;
  background:rgba(7,9,13,.85); backdrop-filter:blur(6px);
  border:1px solid var(--t9-line-bright);
  color:var(--white); font-size:1.1rem; font-weight:700;
  padding:.6rem 1rem; border-radius:6px;
  display:flex; align-items:center; gap:.6rem;
}
.tpl9 .t9-vv-text .t9-kicker{ margin-bottom:1.6rem; }
.tpl9 .t9-vv-text h2{ color:var(--white); font-size:clamp(2.4rem,3.6vw,3.4rem); font-weight:800; line-height:1.15; margin:0 0 1.6rem; letter-spacing:-.02em; }
.tpl9 .t9-vv-text p{ color:var(--t9-mute); font-size:1.5rem; line-height:1.7; margin:0 0 2.4rem; }

.tpl9 .t9-stats-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:2rem;
}
.tpl9 .t9-stat{
  background:var(--primary-deeper);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px; padding:2.4rem 2rem;
  position:relative; overflow:hidden;
  transition:.3s;
}
.tpl9 .t9-stat:hover{ transform:translateY(-6px); border-color:rgba(var(--gold-rgb),.28); box-shadow:0 18px 36px rgba(0,0,0,.28); }
.tpl9 .t9-stat::before{ display:none; }
.tpl9 .t9-stat-icon{
  width:5rem; height:5rem; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.04);
  border:1px solid var(--t9-line-bright);
  color:var(--stat-color, var(--t9-cyan));
  font-size:2rem;
  margin-bottom:1.6rem; position:relative;
}
.tpl9 .t9-stat-num{
  font-size:clamp(3.6rem,5vw,5rem); font-weight:800;
  color:var(--white); line-height:1; letter-spacing:-.02em;
  font-family:'JetBrains Mono','Courier New',monospace;
  display:flex; align-items:baseline; gap:.2rem;
}
.tpl9 .t9-stat-num .suffix{ color:var(--stat-color, var(--t9-cyan)); font-size:.55em; font-weight:800; }
.tpl9 .t9-stat-label{
  color:var(--white); font-size:1.4rem; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; margin:.8rem 0 .8rem;
}
.tpl9 .t9-stat-desc{ color:var(--t9-mute); font-size:1.25rem; line-height:1.55; margin:0 0 1.6rem; }
.tpl9 .t9-stat-bar{
  display:block; height:4px; border-radius:4px;
  background:var(--t9-line); overflow:hidden; position:relative;
}
.tpl9 .t9-stat-bar span{
  position:absolute; top:0; left:0; bottom:0; width:100%;
  background:var(--accent);
  transform:scaleX(0); transform-origin:left;
  transition:transform 1.4s cubic-bezier(.4,0,.2,1) .2s;
  border-radius:4px;
}
.tpl9 .t9-stat.is-in .t9-stat-bar span{ transform:scaleX(1); }

/* ... PORTAL FEATURES — solid, moderate ... */
.tpl9 .t9-features{ padding:6.5rem clamp(1.6rem,2.5vw,3rem) 6.5rem clamp(1.6rem,2.5vw,3rem); position:relative; background:var(--primary-deeper); border-top:4px solid var(--accent); }
.tpl9 .t9-features::before{
  content:''; position:absolute; top:4px; left:0; width:10rem; height:2px;
  background:var(--gold); border-radius:0 2px 2px 0; z-index:2;
}
.tpl9 .t9-feat-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:1.6rem;
  position:relative; z-index:1;
}
.tpl9 .t9-feat{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px; padding:2.2rem 2rem;
  color:var(--white); text-decoration:none;
  display:flex; flex-direction:column;
  transition:.3s cubic-bezier(.4,0,.2,1);
  position:relative; overflow:hidden;
  min-height:18rem;
}
.tpl9 .t9-feat::before{ display:none; }
.tpl9 .t9-feat:hover{ transform:translateY(-6px); border-color:rgba(var(--gold-rgb),.38); background:rgba(255,255,255,.07); box-shadow:0 18px 36px rgba(0,0,0,.28); }
.tpl9 .t9-feat-tag{
  font-size:1.1rem; color:var(--t9-cyan);
  margin-bottom:1.4rem; letter-spacing:.05em;
}
.tpl9 .t9-feat-icon{
  width:4.6rem; height:4.6rem; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(var(--accent-rgb),.12);
  border:1px solid rgba(var(--accent-rgb),.22);
  color:var(--gold); font-size:1.9rem;
  margin-bottom:1.6rem;
  transition:.3s;
}
.tpl9 .t9-feat:hover .t9-feat-icon{
  background:var(--accent); color:var(--white);
  box-shadow:0 8px 18px rgba(var(--accent-rgb),.28);
}
.tpl9 .t9-feat h3{ color:var(--white); font-size:1.6rem; font-weight:800; margin:0 0 .8rem; letter-spacing:-.01em; }
.tpl9 .t9-feat p{ color:var(--t9-mute); font-size:1.25rem; line-height:1.55; margin:0 0 1.4rem; flex:1; }
.tpl9 .t9-feat-link{
  display:inline-flex; align-items:center; gap:.6rem;
  font-weight:700; font-size:1.2rem; color:var(--t9-cyan);
  margin-top:auto;
  font-family:'JetBrains Mono','Courier New',monospace;
}
.tpl9 .t9-feat-link i{ transition:transform .25s; }
.tpl9 .t9-feat:hover .t9-feat-link i{ transform:translateX(4px); }

.tpl9 .t9-feat--1{ grid-column:span 2; grid-row:span 2; min-height:36rem; }
.tpl9 .t9-feat--5{ grid-column:span 2; }
.tpl9 .t9-feat-visual{
  display:flex; align-items:flex-end; gap:.6rem;
  height:9rem; margin:1.4rem 0 1.6rem;
  padding:1rem; border-radius:8px;
  background:rgba(var(--primary-light-rgb),.04);
  border:1px solid var(--t9-line);
}
.tpl9 .t9-feat-bar{
  flex:1; height:var(--h);
  background:var(--accent);
  border-radius:4px 4px 0 0;
  position:relative;
  transition:height 1.2s cubic-bezier(.4,0,.2,1);
}
.tpl9 .t9-feat-bar::before{ display:none; }

/* ... WHY CHOOSE US — solid, padded ... */
.tpl9 .t9-why{ padding:6.5rem clamp(1.6rem,2.5vw,3rem) 6.5rem clamp(1.6rem,2.5vw,3rem); background:var(--gray-50); border-top:1px solid var(--border-light); border-bottom:1px solid var(--border-light); position:relative; overflow:hidden; }
.tpl9 .t9-why::before{ display:none; }
.tpl9 .t9-why-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:2rem; position:relative; z-index:1; }
.tpl9 .t9-why-card{
  background:var(--white);
  border:1px solid var(--border-light);
  border-radius:16px; padding:2.4rem 1.8rem;
  text-align:center; position:relative; overflow:hidden;
  transition:.3s;
  box-shadow:var(--shadow-card);
}
.tpl9 .t9-why-card:hover{ transform:translateY(-4px); border-color:rgba(var(--primary-rgb),.18); box-shadow:var(--shadow-hover); }
.tpl9 .t9-why-hex{
  width:6.6rem; height:6.6rem;
  margin:0 auto 1.6rem;
  display:flex; align-items:center; justify-content:center;
  background:var(--primary-mist);
  color:var(--primary);
  font-size:2.2rem;
  clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  position:relative;
  transition:.3s;
  border:1px solid rgba(var(--primary-rgb),.12);
}
.tpl9 .t9-why-hex::before{
  content:''; position:absolute; inset:3px;
  background:var(--white);
  clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.tpl9 .t9-why-hex i{ position:relative; z-index:1; }
.tpl9 .t9-why-card:hover .t9-why-hex{ background:var(--primary); color:var(--white); }
.tpl9 .t9-why-card:hover .t9-why-hex i{ color:var(--white); }
.tpl9 .t9-why-card h3{ color:var(--primary-dark); font-size:1.55rem; font-weight:800; margin:0 0 .8rem; }
.tpl9 .t9-why-card p{ color:var(--text-secondary); font-size:1.25rem; line-height:1.55; margin:0; }

/* ... FOUNDER TESTIMONIAL — solid moderate ... */
.tpl9 .t9-founder{ padding:6.5rem clamp(1.6rem,2.5vw,3rem) 6.5rem clamp(1.6rem,2.5vw,3rem); position:relative; background:var(--primary-deeper); border-top:4px solid var(--accent); }
.tpl9 .t9-founder::before{
  content:''; position:absolute; top:4px; left:0; width:10rem; height:2px;
  background:var(--gold); border-radius:0 2px 2px 0; z-index:2;
}
.tpl9 .t9-testimonial{
  max-width:86rem; margin:0 auto;
  background:var(--white);
  border:1px solid var(--border-light);
  border-radius:16px; overflow:hidden;
  position:relative;
  box-shadow:var(--shadow-card);
}
.tpl9 .t9-test-bar{
  display:flex; align-items:center; gap:1rem;
  padding:1.1rem 1.6rem;
  background:var(--primary-deeper); border-bottom:1px solid rgba(255,255,255,.08);
  font-size:1.15rem; color:rgba(255,255,255,.78);
}
.tpl9 .t9-test-bar-stars{ margin-left:auto; color:var(--t9-gold); font-size:1.2rem; display:flex; gap:.3rem; }
.tpl9 .t9-test-quote{
  color:var(--text); font-size:clamp(1.7rem, 2.4vw, 2.3rem);
  font-weight:600; line-height:1.55;
  padding:3.6rem 4rem 2.6rem; margin:0;
  position:relative;
  font-family:'Poppins','Open Sans',sans-serif;
}
.tpl9 .t9-test-quote::before{
  content:'\201C'; position:absolute; top:-1rem; left:2rem;
  font-size:10rem; line-height:1;
  color:var(--t9-cyan); opacity:.2;
  font-family:Georgia, serif;
}
.tpl9 .t9-test-author{
  display:flex; align-items:center; gap:1.8rem;
  padding:2rem 4rem 3rem;
  border-top:1px solid var(--t9-line);
  background:var(--t9-panel-2);
}
.tpl9 .t9-test-avatar{
  width:5.2rem; height:5.2rem; border-radius:14px;
  background:var(--accent);
  color:var(--white); font-size:1.9rem; font-weight:800;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 18px rgba(var(--accent-rgb),.22);
}
.tpl9 .t9-test-meta h3{ color:var(--white); font-size:1.45rem; font-weight:800; margin:0 0 .3rem; }
.tpl9 .t9-test-meta p{ color:var(--t9-mute); font-size:1.2rem; margin:0; }
.tpl9 .t9-test-signature{
  margin-left:auto;
  font-size:1.1rem; color:var(--t9-cyan);
  letter-spacing:.1em;
}

/* ... NEWS & EVENTS — solid padded ... */
.tpl9 .t9-news{ padding:6.5rem clamp(1.6rem,2.5vw,3rem) 6.5rem clamp(1.6rem,2.5vw,3rem); background:var(--white); border-top:1px solid var(--border-light); border-bottom:1px solid var(--border-light); position:relative; }
.tpl9 .t9-news-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:2rem; }
.tpl9 .t9-news-card{
  background:var(--white);
  border:1px solid var(--border-light);
  border-radius:16px; overflow:hidden;
  color:var(--text); text-decoration:none;
  display:flex; flex-direction:column;
  transition:.3s;
  position:relative;
  box-shadow:var(--shadow-card);
}
.tpl9 .t9-news-card:hover{ transform:translateY(-4px); border-color:rgba(var(--primary-rgb),.18); box-shadow:var(--shadow-hover); }
.tpl9 .t9-news-img{ position:relative; aspect-ratio:16/10; overflow:hidden; }
.tpl9 .t9-news-img img{ width:100%; height:100%; object-fit:cover; transition:transform .5s; filter:saturate(.9); }
.tpl9 .t9-news-card:hover .t9-news-img img{ transform:scale(1.06); }
.tpl9 .t9-news-img::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, transparent 50%, rgba(7,9,13,.85) 100%);
}
.tpl9 .t9-news-date{
  position:absolute; top:1.2rem; left:1.2rem; z-index:2;
  background:rgba(7,9,13,.85); backdrop-filter:blur(6px);
  border:1px solid var(--t9-line-bright);
  border-radius:8px; padding:.6rem 1rem; text-align:center;
  font-family:'JetBrains Mono','Courier New',monospace;
}
.tpl9 .t9-news-date strong{ display:block; color:var(--white); font-size:2rem; font-weight:800; line-height:1; }
.tpl9 .t9-news-date span{ display:block; color:var(--t9-cyan); font-size:1rem; letter-spacing:.1em; text-transform:uppercase; margin-top:.2rem; }
.tpl9 .t9-news-corner{
  position:absolute; bottom:1rem; right:1rem; z-index:2;
  background:rgba(7,9,13,.85); backdrop-filter:blur(6px);
  color:var(--t9-cyan); font-size:1rem; padding:.3rem .7rem; border-radius:4px;
}
.tpl9 .t9-news-body{ padding:2rem 2.2rem 2.4rem; flex:1; display:flex; flex-direction:column; }
.tpl9 .t9-news-tag{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:1rem; color:var(--primary-dark); font-weight:800;
  letter-spacing:.06em; text-transform:uppercase;
  padding:.35rem .85rem; border-radius:999px;
  background:var(--primary-mist);
  border:1px solid rgba(var(--primary-rgb),.12);
  align-self:flex-start;
  margin-bottom:1.2rem;
}
.tpl9 .t9-news-tag i{ font-size:.9rem; }
.tpl9 .t9-news-body h3{ color:var(--primary-dark); font-size:1.7rem; font-weight:800; margin:0 0 .9rem; line-height:1.3; letter-spacing:-.01em; }
.tpl9 .t9-news-body p{ color:var(--text-secondary); font-size:1.3rem; line-height:1.6; margin:0 0 1.6rem; flex:1; }
.tpl9 .t9-news-link{
  display:inline-flex; align-items:center; gap:.45rem;
  font-weight:800; font-size:1.15rem; color:var(--accent);
  font-family:var(--font-body);
}
.tpl9 .t9-news-link i{ transition:transform .25s; }
.tpl9 .t9-news-card:hover .t9-news-link i{ transform:translateX(4px); }

/* ... ACADEMIC SHOWCASE — solid dark like footer, padded ... */
.tpl9 .t9-showcase{ padding:6.5rem clamp(1.6rem,2.5vw,3rem) 6.5rem clamp(1.6rem,2.5vw,3rem); position:relative; background:var(--primary-dark); }
.tpl9 .t9-show-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:2rem; }
.tpl9 .t9-show-card{
  background:var(--white);
  border:1px solid var(--border-light);
  border-radius:16px; overflow:hidden;
  color:var(--text); text-decoration:none;
  display:flex; flex-direction:column;
  transition:.3s;
  box-shadow:var(--shadow-card);
}
.tpl9 .t9-show-card:hover{ transform:translateY(-4px); border-color:rgba(var(--primary-rgb),.18); box-shadow:var(--shadow-hover); }
.tpl9 .t9-show-visual{
  position:relative; padding:2rem; min-height:24rem;
  background:var(--primary-deeper);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.tpl9 .t9-show-visual::before{ display:none; }
.tpl9 .t9-show-frame{
  position:relative; width:100%; max-width:24rem;
}
.tpl9 .t9-show-corner{
  position:absolute; width:1.6rem; height:1.6rem;
  border:2px solid var(--t9-cyan); pointer-events:none; z-index:3;
}
.tpl9 .t9-show-corner--tl{ top:-.4rem; left:-.4rem; border-right:none; border-bottom:none; }
.tpl9 .t9-show-corner--tr{ top:-.4rem; right:-.4rem; border-left:none; border-bottom:none; }
.tpl9 .t9-show-corner--bl{ bottom:-.4rem; left:-.4rem; border-right:none; border-top:none; }
.tpl9 .t9-show-corner--br{ bottom:-.4rem; right:-.4rem; border-left:none; border-top:none; }
.tpl9 .t9-show-scan{
  position:absolute; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, rgba(var(--primary-light-rgb),.6), transparent);
  top:0; pointer-events:none;
  animation:t9scan 5s linear infinite;
  z-index:4;
}

.tpl9 .t9-show-doc{
  background:var(--white); color:#1a1d21;
  border-radius:6px; padding:1.2rem;
  font-size:.7rem;
  box-shadow:0 18px 40px rgba(0,0,0,.4);
}
.tpl9 .t9-doc-band{ display:flex; align-items:center; gap:.8rem; padding-bottom:.8rem; border-bottom:1px solid #e8eaed; }
.tpl9 .t9-doc-logo{ width:2.4rem; height:2.4rem; border-radius:50%; background:var(--primary); flex-shrink:0; }
.tpl9 .t9-doc-lines{ flex:1; display:flex; flex-direction:column; gap:.3rem; }
.tpl9 .t9-doc-line{ height:5px; background:#1a1d21; border-radius:3px; }
.tpl9 .t9-doc-stamp{ width:2.4rem; height:2.4rem; border-radius:50%; border:2px solid #d97706; position:relative; }
.tpl9 .t9-doc-stamp::after{ content:''; position:absolute; inset:4px; border-radius:50%; border:1px dashed #d97706; }
.tpl9 .t9-doc-title-strip{ height:8px; background:var(--primary); border-radius:3px; margin:1rem 0; }
.tpl9 .t9-doc-info{ display:flex; flex-direction:column; gap:.5rem; margin-bottom:.8rem; }
.tpl9 .t9-doc-info-row{ display:flex; gap:.8rem; }
.tpl9 .t9-doc-info-row .t9-doc-line{ height:4px; }
.tpl9 .t9-doc-badges{ display:flex; gap:.4rem; margin-bottom:.8rem; }
.tpl9 .t9-doc-badge{ padding:.2rem .6rem; border-radius:3px; color:var(--white); font-weight:700; font-size:.6rem; }
.tpl9 .t9-doc-badge--gold{ background:#c9a84c; }
.tpl9 .t9-doc-badge--navy{ background:#1a365d; }
.tpl9 .t9-doc-table{ display:flex; flex-direction:column; gap:.3rem; }
.tpl9 .t9-doc-row{ display:flex; gap:.2rem; }
.tpl9 .t9-doc-cell{ height:5px; background:#f1f3f4; border-radius:2px; }
.tpl9 .t9-doc-cell--label{ background:#9aa0a8; }
.tpl9 .t9-doc-cell--total{ background:#1a1d21; }
.tpl9 .t9-doc-cell--grade{ background:#278250; }
.tpl9 .t9-doc-foot{ margin-top:.8rem; }

.tpl9 .t9-show-visual--book{ background:var(--primary-deeper); }
.tpl9 .t9-show-book{
  width:18rem; aspect-ratio:3/4;
  position:relative; perspective:1000px;
  transition:transform .5s;
}
.tpl9 .t9-show-card:hover .t9-show-book{ transform:rotateY(-12deg); }
.tpl9 .t9-book-spine{ position:absolute; left:0; top:0; bottom:0; width:1.6rem; background:var(--primary-deeper); border-radius:6px 0 0 6px; }
.tpl9 .t9-book-cover{
  position:absolute; inset:0; margin-left:1.6rem;
  background:var(--primary-dark);
  border-radius:0 6px 6px 0;
  padding:2rem 1.6rem;
  color:var(--white);
  box-shadow:0 16px 40px rgba(0,0,0,.28);
  overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.tpl9 .t9-book-glare{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,.18) 55%, transparent 70%);
}
.tpl9 .t9-book-rings{ position:absolute; left:.6rem; top:0; bottom:0; display:flex; flex-direction:column; justify-content:center; gap:1.4rem; }
.tpl9 .t9-book-rings span{ width:.7rem; height:.7rem; border-radius:50%; background:rgba(255,255,255,.4); border:1px solid rgba(255,255,255,.6); }
.tpl9 .t9-book-year{ font-size:2.8rem; font-weight:800; opacity:.9; letter-spacing:.05em; font-family:'JetBrains Mono','Courier New',monospace; }
.tpl9 .t9-book-title{ font-size:2rem; font-weight:800; letter-spacing:.2em; margin-top:.4rem; }
.tpl9 .t9-book-sub{ font-size:1.2rem; opacity:.7; margin-top:.2rem; font-style:italic; }
.tpl9 .t9-book-deco{ position:absolute; border-radius:50%; opacity:.25; }
.tpl9 .t9-book-deco--1{ width:8rem; height:8rem; top:-3rem; right:-3rem; background:var(--white); }
.tpl9 .t9-book-deco--2{ width:5rem; height:5rem; bottom:-2rem; left:2rem; background:var(--accent); }
.tpl9 .t9-book-deco--3{ width:3rem; height:3rem; bottom:3rem; right:1rem; background:var(--gold); }
.tpl9 .t9-book-edge{ position:absolute; right:-3px; top:0; bottom:0; width:3px; background:var(--primary-deeper); border-radius:0 6px 6px 0; }

.tpl9 .t9-show-visual--gallery{ padding:2rem; }
.tpl9 .t9-gallery-single{ position:relative; aspect-ratio:4/3; border-radius:8px; overflow:hidden; box-shadow:0 18px 40px rgba(0,0,0,.4); }
.tpl9 .t9-gallery-single img{ width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.tpl9 .t9-show-card:hover .t9-gallery-single img{ transform:scale(1.05); }
.tpl9 .t9-gallery-caption{
  position:absolute; bottom:1rem; left:1rem;
  background:rgba(7,9,13,.85); backdrop-filter:blur(6px);
  color:var(--white); font-size:1.1rem; font-weight:700;
  padding:.5rem .9rem; border-radius:6px;
  display:flex; align-items:center; gap:.5rem;
}
.tpl9 .t9-gallery-corner{
  position:absolute; top:1rem; right:1rem;
  width:3.4rem; height:3.4rem; border-radius:8px;
  background:rgba(7,9,13,.85); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  color:var(--white); font-size:1.3rem;
}
.tpl9 .t9-gallery-overlay{
  position:absolute; top:1rem; left:1rem;
  background:rgba(7,9,13,.85); backdrop-filter:blur(6px);
  color:var(--t9-cyan); font-size:1rem; padding:.3rem .7rem; border-radius:4px;
}

.tpl9 .t9-show-body{ padding:1.9rem 2rem 2.2rem; flex:1; display:flex; flex-direction:column; background:var(--white); }
.tpl9 .t9-show-tag{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:1rem; color:var(--primary-dark); font-weight:800;
  letter-spacing:.06em; text-transform:uppercase;
  padding:.35rem .85rem; border-radius:999px;
  background:var(--primary-mist);
  border:1px solid rgba(var(--primary-rgb),.12);
  align-self:flex-start;
  margin-bottom:1rem;
}
.tpl9 .t9-show-body h3{ color:var(--primary-dark); font-size:1.7rem; font-weight:800; margin:0 0 .9rem; line-height:1.3; letter-spacing:-.01em; }
.tpl9 .t9-show-body p{ color:var(--text-secondary); font-size:1.3rem; line-height:1.6; margin:0 0 1.4rem; flex:1; }
.tpl9 .t9-show-link{
  display:inline-flex; align-items:center; gap:.6rem;
  font-weight:800; font-size:1.15rem; color:var(--accent);
  font-family:var(--font-body);
}
.tpl9 .t9-show-link i{ transition:transform .25s; }
.tpl9 .t9-show-card:hover .t9-show-link i{ transform:translateX(4px); }

/* ... NEWSLETTER / CTA — solid footer, no gradients ... */
.tpl9 .t9-cta{
  padding:6.5rem clamp(1.6rem,2.5vw,3rem) 5.5rem clamp(1.6rem,2.5vw,3rem); position:relative; overflow:hidden;
  background:var(--primary-deeper);
  border-top:4px solid var(--accent);
}
.tpl9 .t9-cta::before{
  content:''; position:absolute; top:4px; left:0; width:10rem; height:2px;
  background:var(--gold); border-radius:0 2px 2px 0; z-index:2;
}
.tpl9 .t9-cta-glow{ display:none; }
.tpl9 .t9-cta-inner{ position:relative; z-index:1; }
.tpl9 .t9-cta-grid{ display:grid; grid-template-columns:1.05fr 1fr; gap:4rem; align-items:center; }
.tpl9 .t9-cta-text h2{ color:var(--white); font-size:clamp(2.6rem,3.8vw,3.8rem); font-weight:800; margin:0 0 1.4rem; line-height:1.15; letter-spacing:-.02em; }
.tpl9 .t9-cta-text p{ color:var(--t9-mute); font-size:1.5rem; line-height:1.7; margin:0 0 2.6rem; max-width:48rem; }
.tpl9 .t9-cta-stats{ display:flex; gap:1.4rem; flex-wrap:wrap; max-width:62rem; }
.tpl9 .t9-cta-stat{ min-width:12rem; padding:.8rem 1.2rem; border:1px solid rgba(255,255,255,.08); border-radius:12px; background:rgba(255,255,255,.05); text-align:center; }
.tpl9 .t9-cta-stat strong{ display:block; color:var(--white); font-size:2.2rem; font-weight:800; font-family:var(--font-heading); line-height:1; }
.tpl9 .t9-cta-stat span{ color:rgba(255,255,255,.7); font-size:1rem; letter-spacing:.06em; text-transform:uppercase; font-weight:700; }
.tpl9 .t9-cta-form{
  background:var(--white);
  border:1px solid var(--border-light);
  border-radius:16px; padding:0; overflow:hidden;
  box-shadow:0 16px 40px rgba(0,0,0,.18);
}
.tpl9 .t9-form-bar{
  display:flex; align-items:center; gap:1rem;
  padding:1.1rem 1.6rem;
  background:var(--primary-deeper); border-bottom:1px solid rgba(255,255,255,.08);
  font-size:1.15rem; color:rgba(255,255,255,.78);
}
.tpl9 .t9-form-bar-status{
  margin-left:auto;
  color:#28c840; font-weight:700; letter-spacing:.1em; font-size:1rem;
  padding:.2rem .7rem; border-radius:4px; border:1px solid rgba(40,200,64,.3);
  background:rgba(40,200,64,.08);
}
.tpl9 .t9-cta-form h3{ color:var(--white); font-size:1.7rem; font-weight:800; margin:2rem 2.4rem 1.6rem; display:flex; align-items:center; gap:.8rem; }
.tpl9 .t9-cta-form h3 i{ color:var(--t9-cyan); }
.tpl9 .t9-form-row{
  display:flex; align-items:center; gap:.8rem;
  margin:0 2rem 1.4rem;
  padding:1.1rem 1.4rem;
  background:var(--gray-50);
  border:1px solid var(--border);
  border-radius:12px;
  transition:.25s;
}
.tpl9 .t9-form-row:focus-within{ border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-glow); }
.tpl9 .t9-form-prompt{ color:var(--primary); font-weight:700; font-size:1.2rem; }
.tpl9 .t9-cta-input{
  flex:1; background:transparent; border:none; outline:none;
  color:var(--text); font-size:1.35rem; font-family:inherit;
}
.tpl9 .t9-cta-input::placeholder{ color:var(--text-muted); }
.tpl9 .t9-cta-form .t9-btn{ margin:0 2rem 1.6rem; width:calc(100% - 4rem); border-radius:999px; }
.tpl9 .t9-cta-foot{
  margin:0; padding:1rem 2rem;
  border-top:1px solid var(--border-light);
  background:var(--gray-50);
  color:var(--text-muted); font-size:1.1rem;
  display:flex; align-items:center; gap:.6rem;
}
.tpl9 .t9-cta-foot i{ color:var(--primary); }

/* ... RESPONSIVE ... */
@media(max-width:1199px){
  .tpl9 .t9-feat-grid{ grid-template-columns:repeat(3, 1fr); }
  .tpl9 .t9-feat--1{ grid-column:span 3; grid-row:auto; min-height:30rem; }
  .tpl9 .t9-feat--5{ grid-column:span 3; }
  .tpl9 .t9-why-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media(max-width:991px){
  .tpl9 .t9-hero-grid, .tpl9 .t9-vm-grid, .tpl9 .t9-vv, .tpl9 .t9-cta-grid{ grid-template-columns:1fr; gap:2.8rem; }
  .tpl9 .t9-level-grid, .tpl9 .t9-news-grid, .tpl9 .t9-show-grid, .tpl9 .t9-stats-grid, .tpl9 .t9-why-grid, .tpl9 .t9-feat-grid{ grid-template-columns:1fr; gap:1.8rem; }
  .tpl9 .t9-feat--1, .tpl9 .t9-feat--5{ grid-column:span 1; }
  .tpl9 .t9-mission-card{ flex:0 0 calc((100% - 1.6rem) / 2); }
  .tpl9 .t9-mission-track{ gap:1.6rem; }
  .tpl9 .t9-hero-meta{ grid-template-columns:repeat(3, 1fr); gap:1.2rem; }
  .tpl9 .t9-hero{ padding:5.5rem clamp(1.4rem,2.5vw,2.4rem) 4.5rem clamp(1.4rem,2.5vw,2.4rem); }
  .tpl9 .t9-levels, .tpl9 .t9-vm, .tpl9 .t9-mission, .tpl9 .t9-values, .tpl9 .t9-stats, .tpl9 .t9-features, .tpl9 .t9-why, .tpl9 .t9-founder, .tpl9 .t9-news, .tpl9 .t9-showcase, .tpl9 .t9-cta{ padding:5rem clamp(1.4rem,2.5vw,2.4rem); }
  .tpl9 .t9-test-quote{ padding:2.6rem 2rem 1.6rem; font-size:1.6rem; }
  .tpl9 .t9-test-quote::before{ font-size:6rem; top:-.5rem; left:1rem; }
  .tpl9 .t9-test-author{ padding:1.6rem 2rem 2rem; flex-wrap:wrap; gap:1.2rem; }
  .tpl9 .t9-test-signature{ margin-left:0; }
}
@media(max-width:640px){
  .tpl9 .t9-container{ padding:0 1.4rem; }
  .tpl9 .t9-hero{ padding:3.6rem 1.4rem 2.8rem 1.4rem; }
  .tpl9 .t9-levels, .tpl9 .t9-vm, .tpl9 .t9-mission, .tpl9 .t9-values, .tpl9 .t9-stats, .tpl9 .t9-features, .tpl9 .t9-why, .tpl9 .t9-founder, .tpl9 .t9-news, .tpl9 .t9-showcase, .tpl9 .t9-cta{ padding:3.2rem 0; }
  .tpl9 .t9-head{ margin-bottom:2.2rem; padding:0 1.4rem; }
  .tpl9 .t9-head h2{ font-size:2.2rem; line-height:1.2; margin:.8rem 0 .8rem; }
  .tpl9 .t9-head p{ font-size:1.28rem; line-height:1.6; }
  .tpl9 .t9-kicker{ font-size:1rem; padding:.45rem .9rem; letter-spacing:.14em; }
  /* hero */
  .tpl9 .t9-hero-title{ font-size:2.9rem; margin:1.4rem 0 1.2rem; line-height:1.08; }
  .tpl9 .t9-hero-desc{ font-size:1.35rem; margin-bottom:1.8rem; }
  .tpl9 .t9-hero-meta{ grid-template-columns:repeat(3,1fr) !important; gap:.6rem !important; max-width:100%; padding-top:1.6rem; }
  .tpl9 .t9-hero-meta li{ flex-direction:column; text-align:center; gap:.45rem; align-items:center; }
  .tpl9 .t9-hero-meta li i{ width:3.4rem; height:3.4rem; font-size:1.25rem; }
  .tpl9 .t9-hero-meta li strong{ font-size:1.25rem; text-align:center; }
  .tpl9 .t9-hero-meta li span{ font-size:.88rem; text-align:center; }
  .tpl9 .t9-hero-actions{ flex-wrap:nowrap !important; gap:.8rem !important; margin-bottom:2rem; }
  .tpl9 .t9-hero-actions .t9-btn{ flex:1 1 0; min-width:0; padding:1.05rem .8rem !important; font-size:1.15rem !important; white-space:nowrap; justify-content:center; }
  .tpl9 .t9-hero-panel{ border-radius:12px; }
  .tpl9 .t9-panel-screen{ aspect-ratio:16/11; }
  .tpl9 .t9-panel-overlay{ top:.8rem; left:.8rem; padding:.6rem .8rem; font-size:.95rem; }
  /* FIX: keep 3-col stats horizontally — avoids tall stacking */
  .tpl9 .t9-panel-stats{ grid-template-columns:repeat(3,1fr); }
  .tpl9 .t9-panel-stat{ border-left:1px solid var(--t9-line); border-top:none; padding:1.2rem .4rem; }
  .tpl9 .t9-panel-stat:first-child{ border-left:none; }
  .tpl9 .t9-panel-stat strong{ font-size:1.55rem; }
  .tpl9 .t9-panel-stat span{ font-size:.78rem; letter-spacing:.06em; }
  /* ── HORIZONTAL SNAP CAROUSELS to avoid long vertical scroll (first-principle: reduce scroll length) ── */
  .tpl9 .t9-level-grid,
  .tpl9 .t9-values-grid,
  .tpl9 .t9-feat-grid,
  .tpl9 .t9-why-grid,
  .tpl9 .t9-news-grid,
  .tpl9 .t9-show-grid,
  .tpl9 .t9-stats-grid{
    display:flex;
    overflow-x:auto; overflow-y:visible;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    gap:1.2rem;
    padding:0 1.4rem 1rem 1.4rem;
    scroll-padding-inline:1.4rem;
    grid-template-columns:unset;
  }
  .tpl9 .t9-level-grid::-webkit-scrollbar,
  .tpl9 .t9-values-grid::-webkit-scrollbar,
  .tpl9 .t9-feat-grid::-webkit-scrollbar,
  .tpl9 .t9-why-grid::-webkit-scrollbar,
  .tpl9 .t9-news-grid::-webkit-scrollbar,
  .tpl9 .t9-show-grid::-webkit-scrollbar,
  .tpl9 .t9-stats-grid::-webkit-scrollbar{ display:none; }
  /* card widths — peek next card to hint swipe */
  .tpl9 .t9-level-card{ flex:0 0 84%; scroll-snap-align:start; min-width:0; }
  .tpl9 .t9-level-body{ padding:2rem 1.6rem 1.8rem; }
  .tpl9 .t9-level-body h4{ font-size:1.75rem; }
  .tpl9 .t9-level-body p{ font-size:1.25rem; }
  .tpl9 .t9-value{ flex:0 0 68%; scroll-snap-align:start; min-width:0; padding:2rem 1.4rem 1.8rem; }
  .tpl9 .t9-value h3{ font-size:1.35rem; }
  .tpl9 .t9-value p{ font-size:1.15rem; }
  .tpl9 .t9-feat{ flex:0 0 82%; scroll-snap-align:start; min-width:0; min-height:22rem; padding:1.8rem 1.6rem; }
  .tpl9 .t9-feat--1, .tpl9 .t9-feat--5{ grid-column:auto; grid-row:auto; min-height:22rem; }
  .tpl9 .t9-feat-visual{ height:7rem; margin:1rem 0 1.2rem; }
  .tpl9 .t9-why-card{ flex:0 0 76%; scroll-snap-align:start; min-width:0; padding:2rem 1.4rem; }
  .tpl9 .t9-news-card{ flex:0 0 84%; scroll-snap-align:start; min-width:0; }
  .tpl9 .t9-news-body{ padding:1.6rem 1.6rem 1.8rem; }
  .tpl9 .t9-news-body h3{ font-size:1.5rem; }
  .tpl9 .t9-show-card{ flex:0 0 84%; scroll-snap-align:start; min-width:0; }
  .tpl9 .t9-show-visual{ min-height:18rem; padding:1.4rem; }
  .tpl9 .t9-show-body{ padding:1.6rem 1.6rem 1.8rem; }
  .tpl9 .t9-stat{ flex:0 0 76%; scroll-snap-align:start; min-width:0; padding:1.8rem 1.6rem; }
  .tpl9 .t9-stat-num{ font-size:3rem; }
  /* hint dots / scroll indicator for carousels */
  .tpl9 .t9-level-grid::after,
  .tpl9 .t9-values-grid::after,
  .tpl9 .t9-feat-grid::after,
  .tpl9 .t9-why-grid::after,
  .tpl9 .t9-news-grid::after,
  .tpl9 .t9-show-grid::after,
  .tpl9 .t9-stats-grid::after{ content:''; flex:0 0 1px; }
  /* vision/mission compact */
  .tpl9 .t9-vm-card{ padding:0 !important; }
  .tpl9 .t9-vm-card .t9-vm-bar + *{ margin-top:0; }
  .tpl9 .t9-vm-card--vision, .tpl9 .t9-vm-card--mission{ padding:0 !important; }
  .tpl9 .t9-vm-card .t9-vm-icon{ margin:1.8rem 1.6rem 1rem 1.6rem; width:4.6rem; height:4.6rem; font-size:1.9rem; }
  .tpl9 .t9-vm-card h3{ padding:0 1.6rem; font-size:1.7rem; }
  .tpl9 .t9-vm-card--vision p{ padding:0 1.6rem 1.8rem 1.6rem; font-size:1.32rem; }
  .tpl9 .t9-vm-list{ padding:0 1.6rem 1.8rem 1.6rem; }
  .tpl9 .t9-vm-list li span:last-child{ font-size:1.22rem; }
  /* vm list collapsed on mobile to reduce height — expand via .is-expanded */
  .tpl9 .t9-vm-list.t9-vm-list--collapsible{ max-height:18rem; overflow:hidden; position:relative; }
  .tpl9 .t9-vm-list.t9-vm-list--collapsible::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:5rem; background:linear-gradient(to bottom, transparent, var(--white)); pointer-events:none; }
  .tpl9 .t9-vm-list.t9-vm-list--collapsible.is-expanded{ max-height:none; }
  .tpl9 .t9-vm-list.t9-vm-list--collapsible.is-expanded::after{ display:none; }
  .tpl9 .t9-vm-expand{ display:flex; align-items:center; justify-content:center; gap:.6rem; margin:0 1.6rem 1.6rem 1.6rem; padding:.9rem 1.2rem; border-radius:999px; border:1.5px solid var(--border); background:var(--white); color:var(--primary); font-weight:700; font-size:1.2rem; cursor:pointer; width:calc(100% - 3.2rem); }
  /* mission carousel single view already — tighten */
  .tpl9 .t9-mission-stage{ padding:.4rem 0; }
  /* video section align */
  .tpl9 .t9-vv{ gap:2rem; margin-bottom:2.4rem; padding:0 1.4rem; }
  .tpl9 .t9-vv-video-badge{ font-size:1rem; padding:.5rem .8rem; }
  .tpl9 .t9-vv-text{ padding:0 1.4rem; }
  .tpl9 .t9-vv-text h2{ font-size:2.2rem; }
  .tpl9 .t9-vv-text p{ font-size:1.32rem; }
  /* founder */
  .tpl9 .t9-testimonial{ margin:0 1.4rem; border-radius:12px; }
  .tpl9 .t9-test-quote{ padding:2rem 1.6rem 1.4rem; font-size:1.45rem; line-height:1.55; }
  .tpl9 .t9-test-quote::before{ font-size:5rem; top:-.4rem; left:.8rem; }
  .tpl9 .t9-test-author{ padding:1.4rem 1.6rem 1.8rem; flex-wrap:wrap; gap:1rem; }
  .tpl9 .t9-test-avatar{ width:4.4rem; height:4.4rem; font-size:1.6rem; border-radius:10px; }
  .tpl9 .t9-test-meta h3{ font-size:1.3rem; }
  .tpl9 .t9-test-signature{ margin-left:0; font-size:1rem; }
  .tpl9 .t9-vm-grid{ gap:1.4rem; padding:0 1.4rem; }
  .tpl9 .t9-mission{ padding:3.2rem 0; }
  .tpl9 .t9-mission .t9-head{ padding:0 1.4rem; }
  .tpl9 .t9-mission-stage{ margin:0; }
  /* cta */
  .tpl9 .t9-cta-grid{ gap:2rem; padding:0 1.4rem; }
  .tpl9 .t9-cta-text h2{ font-size:2.3rem; }
  .tpl9 .t9-cta-text p{ font-size:1.32rem; margin-bottom:1.8rem; }
  .tpl9 .t9-cta-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; max-width:100%; }
  .tpl9 .t9-cta-stat{ min-width:0; padding:.7rem .6rem; }
  .tpl9 .t9-cta-stat strong{ font-size:1.55rem; }
  .tpl9 .t9-cta-stat span{ font-size:.82rem; }
  .tpl9 .t9-cta-form{ margin:0 1.4rem; border-radius:12px; }
  .tpl9 .t9-cta-form h3{ margin:1.6rem 1.4rem 1.2rem; font-size:1.45rem; color:var(--text); }
  .tpl9 .t9-form-row{ margin:0 1.4rem 1.2rem; padding:.9rem 1rem; }
  .tpl9 .t9-cta-input{ font-size:1.25rem; }
  .tpl9 .t9-cta-form .t9-btn{ margin:0 1.4rem 1.4rem; width:calc(100% - 2.8rem); }
  .tpl9 .t9-cta-foot{ padding:.9rem 1.4rem; font-size:1rem; }
  /* ticker smaller */
  .tpl9 .t9-ticker{ padding:.8rem 0; }
  .tpl9 .t9-ticker-track{ gap:2.2rem; font-size:1.05rem; }
}
@media(max-width:400px){
  /* First-principle: keep twin buttons side-by-side & 3 trust stats side-by-side even on 320-400px */
  .tpl9 .t9-hero-actions{ gap:.45rem !important; }
  .tpl9 .t9-hero-actions .t9-btn{ padding:.85rem .5rem !important; font-size:.92rem !important; gap:.4rem !important; }
  .tpl9 .t9-hero-meta{ gap:.35rem !important; padding-top:1.2rem !important; }
  .tpl9 .t9-hero-meta li{ gap:.35rem !important; }
  .tpl9 .t9-hero-meta li i{ width:2.8rem !important; height:2.8rem !important; font-size:1.05rem !important; }
  .tpl9 .t9-hero-meta li strong{ font-size:1.02rem !important; }
  .tpl9 .t9-hero-meta li span{ font-size:.76rem !important; }
  .tpl9 .t9-panel-stats{ grid-template-columns:repeat(3,1fr) !important; }
  .tpl9 .t9-panel-stat{ padding:.9rem .3rem !important; }
  .tpl9 .t9-panel-stat strong{ font-size:1.35rem !important; }
  .tpl9 .t9-panel-stat span{ font-size:.72rem !important; }
  /* any twin-button group stays row */
  .tpl9 .t9-hero-actions{ flex-direction:row !important; flex-wrap:nowrap !important; }
}

/* =====================================================
   TEMPLATE 10 — STORYBOOK
   ===================================================== */
/* =====================================================
   TEMPLATE 10: STORYBOOK ... scoped under .tpl10
   Warm pastels, wavy dividers, hand-drawn picture-book feel.
   Storybook themed: notebook paper, washi tape, scribbles,
   polaroid frames, sticker tags, dotted petalled cards.
   All colours come from the dynamic theme variables
   (--primary, --primary-light, --accent, --gold, --primary-mist).
   ===================================================== */
.tpl10{
  /* — Dynamic Storybook palette — every token derived from the admin "Theme & Brand Colours"
     so one save in School Settings re-skins the whole storybook, exactly like the header/footer.
     Pastel bases are tints of --primary-mist / --gold-pale / --accent soft, dark ink from --text. */
  --t10-cream:     color-mix(in srgb, var(--primary-mist) 68%, #fffaf3);
  --t10-paper:     var(--white);
  --t10-peach:     color-mix(in srgb, var(--accent) 9%, #fff1e3);
  --t10-mint:      color-mix(in srgb, var(--primary-mist) 88%, #f2f9f0);
  --t10-sky:       color-mix(in srgb, var(--primary-mist) 55%, #eaf4fb);
  --t10-rose:      color-mix(in srgb, var(--accent) 7%, #fdecec);
  --t10-sun:       color-mix(in srgb, var(--gold) 22%, #fff3d6);
  --t10-ink:       var(--text);
  --t10-ink-soft:  var(--text-secondary);
  --t10-line:      var(--border);
  --t10-line-soft: var(--border-light);
  background:var(--t10-cream);
  font-family:'Trirong','Open Sans',sans-serif;
  color:var(--t10-ink);
  overflow-x:hidden;
  position:relative;
}
.tpl10 *{ box-sizing:border-box; }
.tpl10 img{ max-width:100%; display:block; }
.tpl10 .t10-container{ max-width:1200px; margin:0 auto; padding:0 clamp(1.6rem,3vw,3.2rem); position:relative; z-index:1; }
.tpl10 .t10-reveal{ opacity:0; transform:translateY(30px); transition:opacity .8s ease, transform .8s ease; }
.tpl10 .t10-reveal.is-in{ opacity:1; transform:translateY(0); }
.tpl10 .t10-accent{ color:var(--accent); }
.tpl10 .t10-accent-soft{ color:var(--gold); }
.tpl10 .t10-eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:'Open Sans',sans-serif;
  font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); font-size:1.2rem;
}
.tpl10 .t10-wave{ display:block; width:100%; line-height:0; position:relative; }
.tpl10 .t10-wave svg{ width:100%; height:6rem; display:block; }
.tpl10 .t10-wave--cream svg{ color:var(--t10-cream); }
.tpl10 .t10-wave--sky svg{ color:var(--t10-sky); }
.tpl10 .t10-head{ text-align:center; max-width:64rem; margin:0 auto 4.6rem; }
.tpl10 .t10-head span{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:'Open Sans',sans-serif;
  font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); font-size:1.2rem;
  background:var(--white); border:2px dashed var(--accent);
  padding:.6rem 1.4rem; border-radius:999px;
  margin-bottom:1.4rem;
}
.tpl10 .t10-head h2{
  font-size:clamp(2.6rem,4vw,3.8rem); font-weight:700; margin:0 0 1.2rem; line-height:1.15; color:var(--primary-dark);
}
.tpl10 .t10-head p{
  font-family:'Open Sans',sans-serif; font-size:1.55rem; color:var(--t10-ink-soft); line-height:1.7; max-width:54rem; margin:0 auto;
}

/* ... BUTTONS ... */
.tpl10 .t10-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:1rem;
  padding:1.4rem 2.8rem; border-radius:999px;
  font-weight:800; font-size:1.4rem; text-decoration:none;
  transition:.25s; border:none; cursor:pointer;
  font-family:'Open Sans',sans-serif;
}
.tpl10 .t10-btn--sm{ padding:1rem 2rem; font-size:1.25rem; }
.tpl10 .t10-btn--coral{
  background:var(--accent); color:var(--white);
  box-shadow:0 10px 26px rgba(var(--accent-rgb),.35);
}
.tpl10 .t10-btn--coral:hover{ transform:translateY(-3px); box-shadow:0 16px 34px rgba(var(--accent-rgb),.45); }
.tpl10 .t10-btn--leaf{
  background:var(--primary); color:var(--white);
  box-shadow:0 10px 26px rgba(var(--primary-rgb),.35);
}
.tpl10 .t10-btn--leaf:hover{ transform:translateY(-3px); box-shadow:0 16px 34px rgba(var(--primary-rgb),.45); }
.tpl10 .t10-btn--outline{
  background:var(--white); border:2px solid rgba(var(--primary-rgb),.18); color:var(--primary-dark);
}
.tpl10 .t10-btn--outline:hover{ background:var(--primary-dark); color:var(--white); border-color:var(--primary-dark); }

/* ============================================================
   1. HERO ... Storybook dark canvas
   Rich, dark backdrop built from the brand's deepest tones.
   Floating orbs, a subtle dot grid, a draped fairy-light SVG
   string, and twinkling sparkles create a warm, inviting
   atmosphere that still feels hand-crafted and magical.
   All colours derive from the dynamic school variables so the
   admin can re-skin everything from one panel.
   ============================================================ */
.tpl10 .t10-hero{
  padding:6rem clamp(1.6rem,3vw,3.2rem) 0 clamp(1.6rem,3vw,3.2rem);
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(ellipse 80% 60% at 50% 15%,
      rgba(var(--gold-rgb),.12) 0%, transparent 55%),
    radial-gradient(ellipse 50% 50% at 80% 80%,
      rgba(var(--primary-rgb),.18) 0%, transparent 50%),
    linear-gradient(180deg, var(--primary-deeper) 0%, var(--primary-dark) 100%);
  color:var(--white);
  border-top:4px solid var(--accent);
}
.tpl10 .t10-hero::before{
  content:'';position:absolute;top:4px;left:0;width:10rem;height:2px;background:var(--gold);border-radius:0 2px 2px 0;z-index:3;
}
.tpl10 .t10-hero::after{
  content:''; position:absolute; inset:0;
  background:url("data:image/svg+xml,%3Csvg width='6' height='6' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='1' cy='1' r='.6' fill='rgba(255,255,255,.04)'/%3E%3C/svg%3E");
  opacity:.6; pointer-events:none;
}

/* Floating orbs */
.tpl10 .t10-orb{
  position:absolute; border-radius:50%; pointer-events:none;
  filter:blur(60px); opacity:.35;
  animation:t10-orb-float 18s ease-in-out infinite alternate;
}
.tpl10 .t10-orb--1{
  width:34rem; height:34rem; top:-6%; left:-4%;
  background:radial-gradient(circle, rgba(var(--gold-rgb),.45), transparent 70%);
  animation-duration:22s;
}
.tpl10 .t10-orb--2{
  width:22rem; height:22rem; top:18%; right:6%;
  background:radial-gradient(circle, rgba(var(--accent-rgb),.35), transparent 70%);
  animation-duration:16s; animation-delay:-4s;
}
.tpl10 .t10-orb--3{
  width:18rem; height:18rem; bottom:22%; left:12%;
  background:radial-gradient(circle, rgba(var(--primary-light-rgb, 255,255,255),.3), transparent 70%);
  animation-duration:20s; animation-delay:-8s;
}
.tpl10 .t10-orb--4{
  width:14rem; height:14rem; top:40%; left:45%;
  background:radial-gradient(circle, rgba(var(--gold-rgb),.25), transparent 70%);
  animation-duration:24s; animation-delay:-12s;
}
.tpl10 .t10-orb--5{
  width:26rem; height:26rem; bottom:-4%; right:10%;
  background:radial-gradient(circle, rgba(var(--primary-rgb),.3), transparent 70%);
  animation-duration:19s; animation-delay:-6s;
}
@keyframes t10-orb-float{
  0%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(3rem,-2rem) scale(1.08); }
  100%{ transform:translate(-2rem,3rem) scale(.95); }
}

/* Dot grid overlay */
.tpl10 .t10-dots{
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(circle 1px at center, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size:28px 28px;
  -webkit-mask-image:radial-gradient(ellipse 70% 55% at 50% 40%, #000 20%, transparent 75%);
          mask-image:radial-gradient(ellipse 70% 55% at 50% 40%, #000 20%, transparent 75%);
}

/* Fairy-light string SVG */
.tpl10 .t10-fairy-lights{
  position:absolute; top:0; left:0; width:100%; height:auto;
  z-index:1; pointer-events:none; opacity:.7;
}
.tpl10 .t10-fairy-wire{
  fill:none; stroke:rgba(255,255,255,.18); stroke-width:2;
}
.tpl10 .t10-fairy-bulbs circle{
  fill:var(--gold);
  filter:drop-shadow(0 0 4px rgba(var(--gold-rgb),.6));
  animation:t10-bulb-glow 2.5s ease-in-out infinite alternate;
}
.tpl10 .t10-fairy-bulbs circle:nth-child(odd){
  fill:var(--accent);
  filter:drop-shadow(0 0 4px rgba(var(--accent-rgb),.6));
  animation-delay:.8s;
}
@keyframes t10-bulb-glow{
  0%{ opacity:.5; r:3.5; }
  100%{ opacity:1; r:5; }
}

/* Twinkling sparkles */
.tpl10 .t10-spark{
  position:absolute; width:1rem; height:1rem;
  background:var(--gold); border-radius:50%;
  opacity:.7; z-index:1; pointer-events:none;
  box-shadow:0 0 0 5px rgba(var(--gold-rgb),.18), 0 0 12px rgba(var(--gold-rgb),.55);
  animation:t10-twinkle 3s ease-in-out infinite;
}
.tpl10 .t10-spark--1{ top:12%; left:10%; animation-delay:0s; }
.tpl10 .t10-spark--2{ top:28%; right:16%; animation-delay:.5s; width:.8rem; height:.8rem; }
.tpl10 .t10-spark--3{ top:55%; left:22%; animation-delay:1s; width:.7rem; height:.7rem; }
.tpl10 .t10-spark--4{ top:16%; right:32%; animation-delay:1.5s; width:.9rem; height:.9rem; }
.tpl10 .t10-spark--5{ top:42%; left:55%; animation-delay:2s; width:.6rem; height:.6rem; }
.tpl10 .t10-spark--6{ top:65%; right:8%; animation-delay:.3s; width:.8rem; height:.8rem; }
@keyframes t10-twinkle{
  0%,100%{ transform:scale(1); opacity:.45; }
  50%{ transform:scale(1.6); opacity:1; }
}

/* Hero content sits above all the background layers */
.tpl10 .t10-hero .t10-container{ position:relative; z-index:2; }
.tpl10 .t10-hero-grid{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:4.5rem; align-items:center; padding-bottom:22rem;
  position:relative; z-index:1;
}
.tpl10 .t10-hero-copy{ padding:1rem 0; }
.tpl10 .t10-badge{
  display:inline-flex; align-items:center; gap:.8rem;
  background:rgba(255,255,255,.12);
  border:2px dashed rgba(var(--gold-rgb),.7); color:var(--gold);
  padding:.9rem 1.8rem; border-radius:999px;
  font-weight:800; font-size:1.3rem; font-family:'Open Sans',sans-serif;
  backdrop-filter:blur(6px);
  box-shadow:0 6px 16px rgba(0,0,0,.2);
}
.tpl10 .t10-hero h1{
  font-size:clamp(3.2rem,5vw,5.2rem); font-weight:700;
  line-height:1.12; margin:2rem 0 1.4rem;
  color:var(--white);
  text-shadow:0 2px 8px rgba(0,0,0,.3);
}
.tpl10 .t10-hero h1 .t10-underline{ position:relative; color:var(--gold); display:inline-block; }
.tpl10 .t10-hero h1 .t10-underline svg{
  position:absolute; left:0; bottom:-.6rem; width:100%; height:1.4rem; color:var(--gold);
}
.tpl10 .t10-hero-tag{
  font-family:'Open Sans',sans-serif; font-weight:800; font-size:1.6rem;
  color:var(--gold); margin:0 0 1.2rem;
  font-style:italic;
}
.tpl10 .t10-hero-desc{
  font-family:'Open Sans',sans-serif; font-size:1.55rem;
  color:rgba(255,255,255,.85); line-height:1.75; max-width:48rem; margin:0 0 2.6rem;
}
.tpl10 .t10-hero-cta{ display:flex; flex-wrap:wrap; gap:1.2rem; margin-bottom:3rem; }

.tpl10 .t10-hero-trust{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem;
  padding-top:2.4rem; border-top:2px dashed rgba(255,255,255,.15);
}
.tpl10 .t10-trust{ display:flex; align-items:center; gap:1rem; }
.tpl10 .t10-trust i{
  width:3.6rem; height:3.6rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.12); color:var(--gold);
  font-size:1.5rem; flex-shrink:0;
  box-shadow:0 4px 10px rgba(0,0,0,.2);
  border:1.5px solid rgba(255,255,255,.15);
}
.tpl10 .t10-trust strong{ display:block; font-size:1.35rem; color:var(--white); font-weight:800; }
.tpl10 .t10-trust span{ font-size:1.05rem; color:rgba(255,255,255,.7); font-family:'Open Sans',sans-serif; }

/* Hero art (polaroid frame) sits over the landscape */
.tpl10 .t10-hero-art{ position:relative; perspective:1000px; z-index:2; }
.tpl10 .t10-hero-frame{
  position:relative;
  background:var(--white);
  padding:1.4rem 1.4rem 4.5rem;
  border-radius:8px;
  box-shadow:0 30px 60px rgba(0,0,0,.28);
  transform:rotate(-2deg);
  transition:transform .4s ease;
}
.tpl10 .t10-hero-frame:hover{ transform:rotate(0deg) scale(1.02); }
.tpl10 .t10-hero-frame img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  border-radius:4px; border:1px solid var(--t10-line);
}
.tpl10 .t10-frame-tape{
  position:absolute; width:7rem; height:1.6rem;
  background:rgba(var(--gold-rgb),.55);
  box-shadow:0 2px 4px rgba(0,0,0,.08);
}
.tpl10 .t10-frame-tape--tl{ top:-1rem; left:1.5rem; transform:rotate(-12deg); }
.tpl10 .t10-frame-tape--tr{ top:-1rem; right:1.5rem; transform:rotate(10deg); background:rgba(var(--accent-rgb),.4); }
.tpl10 .t10-frame-tape--bl{ bottom:2.6rem; left:1.5rem; transform:rotate(8deg); background:rgba(var(--primary-rgb),.4); }
.tpl10 .t10-frame-tape--br{ bottom:2.6rem; right:1.5rem; transform:rotate(-10deg); }

.tpl10 .t10-sticker{
  position:absolute; background:var(--white); border-radius:14px;
  padding:1rem 1.4rem;
  box-shadow:0 12px 26px rgba(0,0,0,.22);
  display:flex; align-items:center; gap:.9rem;
  font-family:'Open Sans',sans-serif;
  border:2px solid var(--t10-line-soft);
  z-index:3;
}
.tpl10 .t10-sticker i{
  width:3.4rem; height:3.4rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; color:var(--white); flex-shrink:0;
}
.tpl10 .t10-sticker strong{ display:block; font-size:1.35rem; color:var(--t10-ink); }
.tpl10 .t10-sticker span{ font-size:1rem; color:var(--t10-ink-soft); }
.tpl10 .t10-sticker--1{ top:1rem; left:-2.6rem; transform:rotate(-8deg); }
.tpl10 .t10-sticker--1 i{ background:var(--primary-light); }
.tpl10 .t10-sticker--2{ bottom:8rem; right:-2.4rem; transform:rotate(6deg); }
.tpl10 .t10-sticker--2 i{ background:var(--accent); }
.tpl10 .t10-sticker--3{ bottom:-1.5rem; left:1.5rem; transform:rotate(-3deg); }
.tpl10 .t10-sticker--3 i{ background:var(--gold); }

/* ============================================================
   2. CHAPTERS (LEVELS) ... alternating book pages
   ============================================================ */
.tpl10 .t10-chapters{
  background:var(--t10-cream);
  padding:7rem clamp(1.6rem,2.5vw,3rem) 8rem clamp(1.6rem,2.5vw,3rem);
  position:relative;
}
.tpl10 .t10-chapter-row{
  display:flex; align-items:center; gap:3.5rem;
  margin-bottom:4rem;
}
.tpl10 .t10-chapter-row:nth-child(even){ flex-direction:row-reverse; }
.tpl10 .t10-chapter-row:last-child{ margin-bottom:0; }
.tpl10 .t10-chapter-num{
  flex:0 0 9rem; text-align:center;
  font-size:6.5rem; font-weight:700;
  color:var(--t10-line-soft);
  line-height:1; font-family:'Trirong',serif;
  position:relative;
}
.tpl10 .t10-chapter-num::after{
  content:''; position:absolute;
  bottom:-1rem; left:50%; transform:translateX(-50%);
  width:3rem; height:.4rem; border-radius:2px;
  background:var(--accent);
}
.tpl10 .t10-chapter-card{
  flex:1;
  background:var(--t10-paper);
  border:2px solid var(--t10-line-soft);
  border-radius:24px;
  padding:3rem 3.2rem;
  display:flex; gap:2.2rem; align-items:flex-start;
  box-shadow:0 16px 40px rgba(58,49,48,.06);
  transition:.3s;
  position:relative;
}
.tpl10 .t10-chapter-card:hover{
  transform:translateY(-4px);
  box-shadow:0 24px 50px rgba(58,49,48,.1);
  border-color:var(--accent);
}
.tpl10 .t10-chapter-card::before{
  content:''; position:absolute;
  top:1.5rem; right:1.5rem;
  width:1.2rem; height:1.2rem;
  background:var(--accent);
  border-radius:50%;
  box-shadow:0 0 0 5px rgba(var(--accent-rgb),.18);
}
.tpl10 .t10-chapter-icon{
  flex:0 0 6rem; height:6rem;
  border-radius:18px;
  background:var(--primary-mist);
  color:var(--primary);
  display:flex; align-items:center; justify-content:center;
  font-size:2.4rem;
  transform:rotate(-6deg);
}
.tpl10 .t10-chapter-body{ flex:1; }
.tpl10 .t10-chapter-card h4{
  font-size:2.2rem; font-weight:700;
  margin:0 0 1rem; color:var(--primary);
  font-family:'Trirong',serif;
}
.tpl10 .t10-chapter-card p{
  font-family:'Open Sans',sans-serif;
  font-size:1.4rem; color:var(--t10-ink-soft);
  line-height:1.7; margin:0 0 1.4rem;
}
.tpl10 .t10-chapter-tags{ display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:1.4rem; }
.tpl10 .t10-chapter-tags span{
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:'Open Sans',sans-serif; font-weight:700;
  font-size:1.1rem; color:var(--t10-ink-soft);
  background:var(--t10-sun); padding:.4rem 1rem; border-radius:999px;
}
.tpl10 .t10-chapter-cta{
  font-family:'Open Sans',sans-serif; font-weight:800;
  color:var(--accent); text-decoration:none;
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:1.3rem; transition:gap .2s;
}
.tpl10 .t10-chapter-cta:hover{ gap:1rem; }

/* ============================================================
   3. VISION / MISSION ... storybook "Once upon" cards
   ============================================================ */
.tpl10 .t10-vm{
  background:var(--t10-sky);
  padding:7rem clamp(1.6rem,2.5vw,3rem) 8rem clamp(1.6rem,2.5vw,3rem);
  position:relative;
}
.tpl10 .t10-vm-grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:2.4rem;
}
.tpl10 .t10-vm-card{
  background:var(--t10-paper);
  border:2px solid var(--t10-line-soft);
  border-radius:28px;
  padding:3.4rem 3rem 3rem;
  position:relative;
  box-shadow:0 20px 50px rgba(58,49,48,.08);
  transition:.3s;
}
.tpl10 .t10-vm-card:hover{ transform:translateY(-4px); }
.tpl10 .t10-vm-card--vision{ background:var(--t10-paper); }
.tpl10 .t10-vm-card--mission{ background:var(--t10-sun); }
.tpl10 .t10-vm-ribbon{
  position:absolute; top:-1.2rem; left:2.4rem;
  background:var(--accent); color:var(--white);
  font-family:'Open Sans',sans-serif; font-weight:800;
  font-size:1.1rem; letter-spacing:.16em; text-transform:uppercase;
  padding:.6rem 1.4rem; border-radius:6px;
  box-shadow:0 6px 14px rgba(var(--accent-rgb),.35);
  transform:rotate(-2deg);
}
.tpl10 .t10-vm-card--mission .t10-vm-ribbon{ background:var(--primary); box-shadow:0 6px 14px rgba(var(--primary-rgb),.35); }
.tpl10 .t10-vm-icon{
  width:5.6rem; height:5.6rem;
  border-radius:50%;
  background:var(--white); color:var(--accent);
  display:flex; align-items:center; justify-content:center;
  font-size:2.2rem;
  box-shadow:0 8px 20px rgba(58,49,48,.1);
  margin-bottom:1.6rem;
}
.tpl10 .t10-vm-card--mission .t10-vm-icon{ color:var(--primary); }
.tpl10 .t10-vm-card h3{
  font-size:2.2rem; font-weight:700;
  margin:0 0 1.2rem; color:var(--t10-ink);
  font-family:'Trirong',serif;
}
.tpl10 .t10-vm-card > p{
  font-family:'Open Sans',sans-serif; font-size:1.5rem;
  color:var(--t10-ink-soft); line-height:1.75; margin:0 0 1.4rem;
}
.tpl10 .t10-vm-doodle{
  height:1.6rem; color:var(--accent);
}
.tpl10 .t10-vm-list{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:1rem;
}
.tpl10 .t10-vm-list li{
  display:flex; gap:1.2rem; align-items:flex-start;
  background:var(--white); border-radius:14px;
  padding:1.2rem 1.4rem;
  border:1.5px solid var(--t10-line-soft);
}
.tpl10 .t10-vm-num{
  flex:0 0 3.2rem; height:3.2rem;
  background:var(--primary); color:var(--white);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:'Trirong',serif; font-weight:700; font-size:1.2rem;
}
.tpl10 .t10-vm-list li span:last-child{
  font-family:'Open Sans',sans-serif; font-size:1.35rem;
  color:var(--t10-ink-soft); line-height:1.6; padding-top:.4rem;
}

/* ============================================================
   4. CORE VALUES ... floating petal cards
   ============================================================ */
.tpl10 .t10-values{
  background:var(--t10-cream);
  padding:7rem clamp(1.6rem,2.5vw,3rem);
  position:relative;
}
.tpl10 .t10-values-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));
  gap:1.8rem;
}
.tpl10 .t10-value-card{
  background:var(--white);
  border:2px solid var(--t10-line-soft);
  border-radius:24px;
  padding:2.8rem 2rem 2.4rem;
  text-align:center;
  position:relative;
  transition:.3s;
  overflow:hidden;
}
.tpl10 .t10-value-card::before{
  content:''; position:absolute;
  bottom:-4rem; right:-4rem;
  width:10rem; height:10rem;
  border-radius:50%;
  opacity:.15;
}
.tpl10 .t10-value-card--p0::before{ background:var(--accent); }
.tpl10 .t10-value-card--p1::before{ background:var(--primary); }
.tpl10 .t10-value-card--p2::before{ background:var(--gold); }
.tpl10 .t10-value-card:hover{
  transform:translateY(-6px) rotate(-1deg);
  border-color:var(--accent);
  box-shadow:0 18px 40px rgba(58,49,48,.12);
}
.tpl10 .t10-value-num{
  position:absolute; top:1.2rem; left:1.4rem;
  font-family:'Trirong',serif; font-weight:700;
  font-size:1.1rem; color:var(--t10-line);
  letter-spacing:.1em;
}
.tpl10 .t10-value-card i{
  font-size:2.8rem;
  margin-bottom:1.2rem; display:inline-flex;
  width:6rem; height:6rem; align-items:center; justify-content:center;
  border-radius:50%;
}
.tpl10 .t10-value-card--p0 i{ background:var(--t10-rose); color:var(--accent); }
.tpl10 .t10-value-card--p1 i{ background:var(--primary-mist); color:var(--primary); }
.tpl10 .t10-value-card--p2 i{ background:var(--t10-sun); color:#a07416; }
.tpl10 .t10-value-card span{
  display:block;
  font-weight:800; font-size:1.4rem; font-family:'Open Sans',sans-serif;
  color:var(--t10-ink);
}

/* ============================================================
   5. STATS ... pastel bubbles
   ============================================================ */
.tpl10 .t10-stats{
  background:var(--t10-mint);
  padding:7rem clamp(1.6rem,2.5vw,3rem);
  position:relative;
  overflow:hidden;
}
.tpl10 .t10-stats-doodle{
  position:absolute; border-radius:50%;
  background:rgba(var(--primary-rgb),.08);
  pointer-events:none;
}
.tpl10 .t10-stats-doodle--1{ width:24rem; height:24rem; top:-8rem; left:-8rem; }
.tpl10 .t10-stats-doodle--2{ width:18rem; height:18rem; bottom:-6rem; right:-6rem; background:rgba(var(--accent-rgb),.1); }
.tpl10 .t10-stats-grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:2.4rem; text-align:center;
  position:relative; z-index:1;
}
.tpl10 .t10-stat-bubble{
  background:var(--white);
  border-radius:32px;
  padding:3rem 2.2rem 2.6rem;
  border:2px solid var(--t10-line-soft);
  box-shadow:0 16px 36px rgba(58,49,48,.08);
  transition:.3s;
  position:relative;
}
.tpl10 .t10-stat-bubble:hover{ transform:translateY(-6px); box-shadow:0 24px 50px rgba(58,49,48,.12); }
.tpl10 .t10-stat-bubble--alt{ background:var(--t10-sun); }
.tpl10 .t10-stat-icon{
  display:inline-flex;
  width:5rem; height:5rem;
  background:var(--primary-mist);
  color:var(--primary);
  border-radius:50%;
  align-items:center; justify-content:center;
  font-size:1.8rem;
  margin-bottom:1.2rem;
}
.tpl10 .t10-stat-bubble--alt .t10-stat-icon{ background:var(--white); color:var(--accent); }
.tpl10 .t10-stat-bubble strong{
  display:block;
  font-size:3.4rem; font-weight:700;
  color:var(--primary);
  font-family:'Trirong',serif;
  line-height:1; margin-bottom:.4rem;
}
.tpl10 .t10-stat-bubble--alt strong{ color:var(--accent); }
.tpl10 .t10-stat-bubble > span{
  display:block;
  font-family:'Open Sans',sans-serif; font-size:1.25rem;
  color:var(--t10-ink-soft); font-weight:800;
  margin-bottom:1rem;
}
.tpl10 .t10-stat-bubble p{
  font-family:'Open Sans',sans-serif; font-size:1.2rem;
  color:var(--t10-ink-soft); line-height:1.6; margin:0;
}

/* ============================================================
   6. PORTAL FEATURES ... "treasure chest" bento grid
   ============================================================ */
.tpl10 .t10-features{
  background:var(--t10-cream);
  padding:7rem clamp(1.6rem,2.5vw,3rem) 8rem clamp(1.6rem,2.5vw,3rem);
  position:relative;
}
.tpl10 .t10-features-wrap{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:22rem;
  gap:1.6rem;
}
.tpl10 .t10-feature{
  background:var(--white);
  border:2px solid var(--t10-line-soft);
  border-radius:24px;
  padding:2.4rem;
  text-decoration:none; color:inherit;
  display:flex; flex-direction:column; justify-content:space-between;
  position:relative; overflow:hidden;
  transition:.3s;
  box-shadow:0 10px 26px rgba(58,49,48,.05);
}
.tpl10 .t10-feature::before{
  content:''; position:absolute;
  top:-3rem; right:-3rem;
  width:8rem; height:8rem;
  background:var(--t10-sun);
  border-radius:50%;
  opacity:.6;
  transition:transform .4s;
}
.tpl10 .t10-feature:hover{ transform:translateY(-6px); border-color:var(--accent); box-shadow:0 18px 40px rgba(58,49,48,.12); }
.tpl10 .t10-feature:hover::before{ transform:scale(1.4); }
.tpl10 .t10-feature--big{
  grid-column:span 2; grid-row:span 2;
  background:var(--t10-paper);
}
.tpl10 .t10-feature--big::before{ background:var(--primary-mist); }
.tpl10 .t10-feature--wide{ grid-column:span 2; }

.tpl10 .t10-feature-illus{
  position:absolute; bottom:2rem; right:2rem;
  display:flex; align-items:flex-end; gap:.5rem;
  height:7rem; z-index:0;
}
.tpl10 .t10-feature-illus span{
  display:block; width:1.1rem;
  background:var(--primary-light);
  border-radius:6px 6px 0 0;
  opacity:.85;
}
.tpl10 .t10-feature-illus span:nth-child(2n){ background:var(--accent); }
.tpl10 .t10-feature-illus span:nth-child(3n){ background:var(--gold); }

.tpl10 .t10-feature-body{ position:relative; z-index:1; }
.tpl10 .t10-feature-icon{
  width:4.6rem; height:4.6rem;
  background:var(--primary-mist); color:var(--primary);
  border-radius:16px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:1.8rem;
  margin-bottom:1.4rem;
  transform:rotate(-4deg);
  transition:.3s;
}
.tpl10 .t10-feature--big .t10-feature-icon{ background:var(--accent); color:var(--white); }
.tpl10 .t10-feature:hover .t10-feature-icon{ transform:rotate(4deg) scale(1.05); }
.tpl10 .t10-feature h3{
  font-size:1.7rem; font-weight:700;
  margin:0 0 .8rem; color:var(--t10-ink);
  font-family:'Trirong',serif;
}
.tpl10 .t10-feature--big h3{ font-size:2.2rem; }
.tpl10 .t10-feature p{
  font-family:'Open Sans',sans-serif; font-size:1.25rem;
  color:var(--t10-ink-soft); line-height:1.6; margin:0 0 1.2rem;
}
.tpl10 .t10-feature--big p{ font-size:1.4rem; }
.tpl10 .t10-feature-link{
  font-family:'Open Sans',sans-serif; font-weight:800;
  color:var(--accent); font-size:1.2rem;
  display:inline-flex; align-items:center; gap:.5rem;
  margin-top:auto;
  transition:gap .2s;
}
.tpl10 .t10-feature:hover .t10-feature-link{ gap:1rem; }

/* ============================================================
   7. WHY CHOOSE US ... "magic ingredients"
   ============================================================ */
.tpl10 .t10-why{
  background:var(--t10-rose);
  padding:7rem clamp(1.6rem,2.5vw,3rem);
  position:relative;
}
.tpl10 .t10-why-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1.8rem;
}
.tpl10 .t10-why-card{
  background:var(--white);
  border:2px solid var(--t10-line-soft);
  border-radius:24px;
  padding:2.6rem 2rem;
  text-align:center;
  position:relative;
  transition:.3s;
  box-shadow:0 10px 24px rgba(58,49,48,.06);
}
.tpl10 .t10-why-card:hover{ transform:translateY(-6px) rotate(1deg); box-shadow:0 18px 40px rgba(58,49,48,.12); }
.tpl10 .t10-why-icon{
  width:6rem; height:6rem;
  background:var(--t10-sun);
  color:var(--accent);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:2.2rem;
  margin:0 auto 1.4rem;
  border:3px dashed var(--accent);
  transition:.3s;
}
.tpl10 .t10-why-card:hover .t10-why-icon{ background:var(--accent); color:var(--white); transform:rotate(15deg); }
.tpl10 .t10-why-card h3{
  font-size:1.7rem; font-weight:700;
  margin:0 0 1rem; color:var(--t10-ink);
  font-family:'Trirong',serif;
}
.tpl10 .t10-why-card p{
  font-family:'Open Sans',sans-serif; font-size:1.25rem;
  color:var(--t10-ink-soft); line-height:1.6; margin:0;
}

/* ============================================================
   8. VIDEO ... polaroid frame
   ============================================================ */
.tpl10 .t10-video{
  background:var(--t10-cream);
  padding:7rem clamp(1.6rem,2.5vw,3rem);
}
.tpl10 .t10-video-grid{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:4rem; align-items:center;
}
.tpl10 .t10-video-frame{
  position:relative;
  background:var(--white); padding:1.2rem 1.2rem 3rem;
  border-radius:6px;
  box-shadow:0 24px 50px rgba(58,49,48,.15);
  transform:rotate(2deg); transition:transform .3s;
  cursor:pointer;
}
.tpl10 .t10-video-frame:hover{ transform:rotate(0deg) scale(1.02); }
.tpl10 .t10-video-frame img{
  width:100%; aspect-ratio:16/9; object-fit:cover;
  border-radius:3px; border:1px solid var(--t10-line);
}
.tpl10 .t10-video-play{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:6rem; height:6rem;
  background:var(--accent); color:var(--white);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:2rem;
  box-shadow:0 10px 26px rgba(var(--accent-rgb),.4);
  transition:.3s;
}
.tpl10 .t10-video-frame:hover .t10-video-play{ transform:translate(-50%,-50%) scale(1.1); }
.tpl10 .t10-video-caption{
  position:absolute; bottom:1rem; left:50%;
  transform:translateX(-50%);
  font-family:'Trirong',serif; font-style:italic;
  color:var(--t10-ink); font-size:1.3rem;
  white-space:nowrap;
}
.tpl10 .t10-video-text h2{
  font-size:clamp(2.4rem,3.6vw,3.4rem); font-weight:700;
  margin:0 0 1.4rem; line-height:1.2;
}
.tpl10 .t10-video-text p{
  font-family:'Open Sans',sans-serif; font-size:1.5rem;
  color:var(--t10-ink-soft); line-height:1.75; margin:0 0 2.4rem;
}

/* ============================================================
   9. FOUNDER'S LETTER
   ============================================================ */
.tpl10 .t10-founder{
  background:var(--t10-cream);
  padding:7rem clamp(1.6rem,2.5vw,3rem);
}
.tpl10 .t10-letter{ position:relative; max-width:78rem; margin:0 auto; }
.tpl10 .t10-letter-paper{
  background:var(--white);
  border:1.5px solid var(--t10-line-soft);
  border-radius:6px;
  padding:4rem 4.2rem;
  position:relative;
  background-image:
    linear-gradient(to right, transparent 0, transparent 3.4rem, rgba(var(--accent-rgb),.18) 3.4rem, rgba(var(--accent-rgb),.18) 3.5rem, transparent 3.5rem),
    repeating-linear-gradient(0deg, transparent 0, transparent 2.6rem, rgba(58,49,48,.06) 2.6rem, rgba(58,49,48,.06) 2.65rem);
  box-shadow:0 20px 50px rgba(58,49,48,.1);
  transform:rotate(-1deg);
}
.tpl10 .t10-letter-paper::before{
  content:''; position:absolute;
  top:0; left:3.4rem; bottom:0;
  width:1px; background:rgba(var(--accent-rgb),.35);
}
.tpl10 .t10-letter-tape{
  position:absolute; width:8rem; height:1.8rem;
  background:rgba(var(--gold-rgb),.6);
  box-shadow:0 2px 4px rgba(0,0,0,.08);
  z-index:2;
}
.tpl10 .t10-letter-tape--top{ top:-1rem; left:4rem; transform:rotate(-8deg); background:rgba(var(--accent-rgb),.4); }
.tpl10 .t10-letter-tape--bottom{ bottom:-1rem; right:4rem; transform:rotate(7deg); }
.tpl10 .t10-letter-head{ margin-bottom:2rem; }
.tpl10 .t10-letter-head h2{
  font-size:clamp(2.4rem,3.6vw,3.2rem); font-weight:700;
  margin:.8rem 0 0; line-height:1.2;
}
.tpl10 .t10-letter-body{
  font-family:'Trirong',serif; font-style:italic;
  font-size:1.7rem; color:var(--t10-ink);
  line-height:2.2; margin:0 0 2.4rem;
  padding-left:1rem;
}
.tpl10 .t10-letter-sign{
  display:flex; align-items:center; gap:1.6rem;
  padding-top:2rem; border-top:2px dashed var(--t10-line-soft);
  position:relative;
}
.tpl10 .t10-letter-avatar{
  flex:0 0 5.6rem; height:5.6rem;
  background:var(--primary); color:var(--white);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:'Trirong',serif; font-size:2.4rem; font-weight:700;
  border:3px solid #fff;
  box-shadow:0 6px 14px rgba(58,49,48,.15);
}
.tpl10 .t10-letter-meta{ flex:1; }
.tpl10 .t10-letter-meta h3{
  font-size:1.6rem; font-weight:700; margin:0; color:var(--t10-ink);
  font-family:'Trirong',serif;
}
.tpl10 .t10-letter-meta p{
  font-family:'Open Sans',sans-serif; font-size:1.2rem;
  color:var(--t10-ink-soft); margin:.2rem 0 .4rem;
}
.tpl10 .t10-letter-stars{ color:var(--gold); font-size:1.1rem; display:flex; gap:.2rem; }
.tpl10 .t10-letter-scribble{
  position:absolute; bottom:.5rem; right:0;
  width:8rem; height:3rem; color:var(--accent);
  pointer-events:none;
}

/* ============================================================
   10. NEWS & EVENTS ... "Latest Chapters" polaroid cards
   ============================================================ */
.tpl10 .t10-news{
  background:var(--t10-sky);
  padding:7rem clamp(1.6rem,2.5vw,3rem);
  position:relative;
}
.tpl10 .t10-news-grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:2.2rem;
}
.tpl10 .t10-news-card{
  background:var(--white);
  border:2px solid var(--t10-line-soft);
  border-radius:24px;
  overflow:hidden;
  text-decoration:none; color:inherit;
  display:flex; flex-direction:column;
  transition:.3s;
  box-shadow:0 12px 28px rgba(58,49,48,.08);
  position:relative;
}
.tpl10 .t10-news-card:hover{ transform:translateY(-6px); box-shadow:0 20px 44px rgba(58,49,48,.14); border-color:var(--accent); }
.tpl10 .t10-news-img{
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
  background:var(--t10-line-soft);
}
.tpl10 .t10-news-img img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .5s;
}
.tpl10 .t10-news-card:hover .t10-news-img img{ transform:scale(1.06); }
.tpl10 .t10-news-pin{
  position:absolute; top:.8rem; left:50%;
  transform:translateX(-50%);
  width:1.2rem; height:1.2rem;
  background:var(--accent); border-radius:50%;
  box-shadow:0 0 0 4px #fff, 0 4px 8px rgba(0,0,0,.15);
  z-index:2;
}
.tpl10 .t10-news-date{
  position:absolute; bottom:1rem; left:1rem;
  background:var(--t10-cream);
  border:1.5px solid var(--t10-line);
  border-radius:12px;
  padding:.5rem .9rem;
  text-align:center; line-height:1;
  z-index:1;
  box-shadow:0 4px 10px rgba(58,49,48,.1);
}
.tpl10 .t10-news-date strong{
  display:block; font-family:'Trirong',serif;
  font-size:1.6rem; color:var(--t10-ink);
}
.tpl10 .t10-news-date span{
  display:block; font-family:'Open Sans',sans-serif;
  font-size:1rem; color:var(--t10-ink-soft);
  font-weight:800; text-transform:uppercase; letter-spacing:.08em;
  margin-top:.2rem;
}
.tpl10 .t10-news-body{ padding:2rem 1.8rem 2.2rem; }
.tpl10 .t10-news-tag{
  display:inline-flex; align-items:center; gap:.4rem;
  background:var(--t10-sun); color:var(--accent);
  font-family:'Open Sans',sans-serif; font-weight:800;
  font-size:1.05rem; text-transform:uppercase; letter-spacing:.08em;
  padding:.3rem .9rem; border-radius:999px;
  margin-bottom:1rem;
}
.tpl10 .t10-news-body h3{
  font-size:1.7rem; font-weight:700;
  margin:0 0 .8rem; color:var(--t10-ink);
  font-family:'Trirong',serif;
  line-height:1.3;
}
.tpl10 .t10-news-body p{
  font-family:'Open Sans',sans-serif; font-size:1.25rem;
  color:var(--t10-ink-soft); line-height:1.6; margin:0 0 1.2rem;
}
.tpl10 .t10-news-link{
  font-family:'Open Sans',sans-serif; font-weight:800;
  color:var(--accent); font-size:1.2rem;
  display:inline-flex; align-items:center; gap:.5rem;
  transition:gap .2s;
}
.tpl10 .t10-news-card:hover .t10-news-link{ gap:1rem; }

/* ============================================================
   11. ACADEMIC SHOWCASE ... "shelf" with report / yearbook / gallery
   ============================================================ */
.tpl10 .t10-showcase{
  background:var(--t10-cream);
  padding:7rem clamp(1.6rem,2.5vw,3rem);
}
.tpl10 .t10-showcase-grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:2rem;
}
.tpl10 .t10-show-card{
  background:var(--white);
  border:2px solid var(--t10-line-soft);
  border-radius:24px;
  overflow:hidden;
  text-decoration:none; color:inherit;
  display:flex; flex-direction:column;
  transition:.3s;
  box-shadow:0 12px 28px rgba(58,49,48,.08);
}
.tpl10 .t10-show-card:hover{ transform:translateY(-6px); box-shadow:0 22px 48px rgba(58,49,48,.14); border-color:var(--accent); }
.tpl10 .t10-show-visual{
  background:var(--t10-peach);
  padding:2rem;
  position:relative;
  display:flex; align-items:center; justify-content:center;
  min-height:22rem;
}
.tpl10 .t10-show-visual--book{ background:var(--primary-mist); }
.tpl10 .t10-show-visual--gallery{ background:var(--t10-rose); }

/* Report sheet mock */
.tpl10 .t10-report{
  background:var(--white); width:100%;
  border-radius:6px;
  box-shadow:0 10px 24px rgba(58,49,48,.15);
  padding:.8rem;
  transform:rotate(-2deg);
  transition:transform .3s;
}
.tpl10 .t10-show-card:hover .t10-report{ transform:rotate(0deg) scale(1.03); }
.tpl10 .t10-report-band{ display:flex; align-items:center; gap:.5rem; padding-bottom:.4rem; border-bottom:1.5px solid var(--t10-line); }
.tpl10 .t10-report-logo{ width:1.4rem; height:1.4rem; background:var(--primary); border-radius:50%; flex-shrink:0; }
.tpl10 .t10-report-lines{ flex:1; display:flex; flex-direction:column; gap:.2rem; }
.tpl10 .t10-report-line{ height:.5rem; background:var(--t10-line); border-radius:2px; }
.tpl10 .t10-report-line--sm{ height:.4rem; background:#d4d7dc; }
.tpl10 .t10-report-stamp{ width:1.4rem; height:1.4rem; border:1.5px solid var(--accent); border-radius:50%; flex-shrink:0; }
.tpl10 .t10-report-title{ height:.7rem; background:var(--primary); border-radius:2px; margin:.5rem 0 .4rem; }
.tpl10 .t10-report-info{ display:flex; gap:.4rem; margin-bottom:.5rem; }
.tpl10 .t10-report-info .t10-report-line{ background:#d4d7dc; }
.tpl10 .t10-report-badges{ display:flex; gap:.4rem; margin-bottom:.5rem; }
.tpl10 .t10-report-badge{
  font-family:'Trirong',serif; font-weight:700;
  font-size:.65rem; padding:.15rem .4rem; border-radius:3px;
  color:var(--white); letter-spacing:.04em;
}
.tpl10 .t10-report-badge--gold{ background:var(--gold); color:#3a3130; }
.tpl10 .t10-report-badge--ink{ background:var(--primary); }
.tpl10 .t10-report-table{ display:flex; flex-direction:column; gap:.15rem; }
.tpl10 .t10-report-row{ display:flex; gap:.15rem; }
.tpl10 .t10-report-cell{ height:.55rem; border-radius:1px; background:var(--t10-line); }
.tpl10 .t10-report-cell--label{ background:#d4d7dc; }
.tpl10 .t10-report-cell--total{ background:#bcc0c7; }
.tpl10 .t10-report-cell--grade{ height:.7rem; }

/* Yearbook mock */
.tpl10 .t10-book{ position:relative; width:11rem; height:15rem; transform:rotate(2deg); transition:transform .3s; }
.tpl10 .t10-show-card:hover .t10-book{ transform:rotate(0deg) scale(1.05); }
.tpl10 .t10-book-spine{
  position:absolute; top:0; left:0; width:.5rem; height:100%;
  background:linear-gradient(90deg,var(--primary),rgba(var(--primary-rgb),.5));
  border-radius:3px 0 0 3px;
}
.tpl10 .t10-book-cover{
  position:absolute; top:0; left:.5rem; right:0; bottom:0;
  background:var(--primary); color:var(--white);
  border-radius:0 4px 4px 0;
  padding:1rem;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  box-shadow:inset 0 0 30px rgba(0,0,0,.18), 0 10px 24px rgba(58,49,48,.2);
  overflow:hidden;
}
.tpl10 .t10-book-rings{
  position:absolute; top:.8rem; left:50%; transform:translateX(-50%);
  display:flex; gap:.5rem;
}
.tpl10 .t10-book-rings span{
  display:block; width:.5rem; height:.5rem;
  border:1.5px solid rgba(255,255,255,.4);
  border-radius:50%;
}
.tpl10 .t10-book-year{
  font-family:'Trirong',serif; font-weight:700;
  font-size:1.6rem; color:var(--gold);
  margin-bottom:.2rem; letter-spacing:.05em;
}
.tpl10 .t10-book-title{
  font-family:'Trirong',serif; font-weight:700;
  font-size:1.05rem; letter-spacing:.12em;
  border-top:1px solid rgba(255,255,255,.3);
  border-bottom:1px solid rgba(255,255,255,.3);
  padding:.3rem 0; margin-bottom:.2rem; width:100%;
}
.tpl10 .t10-book-sub{ font-family:'Open Sans',sans-serif; font-size:.7rem; opacity:.8; }
.tpl10 .t10-book-doodle{ position:absolute; border-radius:50%; background:rgba(255,255,255,.12); }
.tpl10 .t10-book-doodle--1{ width:2.5rem; height:2.5rem; top:-.5rem; right:-.5rem; }
.tpl10 .t10-book-doodle--2{ width:1.6rem; height:1.6rem; bottom:1rem; left:.5rem; background:rgba(var(--gold-rgb),.4); }
.tpl10 .t10-book-doodle--3{ width:1rem; height:1rem; bottom:2rem; right:1rem; background:rgba(255,255,255,.18); }
.tpl10 .t10-book-edge{
  position:absolute; right:-3px; top:0; bottom:0;
  width:3px; background:repeating-linear-gradient(0deg,var(--primary-dark) 0 2px,var(--primary) 2px 4px);
  border-radius:0 2px 2px 0;
}

/* Gallery single */
.tpl10 .t10-gallery-single{
  position:relative; width:14rem; height:14rem;
  background:var(--white);
  padding:.6rem .6rem 2.4rem;
  border-radius:4px;
  box-shadow:0 10px 24px rgba(58,49,48,.15);
  transform:rotate(3deg); transition:transform .3s;
}
.tpl10 .t10-show-card:hover .t10-gallery-single{ transform:rotate(0deg) scale(1.05); }
.tpl10 .t10-gallery-single img{ width:100%; height:100%; object-fit:cover; border-radius:2px; }
.tpl10 .t10-gallery-tape{
  position:absolute; top:-.6rem; left:50%; transform:translateX(-50%) rotate(-2deg);
  width:5rem; height:1.2rem;
  background:rgba(var(--gold-rgb),.6);
  box-shadow:0 2px 4px rgba(0,0,0,.08);
}
.tpl10 .t10-gallery-caption{
  position:absolute; bottom:.6rem; left:50%; transform:translateX(-50%);
  font-family:'Trirong',serif; font-style:italic;
  font-size:.95rem; color:var(--t10-ink);
  white-space:nowrap;
  display:inline-flex; align-items:center; gap:.3rem;
}
.tpl10 .t10-gallery-caption i{ color:var(--accent); }

.tpl10 .t10-show-body{ padding:2.2rem 2rem 2.4rem; }
.tpl10 .t10-show-tag{
  display:inline-flex; align-items:center; gap:.4rem;
  background:var(--primary-mist); color:var(--primary);
  font-family:'Open Sans',sans-serif; font-weight:800;
  font-size:1.05rem; text-transform:uppercase; letter-spacing:.08em;
  padding:.3rem .9rem; border-radius:999px;
  margin-bottom:1rem;
}
.tpl10 .t10-show-body h3{
  font-size:1.8rem; font-weight:700;
  margin:0 0 1rem; color:var(--t10-ink);
  font-family:'Trirong',serif;
}
.tpl10 .t10-show-body p{
  font-family:'Open Sans',sans-serif; font-size:1.25rem;
  color:var(--t10-ink-soft); line-height:1.6; margin:0 0 1.4rem;
}
.tpl10 .t10-show-link{
  font-family:'Open Sans',sans-serif; font-weight:800;
  color:var(--accent); font-size:1.2rem;
  display:inline-flex; align-items:center; gap:.5rem;
  transition:gap .2s;
}
.tpl10 .t10-show-card:hover .t10-show-link{ gap:1rem; }

/* ============================================================
   12. NEWSLETTER / CTA ... "Stay in the Storybook"
   ============================================================ */
.tpl10 .t10-cta{
  background:linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 55%, var(--primary-light) 100%);
  border-radius:36px;
  margin:0 clamp(1.6rem,2.5vw,2.4rem) 6rem clamp(1.6rem,2.5vw,2.4rem);
  padding:6rem clamp(1.8rem,3vw,4rem);
  position:relative; overflow:hidden;
  color:var(--white);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 20px 50px rgba(var(--primary-deeper-rgb),.22);
}
.tpl10 .t10-cta-doodle{ position:absolute; border-radius:50%; background:rgba(255,255,255,.08); pointer-events:none; }
.tpl10 .t10-cta-doodle--1{ width:24rem; height:24rem; top:-8rem; right:-6rem; }
.tpl10 .t10-cta-doodle--2{ width:18rem; height:18rem; bottom:-8rem; left:-6rem; background:rgba(255,255,255,.05); }
.tpl10 .t10-cta-grid{
  display:grid; grid-template-columns:1.1fr .9fr;
  gap:4rem; align-items:center;
  position:relative; z-index:1;
}
.tpl10 .t10-cta-text h2{
  font-size:clamp(2.6rem,4vw,3.6rem); font-weight:700;
  margin:0 0 1.4rem; line-height:1.15;
  color: var(--white);
}
.tpl10 .t10-cta .t10-accent-soft{ color: var(--gold-bright); }
.tpl10 .t10-cta-text p{
  font-family:'Open Sans',sans-serif; font-size:1.5rem;
  color: var(--white); opacity:1; line-height:1.7; margin:0 0 2.4rem;
  max-width:42rem;
}
.tpl10 .t10-cta-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.tpl10 .t10-cta-stats > div{
  background:rgba(255,255,255,.1);
  border:1.5px dashed rgba(255,255,255,.3);
  border-radius:16px;
  padding:1.2rem 1rem;
  text-align:center;
}
.tpl10 .t10-cta-stats strong{
  display:block; font-family:'Trirong',serif;
  font-size:1.8rem; color:var(--gold-bright);
  margin-bottom:.2rem;
}
.tpl10 .t10-cta-stats span{
  display:block; font-family:'Open Sans',sans-serif;
  font-size:1.1rem; color: var(--white); opacity:1;
}

.tpl10 .t10-cta-form{
  background:var(--white); color:var(--t10-ink);
  border-radius:24px;
  padding:3rem 2.8rem;
  box-shadow:0 24px 50px rgba(0,0,0,.18);
  border:4px solid #fff;
  position:relative;
}
.tpl10 .t10-cta-form::before{
  content:''; position:absolute;
  top:-1.2rem; left:2.4rem;
  width:6rem; height:1.6rem;
  background:rgba(var(--gold-rgb),.6);
  transform:rotate(-6deg);
  box-shadow:0 2px 4px rgba(0,0,0,.1);
}
.tpl10 .t10-cta-form h3{
  font-size:1.8rem; font-weight:700;
  margin:0 0 1.6rem; color:var(--primary);
  display:flex; align-items:center; gap:.6rem;
  font-family:'Trirong',serif;
}
.tpl10 .t10-cta-input{
  width:100%;
  padding:1.4rem 1.6rem;
  border:2px solid var(--t10-line);
  border-radius:14px;
  font-family:'Open Sans',sans-serif; font-size:1.4rem;
  color:var(--t10-ink);
  margin-bottom:1.2rem;
  background:var(--t10-cream);
  transition:.2s;
}
.tpl10 .t10-cta-input:focus{
  outline:none;
  border-color:var(--accent);
  background:var(--white);
  box-shadow:0 0 0 4px rgba(var(--accent-rgb),.15);
}
.tpl10 .t10-cta-submit{
  width:100%;
  background:var(--accent); color:var(--white);
  border:none; border-radius:14px;
  padding:1.4rem 2rem;
  font-family:'Open Sans',sans-serif;
  font-weight:800; font-size:1.4rem;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:.8rem;
  transition:.25s;
  box-shadow:0 10px 24px rgba(var(--accent-rgb),.4);
}
.tpl10 .t10-cta-submit:hover{ transform:translateY(-2px); box-shadow:0 16px 32px rgba(var(--accent-rgb),.5); }
.tpl10 .t10-cta-foot{
  font-family:'Open Sans',sans-serif; font-size:1.1rem;
  color:var(--t10-ink-soft); text-align:center;
  margin:1.2rem 0 0; display:flex; align-items:center; justify-content:center; gap:.4rem;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1199px){
  .tpl10 .t10-hero-trust{ grid-template-columns:repeat(3,1fr) !important; }
  .tpl10 .t10-why-grid{ grid-template-columns:repeat(2,1fr); }
  .tpl10 .t10-features-wrap{ grid-template-columns:repeat(2,1fr); grid-auto-rows:auto; }
  .tpl10 .t10-feature--big{ grid-column:span 2; grid-row:auto; }
  .tpl10 .t10-feature--wide{ grid-column:span 2; }
  .tpl10 .t10-feature-illus{ display:none; }
}
@media(max-width:991px){
  .tpl10 .t10-hero{ padding:5rem 0 0; }
  .tpl10 .t10-hero-grid{ grid-template-columns:1fr; gap:3rem; padding-bottom:5rem; }
  .tpl10 .t10-hero-cta{ flex-wrap:nowrap !important; gap:1rem !important; }
  .tpl10 .t10-hero-cta .t10-btn{ flex:1 1 0; min-width:0; justify-content:center; white-space:nowrap; }
  .tpl10 .t10-hero-trust{ grid-template-columns:repeat(3,1fr) !important; }
  .tpl10 .t10-sticker--3{ display:none; }
  .tpl10 .t10-vm-grid{ grid-template-columns:1fr; }
  .tpl10 .t10-stats-grid{ grid-template-columns:repeat(3,1fr) !important; }
  .tpl10 .t10-news-grid{ grid-template-columns:1fr 1fr; }
  .tpl10 .t10-showcase-grid{ grid-template-columns:1fr; }
  .tpl10 .t10-video-grid{ grid-template-columns:1fr; }
  .tpl10 .t10-cta-grid{ grid-template-columns:1fr; gap:2.6rem; }
  .tpl10 .t10-chapter-row,
  .tpl10 .t10-chapter-row:nth-child(even){ flex-direction:column; text-align:center; }
  .tpl10 .t10-chapter-num{ flex:none; font-size:4.8rem; }
  .tpl10 .t10-chapter-card{ flex-direction:column; text-align:center; align-items:center; padding:2.4rem 2rem; }
  .tpl10 .t10-chapter-card::before{ right:50%; transform:translateX(50%); }
  .tpl10 .t10-chapter-tags{ justify-content:center; }
  .tpl10 .t10-letter-paper{ padding:3rem 2.4rem; }
}
@media(max-width:768px){
  /* ── Global compacting ── avoid long scroll: tighter sections + smaller heads */
  .tpl10 .t10-container{ padding:0 1.6rem; }
  .tpl10 .t10-head{ margin-bottom:2.8rem; }
  .tpl10 .t10-head h2{ font-size:clamp(2.2rem,6vw,2.8rem); }
  .tpl10 .t10-head p{ font-size:1.35rem; line-height:1.65; }
  .tpl10 .t10-chapters,
  .tpl10 .t10-vm,
  .tpl10 .t10-values,
  .tpl10 .t10-stats,
  .tpl10 .t10-features,
  .tpl10 .t10-why,
  .tpl10 .t10-video,
  .tpl10 .t10-founder,
  .tpl10 .t10-news,
  .tpl10 .t10-showcase{ padding:4rem 1.6rem; }
  .tpl10 .t10-wave svg{ height:4rem; }
  /* ── HERO ── */
  .tpl10 .t10-hero{ padding:4rem 0 0; }
  .tpl10 .t10-hero h1{ font-size:clamp(2.6rem,7vw,3.4rem); margin:1.4rem 0 1rem; }
  .tpl10 .t10-hero-tag{ font-size:1.35rem; }
  .tpl10 .t10-hero-desc{ font-size:1.35rem; line-height:1.6; margin-bottom:1.8rem; }
  .tpl10 .t10-hero-cta{ flex-wrap:nowrap !important; gap:.8rem !important; width:100%; }
  .tpl10 .t10-hero-cta .t10-btn{ flex:1 1 0; min-width:0; padding:1.1rem .9rem !important; font-size:1.15rem !important; white-space:nowrap; justify-content:center; }
  .tpl10 .t10-hero-trust{ grid-template-columns:repeat(3,1fr) !important; gap:.8rem; padding-top:1.6rem; }
  .tpl10 .t10-trust{ flex-direction:column; text-align:center; gap:.35rem; }
  .tpl10 .t10-trust i{ width:3rem; height:3rem; font-size:1.25rem; }
  .tpl10 .t10-trust strong{ font-size:1.1rem; }
  .tpl10 .t10-trust span{ font-size:.88rem; line-height:1.3; }
  .tpl10 .t10-hero-frame{ padding:1rem 1rem 3rem; }
  .tpl10 .t10-hero-frame img{ aspect-ratio:4/3; }
  .tpl10 .t10-fairy-lights,.tpl10 .t10-spark{ display:none; }
  .tpl10 .t10-orb{ opacity:.18; filter:blur(40px); }
  /* ── CHAPTERS ── compact stacked but not stretched */
  .tpl10 .t10-chapter-row{ gap:1.6rem; margin-bottom:2rem; }
  .tpl10 .t10-chapter-card{ padding:2rem 1.6rem; gap:1.4rem; border-radius:18px; }
  .tpl10 .t10-chapter-icon{ flex:0 0 5rem; height:5rem; font-size:2rem; }
  .tpl10 .t10-chapter-card h4{ font-size:1.7rem; }
  .tpl10 .t10-chapter-card p{ font-size:1.3rem; line-height:1.6; }
  /* ── VISION / MISSION ── */
  .tpl10 .t10-vm-card{ padding:2.4rem 1.8rem 2rem; border-radius:20px; }
  .tpl10 .t10-vm-card h3{ font-size:1.85rem; }
  .tpl10 .t10-vm-card > p{ font-size:1.35rem; line-height:1.65; }
  .tpl10 .t10-vm-list{ gap:.8rem; }
  .tpl10 .t10-vm-list li{ padding:1rem 1.2rem; }
  /* ── VALUES ── keep 2 columns (avoids 6-row scroll AND avoids 3-col squeeze) */
  .tpl10 .t10-values-grid{ grid-template-columns:repeat(2,1fr) !important; gap:1.2rem; }
  .tpl10 .t10-value-card{ padding:2rem 1.4rem 1.8rem; border-radius:18px; }
  .tpl10 .t10-value-card i{ width:5rem; height:5rem; font-size:2.2rem; margin-bottom:.8rem; }
  .tpl10 .t10-value-card span{ font-size:1.25rem; }
  /* ── STATS ── horizontal snap (1 row instead of 3 rows = −66% scroll) */
  .tpl10 .t10-stats-grid{
    display:flex !important; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden;
    gap:1.2rem; padding-bottom:.8rem; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .tpl10 .t10-stats-grid::-webkit-scrollbar{ display:none; }
  .tpl10 .t10-stats-grid .t10-stat-bubble{ flex:0 0 78%; scroll-snap-align:start; scroll-snap-stop:always; }
  .tpl10 .t10-stat-bubble{ padding:2rem 1.4rem 1.8rem; border-radius:22px; }
  .tpl10 .t10-stat-icon{ width:4.2rem; height:4.2rem; font-size:1.5rem; margin-bottom:.8rem; }
  .tpl10 .t10-stat-bubble strong{ font-size:2.6rem; }
  .tpl10 .t10-stat-bubble > span{ font-size:1.1rem; }
  .tpl10 .t10-stat-bubble p{ font-size:1.15rem; }
  /* ── FEATURES (portal) ── horizontal snap instead of 6-row stack */
  .tpl10 .t10-features-wrap{
    display:flex !important; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden;
    gap:1.2rem; padding-bottom:.8rem; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; scrollbar-width:none; grid-template-columns:none !important; grid-auto-rows:auto !important;
  }
  .tpl10 .t10-features-wrap::-webkit-scrollbar{ display:none; }
  .tpl10 .t10-features-wrap .t10-feature{ flex:0 0 82%; scroll-snap-align:start; scroll-snap-stop:always; grid-column:auto !important; grid-row:auto !important; min-height:20rem; }
  .tpl10 .t10-feature::before{ display:none; }
  .tpl10 .t10-feature h3{ font-size:1.6rem; }
  .tpl10 .t10-feature--big h3{ font-size:1.7rem; }
  /* ── WHY ── horizontal snap (4 cards → 1 row) */
  .tpl10 .t10-why-grid{
    display:flex !important; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden;
    gap:1.2rem; padding-bottom:.8rem; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .tpl10 .t10-why-grid::-webkit-scrollbar{ display:none; }
  .tpl10 .t10-why-grid .t10-why-card{ flex:0 0 76%; scroll-snap-align:start; scroll-snap-stop:always; }
  .tpl10 .t10-why-card{ padding:2rem 1.6rem; border-radius:18px; }
  /* ── NEWS ── horizontal snap (3 cards → 1 row) */
  .tpl10 .t10-news-grid{
    display:flex !important; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden;
    gap:1.4rem; padding-bottom:.8rem; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .tpl10 .t10-news-grid::-webkit-scrollbar{ display:none; }
  .tpl10 .t10-news-grid .t10-news-card{ flex:0 0 84%; scroll-snap-align:start; scroll-snap-stop:always; }
  .tpl10 .t10-news-img{ aspect-ratio:16/10; }
  /* ── SHOWCASE ── horizontal snap (3 cards → 1 row) */
  .tpl10 .t10-showcase-grid{
    display:flex !important; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden;
    gap:1.4rem; padding-bottom:.8rem; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .tpl10 .t10-showcase-grid::-webkit-scrollbar{ display:none; }
  .tpl10 .t10-showcase-grid .t10-show-card{ flex:0 0 84%; scroll-snap-align:start; scroll-snap-stop:always; }
  .tpl10 .t10-show-visual{ min-height:18rem; padding:1.6rem; }
  /* ── VIDEO ── already stacked; tighten */
  .tpl10 .t10-video-grid{ gap:2rem; }
  .tpl10 .t10-video-text h2{ font-size:2.2rem; }
  .tpl10 .t10-video-text p{ font-size:1.35rem; line-height:1.65; margin-bottom:1.6rem; }
  /* ── FOUNDER LETTER ── reduce line-height & padding to avoid huge scroll */
  .tpl10 .t10-letter-paper{ padding:2.2rem 1.6rem 1.8rem; transform:rotate(0); background-position:0 0; }
  .tpl10 .t10-letter-body{ font-size:1.45rem; line-height:1.7; padding-left:.6rem; }
  .tpl10 .t10-letter-tape{ width:5rem; height:1.4rem; }
  .tpl10 .t10-letter-sign{ flex-direction:row; text-align:left; flex-wrap:wrap; gap:1.2rem; }
  .tpl10 .t10-letter-scribble{ position:relative; width:6rem; bottom:auto; right:auto; margin-left:auto; }
  /* ── CTA ── keep 3-col stats (compact) not 1-col stack */
  .tpl10 .t10-cta{ margin:0 1.2rem 3rem; padding:3rem 1.6rem; border-radius:20px; }
  .tpl10 .t10-cta-text h2{ font-size:2.2rem; }
  .tpl10 .t10-cta-text p{ font-size:1.32rem; line-height:1.6; margin-bottom:1.6rem; }
  .tpl10 .t10-cta-stats{ grid-template-columns:repeat(3,1fr) !important; gap:.8rem; }
  .tpl10 .t10-cta-stats > div{ padding:.9rem .6rem; }
  .tpl10 .t10-cta-stats strong{ font-size:1.45rem; }
  .tpl10 .t10-cta-stats span{ font-size:.95rem; }
  .tpl10 .t10-cta-form{ padding:2rem 1.6rem; border-width:3px; }
  .tpl10 .t10-cta-form h3{ font-size:1.6rem; }
  .tpl10 .t10-cta-input{ padding:1.2rem 1.4rem; font-size:1.3rem; }
  .tpl10 .t10-sticker{ display:none; }
}
@media(max-width:480px){
  .tpl10 .t10-hero h1{ font-size:clamp(2.4rem,8vw,3rem); }
  .tpl10 .t10-hero-cta{ flex-direction:row !important; flex-wrap:nowrap !important; gap:.5rem !important; }
  .tpl10 .t10-hero-cta .t10-btn{ flex:1 1 0; min-width:0; width:auto; padding:.9rem .6rem !important; font-size:.98rem !important; gap:.4rem; white-space:nowrap; justify-content:center; }
  .tpl10 .t10-hero-trust{ gap:.4rem; grid-template-columns:repeat(3,1fr) !important; }
  .tpl10 .t10-hero-trust .t10-trust{ padding:.15rem; }
  .tpl10 .t10-trust i{ width:2.6rem !important; height:2.6rem !important; font-size:1.05rem !important; }
  .tpl10 .t10-trust strong{ font-size:.95rem !important; }
  .tpl10 .t10-trust span{ font-size:.78rem !important; }
  .tpl10 .t10-values-grid{ gap:.9rem; }
  .tpl10 .t10-value-card{ padding:1.6rem 1rem 1.4rem; }
  .tpl10 .t10-value-card i{ width:4.2rem; height:4.2rem; font-size:1.9rem; }
  .tpl10 .t10-stats-grid .t10-stat-bubble{ flex:0 0 84%; }
  .tpl10 .t10-features-wrap .t10-feature{ flex:0 0 88%; }
  .tpl10 .t10-why-grid .t10-why-card{ flex:0 0 84%; }
  .tpl10 .t10-news-grid .t10-news-card{ flex:0 0 88%; }
  .tpl10 .t10-showcase-grid .t10-show-card{ flex:0 0 88%; }
  .tpl10 .t10-cta-stats{ gap:.6rem; }
  .tpl10 .t10-cta-stats strong{ font-size:1.25rem; }
  .tpl10 .t10-letter-sign{ flex-direction:column; text-align:center; }
  .tpl10 .t10-letter-body{ font-size:1.35rem; line-height:1.65; }
}
@media(max-width:400px){
  .tpl10 .t10-hero-cta{ gap:.4rem !important; }
  .tpl10 .t10-hero-cta .t10-btn{ padding:.85rem .45rem !important; font-size:.9rem !important; }
  .tpl10 .t10-hero-trust{ gap:.3rem !important; }
  .tpl10 .t10-hero-trust .t10-trust i{ width:2.4rem !important; height:2.4rem !important; }
}
/* =====================================================
   MODALS ... Notification + Newsletter
   Used by inc/footer.inc.php (#modalnews, #modalnewsletter)
   All colours come from the dynamic theme variables
   so they re-skin automatically with the school brand.
   ===================================================== */

/* ... Lock body scroll when any modal is open ... */
.nl-modal-open{ overflow:hidden; position:fixed; width:100%; }

/* ... Backdrop + container ... */
.nl-modal{
  position:fixed;
  inset:0;
  z-index:10000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:2rem;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  opacity:0;
  transition:opacity .25s ease;
}
.nl-modal.is-open{
  display:flex;
  opacity:1;
}
.nl-modal-backdrop{
  position:absolute;
  inset:0;
  cursor:pointer;
  z-index:0;
}

/* ... The actual modal box ... */
.nl-modal-box{
  position:relative;
  z-index:1;
  background:var(--white);
  border-radius:24px;
  box-shadow:0 30px 80px rgba(0,0,0,.35), 0 8px 20px rgba(0,0,0,.15);
  width:100%;
  max-width:900px;
  max-height:calc(100vh - 4rem);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transform:translateY(20px) scale(.96);
  transition:transform .35s cubic-bezier(.34,1.56,.64,1);
}
.nl-modal.is-open .nl-modal-box{
  transform:translateY(0) scale(1);
}
.nl-modal-box--sm{
  max-width:480px;
}

/* ... Close button ... */
.nl-modal-close{
  position:absolute;
  top:1rem;
  right:1rem;
  z-index:10;
  width:4.2rem;
  height:4.2rem;
  border-radius:50%;
  border:2px solid #fff;
  background:var(--accent);
  color:var(--white);
  font-size:1.7rem;
  font-weight:700;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:.25s;
  box-shadow:0 6px 18px rgba(var(--accent-rgb),.55), 0 0 0 4px rgba(var(--accent-rgb),.18);
}
.nl-modal-close:hover{
  background:var(--accent-dark);
  color:var(--white);
  transform:rotate(90deg) scale(1.08);
  box-shadow:0 10px 24px rgba(var(--accent-rgb),.65), 0 0 0 6px rgba(var(--accent-rgb),.22);
}
.nl-modal-close:active{
  transform:rotate(90deg) scale(.95);
}
.nl-modal-box--sm .nl-modal-close{ background:var(--accent); color:var(--white); }
.nl-modal-box--sm .nl-modal-close:hover{ background:var(--accent-dark); color:var(--white); }

/* ... Notification (small) modal ... centred content layout ... */
.nl-modal-content--centered{
  padding:3.6rem 3rem 3rem;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.nl-modal-icon-wrap{
  width:7rem;
  height:7rem;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:2.6rem;
  margin-bottom:1.6rem;
}
.nl-modal-icon-wrap--danger{
  background:rgba(var(--accent-rgb),.14);
  color:var(--accent);
  position:relative;
}
.nl-modal-icon-wrap--danger::before{
  content:'';
  position:absolute;
  inset:-6px;
  border-radius:50%;
  border:2px solid rgba(var(--accent-rgb),.25);
  animation:nl-pulse 1.8s ease-out infinite;
}
@keyframes nl-pulse{
  0%{ transform:scale(.95); opacity:1; }
  100%{ transform:scale(1.4); opacity:0; }
}

.nl-modal-eyebrow{
  display:inline-block;
  font-family:var(--font-body);
  font-size:1.1rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--gray-600);
  background:var(--gray-100);
  padding:.5rem 1.2rem;
  border-radius:999px;
  margin-bottom:1.2rem;
}
.nl-modal-eyebrow--danger{
  background:rgba(var(--accent-rgb),.14);
  color:var(--accent);
}
.nl-modal-title{
  font-size:1.9rem;
  font-weight:800;
  color:var(--gray-900);
  margin:0 0 1rem;
  font-family:var(--font-heading);
  line-height:1.25;
}
.nl-modal-excerpt{
  font-size:1.4rem;
  color:var(--gray-700);
  line-height:1.7;
  margin:0 0 2rem;
}
.nl-modal-excerpt--empty{
  color:var(--gray-500);
  font-style:italic;
  background:var(--gray-50);
  padding:1.4rem 1.6rem;
  border-radius:12px;
  border:1.5px dashed var(--gray-200);
}
.nl-modal-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.8rem;
  padding:1.3rem 3rem;
  border-radius:999px;
  font-family:var(--font-body);
  font-size:1.4rem;
  font-weight:800;
  cursor:pointer;
  border:none;
  background:var(--primary);
  color:var(--white);
  transition:.25s;
  box-shadow:0 8px 20px rgba(var(--primary-rgb),.35);
}
.nl-modal-btn:hover{
  background:var(--primary-dark);
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(var(--primary-rgb),.45);
}
.nl-modal-btn--danger{
  background:var(--accent);
  box-shadow:0 8px 20px rgba(var(--accent-rgb),.35);
}
.nl-modal-btn--danger:hover{
  background:var(--accent-dark);
  box-shadow:0 12px 28px rgba(var(--accent-rgb),.5);
}

/* ... Newsletter modal ... split layout ... */
.nl-modal-grid{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  max-height:calc(100vh - 4rem);
}

/* Left hero column */
.nl-modal-hero{
  position:relative;
  background:linear-gradient(160deg,var(--primary) 0%,var(--primary-dark) 100%);
  color:var(--white);
  overflow:auto;
  padding:3.6rem 3rem;
  overflow:hidden;
  display:flex;
  align-items:flex-start;
}
.nl-modal-hero-bg{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 20% 20%,rgba(var(--gold-rgb),.18) 0%,transparent 50%),
    radial-gradient(circle at 80% 80%,rgba(var(--accent-rgb),.18) 0%,transparent 50%);
  pointer-events:none;
}
.nl-modal-hero-deco{
  position:absolute;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  pointer-events:none;
}
.nl-modal-hero-deco--1{
  width:18rem;height:18rem;
  top:-6rem;right:-6rem;
  background:radial-gradient(circle,var(--gold) 0%,transparent 70%);
  opacity:.25;
}
.nl-modal-hero-deco--2{
  width:12rem;height:12rem;
  bottom:-3rem;left:-3rem;
  background:radial-gradient(circle,var(--accent) 0%,transparent 70%);
  opacity:.2;
}
.nl-modal-hero-content{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  gap:1.2rem;
}
.nl-modal-hero-icon{
  width:5.4rem;
  height:5.4rem;
  border-radius:16px;
  background:rgba(255,255,255,.15);
  border:1.5px solid rgba(255,255,255,.25);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:2rem;
  color:var(--gold);
  transform:rotate(-6deg);
  margin-bottom:.4rem;
}
.nl-modal-hero-eyebrow{
  display:inline-block;
  width:fit-content;
  font-family:var(--font-body);
  font-size:1.05rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:var(--gold);
  background:rgba(255,255,255,.1);
  padding:.4rem 1rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.2);
}
.nl-modal-hero-title{
  font-family:var(--font-heading);
  font-size:2.6rem;
  font-weight:800;
  color:var(--white);
  margin:0;
  line-height:1.15;
  letter-spacing:-.01em;
}
.nl-modal-hero-sub{
  font-family:var(--font-body);
  font-size:1.4rem;
  color:rgba(255,255,255,.88);
  line-height:1.65;
  margin:0;
}
.nl-modal-hero-feats{
  list-style:none;
  padding:0;
  margin:1rem 0 0;
  display:flex;
  flex-direction:column;
  gap:.9rem;
}
.nl-modal-hero-feats li{
  display:flex;
  align-items:center;
  gap:.9rem;
  font-family:var(--font-body);
  font-size:1.35rem;
  color:rgba(255,255,255,.95);
  font-weight:500;
}
.nl-modal-hero-feats li i{
  color:var(--gold);
  font-size:1.4rem;
  flex-shrink:0;
}
.nl-modal-hero-trust{
  margin-top:1.2rem;
  display:flex;
  align-items:center;
  gap:.6rem;
  font-family:var(--font-body);
  font-size:1.15rem;
  color:rgba(255,255,255,.75);
  padding-top:1.2rem;
  border-top:1px solid rgba(255,255,255,.15);
}
.nl-modal-hero-trust i{
  color:var(--gold);
}

/* Right content column */
.nl-modal-content{
  position:relative;
  padding:3.6rem 3rem;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
}
.nl-modal-content .nl-modal-eyebrow{
  background:rgba(var(--primary-rgb),.12);
  color:var(--primary);
  align-self:flex-start;
  margin-bottom:1rem;
}
.nl-modal-content .nl-modal-title{
  font-size:2.2rem;
  margin:0 0 .8rem;
}
.nl-modal-meta{
  display:flex;
  align-items:center;
  gap:.5rem;
  font-family:var(--font-body);
  font-size:1.25rem;
  color:var(--gray-600);
  margin:0 0 1.4rem;
}
.nl-modal-meta i{
  color:var(--accent);
}
.nl-modal-more{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  font-family:var(--font-body);
  font-size:1.3rem;
  font-weight:800;
  color:var(--accent);
  text-decoration:none;
  margin-top:.6rem;
  transition:gap .2s;
}
.nl-modal-more:hover{
  gap:1rem;
  color:var(--accent-dark);
}
.nl-modal-form{
  margin-top:auto;
  padding-top:2rem;
  border-top:1px solid var(--gray-100);
}
.nl-modal-label{
  display:flex;
  align-items:center;
  gap:.6rem;
  font-family:var(--font-body);
  font-size:1.2rem;
  font-weight:800;
  color:var(--gray-700);
  margin-bottom:1rem;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.nl-modal-label i{
  color:var(--accent);
}
.nl-modal-input-wrap{
  display:flex;
  align-items:center;
  gap:.6rem;
  background:var(--gray-50);
  border:2px solid var(--gray-200);
  border-radius:14px;
  padding:.4rem .4rem .4rem 1.4rem;
  transition:.25s;
}
.nl-modal-input-wrap:focus-within{
  border-color:var(--accent);
  background:var(--white);
  box-shadow:0 0 0 4px rgba(var(--accent-rgb),.15);
}
.nl-modal-input-icon{
  color:var(--gray-500);
  font-size:1.4rem;
  flex-shrink:0;
}
.nl-modal-input{
  flex:1;
  min-width:0;
  border:none;
  background:transparent;
  font-family:var(--font-body);
  font-size:1.4rem;
  color:var(--gray-900);
  padding:1rem .8rem;
  outline:none;
}
.nl-modal-input::placeholder{
  color:var(--gray-500);
}
.nl-modal-submit{
  flex-shrink:0;
  background:var(--accent);
  color:var(--white);
  border:none;
  border-radius:10px;
  padding:1.1rem 1.8rem;
  font-family:var(--font-body);
  font-size:1.3rem;
  font-weight:800;
  cursor:pointer;
  transition:.25s;
  box-shadow:0 6px 14px rgba(var(--accent-rgb),.35);
}
.nl-modal-submit:hover{
  background:var(--accent-dark);
  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(var(--accent-rgb),.45);
}
.nl-modal-foot{
  font-family:var(--font-body);
  font-size:1.1rem;
  color:var(--gray-500);
  margin:1rem 0 0;
  line-height:1.5;
}

/* Scroll-fade indicator: gradient at the bottom of the content area
   when more content is available below. Toggled via JS class .is-scrollable.
   On desktop, .nl-modal-content is the scroll container; on mobile, the
   whole .nl-modal-box scrolls (this overlay is hidden on mobile). */
.nl-modal-content::after{
  content:'';
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:3.6rem;
  background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,.92) 70%,#fff 100%);
  pointer-events:none;
  opacity:0;
  transition:opacity .2s ease;
}
.nl-modal-content.is-scrollable::after{
  opacity:1;
}
.nl-modal-content.is-at-bottom::after{
  opacity:0;
}
.nl-modal-content::-webkit-scrollbar{ width:8px; }
.nl-modal-content::-webkit-scrollbar-track{ background:transparent; }
.nl-modal-content::-webkit-scrollbar-thumb{
  background:rgba(var(--accent-rgb),.35);
  border-radius:4px;
}
.nl-modal-content::-webkit-scrollbar-thumb:hover{
  background:rgba(var(--accent-rgb),.6);
}
.nl-modal-hero::-webkit-scrollbar{ width:8px; }
.nl-modal-hero::-webkit-scrollbar-track{ background:transparent; }
.nl-modal-hero::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.25);
  border-radius:4px;
}
.nl-modal-box::-webkit-scrollbar{ width:8px; }
.nl-modal-box::-webkit-scrollbar-track{ background:transparent; }
.nl-modal-box::-webkit-scrollbar-thumb{
  background:rgba(var(--accent-rgb),.35);
  border-radius:4px;
}
.nl-modal-box::-webkit-scrollbar-thumb:hover{
  background:rgba(var(--accent-rgb),.6);
}

/* ... Responsive ... */
/* Tablet: keep the centered modal card, just stack the split layout */
@media(max-width:900px){
  .nl-modal-grid{ grid-template-columns:1fr; }
  .nl-modal-hero{ padding:2.6rem 2.4rem; }
  .nl-modal-hero-title{ font-size:2.2rem; }
  .nl-modal-content{ padding:2.6rem 2.4rem; }
  .nl-modal-content .nl-modal-title{ font-size:2rem; }
}

/* Mobile: portrait modal card with rounded corners, centered on screen */
@media(max-width:640px){
  .nl-modal{ padding:1.2rem; align-items:center; }
  .nl-modal-box{
    max-width:420px;
    width:100%;
    max-height:calc(100vh - 2.4rem);
    height:auto;
    border-radius:22px;
    margin:auto;
    overflow-y:auto;
    overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
  }
  .nl-modal-box--sm{
    max-width:380px;
    max-height:calc(100vh - 2.4rem);
    border-radius:20px;
    overflow:visible;
  }
  .nl-modal-grid{
    grid-template-columns:1fr;
    max-height:none;
  }
  /* Reverse order: main content first, decorative hero last */
  .nl-modal-content{ order:1; overflow:visible; max-height:none; }
  .nl-modal-hero{ order:2; }
  .nl-modal-hero{ padding:2rem 1.8rem; overflow:visible; }
  .nl-modal-hero-icon{ width:4.6rem; height:4.6rem; font-size:1.7rem; }
  .nl-modal-hero-title{ font-size:1.7rem; }
  .nl-modal-hero-sub{ font-size:1.25rem; }
  .nl-modal-hero-feats{ gap:.7rem; margin-top:.8rem; }
  .nl-modal-hero-feats li{ font-size:1.2rem; }
  .nl-modal-hero-trust{ font-size:1.05rem; margin-top:1rem; padding-top:1rem; }
  .nl-modal-content{ padding:2rem 1.8rem; }
  .nl-modal-content--centered{ padding:2.6rem 1.8rem 2.2rem; }
  .nl-modal-content .nl-modal-title{ font-size:1.7rem; }
  .nl-modal-excerpt{ font-size:1.25rem; line-height:1.6; }
  .nl-modal-meta{ font-size:1.15rem; }
  .nl-modal-more{ font-size:1.2rem; }
  .nl-modal-form{ padding-top:1.4rem; }
  .nl-modal-label{ font-size:1.1rem; margin-bottom:.8rem; }
  .nl-modal-input-wrap{
    flex-direction:column;
    padding:1rem;
    align-items:stretch;
    gap:.8rem;
  }
  .nl-modal-input-icon{ display:none; }
  .nl-modal-input{ padding:1rem; text-align:center; font-size:1.3rem; }
  .nl-modal-submit{ width:100%; padding:1.1rem; font-size:1.25rem; }
  .nl-modal-foot{ font-size:1.05rem; }
  .nl-modal-close{ top:.8rem; right:.8rem; width:3.6rem; height:3.6rem; font-size:1.5rem; }
  .nl-modal-btn{ font-size:1.3rem; padding:1.1rem 2.4rem; }
  .nl-modal-content::after{ display:none; }
}

@media(max-width:420px){
  .nl-modal{ padding:.8rem; }
  .nl-modal-box{ max-height:calc(100vh - 1.6rem); border-radius:18px; }
  .nl-modal-box--sm{ border-radius:16px; max-height:calc(100vh - 1.6rem); }
  .nl-modal-hero{ padding:1.6rem 1.4rem; }
  .nl-modal-hero-icon{ width:4rem; height:4rem; font-size:1.5rem; border-radius:12px; }
  .nl-modal-hero-title{ font-size:1.45rem; }
  .nl-modal-hero-eyebrow{ font-size:.9rem; padding:.3rem .8rem; }
  .nl-modal-hero-sub{ font-size:1.15rem; }
  .nl-modal-hero-feats li{ font-size:1.1rem; gap:.7rem; }
  .nl-modal-hero-trust{ font-size:1rem; }
  .nl-modal-content{ padding:1.6rem 1.4rem; }
  .nl-modal-content--centered{ padding:2.2rem 1.4rem 1.8rem; }
  .nl-modal-content .nl-modal-title{ font-size:1.45rem; }
  .nl-modal-excerpt{ font-size:1.15rem; }
  .nl-modal-input{ font-size:1.2rem; padding:.9rem; }
  .nl-modal-submit{ font-size:1.15rem; padding:1rem; }
  .nl-modal-close{ width:3.2rem; height:3.2rem; font-size:1.3rem; top:.6rem; right:.6rem; }
}

@media(max-width:360px){
  .nl-modal-hero-title{ font-size:1.3rem; }
  .nl-modal-content .nl-modal-title{ font-size:1.3rem; }
  .nl-modal-title{ font-size:1.3rem; }
  .nl-modal-excerpt{ font-size:1.05rem; }
  .nl-modal-input{ font-size:1.1rem; }
  .nl-modal-hero-deco--1{ width:12rem; height:12rem; top:-4rem; right:-4rem; }
  .nl-modal-hero-deco--2{ width:8rem; height:8rem; bottom:-2rem; left:-2rem; }
}

/* =====================================================
   MODAL TRIGGERS ... Back to top + Newsletter FAB
   Used by inc/footer.inc.php (#backToTop, #nlSubscribeFab)
   ===================================================== */

/* Back to top button (toggled via .visible in footer JS) */
.back-to-top{
  position:fixed;
  right:2.4rem;
  bottom:2.4rem;
  z-index:9000;
  width:5rem;
  height:5rem;
  border:none;
  border-radius:50%;
  background:var(--primary);
  color:var(--white);
  font-size:1.8rem;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 22px rgba(var(--primary-rgb),.35);
  opacity:0;
  visibility:hidden;
  transform:translateY(1.6rem);
  transition:opacity var(--t-base), visibility var(--t-base), transform var(--t-base), background var(--t-base), box-shadow var(--t-base);
}
.back-to-top.visible{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.back-to-top:hover{
  background:var(--primary-dark);
  color:var(--white);
  transform:translateY(-3px);
  box-shadow:0 12px 30px rgba(var(--primary-rgb),.45);
}

/* Newsletter subscribe FAB removed ... the modal now auto-opens on the homepage. */

@media(max-width:480px){
  .back-to-top{ right:1.6rem; bottom:1.6rem; width:4.4rem; height:4.4rem; font-size:1.6rem; }
}

/* =====================================================
   ADMIN TOPBAR + DASHBOARD + ROLE BANNER
   Styles the body of admin_page.php (and other admin
   pages that use admin_topbar.inc.php). Header/footer
   above this in the cascade already have their own
   styling; this block only fills in the gaps that the
   admin/portal pages rely on.
   ===================================================== */

/* ---------- Admin topbar ---------- */
.atb{
  background:
    linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color:var(--white);
  padding:3.6rem 0 3rem;
  position:relative;
  overflow:hidden;
  margin-bottom:3.6rem;
  border-bottom:4px solid var(--accent);
}
.atb::before{
  content:'';
  position:absolute;
  top:-8rem; right:-6rem;
  width:24rem; height:24rem;
  border-radius:50%;
  background:rgba(255,255,255,.06);
  pointer-events:none;
}
.atb::after{
  content:'';
  position:absolute;
  bottom:-10rem; left:-10rem;
  width:28rem; height:28rem;
  border-radius:50%;
  background:rgba(255,255,255,.04);
  pointer-events:none;
}
.atb .container{ position:relative; z-index:1; }

.atb-inner{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:3rem;
  flex-wrap:wrap;
}

.atb-main{ flex:1 1 30rem; min-width:0; }

.atb-bc{
  list-style:none;
  margin:0 0 1.4rem;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.6rem;
  font-size:1.3rem;
  color:rgba(255,255,255,.72);
}
.atb-bc li{ display:inline-flex; align-items:center; gap:.6rem; }
.atb-bc li + li::before{
  content:'\f105';
  font-family:'FontAwesome';
  font-size:1.1rem;
  color:rgba(255,255,255,.4);
  margin-right:.2rem;
}
.atb-bc li a{
  color:rgba(255,255,255,.85);
  text-decoration:none;
  transition:color var(--t-fast);
}
.atb-bc li a:hover{ color:var(--white); }
.atb-bc li.active{ color:var(--white); font-weight:600; }

.atb-title-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:1.4rem;
  margin-bottom:.8rem;
}
.atb-title{
  font-family:var(--font-heading);
  font-size:clamp(2.4rem,3.6vw,3.4rem);
  font-weight:800;
  color:var(--white);
  margin:0;
  letter-spacing:-.02em;
  line-height:1.15;
  display:inline-flex;
  align-items:center;
  gap:1.2rem;
}
.atb-title i{
  width:4.8rem;
  height:4.8rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
  border-radius:var(--r-md);
  font-size:1.9rem;
  color:var(--white);
}

.atb-sub{
  color:rgba(255,255,255,.85);
  font-size:1.5rem;
  margin:.4rem 0 0;
  line-height:1.65;
  max-width:62rem;
}

/* Role pill (super/sub/teacher/etc.) */
.atb-pill{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:.6rem 1.4rem;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.28);
  color:var(--white);
  border-radius:var(--r-full);
  font-size:1.2rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  white-space:nowrap;
}
.atb-pill i{ font-size:1.2rem; opacity:.9; }
.atb-pill.pill-super{     background:linear-gradient(135deg,#d4a017,#8a6300); border-color:rgba(255,255,255,.35); }
.atb-pill.pill-subadmin{  background:linear-gradient(135deg,#1d8450,#0c5430); border-color:rgba(255,255,255,.28); }
.atb-pill.pill-account{   background:linear-gradient(135deg,#2563eb,#1e3a8a); border-color:rgba(255,255,255,.28); }
.atb-pill.pill-result{    background:linear-gradient(135deg,#7c3aed,#4c1d95); border-color:rgba(255,255,255,.28); }
.atb-pill.pill-teacher{   background:linear-gradient(135deg,#0891b2,#155e75); border-color:rgba(255,255,255,.28); }
.atb-pill.pill-nonteacher{background:linear-gradient(135deg,#6b7280,#374151); border-color:rgba(255,255,255,.28); }
.atb-pill.pill-other{     background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.28); }

/* Action buttons on the right */
.atb-actions{
  display:flex;
  align-items:center;
  gap:.8rem;
  flex-wrap:wrap;
  flex-shrink:0;
}
.atb-btn{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:.9rem 1.8rem;
  background:var(--white);
  color:var(--primary) !important;
  border:1px solid rgba(255,255,255,.2);
  border-radius:var(--r-sm);
  font-family:var(--font-heading);
  font-size:1.3rem;
  font-weight:700;
  text-decoration:none !important;
  cursor:pointer;
  transition:all var(--t-base);
  white-space:nowrap;
}
.atb-btn i{ font-size:1.2rem; }
.atb-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(0,0,0,.18);
}
.atb-btn.btn-sm{ padding:.6rem 1.3rem; font-size:1.2rem; }
.atb-btn.btn-gold{
  background:linear-gradient(135deg,var(--gold),var(--accent));
  color:var(--white) !important;
  border-color:transparent;
}
.atb-btn.btn-gold:hover{ background:linear-gradient(135deg,var(--accent),var(--accent-dark)); }
.atb-btn.btn-danger{
  background:var(--accent-dark);
  color:var(--white) !important;
  border-color:transparent;
}
.atb-btn.btn-danger:hover{ background:#7c2d12; }
.atb-btn.btn-primary{
  background:var(--primary);
  color:var(--white) !important;
  border-color:var(--primary);
}
.atb-btn.btn-primary:hover{ background:var(--primary-dark); border-color:var(--primary-dark); }

/* Role banner (sub/non-academic info bar) */
.adm-role-banner{
  display:flex;
  align-items:flex-start;
  gap:1.4rem;
  padding:1.8rem 2.2rem;
  border-radius:var(--r-lg);
  background:var(--white);
  border-left:5px solid var(--primary);
  box-shadow:var(--shadow-card);
  margin-bottom:2.4rem;
  border:1px solid var(--border-light);
  border-left-width:5px;
}
.adm-role-banner strong{
  display:flex;
  align-items:center;
  gap:.6rem;
  font-family:var(--font-heading);
  font-size:1.5rem;
  font-weight:700;
  color:var(--text);
  margin-bottom:.4rem;
}
.adm-role-banner strong i{ color:var(--primary); font-size:1.4rem; }
.adm-role-banner p{
  margin:0;
  font-size:1.4rem;
  color:var(--text-secondary);
  line-height:1.65;
}
.adm-role-banner p strong{ color:var(--text); font-weight:700; }
.adm-role-banner--sub{
  border-left-color:var(--primary);
  background:linear-gradient(180deg,var(--primary-mist) 0%, var(--white) 60%);
}
.adm-role-banner--sub strong i{ color:var(--primary); }
.adm-role-banner--nonacademic{
  border-left-color:var(--gray-600);
  background:linear-gradient(180deg,var(--gray-50) 0%, var(--white) 60%);
}
.adm-role-banner--nonacademic strong i{ color:var(--gray-700); }

/* =====================================================
   ADMIN DASHBOARD GRID V2
   ===================================================== */
.adm-dash-wrap-v2{
  padding:1rem 0 6rem;
  background:var(--bg);
}

.adm-section-v2{
  background:var(--white);
  border-radius:var(--r-lg);
  padding:2.6rem 2.6rem 2.8rem;
  margin-bottom:3rem;
  box-shadow:var(--shadow-card);
  border:1px solid var(--border-light);
  position:relative;
  overflow:hidden;
}
.adm-section-v2::before{
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:4px;
  background:linear-gradient(90deg,var(--primary) 0%, var(--primary-light) 100%);
}

.adm-section-title-v2{
  display:flex;
  align-items:center;
  gap:1.2rem;
  font-family:var(--font-heading);
  font-size:2rem;
  font-weight:800;
  color:var(--text);
  margin:0 0 2rem;
  letter-spacing:-.01em;
  flex-wrap:wrap;
}
.adm-section-title-v2 > i{
  width:3.8rem;
  height:3.8rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--primary-mist);
  color:var(--primary);
  border-radius:var(--r-md);
  font-size:1.6rem;
  flex-shrink:0;
}
.adm-section-title-v2 > span{ flex:1 1 auto; min-width:0; }

.adm-section-count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  background:var(--primary-mist);
  color:var(--primary);
  font-size:1.3rem;
  font-weight:800;
  padding:.55rem 1.2rem;
  border-radius:var(--r-full);
  letter-spacing:.06em;
  text-transform:uppercase;
  white-space:nowrap;
  margin-left:auto;
  border:1px solid rgba(var(--primary-rgb),.18);
  line-height:1;
  box-shadow:0 1px 2px rgba(var(--primary-rgb),.06);
}
.adm-section-count::before{
  content:'';
  width:.55rem;
  height:.55rem;
  border-radius:50%;
  background:var(--primary);
  display:inline-block;
  flex-shrink:0;
}

.adm-grid-v2{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(18rem, 1fr));
  gap:1.4rem;
}

.adm-item-v2{
  display:flex;
  align-items:center;
  gap:1.4rem;
  padding:1.6rem 1.8rem;
  background:var(--white);
  border:1px solid var(--border-light);
  border-radius:var(--r-md);
  color:var(--text) !important;
  text-decoration:none !important;
  font-family:var(--font-heading);
  font-size:1.4rem;
  font-weight:600;
  line-height:1.3;
  transition:all var(--t-base);
  position:relative;
  overflow:hidden;
}
.adm-item-v2::after{
  content:'';
  position:absolute;
  bottom:0; left:0;
  width:0; height:3px;
  background:var(--primary);
  transition:width var(--t-base);
}
.adm-item-v2:hover{
  transform:translateY(-3px);
  border-color:var(--primary);
  box-shadow:var(--shadow-hover);
  background:var(--primary-mist);
}
.adm-item-v2:hover::after{ width:100%; }

.adm-icon-v2{
  width:4.4rem;
  height:4.4rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:var(--r-md);
  font-size:1.7rem;
  flex-shrink:0;
  background:var(--gray-100);
  color:var(--text-secondary);
  transition:all var(--t-base);
}
.adm-item-v2:hover .adm-icon-v2{
  color:var(--white);
  transform:scale(1.05) rotate(-5deg);
}

.adm-label-v2{
  flex:1 1 auto;
  min-width:0;
  word-break:break-word;
}

/* Super-admin only tile variant */
.adm-item-v2.super{
  border-left:3px solid var(--gold);
  background:linear-gradient(180deg,rgba(201,168,76,.06) 0%, var(--white) 100%);
}
.adm-item-v2.super .adm-icon-v2{ background:rgba(201,168,76,.18); color:var(--accent-dark); }

/* Icon color variants (ic-orange, ic-blue, etc.) */
.ic-orange{ background:rgba(217,119,6,.12)  !important; color:var(--accent) !important; }
.ic-orange.adm-icon-v2{ background:rgba(217,119,6,.12) !important; color:var(--accent) !important; }
.ic-blue{   background:rgba(29,132,180,.12)  !important; color:#1d84b4 !important; }
.ic-green{  background:rgba(29,132,80,.12)   !important; color:var(--primary-light) !important; }
.ic-red{    background:rgba(220,38,38,.12)   !important; color:#dc2626 !important; }
.ic-purple{ background:rgba(124,58,237,.12)  !important; color:#7c3aed !important; }
.ic-teal{   background:rgba(13,148,136,.12)  !important; color:#0d9488 !important; }
.ic-dark{   background:rgba(31,41,55,.12)    !important; color:#1f2937 !important; }
.ic-pos{    background:rgba(225,29,72,.12)   !important; color:#e11d48 !important; }

.adm-item-v2:hover .ic-orange,
.adm-item-v2:hover .ic-blue,
.adm-item-v2:hover .ic-green,
.adm-item-v2:hover .ic-red,
.adm-item-v2:hover .ic-purple,
.adm-item-v2:hover .ic-teal,
.adm-item-v2:hover .ic-dark,
.adm-item-v2:hover .ic-pos{
  background:var(--primary) !important;
  color:var(--white) !important;
}

/* =====================================================
   LOCKED ADMIN TILE
   Painted when the super admin enables the lock for a
   feature in School Settings › Admin Feature Access.
   The tile is still rendered (so staff can see what's
   available) but is greyed out, non-clickable and
   carries a red lock badge in the corner. Designed
   to look intentionally "disabled" rather than broken.
   ===================================================== */
.adm-item-v2.adm-item-v2--locked{
  cursor:not-allowed;
  opacity:.55;
  filter:grayscale(.7);
  background:#f3f4f6 !important;
  border-color:#d1d5db !important;
  color:#6b7280 !important;
  transform:none !important;
  box-shadow:none !important;
}
.adm-item-v2.adm-item-v2--locked:hover{
  transform:none !important;
  border-color:#d1d5db !important;
  box-shadow:none !important;
  background:#f3f4f6 !important;
}
.adm-item-v2.adm-item-v2--locked::after{
  width:0 !important;
  background:transparent !important;
}
.adm-item-v2.adm-item-v2--locked .adm-icon-v2{
  background:#e5e7eb !important;
  color:#9ca3af !important;
  transform:none !important;
}
.adm-item-v2.adm-item-v2--locked:hover .adm-icon-v2{
  background:#e5e7eb !important;
  color:#9ca3af !important;
  transform:none !important;
}
.adm-item-v2.adm-item-v2--locked:hover .ic-orange,
.adm-item-v2.adm-item-v2--locked:hover .ic-blue,
.adm-item-v2.adm-item-v2--locked:hover .ic-green,
.adm-item-v2.adm-item-v2--locked:hover .ic-red,
.adm-item-v2.adm-item-v2--locked:hover .ic-purple,
.adm-item-v2.adm-item-v2--locked:hover .ic-teal,
.adm-item-v2.adm-item-v2--locked:hover .ic-dark,
.adm-item-v2.adm-item-v2--locked:hover .ic-pos{
  background:#e5e7eb !important;
  color:#9ca3af !important;
}
.adm-item-v2.adm-item-v2--locked .adm-label-v2{
  color:#6b7280 !important;
  text-decoration:line-through;
  text-decoration-color:rgba(220,38,38,.45);
  text-decoration-thickness:1.5px;
}
.adm-lock-badge{
  position:absolute;
  top:.6rem;
  right:.6rem;
  width:2.2rem;
  height:2.2rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#dc2626;
  color:#fff;
  border-radius:50%;
  font-size:1.1rem;
  box-shadow:0 2px 6px rgba(220,38,38,.35);
  z-index:2;
  pointer-events:auto;
  animation:adm-lock-pulse 1.6s ease-in-out infinite;
}
@keyframes adm-lock-pulse{
  0%,100%{ transform:scale(1); }
  50%   { transform:scale(1.08); }
}

/* =====================================================
   BREADCRUMB HERO (.brd-hero)
   Used as the page header band on inner pages (e.g.
   contact.php). Modern flat design with green gradient
   matching the site theme.
   ===================================================== */
.brd-hero{
  background:
    linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color:var(--white);
  padding:4.4rem 0 4rem;
  margin-bottom:4rem;
  position:relative;
  overflow:hidden;
  border-bottom:4px solid var(--accent);
}
.brd-hero::before{
  content:'';
  position:absolute;
  top:-8rem; right:-6rem;
  width:26rem; height:26rem;
  border-radius:50%;
  background:rgba(255,255,255,.06);
  pointer-events:none;
}
.brd-hero::after{
  content:'';
  position:absolute;
  bottom:-10rem; left:-10rem;
  width:30rem; height:30rem;
  border-radius:50%;
  background:rgba(255,255,255,.04);
  pointer-events:none;
}
.brd-hero .container{ position:relative; z-index:1; }

.brd-hero-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
  flex-wrap:wrap;
}

.brd-hero-text{ flex:1 1 24rem; min-width:0; }
.brd-hero-text h1{
  font-family:var(--font-heading);
  font-size:clamp(2.6rem,4vw,3.8rem);
  font-weight:800;
  color:var(--white);
  margin:0 0 .8rem;
  letter-spacing:-.02em;
  line-height:1.15;
}
.brd-hero-sub{
  color:rgba(255,255,255,.85);
  font-size:1.6rem;
  margin:0;
  max-width:60rem;
  line-height:1.65;
}

.brd-hero-crumbs{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.6rem;
  font-size:1.3rem;
  color:rgba(255,255,255,.78);
}
.brd-hero-crumbs li{ display:inline-flex; align-items:center; gap:.6rem; }
.brd-hero-crumbs li + li::before{
  content:'\f105';
  font-family:'FontAwesome';
  font-size:1.1rem;
  color:rgba(255,255,255,.4);
}
.brd-hero-crumbs li a{
  color:rgba(255,255,255,.85);
  text-decoration:none;
  transition:color var(--t-fast);
}
.brd-hero-crumbs li a:hover{ color:var(--white); }
.brd-hero-crumbs li:last-child{ color:var(--white); font-weight:600; }

/* =====================================================
   CONTACT PAGE (.ct-*)
   ===================================================== */
.ct-body{
  padding:0 0 6rem;
  background:var(--bg);
}

.ct-info-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(22rem, 1fr));
  gap:2rem;
  margin-bottom:4rem;
}
.ct-info-card{
  background:var(--white);
  border-radius:var(--r-lg);
  padding:2.6rem 2.4rem;
  text-align:center;
  box-shadow:var(--shadow-card);
  border:1px solid var(--border-light);
  transition:all var(--t-base);
}
.ct-info-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-hover);
  border-color:var(--primary);
}
.ct-info-icon{
  width:6rem;
  height:6rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--primary-mist);
  color:var(--primary);
  border-radius:50%;
  font-size:2.2rem;
  margin-bottom:1.6rem;
  transition:all var(--t-base);
}
.ct-info-card:hover .ct-info-icon{
  background:var(--primary);
  color:var(--white);
  transform:scale(1.05);
}
.ct-info-card h5{
  font-family:var(--font-heading);
  font-size:1.6rem;
  font-weight:700;
  color:var(--text);
  margin:0 0 1rem;
  letter-spacing:.02em;
  text-transform:uppercase;
}
.ct-info-card a,
.ct-info-card p{
  display:block;
  color:var(--primary);
  font-size:1.5rem;
  font-weight:600;
  margin:0 0 .4rem;
  text-decoration:none;
  word-break:break-word;
}
.ct-info-card a:hover{ color:var(--primary-dark); text-decoration:underline; }
.ct-info-card p{ color:var(--text-secondary); font-weight:500; }
.ct-info-secondary{
  color:var(--text-secondary) !important;
  font-weight:500 !important;
  font-size:1.4rem !important;
}
.ct-info-secondary:hover{ color:var(--primary) !important; }

.ct-main-grid{
  display:grid;
  grid-template-columns:minmax(0, 1.6fr) minmax(0, 1fr);
  gap:3rem;
  align-items:flex-start;
}

.ct-form-card{
  background:var(--white);
  border-radius:var(--r-lg);
  padding:3.4rem 3.2rem;
  box-shadow:var(--shadow-card);
  border:1px solid var(--border-light);
}

.ct-section-label{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  background:var(--primary-mist);
  color:var(--primary);
  font-family:var(--font-heading);
  font-size:1.2rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.12em;
  padding:.5rem 1.2rem;
  border-radius:var(--r-full);
  margin-bottom:1.2rem;
}
.ct-section-label i{ font-size:1.1rem; }

.ct-form-title{
  font-family:var(--font-heading);
  font-size:2.6rem;
  font-weight:800;
  color:var(--text);
  margin:0 0 .8rem;
  letter-spacing:-.02em;
}
.ct-form-desc{
  color:var(--text-secondary);
  font-size:1.5rem;
  margin:0 0 2.4rem;
  line-height:1.65;
}

.ct-alert{
  display:flex;
  align-items:center;
  gap:1rem;
  padding:1.2rem 1.6rem;
  border-radius:var(--r-md);
  font-size:1.4rem;
  font-weight:500;
  margin-bottom:2rem;
  border:1px solid transparent;
}
.ct-alert i{ font-size:1.6rem; flex-shrink:0; }
.ct-alert-success{
  background:var(--primary-mist);
  color:var(--primary-dark);
  border-color:var(--primary);
}
.ct-alert-error{
  background:#fef2f2;
  color:#991b1b;
  border-color:#fecaca;
}

.ct-fg{ margin-bottom:1.6rem; }
.ct-fg label{
  display:block;
  font-family:var(--font-heading);
  font-size:1.3rem;
  font-weight:600;
  color:var(--text);
  margin-bottom:.6rem;
  letter-spacing:.02em;
}
.ct-required{ color:var(--accent-dark); }

.ct-fg input,
.ct-fg textarea{
  width:100%;
  border:2px solid var(--border);
  background:var(--white);
  font-family:var(--font-body);
  font-size:1.5rem;
  color:var(--text);
  padding:1.2rem 1.6rem;
  border-radius:var(--r-sm);
  transition:border-color var(--t-base), box-shadow var(--t-base);
  outline:none;
}
.ct-fg textarea{ min-height:14rem; resize:vertical; line-height:1.6; }
.ct-fg input:focus,
.ct-fg textarea:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 4px var(--primary-glow);
}

.ct-submit-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.8rem;
  padding:1.4rem 3.2rem;
  background:var(--primary);
  color:var(--white);
  border:none;
  border-radius:var(--r-sm);
  font-family:var(--font-heading);
  font-size:1.5rem;
  font-weight:700;
  cursor:pointer;
  transition:all var(--t-base);
  box-shadow:0 6px 18px var(--primary-glow);
}
.ct-submit-btn i{ font-size:1.4rem; }
.ct-submit-btn:hover{
  background:var(--primary-dark);
  transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(var(--primary-rgb),.45);
}

/* Sidebar */
.ct-sidebar{ display:flex; flex-direction:column; gap:2rem; }

.ct-address-card{
  background:var(--white);
  border-radius:var(--r-lg);
  padding:2.8rem 2.6rem;
  box-shadow:var(--shadow-card);
  border:1px solid var(--border-light);
  position:relative;
  overflow:hidden;
}
.ct-address-card::before{
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:4px;
  background:linear-gradient(90deg,var(--primary) 0%, var(--accent) 100%);
}
.ct-address-card h4{
  font-family:var(--font-heading);
  font-size:2rem;
  font-weight:800;
  color:var(--primary);
  margin:0 0 .4rem;
  letter-spacing:-.01em;
}
.ct-school-name{
  color:var(--text-secondary);
  font-size:1.4rem;
  font-style:italic;
  margin:0 0 2rem;
  line-height:1.6;
}

.ct-contact-item{
  display:flex;
  align-items:flex-start;
  gap:1.2rem;
  padding:1.2rem 0;
  border-bottom:1px solid var(--border-light);
}
.ct-contact-item:last-of-type{ border-bottom:none; }
.ct-contact-item-icon{
  width:3.8rem;
  height:3.8rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--primary-mist);
  color:var(--primary);
  border-radius:50%;
  font-size:1.5rem;
  flex-shrink:0;
}
.ct-contact-item-body{ flex:1 1 auto; min-width:0; }
.ct-contact-item-body span{
  display:block;
  font-family:var(--font-heading);
  font-size:1.2rem;
  font-weight:700;
  color:var(--text-muted);
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:.2rem;
}
.ct-contact-item-body p,
.ct-contact-item-body a{
  display:block;
  color:var(--text);
  font-size:1.45rem;
  font-weight:600;
  margin:0;
  text-decoration:none;
  word-break:break-word;
  line-height:1.4;
}
.ct-contact-item-body a:hover{ color:var(--primary); }

.ct-info-secondary{
  display:block;
  color:var(--text-secondary) !important;
  font-weight:500 !important;
  font-size:1.35rem !important;
  margin-top:.2rem;
}
.ct-info-secondary:hover{ color:var(--primary) !important; }

.ct-social-row{
  display:flex;
  align-items:center;
  gap:.8rem;
  margin-top:1.8rem;
  padding-top:1.8rem;
  border-top:1px solid var(--border-light);
}
.ct-social-btn{
  width:4rem;
  height:4rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--primary);
  color:var(--white) !important;
  border-radius:50%;
  font-size:1.5rem;
  transition:all var(--t-base);
  text-decoration:none !important;
}
.ct-social-btn:hover{
  background:var(--primary-dark);
  transform:translateY(-3px);
  box-shadow:0 8px 18px rgba(var(--primary-rgb),.35);
}

/* =====================================================
   YEARBOOK MODAL (.yearbook-*, .yb-*)
   ===================================================== */
.yearbook-modal{
  position:fixed;
  inset:0;
  background:rgba(4,31,18,.78);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2rem;
  z-index:99999;
  opacity:0;
  visibility:hidden;
  transition:opacity var(--t-base), visibility var(--t-base);
}
.yearbook-modal.is-open{
  opacity:1;
  visibility:visible;
}

.yearbook-modal-card{
  background:var(--white);
  border-radius:var(--r-xl);
  max-width:56rem;
  width:100%;
  max-height:90vh;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  box-shadow:var(--shadow-2xl);
  transform:translateY(2rem) scale(.96);
  transition:transform var(--t-base);
}
.yearbook-modal.is-open .yearbook-modal-card{
  transform:translateY(0) scale(1);
}

.yearbook-modal-head{
  position:relative;
  padding:3rem 3rem 2.4rem;
  background:linear-gradient(135deg,var(--primary) 0%, var(--primary-dark) 100%);
  color:var(--white);
  text-align:center;
}
.yb-modal-badge{
  display:inline-block;
  background:rgba(255,255,255,.14);
  color:var(--white);
  font-family:var(--font-heading);
  font-size:1.1rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.16em;
  padding:.5rem 1.2rem;
  border-radius:var(--r-full);
  margin-bottom:1rem;
  border:1px solid rgba(255,255,255,.22);
}
.yearbook-modal-head h4{
  font-family:var(--font-heading);
  font-size:2.6rem;
  font-weight:800;
  color:var(--white);
  margin:0 0 1.2rem;
  letter-spacing:-.01em;
}
.yearbook-modal-head h4 span{
  color:var(--gold);
  font-style:italic;
  margin-left:.4rem;
}
.yb-modal-rule{
  width:6rem;
  height:3px;
  background:var(--gold);
  border-radius:3px;
  margin:0 auto;
}
.yearbook-close{
  position:absolute;
  top:1.4rem;
  right:1.4rem;
  width:3.8rem;
  height:3.8rem;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.24);
  color:var(--white);
  border-radius:50%;
  font-size:2rem;
  font-weight:700;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  transition:all var(--t-base);
}
.yearbook-close:hover{
  background:rgba(255,255,255,.28);
  transform:rotate(90deg);
}

.yearbook-modal-body{
  padding:2.6rem 3rem 2rem;
  overflow-y:auto;
  flex:1 1 auto;
}
.yearbook-modal-note{
  text-align:center;
  color:var(--text-secondary);
  font-size:1.45rem;
  margin:0 0 2rem;
}

.yearbook-year-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(11rem, 1fr));
  gap:1.2rem;
}
.yearbook-year-btn{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.4rem;
  padding:2rem 1rem;
  background:var(--bg);
  border:2px solid var(--border-light);
  border-radius:var(--r-md);
  cursor:pointer;
  transition:all var(--t-base);
  font-family:var(--font-heading);
}
.yearbook-year-btn strong{
  font-size:2.4rem;
  font-weight:800;
  color:var(--primary);
  letter-spacing:-.02em;
  line-height:1;
}
.yb-year-label{
  font-size:1.2rem;
  font-weight:600;
  color:var(--text-muted);
  text-transform:uppercase;
  letter-spacing:.08em;
}
.yearbook-year-btn:hover{
  background:var(--primary);
  border-color:var(--primary);
  transform:translateY(-3px);
  box-shadow:0 12px 28px rgba(var(--primary-rgb),.35);
}
.yearbook-year-btn:hover strong,
.yearbook-year-btn:hover .yb-year-label{
  color:var(--white);
}

.yearbook-empty{
  text-align:center;
  padding:3rem 2rem;
  background:var(--bg);
  border-radius:var(--r-md);
  color:var(--text-secondary);
  font-size:1.45rem;
  line-height:1.7;
}
.yearbook-empty strong{
  display:block;
  color:var(--text);
  font-size:1.6rem;
  margin-bottom:.6rem;
}

.yearbook-modal-foot{
  padding:1.6rem 3rem 2.4rem;
  background:var(--bg);
  border-top:1px solid var(--border-light);
  display:flex;
  justify-content:center;
}
.yearbook-cancel-btn{
  background:var(--white);
  color:var(--text-secondary);
  border:1px solid var(--border);
  padding:.9rem 2.6rem;
  border-radius:var(--r-sm);
  font-family:var(--font-heading);
  font-size:1.4rem;
  font-weight:600;
  cursor:pointer;
  transition:all var(--t-base);
}
.yearbook-cancel-btn:hover{
  background:var(--gray-100);
  color:var(--text);
}

/* =====================================================
   RESPONSIVE: admin/contact/yearbook
   ===================================================== */
@media(max-width:991px){
  .ct-main-grid{ grid-template-columns:1fr; }
  .atb-inner{ flex-direction:column; align-items:flex-start; }
  .atb-actions{ width:100%; }
  .adm-grid-v2{ grid-template-columns:repeat(auto-fill, minmax(15rem, 1fr)); }
}
@media(max-width:767px){
  .atb{ padding:2.8rem 0 2.4rem; margin-bottom:2.4rem; }
  .atb-title{ font-size:2.4rem; }
  .atb-title i{ width:3.8rem; height:3.8rem; font-size:1.5rem; }
  .atb-actions{ gap:.6rem; }
  .atb-btn{ padding:.7rem 1.3rem; font-size:1.2rem; }

  .adm-dash-wrap-v2{ padding:1rem 0 4rem; }
  .adm-section-v2{ padding:2rem 1.6rem 2.2rem; margin-bottom:2rem; }
  .adm-section-title-v2{ font-size:1.7rem; gap:.8rem; margin-bottom:1.6rem; }
  .adm-section-title-v2 > i{ width:3.2rem; height:3.2rem; font-size:1.4rem; }
  .adm-grid-v2{ grid-template-columns:1fr 1fr; gap:1rem; }
  .adm-item-v2{ padding:1.2rem 1.2rem; font-size:1.3rem; gap:1rem; }
  .adm-icon-v2{ width:3.6rem; height:3.6rem; font-size:1.4rem; }

  .brd-hero{ padding:3rem 0 2.6rem; margin-bottom:2.6rem; }
  .brd-hero-inner{ flex-direction:column; align-items:flex-start; gap:1.2rem; }

  .ct-body{ padding:0 0 4rem; }
  .ct-info-grid{ grid-template-columns:1fr; gap:1.2rem; margin-bottom:2.4rem; }
  .ct-form-card{ padding:2.2rem 1.8rem; }
  .ct-form-title{ font-size:2.2rem; }
  .ct-address-card{ padding:2.2rem 1.8rem; }
  .ct-submit-btn{ width:100%; }

  .yearbook-modal-head{ padding:2.4rem 1.6rem 1.8rem; }
  .yearbook-modal-head h4{ font-size:2rem; }
  .yearbook-modal-body{ padding:2rem 1.6rem 1.6rem; }
  .yearbook-modal-foot{ padding:1.4rem 1.6rem 1.8rem; }
  .yearbook-year-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media(max-width:480px){
  .adm-grid-v2{ grid-template-columns:1fr; }
  .adm-item-v2{ padding:1rem 1.2rem; }
  .ct-form-card{ padding:1.8rem 1.4rem; }
  .yearbook-year-grid{ grid-template-columns:1fr; }
}

/* =====================================================
   ADMIN-MANAGE-STAFF (.ms-*)
   Used by admin-manage-staff.php
   ===================================================== */
.ms-wrap{
  background:var(--bg);
  padding:0 0 5rem;
  min-height:60vh;
}
.ms-wrap .container{ padding-top:1rem; }

.ms-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
  flex-wrap:wrap;
  background:var(--white);
  border-radius:var(--r-lg);
  padding:1.8rem 2rem;
  box-shadow:var(--shadow-card);
  border:1px solid var(--border-light);
  margin-bottom:2rem;
  border-left:5px solid var(--primary);
}
.ms-topbar-info h3{
  font-family:var(--font-heading);
  font-size:2rem;
  font-weight:800;
  color:var(--text);
  margin:0 0 .4rem;
  letter-spacing:-.01em;
}
.ms-topbar-info p{
  color:var(--text-secondary);
  font-size:1.4rem;
  margin:0;
}
.ms-topbar-info strong{ color:var(--primary); }
.ms-icon-mr{ margin-right:.6rem; color:var(--primary); }
.ms-actions{
  display:flex;
  align-items:center;
  gap:.8rem;
  flex-wrap:wrap;
}

/* Buttons */
.ms-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  padding:1rem 1.8rem;
  background:var(--gray-100);
  color:var(--text) !important;
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  font-family:var(--font-heading);
  font-size:1.35rem;
  font-weight:600;
  text-decoration:none !important;
  cursor:pointer;
  transition:all var(--t-base);
  white-space:nowrap;
  line-height:1.2;
}
.ms-btn i{ font-size:1.25rem; }
.ms-btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.ms-btn-xs{ padding:.55rem 1rem; font-size:1.2rem; }
.ms-btn-orange{ background:var(--accent); color:var(--white) !important; border-color:var(--accent); }
.ms-btn-orange:hover{ background:var(--accent-dark); border-color:var(--accent-dark); }
.ms-btn-blue{   background:#2563eb; color:var(--white) !important; border-color:#2563eb; }
.ms-btn-blue:hover{ background:#1d4ed8; border-color:#1d4ed8; }
.ms-btn-green{  background:var(--primary-light); color:var(--white) !important; border-color:var(--primary-light); }
.ms-btn-green:hover{ background:var(--primary); border-color:var(--primary); }
.ms-btn-red{    background:#dc2626; color:var(--white) !important; border-color:#dc2626; }
.ms-btn-red:hover{ background:#b91c1c; border-color:#b91c1c; }
.ms-btn-gray{   background:var(--gray-100); color:var(--text) !important; border-color:var(--border); }
.ms-btn-gray:hover{ background:var(--gray-200); }
.ms-btn-bulk{   background:#0d9488; color:var(--white) !important; border-color:#0d9488; }
.ms-btn-bulk:hover{ background:#0f766e; border-color:#0f766e; }
.ms-btn-print{  background:#0891b2; color:var(--white) !important; border-color:#0891b2; }
.ms-btn-print:hover{ background:#155e75; border-color:#155e75; }
.ms-btn-cancel{ background:transparent !important; color:var(--text-secondary) !important; border-color:var(--border); }
.ms-btn-cancel:hover{ background:var(--gray-100) !important; color:var(--text) !important; }
.ms-btn-cancel-top{ margin:1.4rem auto 0; display:block; }
.ms-btn-photo{ padding:.55rem 1rem; }
.ms-btn-trash{ padding:.55rem .9rem; }

.ms-accent{ color:var(--accent-dark); font-weight:700; }

/* Alerts */
.ms-err,
.ms-ok{
  display:flex;
  align-items:center;
  gap:1rem;
  padding:1.4rem 1.8rem;
  border-radius:var(--r-md);
  font-size:1.4rem;
  font-weight:500;
  margin-bottom:1.6rem;
  border:1px solid transparent;
}
.ms-err{ background:#fef2f2; color:#991b1b; border-color:#fecaca; }
.ms-ok{  background:var(--primary-mist); color:var(--primary-dark); border-color:var(--primary); }
.ms-err i,.ms-ok i{ font-size:1.6rem; flex-shrink:0; }
.ms-err i{ color:#dc2626; }
.ms-ok  i{ color:var(--primary); }

/* Card wrapper */
.ms-card{
  background:var(--white);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);
  border:1px solid var(--border-light);
  overflow:hidden;
}
.ms-card--flush{ padding:0; }

/* Tabs */
.ms-tabs{
  display:flex;
  align-items:center;
  gap:0;
  background:var(--gray-50);
  border-bottom:1px solid var(--border-light);
  padding:0 1.6rem;
  flex-wrap:wrap;
}
.ms-tab{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:1.4rem 2rem;
  font-family:var(--font-heading);
  font-size:1.35rem;
  font-weight:600;
  color:var(--text-secondary);
  text-decoration:none !important;
  border-bottom:3px solid transparent;
  transition:all var(--t-fast);
  margin-bottom:-1px;
}
.ms-tab:hover{
  color:var(--primary);
  background:var(--white);
}
.ms-tab.active{
  color:var(--primary);
  background:var(--white);
  border-bottom-color:var(--primary);
}
.ms-tab i{ font-size:1.25rem; }

.ms-tab-content{ display:none; padding:2.2rem 2rem; }
.ms-tab-content.active{ display:block; }

/* Toolbar (search/count) */
.ms-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.6rem;
  flex-wrap:wrap;
  margin-bottom:1.6rem;
}
.ms-toolbar--wide{ flex-wrap:wrap; }
.ms-text-muted{ color:var(--text-secondary); font-size:1.35rem; }
.ms-count-text{ font-weight:600; color:var(--text); }
.ms-text-success{ color:var(--primary); font-weight:700; }
.ms-text-pending{ color:var(--accent-dark); font-style:italic; font-size:1.3rem; }

.ms-search{
  flex:1 1 24rem;
  max-width:36rem;
  padding:1rem 1.6rem;
  border:2px solid var(--border);
  border-radius:var(--r-sm);
  font-family:var(--font-body);
  font-size:1.4rem;
  color:var(--text);
  background:var(--white);
  transition:border-color var(--t-base), box-shadow var(--t-base);
  outline:none;
}
.ms-search:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 4px var(--primary-glow);
}

/* Tables */
.ms-table-scroll{
  overflow-x:auto;
  border-radius:var(--r-md);
  border:1px solid var(--border-light);
}
.ms-table{
  width:100%;
  border-collapse:collapse;
  background:var(--white);
}
.ms-table thead th{
  background:var(--gray-50);
  font-family:var(--font-heading);
  font-size:1.2rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--text-secondary);
  padding:1.2rem 1.4rem;
  text-align:left;
  border-bottom:2px solid var(--border);
  white-space:nowrap;
}
.ms-table tbody td{
  padding:1.2rem 1.4rem;
  font-size:1.4rem;
  color:var(--text);
  border-bottom:1px solid var(--border-light);
  vertical-align:middle;
}
.ms-table tbody tr:hover{ background:var(--bg); }
.ms-table tbody tr:last-child td{ border-bottom:none; }
.ms-col-actions{ min-width:24rem; }

.ms-empty{
  text-align:center;
  padding:4rem 2rem;
  color:var(--text-secondary);
  font-size:1.45rem;
  font-style:italic;
}
.ms-empty-mssg{
  text-align:center;
  color:var(--text-secondary);
  font-size:1.4rem;
  padding:2rem;
  font-style:italic;
}

/* Avatars */
.ms-avatar{
  width:3.6rem;
  height:3.6rem;
  border-radius:50%;
  object-fit:cover;
  vertical-align:middle;
  margin-right:.8rem;
  border:2px solid var(--primary);
}
.ms-avatar-letter{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:3.6rem;
  height:3.6rem;
  border-radius:50%;
  background:var(--primary);
  color:var(--white);
  font-weight:700;
  font-size:1.4rem;
  margin-right:.8rem;
  vertical-align:middle;
}
.ms-avatar-lg{
  width:5rem;
  height:5rem;
  border-radius:var(--r-sm);
  object-fit:cover;
  border:2px solid var(--primary-light);
}
.ms-avatar-lg-letter{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:5rem;
  height:5rem;
  border-radius:var(--r-sm);
  background:var(--primary-mist);
  color:var(--primary);
  font-weight:800;
  font-size:1.8rem;
}

/* Badges */
.bx{
  display:inline-block;
  padding:.35rem 1rem;
  border-radius:var(--r-full);
  font-size:1.15rem;
  font-weight:700;
  letter-spacing:.02em;
  white-space:nowrap;
  line-height:1.4;
}
.b-active{ background:var(--primary-mist); color:var(--primary-dark); }
.b-blocked{ background:#fef2f2; color:#991b1b; }
.badge-super{      background:#fde8e8; color:#a3231f; }
.badge-subadmin{   background:#fdf1e0; color:#a3620c; }
.badge-account{    background:#e6f4ea; color:#1e7a34; }
.badge-result{     background:#e7edfd; color:#2d4ea3; }
.badge-nonteacher{ background:#eceef1; color:#4a4f57; }
.badge-teacher{    background:#fff1e6; color:#c1550a; }
.badge-other{      background:#eceef1; color:#4a4f57; }

.ms-tag-info{
  display:inline-block;
  background:#e0f2fe;
  color:#075985;
  padding:.3rem .8rem;
  border-radius:var(--r-sm);
  font-family:monospace;
  font-size:1.25rem;
  font-weight:600;
}

/* Form rows */
.ms-row{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:1.4rem;
  margin-bottom:1.4rem;
}
.ms-col2{ width:100%; }
.ms-form-row{ margin-bottom:1.4rem; }
.ms-form-row--wide{ grid-column:1 / -1; }
.ms-form-row--mid{ max-width:32rem; }

.ms-lbl{
  display:block;
  font-family:var(--font-heading);
  font-size:1.3rem;
  font-weight:600;
  color:var(--text);
  margin-bottom:.6rem;
  letter-spacing:.02em;
}
.ms-inp,
.ms-sel{
  width:100%;
  padding:1.1rem 1.4rem;
  border:2px solid var(--border);
  border-radius:var(--r-sm);
  font-family:var(--font-body);
  font-size:1.45rem;
  color:var(--text);
  background:var(--white);
  outline:none;
  transition:border-color var(--t-base), box-shadow var(--t-base);
}
.ms-inp:focus,
.ms-sel:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 4px var(--primary-glow);
}
.ms-file-input{
  padding:.7rem;
  font-size:1.3rem;
}
.ms-helper{
  font-style:italic;
  color:var(--text-muted);
  font-size:1.3rem;
}
.ms-helper-block{
  display:block;
  margin-top:.5rem;
  color:var(--text-muted);
  font-size:1.25rem;
}
.ms-form-inline{ display:inline-block; margin-right:.3rem; }

.pwd-wrap{
  position:relative;
  display:flex;
  align-items:center;
}
.pwd-wrap .ms-inp{ padding-right:4rem; }
.pwd-wrap .pt{
  position:absolute;
  right:1rem;
  top:50%;
  transform:translateY(-50%);
  color:var(--text-muted);
  cursor:pointer;
  padding:.4rem;
  font-size:1.5rem;
  transition:color var(--t-fast);
}
.pwd-wrap .pt:hover{ color:var(--primary); }

/* Subject picker */
.ms-subj-picker{
  background:var(--gray-50);
  border:1px solid var(--border-light);
  border-radius:var(--r-md);
  padding:2rem;
  margin-bottom:1.6rem;
  display:none;
}
.ms-subj-picker--role{ margin-bottom:2rem; }
.subject-section-label{
  display:flex;
  align-items:center;
  gap:.8rem;
  font-family:var(--font-heading);
  font-size:1.3rem;
  font-weight:700;
  color:var(--primary);
  text-transform:uppercase;
  letter-spacing:.06em;
  margin-bottom:1rem;
  margin-top:1.4rem;
}
.subject-section-label:first-child{ margin-top:0; }
.subject-section-label i{ font-size:1.2rem; }

.subj-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(16rem, 1fr));
  gap:.8rem;
  margin-bottom:1.6rem;
}
.subj-item{
  display:flex;
  align-items:center;
  gap:.8rem;
  padding:.8rem 1.2rem;
  background:var(--white);
  border:1px solid var(--border-light);
  border-radius:var(--r-sm);
  cursor:pointer;
  font-size:1.4rem;
  color:var(--text);
  transition:all var(--t-fast);
}
.subj-item:hover{
  border-color:var(--primary);
  background:var(--primary-mist);
}
.subj-item input[type="checkbox"]{
  width:1.6rem;
  height:1.6rem;
  accent-color:var(--primary);
  cursor:pointer;
}

.subject-class-group{
  background:var(--white);
  border:1px solid var(--border-light);
  border-left:3px solid var(--primary);
  border-radius:var(--r-md);
  padding:1.4rem 1.6rem;
  margin-bottom:1.4rem;
}
.subject-class-header{
  font-family:var(--font-heading);
  font-size:1.35rem;
  font-weight:700;
  color:var(--text);
  margin-bottom:1rem;
  letter-spacing:.02em;
}

/* Subject class color variants (1-12, cyclical) */
.subject-class-group.sg-c1{ border-left-color:var(--primary); }
.subject-class-group.sg-c2{ border-left-color:var(--accent); }
.subject-class-group.sg-c3{ border-left-color:#0891b2; }
.subject-class-group.sg-c4{ border-left-color:#7c3aed; }
.subject-class-group.sg-c5{ border-left-color:#dc2626; }
.subject-class-group.sg-c6{ border-left-color:#0d9488; }
.subject-class-group.sg-c7{ border-left-color:#2563eb; }
.subject-class-group.sg-c8{ border-left-color:#db2777; }
.subject-class-group.sg-c9{ border-left-color:#16a34a; }
.subject-class-group.sg-c10{ border-left-color:#ea580c; }
.subject-class-group.sg-c11{ border-left-color:#4338ca; }
.subject-class-group.sg-c12{ border-left-color:#65a30d; }

/* Role column in table */
.ms-td-role{
  min-width:26rem;
  max-width:34rem;
  vertical-align:top;
  padding-top:1.2rem;
  padding-bottom:1.2rem;
}
.ms-role-detail{
  margin-top:.6rem;
  display:flex;
  flex-direction:column;
  gap:.8rem;
}
.ms-role-class-group{
  background:var(--bg);
  border:1px solid var(--border-light);
  border-left:3px solid var(--accent);
  border-radius:var(--r-sm);
  padding:.8rem 1rem;
}
.ms-role-class-header{
  font-size:1.25rem;
  font-weight:700;
  color:var(--text);
  text-transform:uppercase;
  letter-spacing:.04em;
  margin-bottom:.6rem;
  display:flex;
  align-items:center;
  gap:.6rem;
}
.ms-role-class-header::before{
  content:"\f19d";
  font-family:'FontAwesome';
  color:var(--accent);
  font-size:1.2rem;
}
.ms-role-subj-list{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  padding-left:.2rem;
}
.ms-role-no-subj{
  font-size:1.15rem;
  color:var(--text-muted);
  font-style:italic;
  padding-left:.2rem;
}
.ms-chip{
  display:inline-block;
  padding:.3rem 1rem;
  border-radius:var(--r-full);
  font-size:1.15rem;
  font-weight:600;
  line-height:1.4;
}
.ms-chip-subj{ background:#eef2ff; color:#3448a3; border:1px solid #d7dcfb; }

/* Modal */
.ms-modal{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(4,31,18,.78);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  z-index:99999;
  align-items:flex-start;
  justify-content:center;
  padding:2rem;
  overflow-y:auto;
}
.ms-modal-box{
  background:var(--white);
  border-radius:var(--r-lg);
  max-width:48rem;
  width:100%;
  padding:2.6rem 2.4rem 2.4rem;
  box-shadow:var(--shadow-2xl);
  margin-top:4rem;
  position:relative;
  animation:msModalIn .25s ease-out;
}
.ms-modal-box--large{ max-width:64rem; }
.ms-modal-box--photo{ max-width:42rem; }

@keyframes msModalIn{
  from{ opacity:0; transform:translateY(-2rem); }
  to{ opacity:1; transform:translateY(0); }
}

.ms-modal-close{
  position:absolute;
  top:1rem;
  right:1.2rem;
  width:3.4rem;
  height:3.4rem;
  background:var(--gray-100);
  border:none;
  color:var(--text-secondary);
  border-radius:50%;
  font-size:2rem;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  transition:all var(--t-base);
}
.ms-modal-close:hover{ background:var(--gray-200); color:var(--text); transform:rotate(90deg); }

.ms-modal-box h5{
  font-family:var(--font-heading);
  font-size:1.7rem;
  font-weight:800;
  color:var(--text);
  margin:0 0 2rem;
  padding-right:3.6rem;
  letter-spacing:-.01em;
}
.ms-modal-head-left{ text-align:left; }
.ms-modal-icon-orange{ color:var(--accent); margin-right:.6rem; }
.ms-modal-icon-blue{ color:#2563eb; margin-right:.6rem; }
.ms-modal-icon-gray{ color:var(--text-secondary); margin-right:.6rem; }
.ms-modal-icon-lock{ color:#7c3aed; margin-right:.6rem; }

/* Photo modal */
.ms-photo-pad{ text-align:center; padding:1rem 0 2rem; }
.ms-modal-photo-wrap{
  width:18rem;
  height:18rem;
  margin:0 auto 1.6rem;
  border-radius:var(--r-md);
  background:var(--gray-100);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border:3px solid var(--primary-light);
}
.ms-modal-photo-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:none;
}
.ms-modal-photo-letter{
  font-size:6rem;
  font-weight:800;
  color:var(--primary);
  display:none;
}
.ms-photo-label{ display:inline-flex; cursor:pointer; }
.ms-hidden-file{ display:none; }
.ms-photo-status{ margin-top:1.4rem; font-size:1.35rem; font-weight:500; }
.ms-photo-status--uploading{ color:#2563eb; }
.ms-photo-status--success{ color:var(--primary); }
.ms-photo-status--error{ color:#dc2626; }

/* Responsive */
@media(max-width:991px){
  .ms-topbar{ flex-direction:column; align-items:flex-start; }
  .ms-actions{ width:100%; }
  .ms-row{ grid-template-columns:1fr; }
  .ms-td-role{ min-width:0; max-width:none; }
}
@media(max-width:767px){
  .ms-topbar{ padding:1.4rem 1.4rem; }
  .ms-topbar-info h3{ font-size:1.6rem; }
  .ms-tabs{ padding:0 .6rem; overflow-x:auto; flex-wrap:nowrap; }
  .ms-tab{ padding:1.2rem 1.2rem; font-size:1.2rem; white-space:nowrap; }
  .ms-tab-content{ padding:1.6rem 1.2rem; }
  .ms-toolbar{ flex-direction:column; align-items:stretch; }
  .ms-search{ max-width:none; }
  .ms-table thead th,
  .ms-table tbody td{ padding:.9rem .8rem; font-size:1.25rem; }
  .ms-col-actions{ min-width:0; }
  .ms-modal-box{ padding:2rem 1.6rem 1.8rem; margin-top:2rem; }
  .ms-modal-photo-wrap{ width:14rem; height:14rem; }
  .ms-modal-photo-letter{ font-size:4.5rem; }
}

/* =====================================================
   ADMIN MANAGE CLASSES / PRACTICE QUESTIONS / CSV (.pq-*)
   Also styles shared .cd-* (class dropdown), .subj-*
   ===================================================== */
.pq-wrap{
  background:var(--bg);
  padding:0 0 5rem;
  min-height:60vh;
}
.pq-wrap .container{ padding-top:1rem; }

.pq-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
  flex-wrap:wrap;
  background:var(--white);
  border-radius:var(--r-lg);
  padding:1.8rem 2rem;
  box-shadow:var(--shadow-card);
  border:1px solid var(--border-light);
  margin-bottom:2rem;
  border-left:5px solid var(--primary);
}
.pq-topbar h3{
  font-family:var(--font-heading);
  font-size:2rem;
  font-weight:800;
  color:var(--text);
  margin:0 0 .4rem;
  letter-spacing:-.01em;
}
.pq-topbar h3 i{ color:var(--primary); margin-right:.6rem; }
.pq-topbar p{
  color:var(--text-secondary);
  font-size:1.4rem;
  margin:0;
}

.pq-actions{ display:flex; gap:.8rem; flex-wrap:wrap; }

/* Tabs */
.pq-tabs{
  display:flex;
  background:var(--white);
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  border:1px solid var(--border-light);
  border-bottom:none;
  padding:0 1rem;
  overflow-x:auto;
}
.pq-tab{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:1.4rem 1.8rem;
  font-family:var(--font-heading);
  font-size:1.35rem;
  font-weight:600;
  color:var(--text-secondary);
  text-decoration:none !important;
  border-bottom:3px solid transparent;
  white-space:nowrap;
  margin-bottom:-1px;
}
.pq-tab.active,
.pq-tab:hover{
  color:var(--primary);
  border-bottom-color:var(--primary);
}

.pq-card{
  background:var(--white);
  border-radius:0 0 var(--r-lg) var(--r-lg);
  box-shadow:var(--shadow-card);
  border:1px solid var(--border-light);
  padding:2.4rem 2.2rem;
}
.pq-t{ /* generic tab content */ }

.pq-m,
.pq-mb,
.pq-mc,
.pq-mh,
.pq-mo{ /* generic spacing */ }
.pq-m{ margin:1rem 0; }
.pq-mb{ margin-bottom:1rem; }
.pq-mc{ margin:0 auto; }
.pq-mh{ margin:0 1rem; }
.pq-mo{ margin:0; }

/* Cards */
.pq-cb{ /* checkbox row base */
  display:flex;
  align-items:center;
  gap:.8rem;
  padding:.7rem 1rem;
  border:1px solid var(--border-light);
  border-radius:var(--r-sm);
  cursor:pointer;
  font-size:1.35rem;
  background:var(--white);
  transition:all var(--t-fast);
}
.pq-cb:hover{ background:var(--primary-mist); border-color:var(--primary); }
.pq-cb input{ width:1.6rem; height:1.6rem; accent-color:var(--primary); }

/* Fields */
.pq-field{ margin-bottom:1.6rem; }
.pq-lbl{
  display:block;
  font-family:var(--font-heading);
  font-size:1.3rem;
  font-weight:600;
  color:var(--text);
  margin-bottom:.6rem;
  letter-spacing:.02em;
}
.pq-inp,
.pq-sel{
  width:100%;
  padding:1.1rem 1.4rem;
  border:2px solid var(--border);
  border-radius:var(--r-sm);
  font-family:var(--font-body);
  font-size:1.45rem;
  color:var(--text);
  background:var(--white);
  outline:none;
  transition:border-color var(--t-base), box-shadow var(--t-base);
}
.pq-inp:focus,
.pq-sel:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 4px var(--primary-glow);
}

.pq-btn{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:1rem 2rem;
  background:var(--accent);
  color:var(--white) !important;
  border:1px solid var(--accent);
  border-radius:var(--r-sm);
  font-family:var(--font-heading);
  font-size:1.4rem;
  font-weight:700;
  cursor:pointer;
  text-decoration:none !important;
  transition:all var(--t-base);
}
.pq-btn:hover{ background:var(--accent-dark); border-color:var(--accent-dark); transform:translateY(-2px); }
.pq-btn-orange{ background:var(--accent); border-color:var(--accent); }
.pq-btn-green{ background:var(--primary); border-color:var(--primary); }
.pq-btn-blue{ background:#2563eb; border-color:#2563eb; }
.pq-btn-red{ background:#dc2626; border-color:#dc2626; }
.pq-btn-gray{ background:var(--gray-100); color:var(--text) !important; border-color:var(--border); }
.pq-btn-sm{ padding:.6rem 1.2rem; font-size:1.25rem; }

.pq-badge{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.3rem 1rem;
  border-radius:var(--r-full);
  font-size:1.2rem;
  font-weight:700;
  background:var(--primary-mist);
  color:var(--primary-dark);
}
.pq-badge-blue{ background:#dbeafe; color:#1e3a8a; }
.pq-badge-green{ background:var(--primary-mist); color:var(--primary-dark); }
.pq-badge-orange{ background:#fef3c7; color:#92400e; }
.pq-badge-red{ background:#fee2e2; color:#991b1b; }

.pq-info{
  background:var(--primary-mist);
  border:1px solid var(--primary);
  border-radius:var(--r-md);
  padding:1.2rem 1.6rem;
  font-size:1.4rem;
  color:var(--primary-dark);
  margin-bottom:1.6rem;
}
.pq-info i{ color:var(--primary); margin-right:.6rem; }

.pq-helper{
  font-size:1.3rem;
  color:var(--text-muted);
  font-style:italic;
  margin-top:.5rem;
}
.pq-filt{
  display:flex;
  align-items:center;
  gap:1rem;
  flex-wrap:wrap;
  margin-bottom:1.6rem;
  padding:1rem 1.4rem;
  background:var(--white);
  border:1px solid var(--border-light);
  border-radius:var(--r-md);
}
.pq-tp{ /* tab pane */
  display:none;
}
.pq-tp.active{ display:block; }

/* Stats cards (used in admin_manage_classes) */
.pq-stats{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(18rem, 1fr));
  gap:1.4rem;
  margin-bottom:2rem;
}
.pq-stat{
  background:var(--white);
  border:1px solid var(--border-light);
  border-left:4px solid var(--primary);
  border-radius:var(--r-md);
  padding:1.6rem 1.8rem;
  box-shadow:var(--shadow-xs);
}
.pq-stat-num{
  font-family:var(--font-heading);
  font-size:3rem;
  font-weight:800;
  color:var(--primary);
  letter-spacing:-.02em;
  line-height:1;
  margin-bottom:.4rem;
}
.pq-stat-lbl{
  font-size:1.3rem;
  color:var(--text-secondary);
  font-weight:500;
}

/* Class dropdown (cd-*) */
.cd-item{
  display:flex;
  align-items:center;
  gap:1rem;
  padding:1rem 1.4rem;
  border-bottom:1px solid var(--border-light);
  transition:background var(--t-fast);
  font-size:1.4rem;
}
.cd-item:last-child{ border-bottom:none; }
.cd-item:hover{ background:var(--bg); }
.cd-item input[type="checkbox"]{ width:1.6rem; height:1.6rem; accent-color:var(--primary); }

/* Subj-* group/item styles (also used here) */
.subj-group{
  background:var(--white);
  border:1px solid var(--border-light);
  border-radius:var(--r-md);
  padding:1.4rem 1.6rem;
  margin-bottom:1.2rem;
  border-left:4px solid var(--primary);
}
.subj-check{ /* checkbox wrapper */ }

/* Generic button (also btn used by several pages) */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:1rem 2rem;
  background:var(--accent);
  color:var(--white) !important;
  border:1px solid var(--accent);
  border-radius:var(--r-sm);
  font-family:var(--font-heading);
  font-size:1.4rem;
  font-weight:700;
  cursor:pointer;
  text-decoration:none !important;
  transition:all var(--t-base);
}
.btn:hover{ background:var(--accent-dark); transform:translateY(-2px); }
.btn-sm{ padding:.6rem 1.2rem; font-size:1.25rem; }
.btn-lg{ padding:1.3rem 2.4rem; font-size:1.5rem; }
.btn-primary{ background:var(--primary); border-color:var(--primary); }
.btn-primary:hover{ background:var(--primary-dark); border-color:var(--primary-dark); }
.btn-success{ background:var(--primary-light); border-color:var(--primary-light); }
.btn-success:hover{ background:var(--primary); border-color:var(--primary); }
.btn-info{ background:#0891b2; border-color:#0891b2; }
.btn-warning{ background:var(--accent); border-color:var(--accent); }
.btn-danger{ background:#dc2626; border-color:#dc2626; }
.btn-danger:hover{ background:#b91c1c; border-color:#b91c1c; }
.btn-secondary{ background:var(--gray-100); color:var(--text) !important; border-color:var(--border); }
.btn-secondary:hover{ background:var(--gray-200); }

/* Generic form-control */
.form-control{
  width:100%;
  padding:1.1rem 1.4rem;
  border:2px solid var(--border);
  border-radius:var(--r-sm);
  font-family:var(--font-body);
  font-size:1.45rem;
  color:var(--text);
  background:var(--white);
  outline:none;
  transition:border-color var(--t-base), box-shadow var(--t-base);
}
.form-control:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 4px var(--primary-glow);
}
.form-control-lg{ padding:1.3rem 1.6rem; font-size:1.5rem; }

.form-group{ margin-bottom:1.6rem; }
.form-row{ display:grid; grid-template-columns:repeat(2, 1fr); gap:1.4rem; }
.form-label{
  display:block;
  font-family:var(--font-heading);
  font-size:1.3rem;
  font-weight:600;
  color:var(--text);
  margin-bottom:.6rem;
}

/* Generic modal */
.modal{
  position:fixed;
  inset:0;
  background:rgba(4,31,18,.78);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  z-index:99999;
  display:none;
  align-items:flex-start;
  justify-content:center;
  padding:2rem;
  overflow-y:auto;
}
.modal.open,
.modal.show,
.modal[style*="display:block"]{ display:flex; }
.modal-content{
  background:var(--white);
  border-radius:var(--r-lg);
  max-width:54rem;
  width:100%;
  padding:2.6rem 2.4rem;
  box-shadow:var(--shadow-2xl);
  margin-top:4rem;
  position:relative;
}
.modal-hdr{
  font-family:var(--font-heading);
  font-size:2rem;
  font-weight:800;
  color:var(--text);
  margin:0 0 2rem;
  padding-right:3.6rem;
}
.modal-body{ font-size:1.4rem; color:var(--text-secondary); }
.close,
.close-btn{
  position:absolute;
  top:1rem;
  right:1.2rem;
  width:3.4rem;
  height:3.4rem;
  background:var(--gray-100);
  border:none;
  color:var(--text-secondary);
  border-radius:50%;
  font-size:2rem;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}
.close:hover,
.close-btn:hover{ background:var(--gray-200); }

@media(max-width:767px){
  .pq-topbar{ flex-direction:column; align-items:flex-start; }
  .pq-card{ padding:1.8rem 1.4rem; }
  .form-row{ grid-template-columns:1fr; }
}

/* =====================================================
   ADMIN SCHOOL SETTINGS (.ss-*)
   ===================================================== */
.ss-wrap{
  background:var(--bg);
  padding:0 0 5rem;
  min-height:60vh;
}
.ss-wrap .container{ padding-top:1rem; }

.ss-card{
  background:var(--white);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);
  border:1px solid var(--border-light);
  padding:2.4rem 2.2rem;
  margin-bottom:2rem;
}
.ss-card h4{
  font-family:var(--font-heading);
  font-size:2rem;
  font-weight:800;
  color:var(--text);
  margin:0 0 2rem;
  padding-bottom:1.2rem;
  border-bottom:2px solid var(--border-light);
  letter-spacing:-.01em;
}
.ss-h4-text{ display:inline-flex; flex-direction:column; }
.ss-h4-sub{
  font-size:1.25rem;
  font-weight:500;
  color:var(--text-muted);
  font-family:var(--font-body);
  margin-top:.4rem;
  letter-spacing:0;
  text-transform:none;
}
.ss-section-icon-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:3.8rem;
  height:3.8rem;
  background:var(--primary-mist);
  color:var(--primary);
  border-radius:var(--r-md);
  font-size:1.5rem;
  margin-right:1rem;
  vertical-align:middle;
}

.ss-row{ display:grid; grid-template-columns:repeat(2, 1fr); gap:1.4rem; margin-bottom:1.4rem; }
.ss-fg{ margin-bottom:1.4rem; }

.ss-input,
.ss-filename{
  width:100%;
  padding:1.1rem 1.4rem;
  border:2px solid var(--border);
  border-radius:var(--r-sm);
  font-family:var(--font-body);
  font-size:1.45rem;
  color:var(--text);
  background:var(--white);
  outline:none;
  transition:border-color var(--t-base), box-shadow var(--t-base);
}
.ss-input:focus{ border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-glow); }
.ss-filename{ font-family:monospace; font-size:1.3rem; color:var(--text-secondary); background:var(--gray-50); }

.ss-label,
.ss-help{
  display:block;
  font-family:var(--font-heading);
  font-size:1.3rem;
  font-weight:600;
  color:var(--text);
  margin-bottom:.6rem;
}
.ss-help{
  font-size:1.25rem;
  color:var(--text-muted);
  font-weight:500;
  font-family:var(--font-body);
  margin-top:.5rem;
  letter-spacing:0;
  text-transform:none;
}

.ss-btn{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:1rem 2rem;
  background:var(--accent);
  color:var(--white) !important;
  border:1px solid var(--accent);
  border-radius:var(--r-sm);
  font-family:var(--font-heading);
  font-size:1.4rem;
  font-weight:700;
  cursor:pointer;
  text-decoration:none !important;
  transition:all var(--t-base);
}
.ss-btn:hover{ background:var(--accent-dark); transform:translateY(-2px); }
.btn-ss-save{ /* same as .ss-btn */ }
.ss-btn-primary{ background:var(--primary); border-color:var(--primary); }
.ss-btn-primary:hover{ background:var(--primary-dark); border-color:var(--primary-dark); }
.ss-btn-success{ background:var(--primary-light); border-color:var(--primary-light); }
.ss-btn-danger{ background:#dc2626; border-color:#dc2626; }

.ss-save-bar{
  position:sticky;
  bottom:0;
  background:var(--white);
  padding:1.2rem 1.6rem;
  border-top:1px solid var(--border-light);
  border-radius:0 0 var(--r-md) var(--r-md);
  margin:2rem -2.2rem -2.4rem;
  display:flex;
  justify-content:flex-end;
  gap:.8rem;
  box-shadow:0 -4px 14px rgba(0,0,0,.05);
}

/* Dashboard navigation (links to sections) */
.ss-dash{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(20rem, 1fr));
  gap:1.2rem;
  margin-bottom:2rem;
}
.ss-dash-link{
  display:flex;
  align-items:center;
  gap:1.2rem;
  padding:1.4rem 1.8rem;
  background:var(--white);
  border:1px solid var(--border-light);
  border-left:4px solid var(--primary);
  border-radius:var(--r-md);
  color:var(--text) !important;
  text-decoration:none !important;
  font-family:var(--font-heading);
  font-size:1.35rem;
  font-weight:600;
  transition:all var(--t-base);
}
.ss-dash-link:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-md);
  border-left-color:var(--accent);
  background:var(--primary-mist);
}
.ss-dash-link i{
  width:3.6rem;
  height:3.6rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--primary-mist);
  color:var(--primary);
  border-radius:var(--r-md);
  font-size:1.5rem;
  flex-shrink:0;
}
.ss-dash-link:hover i{ background:var(--primary); color:var(--white); }
.ss-dash-link span{ flex:1 1 auto; }

/* Mockup preview */
.ss-mockup{
  background:linear-gradient(135deg, var(--gray-50) 0%, var(--white) 100%);
  border:1px dashed var(--border);
  border-radius:var(--r-md);
  padding:2rem;
  text-align:center;
  margin-top:1rem;
}
.ss-mockup img{ max-width:24rem; max-height:12rem; border-radius:var(--r-sm); border:1px solid var(--border); }
.ss-mockup .ss-filename{ max-width:32rem; margin:1rem auto 0; }

/* Favicon preview */
.ss-favicon{
  display:flex;
  align-items:center;
  gap:1.4rem;
  padding:1.4rem;
  background:var(--gray-50);
  border-radius:var(--r-md);
}
.ss-favicon img{ width:6.4rem; height:6.4rem; border-radius:var(--r-sm); border:1px solid var(--border); background:var(--white); padding:.5rem; }
.ss-favicon .ss-filename{ flex:1; }

/* Suggestion buttons (AI/theme helpers) */
.ss-suggest{
  display:flex;
  gap:.6rem;
  flex-wrap:wrap;
  margin-top:.8rem;
}
.ss-suggest button{
  padding:.5rem 1rem;
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--r-full);
  font-size:1.2rem;
  cursor:pointer;
  font-family:var(--font-body);
  color:var(--text-secondary);
  transition:all var(--t-fast);
}
.ss-suggest button:hover{
  background:var(--primary);
  color:var(--white);
  border-color:var(--primary);
}

@media(max-width:767px){
  .ss-row{ grid-template-columns:1fr; }
  .ss-card{ padding:1.8rem 1.4rem; }
  .ss-save-bar{ margin:2rem -1.4rem -1.8rem; }
}

/* =====================================================
   ADMIN FEE STRUCTURE (.fee-* + .aeb-, .cd-, .efm-,
   .fic-, .fch-, .fif-, .fir-, .fsb-*)
   ===================================================== */
.fee-container{
  background:var(--bg);
  padding:0 0 5rem;
  min-height:60vh;
}
.fee-container .container{ padding-top:1rem; }

.fee-stats-bar{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(18rem, 1fr));
  gap:1.4rem;
  margin-bottom:2rem;
}
.stat-card{
  background:var(--white);
  border:1px solid var(--border-light);
  border-left:4px solid var(--primary);
  border-radius:var(--r-md);
  padding:1.6rem 1.8rem;
  box-shadow:var(--shadow-xs);
  display:flex;
  align-items:center;
  gap:1.4rem;
}
.stat-card:nth-child(2){ border-left-color:var(--accent); }
.stat-card:nth-child(3){ border-left-color:#0891b2; }
.stat-card:nth-child(4){ border-left-color:#7c3aed; }
.stat-num{
  font-family:var(--font-heading);
  font-size:2.6rem;
  font-weight:800;
  color:var(--primary);
  letter-spacing:-.02em;
  line-height:1;
}
.stat-lbl{
  font-size:1.3rem;
  color:var(--text-secondary);
  font-weight:500;
}

.fee-card{
  background:var(--white);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);
  border:1px solid var(--border-light);
  margin-bottom:2rem;
  overflow:hidden;
}
.fee-card-hdr{
  padding:1.6rem 2rem;
  background:linear-gradient(135deg, var(--primary-mist) 0%, var(--white) 100%);
  border-bottom:1px solid var(--border-light);
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:1rem;
}
.fee-card-hdr h3{
  font-family:var(--font-heading);
  font-size:1.8rem;
  font-weight:800;
  color:var(--primary-dark);
  margin:0;
}
.fee-card-body{ padding:2rem; }

.fee-section-heading-wrap{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  margin-bottom:1rem;
}
.fee-section-heading{
  font-family:var(--font-heading);
  font-size:1.5rem;
  font-weight:700;
  color:var(--primary);
  text-transform:uppercase;
  letter-spacing:.06em;
  margin:1.4rem 0 .8rem;
  display:flex;
  align-items:center;
  gap:.8rem;
}
.fee-section-heading i{ color:var(--accent); }
.fee-section-heading:first-child{ margin-top:0; }
.fee-section-help{
  font-size:1.3rem;
  color:var(--text-muted);
  font-style:italic;
  margin-bottom:.8rem;
}

.fee-table-wrap{
  overflow-x:auto;
  border-radius:var(--r-md);
  border:1px solid var(--border-light);
}
.fee-table{
  width:100%;
  border-collapse:collapse;
  background:var(--white);
}
.fee-table thead th{
  background:var(--gray-50);
  font-family:var(--font-heading);
  font-size:1.2rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--text-secondary);
  padding:1.1rem 1.4rem;
  text-align:left;
  border-bottom:2px solid var(--border);
  white-space:nowrap;
}
.fee-table tbody td{
  padding:1.1rem 1.4rem;
  font-size:1.4rem;
  color:var(--text);
  border-bottom:1px solid var(--border-light);
  vertical-align:middle;
}
.fee-table tbody tr:hover{ background:var(--bg); }
.fee-table tbody tr:last-child td{ border-bottom:none; }

.fee-empty-state{
  text-align:center;
  padding:4rem 2rem;
}
.fee-empty-icon{
  font-size:4.8rem;
  color:var(--text-muted);
  opacity:.5;
  margin-bottom:1rem;
}
.fee-empty-text{
  font-size:1.45rem;
  color:var(--text-secondary);
  margin:0;
}
.fee-list-empty{ color:var(--text-muted); font-style:italic; padding:2rem; text-align:center; }
.fee-no-items{ color:var(--text-muted); font-style:italic; padding:1rem; }

.fee-cell-items{
  display:flex;
  flex-direction:column;
  gap:.5rem;
}
.fee-item-row{
  display:flex;
  align-items:center;
  gap:.6rem;
  padding:.6rem .8rem;
  background:var(--gray-50);
  border:1px solid var(--border-light);
  border-radius:var(--r-sm);
}
.fee-item-name{ font-weight:600; flex:1; }
.fee-item-desc{ color:var(--text-muted); font-size:1.25rem; }
.fee-item-choice{ display:inline-flex; align-items:center; gap:.4rem; font-size:1.3rem; color:var(--text-secondary); }
.fee-item-selector{ /* inner select */ }
.fee-item-chk{
  width:1.6rem;
  height:1.6rem;
  accent-color:var(--primary);
}
.fee-cell-empty{ color:var(--text-muted); font-style:italic; }
.fee-cell-empty-row{
  text-align:center;
  padding:2rem;
  color:var(--text-muted);
  font-style:italic;
}
.fee-items-list{
  display:flex;
  flex-wrap:wrap;
  gap:.4rem;
  margin-top:.5rem;
}
.fee-amount-section{ margin-top:1.4rem; }

.fee-inline-form{ display:inline-flex; gap:.5rem; align-items:center; }

.fee-form-row{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:1.4rem;
  margin-bottom:1.4rem;
}
.fee-form-actions{
  display:flex;
  gap:.8rem;
  justify-content:flex-end;
  padding-top:1.4rem;
  border-top:1px solid var(--border-light);
  margin-top:1rem;
}

.fee-link{
  color:var(--primary);
  text-decoration:none;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.4rem 1rem;
  border-radius:var(--r-sm);
  transition:all var(--t-fast);
}
.fee-link:hover{ background:var(--primary-mist); color:var(--primary-dark); }

/* Status badges */
.fee-status-active{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.3rem 1rem;
  background:var(--primary-mist);
  color:var(--primary-dark);
  border-radius:var(--r-full);
  font-size:1.2rem;
  font-weight:700;
}
.fee-status-inactive{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.3rem 1rem;
  background:#fef2f2;
  color:#991b1b;
  border-radius:var(--r-full);
  font-size:1.2rem;
  font-weight:700;
}

.tbl-btn{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.45rem .9rem;
  background:var(--gray-100);
  color:var(--text) !important;
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  font-size:1.2rem;
  font-weight:600;
  cursor:pointer;
  text-decoration:none !important;
  transition:all var(--t-fast);
}
.tbl-btn:hover{ background:var(--primary); color:var(--white) !important; border-color:var(--primary); }
.tbl-btn-blue{ background:#dbeafe; color:#1e3a8a !important; border-color:#bfdbfe; }
.tbl-btn-blue:hover{ background:#2563eb; color:var(--white) !important; border-color:#2563eb; }
.tbl-btn-red{ background:#fee2e2; color:#991b1b !important; border-color:#fecaca; }
.tbl-btn-red:hover{ background:#dc2626; color:var(--white) !important; border-color:#dc2626; }
.tbl-btn-green{ background:var(--primary-mist); color:var(--primary-dark) !important; border-color:var(--primary); }
.tbl-btn-green:hover{ background:var(--primary); color:var(--white) !important; }

/* Modal (fee-modal) */
.fee-modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(4,31,18,.78);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  z-index:99999;
  display:none;
  align-items:flex-start;
  justify-content:center;
  padding:2rem;
  overflow-y:auto;
}
.fee-modal-overlay.open,
.fee-modal-overlay[style*="display:flex"],
.fee-modal-overlay[style*="display: block"]{ display:flex; }
.fee-modal{
  background:var(--white);
  border-radius:var(--r-lg);
  max-width:56rem;
  width:100%;
  padding:2.6rem 2.4rem;
  box-shadow:var(--shadow-2xl);
  margin-top:4rem;
  position:relative;
  animation:msModalIn .25s ease-out;
}
.fee-modal-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:1.4rem;
  margin-bottom:1.4rem;
}
.fee-modal-actions{
  display:flex;
  gap:.8rem;
  justify-content:flex-end;
  margin-top:1.4rem;
  padding-top:1.4rem;
  border-top:1px solid var(--border-light);
}
.fee-modal-close{
  position:absolute;
  top:1rem;
  right:1.2rem;
  width:3.4rem;
  height:3.4rem;
  background:var(--gray-100);
  border:none;
  color:var(--text-secondary);
  border-radius:50%;
  font-size:2rem;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.fee-modal-close:hover{ background:var(--gray-200); }
.fee-modal-icon{
  width:4rem;
  height:4rem;
  background:var(--primary-mist);
  color:var(--primary);
  border-radius:var(--r-md);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:1.7rem;
  margin-right:1rem;
}
.fee-modal-note{
  background:var(--gray-50);
  border-radius:var(--r-md);
  padding:1rem 1.4rem;
  font-size:1.3rem;
  color:var(--text-secondary);
  margin-bottom:1.4rem;
}

/* Toast */
.fee-toast{
  position:fixed;
  bottom:2.4rem;
  right:2.4rem;
  background:var(--primary-dark);
  color:var(--white);
  padding:1.4rem 2rem;
  border-radius:var(--r-md);
  box-shadow:var(--shadow-2xl);
  font-size:1.45rem;
  z-index:999999;
  display:flex;
  align-items:center;
  gap:1rem;
  animation:msModalIn .25s ease-out;
}
.fee-toast i{ font-size:1.8rem; }

/* =====================================================
   FEE PAGE EXTENSIONS
   .aeb-, .cd-, .efm-, .fic-, .fch-, .fif-, .fir-, .fsb-*
   ===================================================== */

/* Amount editor block */
.aeb-label{
  font-family:var(--font-heading);
  font-size:1.3rem;
  font-weight:700;
  color:var(--primary);
  text-transform:uppercase;
  letter-spacing:.04em;
  margin-bottom:.6rem;
}

/* Class dropdown items */
.cd-item{ /* already styled above */ }

/* Edit fee modal */
.efm-context{
  background:var(--primary-mist);
  border-radius:var(--r-md);
  padding:1.2rem 1.6rem;
  margin-bottom:1.6rem;
  font-size:1.4rem;
  color:var(--primary-dark);
}
.efm-context strong{ color:var(--text); }

/* Fee item card */
.fic-info{
  background:var(--white);
  border:1px solid var(--border-light);
  border-radius:var(--r-md);
  padding:1.2rem 1.4rem;
  margin-bottom:.8rem;
}
.fic-name{
  font-family:var(--font-heading);
  font-size:1.45rem;
  font-weight:700;
  color:var(--text);
  margin-bottom:.2rem;
}
.fic-desc{
  font-size:1.3rem;
  color:var(--text-muted);
  margin-bottom:.4rem;
}
.fic-tick{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  color:var(--primary);
  font-size:1.3rem;
  font-weight:600;
}
.fic-check{ /* checked indicator */ }

/* Fee choice header */
.fch-left{
  font-family:var(--font-heading);
  font-size:1.4rem;
  font-weight:700;
  color:var(--primary);
  margin-bottom:.6rem;
}
.fch-icon{
  width:3.4rem;
  height:3.4rem;
  background:var(--primary-mist);
  color:var(--primary);
  border-radius:var(--r-sm);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-right:.8rem;
}
.fch-sub{ font-size:1.3rem; color:var(--text-muted); }
.fch-toggle{
  display:flex;
  align-items:center;
  gap:.6rem;
  padding:.5rem 1rem;
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  font-size:1.3rem;
  cursor:pointer;
  transition:all var(--t-fast);
}
.fch-toggle:hover{ background:var(--primary-mist); border-color:var(--primary); }

/* Fee inline form fields */
.fif-fields{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:1rem;
  margin-bottom:1rem;
}
.fif-action{
  display:flex;
  gap:.6rem;
  justify-content:flex-end;
  margin-top:1rem;
}

/* Fee inline row */
.fir-info{
  flex:1;
  font-size:1.4rem;
  color:var(--text);
}
.fir-actions{
  display:flex;
  gap:.4rem;
  flex-shrink:0;
}

/* Fee sidebar block */
.fsb-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:1rem 1.4rem;
  border-bottom:1px solid var(--border-light);
}
.fsb-item:last-child{ border-bottom:none; }
.fsb-label{
  font-size:1.35rem;
  color:var(--text-secondary);
  font-weight:500;
}
.fsb-val{
  font-family:var(--font-heading);
  font-size:1.4rem;
  font-weight:700;
  color:var(--primary);
}

@media(max-width:991px){
  .fee-modal-grid,
  .fee-form-row,
  .fif-fields{ grid-template-columns:1fr; }
}

/* =====================================================
   STAFF DIRECTORY (.dir-*)
   ===================================================== */
.dir-modern{
  background:var(--bg);
  padding:0 0 5rem;
  min-height:60vh;
}
.dir-modern .container{ padding-top:1rem; }

.dir-hero{
  background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color:var(--white);
  padding:4rem 0;
  border-radius:var(--r-lg);
  margin-bottom:2.4rem;
  position:relative;
  overflow:hidden;
  border-bottom:4px solid var(--accent);
}
.dir-hero::before{
  content:'';
  position:absolute;
  top:-8rem; right:-6rem;
  width:24rem; height:24rem;
  border-radius:50%;
  background:rgba(255,255,255,.06);
}
.dir-hero h1{
  font-family:var(--font-heading);
  font-size:clamp(2.4rem,4vw,3.4rem);
  font-weight:800;
  color:var(--white);
  margin:0 0 .8rem;
  letter-spacing:-.02em;
  position:relative;
}
.dir-hero p{
  color:rgba(255,255,255,.85);
  font-size:1.5rem;
  margin:0;
  max-width:60rem;
  position:relative;
}

.dir-toolbar{
  background:var(--white);
  border-radius:var(--r-md);
  border:1px solid var(--border-light);
  padding:1.4rem 1.8rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.4rem;
  flex-wrap:wrap;
  margin-bottom:1.6rem;
}
.dir-search{
  flex:1 1 28rem;
  max-width:40rem;
  padding:1rem 1.6rem;
  border:2px solid var(--border);
  border-radius:var(--r-sm);
  font-family:var(--font-body);
  font-size:1.45rem;
  color:var(--text);
  background:var(--white);
  outline:none;
  transition:border-color var(--t-base), box-shadow var(--t-base);
}
.dir-search:focus{ border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-glow); }

.dir-filters{
  display:flex;
  align-items:center;
  gap:.8rem;
  flex-wrap:wrap;
}

.dir-pattern{
  display:flex;
  align-items:center;
  gap:.8rem;
  padding:1.4rem 1.8rem;
  background:var(--primary-mist);
  border:1px solid var(--primary);
  border-radius:var(--r-md);
  margin-bottom:1.6rem;
  font-size:1.4rem;
  color:var(--primary-dark);
}
.dir-pattern i{ color:var(--primary); font-size:1.6rem; }

.dir-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(28rem, 1fr));
  gap:1.6rem;
}
.dir-empty{
  grid-column:1 / -1;
  text-align:center;
  padding:5rem 2rem;
  background:var(--white);
  border:2px dashed var(--border);
  border-radius:var(--r-lg);
  color:var(--text-secondary);
}
.dir-empty i{
  font-size:4.8rem;
  color:var(--text-muted);
  opacity:.5;
  display:block;
  margin-bottom:1rem;
}

.dir-filter{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.5rem 1.2rem;
  background:var(--gray-100);
  border:1px solid var(--border);
  border-radius:var(--r-full);
  font-size:1.25rem;
  font-weight:600;
  cursor:pointer;
  transition:all var(--t-fast);
}
.dir-filter:hover,
.dir-filter.active{
  background:var(--primary);
  color:var(--white);
  border-color:var(--primary);
}
.dir-init{ /* initial letter avatar */ }

@media(max-width:767px){
  .dir-hero{ padding:2.8rem 1.6rem; }
  .dir-toolbar{ flex-direction:column; align-items:stretch; }
  .dir-search{ max-width:none; }
  .dir-grid{ grid-template-columns:1fr; }
}

/* =====================================================
   ADMIN PAYMENT MANAGEMENT (.pm-*, .stat-*)
   ===================================================== */
.pm-page{
  background:var(--bg);
  padding:0 0 5rem;
  min-height:60vh;
}
.pm-page .container{ padding-top:1rem; }

.pm-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
  flex-wrap:wrap;
  background:var(--white);
  border-radius:var(--r-lg);
  padding:1.8rem 2rem;
  box-shadow:var(--shadow-card);
  border:1px solid var(--border-light);
  margin-bottom:2rem;
  border-left:5px solid var(--primary);
}
.pm-topbar h3{
  font-family:var(--font-heading);
  font-size:2rem;
  font-weight:800;
  color:var(--text);
  margin:0 0 .4rem;
  letter-spacing:-.01em;
}
.pm-topbar p{ color:var(--text-secondary); font-size:1.4rem; margin:0; }

.stats-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(18rem, 1fr));
  gap:1.4rem;
  margin-bottom:2rem;
}

.pending-banner{
  display:flex;
  align-items:center;
  gap:1.2rem;
  padding:1.4rem 1.8rem;
  background:var(--primary-mist);
  border:1px solid var(--primary);
  border-left:5px solid var(--accent);
  border-radius:var(--r-md);
  margin-bottom:2rem;
  font-size:1.45rem;
  color:var(--primary-dark);
}
.pending-banner i{ font-size:1.8rem; color:var(--accent); }

.progress{
  display:block;
  width:100%;
  height:.8rem;
  background:var(--gray-200);
  border-radius:var(--r-full);
  overflow:hidden;
}
.progress::-webkit-progress-bar,
.progress::-webkit-progress-value{ background:var(--primary); border-radius:var(--r-full); }
.progress::-moz-progress-bar{ background:var(--primary); }

.icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:3.6rem;
  height:3.6rem;
  background:var(--primary-mist);
  color:var(--primary);
  border-radius:var(--r-md);
  font-size:1.4rem;
  flex-shrink:0;
}

.pb-count{
  font-family:var(--font-heading);
  font-size:2.4rem;
  font-weight:800;
  color:var(--accent-dark);
  margin-right:.4rem;
}
.pb-text{ flex:1; }
.pb-icon{ font-size:2rem; color:var(--accent); margin-right:.8rem; }

.alert{
  display:flex;
  align-items:center;
  gap:1rem;
  padding:1.4rem 1.8rem;
  border-radius:var(--r-md);
  font-size:1.4rem;
  font-weight:500;
  margin-bottom:1.6rem;
  border:1px solid transparent;
}
.alert i{ font-size:1.6rem; flex-shrink:0; }
.alert-success{ background:var(--primary-mist); color:var(--primary-dark); border-color:var(--primary); }
.alert-danger{ background:#fef2f2; color:#991b1b; border-color:#fecaca; }
.alert-warning{ background:#fffbeb; color:#92400e; border-color:#fde68a; }
.alert-info{ background:#eff6ff; color:#1e3a8a; border-color:#bfdbfe; }

@media(max-width:767px){
  .pm-topbar{ flex-direction:column; align-items:flex-start; padding:1.4rem; }
  .pm-topbar h3{ font-size:1.6rem; }
  .pending-banner{ padding:1.2rem 1.4rem; font-size:1.35rem; }
}

/* =====================================================
   RESPONSIVE GLOBAL CLEANUP
   ===================================================== */
@media(max-width:991px){
  .ms-topbar,
  .pq-topbar,
  .pm-topbar,
  .ss-topbar{ flex-direction:column; align-items:flex-start; }
  .ms-actions,
  .pq-actions,
  .pm-actions{ width:100%; }
}

/* =====================================================
   PORTAL TOPBAR (.ptb-*) — used by portal_topbar.inc.php
   ===================================================== */
.ptb{
  background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color:var(--white);
  padding:3.4rem 0 2.8rem;
  position:relative;
  overflow:hidden;
  margin-bottom:3.2rem;
  border-bottom:4px solid var(--accent);
}
.ptb::before{
  content:'';
  position:absolute;
  top:-8rem; right:-6rem;
  width:24rem; height:24rem;
  border-radius:50%;
  background:rgba(255,255,255,.06);
  pointer-events:none;
}
.ptb::after{
  content:'';
  position:absolute;
  bottom:-10rem; left:-10rem;
  width:28rem; height:28rem;
  border-radius:50%;
  background:rgba(255,255,255,.04);
  pointer-events:none;
}
.ptb .container{ position:relative; z-index:1; }
.ptb-inner{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:2rem;
  flex-wrap:wrap;
}
.ptb-main{ flex:1 1 30rem; min-width:0; }
.ptb-bc{
  list-style:none;
  margin:0 0 1.2rem;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.6rem;
  font-size:1.3rem;
  color:rgba(255,255,255,.72);
}
.ptb-bc li{ display:inline-flex; align-items:center; gap:.6rem; }
.ptb-bc li + li::before{
  content:'\f105';
  font-family:'FontAwesome';
  font-size:1.1rem;
  color:rgba(255,255,255,.4);
  margin-right:.2rem;
}
.ptb-bc li a{ color:rgba(255,255,255,.85); text-decoration:none; transition:color var(--t-fast); }
.ptb-bc li a:hover{ color:var(--white); }
.ptb-bc li.active{ color:var(--white); font-weight:600; }

.ptb-title-row{
  display:flex;
  align-items:center;
  gap:1.4rem;
  flex-wrap:wrap;
  margin-bottom:.8rem;
}
.ptb-avatar{
  width:5.6rem;
  height:5.6rem;
  border-radius:50%;
  background:rgba(255,255,255,.16);
  border:2px solid rgba(255,255,255,.3);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-heading);
  font-size:1.8rem;
  font-weight:800;
  color:var(--white);
  overflow:hidden;
  flex-shrink:0;
}
.ptb-avatar img{ width:100%; height:100%; object-fit:cover; }
.ptb-avatar i{ font-size:1.8rem; }

/* Beautiful ring avatar (matches result_ca_list.php) — scoped for the dark topbar */
.ptb .rl-avatar-wrap{
  position:relative;
  flex-shrink:0;
}
.ptb .rl-avatar-ring{
  width:5.6rem; height:5.6rem;
  border-radius:50%;
  background:rgba(255,255,255,.18);
  border:3px solid var(--white);
  box-shadow:0 0 0 3px rgba(255,255,255,.45), 0 8px 22px rgba(0,0,0,.28);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  position:relative;
  transition:transform var(--t-slow);
}
.ptb:hover .rl-avatar-ring{ transform:scale(1.05); }
.ptb .rl-avatar{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
.ptb .rl-avatar-fallback{
  font-family:var(--font-heading);
  font-size:1.9rem; font-weight:800;
  color:var(--white);
  letter-spacing:-.02em;
  text-transform:uppercase;
}
.ptb .rl-avatar-fallback i{ font-size:1.8rem; font-style:normal; }
.ptb .rl-status-dot{
  position:absolute;
  bottom:.25rem; right:.25rem;
  width:1.25rem; height:1.25rem;
  background:var(--gold);
  border:2px solid var(--white);
  border-radius:50%;
  box-shadow:0 2px 6px rgba(0,0,0,.35);
}

.ptb-title{
  font-family:var(--font-heading);
  font-size:clamp(2.2rem,3.6vw,3.2rem);
  font-weight:800;
  color:var(--white);
  margin:0;
  letter-spacing:-.02em;
  line-height:1.15;
  display:inline-flex;
  align-items:center;
  gap:1rem;
}
.ptb-title i{ color:rgba(255,255,255,.92); }

.ptb-sub{
  color:rgba(255,255,255,.85);
  font-size:1.45rem;
  margin:.4rem 0 0;
  line-height:1.65;
  max-width:62rem;
}

.ptb-actions{
  display:flex;
  align-items:center;
  gap:.6rem;
  flex-wrap:wrap;
  flex-shrink:0;
}
.ptb-btn{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:.8rem 1.4rem;
  background:var(--white);
  color:var(--primary) !important;
  border:1px solid rgba(255,255,255,.2);
  border-radius:var(--r-sm);
  font-family:var(--font-heading);
  font-size:1.3rem;
  font-weight:700;
  text-decoration:none !important;
  cursor:pointer;
  transition:all var(--t-base);
  white-space:nowrap;
}
.ptb-btn i{ font-size:1.2rem; }
.ptb-btn:hover{ transform:translateY(-2px); box-shadow:0 8px 22px rgba(0,0,0,.18); }
.ptb-btn.btn-sm{ padding:.5rem 1rem; font-size:1.2rem; }
.ptb-btn.btn-gold{
  background:linear-gradient(135deg,var(--gold),var(--accent));
  color:var(--white) !important;
  border-color:transparent;
}
.ptb-btn.btn-gold:hover{ background:linear-gradient(135deg,var(--accent),var(--accent-dark)); }
.ptb-btn.btn-portal{ background:var(--primary-light); color:var(--white) !important; border-color:var(--primary-light); }
.ptb-btn.btn-portal:hover{ background:var(--white); color:var(--primary) !important; }
.ptb-btn.btn-ghost{ background:transparent; color:var(--white) !important; border-color:rgba(255,255,255,.3); }
.ptb-btn.btn-ghost:hover{ background:rgba(255,255,255,.12); }
.ptb-btn.btn-danger{ background:#dc2626; color:var(--white) !important; border-color:#dc2626; }
.ptb-btn.btn-danger:hover{ background:#b91c1c; border-color:#b91c1c; }

@media(max-width:767px){
  .ptb{ padding:2.6rem 0 2.2rem; margin-bottom:2rem; }
  .ptb-inner{ flex-direction:column; align-items:flex-start; }
  .ptb-actions{ width:100%; }
  .ptb-avatar{ width:4.4rem; height:4.4rem; font-size:1.4rem; }
  .ptb .rl-avatar-ring{ width:4.4rem; height:4.4rem; }
  .ptb .rl-avatar-fallback{ font-size:1.5rem; }
  .ptb .rl-status-dot{ width:1rem; height:1rem; }
  .ptb-title{ font-size:2.2rem; }
}

/* =====================================================
   PORTAL.PHP body (.portal-wrap, .p-*, .pf-*)
   ===================================================== */
.portal-wrap{
  background:var(--bg);
  padding:0 0 5rem;
  min-height:60vh;
}
.portal-wrap .container{ padding-top:1rem; }

.p-stats-row{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(18rem, 1fr));
  gap:1.6rem;
  margin-bottom:3rem;
}
.p-stat-card{
  display:flex;
  align-items:center;
  gap:1.6rem;
  padding:2rem 1.8rem;
  background:var(--white);
  border:1px solid var(--border-light);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);
  color:var(--text) !important;
  text-decoration:none !important;
  transition:all var(--t-base);
  position:relative;
  overflow:hidden;
}
.p-stat-card::before{
  content:'';
  position:absolute;
  top:0; left:0;
  width:5px; height:100%;
  background:var(--primary);
  transition:width var(--t-base);
}
.p-stat-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-hover);
  border-color:var(--primary);
}
.p-stat-card:hover::before{ width:8px; }
.p-stat-icon{
  width:5.4rem;
  height:5.4rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--primary-mist);
  color:var(--primary);
  border-radius:var(--r-md);
  font-size:2.4rem;
  flex-shrink:0;
}
.p-stat-card.sc-fee .p-stat-icon{ background:rgba(217,119,6,.12); color:var(--accent); }
.p-stat-card.sc-fee::before{ background:var(--accent); }
.p-stat-card.sc-att .p-stat-icon{ background:rgba(13,148,136,.12); color:#0d9488; }
.p-stat-card.sc-att::before{ background:#0d9488; }
.p-stat-card.sc-badge .p-stat-icon{ background:rgba(217,119,6,.12); color:var(--gold); }
.p-stat-card.sc-badge::before{ background:var(--gold); }
.p-stat-card.sc-announce .p-stat-icon{ background:rgba(37,99,235,.12); color:#2563eb; }
.p-stat-card.sc-announce::before{ background:#2563eb; }
.p-stat-card.sc-health .p-stat-icon{ background:rgba(220,38,38,.12); color:#dc2626; }
.p-stat-card.sc-health::before{ background:#dc2626; }
.p-stat-text{ flex:1 1 auto; min-width:0; }
.p-stat-val{
  font-family:var(--font-heading);
  font-size:2.4rem;
  font-weight:800;
  color:var(--text);
  letter-spacing:-.02em;
  line-height:1.1;
  margin-bottom:.2rem;
}
.p-stat-lbl{
  font-size:1.3rem;
  color:var(--text-secondary);
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.p-content{ padding:0 1.6rem; }

.p-welcome{
  display:flex;
  align-items:center;
  gap:1.6rem;
  padding:1.8rem 2.2rem;
  background:linear-gradient(135deg, var(--primary-mist) 0%, var(--white) 100%);
  border:1px solid var(--primary);
  border-left:5px solid var(--primary);
  border-radius:var(--r-md);
  margin-bottom:2rem;
}
.p-welcome-icon{
  width:4.4rem;
  height:4.4rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--primary);
  color:var(--white);
  border-radius:50%;
  font-size:1.8rem;
  flex-shrink:0;
}
.p-welcome-text strong{
  display:block;
  font-family:var(--font-heading);
  font-size:1.6rem;
  font-weight:700;
  color:var(--text);
  margin-bottom:.2rem;
}
.p-welcome-text span{ color:var(--text-secondary); font-size:1.35rem; }

.p-inactive-banner{
  display:flex;
  align-items:center;
  gap:1.2rem;
  padding:1.6rem 2rem;
  background:#fef2f2;
  border:1px solid #fecaca;
  border-left:5px solid #dc2626;
  border-radius:var(--r-md);
  margin-bottom:2rem;
  color:#991b1b;
}
.p-inactive-banner strong{ display:block; font-size:1.5rem; margin-bottom:.2rem; }

.p-layout{
  display:grid;
  grid-template-columns:minmax(0, 32rem) minmax(0, 1fr);
  gap:2.4rem;
  align-items:flex-start;
}

.p-sidebar{ display:flex; flex-direction:column; gap:1.6rem; position:sticky; top:2rem; }

.p-profile-card{
  background:var(--white);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);
  border:1px solid var(--border-light);
  overflow:hidden;
}
.p-profile-head{
  display:flex;
  align-items:center;
  gap:.8rem;
  padding:1.4rem 1.8rem;
  background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color:var(--white);
  font-family:var(--font-heading);
  font-size:1.4rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.p-profile-head i{ color:var(--gold); }
.p-profile-body{ padding:1rem 1.8rem 1.6rem; }
.p-info-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:.9rem 0;
  border-bottom:1px solid var(--border-light);
  font-size:1.35rem;
  gap:1rem;
}
.p-info-row:last-child{ border-bottom:none; }
.p-info-lbl{
  color:var(--text-secondary);
  font-weight:500;
  flex-shrink:0;
}
.p-info-val{
  color:var(--text);
  font-weight:600;
  text-align:right;
  word-break:break-word;
}

.p-side-nav{
  background:var(--white);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);
  border:1px solid var(--border-light);
  padding:1rem 0;
  display:flex;
  flex-direction:column;
}
.p-side-nav-title{
  padding:1rem 1.8rem .6rem;
  font-family:var(--font-heading);
  font-size:1.1rem;
  font-weight:700;
  color:var(--text-muted);
  text-transform:uppercase;
  letter-spacing:.08em;
}
.p-side-nav a{
  display:flex;
  align-items:center;
  gap:1rem;
  padding:.9rem 1.8rem;
  color:var(--text) !important;
  text-decoration:none !important;
  font-size:1.4rem;
  font-weight:500;
  border-left:3px solid transparent;
  transition:all var(--t-fast);
}
.p-side-nav a:hover{
  background:var(--primary-mist);
  color:var(--primary) !important;
  border-left-color:var(--primary);
  padding-left:2.2rem;
}
.p-side-nav a i{ color:var(--primary); width:1.6rem; text-align:center; }

.p-side-feed{
  background:var(--white);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);
  border:1px solid var(--border-light);
  padding:1.6rem 1.8rem;
  border-left:3px solid var(--primary);
}
.p-side-feed-title{
  font-family:var(--font-heading);
  font-size:1.4rem;
  font-weight:700;
  color:var(--primary);
  margin:0 0 1rem;
  display:flex;
  align-items:center;
  gap:.6rem;
}
.p-side-feed-empty{ color:var(--text-muted); font-style:italic; font-size:1.3rem; padding:.4rem 0; }
.p-side-feed-item{
  padding:.7rem 0;
  border-bottom:1px solid var(--border-light);
  font-size:1.3rem;
  color:var(--text);
  line-height:1.5;
}
.p-side-feed-item:last-child{ border-bottom:none; }
.pf-meta{
  display:flex;
  align-items:center;
  gap:.4rem;
  font-size:1.15rem;
  color:var(--text-muted);
  margin-top:.3rem;
}
.pf-meta i{ font-size:1rem; }

.p-main{ min-width:0; }

.p-modules-wrap{ margin-bottom:2.4rem; }
.p-section-title{
  font-family:var(--font-heading);
  font-size:1.6rem;
  font-weight:700;
  color:var(--text);
  margin:0 0 1.2rem;
  letter-spacing:-.01em;
  display:flex;
  align-items:center;
  gap:.6rem;
  padding-bottom:.6rem;
  border-bottom:2px solid var(--border-light);
}
.p-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(18rem, 1fr));
  gap:1.4rem;
}
.p-module{
  display:flex;
  align-items:center;
  gap:1.4rem;
  padding:1.6rem 1.8rem;
  background:var(--white);
  border:1px solid var(--border-light);
  border-radius:var(--r-md);
  color:var(--text) !important;
  text-decoration:none !important;
  font-family:var(--font-heading);
  font-size:1.4rem;
  font-weight:600;
  transition:all var(--t-base);
  position:relative;
  overflow:hidden;
}
.p-module::after{
  content:'';
  position:absolute;
  bottom:0; left:0;
  width:0; height:3px;
  background:var(--primary);
  transition:width var(--t-base);
}
.p-module:hover{
  transform:translateY(-3px);
  border-color:var(--primary);
  box-shadow:var(--shadow-hover);
  background:var(--primary-mist);
}
.p-module:hover::after{ width:100%; }
.p-module-icon{
  width:5rem;
  height:5rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--primary-mist);
  color:var(--primary);
  border-radius:var(--r-md);
  font-size:2.2rem;
  flex-shrink:0;
  transition:all var(--t-base);
}
.p-module:hover .p-module-icon{
  color:var(--white);
  transform:scale(1.05) rotate(-5deg);
}
.p-module-icon.mi-blue{   background:rgba(37,99,235,.12);  color:#2563eb; }
.p-module-icon.mi-green{  background:rgba(29,132,80,.12);  color:var(--primary-light); }
.p-module-icon.mi-orange{ background:rgba(217,119,6,.12); color:var(--accent); }
.p-module-icon.mi-purple{ background:rgba(124,58,237,.12); color:#7c3aed; }
.p-module-icon.mi-red{    background:rgba(220,38,38,.12); color:#dc2626; }
.p-module-icon.mi-teal{   background:rgba(13,148,136,.12); color:#0d9488; }
.p-module-icon.mi-yellow{ background:rgba(202,138,4,.12); color:#ca8a04; }
.p-module-icon.mi-dark{   background:rgba(31,41,55,.12);  color:#1f2937; }
.p-module:hover .p-module-icon{ background:var(--primary) !important; color:var(--white) !important; }

.p-module-label{ flex:1 1 auto; min-width:0; word-break:break-word; }

/* ── Yearbook module — matches the .p-module family but with a
      proper two-line label, a corner status badge, and clean
      enabled/disabled treatment that scales on small screens. ── */
.p-module-yb{ position:relative; }
.p-module-yb .p-module-text{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:.2rem;
}
.p-module-yb .p-module-label{
  font-family:var(--font-heading);
  font-size:1.4rem;
  font-weight:700;
  color:var(--text);
  line-height:1.25;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.p-module-yb .p-module-sub{
  font-size:1.15rem;
  font-weight:500;
  color:var(--text-muted);
  line-height:1.3;
  display:flex;
  align-items:center;
  gap:.45rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.p-module-yb .p-module-sub i{ color:var(--primary); font-size:1.05rem; }

/* Corner status badge — sits at the top-right of the card, like a
   notification chip on iOS/Android so it stays out of the label area. */
.p-module-yb-status{
  position:absolute;
  top:.9rem;
  right:.9rem;
  width:2.4rem;
  height:2.4rem;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:1.1rem;
  border:2px solid var(--white);
  box-shadow:0 2px 6px rgba(0,0,0,.12);
  z-index:1;
}
.p-module-yb-status.is-ready{
  background:var(--primary);
  color:var(--white);
}
.p-module-yb-status.is-soon{
  background:#e2e8f0;
  color:#94a3b8;
}

/* Lock glyph sits inside the icon tile for disabled cards */
.p-module-yb .p-module-icon .fa-lock{ font-size:1.7rem; }
.p-module-yb-glyph{ font-size:2.2rem; line-height:1; }

/* ── Enabled (active) state — subtle elevation + primary stripe ── */
.p-module-yb.is-enabled{
  border-color:color-mix(in srgb, var(--primary) 40%, var(--border-light));
  background:linear-gradient(180deg, var(--white) 0%, color-mix(in srgb, var(--primary-mist) 35%, var(--white)) 100%);
}
.p-module-yb.is-enabled::before{
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:3px;
  background:linear-gradient(90deg, var(--primary) 0%, var(--gold,#c9a84c) 100%);
}
.p-module-yb.is-enabled:hover{
  background:linear-gradient(180deg, var(--white) 0%, var(--primary-mist) 100%);
}
.p-module-yb.is-enabled:hover .p-module-yb-status.is-ready{
  transform:scale(1.1);
  transition:transform var(--t-fast);
}

/* ── Disabled state — cleanly greyed, still tappable for tooltip ── */
.p-module-yb.is-disabled{
  cursor:not-allowed;
  opacity:.78;
}
.p-module-yb.is-disabled .p-module-icon{
  background:rgba(148,163,184,.14) !important;
  color:#94a3b8 !important;
}
.p-module-yb.is-disabled .p-module-label{ color:var(--text-muted); }
.p-module-yb.is-disabled .p-module-sub{ color:#94a3b8; }
.p-module-yb.is-disabled:hover{
  transform:none;
  box-shadow:var(--shadow-sm);
  border-color:var(--border-light);
  background:var(--white);
}
.p-module-yb.is-disabled:hover::after{ width:0; }
.p-module-yb.is-disabled:hover .p-module-icon{ background:rgba(148,163,184,.14) !important; color:#94a3b8 !important; transform:none; }

/* Per-arm accent — the icon tile colour reflects Primary vs Secondary
   so the student instantly knows which yearbook they're looking at. */
.p-module-yb.yb-primary .p-module-icon{ background:rgba(217,119,6,.14); color:var(--accent); }
.p-module-yb.yb-secondary .p-module-icon{ background:var(--primary-mist); color:var(--primary-light); }
.p-module-yb.yb-primary.is-enabled:hover .p-module-icon,
.p-module-yb.yb-primary .p-module:hover .p-module-icon{ background:var(--accent) !important; color:var(--white) !important; }
.p-module-yb.yb-secondary.is-enabled:hover .p-module-icon{ background:var(--primary) !important; color:var(--white) !important; }
.p-module-yb.yb-primary.is-enabled:hover .p-module-icon,
.p-module-yb.yb-secondary.is-enabled:hover .p-module-icon{ transform:scale(1.05) rotate(-5deg); }

@media(max-width:480px){
  .p-module-yb-status{ width:2.1rem; height:2.1rem; font-size:1rem; top:.7rem; right:.7rem; }
  .p-module-yb .p-module-label{ font-size:1.3rem; }
  .p-module-yb .p-module-sub{ font-size:1.05rem; }
}

.p-restricted-card{
  background:var(--white);
  border-radius:var(--r-lg);
  padding:4.8rem 2rem;
  text-align:center;
  box-shadow:var(--shadow-card);
  border:1px solid var(--border-light);
}
.p-restricted-card h3{
  font-family:var(--font-heading);
  font-size:1.8rem;
  font-weight:800;
  color:var(--text);
  margin:0 0 .8rem;
}
.p-restricted-card p{ color:var(--text-secondary); font-size:1.4rem; margin:0; }

@media(max-width:991px){
  .p-layout{ grid-template-columns:1fr; }
  .p-sidebar{ position:static; }
}
@media(max-width:767px){
  .p-stats-row{ grid-template-columns:1fr 1fr; gap:1rem; }
  .p-stat-card{ padding:1.4rem 1.2rem; gap:1rem; }
  .p-stat-icon{ width:4.2rem; height:4.2rem; font-size:1.8rem; }
  .p-stat-val{ font-size:1.8rem; }
  .p-grid{ grid-template-columns:1fr; }
  .p-welcome{ flex-direction:column; text-align:center; }
}

/* =====================================================
   PARENT PAGES (.pay-*, .ab-*, .overdue-, .bal-, .bb-,
   .ph-, .ps-, .step-, .method-, .fsi-, .fees-,
   .es-, .summary-, .amount-*)
   ===================================================== */

/* Payment / wallet wrappers */
.pay-page,
.pay-wrap{
  background:var(--bg);
  padding:0 0 5rem;
  min-height:60vh;
}
.pay-page .container,
.pay-wrap .container{ padding-top:1rem; }

.pay-card{
  background:var(--white);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);
  border:1px solid var(--border-light);
  padding:2.4rem;
  margin-bottom:2rem;
}
.pay-card h3{
  font-family:var(--font-heading);
  font-size:1.8rem;
  font-weight:800;
  color:var(--text);
  margin:0 0 1.4rem;
}

.pay-stats{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(18rem, 1fr));
  gap:1.4rem;
  margin-bottom:2rem;
}

/* Balance box */
.bal{
  display:flex;
  flex-direction:column;
  gap:.4rem;
  padding:1.6rem 1.8rem;
  background:var(--white);
  border:1px solid var(--border-light);
  border-left:5px solid var(--primary);
  border-radius:var(--r-md);
}
.bal-label{ font-size:1.2rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.04em; font-weight:600; }
.bal-val{
  font-family:var(--font-heading);
  font-size:2.4rem;
  font-weight:800;
  color:var(--primary);
  letter-spacing:-.02em;
}

/* Overdue callout */
.overdue{
  display:flex;
  align-items:center;
  gap:1rem;
  padding:1.4rem 1.8rem;
  background:#fef2f2;
  border:1px solid #fecaca;
  border-left:5px solid #dc2626;
  border-radius:var(--r-md);
  margin-bottom:1.6rem;
  color:#991b1b;
  font-weight:600;
}
.overdue i{ color:#dc2626; font-size:1.6rem; }

/* Fee summary */
.fees{
  display:flex;
  flex-direction:column;
  gap:.6rem;
}
.fees .fees-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:.9rem 1.2rem;
  background:var(--gray-50);
  border-radius:var(--r-sm);
  font-size:1.4rem;
}
.fees .fees-row strong{ color:var(--primary); font-family:var(--font-heading); }

/* Payment summary card */
.summary{
  background:var(--white);
  border-radius:var(--r-md);
  border:1px solid var(--border-light);
  padding:1.8rem 2rem;
  margin-bottom:1.6rem;
}
.summary h4{
  font-family:var(--font-heading);
  font-size:1.5rem;
  font-weight:700;
  color:var(--text);
  margin:0 0 1rem;
}
.summary .summary-row{
  display:flex;
  justify-content:space-between;
  padding:.6rem 0;
  font-size:1.4rem;
  color:var(--text-secondary);
  border-bottom:1px dashed var(--border-light);
}
.summary .summary-row:last-child{ border-bottom:none; }
.summary .summary-row strong{ color:var(--text); font-weight:700; }

/* About / announcement card (ab-*) */
.ab{
  background:var(--white);
  border-radius:var(--r-md);
  border:1px solid var(--border-light);
  padding:1.6rem 1.8rem;
  margin-bottom:1.4rem;
}
.ab h4{
  font-family:var(--font-heading);
  font-size:1.5rem;
  font-weight:700;
  color:var(--primary);
  margin:0 0 .6rem;
}
.ab p{ color:var(--text-secondary); font-size:1.4rem; margin:0 0 .6rem; line-height:1.65; }
.ab a{ color:var(--primary); font-weight:600; }

/* Step / wizard */
.step{
  display:flex;
  align-items:center;
  gap:1.2rem;
  padding:1.4rem 1.8rem;
  background:var(--white);
  border:1px solid var(--border-light);
  border-radius:var(--r-md);
  margin-bottom:1.6rem;
}
.step-num{
  width:3.6rem;
  height:3.6rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--primary);
  color:var(--white);
  border-radius:50%;
  font-family:var(--font-heading);
  font-size:1.5rem;
  font-weight:800;
  flex-shrink:0;
}
.step.active .step-num{ background:var(--accent); }
.step.done .step-num{ background:var(--primary-light); }
.step-title{
  font-family:var(--font-heading);
  font-size:1.4rem;
  font-weight:700;
  color:var(--text);
}
.step-desc{ font-size:1.25rem; color:var(--text-muted); }

/* Method picker */
.method{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(16rem, 1fr));
  gap:1rem;
  margin-bottom:1.4rem;
}
.method-item{
  display:flex;
  align-items:center;
  gap:1rem;
  padding:1.2rem 1.4rem;
  background:var(--white);
  border:2px solid var(--border);
  border-radius:var(--r-md);
  cursor:pointer;
  transition:all var(--t-fast);
}
.method-item:hover,
.method-item.active{
  border-color:var(--primary);
  background:var(--primary-mist);
}
.method-item i{ font-size:1.8rem; color:var(--primary); }
.method-item .name{ font-family:var(--font-heading); font-weight:600; color:var(--text); }

/* Bank box (bb-*) */
.bb{
  background:var(--white);
  border:1px solid var(--border-light);
  border-left:5px solid var(--accent);
  border-radius:var(--r-md);
  padding:1.6rem 1.8rem;
  margin-bottom:1.4rem;
}
.bb h4{
  font-family:var(--font-heading);
  font-size:1.4rem;
  font-weight:700;
  color:var(--accent-dark);
  margin:0 0 .6rem;
}
.bb p{ margin:0; font-size:1.4rem; color:var(--text); }
.bb strong{ color:var(--text); font-weight:700; }

/* Paystack header (ph-*) */
.ph{
  display:flex;
  align-items:center;
  gap:1rem;
  padding:1.4rem 1.8rem;
  background:linear-gradient(135deg,#0aae5e,#0a8a4c);
  color:var(--white);
  border-radius:var(--r-md);
  margin-bottom:1.6rem;
}
.ph i{ font-size:2rem; }
.ph strong{ display:block; font-family:var(--font-heading); font-size:1.5rem; }
.ph span{ font-size:1.3rem; opacity:.9; }

/* PSI / pay-strap (ps-*) */
.ps{
  display:flex;
  align-items:center;
  gap:.6rem;
  padding:.6rem 1rem;
  background:var(--primary-mist);
  border:1px solid var(--primary);
  border-radius:var(--r-full);
  font-size:1.2rem;
  color:var(--primary-dark);
  font-weight:600;
}

/* Fee structure item (fsi-*) */
.fsi{
  background:var(--white);
  border:1px solid var(--border-light);
  border-radius:var(--r-md);
  padding:1.2rem 1.6rem;
  margin-bottom:.8rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:1.4rem;
}
.fsi .fsi-name{ font-weight:600; color:var(--text); }
.fsi .fsi-amt{ font-family:var(--font-heading); font-weight:800; color:var(--primary); }

/* About / general section header (es-*) */
.es{
  display:flex;
  align-items:center;
  gap:1rem;
  padding:1.2rem 0;
  margin-bottom:1rem;
  border-bottom:2px solid var(--border-light);
}
.es-title{
  font-family:var(--font-heading);
  font-size:1.6rem;
  font-weight:700;
  color:var(--text);
}
.es-sub{ font-size:1.3rem; color:var(--text-muted); }

/* Amount (amount-*) */
.amount{
  display:flex;
  align-items:center;
  gap:.6rem;
  font-family:var(--font-heading);
  font-size:1.8rem;
  font-weight:800;
  color:var(--primary);
  letter-spacing:-.01em;
}
.amount-input{
  font-family:var(--font-heading);
  font-size:2rem;
  font-weight:800;
  color:var(--primary);
  background:transparent;
  border:none;
  border-bottom:2px solid var(--primary);
  padding:.4rem 0;
  width:14rem;
}
.amount-input:focus{ outline:none; border-color:var(--accent); }

/* =====================================================
   PARENT DASHBOARD (.dashboard-*, .child-*, .content-*)
   ===================================================== */
.dashboard{
  background:var(--bg);
  padding:0 0 5rem;
  min-height:60vh;
}
.dashboard .container{ padding-top:1rem; }

.dashboard-hero{
  background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color:var(--white);
  padding:3rem 0;
  border-radius:var(--r-lg);
  margin-bottom:2.4rem;
  position:relative;
  overflow:hidden;
}
.dashboard-hero h1{ color:var(--white); font-size:clamp(2rem,3.6vw,2.8rem); margin:0 0 .4rem; }
.dashboard-hero p{ color:rgba(255,255,255,.85); margin:0; }

.child{
  display:flex;
  align-items:center;
  gap:1.4rem;
  padding:1.4rem 1.8rem;
  background:var(--white);
  border:1px solid var(--border-light);
  border-left:5px solid var(--primary);
  border-radius:var(--r-md);
  margin-bottom:1.4rem;
}
.child-avatar{
  width:5rem;
  height:5rem;
  border-radius:50%;
  background:var(--primary-mist);
  color:var(--primary);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-heading);
  font-size:1.8rem;
  font-weight:800;
  border:2px solid var(--primary);
  flex-shrink:0;
  overflow:hidden;
}
.child-avatar img{ width:100%; height:100%; object-fit:cover; }
.child-info{ flex:1 1 auto; min-width:0; }
.child-name{
  font-family:var(--font-heading);
  font-size:1.6rem;
  font-weight:700;
  color:var(--text);
  margin-bottom:.2rem;
}
.child-meta{ font-size:1.3rem; color:var(--text-secondary); }

.content{
  background:var(--white);
  border-radius:var(--r-lg);
  padding:2rem;
  box-shadow:var(--shadow-card);
  border:1px solid var(--border-light);
}
.content h2,
.content h3{
  font-family:var(--font-heading);
  color:var(--text);
  margin:0 0 1rem;
}

/* Empty state */
.empty{
  text-align:center;
  padding:4.4rem 2rem;
  background:var(--white);
  border:2px dashed var(--border);
  border-radius:var(--r-lg);
  color:var(--text-secondary);
}
.empty i{
  display:block;
  font-size:4.4rem;
  color:var(--text-muted);
  opacity:.5;
  margin-bottom:1rem;
}
.empty h3{ font-family:var(--font-heading); font-size:1.7rem; font-weight:700; color:var(--text); margin:0 0 .4rem; }
.empty p{ font-size:1.4rem; color:var(--text-secondary); margin:0 0 1.4rem; }

/* Progress (parent) */
.progress-row{
  display:flex;
  align-items:center;
  gap:1.2rem;
  padding:.8rem 0;
}
.progress-bar{
  flex:1 1 auto;
  height:1rem;
  background:var(--gray-200);
  border-radius:var(--r-full);
  overflow:hidden;
}
.progress-bar > span{
  display:block;
  height:100%;
  background:linear-gradient(90deg,var(--primary),var(--primary-light));
  border-radius:var(--r-full);
}
.progress-pct{
  font-family:var(--font-heading);
  font-size:1.3rem;
  font-weight:700;
  color:var(--primary);
  min-width:5rem;
  text-align:right;
}

/* =====================================================
   STUDENT GAME / EXAM PAGES (.game-*, .lb-*, .spg-*,
   .spe-*, .ste-*, .sgr-*, .timer-*, .warning-*,
   .score-*, .rank-*, .trophy-*, .congrats-*,
   .performance-*, .navigation-*, .option-*, .options-*,
   .question-*, .submit-*, .answer-*)
   ===================================================== */
.game-page,
.lb-page,
.game-wrap{
  background:var(--bg);
  padding:0 0 5rem;
  min-height:60vh;
}
.game-page .container,
.lb-page .container,
.game-wrap .container{ padding-top:1rem; }

/* Game card / tile */
.game-card{
  display:flex;
  align-items:center;
  gap:1.4rem;
  padding:1.6rem 1.8rem;
  background:var(--white);
  border:1px solid var(--border-light);
  border-radius:var(--r-md);
  margin-bottom:1.2rem;
  box-shadow:var(--shadow-card);
  transition:all var(--t-base);
}
.game-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-hover); border-color:var(--primary); }
.game-card .game-icon{
  width:4.8rem;
  height:4.8rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--primary-mist);
  color:var(--primary);
  border-radius:var(--r-md);
  font-size:2rem;
  flex-shrink:0;
}
.game-card .game-name{
  font-family:var(--font-heading);
  font-size:1.6rem;
  font-weight:700;
  color:var(--text);
  margin-bottom:.2rem;
}
.game-card .game-desc{ font-size:1.3rem; color:var(--text-secondary); }
.game-card .game-meta{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:1rem;
  flex-shrink:0;
}

/* Leaderboard */
.lb-list{
  display:flex;
  flex-direction:column;
  gap:.8rem;
}
.lb-row{
  display:flex;
  align-items:center;
  gap:1.4rem;
  padding:1.2rem 1.6rem;
  background:var(--white);
  border:1px solid var(--border-light);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-xs);
}
.lb-rank{
  width:3.6rem;
  height:3.6rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--gray-100);
  color:var(--text-secondary);
  border-radius:50%;
  font-family:var(--font-heading);
  font-size:1.4rem;
  font-weight:800;
  flex-shrink:0;
}
.lb-row:nth-child(1) .lb-rank{ background:linear-gradient(135deg,#fbbf24,#d97706); color:var(--white); }
.lb-row:nth-child(2) .lb-rank{ background:linear-gradient(135deg,#9ca3af,#6b7280); color:var(--white); }
.lb-row:nth-child(3) .lb-rank{ background:linear-gradient(135deg,#d97706,#92400e); color:var(--white); }
.lb-name{
  flex:1 1 auto;
  min-width:0;
  font-family:var(--font-heading);
  font-size:1.45rem;
  font-weight:600;
  color:var(--text);
}
.lb-score{
  font-family:var(--font-heading);
  font-size:1.5rem;
  font-weight:800;
  color:var(--primary);
  letter-spacing:-.01em;
}

.rank{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.3rem 1rem;
  border-radius:var(--r-full);
  font-size:1.2rem;
  font-weight:700;
}
.rank-1{ background:rgba(251,191,36,.18); color:#92400e; }
.rank-2{ background:rgba(156,163,175,.18); color:#374151; }
.rank-3{ background:rgba(217,119,6,.18); color:#92400e; }
.rank-other{ background:var(--gray-100); color:var(--text-secondary); }

.score{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.4rem 1.2rem;
  background:var(--primary-mist);
  color:var(--primary-dark);
  border-radius:var(--r-full);
  font-family:var(--font-heading);
  font-size:1.4rem;
  font-weight:800;
}

/* Trophy / congrats */
.trophy{
  text-align:center;
  padding:3rem 2rem;
}
.trophy-icon{
  font-size:6.4rem;
  color:var(--gold);
  margin-bottom:1rem;
  display:inline-block;
  animation:trophyBounce 2s ease-in-out infinite;
}
@keyframes trophyBounce{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-1rem); }
}
.trophy h2{
  font-family:var(--font-heading);
  font-size:2.4rem;
  font-weight:800;
  color:var(--text);
  margin:0 0 .6rem;
}
.trophy p{ font-size:1.4rem; color:var(--text-secondary); margin:0 0 1.4rem; }

.congrats{
  background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);
  color:var(--white);
  border-radius:var(--r-lg);
  padding:3rem 2rem;
  text-align:center;
  margin-bottom:2rem;
}
.congrats h1{ color:var(--white); margin:0 0 .8rem; font-size:2.6rem; }
.congrats p{ color:rgba(255,255,255,.92); margin:0; font-size:1.5rem; }

.performance{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(14rem, 1fr));
  gap:1.4rem;
  margin-bottom:2rem;
}
.performance .perf-card{
  background:var(--white);
  border:1px solid var(--border-light);
  border-left:4px solid var(--primary);
  border-radius:var(--r-md);
  padding:1.6rem 1.8rem;
  text-align:center;
}
.perf-card .perf-val{
  font-family:var(--font-heading);
  font-size:2.4rem;
  font-weight:800;
  color:var(--primary);
  margin-bottom:.2rem;
}
.perf-card .perf-lbl{ font-size:1.25rem; color:var(--text-secondary); }

/* Question / options (CBT / play) */
.question{
  background:var(--white);
  border:1px solid var(--border-light);
  border-radius:var(--r-md);
  padding:2rem 2.2rem;
  margin-bottom:1.6rem;
  box-shadow:var(--shadow-card);
}
.question .q-num{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  font-family:var(--font-heading);
  font-size:1.3rem;
  font-weight:700;
  color:var(--primary);
  margin-bottom:.8rem;
}
.question .q-text{
  font-family:var(--font-heading);
  font-size:1.6rem;
  font-weight:700;
  color:var(--text);
  line-height:1.4;
  margin-bottom:1.2rem;
}

.options,
.options-list{
  display:flex;
  flex-direction:column;
  gap:.8rem;
}
.option{
  display:flex;
  align-items:center;
  gap:1rem;
  padding:1.1rem 1.4rem;
  background:var(--white);
  border:2px solid var(--border);
  border-radius:var(--r-sm);
  cursor:pointer;
  font-size:1.4rem;
  color:var(--text);
  transition:all var(--t-fast);
}
.option:hover{ border-color:var(--primary); background:var(--primary-mist); }
.option input[type="radio"]{ width:1.6rem; height:1.6rem; accent-color:var(--primary); flex-shrink:0; }
.option.selected,
.option.is-selected{ border-color:var(--primary); background:var(--primary-mist); }
.option.correct{ border-color:var(--primary-light); background:var(--primary-mist); }
.option.wrong{ border-color:#dc2626; background:#fef2f2; }

.submit,
.submit-btn{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:1.2rem 2.4rem;
  background:var(--primary);
  color:var(--white) !important;
  border:1px solid var(--primary);
  border-radius:var(--r-sm);
  font-family:var(--font-heading);
  font-size:1.5rem;
  font-weight:700;
  cursor:pointer;
  text-decoration:none !important;
  transition:all var(--t-base);
}
.submit:hover,
.submit-btn:hover{ background:var(--primary-dark); transform:translateY(-2px); }
.submit.btn-lg{ padding:1.4rem 3rem; font-size:1.6rem; }

.answer{
  background:var(--primary-mist);
  border:1px solid var(--primary);
  border-left:5px solid var(--primary);
  border-radius:var(--r-md);
  padding:1.2rem 1.6rem;
  margin-top:1rem;
  font-size:1.4rem;
  color:var(--primary-dark);
}
.answer strong{ color:var(--text); }

/* Timer */
.timer{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:.8rem 1.4rem;
  background:var(--accent);
  color:var(--white);
  border-radius:var(--r-full);
  font-family:var(--font-heading);
  font-size:1.5rem;
  font-weight:800;
  letter-spacing:.04em;
  box-shadow:0 4px 14px rgba(217,119,6,.4);
}
.timer i{ animation:timerPulse 1s ease-in-out infinite; }
@keyframes timerPulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.1); } }
.timer.warning{ background:#dc2626; box-shadow:0 4px 14px rgba(220,38,38,.4); }
.timer-bar{
  width:100%;
  height:.6rem;
  background:var(--gray-200);
  border-radius:var(--r-full);
  overflow:hidden;
  margin-bottom:1.4rem;
}
.timer-bar > span{
  display:block;
  height:100%;
  background:var(--primary);
  transition:width 1s linear;
}

/* Warning banner */
.warning{
  display:flex;
  align-items:center;
  gap:1rem;
  padding:1.4rem 1.8rem;
  background:#fffbeb;
  border:1px solid #fde68a;
  border-left:5px solid #f59e0b;
  border-radius:var(--r-md);
  margin-bottom:1.4rem;
  color:#92400e;
  font-weight:500;
}
.warning i{ font-size:1.8rem; color:#f59e0b; }
.warning strong{ color:var(--text); }

.navigation{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-top:1.6rem;
  flex-wrap:wrap;
}

/* Spinner / loading */
.loading{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:4rem 2rem;
  color:var(--text-muted);
  font-size:1.4rem;
  gap:1rem;
}
.loading::before{
  content:'';
  width:2.4rem;
  height:2.4rem;
  border:3px solid var(--border);
  border-top-color:var(--primary);
  border-radius:50%;
  animation:spin 1s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* Status pills (general) */
.status{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.3rem 1rem;
  border-radius:var(--r-full);
  font-size:1.2rem;
  font-weight:700;
}
.status-active,
.status-completed,
.status-yes{ background:var(--primary-mist); color:var(--primary-dark); }
.status-blocked,
.status-no,
.status-failed{ background:#fef2f2; color:#991b1b; }
.status-pending{ background:#fffbeb; color:#92400e; }
.status-draft{ background:var(--gray-100); color:var(--text-secondary); }

/* Meta (small info) */
.meta{
  font-size:1.25rem;
  color:var(--text-muted);
  display:flex;
  align-items:center;
  gap:.4rem;
}
.meta i{ font-size:1.1rem; }

/* Filter bar (general) */
.filter{
  display:flex;
  align-items:center;
  gap:.8rem;
  flex-wrap:wrap;
  padding:1.2rem 1.6rem;
  background:var(--white);
  border:1px solid var(--border-light);
  border-radius:var(--r-md);
  margin-bottom:1.4rem;
}
.filter input,
.filter select{
  padding:.8rem 1.2rem;
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  font-size:1.35rem;
  font-family:var(--font-body);
  color:var(--text);
  background:var(--white);
}
.filter input{ flex:1 1 18rem; }
.filter select{ min-width:14rem; }

/* Legend (grade color key) */
.legend{
  display:flex;
  align-items:center;
  gap:1.4rem;
  padding:1rem 1.4rem;
  background:var(--white);
  border:1px solid var(--border-light);
  border-radius:var(--r-md);
  margin-bottom:1.4rem;
  flex-wrap:wrap;
  font-size:1.3rem;
}
.legend-item{ display:inline-flex; align-items:center; gap:.4rem; color:var(--text-secondary); }
.legend-dot{
  width:1.2rem;
  height:1.2rem;
  border-radius:50%;
  display:inline-block;
}

/* Info banner */
.info{
  display:flex;
  align-items:flex-start;
  gap:1rem;
  padding:1.2rem 1.6rem;
  background:#eff6ff;
  border:1px solid #bfdbfe;
  border-left:5px solid #2563eb;
  border-radius:var(--r-md);
  margin-bottom:1.4rem;
  color:#1e3a8a;
  font-size:1.35rem;
  line-height:1.5;
}
.info i{ color:#2563eb; font-size:1.5rem; flex-shrink:0; }
.info strong{ color:var(--text); }

@media(max-width:767px){
  .performance{ grid-template-columns:1fr 1fr; }
  .game-card{ flex-direction:column; text-align:center; }
  .game-card .game-meta{ margin-left:0; }
}

/* =====================================================
   TEACHER PAGES (.assignment-*, .cbt-*, .ec-*,
   .difficulty-*, .due-*, .submitted-*, .feedback-*,
   .grade-*, .graded-*, .attachment-*, .available-*,
   .awaiting-*, .meta-*, .sd-*, .flashcard-*)
   ===================================================== */
.teacher-page,
.teacher-wrap{
  background:var(--bg);
  padding:0 0 5rem;
  min-height:60vh;
}
.teacher-page .container,
.teacher-wrap .container{ padding-top:1rem; }

/* Assignment */
.assignment-card{
  background:var(--white);
  border:1px solid var(--border-light);
  border-left:5px solid var(--primary);
  border-radius:var(--r-md);
  padding:1.6rem 2rem;
  margin-bottom:1.4rem;
  box-shadow:var(--shadow-card);
  display:flex;
  align-items:flex-start;
  gap:1.4rem;
  flex-wrap:wrap;
}
.assignment-icon{
  width:4.6rem;
  height:4.6rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--primary-mist);
  color:var(--primary);
  border-radius:var(--r-md);
  font-size:1.8rem;
  flex-shrink:0;
}
.assignment-body{ flex:1 1 30rem; min-width:0; }
.assignment-title{
  font-family:var(--font-heading);
  font-size:1.6rem;
  font-weight:700;
  color:var(--text);
  margin-bottom:.4rem;
}
.assignment-desc{ color:var(--text-secondary); font-size:1.35rem; margin-bottom:.8rem; }
.assignment-meta{
  display:flex;
  align-items:center;
  gap:1.2rem;
  flex-wrap:wrap;
  font-size:1.25rem;
  color:var(--text-muted);
}
.assignment-meta .due{ color:#dc2626; font-weight:600; }
.assignment-actions{
  display:flex;
  gap:.6rem;
  flex-shrink:0;
}

.due{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.3rem 1rem;
  background:#fef2f2;
  color:#991b1b;
  border-radius:var(--r-full);
  font-size:1.2rem;
  font-weight:700;
}
.due.overdue{ background:#fee2e2; color:#7f1d1d; }
.due.upcoming{ background:#fef3c7; color:#92400e; }

.submitted{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.3rem 1rem;
  background:var(--primary-mist);
  color:var(--primary-dark);
  border-radius:var(--r-full);
  font-size:1.2rem;
  font-weight:700;
}

.feedback{
  background:var(--gray-50);
  border:1px solid var(--border-light);
  border-left:4px solid var(--accent);
  border-radius:var(--r-sm);
  padding:1rem 1.4rem;
  margin-top:.8rem;
  font-size:1.35rem;
  color:var(--text);
  line-height:1.6;
}
.feedback strong{ color:var(--accent-dark); }

.grade{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.4rem 1.2rem;
  background:linear-gradient(135deg,var(--gold),var(--accent));
  color:var(--white);
  border-radius:var(--r-full);
  font-family:var(--font-heading);
  font-size:1.4rem;
  font-weight:800;
  letter-spacing:.04em;
}
.graded{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.3rem 1rem;
  background:#ecfdf5;
  color:#065f46;
  border-radius:var(--r-full);
  font-size:1.2rem;
  font-weight:700;
}
.awaiting{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.3rem 1rem;
  background:#fffbeb;
  color:#92400e;
  border-radius:var(--r-full);
  font-size:1.2rem;
  font-weight:700;
}
.available{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.3rem 1rem;
  background:#eff6ff;
  color:#1e3a8a;
  border-radius:var(--r-full);
  font-size:1.2rem;
  font-weight:700;
}

.attachment{
  display:flex;
  align-items:center;
  gap:1rem;
  padding:1rem 1.4rem;
  background:var(--gray-50);
  border:1px solid var(--border-light);
  border-radius:var(--r-sm);
  margin-bottom:.6rem;
  font-size:1.35rem;
  color:var(--text);
}
.attachment i{ color:var(--primary); font-size:1.6rem; }
.attachment .att-name{ flex:1; font-weight:600; }
.attachment a{ color:var(--primary); font-weight:600; }

/* Flashcard */
.flashcard{
  background:var(--white);
  border:1px solid var(--border-light);
  border-radius:var(--r-md);
  padding:2rem;
  margin-bottom:1.4rem;
  box-shadow:var(--shadow-card);
}
.flashcard-front{
  font-family:var(--font-heading);
  font-size:2rem;
  font-weight:800;
  color:var(--primary);
  margin-bottom:1rem;
}
.flashcard-back{
  font-size:1.45rem;
  color:var(--text);
  line-height:1.6;
  border-top:1px solid var(--border-light);
  padding-top:1rem;
}
.difficulty{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.3rem 1rem;
  border-radius:var(--r-full);
  font-size:1.2rem;
  font-weight:700;
}
.difficulty-easy{ background:#ecfdf5; color:#065f46; }
.difficulty-medium{ background:#fef3c7; color:#92400e; }
.difficulty-hard{ background:#fee2e2; color:#991b1b; }

/* CBT / exam creator (ec-*) */
.ec{
  display:flex;
  align-items:center;
  gap:.6rem;
  padding:.4rem 1rem;
  background:#dbeafe;
  color:#1e3a8a;
  border-radius:var(--r-full);
  font-size:1.2rem;
  font-weight:700;
}

.cbt{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.3rem 1rem;
  background:#ede9fe;
  color:#5b21b6;
  border-radius:var(--r-full);
  font-size:1.2rem;
  font-weight:700;
}

/* SD-* (shared dropdown / form layouts) */
.sd-field{ margin-bottom:1.4rem; }
.sd-label{
  display:block;
  font-family:var(--font-heading);
  font-size:1.3rem;
  font-weight:600;
  color:var(--text);
  margin-bottom:.6rem;
}
.sd-input,
.sd-select,
.sd-textarea{
  width:100%;
  padding:1.1rem 1.4rem;
  border:2px solid var(--border);
  border-radius:var(--r-sm);
  font-family:var(--font-body);
  font-size:1.45rem;
  color:var(--text);
  background:var(--white);
  outline:none;
  transition:border-color var(--t-base), box-shadow var(--t-base);
}
.sd-textarea{ min-height:12rem; resize:vertical; line-height:1.6; }
.sd-input:focus,
.sd-select:focus,
.sd-textarea:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 4px var(--primary-glow);
}

/* =====================================================
   ADMIN PAGES — clock, scanner, attendance, visitors,
   badges, store, marketplace
   ===================================================== */

/* Clock in/out (kiosk) */
.kiosk{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2rem;
  padding:3rem 2rem;
  background:var(--white);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);
  border:1px solid var(--border-light);
  text-align:center;
}
.kiosk h1{
  font-family:var(--font-heading);
  font-size:2.4rem;
  font-weight:800;
  color:var(--text);
  margin:0;
}
.kiosk-time{
  font-family:var(--font-heading);
  font-size:5.4rem;
  font-weight:900;
  color:var(--primary);
  letter-spacing:-.03em;
  line-height:1;
  font-variant-numeric:tabular-nums;
}
.kiosk-date{
  font-size:1.4rem;
  color:var(--text-secondary);
  font-weight:500;
}
.clock{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:.6rem 1.4rem;
  background:var(--primary-mist);
  color:var(--primary-dark);
  border-radius:var(--r-full);
  font-family:var(--font-heading);
  font-weight:700;
  font-size:1.3rem;
}

/* Scanner */
.scanner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.4rem;
  padding:2rem;
  background:var(--white);
  border:1px solid var(--border-light);
  border-radius:var(--r-md);
}
.scanner-frame{
  width:100%;
  max-width:36rem;
  aspect-ratio:1/1;
  background:var(--gray-50);
  border:2px dashed var(--border);
  border-radius:var(--r-md);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text-muted);
  font-size:1.4rem;
}

/* Attendance rows */
.att{
  display:flex;
  align-items:center;
  gap:1rem;
  padding:1rem 1.4rem;
  background:var(--white);
  border:1px solid var(--border-light);
  border-bottom:none;
  font-size:1.4rem;
}
.att:last-child{ border-bottom:1px solid var(--border-light); }
.att-name{ flex:1 1 auto; min-width:0; font-weight:600; }
.att-status{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.3rem 1rem;
  border-radius:var(--r-full);
  font-size:1.2rem;
  font-weight:700;
}
.att-present{ background:#ecfdf5; color:#065f46; }
.att-absent{ background:#fee2e2; color:#991b1b; }
.att-late{ background:#fef3c7; color:#92400e; }
.att-per-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:.8rem 0;
  border-bottom:1px solid var(--border-light);
}
.remarks{
  font-style:italic;
  color:var(--text-muted);
  font-size:1.3rem;
}
.month{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.3rem 1rem;
  background:var(--gray-100);
  border-radius:var(--r-full);
  font-size:1.2rem;
  font-weight:700;
  color:var(--text-secondary);
}

/* Store / marketplace */
.store-page{
  background:var(--bg);
  padding:0 0 5rem;
  min-height:60vh;
}
.store-page .container{ padding-top:1rem; }

.cam{
  width:100%;
  max-width:32rem;
  aspect-ratio:4/3;
  background:var(--gray-900);
  border-radius:var(--r-md);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--white);
  font-size:1.4rem;
  margin:0 auto 1.4rem;
}
.scan-result{
  background:var(--white);
  border:1px solid var(--border-light);
  border-left:5px solid var(--primary);
  border-radius:var(--r-md);
  padding:1.6rem;
  margin-top:1.4rem;
}
.charge{
  font-family:var(--font-heading);
  font-size:2rem;
  font-weight:800;
  color:var(--accent-dark);
  letter-spacing:-.01em;
}
.cart{
  background:var(--white);
  border:1px solid var(--border-light);
  border-radius:var(--r-md);
  padding:1.6rem;
  margin-bottom:1.4rem;
}
.cart-item{
  display:flex;
  align-items:center;
  gap:1rem;
  padding:.8rem 0;
  border-bottom:1px solid var(--border-light);
}
.cart-item:last-child{ border-bottom:none; }
.cart-item .item-name{ flex:1; font-weight:600; }
.cart-item .item-price{ font-family:var(--font-heading); font-weight:800; color:var(--primary); }

.prm{
  background:var(--primary-mist);
  border:1px solid var(--primary);
  border-radius:var(--r-md);
  padding:1.2rem 1.6rem;
  margin-bottom:1.4rem;
  color:var(--primary-dark);
}
.qi{
  display:flex;
  align-items:center;
  gap:1rem;
  padding:1.2rem 1.6rem;
  background:var(--white);
  border:1px solid var(--border-light);
  border-radius:var(--r-md);
  margin-bottom:.8rem;
}
.receipt{
  background:var(--white);
  border:1px solid var(--border-light);
  border-radius:var(--r-md);
  padding:2rem;
  max-width:54rem;
  margin:0 auto 2rem;
  box-shadow:var(--shadow-card);
}
.receipt h2{
  font-family:var(--font-heading);
  font-size:1.8rem;
  font-weight:800;
  color:var(--text);
  margin:0 0 1rem;
}
.receipt .rf-row{
  display:flex;
  justify-content:space-between;
  padding:.8rem 0;
  border-bottom:1px dashed var(--border-light);
  font-size:1.4rem;
}
.receipt .rf-row:last-child{ border-bottom:none; font-weight:700; }
.txn{
  font-family:monospace;
  background:var(--gray-50);
  padding:.4rem 1rem;
  border-radius:var(--r-sm);
  font-size:1.3rem;
  color:var(--text-secondary);
}

/* Wallet card */
.wc{
  background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color:var(--white);
  border-radius:var(--r-lg);
  padding:2rem;
  position:relative;
  overflow:hidden;
  box-shadow:var(--shadow-lg);
  max-width:36rem;
  margin:0 auto 2rem;
}
.wc::before{
  content:'';
  position:absolute;
  top:-6rem; right:-6rem;
  width:18rem; height:18rem;
  border-radius:50%;
  background:rgba(255,255,255,.1);
}
.wc-name{
  font-family:var(--font-heading);
  font-size:1.6rem;
  font-weight:700;
  color:var(--white);
  margin-bottom:.4rem;
  position:relative;
}
.wc-mat{ font-size:1.3rem; color:rgba(255,255,255,.8); position:relative; }
.wc-bal{
  font-family:var(--font-heading);
  font-size:3rem;
  font-weight:900;
  color:var(--white);
  margin-top:1.4rem;
  letter-spacing:-.02em;
  position:relative;
}
.wc-lbl{
  font-size:1.2rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:rgba(255,255,255,.7);
  position:relative;
}
.wc-suspended-banner{
  background:rgba(220,38,38,.18);
  color:var(--white);
  padding:1rem 1.4rem;
  border-radius:var(--r-sm);
  margin-bottom:1.4rem;
  font-weight:600;
  text-align:center;
  border:1px solid rgba(220,38,38,.4);
  position:relative;
}

/* Notifications */
.notif,
.notification,
.notifications{
  background:var(--white);
  border:1px solid var(--border-light);
  border-radius:var(--r-md);
  padding:1.4rem 1.8rem;
  margin-bottom:1rem;
  display:flex;
  align-items:flex-start;
  gap:1.2rem;
}
.notif-icon{
  width:4rem;
  height:4rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--primary-mist);
  color:var(--primary);
  border-radius:50%;
  font-size:1.6rem;
  flex-shrink:0;
}
.notif.unread{ border-left:5px solid var(--accent); background:linear-gradient(180deg,#fffbeb 0%, var(--white) 100%); }
.notif-body{ flex:1; min-width:0; }
.notif-title{ font-family:var(--font-heading); font-size:1.45rem; font-weight:700; color:var(--text); margin-bottom:.2rem; }
.notif-text{ color:var(--text-secondary); font-size:1.35rem; line-height:1.5; }
.notif-time{ font-size:1.2rem; color:var(--text-muted); margin-top:.4rem; }

.unread{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.2rem .8rem;
  background:var(--accent);
  color:var(--white);
  border-radius:var(--r-full);
  font-size:1.1rem;
  font-weight:800;
}

/* Announcement */
.announcement{
  background:var(--white);
  border:1px solid var(--border-light);
  border-left:5px solid var(--primary);
  border-radius:var(--r-md);
  padding:1.6rem 2rem;
  margin-bottom:1.2rem;
  box-shadow:var(--shadow-card);
}
.announcement.urgent{ border-left-color:#dc2626; }
.announcement.event{ border-left-color:var(--accent); }
.announcement h3{
  font-family:var(--font-heading);
  font-size:1.7rem;
  font-weight:800;
  color:var(--text);
  margin:0 0 .6rem;
}
.announcement p{ color:var(--text-secondary); font-size:1.4rem; margin:0 0 .6rem; line-height:1.6; }
.announcement .ann-meta{ font-size:1.2rem; color:var(--text-muted); display:flex; gap:1rem; flex-wrap:wrap; }

.priority{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.3rem 1rem;
  border-radius:var(--r-full);
  font-size:1.2rem;
  font-weight:700;
}
.priority-high{ background:#fee2e2; color:#991b1b; }
.priority-normal{ background:#dbeafe; color:#1e3a8a; }
.priority-low{ background:var(--gray-100); color:var(--text-secondary); }
.mark{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.3rem 1rem;
  background:var(--primary-mist);
  color:var(--primary-dark);
  border-radius:var(--r-full);
  font-size:1.2rem;
  font-weight:700;
}

/* Event / calendar */
.event{
  display:flex;
  gap:1.2rem;
  padding:1.4rem;
  background:var(--white);
  border:1px solid var(--border-light);
  border-radius:var(--r-md);
  margin-bottom:1rem;
}
.event-date{
  flex-shrink:0;
  width:5.4rem;
  text-align:center;
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  color:var(--white);
  border-radius:var(--r-md);
  padding:.6rem;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.event-date .day{ font-family:var(--font-heading); font-size:2.2rem; font-weight:800; line-height:1; }
.event-date .mon{ font-size:1.1rem; text-transform:uppercase; letter-spacing:.04em; opacity:.85; }
.event-body{ flex:1; min-width:0; }
.event-title{ font-family:var(--font-heading); font-size:1.5rem; font-weight:700; color:var(--text); margin-bottom:.2rem; }
.event-time{ color:var(--text-secondary); font-size:1.3rem; }
.calendar{
  background:var(--white);
  border:1px solid var(--border-light);
  border-radius:var(--r-md);
  padding:1.6rem;
  box-shadow:var(--shadow-card);
}
.calendar-grid{
  display:grid;
  grid-template-columns:repeat(7, 1fr);
  gap:.4rem;
}
.calendar-cell{
  aspect-ratio:1/1.2;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--gray-50);
  border-radius:var(--r-sm);
  font-size:1.3rem;
  color:var(--text);
}
.calendar-cell.today{ background:var(--primary); color:var(--white); font-weight:700; }
.calendar-cell.has-event{ background:var(--primary-mist); color:var(--primary); font-weight:700; border:1px solid var(--primary); }
.current{ background:var(--primary-mist); border:1px solid var(--primary); color:var(--primary); }
.upcoming{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.3rem 1rem;
  background:var(--accent);
  color:var(--white);
  border-radius:var(--r-full);
  font-size:1.2rem;
  font-weight:700;
}

/* Messages */
.message,
.messages{
  display:flex;
  gap:1.2rem;
  padding:1.4rem;
  background:var(--white);
  border:1px solid var(--border-light);
  border-radius:var(--r-md);
  margin-bottom:1rem;
}
.message-avatar{
  width:4.4rem;
  height:4.4rem;
  border-radius:50%;
  background:var(--primary-mist);
  color:var(--primary);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-heading);
  font-size:1.4rem;
  font-weight:800;
  flex-shrink:0;
}
.message-body{ flex:1 1 auto; min-width:0; }
.message-from{ font-family:var(--font-heading); font-size:1.4rem; font-weight:700; color:var(--text); }
.message-preview{ color:var(--text-secondary); font-size:1.3rem; margin-top:.2rem; }
.message.unread{ border-left:5px solid var(--accent); }

/* Photo / yearbook preview */
.photo{
  display:flex;
  align-items:center;
  gap:1.2rem;
  padding:1.2rem;
  background:var(--white);
  border:1px solid var(--border-light);
  border-radius:var(--r-md);
  margin-bottom:1rem;
}
.photo img{
  width:6rem;
  height:6rem;
  border-radius:var(--r-sm);
  object-fit:cover;
  flex-shrink:0;
}
.photo-info{ flex:1; }
.photo-info h4{ font-family:var(--font-heading); font-size:1.4rem; font-weight:700; color:var(--text); margin:0 0 .2rem; }
.photo-info p{ color:var(--text-secondary); font-size:1.25rem; margin:0; }

/* Hint */
.hint{
  display:flex;
  align-items:flex-start;
  gap:1rem;
  padding:1rem 1.4rem;
  background:#f0f9ff;
  border:1px solid #bae6fd;
  border-left:4px solid #0ea5e9;
  border-radius:var(--r-sm);
  margin-top:.6rem;
  font-size:1.3rem;
  color:#075985;
  line-height:1.5;
}
.hint i{ color:#0ea5e9; flex-shrink:0; }

/* Badges grid */
.badges{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(14rem, 1fr));
  gap:1.2rem;
}
.badge-card{
  background:var(--white);
  border:1px solid var(--border-light);
  border-radius:var(--r-md);
  padding:1.6rem 1rem;
  text-align:center;
  transition:all var(--t-base);
}
.badge-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-hover); border-color:var(--primary); }
.badge-icon{
  width:6rem;
  height:6rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,var(--gold),var(--accent));
  color:var(--white);
  border-radius:50%;
  font-size:2.4rem;
  margin-bottom:1rem;
}
.emoji{
  display:inline-block;
  font-size:3.4rem;
  line-height:1;
}
.badge-name{ font-family:var(--font-heading); font-size:1.35rem; font-weight:700; color:var(--text); }
.badge-desc{ font-size:1.2rem; color:var(--text-secondary); margin-top:.2rem; }

/* =====================================================
   YEARBOOK (.year-*, .cover-*, .book-*, .glass-*,
   .deco-*, .decorative-*, .animated-*, .swipe-*,
   .mode-*, .quality-*, .image-*, .title-*,
   .transition-*, .toast-*, .upload-*, .site-*,
   .char-*, .compress-*, .field-*, .entries-*,
   .entry-*, .year-*)
   ===================================================== */
.year-page,
.year-wrap,
.book-page{
  background:var(--bg);
  padding:0 0 5rem;
  min-height:60vh;
}

.book{
  background:var(--white);
  border:1px solid var(--border-light);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);
  padding:2rem;
  margin-bottom:2rem;
}
.book h1,
.book h2{
  font-family:var(--font-heading);
  color:var(--text);
  margin:0 0 1rem;
}

.cover{
  text-align:center;
  padding:4rem 2rem;
  background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color:var(--white);
  border-radius:var(--r-lg);
  margin-bottom:2rem;
  position:relative;
  overflow:hidden;
}
.cover h1{
  font-family:var(--font-heading);
  font-size:clamp(2.6rem,4.4vw,3.8rem);
  font-weight:900;
  color:var(--white);
  margin:0 0 .8rem;
  letter-spacing:-.02em;
  position:relative;
}
.cover p{ color:rgba(255,255,255,.9); font-size:1.5rem; margin:0; position:relative; }
.cover::before{
  content:'';
  position:absolute;
  top:-6rem; right:-6rem;
  width:20rem; height:20rem;
  border-radius:50%;
  background:rgba(255,255,255,.08);
}

.year{
  font-family:var(--font-heading);
  font-size:2rem;
  font-weight:800;
  color:var(--accent-dark);
  letter-spacing:-.02em;
}
.year-tag{
  display:inline-block;
  padding:.5rem 1.4rem;
  background:var(--accent);
  color:var(--white);
  border-radius:var(--r-full);
  font-family:var(--font-heading);
  font-size:1.3rem;
  font-weight:700;
  letter-spacing:.04em;
}

.title{
  font-family:var(--font-heading);
  font-size:1.8rem;
  font-weight:800;
  color:var(--text);
  margin:0 0 .8rem;
  letter-spacing:-.01em;
}

.image{
  width:100%;
  border-radius:var(--r-md);
  overflow:hidden;
  margin-bottom:1.4rem;
  background:var(--gray-100);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
.image img{ width:100%; height:auto; display:block; }

.mode{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.3rem 1rem;
  background:var(--gray-100);
  color:var(--text-secondary);
  border-radius:var(--r-full);
  font-size:1.2rem;
  font-weight:700;
}

.quality{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.3rem 1rem;
  background:var(--primary-mist);
  color:var(--primary-dark);
  border-radius:var(--r-full);
  font-size:1.2rem;
  font-weight:700;
}

.glass{
  background:rgba(255,255,255,.7);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.4);
  border-radius:var(--r-md);
  padding:1.4rem 1.6rem;
  margin-bottom:1rem;
}

.deco,
.decorative{
  position:absolute;
  pointer-events:none;
  opacity:.15;
}
.deco-circle-1{
  width:20rem; height:20rem;
  border-radius:50%;
  background:var(--accent);
  top:-6rem; left:-6rem;
}
.deco-circle-2{
  width:14rem; height:14rem;
  border-radius:50%;
  background:var(--primary);
  bottom:-4rem; right:-4rem;
}

.animated{
  animation:floatUp 3s ease-in-out infinite;
}
@keyframes floatUp{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-1rem); } }

.swipe{
  display:flex;
  align-items:center;
  gap:.4rem;
  font-size:1.25rem;
  color:var(--text-muted);
  font-style:italic;
}

.transition{
  transition:all var(--t-slow);
}

.toast{
  position:fixed;
  bottom:2.4rem;
  right:2.4rem;
  background:var(--primary-dark);
  color:var(--white);
  padding:1.4rem 2rem;
  border-radius:var(--r-md);
  box-shadow:var(--shadow-2xl);
  font-size:1.45rem;
  z-index:999999;
  display:flex;
  align-items:center;
  gap:1rem;
  animation:msModalIn .25s ease-out;
  max-width:36rem;
}
.toast.success{ background:var(--primary); }
.toast.error{ background:#991b1b; }
.toast i{ font-size:1.8rem; }

.upload{
  border:2px dashed var(--border);
  border-radius:var(--r-md);
  padding:3rem 2rem;
  text-align:center;
  background:var(--white);
  transition:all var(--t-base);
  cursor:pointer;
}
.upload:hover{
  border-color:var(--primary);
  background:var(--primary-mist);
}
.upload i{ font-size:3.4rem; color:var(--primary); margin-bottom:1rem; }
.upload p{ font-size:1.4rem; color:var(--text-secondary); margin:0 0 .4rem; }
.upload strong{ color:var(--text); }

.site{
  font-family:var(--font-heading);
  font-size:1.4rem;
  font-weight:700;
  color:var(--text);
  margin-bottom:1rem;
}

.char{
  display:inline-block;
  font-family:var(--font-heading);
  font-weight:800;
  color:var(--primary);
}

.compress{
  display:flex;
  align-items:center;
  gap:1rem;
  padding:1rem 1.4rem;
  background:var(--white);
  border:1px solid var(--border-light);
  border-radius:var(--r-sm);
  margin-bottom:.6rem;
}

.field{
  margin-bottom:1.4rem;
}
.field-label{
  display:block;
  font-family:var(--font-heading);
  font-size:1.3rem;
  font-weight:600;
  color:var(--text);
  margin-bottom:.6rem;
}
.field input,
.field textarea,
.field select{
  width:100%;
  padding:1.1rem 1.4rem;
  border:2px solid var(--border);
  border-radius:var(--r-sm);
  font-family:var(--font-body);
  font-size:1.45rem;
  color:var(--text);
  background:var(--white);
  outline:none;
  transition:border-color var(--t-base), box-shadow var(--t-base);
}
.field input:focus,
.field textarea:focus,
.field select:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 4px var(--primary-glow);
}
.field textarea{ min-height:12rem; resize:vertical; }

.entries{
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.entry{
  background:var(--white);
  border:1px solid var(--border-light);
  border-left:5px solid var(--primary);
  border-radius:var(--r-md);
  padding:1.4rem 1.6rem;
  display:flex;
  align-items:center;
  gap:1.2rem;
}
.entry-info{ flex:1 1 auto; min-width:0; }
.entry-name{ font-family:var(--font-heading); font-size:1.5rem; font-weight:700; color:var(--text); margin-bottom:.2rem; }
.entry-meta{ font-size:1.3rem; color:var(--text-secondary); }

/* =====================================================
   AUTH PAGES (.auth-*, .forgot-*, .input-, .role-)
   ===================================================== */
.auth-page,
.auth-wrap{
  background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2rem;
  position:relative;
  overflow:hidden;
}
.auth-page::before{
  content:'';
  position:absolute;
  top:-10rem; right:-10rem;
  width:36rem; height:36rem;
  border-radius:50%;
  background:rgba(255,255,255,.05);
  pointer-events:none;
}
.auth-page::after{
  content:'';
  position:absolute;
  bottom:-12rem; left:-12rem;
  width:42rem; height:42rem;
  border-radius:50%;
  background:rgba(255,255,255,.04);
  pointer-events:none;
}
.auth-card{
  background:var(--white);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-2xl);
  padding:3rem;
  max-width:42rem;
  width:100%;
  position:relative;
  z-index:1;
}
.auth-card h1{
  font-family:var(--font-heading);
  font-size:2.2rem;
  font-weight:800;
  color:var(--text);
  margin:0 0 .6rem;
  letter-spacing:-.01em;
}
.auth-card p{ color:var(--text-secondary); font-size:1.4rem; margin:0 0 2rem; }

.auth-logo{
  display:block;
  width:6rem;
  height:6rem;
  margin:0 auto 1.4rem;
  border-radius:var(--r-md);
  background:var(--primary-mist);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--primary);
  font-size:2.4rem;
}

.input{
  width:100%;
  padding:1.2rem 1.6rem;
  border:2px solid var(--border);
  border-radius:var(--r-sm);
  font-family:var(--font-body);
  font-size:1.5rem;
  color:var(--text);
  background:var(--white);
  outline:none;
  transition:border-color var(--t-base), box-shadow var(--t-base);
}
.input:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 4px var(--primary-glow);
}

.role{
  display:flex;
  align-items:center;
  gap:1rem;
  padding:1.2rem 1.6rem;
  background:var(--gray-50);
  border:1px solid var(--border-light);
  border-radius:var(--r-sm);
  margin-bottom:.6rem;
  cursor:pointer;
  transition:all var(--t-fast);
}
.role:hover{ background:var(--primary-mist); border-color:var(--primary); }
.role input[type="radio"]{ width:1.6rem; height:1.6rem; accent-color:var(--primary); }
.role-name{ font-family:var(--font-heading); font-size:1.35rem; font-weight:600; color:var(--text); flex:1; }
.role-desc{ font-size:1.25rem; color:var(--text-muted); }

.forgot{
  text-align:center;
  margin-top:1rem;
}
.forgot a{ color:var(--primary); font-size:1.35rem; font-weight:600; }

/* =====================================================
   GENERIC LAYOUTS (page, header, tab, settings, etc.)
   ===================================================== */
.page{
  background:var(--bg);
  padding:0 0 5rem;
  min-height:60vh;
}
.page .container{ padding-top:1rem; }

.page-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.6rem;
  flex-wrap:wrap;
  margin-bottom:2rem;
}
.page-header h1,
.page-header h2{
  font-family:var(--font-heading);
  font-size:clamp(2rem,3.6vw,2.6rem);
  font-weight:800;
  color:var(--text);
  margin:0;
  letter-spacing:-.01em;
}

.tab-bar{
  display:flex;
  align-items:center;
  gap:0;
  background:var(--white);
  border:1px solid var(--border-light);
  border-radius:var(--r-md);
  padding:0 1rem;
  margin-bottom:1.6rem;
  overflow-x:auto;
  flex-wrap:wrap;
}
.tab-btn{
  padding:1.2rem 1.6rem;
  background:transparent;
  border:none;
  font-family:var(--font-heading);
  font-size:1.35rem;
  font-weight:600;
  color:var(--text-secondary);
  cursor:pointer;
  border-bottom:3px solid transparent;
  white-space:nowrap;
  transition:all var(--t-fast);
}
.tab-btn.active,
.tab-btn:hover{ color:var(--primary); border-bottom-color:var(--primary); }

.order{
  display:flex;
  align-items:center;
  gap:1rem;
  padding:1.2rem 1.6rem;
  background:var(--white);
  border:1px solid var(--border-light);
  border-left:5px solid var(--primary);
  border-radius:var(--r-md);
  margin-bottom:1rem;
}
.order-num{
  font-family:var(--font-heading);
  font-size:1.8rem;
  font-weight:800;
  color:var(--primary);
  min-width:3rem;
}
.order-info{ flex:1; }
.order-name{ font-family:var(--font-heading); font-size:1.45rem; font-weight:700; color:var(--text); }
.order-meta{ font-size:1.3rem; color:var(--text-secondary); }

.template,
.templates{
  background:var(--white);
  border:2px solid var(--border-light);
  border-radius:var(--r-md);
  padding:1.6rem;
  cursor:pointer;
  transition:all var(--t-fast);
  text-align:center;
  display:block;
  color:var(--text) !important;
  text-decoration:none !important;
}
.template:hover,
.templates:hover,
.template.selected,
.templates.selected{ border-color:var(--primary); background:var(--primary-mist); }
.template img,
.templates img{ max-width:100%; max-height:18rem; border-radius:var(--r-sm); margin-bottom:.8rem; }
.template .tpl-name,
.templates .tpl-name{ font-family:var(--font-heading); font-size:1.4rem; font-weight:700; color:var(--text); }

.settings{
  background:var(--white);
  border:1px solid var(--border-light);
  border-radius:var(--r-md);
  padding:1.6rem 1.8rem;
  margin-bottom:1.4rem;
}
.settings h3{
  font-family:var(--font-heading);
  font-size:1.6rem;
  font-weight:700;
  color:var(--text);
  margin:0 0 1rem;
}

.header-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  padding:1.4rem 1.8rem;
  background:var(--white);
  border:1px solid var(--border-light);
  border-radius:var(--r-md);
  margin-bottom:1.6rem;
}
.header-bar h2{
  font-family:var(--font-heading);
  font-size:1.7rem;
  font-weight:800;
  color:var(--text);
  margin:0;
}

/* =====================================================
   RESPONSIVE GLOBAL CLEANUP (round 2)
   ===================================================== */
@media(max-width:991px){
  .p-layout{ grid-template-columns:1fr; }
  .p-sidebar{ position:static; }
  .pay-stats,
  .p-stats-row{ grid-template-columns:1fr 1fr; }
  .method{ grid-template-columns:1fr; }
  .performance{ grid-template-columns:1fr 1fr; }
}
/* =====================================================
   TEMPLATE 1 — CLASSIC · Mobile Hero Typography
   Aligns hp-hero background texts with Tpl3 (Bold Split)
   + Tpl4 (Prestige) sizing & styling on mobile.
   Texts: Admissions Open eyebrow, school name, motto,
   and hero tag/description.
   ===================================================== */
@media(max-width:767px){
  .hp-hero h1{ font-size:clamp(3.4rem,11vw,5rem) !important; line-height:.96 !important; letter-spacing:-.045em !important; text-wrap:balance; }
  .hp-hero-school{ font-size:1em !important; line-height:1.02 !important; }
  .hp-hero-motto{ font-size:clamp(1.7rem,4.8vw,2.4rem) !important; line-height:1.15 !important; letter-spacing:.01em !important; }
  .hp-hero-eyebrow{ font-size:1.15rem !important; padding:.65rem 1.4rem !important; letter-spacing:.16em !important; }
  .hp-hero-tag{ font-size:1.65rem !important; line-height:1.65 !important; max-width:60rem; }
  .hp-hero-cta{ display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important; gap:.8rem !important; align-items:stretch !important; width:100% !important; max-width:100% !important; margin-left:0 !important; margin-right:0 !important; justify-content:flex-start !important; }
  .hp-hero-cta .hp-btn{ flex:1 1 0 !important; min-width:0 !important; justify-content:center !important; white-space:nowrap !important; }
  .hp-hero-trust{ margin:1.4rem 0 0 !important; padding:1.4rem 0 0 0 !important; max-width:100% !important; justify-content:center !important; justify-items:center !important; }
}
@media(max-width:480px){
  .hp-hero h1{ font-size:clamp(3.2rem,13vw,5rem) !important; }
  .hp-hero-motto{ font-size:clamp(1.65rem,5.5vw,2.2rem) !important; }
  .hp-hero-tag{ font-size:1.5rem !important; }
  .hp-hero-eyebrow{ font-size:1.05rem !important; }
  .hp-hero-cta{ gap:.6rem !important; }
  .hp-hero-cta .hp-btn{ padding:.85rem .7rem !important; font-size:1rem !important; }
}
.hp-hero-content{ display:flex !important; flex-direction:column !important; align-items:flex-start !important; text-align:left !important; }
.hp-hero-content .hp-hero-eyebrow, .hp-hero-content h1, .hp-hero-content .hp-hero-tag{ align-self:flex-start !important; text-align:left !important; }
.hp-hero-cta{ width:100% !important; max-width:100% !important; margin-left:0 !important; margin-right:0 !important; justify-content:flex-start !important; align-self:stretch !important; }
.hp-hero-trust{ display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:.9rem !important; width:100% !important; max-width:100% !important; margin:1.8rem 0 0 !important; padding-left:0 !important; padding-right:0 !important; justify-content:center !important; justify-items:center !important; align-self:stretch !important; }
.hp-trust-item{ align-items:center !important; text-align:center !important; justify-content:center !important; width:100% !important; }
.hp-trust-item div{ align-items:center !important; text-align:center !important; }
@media(max-width:380px){
  .hp-hero-cta{ gap:.5rem !important; }
  .hp-hero-cta .hp-btn{ padding:.8rem .55rem !important; font-size:.92rem !important; }
}
@media(max-width:767px){
  .auth-card{ padding:2rem 1.6rem; }
  .pay-stats,
  .p-stats-row,
  .performance{ grid-template-columns:1fr; }
  .game-card{ flex-direction:column; text-align:center; }
  .step{ flex-direction:column; text-align:center; }
  .cover{ padding:2.4rem 1.4rem; }
  .kiosk-time{ font-size:3.6rem; }
  .calendar-grid{ gap:.2rem; }
  .calendar-cell{ font-size:1.1rem; }
  .assignment-card{ flex-direction:column; }
  .assignment-actions{ width:100%; }
}



/* ============================================================
   SAFERIDE (BUS PICKUP / DROP-OFF)  — admin_bus_routes.php,
   admin_bus_activity.php, admin_bus_sos.php, parent bus widget
   on portal.php.

   Mirrors the .ck-* / .cl-* design system that powers the
   Clock In/Out feature so a single School Settings palette
   swap recolours this surface too.
   ============================================================ */

/* ----- Page wrap (shared by all 3 admin pages) ----- */
.br-wrap{
  background:
    radial-gradient(circle at 12% -10%, rgba(var(--primary-rgb),.10) 0%, transparent 55%),
    radial-gradient(circle at 88% 110%, rgba(var(--gold-rgb),.10) 0%, transparent 55%),
    linear-gradient(180deg, #ffffff 0%, var(--primary-mist) 100%);
  min-height: 80vh;
  padding: 2.2rem 0 4rem;
  font-family: var(--font-body);
}
.br-container{
  max-width: 128rem;
  margin: 0 auto;
  padding: 0 1.8rem;
}

/* ----- Hero / header ----- */
.br-header{
  background: var(--primary-dark);
  color: var(--white);
  border-radius: var(--r-lg);
  padding: 2rem 2.6rem;
  margin-bottom: 2rem;
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.6rem;
  position: relative;
  overflow: hidden;
}
/* Same white-text override for the bus-feature hero boxes
   (and conductor.php, which also uses .br-header). */
.br-header,
.br-header h1, .br-header h2, .br-header h3,
.br-header h4, .br-header h5, .br-header h6,
.br-header p, .br-header small, .br-header span,
.br-header div, .br-header strong, .br-header em,
.br-header a, .br-header a:hover,
.br-header i{ color: var(--white); }
.br-header h1 i, .br-header h2 i, .br-header h3 i{ color: var(--gold); }
.br-header h1{
  margin: 0;
  font-family: var(--font-heading);
  font-size: 2.2rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.br-header h1 i{ color: var(--gold); }
.br-header p{
  margin: .4rem 0 0;
  opacity: .85;
  font-size: 1.3rem;
}
.br-header .br-hero-badges{
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
  margin-top: .8rem;
}
.br-hero-badges .br-chip{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem 1rem;
  border-radius: var(--r-full);
  font-size: 1.1rem;
  font-weight: 700;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  color:var(--white);
}
.br-hero-badges .br-chip i{ color: var(--gold); }

/* ----- Stats grid ----- */
.br-stats{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.2rem;
  margin-bottom: 2rem;
}
.br-stat{
  background: var(--white);
  border-radius: var(--r-md);
  padding: 1.6rem;
  text-align: center;
  border: 2px solid var(--border-light);
  transition: all var(--t-base);
}
.br-stat:hover{ border-color: var(--primary-mist); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.br-stat .br-num{
  font-family: var(--font-heading);
  font-size: 2.8rem;
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
}
.br-stat .br-lbl{
  font-size: 1.1rem;
  color: var(--text-secondary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-top: .4rem;
}
.br-stat.green   .br-num{ color: var(--green-700); }
.br-stat.yellow  .br-num{ color: var(--amber-700); }
.br-stat.blue    .br-num{ color: var(--primary); }
.br-stat.red     .br-num{ color: #dc2626; }
.br-stat.purple  .br-num{ color: var(--green-300); }

/* ----- Toolbar (filters / search) ----- */
.br-toolbar{
  background: var(--white);
  border-radius: var(--r-lg);
  padding: 1.4rem 2rem;
  box-shadow: var(--shadow-sm);
  margin-bottom: 1.8rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  align-items: flex-end;
}
.br-tb-grp{ display: flex; flex-direction: column; gap: .4rem; }
.br-tb-grp label{
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: .4px;
}
.br-tb-grp input,
.br-tb-grp select,
.br-tb-grp textarea{
  padding: .8rem 1.2rem;
  border: 2px solid var(--border);
  border-radius: var(--r-sm);
  font-size: 1.3rem;
  outline: none;
  min-width: 15rem;
  background: var(--white);
  width: auto;
  font-family: inherit;
}
.br-tb-grp input:focus,
.br-tb-grp select:focus,
.br-tb-grp textarea:focus{
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb),.15);
}
.br-tb-grp input.br-grow{ min-width: 24rem; flex: 1; }

/* ----- Buttons ----- */
.br-btn{
  padding: .9rem 1.6rem;
  background: var(--primary);
  color: var(--white);
  border: none;
  border-radius: var(--r-sm);
  font-weight: 700;
  font-size: 1.2rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  transition: all var(--t-base);
  text-decoration: none;
  font-family: inherit;
}
.br-btn:hover{ background: var(--accent); color: var(--white); transform: translateY(-1px); }
.br-btn.ghost{
  background: var(--primary-mist);
  color: var(--primary);
}
.br-btn.ghost:hover{ background: var(--accent); color: var(--white); }
.br-btn.danger{ background: #dc2626; }
.br-btn.danger:hover{ background: #b91c1c; }
.br-btn.success{ background: var(--green-700); }
.br-btn.success:hover{ background: var(--green-800); }
.br-btn.sm{ padding: .55rem 1rem; font-size: 1.1rem; }
.br-btn.xs{ padding: .35rem .8rem; font-size: 1rem; }

/* ----- Cards / sections ----- */
.br-card{
  background: var(--white);
  border-radius: var(--r-lg);
  padding: 2.2rem 2.4rem;
  box-shadow: var(--shadow-md);
  margin-bottom: 1.8rem;
}
.br-card-head{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.6rem;
  padding-bottom: 1.2rem;
  border-bottom: 2px solid var(--primary-mist);
  flex-wrap: wrap;
  gap: 1rem;
}
.br-card-title{
  font-family: var(--font-heading);
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--primary);
  margin: 0;
  display: flex;
  align-items: center;
  gap: .6rem;
}
.br-card-title i{ color: var(--accent); }
.br-card-sub{
  font-size: 1.2rem;
  color: var(--text-secondary);
  margin: .2rem 0 0;
}

/* ----- Route list ----- */
.br-route-list{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(36rem, 1fr));
  gap: 1.4rem;
}
.br-route{
  background: var(--primary-mist);
  border: 2px solid var(--border-light);
  border-left: 5px solid var(--primary);
  border-radius: var(--r-md);
  padding: 1.4rem 1.6rem;
  transition: all var(--t-base);
}
.br-route:hover{ transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--primary); }
.br-route.inactive{
  background: var(--bg-alt);
  border-left-color: var(--gray-400);
  opacity: .85;
}
.br-route-head{
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: .6rem;
}
.br-route-name{
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--primary);
  margin: 0;
}
.br-route-code{
  display: inline-block;
  margin-left: .6rem;
  padding: .15rem .7rem;
  background: var(--gold);
  color: var(--primary-deeper);
  border-radius: var(--r-full);
  font-size: 1rem;
  font-weight: 800;
}
.br-route-meta{
  font-size: 1.2rem;
  color: var(--text-secondary);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: .4rem;
}
.br-route-meta i{ color: var(--accent); margin-right: .3rem; }
.br-route-actions{
  display: flex;
  gap: .6rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}
.br-route-stops{
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .8rem;
}
.br-stop-chip{
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .25rem .8rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--primary);
}
.br-stop-chip .br-stop-num{
  background: var(--primary);
  color: var(--white);
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  font-weight: 800;
}

/* ----- Roster table ----- */
.br-table{
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
  font-size: 1.3rem;
}
.br-table th{
  background: var(--primary-mist);
  color: var(--primary);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.15rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 1.1rem 1.2rem;
  text-align: left;
  border-bottom: 2px solid var(--primary);
  white-space: nowrap;
}
.br-table td{
  padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--border-light);
  color: var(--text-secondary);
  vertical-align: middle;
}
.br-table tr:last-child td{ border-bottom: none; }
.br-table tr:hover td{ background: var(--bg-alt); }
.br-table .br-av{
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.3rem;
  margin-right: .8rem;
  flex-shrink: 0;
  overflow: hidden;
  vertical-align: middle;
}
.br-table .br-av img{ width:100%; height:100%; object-fit:cover; }
.br-table .br-actions-cell{ display: flex; gap: .4rem; flex-wrap: wrap; }

/* ----- Badges / pills ----- */
.br-pill{
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: 1rem;
  padding: .25rem .8rem;
  border-radius: var(--r-full);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.br-pill.active{ background: var(--green-tint-100); color: var(--green-700); }
.br-pill.inactive{ background: #fef2f2; color: #991b1b; }
.br-pill.open{ background: var(--primary-mist); color: var(--primary-dark); }
.br-pill.closed{ background: var(--bg-alt); color: var(--text-muted); }
.br-pill.pickup{ background: #dbeafe; color: #1e40af; }
.br-pill.arrival{ background: #dcfce7; color: #166534; }
.br-pill.departure{ background: #fef3c7; color: #92400e; }
.br-pill.dropoff{ background: #ede9fe; color: #5b21b6; }
.br-pill.qr{ background: var(--primary-mist); color: var(--primary-dark); }
.br-pill.manual{ background: var(--amber-100); color: var(--amber-700); }
.br-pill.sos{ background: #fee2e2; color: #b91c1c; animation: brPulse 2s infinite; }

@keyframes brPulse{
  0%,100%{ box-shadow: 0 0 0 0 rgba(220,38,38,.4); }
  50%{ box-shadow: 0 0 0 .6rem rgba(220,38,38,0); }
}

/* ----- SOS / activity log items ----- */
.br-log-list{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(34rem, 1fr));
  gap: 1rem;
}
.br-log{
  background: var(--white);
  border-radius: var(--r-md);
  padding: 1.2rem 1.6rem;
  border-left: 4px solid var(--primary);
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
  transition: all var(--t-base);
  box-shadow: var(--shadow-xs);
}
.br-log:hover{ transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.br-log.pickup{ border-left-color: #1e40af; }
.br-log.school_arrival{ border-left-color: var(--green-700); }
.br-log.school_departure{ border-left-color: var(--amber-700); }
.br-log.dropoff{ border-left-color: #5b21b6; }
.br-log.sos{
  border-left-color: #dc2626;
  background: #fef2f2;
}
.br-log .br-log-time{
  font-family: 'JetBrains Mono','Courier New', monospace;
  font-weight: 800;
  color: var(--primary);
  font-size: 1.3rem;
  white-space: nowrap;
  flex-shrink: 0;
}
.br-log .br-log-body{ flex: 1; min-width: 0; }
.br-log .br-log-name{
  font-weight: 800;
  color: var(--primary);
  font-size: 1.35rem;
}
.br-log .br-log-sub{
  font-size: 1.1rem;
  color: var(--text-secondary);
  margin-top: .2rem;
}
.br-log .br-log-meta{
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
  margin-top: .5rem;
}
.br-log .br-log-msg{
  margin-top: .5rem;
  padding: .6rem .8rem;
  background: rgba(220,38,38,.08);
  border-radius: var(--r-xs);
  font-size: 1.2rem;
  color: #991b1b;
  font-style: italic;
}

/* ----- Empty state ----- */
.br-empty{
  text-align: center;
  padding: 3.6rem 2rem;
  color: var(--text-muted);
}
.br-empty i{
  font-size: 4.4rem;
  opacity: .25;
  display: block;
  margin-bottom: 1rem;
}
.br-empty h3{
  font-family: var(--font-heading);
  font-size: 1.6rem;
  color: var(--text-secondary);
  margin: 0 0 .4rem;
}

/* ----- Modal (add route / add stop / add roster) ----- */
.br-modal-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 99998;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.br-modal-overlay.open{ display: flex; }
.br-modal{
  background: var(--white);
  border-radius: var(--r-lg);
  width: 100%;
  max-width: 56rem;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-2xl);
  animation: brModalIn .25s ease;
}
@keyframes brModalIn{
  from{ opacity:0; transform: translateY(20px) scale(.96); }
  to  { opacity:1; transform: translateY(0) scale(1); }
}
.br-modal-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.6rem 2rem;
  background: var(--primary-dark);
  color: var(--white);
}
.br-modal-head,
.br-modal-head h1, .br-modal-head h2, .br-modal-head h3,
.br-modal-head h4, .br-modal-head h5, .br-modal-head h6,
.br-modal-head p, .br-modal-head span, .br-modal-head small,
.br-modal-head i, .br-modal-head a, .br-modal-head a:hover,
.br-modal-head strong{ color: var(--white); }
.br-modal-head h3 i{ color: var(--gold); }
.br-modal-head h3{
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.7rem;
  font-weight: 800;
}
.br-modal-close{
  background: rgba(255,255,255,.18);
  border: none;
  color: var(--white);
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  font-size: 1.6rem;
  cursor: pointer;
  transition: all var(--t-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.br-modal-close:hover{ background: rgba(255,255,255,.32); transform: rotate(90deg); }
.br-modal-body{ padding: 2rem; }
.br-modal-actions{
  padding: 1.4rem 2rem;
  border-top: 1px solid var(--border-light);
  background: var(--bg-alt);
  display: flex;
  gap: .8rem;
  justify-content: flex-end;
}

/* ----- Form fields inside modal ----- */
.br-field{ margin-bottom: 1.4rem; }
.br-field label{
  display: block;
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--primary);
  margin-bottom: .4rem;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.br-field input,
.br-field select,
.br-field textarea{
  width: 100%;
  padding: 1rem 1.2rem;
  border: 2px solid var(--border);
  border-radius: var(--r-sm);
  font-size: 1.4rem;
  background: var(--white);
  color: var(--text);
  font-family: inherit;
}
.br-field input:focus,
.br-field select:focus,
.br-field textarea:focus{
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb),.15);
  outline: none;
}
.br-field-row{ display: flex; gap: 1rem; flex-wrap: wrap; }
.br-field-row > .br-field{ flex: 1 1 20rem; min-width: 0; }

/* ----- Alert / flash messages ----- */
.br-alert{
  padding: 1.4rem 1.6rem;
  border-radius: var(--r-md);
  font-size: 1.3rem;
  font-weight: 600;
  border: 1px solid;
  margin-bottom: 1.6rem;
  display: flex;
  align-items: center;
  gap: .8rem;
}
.br-alert.success{ background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }
.br-alert.error{ background: #fef2f2; color: #991b1b; border-color: #fecaca; }
.br-alert.info{ background: #eff6ff; color: #1e40af; border-color: #bfdbfe; }
.br-alert.warning{ background: #fffbeb; color: #92400e; border-color: #fde68a; }

/* ----- Tabs (sub-nav within a page) ----- */
.br-tabs{
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0 0 0 0;
  background: transparent;
  flex-wrap: wrap;
  gap: .4rem;
}
.br-tabs li{
  flex: 1 1 14rem;
  padding: 1.3rem 1rem;
  text-align: center;
  cursor: pointer;
  font-weight: 700;
  font-size: 1.3rem;
  background: var(--bg-alt);
  color: var(--text-secondary);
  border: 2px solid var(--border);
  border-bottom: none;
  border-radius: var(--r-md) var(--r-md) 0 0;
  transition: all var(--t-base);
  user-select: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  text-decoration: none;
}
.br-tabs li:hover{ background: var(--primary-mist); color: var(--primary); }
.br-tabs li.active{
  background: var(--white);
  color: var(--accent);
  border-color: var(--accent);
  border-bottom-color: var(--white);
  z-index: 2;
  box-shadow: 0 -3px 10px rgba(var(--accent-rgb),.10);
}

/* ----- Stage filter bar (bus_activity / bus_sos) ----- */
.br-stage-bar{
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: 1.4rem;
  padding: 1rem 1.4rem;
  background: var(--primary-mist);
  border-radius: var(--r-md);
  align-items: center;
}
.br-stage-bar .br-stage-lbl{
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--primary);
  margin-right: .6rem;
}
.br-stage-pill{
  padding: .55rem 1.1rem;
  background: var(--white);
  border: 1.6px solid var(--border);
  border-radius: var(--r-full);
  font-weight: 700;
  font-size: 1.2rem;
  cursor: pointer;
  color: var(--text-secondary);
  transition: all var(--t-fast);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.br-stage-pill:hover{ border-color: var(--primary); color: var(--primary); }
.br-stage-pill.active{
  background: var(--primary);
  color: var(--white);
  border-color: var(--primary);
  box-shadow: 0 4px 12px rgba(var(--primary-rgb),.18);
}
.br-stage-pill.active .br-stage-cnt{
  background: rgba(255,255,255,.22);
  color: var(--white);
}
.br-stage-cnt{
  background: var(--gray-100);
  color: var(--text-muted);
  padding: .1rem .55rem;
  border-radius: var(--r-full);
  font-size: 1rem;
  font-weight: 800;
}

/* ----- Parent portal bus widget ----- */
.p-bus-card{
  background: linear-gradient(135deg, var(--primary-mist) 0%, #ffffff 100%);
  border: 1px solid var(--border-light);
  border-left: 5px solid var(--primary);
  border-radius: var(--r-lg);
  padding: 1.8rem 2rem;
  margin-bottom: 1.6rem;
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
}
.p-bus-card::before{
  content: '';
  position: absolute;
  top: -3rem;
  right: -3rem;
  width: 12rem;
  height: 12rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--primary-rgb),.10) 0%, transparent 70%);
  pointer-events: none;
}
.p-bus-card-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  gap: 1rem;
  position: relative;
  z-index: 1;
}
.p-bus-card-head h3{
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--primary);
  display: flex;
  align-items: center;
  gap: .6rem;
}
.p-bus-card-head h3 i{ color: var(--accent); }
.p-bus-status{
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .9rem;
  border-radius: var(--r-full);
  font-size: 1.1rem;
  font-weight: 800;
}
.p-bus-status.on-bus{ background: var(--primary-mist); color: var(--primary-dark); }
.p-bus-status.not-yet{ background: var(--amber-100); color: var(--amber-700); }
.p-bus-status.done{ background: var(--green-tint-100); color: var(--green-700); }

.p-bus-route{
  font-size: 1.3rem;
  color: var(--text-secondary);
  margin-bottom: 1.2rem;
  position: relative;
  z-index: 1;
}
.p-bus-route strong{ color: var(--primary); font-weight: 800; }

.p-bus-timeline{
  position: relative;
  padding-left: 2rem;
  position: relative;
  z-index: 1;
}
.p-bus-timeline::before{
  content: '';
  position: absolute;
  left: .55rem;
  top: .5rem;
  bottom: .5rem;
  width: 2px;
  background: var(--border);
}
.p-bus-step{
  position: relative;
  padding: .6rem 0;
  font-size: 1.3rem;
  color: var(--text-muted);
}
.p-bus-step::before{
  content: '';
  position: absolute;
  left: -1.65rem;
  top: 1.1rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--bg-alt);
  border: 2px solid var(--border);
}
.p-bus-step.done{
  color: var(--primary);
  font-weight: 600;
}
.p-bus-step.done::before{
  background: var(--green-700);
  border-color: var(--green-700);
  box-shadow: 0 0 0 3px var(--green-tint-100);
}
.p-bus-step.current{
  color: var(--accent);
  font-weight: 800;
}
.p-bus-step.current::before{
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.20);
  animation: brPulse 2s infinite;
}
.p-bus-step-time{
  display: inline-block;
  margin-left: .6rem;
  font-family: 'JetBrains Mono','Courier New', monospace;
  font-size: 1.1rem;
  color: var(--green-700);
  font-weight: 800;
}

.p-bus-empty{
  text-align: center;
  padding: 1.4rem;
  color: var(--text-muted);
  font-size: 1.3rem;
}
.p-bus-empty i{ font-size: 2.6rem; opacity: .4; display: block; margin-bottom: .4rem; color: var(--primary); }

/* ----- Responsive ----- */
@media (max-width: 768px){
  .br-route-list, .br-log-list{ grid-template-columns: 1fr; }
  .br-tabs li{ font-size: 1.1rem; padding: 1rem .6rem; flex: 1 1 48%; }
  .br-toolbar{ padding: 1.2rem 1.4rem; }
  .br-card{ padding: 1.4rem 1.2rem; }
  .br-table{ font-size: 1.1rem; }
  .br-table th, .br-table td{ padding: .8rem .8rem; }
  .br-tb-grp input.br-grow{ min-width: 100%; flex: 1 1 100%; }
}
/* =====================================================
   TEMPLATE 11 -- YEARBOOK  (.tpl11)
   "Living archive" homepage — uses the SAME neutral
   canvas as Template 1 (off-white --bg + light-gray
   --bg-alt + deep primary --bg-dark alternating sections)
   so the brand feels consistent across templates, while
   unique yearbook touches (polaroids, washi tape stickers,
   handwritten gradients on timeline dots & level icons,
   tilted "scrapbook" cards) keep this template distinct.
   ===================================================== */
.tpl11{
  --y-paper:#ffffff;
  --y-paper-2:#f8f9fa;
  --y-ink:var(--text,#1a1d21);
  --y-ink-2:var(--text-secondary,#4a5058);
  --y-ink-3:var(--text-muted,#7a7f86);
  --y-line:var(--border-light,#e8eaed);
  --y-tape:var(--gold,var(--gold));
  --y-tape2:var(--primary-mist,#9fd8c1);
  --y-red:var(--accent,#d1495b);
  --y-navy:var(--primary,#0c5430);
  --y-shadow:0 18px 40px rgba(26,29,33,.10);
  /* Brand-tinted alternating section palettes (light gray
     + soft primary tints + deep primary dark sections —
     mirroring Template 1's --bg / --bg-alt / --bg-dark) */
  --y-bg-alt:var(--bg-alt,#f8f9fa);
  --y-bg-primary:color-mix(in srgb, var(--primary-mist) 55%, #fff);
  --y-bg-primary-strong:color-mix(in srgb, var(--primary) 10%, var(--primary-mist));
  --y-bg-gold:color-mix(in srgb, var(--gold) 10%, #fff);
  --y-bg-accent:color-mix(in srgb, var(--accent) 6%, #fff);
  --y-bg-dark:linear-gradient(135deg, var(--primary-deeper) 0%, var(--primary-dark) 60%, var(--primary) 100%);
  --y-bg-deep-gold:linear-gradient(135deg, color-mix(in srgb, var(--gold) 85%, var(--primary-deeper)) 0%, color-mix(in srgb, var(--gold) 55%, var(--primary-deeper)) 100%);
  /* Per-level vibrant gradient palettes */
  --y-lvl-nursery:linear-gradient(135deg, color-mix(in srgb, var(--accent) 62%, #fff) 0%, var(--accent) 55%, color-mix(in srgb, var(--accent) 42%, #fff) 100%);
  --y-lvl-nursery-soft:linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, #fff) 0%, color-mix(in srgb, var(--accent) 18%, #fff) 100%);
  --y-lvl-nursery-ink:var(--accent-dark);
  --y-lvl-primary:linear-gradient(135deg, var(--gold) 0%, color-mix(in srgb, var(--gold) 68%, #fff) 55%, color-mix(in srgb, var(--gold) 45%, #fff) 100%);
  --y-lvl-primary-soft:linear-gradient(135deg, #ffe9b5 0%, color-mix(in srgb, var(--gold) 45%, #fff) 100%);
  --y-lvl-primary-ink:var(--primary-deeper);
  --y-lvl-secondary:linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 55%, var(--primary-light) 100%);
  --y-lvl-secondary-soft:linear-gradient(135deg, var(--primary-mist) 0%, color-mix(in srgb, var(--primary-light) 30%, #fff) 100%);
  --y-lvl-secondary-ink:var(--primary-deeper);
  background:var(--bg,#fafbfc);
  color:var(--y-ink);
  font-family:'Trirong',Georgia,serif;
  overflow-x:hidden;
  position:relative;
}
.tpl11 *{box-sizing:border-box}
.tpl11 .y-container{max-width:1180px;margin:0 auto;padding:0 clamp(1rem,1.8vw,1.6rem);position:relative}
.tpl11 section{scroll-margin-top:8rem;}
.tpl11 .y-tape-label{display:inline-block;background:linear-gradient(135deg, var(--gold) 0%, color-mix(in srgb, var(--gold) 70%, #fff) 100%);color:var(--primary-deeper);padding:.5rem 1.6rem;font-family:'Open Sans',sans-serif;font-weight:800;font-size:1.15rem;letter-spacing:.08em;text-transform:uppercase;transform:rotate(-1.5deg);box-shadow:0 4px 10px rgba(var(--gold-rgb),.4), inset 0 1px 0 rgba(255,255,255,.4);border-radius:2px;position:relative;}
.tpl11 .y-tape-label--alt{background:linear-gradient(135deg, var(--primary-mist) 0%, color-mix(in srgb, var(--primary-light) 25%, #fff) 100%);color:var(--primary-deeper,#0c5430);border:1px solid rgba(0,0,0,.06);transform:rotate(1.2deg);box-shadow:0 4px 10px rgba(var(--primary-rgb),.25), inset 0 1px 0 rgba(255,255,255,.4);}
.tpl11 .y-tape-label--red{background:linear-gradient(135deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 72%, #fff) 100%);color:var(--white);transform:rotate(-1deg);box-shadow:0 4px 10px rgba(var(--accent-rgb),.4), inset 0 1px 0 rgba(255,255,255,.3);}
/* "On" colour tokens for sections that flip to dark — pick
   white or near-black text dynamically based on the active
   brand colour. */
.tpl11 .y-page--primary{--y-page-bg:var(--y-bg-primary);}
.tpl11 .y-page--primary-strong{--y-page-bg:var(--y-bg-primary-strong);}
.tpl11 .y-page--gold{--y-page-bg:var(--y-bg-gold);}
.tpl11 .y-page--accent{--y-page-bg:var(--y-bg-accent);}
.tpl11 .y-page--dark{--y-page-bg:var(--y-bg-dark);color:var(--white);}
.tpl11 .y-page--dark .y-page-head h2{color:var(--white);}
.tpl11 .y-page--dark .y-page-head p{color:rgba(255,255,255,.82);}
/* ════════════════════════════════════════════════════════════
   HERO — Open Yearbook Page
   Uses Template 1's deep primary hero palette (dark canvas with
   primary / gold / accent radial orbs and gold underline accent)
   so the hero reads as a "yearbook cover spread" instead of a
   light cream wash. The unique yearbook elements (polaroids,
   washi tape stickers, handwritten arrow) are preserved.
   ════════════════════════════════════════════════════════════ */
.tpl11 .y-hero{
  position:relative;
  padding:8rem clamp(1.6rem,3vw,3.2rem) 7rem clamp(1.6rem,3vw,3.2rem);
  border-top:4px solid var(--accent);
  overflow:hidden;
  isolation:isolate;
  color:var(--white);
  background:
    radial-gradient(circle at 12% 18%, rgba(var(--primary-light-rgb),.18), transparent 55%),
    radial-gradient(circle at 88% 82%, rgba(var(--primary-light-rgb),.18), transparent 55%),
    radial-gradient(circle at 50% 50%, rgba(var(--primary-rgb),.18), transparent 60%),
    linear-gradient(135deg, var(--primary-deeper) 0%, var(--primary-dark) 50%, var(--primary) 100%);
}
.tpl11 .y-hero::before{
  content:'';
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    radial-gradient(rgba(255,255,255,.045) 1.2px, transparent 1.4px),
    repeating-linear-gradient(135deg, transparent 0 22px, rgba(255,255,255,.025) 22px 23px);
  background-size:22px 22px, auto;
  opacity:.9;
  mask-image:radial-gradient(ellipse at center, #000, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse at center, #000, transparent 75%);
}
.tpl11 .y-hero::after{
  content:'';
  position:absolute; left:0; right:0; bottom:-1px; height:4rem; z-index:2; pointer-events:none;
  background:linear-gradient(180deg, transparent, var(--bg, #fafbfc));
  clip-path:polygon(0 100%, 100% 100%, 100% 35%, 0 100%);
}

/* Background decorative layers */
.tpl11 .y-hero-bg{position:absolute; inset:0; z-index:1; pointer-events:none;}
.tpl11 .y-hero-orb{position:absolute; border-radius:50%; filter:blur(70px); opacity:.75;}
.tpl11 .y-hero-orb--1{width:34rem; height:34rem; top:-9rem; left:-11rem; background:radial-gradient(circle, color-mix(in srgb, var(--primary) 70%, transparent) 0%, color-mix(in srgb, var(--primary) 25%, transparent) 50%, transparent 75%); animation:yFloat 14s ease-in-out infinite;}
.tpl11 .y-hero-orb--2{width:28rem; height:28rem; bottom:-9rem; right:-7rem; background:radial-gradient(circle, color-mix(in srgb, var(--gold) 80%, transparent) 0%, color-mix(in srgb, var(--gold) 30%, transparent) 50%, transparent 75%); animation:yFloat 18s ease-in-out infinite reverse;}
.tpl11 .y-hero-orb--3{width:20rem; height:20rem; top:38%; left:54%; background:radial-gradient(circle, color-mix(in srgb, var(--accent) 65%, transparent) 0%, color-mix(in srgb, var(--accent) 22%, transparent) 55%, transparent 75%); animation:yFloat 22s ease-in-out infinite;}
@keyframes yFloat{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(2rem,-3rem) scale(1.06);}}

.tpl11 .y-hero-grid-pattern{position:absolute; inset:0; opacity:.35;
  background-image:radial-gradient(rgba(255,255,255,.08) 1.2px, transparent 1.4px);
  background-size:22px 22px;}

.tpl11 .y-hero-scribble{position:absolute; opacity:.55; color:var(--gold);}
.tpl11 .y-hero-scribble--1{top:8rem; left:6%; width:8rem; height:2rem; transform:rotate(-12deg);
  background:repeating-linear-gradient(90deg, currentColor 0 6px, transparent 6px 12px);
  border-radius:999px;}
.tpl11 .y-hero-scribble--2{bottom:6rem; right:8%; width:10rem; height:2rem; transform:rotate(8deg);
  background:repeating-linear-gradient(90deg, var(--accent) 0 6px, transparent 6px 12px);
  border-radius:999px;}

.tpl11 .y-hero-spark{position:absolute; width:.7rem; height:.7rem; border-radius:50%; background:var(--gold); box-shadow:0 0 0 4px rgba(var(--gold-rgb),.35); animation:ySparkle 3s ease-in-out infinite;}
.tpl11 .y-hero-spark--1{top:18%; right:14%; animation-delay:0s;}
.tpl11 .y-hero-spark--2{top:54%; left:8%; width:.5rem; height:.5rem; background:var(--white); box-shadow:0 0 0 4px rgba(255,255,255,.3); animation-delay:.8s;}
.tpl11 .y-hero-spark--3{bottom:22%; right:32%; width:.6rem; height:.6rem; background:var(--accent); box-shadow:0 0 0 4px rgba(var(--accent-rgb),.4); animation-delay:1.6s;}
@keyframes ySparkle{0%,100%{transform:scale(1); opacity:.7;}50%{transform:scale(1.4); opacity:1;}}

.tpl11 .y-hero-tape{position:absolute; width:9rem; height:1.6rem; box-shadow:0 6px 14px rgba(0,0,0,.3); border-radius:1px; opacity:.92;}
.tpl11 .y-hero-tape--tl{top:3rem; left:-3rem; background:linear-gradient(135deg, var(--gold), color-mix(in srgb, var(--gold) 60%, var(--gold))); transform:rotate(-32deg);}
.tpl11 .y-hero-tape--br{bottom:5rem; right:-3rem; background:linear-gradient(135deg, var(--primary-mist), color-mix(in srgb, var(--primary-light) 25%, #fff)); transform:rotate(28deg);}

/* Hero layout grid */
.tpl11 .y-hero-grid{
  position:relative; z-index:3;
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:5rem;
  align-items:center;
}

/* Hero cover (left) */
.tpl11 .y-hero-cover{position:relative;}
.tpl11 .y-hero-h1{font-size:clamp(3.4rem,5.4vw,5.4rem); font-weight:800; line-height:1.02; margin:1.6rem 0 1.2rem; color:var(--white); letter-spacing:-.025em; text-shadow:0 6px 36px rgba(0,0,0,.25);}
.tpl11 .y-hero-h1-line{display:inline-block; position:relative;}
.tpl11 .y-hero-h1-line::after{content:''; position:absolute; left:0; right:0; bottom:-.35rem; height:.4rem; background:linear-gradient(90deg, var(--gold), color-mix(in srgb, var(--gold) 30%, transparent)); border-radius:4px; transform:rotate(-.6deg);}
.tpl11 .y-hero .y-motto{font-style:italic; color:rgba(255,255,255,.92); font-size:1.7rem; margin-bottom:1.6rem; line-height:1.4; max-width:48rem; font-weight:500;}
.tpl11 .y-hero-tag{font-family:'Open Sans',sans-serif; font-size:1.55rem; color:rgba(255,255,255,.85); line-height:1.75; margin:0 0 2.4rem; max-width:52rem;}

/* Hero CTAs */
.tpl11 .y-hero-cta{display:flex; flex-wrap:wrap; gap:1.2rem; align-items:center; margin-bottom:2.6rem;}
.tpl11 .y-btn{display:inline-flex; align-items:center; gap:.9rem; padding:1.25rem 2.4rem; border-radius:999px; font-family:'Open Sans',sans-serif; font-weight:800; font-size:1.3rem; text-decoration:none; transition:.3s cubic-bezier(.2,.8,.2,1); cursor:pointer; border:2px solid transparent;}
.tpl11 .y-btn--red{background:linear-gradient(135deg, var(--gold) 0%, color-mix(in srgb, var(--gold) 70%, #fff) 100%); color:var(--primary-deeper); box-shadow:0 14px 32px rgba(var(--gold-rgb),.45), inset 0 1px 0 rgba(255,255,255,.4);}
.tpl11 .y-btn--red:hover{transform:translateY(-3px) rotate(-1deg); box-shadow:0 20px 44px rgba(var(--gold-rgb),.6);}
.tpl11 .y-btn--outline{background:rgba(255,255,255,.10); backdrop-filter:blur(8px); border-color:rgba(255,255,255,.45); color:var(--white);}
.tpl11 .y-btn--outline:hover{background:rgba(255,255,255,.20); border-color:rgba(255,255,255,.7); color:var(--white); transform:translateY(-2px); box-shadow:0 10px 22px rgba(0,0,0,.25);}
.tpl11 .y-btn i{transition:transform .3s;}
.tpl11 .y-btn:hover i{transform:translateX(3px);}

/* Hero trust pills */
.tpl11 .y-hero-trust{display:flex; flex-wrap:wrap; gap:1rem;}
.tpl11 .y-trust-item{display:flex; align-items:center; gap:1rem; padding:.9rem 1.4rem; background:rgba(255,255,255,.10); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.22); border-radius:14px; box-shadow:0 6px 18px rgba(0,0,0,.18); transition:.3s;}
.tpl11 .y-trust-item:hover{transform:translateY(-2px); background:rgba(255,255,255,.16); box-shadow:0 10px 24px rgba(0,0,0,.25);}
.tpl11 .y-trust-item:nth-child(1) i{background:linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 60%, var(--primary-light) 100%); box-shadow:0 6px 14px rgba(var(--primary-light-rgb),.4), inset 0 1px 0 rgba(255,255,255,.25);}
.tpl11 .y-trust-item:nth-child(2) i{background:linear-gradient(135deg, var(--gold) 0%, color-mix(in srgb, var(--gold) 68%, #fff) 55%, color-mix(in srgb, var(--gold) 45%, #fff) 100%); color:var(--primary-deeper); box-shadow:0 6px 14px rgba(var(--gold-rgb),.5), inset 0 1px 0 rgba(255,255,255,.4);}
.tpl11 .y-trust-item:nth-child(3) i{background:linear-gradient(135deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 70%, #fff) 100%); box-shadow:0 6px 14px rgba(var(--accent-rgb),.45), inset 0 1px 0 rgba(255,255,255,.3);}
.tpl11 .y-trust-item i{width:3.6rem; height:3.6rem; display:inline-flex; align-items:center; justify-content:center; color:var(--white); border-radius:50%; font-size:1.3rem; flex-shrink:0;}
.tpl11 .y-trust-item strong{display:block; font-family:'Trirong',serif; font-size:1.55rem; color:var(--white); line-height:1.1; font-weight:700;}
.tpl11 .y-trust-item span{font-family:'Open Sans',sans-serif; font-size:1.1rem; color:rgba(255,255,255,.78); letter-spacing:.04em;}

/* Hero polaroid collage (right) — unique yearbook feature */
.tpl11 .y-hero-collage{position:relative; height:52rem; perspective:1400px;}

.tpl11 .y-polaroid{background:var(--white); padding:.9rem .9rem 2.6rem; box-shadow:0 18px 36px rgba(26,29,33,.18), 0 4px 10px rgba(0,0,0,.08); position:relative; border:1px solid #e8eaed;}
.tpl11 .y-polaroid::before{content:''; position:absolute; top:-1rem; left:50%; transform:translateX(-50%) rotate(-2deg); width:6.5rem; height:1.8rem; background:linear-gradient(135deg, var(--gold) 0%, color-mix(in srgb, var(--gold) 70%, #fff) 100%); box-shadow:0 3px 8px rgba(var(--gold-rgb),.4); border-radius:1px;}
.tpl11 .y-polaroid img{width:100%; display:block; filter:sepia(5%) contrast(1.02);}
.tpl11 .y-polaroid figcaption{position:absolute; bottom:.65rem; left:0; right:0; text-align:center; font-family:'Caveat','Trirong',cursive; font-style:italic; font-size:1.5rem; color:var(--primary-deeper);font-weight:600;}

.tpl11 .y-polaroid--back{position:absolute; top:6%; left:-4%; width:52%; transform:rotate(-9deg); z-index:1; opacity:.92;}
.tpl11 .y-polaroid--back img{height:24rem; object-fit:cover;}
.tpl11 .y-polaroid--back::before{background:linear-gradient(135deg, var(--primary-mist) 0%, var(--primary-light) 100%); transform:translateX(-50%) rotate(3deg);}

.tpl11 .y-polaroid--main{position:absolute; top:14%; left:18%; width:64%; transform:rotate(2.4deg); z-index:3; transition:transform .4s cubic-bezier(.2,.8,.2,1);box-shadow:0 24px 44px rgba(var(--primary-rgb),.28), 0 6px 14px rgba(0,0,0,.1);}
.tpl11 .y-polaroid--main img{height:30rem; object-fit:cover; aspect-ratio:4/5;}
.tpl11 .y-polaroid--main:hover{transform:rotate(0deg) scale(1.04); z-index:5;}

.tpl11 .y-polaroid--front{position:absolute; bottom:6%; right:-2%; width:42%; transform:rotate(-6deg); z-index:4;}
.tpl11 .y-polaroid--front img{height:18rem; object-fit:cover;}
.tpl11 .y-polaroid--front::before{background:linear-gradient(135deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 72%, #fff) 100%); transform:translateX(-50%) rotate(-3deg);}

/* Yearbook stickers */
.tpl11 .y-sticker{position:absolute; display:inline-flex; align-items:center; gap:.5rem; padding:.55rem 1.2rem; font-family:'Open Sans',sans-serif; font-weight:800; font-size:1.15rem; letter-spacing:.04em; border-radius:999px; box-shadow:0 10px 22px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.3); z-index:6; animation:yBobble 4s ease-in-out infinite;}
.tpl11 .y-sticker i{font-size:1rem;}
.tpl11 .y-sticker--gold{top:0; right:8%; background:linear-gradient(135deg, var(--gold) 0%, color-mix(in srgb, var(--gold) 45%, #fff) 100%); color:var(--primary-deeper); transform:rotate(8deg); border:2px solid #fff;box-shadow:0 10px 22px rgba(var(--gold-rgb),.5), inset 0 1px 0 rgba(255,255,255,.4);}
.tpl11 .y-sticker--red{bottom:0; left:6%; background:linear-gradient(135deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 72%, #fff) 100%); color:var(--white); transform:rotate(-6deg); border:2px solid #fff; animation-delay:1.5s;box-shadow:0 10px 22px rgba(var(--accent-rgb),.55), inset 0 1px 0 rgba(255,255,255,.3);}
@keyframes yBobble{0%,100%{transform:translateY(0) rotate(var(--y-rot,8deg));}50%{transform:translateY(-.6rem) rotate(var(--y-rot,8deg));}}
.tpl11 .y-sticker--gold{--y-rot:8deg;}
.tpl11 .y-sticker--red{--y-rot:-6deg;}

/* Hand-drawn arrow */
.tpl11 .y-hero-arrow{position:absolute; top:46%; left:-3rem; width:7rem; height:3.6rem; color:var(--gold); transform:rotate(-12deg); z-index:2; opacity:.85;}
.tpl11 .y-hero-arrow path{stroke-dasharray:300; stroke-dashoffset:0; animation:yDraw 2.4s ease-out infinite;}
@keyframes yDraw{0%{stroke-dashoffset:300;}50%,100%{stroke-dashoffset:0;}}
.tpl11 .y-ticker{
  background:linear-gradient(90deg, var(--primary-deeper) 0%, var(--primary-dark) 35%, var(--primary) 70%, var(--primary-light) 100%);
  color:var(--white);
  padding:1.2rem 0;
  overflow:hidden;
  white-space:nowrap;
  position:relative;
  border-top:3px solid var(--y-tape);
  border-bottom:3px solid var(--y-tape);
  box-shadow:inset 0 6px 14px rgba(0,0,0,.12);
}
.tpl11 .y-ticker-track{display:inline-flex;gap:3rem;align-items:center;font-family:'Open Sans',sans-serif;font-weight:800;font-size:1.25rem;letter-spacing:.14em;text-transform:uppercase;animation:yMarquee 28s linear infinite;padding-left:3rem}
.tpl11 .y-ticker-track span{display:inline-flex;align-items:center;gap:1.2rem}
.tpl11 .y-ticker-dot{width:.6rem;height:.6rem;background:var(--y-tape);border-radius:50%;display:inline-block}
@keyframes yMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tpl11 .y-timeline{padding:4rem 1.6rem 2.5rem;overflow-x:auto;-webkit-overflow-scrolling:touch;position:relative;background:linear-gradient(135deg, color-mix(in srgb, var(--primary-mist) 40%, #fff) 0%, color-mix(in srgb, var(--gold) 6%, #fff) 50%, color-mix(in srgb, var(--accent) 5%, #fff) 100%);border-radius:14px;margin:2rem 0 3rem;box-shadow:inset 0 0 0 1px rgba(255,255,255,.6), 0 14px 30px rgba(26,29,33,.08);}
.tpl11 .y-timeline::before{content:'';position:absolute;left:1.6rem;right:1.6rem;top:1.6rem;height:3rem;background:linear-gradient(90deg, var(--primary) 0%, var(--gold) 50%, var(--accent) 100%);-webkit-mask:linear-gradient(180deg, #000 0%, transparent 100%);mask:linear-gradient(180deg, #000 0%, transparent 100%);opacity:.12;pointer-events:none;border-radius:12px 12px 0 0;}
.tpl11 .y-timeline-track{display:flex;align-items:flex-end;gap:0;min-width:max-content;position:relative;padding:0 1rem 1rem}
.tpl11 .y-timeline-track::before{content:'';position:absolute;left:0;right:0;bottom:4.6rem;height:3px;background:linear-gradient(90deg, var(--primary-dark) 0%, var(--primary) 35%, var(--gold) 70%, var(--accent) 100%);border-radius:2px;box-shadow:0 2px 6px rgba(var(--primary-rgb),.25);}
.tpl11 .y-tl-item{flex:0 0 13rem;text-align:center;position:relative;padding-bottom:5.2rem;transition:transform .3s;}
.tpl11 .y-tl-item:hover{transform:translateY(-4px);}
.tpl11 .y-tl-dot{width:1.5rem;height:1.5rem;border-radius:50%;background:linear-gradient(135deg, var(--primary-dark), var(--primary-light));border:3px solid var(--y-paper);margin:0 auto;position:absolute;bottom:3.9rem;left:50%;transform:translateX(-50%);box-shadow:0 4px 10px rgba(var(--primary-rgb),.4);transition:transform .3s;}
.tpl11 .y-tl-item:hover .y-tl-dot{transform:translateX(-50%) scale(1.25);}
.tpl11 .y-tl-item:nth-child(odd) .y-tl-dot{background:linear-gradient(135deg, var(--gold), color-mix(in srgb, var(--gold) 68%, #fff));box-shadow:0 4px 10px rgba(var(--gold-rgb),.45);}
.tpl11 .y-tl-item:nth-child(3n) .y-tl-dot{background:linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 72%, #fff));box-shadow:0 4px 10px rgba(var(--accent-rgb),.4);}
.tpl11 .y-tl-item strong{display:block;font-size:1.85rem;color:var(--primary-deeper);margin-bottom:.2rem;font-weight:800;letter-spacing:-.01em;}
.tpl11 .y-tl-item span{font-family:'Open Sans',sans-serif;font-size:1.1rem;color:var(--primary);font-weight:700;letter-spacing:.06em;text-transform:uppercase;}
.tpl11 .y-page{
  background:var(--y-page-bg, var(--bg, #fafbfc));
  border-radius:16px;
  box-shadow:var(--y-shadow);
  padding:4.5rem clamp(1.6rem,2.5vw,3rem) 4.5rem clamp(1.6rem,2.5vw,3rem);
  margin-bottom:3.2rem;
  position:relative;
  border:1px solid var(--y-line);
  overflow:hidden;
}
.tpl11 .y-page::after{content:'';position:absolute;inset:1rem;border:1px dashed rgba(26,29,33,.06);border-radius:4px;pointer-events:none}
/* Alternating section backgrounds — mirror Template 1's
   --bg / --bg-alt / --bg-dark pattern (white → light gray
   → deep primary dark) so this template shares the same
   visual rhythm as the rest of the site. The 3-cycle
   pattern matches Template 1 exactly. */
.tpl11 .y-container > section.y-page:nth-of-type(3n+1){--y-page-bg:#fff;}
.tpl11 .y-container > section.y-page:nth-of-type(3n+2){--y-page-bg:var(--y-bg-alt);}
.tpl11 .y-container > section.y-page:nth-of-type(3n+3){
  --y-page-bg:var(--y-bg-dark);
  color:var(--white);
  border-color:transparent;
  box-shadow:0 24px 50px rgba(var(--primary-deeper-rgb),.35);
}
.tpl11 .y-container > section.y-page:nth-of-type(3n+3)::after{border-color:rgba(255,255,255,.10);}
.tpl11 .y-container > section.y-page:nth-of-type(3n+3) .y-page-head h2{color:var(--white);}
.tpl11 .y-container > section.y-page:nth-of-type(3n+3) .y-page-head p{color:rgba(255,255,255,.82);}
.tpl11 .y-page-head{text-align:center;margin-bottom:3.2rem;position:relative;z-index:1}
.tpl11 .y-page-head h2{font-size:3rem;margin:1.2rem 0 .6rem;color:var(--y-ink);line-height:1.15;position:relative;display:inline-block;}
.tpl11 .y-page-head h2::after{content:'';display:block;width:80px;height:4px;margin:.6rem auto 0;background:linear-gradient(90deg, var(--primary-dark), var(--gold), var(--accent));border-radius:2px;}
.tpl11 .y-container > section.y-page:nth-of-type(3n+3) .y-page-head h2::after{background:linear-gradient(90deg, var(--gold), #fff, var(--accent));}
.tpl11 .y-page-head p{font-family:'Open Sans',sans-serif;font-size:1.4rem;color:var(--y-ink-2);max-width:62rem;margin:0 auto;line-height:1.7}
.tpl11 .y-classes{display:grid;grid-template-columns:repeat(3,1fr);gap:2.2rem;position:relative;z-index:1}
.tpl11 .y-class-card{text-align:center;text-decoration:none;color:var(--y-ink);display:flex;flex-direction:column}
.tpl11 .y-class-frame{background:var(--white);padding:1.4rem 1.2rem 1.8rem;box-shadow:0 10px 24px rgba(26,29,33,.10);transition:.35s;border:1px solid var(--border-light,#e8eaed);position:relative;flex:1;overflow:hidden;border-radius:10px;}
.tpl11 .y-class-frame::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;border-radius:10px 10px 0 0;opacity:.95;}
.tpl11 .y-class-card:nth-child(1) .y-class-frame::before{background:var(--accent);}
.tpl11 .y-class-card:nth-child(2) .y-class-frame::before{background:var(--gold);}
.tpl11 .y-class-card:nth-child(3) .y-class-frame::before{background:var(--primary);}
.tpl11 .y-class-card:nth-child(1) .y-class-frame{transform:rotate(-1.6deg)}
.tpl11 .y-class-card:nth-child(2) .y-class-frame{transform:rotate(1.3deg)}
.tpl11 .y-class-card:nth-child(3) .y-class-frame{transform:rotate(-0.9deg)}
.tpl11 .y-class-card:hover .y-class-frame{transform:rotate(0) translateY(-8px);box-shadow:0 24px 48px rgba(26,29,33,.22)}
/* ─────────────────────────────────────────────────────────
   UNIQUE PER-LEVEL ICONS — vibrant, theme-tied gradients.
   Nursery  → warm coral/pink (accent driven)
   Primary  → gold / amber
   Secondary → deep primary green
   The icon is a square with a soft "yearbook sticker" feel
   plus a subtle inner shine and an outer glow ring that matches
   the gradient — kept lightweight so it still feels like paper.
   ───────────────────────────────────────────────────────── */
/* ── Compact icon concept: small badge, not full-bleed block ──
   Previous 1.05 square (~280px tall) dominated the card.
   New: 52px rounded sticker-badge centered above title,
   soft-tint bg + colored glyph, rotated -3deg for yearbook
   playfulness without visual weight. */
.tpl11 .y-class-icon{
  width:5.2rem;
  height:5.2rem;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:2.05rem;
  margin:0 auto 1.15rem;
  border-radius:14px;
  position:relative;
  flex-shrink:0;
  border:1.5px solid rgba(26,29,33,.07);
  box-shadow:0 6px 14px rgba(26,29,33,.08), inset 0 1px 0 rgba(255,255,255,.7);
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, background .3s;
  transform:rotate(-3deg);
  overflow:hidden;
}
.tpl11 .y-class-icon::after{
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 30% 22%, rgba(255,255,255,.55), transparent 58%);
  pointer-events:none;
  opacity:.9;
}
.tpl11 .y-class-icon img{width:100%;height:100%;object-fit:cover}
.tpl11 .y-class-card:hover .y-class-icon{transform:rotate(0deg) scale(1.07); box-shadow:0 10px 22px rgba(26,29,33,.14), inset 0 1px 0 rgba(255,255,255,.8);}
.tpl11 .y-class-card:nth-child(1) .y-class-icon{
  background:var(--y-lvl-nursery-soft);
  color:var(--accent);
  border-color:color-mix(in srgb, var(--accent) 18%, transparent);
  box-shadow:0 6px 14px rgba(var(--accent-rgb),.16), inset 0 1px 0 rgba(255,255,255,.75);
}
.tpl11 .y-class-card:nth-child(2) .y-class-icon{
  background:var(--y-lvl-primary-soft);
  color:var(--primary-deeper);
  border-color:rgba(var(--gold-rgb),.20);
  box-shadow:0 6px 14px rgba(var(--gold-rgb),.16), inset 0 1px 0 rgba(255,255,255,.75);
}
.tpl11 .y-class-card:nth-child(3) .y-class-icon{
  background:var(--y-lvl-secondary-soft);
  color:var(--primary-dark);
  border-color:rgba(var(--primary-rgb),.14);
  box-shadow:0 6px 14px rgba(var(--primary-rgb),.12), inset 0 1px 0 rgba(255,255,255,.75);
}
.tpl11 .y-class-frame h4{font-size:1.85rem;margin:0 0 .45rem;color:var(--y-ink);font-weight:800;}
.tpl11 .y-class-frame p{font-family:'Open Sans',sans-serif;font-size:1.22rem;color:var(--y-ink-2);margin:0;line-height:1.5}
.tpl11 .y-chip{font-family:'Open Sans',sans-serif;font-size:1.05rem;font-weight:700;padding:.4rem 1rem;border-radius:999px;background:linear-gradient(135deg, var(--primary-mist), color-mix(in srgb, var(--primary-light) 12%, #fff));border:1px solid color-mix(in srgb, var(--primary) 18%, #fff);color:var(--primary-deeper);display:inline-flex;align-items:center;gap:.4rem}
.tpl11 .y-level-cta{margin-top:1rem;display:inline-flex;align-items:center;gap:.6rem;font-family:'Open Sans',sans-serif;font-size:1.2rem;font-weight:800;color:var(--y-navy);transition:transform .25s;}
.tpl11 .y-class-card:nth-child(1) .y-level-cta{color:var(--accent-dark);}
.tpl11 .y-class-card:nth-child(2) .y-level-cta{color:var(--primary-deeper);}
.tpl11 .y-class-card:nth-child(3) .y-level-cta{color:var(--primary-deeper);}
.tpl11 .y-class-card:hover .y-level-cta i{transform:translateX(4px);}
.tpl11 .y-level-cta i{transition:transform .25s;}
.tpl11 .y-class-meta{display:flex;justify-content:center;flex-wrap:wrap;gap:.6rem;margin:.8rem 0 .4rem}
.tpl11 .y-founder-initial{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-family:'Trirong',serif;font-size:5rem;color:var(--y-navy);background:var(--y-paper-2)}
.tpl11 .y-progs{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;position:relative;z-index:1}
.tpl11 .y-prog{background:var(--white);border:2px dashed var(--y-line);border-radius:14px;padding:2.2rem 1.8rem;text-align:center;transition:.3s}
.tpl11 .y-prog:hover{transform:translateY(-4px);border-color:var(--gold);box-shadow:0 14px 30px rgba(26,29,33,.12);}
.tpl11 .y-prog i{width:5rem;height:5rem;display:inline-flex;align-items:center;justify-content:center;color:var(--white);border-radius:14px;font-size:2rem;margin-bottom:1.1rem;transform:rotate(-3deg);box-shadow:0 10px 20px rgba(26,29,33,.16), inset 0 1px 0 rgba(255,255,255,.3);transition:transform .35s cubic-bezier(.2,.8,.2,1);}
.tpl11 .y-prog:nth-child(1) i{background:linear-gradient(135deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 72%, #fff) 100%);}
.tpl11 .y-prog:nth-child(2) i{background:linear-gradient(135deg, var(--gold) 0%, color-mix(in srgb, var(--gold) 68%, #fff) 55%, color-mix(in srgb, var(--gold) 45%, #fff) 100%); color:var(--primary-deeper);}
.tpl11 .y-prog:nth-child(3) i{background:linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 60%, var(--primary-light) 100%);}
.tpl11 .y-prog:hover i{transform:rotate(0deg) scale(1.06);}
.tpl11 .y-prog h4{font-size:1.55rem;margin:0 0 .6rem}
.tpl11 .y-prog p{font-family:'Open Sans',sans-serif;font-size:1.3rem;color:var(--y-ink-2);line-height:1.6;margin:0}
.tpl11 .y-stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;position:relative;z-index:1}
.tpl11 .y-stat-sticker{text-align:center;padding:2.4rem 1.6rem;border:2px dashed var(--y-line);border-radius:14px;background:var(--white);position:relative;overflow:hidden;transition:.3s}
.tpl11 .y-stat-sticker::before{content:'';position:absolute;left:0;right:0;top:0;height:5px;border-radius:14px 14px 0 0;}
.tpl11 .y-stat-sticker:nth-child(1)::before{background:linear-gradient(90deg, var(--primary-dark), var(--primary-light));}
.tpl11 .y-stat-sticker:nth-child(2)::before{background:linear-gradient(90deg, var(--gold), color-mix(in srgb, var(--gold) 68%, #fff));}
.tpl11 .y-stat-sticker:nth-child(3)::before{background:linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #fff));}
.tpl11 .y-stat-sticker:hover{transform:translateY(-4px);box-shadow:0 14px 28px rgba(26,29,33,.12);}
.tpl11 .y-stat-sticker i{width:4.6rem;height:4.6rem;display:inline-flex;align-items:center;justify-content:center;font-size:2rem;color:var(--white);border-radius:50%;margin:0 auto .6rem;}
.tpl11 .y-stat-sticker:nth-child(1) i{background:linear-gradient(135deg, var(--primary-dark), var(--primary-light));box-shadow:0 8px 18px rgba(var(--primary-rgb),.35), inset 0 1px 0 rgba(255,255,255,.25);}
.tpl11 .y-stat-sticker:nth-child(2) i{background:linear-gradient(135deg, var(--gold), color-mix(in srgb, var(--gold) 68%, #fff));color:var(--primary-deeper);box-shadow:0 8px 18px rgba(var(--gold-rgb),.45), inset 0 1px 0 rgba(255,255,255,.4);}
.tpl11 .y-stat-sticker:nth-child(3) i{background:linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 72%, #fff));box-shadow:0 8px 18px rgba(var(--accent-rgb),.4), inset 0 1px 0 rgba(255,255,255,.3);}
.tpl11 .y-stat-sticker strong{display:block;font-size:3.4rem;font-weight:700;color:var(--primary-deeper);line-height:1;background:linear-gradient(135deg, var(--primary-dark), var(--primary-light));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.tpl11 .y-stat-sticker:nth-child(2) strong{background:linear-gradient(135deg, var(--gold), color-mix(in srgb, var(--gold) 68%, var(--primary-deeper)));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.tpl11 .y-stat-sticker:nth-child(3) strong{background:linear-gradient(135deg, var(--accent), var(--accent-dark));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.tpl11 .y-stat-sticker span{font-family:'Open Sans',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:1.1rem;color:var(--y-ink-3)}
.tpl11 .y-stat-sticker p{font-family:'Open Sans',sans-serif;font-size:1.25rem;color:var(--y-ink-2);margin:.6rem 0 0;line-height:1.6}
.tpl11 .y-vm-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;position:relative;z-index:1}
.tpl11 .y-vm-card{background:var(--white);border:1px solid var(--y-line);border-radius:14px;padding:2.6rem 2rem;position:relative;transition:.3s;overflow:hidden;}
.tpl11 .y-vm-card::after{content:'';position:absolute;right:-40px;top:-40px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle, color-mix(in srgb, var(--primary) 8%, transparent), transparent 70%);pointer-events:none;}
.tpl11 .y-vm-card--mission::after{background:radial-gradient(circle, color-mix(in srgb, var(--gold) 12%, transparent), transparent 70%);}
.tpl11 .y-vm-card:hover{transform:translateY(-4px);box-shadow:0 18px 34px rgba(26,29,33,.14);}
.tpl11 .y-vm-card h3 i{display:inline-flex;align-items:center;justify-content:center;width:3rem;height:3rem;border-radius:10px;background:linear-gradient(135deg, var(--primary-dark), var(--primary-light));color:var(--white);margin-right:.6rem;font-size:1.3rem;box-shadow:0 6px 14px rgba(var(--primary-rgb),.35), inset 0 1px 0 rgba(255,255,255,.25);}
.tpl11 .y-vm-card--mission h3 i{background:linear-gradient(135deg, var(--gold), color-mix(in srgb, var(--gold) 68%, #fff));color:var(--primary-deeper);box-shadow:0 6px 14px rgba(var(--gold-rgb),.45), inset 0 1px 0 rgba(255,255,255,.4);}
.tpl11 .y-vm-card::before{content:'';position:absolute;top:0;left:1.4rem;width:4.5rem;height:4px;background:var(--y-tape);border-radius:0 0 4px 4px}
.tpl11 .y-vm-card--mission::before{background:var(--y-navy)}
.tpl11 .y-vm-card h3{font-size:2.1rem;margin:0 0 1rem}
.tpl11 .y-vm-card .y-vm-text{font-family:'Open Sans',sans-serif;font-size:1.4rem;color:var(--y-ink-2);line-height:1.8}
.tpl11 .y-vm-card .y-vm-text::first-letter{font-family:'Trirong',serif;font-size:2.8em;font-weight:700;float:left;line-height:.8;margin:.12em .14em 0 0;color:var(--y-navy)}
.tpl11 .y-notes{list-style:none;padding:0;margin:0;columns:2;column-gap:3rem;position:relative;z-index:1}
.tpl11 .y-notes li{break-inside:avoid;margin-bottom:1.2rem;font-family:'Open Sans',sans-serif;font-size:1.38rem;color:var(--y-ink-2);line-height:1.6;padding-left:2.4rem;position:relative}
.tpl11 .y-notes li::before{content:'\2713';position:absolute;left:0;top:.1rem;color:var(--white);font-weight:800;background:linear-gradient(135deg, var(--primary-dark), var(--primary-light));width:1.6rem;height:1.6rem;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:.85rem;box-shadow:0 4px 10px rgba(var(--primary-rgb),.35);}
/* ── PROMISE section: multicolor variable palette (replaces flat grey) ──
   Uses the shared theme tokens (--primary / --gold / --accent) so admin
   colour changes cascade. Soft radial blobs + tinted cards per item. */
.tpl11 .y-page.y-page--promise{
  --y-page-bg: var(--y-bg-dark);
  background:
    radial-gradient(ellipse at 94% 10%, color-mix(in srgb, var(--gold) 22%, transparent) 0%, transparent 44%),
    radial-gradient(ellipse at 8% 88%, color-mix(in srgb, var(--accent) 16%, transparent) 0%, transparent 40%),
    radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--primary-light) 14%, transparent) 0%, transparent 62%),
    linear-gradient(135deg, var(--primary-deeper) 0%, var(--primary-dark) 55%, var(--primary) 100%) !important;
  border:1px solid rgba(255,255,255,.08);
  color:var(--white);
}
.tpl11 .y-page.y-page--promise::after{border-color:rgba(255,255,255,.08);}
.tpl11 .y-page.y-page--promise .y-page-head h2{color:var(--white);}
.tpl11 .y-page.y-page--promise .y-page-head h2::after{background:linear-gradient(90deg, var(--gold), #fff, var(--accent));}
.tpl11 .y-page.y-page--promise .y-page-head p{color:rgba(255,255,255,.82);}
.tpl11 .y-page.y-page--promise .y-notes-toggle{background:rgba(255,255,255,.12); color:var(--white); border-color:rgba(255,255,255,.22); backdrop-filter:blur(6px);}
.tpl11 .y-page.y-page--promise .y-notes-toggle:hover{background:rgba(255,255,255,.18);}
.tpl11 .y-notes--promise{columns:1; display:grid; grid-template-columns:repeat(2,1fr); gap:1.1rem;}
.tpl11 .y-notes--promise li{
  break-inside:auto;
  margin:0;
  background:var(--white);
  border:1px solid var(--y-line);
  border-left:4px solid var(--primary);
  border-radius:10px;
  padding:1.15rem 1.4rem 1.15rem 3rem;
  box-shadow:0 4px 12px rgba(26,29,33,.06);
  transition:transform .25s, box-shadow .25s, border-color .25s;
}
.tpl11 .y-notes--promise li:hover{transform:translateY(-3px); box-shadow:0 10px 22px rgba(26,29,33,.10);}
.tpl11 .y-notes--promise li:nth-child(4n+1){border-left-color:var(--primary);}
.tpl11 .y-notes--promise li:nth-child(4n+1)::before{background:linear-gradient(135deg, var(--primary-dark), var(--primary-light)); box-shadow:0 4px 10px rgba(var(--primary-rgb),.35);}
.tpl11 .y-notes--promise li:nth-child(4n+2){border-left-color:var(--gold);}
.tpl11 .y-notes--promise li:nth-child(4n+2)::before{background:linear-gradient(135deg, var(--gold), color-mix(in srgb, var(--gold) 68%, #fff)); color:var(--primary-deeper); box-shadow:0 4px 10px rgba(var(--gold-rgb),.38);}
.tpl11 .y-notes--promise li:nth-child(4n+3){border-left-color:var(--accent);}
.tpl11 .y-notes--promise li:nth-child(4n+3)::before{background:linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 72%, #fff)); box-shadow:0 4px 10px rgba(var(--accent-rgb),.38);}
.tpl11 .y-notes--promise li:nth-child(4n+4){border-left-color:var(--primary-light);}
.tpl11 .y-notes--promise li:nth-child(4n+4)::before{background:linear-gradient(135deg, var(--primary), var(--primary-light)); box-shadow:0 4px 10px rgba(var(--primary-rgb),.30);}
@media(max-width:768px){
  .tpl11 .y-notes--promise{grid-template-columns:1fr;}
}
.tpl11 .y-carousel-viewport{overflow:hidden; padding:.6rem 0 1rem; position:relative; z-index:1}
.tpl11 .y-carousel-track{display:flex;gap:1.6rem;overflow:visible;flex-wrap:nowrap;justify-content:flex-start;transition:transform .55s cubic-bezier(.2,.8,.2,1); will-change:transform; position:relative; z-index:1; padding:0}
.tpl11 .y-carousel-card{flex:0 0 calc((100% - 3.2rem)/3);max-width:calc((100% - 3.2rem)/3);background:var(--white);border:1px solid var(--y-line);border-radius:12px;overflow:hidden;box-shadow:0 8px 20px rgba(26,29,33,.06);transition:transform .3s, box-shadow .3s;}
.tpl11 .y-carousel-nav{display:flex;align-items:center;justify-content:center;gap:1.2rem;margin-top:1.6rem}
.tpl11 .y-carousel-arrow{width:4.2rem;height:4.2rem;border-radius:50%;background:var(--white);border:1.5px solid var(--y-line);color:var(--y-ink);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.25s;box-shadow:0 6px 14px rgba(26,29,33,.06)}
.tpl11 .y-carousel-arrow:hover{background:var(--y-navy);color:var(--white);border-color:var(--y-navy);transform:translateY(-2px)}
.tpl11 .y-carousel-dots{display:flex;align-items:center;gap:.7rem}
.tpl11 .y-carousel-dots button{width:.9rem;height:.9rem;border-radius:50%;border:none;background:var(--y-line);cursor:pointer;transition:.25s;padding:0}
.tpl11 .y-carousel-dots button.is-active{width:2.2rem;border-radius:999px;background:var(--primary)}
.tpl11 .y-carousel-card:hover{transform:translateY(-6px);box-shadow:0 18px 32px rgba(26,29,33,.12);}
.tpl11 .y-carousel-card img{width:100%;height:18rem;object-fit:cover;display:block;transition:transform .8s;}
.tpl11 .y-carousel-card:hover img{transform:scale(1.05);}
.tpl11 .y-carousel-card .y-cc-body{padding:1.4rem 1.6rem}
.tpl11 .y-carousel-card .y-cc-body p{font-family:'Open Sans',sans-serif;font-size:1.3rem;color:var(--y-ink-2);line-height:1.65;margin:0}
.tpl11 .y-carousel-card .y-tape-label{margin-top:.5rem;}
.tpl11 .y-values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;position:relative;z-index:1}
.tpl11 .y-value{text-align:center;background:var(--white);border:1px solid var(--y-line);border-radius:14px;padding:2rem 1.4rem;transition:.3s}
.tpl11 .y-value:hover{transform:translateY(-4px);box-shadow:0 14px 28px rgba(26,29,33,.12);}
.tpl11 .y-value i{width:5.2rem;height:5.2rem;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 60%, var(--primary-light) 100%);color:var(--white);border-radius:50%;font-size:2rem;margin-bottom:1rem;box-shadow:0 10px 22px rgba(var(--primary-rgb),.35), inset 0 1px 0 rgba(255,255,255,.25);transition:transform .35s;}
.tpl11 .y-value:nth-child(3n+2) i{background:linear-gradient(135deg, var(--gold) 0%, color-mix(in srgb, var(--gold) 68%, #fff) 55%, color-mix(in srgb, var(--gold) 45%, #fff) 100%);color:var(--primary-deeper);box-shadow:0 10px 22px rgba(var(--gold-rgb),.5), inset 0 1px 0 rgba(255,255,255,.4);}
.tpl11 .y-value:nth-child(3n+3) i{background:linear-gradient(135deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 72%, #fff) 100%);box-shadow:0 10px 22px rgba(var(--accent-rgb),.4), inset 0 1px 0 rgba(255,255,255,.3);}
.tpl11 .y-value:hover i{transform:scale(1.08) rotate(4deg);}
.tpl11 .y-value h4{font-size:1.55rem;margin:0 0 .45rem}
.tpl11 .y-value p{font-family:'Open Sans',sans-serif;font-size:1.25rem;color:var(--y-ink-3);line-height:1.6;margin:0}
.tpl11 .y-video-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:2.4rem;align-items:center;position:relative;z-index:1}
.tpl11 .y-video-frame{background:linear-gradient(135deg, #fff 0%, color-mix(in srgb, var(--primary-mist) 35%, #fff) 100%);padding:1rem 1rem 1.4rem;box-shadow:0 18px 36px rgba(var(--primary-rgb),.18);transform:rotate(-1.2deg);border:3px solid #fff;cursor:pointer;position:relative;transition:transform .35s;}
.tpl11 .y-video-frame::before{content:'';position:absolute;inset:-3px;border-radius:6px;background:linear-gradient(135deg, var(--primary-dark), var(--gold), var(--accent));z-index:-1;opacity:.5;}
.tpl11 .y-video-frame:hover{transform:rotate(0deg) scale(1.02);}
.tpl11 .y-video-frame img{width:100%;height:28rem;object-fit:cover;display:block;border-radius:4px;}
.tpl11 .y-video-play{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);width:6.8rem;height:6.8rem;border-radius:50%;background:linear-gradient(135deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 72%, #fff) 100%);color:var(--white);display:flex;align-items:center;justify-content:center;font-size:2.4rem;box-shadow:0 14px 32px rgba(var(--accent-rgb),.55), inset 0 1px 0 rgba(255,255,255,.3);transition:transform .3s;}
.tpl11 .y-video-frame:hover .y-video-play{transform:translate(-50%,-50%) scale(1.1);}
.tpl11 .y-video-cap{margin-top:1rem;display:flex;align-items:center;gap:.7rem;font-family:'Open Sans',sans-serif;font-size:1.2rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--primary-deeper)}
.tpl11 .y-video-cap i{color:var(--accent);}
/* ── PORTAL — bento restyle: soft-badge icons, 12-col bento, airy hover ── */
.tpl11 .y-page--portal{
  --y-page-bg:#fff;
  background:
    radial-gradient(ellipse at 88% 12%, color-mix(in srgb, var(--gold) 10%, transparent) 0%, transparent 40%),
    radial-gradient(ellipse at 12% 85%, color-mix(in srgb, var(--primary-mist) 45%, transparent) 0%, transparent 38%),
    linear-gradient(180deg, #fff 0%, color-mix(in srgb, var(--primary-mist) 10%, #fff) 100%) !important;
  border:1px solid var(--y-line);
}
.tpl11 .y-page--portal::after{border-color:rgba(26,29,33,.05);}
.tpl11 .y-portal-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:1.5rem;position:relative;z-index:1}
.tpl11 .y-portal-card{background:var(--white);border:1px solid var(--y-line);border-radius:16px;padding:1.9rem 1.6rem 1.6rem;text-decoration:none;color:var(--y-ink);box-shadow:0 8px 20px rgba(26,29,33,.06);transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s;display:flex;flex-direction:column;position:relative;overflow:hidden;min-height:21rem;grid-column:span 3;}
.tpl11 .y-portal-card::before{content:'';position:absolute;left:0;right:0;top:0;height:4px;border-radius:16px 16px 0 0;}
.tpl11 .y-portal-card:nth-child(8n+1)::before{background:linear-gradient(90deg, var(--primary-dark), var(--primary-light));}
.tpl11 .y-portal-card:nth-child(8n+2)::before{background:linear-gradient(90deg, var(--gold), color-mix(in srgb, var(--gold) 68%, #fff));}
.tpl11 .y-portal-card:nth-child(8n+3)::before{background:linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 72%, #fff));}
.tpl11 .y-portal-card:nth-child(8n+4)::before{background:linear-gradient(90deg, var(--primary), var(--gold));}
.tpl11 .y-portal-card:nth-child(8n+5)::before{background:linear-gradient(90deg, var(--primary-light), var(--primary-dark));}
.tpl11 .y-portal-card:nth-child(8n+6)::before{background:linear-gradient(90deg, var(--accent), var(--gold));}
.tpl11 .y-portal-card:nth-child(8n+7)::before{background:linear-gradient(90deg, var(--primary-dark), var(--accent));}
.tpl11 .y-portal-card:nth-child(8n+8)::before{background:linear-gradient(90deg, var(--gold), var(--primary-light));}
.tpl11 .y-portal-card::after{content:'';position:absolute;right:-28px;top:-28px;width:110px;height:110px;border-radius:50%;background:radial-gradient(circle, color-mix(in srgb, var(--primary) 7%, transparent), transparent 70%);pointer-events:none;opacity:.85;}
.tpl11 .y-portal-card:nth-child(3n+2)::after{background:radial-gradient(circle, color-mix(in srgb, var(--gold) 9%, transparent), transparent 70%);}
.tpl11 .y-portal-card:nth-child(3n+3)::after{background:radial-gradient(circle, color-mix(in srgb, var(--accent) 8%, transparent), transparent 70%);}
.tpl11 .y-portal-card:hover{transform:translateY(-6px) scale(1.01);box-shadow:0 18px 36px rgba(26,29,33,.12);border-color:color-mix(in srgb, var(--primary) 14%, var(--y-line));}
.tpl11 .y-portal-card i{width:4.8rem;height:4.8rem;display:inline-flex;align-items:center;justify-content:center;border-radius:14px;font-size:1.85rem;margin-bottom:1.1rem;flex-shrink:0;border:1.5px solid rgba(26,29,33,.06);box-shadow:0 6px 14px rgba(26,29,33,.06), inset 0 1px 0 rgba(255,255,255,.7);transition:transform .35s cubic-bezier(.2,.8,.2,1);transform:rotate(-2deg);}
.tpl11 .y-portal-card:nth-child(8n+1) i,.tpl11 .y-portal-card:nth-child(8n+4) i,.tpl11 .y-portal-card:nth-child(8n+5) i{background:color-mix(in srgb, var(--primary) 12%, #fff);color:var(--primary-dark);border-color:rgba(var(--primary-rgb),.14);}
.tpl11 .y-portal-card:nth-child(8n+2) i,.tpl11 .y-portal-card:nth-child(8n+6) i{background:color-mix(in srgb, var(--gold) 18%, #fff);color:var(--primary-deeper);border-color:rgba(var(--gold-rgb),.18);}
.tpl11 .y-portal-card:nth-child(8n+3) i,.tpl11 .y-portal-card:nth-child(8n+7) i,.tpl11 .y-portal-card:nth-child(8n+8) i{background:color-mix(in srgb, var(--accent) 14%, #fff);color:var(--accent-dark);border-color:rgba(var(--accent-rgb),.14);}
.tpl11 .y-portal-card:hover i{transform:rotate(0deg) scale(1.06);}
.tpl11 .y-portal-card h4{font-size:1.5rem;margin:0 0 .55rem;color:var(--y-ink);line-height:1.25;letter-spacing:-.01em;transition:color .25s;}
.tpl11 .y-portal-card:hover h4{color:var(--primary-deeper);}
.tpl11 .y-portal-card p{font-family:'Open Sans',sans-serif;font-size:1.27rem;color:var(--y-ink-2);line-height:1.6;margin:0 0 1.1rem;flex:1}
.tpl11 .y-portal-card .y-link{font-family:'Open Sans',sans-serif;font-size:1.18rem;font-weight:800;color:var(--primary);display:inline-flex;align-items:center;gap:.5rem;transition:gap .25s;letter-spacing:.01em;}
.tpl11 .y-portal-card:hover .y-link{gap:.8rem;color:var(--primary-dark);}
.tpl11 .y-portal-card .y-link i{width:auto;height:auto;background:none;border:none;box-shadow:none;margin:0;font-size:1rem;transform:none;color:inherit;}
.tpl11 .y-portal-card:hover .y-link i{transform:translateX(3px);}
.tpl11 .y-portal-card--wide{grid-column:span 6 !important;min-height:23rem;padding:2rem 1.8rem 1.8rem;background:linear-gradient(135deg, #fff 0%, color-mix(in srgb, var(--primary-mist) 18%, #fff) 100%) !important;}
.tpl11 .y-portal-card--wide::before{left:0;right:0;top:0;bottom:auto;height:4px;width:auto;background:linear-gradient(90deg, var(--primary-dark), var(--primary-light), var(--gold)) !important;}
.tpl11 .y-portal-card--wide::after{right:-40px;bottom:-40px;top:auto;width:160px;height:160px;background:radial-gradient(circle, color-mix(in srgb, var(--primary) 9%, transparent), transparent 70%);}
.tpl11 .y-portal-card:nth-child(1){grid-column:span 6;}
.tpl11 .y-portal-card:nth-child(2){grid-column:span 3;}
.tpl11 .y-portal-card:nth-child(3){grid-column:span 3;}
.tpl11 .y-portal-card:nth-child(4){grid-column:span 4;}
.tpl11 .y-portal-card:nth-child(5){grid-column:span 4;}
.tpl11 .y-portal-card:nth-child(6){grid-column:span 4;}
.tpl11 .y-portal-card:nth-child(7){grid-column:span 6;}
.tpl11 .y-portal-card:nth-child(8){grid-column:span 6;}
.tpl11 .y-portal-bars{display:flex;align-items:flex-end;gap:.4rem;height:4.6rem;margin-top:auto;padding-top:1rem}
.tpl11 .y-portal-bars span{flex:1;background:linear-gradient(180deg, var(--primary-dark) 0%, var(--primary) 55%, var(--primary-light) 100%);border-radius:4px 4px 0 0;opacity:.88;transition:transform .3s, opacity .25s;transform-origin:bottom;}
.tpl11 .y-portal-card:hover .y-portal-bars span{opacity:1;transform:scaleY(1.05);}
.tpl11 .y-portal-bars span:nth-child(2){background:linear-gradient(180deg, var(--gold) 0%, color-mix(in srgb, var(--gold) 68%, #fff) 50%, color-mix(in srgb, var(--gold) 45%, #fff) 100%);}
.tpl11 .y-portal-bars span:nth-child(3){background:linear-gradient(180deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 72%, #fff) 50%, color-mix(in srgb, var(--accent) 55%, #fff) 100%);}
.tpl11 .y-portal-bars span:nth-child(4){background:linear-gradient(180deg, var(--primary-dark) 0%, var(--primary-light) 100%);}
.tpl11 .y-portal-bars span:nth-child(5){background:linear-gradient(180deg, var(--gold) 0%, color-mix(in srgb, var(--gold) 45%, #fff) 100%);}
.tpl11 .y-portal-bars span:nth-child(6){background:linear-gradient(180deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 55%, #fff) 100%);}
.tpl11 .y-portal-bars span:nth-child(7){background:linear-gradient(180deg, var(--primary) 0%, var(--primary-light) 100%);}
.tpl11 .y-show-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;position:relative;z-index:1}
.tpl11 .y-show-card{background:var(--white);border:1px solid var(--y-line);border-radius:12px;overflow:hidden;text-decoration:none;color:var(--y-ink);box-shadow:0 8px 20px rgba(26,29,33,.08);transition:.35s;display:flex;flex-direction:column;position:relative;}
.tpl11 .y-show-card::before{content:'';position:absolute;left:0;right:0;top:0;height:5px;z-index:2;}
.tpl11 .y-show-card:nth-child(3n+1)::before{background:linear-gradient(90deg, var(--primary-dark), var(--primary-light));}
.tpl11 .y-show-card:nth-child(3n+2)::before{background:linear-gradient(90deg, var(--gold), color-mix(in srgb, var(--gold) 68%, #fff));}
.tpl11 .y-show-card:nth-child(3n+3)::before{background:linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 72%, #fff));}
.tpl11 .y-show-card:hover{transform:translateY(-8px);box-shadow:0 22px 40px rgba(26,29,33,.16)}
.tpl11 .y-show-visual{background:linear-gradient(135deg, #f8f9fa 0%, color-mix(in srgb, var(--primary-mist) 40%, #fff) 100%);padding:1.6rem;display:flex;align-items:center;justify-content:center;min-height:18rem;position:relative;}
.tpl11 .y-show-body{padding:1.6rem 1.6rem 1.8rem}
.tpl11 .y-show-body h3{font-size:1.55rem;margin:0 0 .5rem;color:var(--y-ink);transition:color .25s;}
.tpl11 .y-show-card:hover .y-show-body h3{color:var(--primary-deeper);}
.tpl11 .y-show-body p{font-family:'Open Sans',sans-serif;font-size:1.25rem;color:var(--y-ink-2);line-height:1.6;margin:0 0 1rem}
.tpl11 .y-show-body .y-link{font-family:'Open Sans',sans-serif;font-size:1.2rem;font-weight:800;color:var(--primary);display:inline-flex;align-items:center;gap:.5rem;transition:gap .25s;}
.tpl11 .y-show-card:hover .y-link{gap:.9rem;}
.tpl11 .y-mini-doc{width:100%;max-width:16rem;background:var(--white);border:1px solid var(--y-line);border-radius:6px;padding:.8rem;box-shadow:0 8px 18px rgba(26,29,33,.10);}
.tpl11 .y-mini-doc .y-md-band{height:2.4rem;background:linear-gradient(135deg, var(--primary-dark), var(--primary-light));border-radius:4px;margin-bottom:.6rem;}
.tpl11 .y-mini-book{width:14rem;height:18rem;background:linear-gradient(135deg, var(--primary-deeper) 0%, var(--primary-dark) 35%, var(--primary) 75%, var(--primary-light) 100%);border-radius:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--white);position:relative;border:3px solid var(--y-tape);box-shadow:0 14px 28px rgba(var(--primary-rgb),.4);}
.tpl11 .y-mini-book::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 30% 20%, rgba(255,255,255,.18), transparent 50%);pointer-events:none;border-radius:6px;}
.tpl11 .y-gallery-single{width:100%;height:18rem;border-radius:8px;overflow:hidden;position:relative;border:3px solid #fff;box-shadow:0 10px 24px rgba(0,0,0,.15);transition:transform .35s;}
.tpl11 .y-gallery-single img{width:100%;height:100%;object-fit:cover;transition:transform 1s;}
.tpl11 .y-show-card:hover .y-gallery-single img{transform:scale(1.06);}
.tpl11 .y-why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;position:relative;z-index:1}
.tpl11 .y-why-card{background:var(--white);border:1px solid var(--y-line);border-radius:12px;padding:2rem 1.6rem;text-align:center;box-shadow:0 6px 14px rgba(26,29,33,.06);transition:.3s;position:relative;overflow:hidden}
.tpl11 .y-why-card::before{content:'';position:absolute;left:0;right:0;top:0;height:4px;}
.tpl11 .y-why-card:nth-child(3n+1)::before{background:linear-gradient(90deg, var(--primary-dark), var(--primary-light));}
.tpl11 .y-why-card:nth-child(3n+2)::before{background:linear-gradient(90deg, var(--gold), color-mix(in srgb, var(--gold) 68%, #fff));}
.tpl11 .y-why-card:nth-child(3n+3)::before{background:linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 72%, #fff));}
.tpl11 .y-why-card:hover{transform:translateY(-6px);box-shadow:0 18px 34px rgba(26,29,33,.14);}
.tpl11 .y-why-card i{width:5.2rem;height:5.2rem;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 60%, var(--primary-light) 100%);color:var(--white);border-radius:50%;font-size:1.9rem;margin-bottom:1rem;box-shadow:0 10px 22px rgba(var(--primary-rgb),.35), inset 0 1px 0 rgba(255,255,255,.25);transition:transform .35s;}
.tpl11 .y-why-card:nth-child(3n+2) i{background:linear-gradient(135deg, var(--gold) 0%, color-mix(in srgb, var(--gold) 68%, #fff) 55%, color-mix(in srgb, var(--gold) 45%, #fff) 100%);color:var(--primary-deeper);box-shadow:0 10px 22px rgba(var(--gold-rgb),.5), inset 0 1px 0 rgba(255,255,255,.4);}
.tpl11 .y-why-card:nth-child(3n+3) i{background:linear-gradient(135deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 72%, #fff) 100%);box-shadow:0 10px 22px rgba(var(--accent-rgb),.4), inset 0 1px 0 rgba(255,255,255,.3);}
.tpl11 .y-why-card:hover i{transform:scale(1.08) rotate(-4deg);}
.tpl11 .y-why-card h4{font-size:1.45rem;margin:0 0 .5rem}
.tpl11 .y-why-card p{font-family:'Open Sans',sans-serif;font-size:1.25rem;color:var(--y-ink-2);line-height:1.6;margin:0}
.tpl11 .y-founder-wrap{display:grid;grid-template-columns:18rem 1fr;gap:2.4rem;align-items:center;position:relative;z-index:1}
.tpl11 .y-founder-photo{width:18rem;height:18rem;border-radius:50%;overflow:hidden;border:5px solid #fff;box-shadow:0 10px 24px rgba(26,29,33,.14);background:#f8f9fa;position:relative;}
.tpl11 .y-founder-photo::before{content:'';position:absolute;inset:-9px;border-radius:50%;background:var(--white);z-index:-1;animation:ySpin 16s linear infinite;}
@keyframes ySpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.tpl11 .y-founder-photo img{width:100%;height:100%;object-fit:cover}
.tpl11 .y-founder-quote{font-size:1.9rem;font-style:italic;line-height:1.5;color:var(--y-ink);margin:0 0 1.4rem;position:relative;padding-left:1.6rem;border-left:4px solid;border-image:linear-gradient(180deg, var(--primary-dark), var(--gold), var(--accent)) 1 100%;background:var(--white);padding:2rem 2rem 2rem 2.2rem;border-radius:14px;border-left-width:6px;border-image-slice:1;box-shadow:0 10px 24px rgba(26,29,33,.08);}
.tpl11 .y-founder-meta{background:var(--white);padding:1.2rem 1.6rem;border-radius:10px;border:1px dashed var(--y-line);}
.tpl11 .y-founder-meta strong{font-size:1.6rem}
.tpl11 .y-founder-meta span{font-family:'Open Sans',sans-serif;font-size:1.15rem;color:var(--y-ink-3)}
.tpl11 .y-news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.8rem;position:relative;z-index:1}
.tpl11 .y-news-card{background:var(--white);border:1px solid var(--y-line);border-radius:12px;overflow:hidden;text-decoration:none;color:var(--y-ink);box-shadow:0 8px 20px rgba(26,29,33,.08);display:flex;flex-direction:column;transition:.35s;position:relative;}
.tpl11 .y-news-card::before{content:'';position:absolute;left:0;right:0;bottom:0;height:4px;z-index:2;}
.tpl11 .y-news-card:nth-child(3n+1)::before{background:linear-gradient(90deg, var(--primary-dark), var(--primary-light));}
.tpl11 .y-news-card:nth-child(3n+2)::before{background:linear-gradient(90deg, var(--gold), color-mix(in srgb, var(--gold) 68%, #fff));}
.tpl11 .y-news-card:nth-child(3n+3)::before{background:linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 72%, #fff));}
.tpl11 .y-news-card:hover{transform:translateY(-8px);box-shadow:0 22px 40px rgba(26,29,33,.14)}
.tpl11 .y-news-img{position:relative;aspect-ratio:16/10;overflow:hidden;background:#f1f3f4}
.tpl11 .y-news-img img{width:100%;height:100%;object-fit:cover;transition:transform 1s}
.tpl11 .y-news-card:hover .y-news-img img{transform:scale(1.06)}
.tpl11 .y-news-date{position:absolute;top:1rem;left:1rem;background:var(--white);padding:.6rem .9rem;border-radius:6px;text-align:center;box-shadow:0 6px 14px rgba(0,0,0,.12);border:1px solid var(--y-line);border-left:4px solid var(--primary);}
.tpl11 .y-news-date strong{display:block;font-size:1.65rem;line-height:1;background:linear-gradient(135deg, var(--primary-dark), var(--primary-light));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.tpl11 .y-news-date span{font-family:'Open Sans',sans-serif;font-size:.95rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--y-ink-3)}
.tpl11 .y-news-body{padding:1.6rem 1.6rem 1.8rem}
.tpl11 .y-news-tag{font-family:'Open Sans',sans-serif;font-size:1rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .7rem;background:color-mix(in srgb, var(--accent) 12%, #fff);border-radius:6px;}
.tpl11 .y-news-tag i{color:var(--accent);}
.tpl11 .y-news-body h3{font-size:1.55rem;margin:.6rem 0 .6rem;line-height:1.3;color:var(--y-ink);transition:color .25s;}
.tpl11 .y-news-card:hover .y-news-body h3{color:var(--primary-deeper);}
.tpl11 .y-news-body p{font-family:'Open Sans',sans-serif;font-size:1.25rem;color:var(--y-ink-2);line-height:1.6;margin:0 0 1rem}
.tpl11 .y-news-link{font-family:'Open Sans',sans-serif;font-size:1.15rem;font-weight:800;color:var(--primary);display:inline-flex;align-items:center;gap:.4rem;transition:gap .25s;}
.tpl11 .y-news-card:hover .y-news-link{gap:.8rem;}
.tpl11 .y-cta{
  text-align:center;
  padding:5rem 3rem 6rem;
  position:relative;
  margin:0 0 2rem;
  border-radius:18px;
  color:var(--white);
  background:linear-gradient(135deg, var(--primary-deeper) 0%, var(--primary-dark) 35%, var(--primary) 70%, var(--primary-light) 100%);
  overflow:hidden;
  box-shadow:0 28px 60px rgba(var(--primary-deeper-rgb),.4);
  border:1px solid rgba(255,255,255,.08);
}
.tpl11 .y-cta::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--gold) 30%, transparent), transparent 50%),
    radial-gradient(circle at 88% 84%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 50%);
}
.tpl11 .y-cta > *{position:relative; z-index:1;}
.tpl11 .y-cta .y-tape-label{background:var(--gold);color:var(--primary-deeper);border:2px solid #fff;}
.tpl11 .y-cta h3{font-size:3rem;margin:1rem 0 1rem;color:var(--white);text-shadow:0 2px 12px rgba(0,0,0,.18);}
.tpl11 .y-cta p{font-family:'Open Sans',sans-serif;font-size:1.45rem;color:rgba(255,255,255,.85);max-width:56rem;margin:0 auto 2.2rem;line-height:1.7}
.tpl11 .y-cta-stats{display:flex;justify-content:center;gap:2rem;margin-bottom:2rem;flex-wrap:wrap}
.tpl11 .y-cta-stats div{text-align:center;padding:.6rem 1.4rem;border-radius:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(8px);transition:.3s;}
.tpl11 .y-cta-stats div:hover{background:rgba(255,255,255,.15);transform:translateY(-2px);}
.tpl11 .y-cta-stats strong{display:block;font-size:2.2rem;color:var(--gold);font-weight:800;text-shadow:0 2px 8px rgba(0,0,0,.2);}
.tpl11 .y-cta-stats span{font-family:'Open Sans',sans-serif;font-size:1.05rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.7);font-weight:700}
.tpl11 .y-cta-form{max-width:48rem;margin:0 auto;background:var(--white);border:1px solid rgba(255,255,255,.6);border-radius:999px;padding:.6rem;display:flex;gap:.6rem;box-shadow:0 18px 40px rgba(0,0,0,.25)}
.tpl11 .y-cta-form input{flex:1;border:none;background:transparent;padding:1.1rem 1.6rem;font-size:1.4rem;outline:none;font-family:'Open Sans',sans-serif}
.tpl11 .y-cta-form input::placeholder{color:#7a7f86;}
.tpl11 .y-cta-form button{white-space:nowrap}
.tpl11 .y-cta .y-cta-foot{color:rgba(255,255,255,.7)!important;}
/* ── MOBILE: anti-long-scroll — horizontal snap where lists would stack tall ── */
.tpl11 .y-mobile-hint{display:none;}
.tpl11 .y-notes-toggle{display:none;}
@media(max-width:991px){
.tpl11 .y-hero-grid{grid-template-columns:1fr; gap:3.2rem; text-align:center;}
.tpl11 .y-hero-cover{max-width:56rem;margin:0 auto;}
.tpl11 .y-hero-cta{justify-content:center;}
.tpl11 .y-hero-trust{justify-content:center;gap:.8rem;}
.tpl11 .y-hero-h1{font-size:clamp(2.8rem,8vw,4.2rem);}
.tpl11 .y-hero-tag{margin-left:auto;margin-right:auto;}
.tpl11 .y-hero-h1::after{left:50%; right:auto; width:60%; transform:translateX(-50%) rotate(-.6deg);}
.tpl11 .y-hero-collage{height:46rem; max-width:46rem; margin:0 auto; width:100%;}
.tpl11 .y-hero-arrow{display:none;}
.tpl11 .y-page{padding:2.6rem clamp(1.2rem,4vw,1.8rem); margin-bottom:2rem;}
.tpl11 .y-page::after{inset:.7rem;}
.tpl11 .y-page-head{margin-bottom:2.2rem;}
.tpl11 .y-page-head h2{font-size:clamp(2.1rem,6vw,2.8rem);}
.tpl11 .y-vm-grid,.tpl11 .y-video-grid,.tpl11 .y-founder-wrap{grid-template-columns:1fr; gap:1.6rem;}
.tpl11 .y-founder-photo{margin:0 auto;}
.tpl11 .y-founder-wrap{text-align:center;}
.tpl11 .y-founder-wrap .y-founder-quote{text-align:left;}
.tpl11 .y-video-frame{transform:none; max-width:46rem; margin:0 auto; padding:.8rem .8rem 1rem;}
.tpl11 .y-video-frame img{height:22rem;}
.tpl11 .y-portal-grid{grid-template-columns:1fr 1fr; gap:1.2rem;}
.tpl11 .y-portal-card--wide{grid-column:span 1}
.tpl11 .y-notes{columns:1; column-gap:0;}
.tpl11 .y-btn--outline{margin-left:0;margin-top:0}
.tpl11 .y-polaroid--main img{height:24rem;}
.tpl11 .y-polaroid--back img{height:18rem;}
.tpl11 .y-polaroid--front img{height:14rem;}
.tpl11 .y-cta{padding:3.2rem 1.6rem 3rem;}
.tpl11 .y-cta-form{border-radius:16px;flex-direction:column;padding:1rem}
.tpl11 .y-cta-form input{border:1px solid var(--y-line);border-radius:999px}
/* horizontal swipe rows — replaces tall 1-column stacks */
.tpl11 .y-classes,.tpl11 .y-progs,.tpl11 .y-stats-grid,.tpl11 .y-values-grid,.tpl11 .y-news-grid,.tpl11 .y-show-grid,.tpl11 .y-why-grid{
  display:flex;
  gap:1.2rem;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding:.4rem .2rem 1.2rem;
  margin:0 -.2rem;
  scroll-padding:0 1.2rem;
  grid-template-columns:none;
}
.tpl11 .y-classes::-webkit-scrollbar,.tpl11 .y-progs::-webkit-scrollbar,.tpl11 .y-stats-grid::-webkit-scrollbar,.tpl11 .y-values-grid::-webkit-scrollbar,.tpl11 .y-news-grid::-webkit-scrollbar,.tpl11 .y-show-grid::-webkit-scrollbar,.tpl11 .y-why-grid::-webkit-scrollbar{display:none}
.tpl11 .y-classes .y-class-card,
.tpl11 .y-progs .y-prog,
.tpl11 .y-stats-grid .y-stat-sticker,
.tpl11 .y-values-grid .y-value,
.tpl11 .y-news-grid .y-news-card,
.tpl11 .y-show-grid .y-show-card,
.tpl11 .y-why-grid .y-why-card{
  flex:0 0 82%;
  max-width:82%;
  scroll-snap-align:start;
  scroll-snap-stop:always;
}
.tpl11 .y-classes .y-class-card{display:flex; flex-direction:column;}
.tpl11 .y-classes .y-class-frame{transform:none !important;}
.tpl11 .y-class-card:hover .y-class-frame{transform:translateY(-4px) !important;}
.tpl11 .y-prog{flex:0 0 78%; max-width:78%;}
.tpl11 .y-stats-grid .y-stat-sticker{flex:0 0 76%; max-width:76%;}
.tpl11 .y-values-grid .y-value{flex:0 0 74%; max-width:74%;}
.tpl11 .y-news-grid .y-news-card{flex:0 0 84%; max-width:84%;}
.tpl11 .y-show-grid .y-show-card{flex:0 0 84%; max-width:84%;}
.tpl11 .y-why-grid .y-why-card{flex:0 0 78%; max-width:78%;}
.tpl11 .y-portal-grid{display:flex !important; gap:1.2rem; overflow-x:auto !important; overflow-y:hidden !important; scroll-snap-type:x mandatory !important; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding:.4rem .2rem 1.2rem !important; margin:0 -.2rem !important; scroll-padding:0 1.2rem !important; grid-template-columns:none !important;}
.tpl11 .y-portal-grid::-webkit-scrollbar{display:none}
.tpl11 .y-portal-grid .y-portal-card{flex:0 0 46% !important; max-width:46% !important; grid-column:auto !important; scroll-snap-align:start !important; scroll-snap-stop:always !important; min-height:21rem;}
.tpl11 .y-portal-card--wide{flex:0 0 58% !important; max-width:58% !important; grid-column:auto !important;}
.tpl11 .y-timeline{margin:1.4rem 0 2rem; border-radius:12px; padding:2.2rem 1rem 1.6rem;}
.tpl11 .y-carousel-track{gap:1.2rem; padding-bottom:.8rem;}
.tpl11 .y-carousel-card{flex:0 0 84%;}
.tpl11 .y-mobile-hint{display:flex; align-items:center; gap:.5rem; justify-content:center; font-family:'Open Sans',sans-serif; font-size:1.15rem; font-weight:700; color:var(--y-ink-3); letter-spacing:.04em; margin:-.6rem 0 1.2rem;}
.tpl11 .y-mobile-hint i{color:var(--y-tape);}
.tpl11 .y-mobile-hint--portal{margin-top:.6rem;}
}
@media(max-width:600px){
.tpl11 .y-hero{padding:3.2rem clamp(1.2rem,4vw,1.6rem) 2.8rem clamp(1.2rem,4vw,1.6rem);}
.tpl11 .y-hero-collage{height:34rem; max-width:100%;}
.tpl11 .y-hero-h1{font-size:clamp(2.4rem,8.5vw,3.2rem);}
.tpl11 .y-hero-tag{font-size:1.35rem; line-height:1.6;}
.tpl11 .y-hero-cta{display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important; gap:.5rem !important; justify-content:center !important;}
.tpl11 .y-hero-cta .y-btn{flex:1 1 0 !important; min-width:0 !important; justify-content:center !important; white-space:nowrap !important; padding:.9rem .6rem !important; font-size:.98rem !important; gap:.4rem !important;}
.tpl11 .y-hero-trust{display:grid !important; grid-template-columns:repeat(3,1fr) !important; gap:.4rem !important; flex-direction:row !important;}
.tpl11 .y-trust-item{flex-direction:column !important; align-items:center !important; text-align:center !important; padding:.55rem .3rem !important; gap:.3rem !important; justify-content:center !important;}
.tpl11 .y-trust-item i{width:2.6rem !important; height:2.6rem !important; font-size:1rem !important;}
.tpl11 .y-trust-item strong{font-size:1rem !important; line-height:1.15 !important;}
.tpl11 .y-trust-item span{font-size:.78rem !important; line-height:1.25 !important;}
.tpl11 .y-polaroid--main{width:68%; left:16%;}
.tpl11 .y-polaroid--back{width:46%; left:0;}
.tpl11 .y-polaroid--front{width:36%; right:0;}
.tpl11 .y-sticker{font-size:.95rem; padding:.35rem .8rem;}
.tpl11 .y-classes .y-class-card,
.tpl11 .y-progs .y-prog,
.tpl11 .y-stats-grid .y-stat-sticker,
.tpl11 .y-values-grid .y-value,
.tpl11 .y-news-grid .y-news-card,
.tpl11 .y-show-grid .y-show-card,
.tpl11 .y-why-grid .y-why-card{flex:0 0 88%; max-width:88%;}
.tpl11 .y-portal-grid{display:flex !important; gap:1.1rem !important; overflow-x:auto !important; scroll-snap-type:x mandatory !important; padding:.3rem .1rem 1rem !important; margin:0 -.1rem !important; grid-template-columns:none !important;}
.tpl11 .y-portal-grid .y-portal-card{flex:0 0 78% !important; max-width:78% !important; grid-column:auto !important; scroll-snap-align:start !important; min-height:21rem; padding:1.6rem 1.4rem 1.4rem;}
.tpl11 .y-portal-card--wide{flex:0 0 84% !important; max-width:84% !important;}
.tpl11 .y-portal-card i{width:4.2rem !important;height:4.2rem !important;font-size:1.6rem !important;}
.tpl11 .y-portal-card h4{font-size:1.4rem !important;}
.tpl11 .y-portal-card p{font-size:1.18rem !important;}
.tpl11 .y-carousel-card{flex:0 0 88%;}
.tpl11 .y-page{padding:2rem 1.2rem 2.2rem;}
.tpl11 .y-page-head h2{font-size:2rem;}
.tpl11 .y-container{padding:0 1rem;}
.tpl11 .y-tl-item{flex:0 0 11rem;}
.tpl11 .y-cta-stats{gap:1rem;}
.tpl11 .y-cta h3{font-size:2.2rem;}
.tpl11 .y-video-frame img{height:18rem;}
.tpl11 .y-founder-photo{width:15rem; height:15rem;}
}
/* ── MOBILE FIRST-PRINCIPLE FIX (tpl11) — mirrors tpl15: twin buttons + trust side-by-side ── */
@media(max-width:768px){
.tpl11 .y-hero-cta{display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important; gap:.6rem !important; justify-content:center !important; align-items:stretch !important;}
.tpl11 .y-hero-cta .y-btn{flex:1 1 0 !important; min-width:0 !important; justify-content:center !important; white-space:nowrap !important; padding:.95rem .7rem !important; font-size:1.05rem !important; gap:.4rem !important;}
.tpl11 .y-hero-trust{display:grid !important; grid-template-columns:repeat(3,1fr) !important; gap:.5rem !important;}
.tpl11 .y-hero-trust .y-trust-item{flex-direction:column !important; align-items:center !important; text-align:center !important; padding:.6rem .35rem !important; gap:.35rem !important; justify-content:center !important;}
.tpl11 .y-hero-trust .y-trust-item i{width:2.8rem !important; height:2.8rem !important; font-size:1.05rem !important;}
.tpl11 .y-hero-trust .y-trust-item strong{font-size:1.1rem !important; line-height:1.15 !important;}
.tpl11 .y-hero-trust .y-trust-item span{font-size:.82rem !important; line-height:1.25 !important;}
.tpl11 .y-cta div[style*="display:flex"]{flex-wrap:nowrap !important; gap:.6rem !important; justify-content:center !important;}
.tpl11 .y-cta div[style*="display:flex"] .y-btn{flex:1 1 0 !important; min-width:0 !important; white-space:nowrap !important; justify-content:center !important; padding:.95rem .7rem !important; font-size:1.05rem !important;}
/* collapsible long lists — only on mobile, keeps page short */
.tpl11 .y-notes--collapsible li:nth-child(n+4){display:none;}
.tpl11 .y-notes--collapsible.is-expanded li:nth-child(n+4){display:list-item;}
.tpl11 .y-notes--promise.y-notes--collapsible.is-expanded li:nth-child(n+4){display:block;}
.tpl11 .y-notes-toggle{
  display:inline-flex; align-items:center; gap:.5rem;
  margin:1rem auto 0; padding:.7rem 1.4rem;
  font-family:'Open Sans',sans-serif; font-size:1.25rem; font-weight:800;
  color:var(--y-navy); background:var(--white);
  border:1.5px solid var(--y-line); border-radius:999px;
  cursor:pointer; box-shadow:0 4px 12px rgba(26,29,33,.08);
}
.tpl11 .y-notes-toggle i{transition:transform .25s;}
.tpl11 .y-notes--collapsible.is-expanded + .y-notes-toggle i{transform:rotate(180deg);}
.tpl11 .y-vm-card .y-vm-text{font-size:1.32rem;}
.tpl11 .y-vm-card .y-notes{columns:1;}
.tpl11 .y-vm-card .y-notes li{font-size:1.3rem;}
}
/* ensure 600px tight values win over 768px cascade — re-apply after 768 */
@media(max-width:600px){
.tpl11 .y-hero-cta{gap:.5rem !important;}
.tpl11 .y-hero-cta .y-btn{padding:.9rem .6rem !important; font-size:.98rem !important;}
.tpl11 .y-hero-trust{gap:.4rem !important;}
.tpl11 .y-hero-trust .y-trust-item{padding:.55rem .3rem !important;}
.tpl11 .y-hero-trust .y-trust-item i{width:2.6rem !important; height:2.6rem !important; font-size:1rem !important;}
.tpl11 .y-hero-trust .y-trust-item strong{font-size:1rem !important;}
.tpl11 .y-hero-trust .y-trust-item span{font-size:.78rem !important;}
}
@media(max-width:400px){
.tpl11 .y-hero-cta{gap:.45rem !important;}
.tpl11 .y-hero-cta .y-btn{padding:.85rem .5rem !important; font-size:.92rem !important;}
.tpl11 .y-hero-trust{gap:.35rem !important;}
.tpl11 .y-hero-trust .y-trust-item{padding:.5rem .2rem !important;}
.tpl11 .y-hero-trust .y-trust-item i{width:2.4rem !important; height:2.4rem !important; font-size:.95rem !important;}
.tpl11 .y-hero-trust .y-trust-item strong{font-size:.98rem !important;}
.tpl11 .y-hero-trust .y-trust-item span{font-size:.76rem !important;}
.tpl11 .y-cta div[style*="display:flex"]{gap:.45rem !important;}
.tpl11 .y-cta div[style*="display:flex"] .y-btn{padding:.85rem .5rem !important; font-size:.92rem !important;}
}

/* =====================================================
   TEMPLATE 12 — "BLUEPRINT"
   Technical drafting sheet — blueprint blue, grid lines,
   dimension lines, annotation callouts, monospace numerals.
   Great for STEM/engineering-leaning schools.
   ===================================================== */
.tpl12{
  /* Blueprint tokens — strictly derived from the shared theme palette
     (header/footer variables) so a single admin "Theme & Brand Colours"
     change recolours the whole template. Mirrors the footer gradient
     pattern: primary-deeper → primary-dark with gold/accent lines. */
  --b-blue:        var(--primary-deeper);
  --b-blue2:       var(--primary-dark);
  --b-blue3:       var(--primary-deeper);
  --b-blue-soft:   color-mix(in srgb, var(--primary) 14%, var(--white));
  --b-amber:       var(--gold);
  --b-amber-soft:  color-mix(in srgb, var(--gold) 24%, var(--white));
  --b-accent:      var(--accent);
  --b-line:        rgba(var(--gold-rgb), .22);
  --b-line-soft:   rgba(255,255,255,.08);
  --b-line-2:      color-mix(in srgb, var(--primary) 10%, var(--white));
  --b-cream:       var(--primary-mist);
  --b-cream-2:     color-mix(in srgb, var(--primary-mist) 78%, #ffffff);
  --b-ink:         var(--text);
  --b-ink-2:       var(--text-secondary);
  --b-ink-mute:    var(--text-muted);
  --b-on-dark:     var(--white);
  --b-on-dark-soft:rgba(255,255,255,.78);
  --b-on-dark-mute:rgba(255,255,255,.62);
  --b-on-dark-faint:rgba(255,255,255,.48);

  font-family:'Open Sans','Segoe UI',system-ui,sans-serif;
  color:var(--b-on-dark);
  background:var(--b-blue);
}
.tpl12 *{box-sizing:border-box;}
.tpl12 .b-container{max-width:1240px;margin:0 auto;padding:0 clamp(1rem, 1.8vw, 1.6rem);}
.tpl12 section{scroll-margin-top:8rem;}
.tpl12 .b-mono{font-family:'Courier New',monospace;}
.tpl12 .b-grid-bg{
  background-image:
    linear-gradient(var(--b-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--b-line) 1px,transparent 1px);
  background-size:34px 34px;
  background-position:-1px -1px;
  background-color:var(--b-blue);
}
.tpl12 .b-accent{color:var(--b-amber);}

/* HERO — rich colorful blueprint with layered footer palette */
.tpl12 .b-hero{
  padding:7rem clamp(1.6rem,3vw,3.2rem) 6.5rem clamp(1.6rem,3vw,3.2rem);
  position:relative;
  background:
    radial-gradient(ellipse at 16% 18%, rgba(var(--gold-rgb), .16) 0%, transparent 46%),
    radial-gradient(ellipse at 86% 76%, rgba(var(--accent-rgb), .13) 0%, transparent 42%),
    radial-gradient(ellipse at 68% 14%, rgba(var(--primary-light-rgb), .18) 0%, transparent 52%),
    radial-gradient(ellipse at 50% 100%, rgba(var(--primary-rgb), .10) 0%, transparent 55%),
    linear-gradient(180deg, var(--primary-deeper) 0%, var(--primary-dark) 58%, var(--primary) 100%);
  color:var(--white);
  overflow:hidden;
  border-top:4px solid var(--accent);
}
.tpl12 .b-hero::before{
  content:'';
  position:absolute; top:4px; left:0;
  width:10rem; height:2px;
  background:var(--gold);
  border-radius:0 2px 2px 0;
  z-index:2;
}
.tpl12 .b-hero::after{
  content:'';
  position:absolute;
  top:-6rem; right:-6rem;
  width:42rem; height:42rem;
  border-radius:50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.08) 0%, transparent 60%),
    radial-gradient(circle, var(--primary-light) 0%, transparent 68%);
  opacity:.22;
  pointer-events:none;
}
.tpl12 .b-hero .b-container{position:relative;z-index:1;}
.tpl12 .b-hero .b-grid-bg{ background-color:transparent; }
/* subtle blueprint grid overlay with colorful tint */
.tpl12 .b-hero .b-container::before{
  content:'';
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(var(--gold-rgb), .09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--gold-rgb), .09) 1px, transparent 1px);
  background-size:34px 34px;
  background-position:0 0;
  opacity:.35;
  pointer-events:none;
  z-index:0;
}
.tpl12 .b-hero-tag{
  display:inline-flex;align-items:center;gap:.7rem;
  border:1px solid rgba(var(--gold-rgb), .38);
  background:rgba(255,255,255,.07);
  color:var(--gold);
  padding:.55rem 1.35rem;
  font-size:1.08rem;letter-spacing:.12em;text-transform:uppercase;font-weight:800;
  font-family:var(--font-body);
  margin-bottom:1.8rem;
  border-radius:999px;
}
.tpl12 .b-hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:4.5rem;align-items:center;position:relative;z-index:1;}
.tpl12 .b-hero-content h1{font-family:var(--font-heading);font-size:clamp(3rem,4.8vw,5rem);font-weight:800;line-height:1.08;letter-spacing:-.02em;margin:0 0 1.4rem;color:var(--white);}
.tpl12 .b-hero-content h1 span{color:var(--gold);}
.tpl12 .b-hero-content p{color:rgba(255,255,255,.78);font-size:1.58rem;line-height:1.78;max-width:52rem;margin:0 0 2.6rem;}
.tpl12 .b-hero-cta{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;margin-bottom:2.8rem;}

/* BUTTONS — use accent/gold dynamic tokens like footer */
.tpl12 .b-btn{display:inline-flex;align-items:center;gap:.8rem;padding:1.2rem 2.4rem;border-radius:999px;font-weight:800;font-size:1.32rem;text-decoration:none;transition:.25s;cursor:pointer;border:1.5px solid transparent;font-family:var(--font-body);line-height:1.2;letter-spacing:.02em;}
.tpl12 .b-btn i{transition:transform .3s;}
.tpl12 .b-btn:hover i{transform:translateX(3px);}
.tpl12 .b-btn--amber{background:var(--accent);color:var(--white);border-color:var(--accent);box-shadow:0 6px 18px rgba(var(--accent-rgb),.28);}
.tpl12 .b-btn--amber:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(var(--accent-rgb),.38);background:var(--accent-dark);border-color:var(--accent-dark);}
.tpl12 .b-btn--outline{border:1.5px solid rgba(255,255,255,.22);color:var(--white);background:rgba(255,255,255,.06);}
.tpl12 .b-btn--outline:hover{border-color:var(--white);color:var(--white);transform:translateY(-2px);background:rgba(255,255,255,.12);}
/* Walkthrough “Read more about us” — light blueprint background needs deeper variable, not white */
.tpl12 .b-walkthrough .b-btn--outline{
  border-color: var(--primary);
  color: var(--primary-deeper);
  background: var(--white);
  box-shadow: 0 4px 14px rgba(var(--primary-rgb),.10);
}
.tpl12 .b-walkthrough .b-btn--outline:hover{
  background: var(--primary-deeper);
  border-color: var(--primary-deeper);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(var(--primary-deeper-rgb),.22);
}

/* HERO TRUST PILLS — footer contact-list icon style */
.tpl12 .b-hero-trust{display:flex;flex-wrap:wrap;gap:1rem;}
.tpl12 .b-trust-item{display:flex;align-items:center;gap:1.1rem;padding:.85rem 1.35rem;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:12px;transition:.3s;}
.tpl12 .b-trust-item:hover{background:rgba(255,255,255,.10);transform:translateY(-2px);border-color:rgba(var(--gold-rgb),.28);}
.tpl12 .b-trust-item i{width:3.8rem;height:3.8rem;display:inline-flex;align-items:center;justify-content:center;color:var(--accent);border:1px solid rgba(var(--accent-rgb),.22);border-radius:12px;font-size:1.4rem;flex-shrink:0;background:rgba(var(--accent-rgb),.14);}
.tpl12 .b-trust-item strong{display:block;font-family:var(--font-heading);font-size:1.45rem;color:var(--white);line-height:1.1;font-weight:700;}
.tpl12 .b-trust-item span{font-family:var(--font-body);font-size:1.06rem;color:rgba(255,255,255,.78);letter-spacing:.02em;}

/* BLUEPRINT-FRAMED HERO IMAGE — keep drafting concept, footer palette */
.tpl12 .b-drawing{position:relative;padding:2rem;}
.tpl12 .b-drawing-frame{position:relative;border:1px solid rgba(var(--gold-rgb),.28);background:var(--primary-deeper);overflow:hidden;border-radius:12px;box-shadow:0 16px 40px rgba(0,0,0,.28);}
.tpl12 .b-drawing-frame img{width:100%;height:36rem;object-fit:cover;display:block;filter:saturate(1.05) brightness(.96);opacity:.96;}
.tpl12 .b-dim-top{position:absolute;top:-1.2rem;left:0;right:0;display:flex;align-items:center;z-index:3;}
.tpl12 .b-dim-top::before,.tpl12 .b-dim-top::after{content:'';flex:1;border-top:1px dashed rgba(var(--gold-rgb),.45);}
.tpl12 .b-dim-top span{padding:0 1rem;font-family:var(--font-body);font-size:1.02rem;font-weight:800;color:var(--gold);background:var(--primary-deeper);letter-spacing:.08em;text-transform:uppercase;}
.tpl12 .b-dim-side{position:absolute;right:-1.4rem;top:50%;transform:translateY(-50%) rotate(90deg);font-family:var(--font-body);font-size:1rem;font-weight:700;color:var(--gold);background:var(--primary-deeper);padding:0 .8rem;letter-spacing:.08em;text-transform:uppercase;z-index:3;}
.tpl12 .b-corner{position:absolute;width:1.8rem;height:1.8rem;border:2px solid var(--gold);z-index:2;border-radius:2px;}
.tpl12 .b-corner--tl{top:-.9rem;left:-.9rem;border-right:none;border-bottom:none;}
.tpl12 .b-corner--tr{top:-.9rem;right:-.9rem;border-left:none;border-bottom:none;}
.tpl12 .b-corner--bl{bottom:-.9rem;left:-.9rem;border-right:none;border-top:none;}
.tpl12 .b-corner--br{bottom:-.9rem;right:-.9rem;border-left:none;border-top:none;}
.tpl12 .b-label{position:absolute;bottom:1.2rem;left:1.2rem;background:rgba(255,255,255,.94);border:1px solid rgba(var(--gold-rgb),.22);padding:.55rem 1.05rem;font-family:var(--font-body);font-size:1.02rem;font-weight:800;color:var(--primary-dark);letter-spacing:.06em;z-index:2;border-radius:999px;}
.tpl12 .b-coord{position:absolute;font-family:var(--font-body);font-size:.95rem;font-weight:700;color:var(--white);background:rgba(var(--primary-rgb),.72);border:1px solid rgba(255,255,255,.12);padding:.3rem .6rem;z-index:2;letter-spacing:.04em;border-radius:6px;backdrop-filter:blur(4px);}
.tpl12 .b-coord--tl{top:.9rem;left:.9rem;}
.tpl12 .b-coord--br{bottom:.9rem;right:.9rem;}

/* TICKER — subtle footer-adjacent strip */
.tpl12 .b-ticker{background:var(--primary-dark);border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.06);padding:1.05rem 0;overflow:hidden;}
.tpl12 .b-ticker-track{display:inline-flex;gap:2.6rem;align-items:center;font-family:var(--font-body);font-weight:800;font-size:1.08rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.72);animation:bMarquee 32s linear infinite;padding-left:2rem;white-space:nowrap;}
.tpl12 .b-ticker-track span{display:inline-flex;align-items:center;gap:1rem;}
.tpl12 .b-ticker-dot{width:.45rem;height:.45rem;background:var(--accent);border-radius:50%;display:inline-block;flex-shrink:0;}
@keyframes bMarquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* SPECS STRIP — footer trust strip idiom */
.tpl12 .b-specs{
  background:linear-gradient(180deg, var(--primary-deeper) 0%, var(--primary-dark) 100%);
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
  padding:3.2rem 0;
  position:relative;
}
.tpl12 .b-specs::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;background:rgba(255,255,255,.06);
}
.tpl12 .b-specs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;}
.tpl12 .b-spec{text-align:center;border-left:1px solid rgba(255,255,255,.08);padding:1.2rem 1rem;}
.tpl12 .b-spec:first-child{border-left:none;}
.tpl12 .b-spec strong{display:block;font-family:var(--font-heading);font-size:clamp(2.2rem,3vw,2.8rem);font-weight:800;color:var(--white);line-height:1;text-shadow:0 2px 10px rgba(0,0,0,.18);}
.tpl12 .b-spec span{font-family:var(--font-body);font-size:1.06rem;color:rgba(255,255,255,.72);text-transform:uppercase;letter-spacing:.08em;margin-top:.55rem;display:block;font-weight:700;}

/* GENERIC SECTION HEAD — generous rhythm */
.tpl12 .b-head{text-align:center;max-width:68rem;margin:0 auto 4.2rem;padding:0 1rem;}
.tpl12 .b-head .b-hero-tag{margin-bottom:1.4rem;}
.tpl12 .b-head h2{font-family:var(--font-heading);color:var(--white);font-size:clamp(2.5rem,3.8vw,3.6rem);font-weight:800;letter-spacing:-.02em;margin:.8rem 0 1.1rem;line-height:1.12;}
.tpl12 .b-head p{color:rgba(255,255,255,.74);font-size:1.52rem;line-height:1.72;max-width:62rem;margin:0 auto;}

/* LIGHT-THEMED SECTION HEAD VARIANT — uses footer widget heading style */
.tpl12 .b-brief .b-head h2,
.tpl12 .b-notes-section .b-head h2,
.tpl12 .b-walkthrough .b-head h2,
.tpl12 .b-techspecs .b-head h2,
.tpl12 .b-log .b-head h2{color:var(--primary-dark);}
.tpl12 .b-brief .b-head p,
.tpl12 .b-notes-section .b-head p,
.tpl12 .b-walkthrough .b-head p,
.tpl12 .b-techspecs .b-head p,
.tpl12 .b-log .b-head p{color:var(--text-secondary);}

/* LEVELS (FLOOR PLANS) — footer-palette dark card */
.tpl12 .b-levels{padding:6.5rem clamp(1.6rem,2.5vw,3rem) 6.5rem clamp(1.6rem,2.5vw,3rem);background:linear-gradient(180deg, var(--primary-deeper) 0%, var(--primary-dark) 100%);position:relative;overflow:hidden;border-top:1px solid rgba(255,255,255,.06);}
.tpl12 .b-levels::before{
  content:'';position:absolute;top:-8rem;right:-6rem;width:30rem;height:30rem;border-radius:50%;
  background:radial-gradient(circle, rgba(var(--gold-rgb),.10) 0%, transparent 65%);pointer-events:none;
}
.tpl12 .b-plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;position:relative;z-index:1;}
.tpl12 .b-plan-card{
  border:1px solid rgba(255,255,255,.08);
  text-decoration:none;color:var(--white);
  transition:.3s;position:relative;
  background:rgba(255,255,255,.04);
  display:flex;flex-direction:column;
  border-radius:12px;overflow:hidden;
}
.tpl12 .b-plan-card:hover{border-color:rgba(var(--gold-rgb),.42);transform:translateY(-6px);box-shadow:0 18px 36px rgba(0,0,0,.28);background:rgba(255,255,255,.06);}
.tpl12 .b-plan-head{display:flex;justify-content:space-between;align-items:center;padding:1.1rem 1.5rem;border-bottom:1px solid rgba(255,255,255,.08);font-family:var(--font-body);font-size:1.05rem;font-weight:800;color:var(--gold);letter-spacing:.08em;text-transform:uppercase;background:rgba(255,255,255,.05);}
.tpl12 .b-plan-body{padding:2.4rem 1.8rem 2.6rem;text-align:center;flex:1;display:flex;flex-direction:column;}
.tpl12 .b-plan-body > i{font-size:2.8rem;color:var(--gold);margin-bottom:1.4rem;display:block;}
.tpl12 .b-plan-body h4{font-family:var(--font-heading);color:var(--white);font-size:1.95rem;font-weight:800;margin:0 0 .8rem;letter-spacing:-.01em;}
.tpl12 .b-plan-body p{color:rgba(255,255,255,.78);font-size:1.38rem;line-height:1.68;margin:0 0 1.4rem;flex:1;}
.tpl12 .b-plan-tag{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--font-body);font-size:1.06rem;font-weight:800;color:var(--gold);border:1px solid rgba(var(--gold-rgb),.32);padding:.35rem .9rem;margin-bottom:1.4rem;letter-spacing:.04em;align-self:center;background:rgba(var(--gold-rgb),.10);border-radius:999px;}
.tpl12 .b-plan-cta{font-family:var(--font-body);font-weight:800;font-size:1.18rem;color:var(--gold);letter-spacing:.06em;display:inline-flex;align-items:center;gap:.4rem;justify-content:center;}

/* PROJECT BRIEF (Vision & Mission) — colorful light with gold/accent blobs */
.tpl12 .b-brief{
  padding:6.5rem clamp(1.6rem,2.5vw,3rem) 6.5rem clamp(1.6rem,2.5vw,3rem);
  background:
    radial-gradient(ellipse at 92% 10%, rgba(var(--gold-rgb), .11) 0%, transparent 38%),
    radial-gradient(ellipse at 8% 90%, rgba(var(--accent-rgb), .08) 0%, transparent 36%),
    linear-gradient(180deg, var(--white) 0%, color-mix(in srgb, var(--primary-mist) 48%, var(--white)) 100%);
  color:var(--text);position:relative;overflow:hidden;border:1px solid var(--border-light);border-radius:16px;
}
.tpl12 .b-brief-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.2rem;}
.tpl12 .b-brief-card{border:1px solid var(--border-light);padding:2.8rem 2.6rem;border-radius:16px;position:relative;background:var(--white);box-shadow:var(--shadow-card);overflow:hidden;}
.tpl12 .b-brief-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--primary);}
.tpl12 .b-brief-card--mission::before{background:var(--accent);}
.tpl12 .b-brief-num{position:absolute;top:1.3rem;right:1.3rem;font-family:var(--font-body);font-weight:800;font-size:1rem;color:var(--primary);border:1px solid rgba(var(--primary-rgb),.18);padding:.35rem .85rem;letter-spacing:.08em;background:var(--primary-mist);border-radius:999px;text-transform:uppercase;}
.tpl12 .b-brief-card--mission .b-brief-num{color:var(--accent-dark);border-color:rgba(var(--accent-rgb),.22);background:rgba(var(--accent-rgb),.12);}
.tpl12 .b-brief-card h3{font-family:var(--font-heading);font-size:2rem;font-weight:800;margin:0 0 1.4rem;color:var(--primary-dark);display:flex;align-items:center;gap:1rem;}
.tpl12 .b-brief-card--mission h3{color:var(--text);}
.tpl12 .b-brief-card h3 i{color:var(--white);background:var(--primary);width:4rem;height:4rem;display:inline-flex;align-items:center;justify-content:center;font-size:1.55rem;border-radius:12px;flex-shrink:0;}
.tpl12 .b-brief-card--mission h3 i{background:var(--accent);}
.tpl12 .b-brief-card p{margin:0 0 1rem;font-size:1.48rem;color:var(--text-secondary);line-height:1.75;}
.tpl12 .b-brief-card ul{list-style:none;padding:0;margin:0;}
.tpl12 .b-brief-card ul li{position:relative;padding:.85rem 0 .85rem 2.8rem;font-size:1.38rem;color:var(--text-secondary);line-height:1.65;border-bottom:1px solid var(--border-light);}
.tpl12 .b-brief-card ul li:last-child{border-bottom:none;}
.tpl12 .b-brief-card ul li::before{content:'\f00c';font-family:'FontAwesome';position:absolute;left:0;top:.95rem;width:2rem;height:2rem;display:inline-flex;align-items:center;justify-content:center;background:var(--primary-mist);color:var(--primary);border-radius:50%;font-size:1rem;border:1px solid rgba(var(--primary-rgb),.12);}

/* DRAWING NOTES (Values Carousel) — FIXED SLIDER + footer palette */
.tpl12 .b-notes-section{
  padding:6.5rem clamp(1.6rem,2.5vw,3rem) 6.5rem clamp(1.6rem,2.5vw,3rem);
  background:
    radial-gradient(ellipse at 88% 14%, rgba(var(--gold-rgb), .10) 0%, transparent 36%),
    radial-gradient(ellipse at 12% 92%, rgba(var(--accent-rgb), .07) 0%, transparent 34%),
    linear-gradient(180deg, var(--white) 0%, color-mix(in srgb, var(--primary-mist) 38%, var(--white)) 100%);
  color:var(--text);
  overflow:hidden;
  position:relative;
  border:1px solid var(--border-light);border-radius:16px;
}
.tpl12 .b-notes-section .b-head h2 span{color:var(--accent);}
.tpl12 .b-notes-track{
  display:flex;
  gap:2rem;
  transition:transform .55s cubic-bezier(.22,.8,.22,1);
  will-change:transform;
  overflow:visible;
}
.tpl12 .b-notes-card{
  flex:0 0 calc((100% - 4rem) / 3);
  min-width:0;
  background:var(--white);
  border:1px solid var(--border-light);
  overflow:hidden;display:flex;flex-direction:column;
  border-radius:16px;
  box-shadow:var(--shadow-card);
  transition:transform .3s, box-shadow .3s, border-color .3s;
}
.tpl12 .b-notes-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover);border-color:rgba(var(--primary-rgb),.18);}
.tpl12 .b-notes-img{position:relative;height:19rem;overflow:hidden;background:var(--primary-mist);}
.tpl12 .b-notes-img img{width:100%;height:100%;object-fit:cover;filter:saturate(1.02) brightness(.98);transition:transform .6s;}
.tpl12 .b-notes-card:hover .b-notes-img img{transform:scale(1.04);}
.tpl12 .b-notes-tag{
  position:absolute;top:1rem;left:1rem;
  background:var(--primary);color:var(--white);
  padding:.45rem .95rem;
  font-family:var(--font-body);font-size:1rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  z-index:2;border-radius:999px;
  box-shadow:0 4px 14px rgba(0,0,0,.18);
}
.tpl12 .b-notes-tag::after{
  content:'';position:absolute;inset:0;border-radius:999px;
  border:1px solid rgba(255,255,255,.18);pointer-events:none;
}
.tpl12 .b-notes-body{padding:1.8rem 1.8rem 2rem;flex:1;background:var(--white);}
.tpl12 .b-notes-body p{margin:0;font-family:var(--font-body);font-size:1.42rem;line-height:1.68;color:var(--text-secondary);}
.tpl12 .b-notes-controls{display:flex;justify-content:center;align-items:center;gap:1.2rem;margin-top:2.6rem;}
.tpl12 .b-notes-arrow{
  width:4.4rem;height:4.4rem;
  background:var(--white);border:1.5px solid var(--border);
  color:var(--primary);
  border-radius:50%;cursor:pointer;font-size:1.25rem;transition:.25s;
  display:inline-flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-sm);
}
.tpl12 .b-notes-arrow:hover{background:var(--primary);color:var(--white);border-color:var(--primary);transform:translateY(-2px);box-shadow:0 8px 18px var(--primary-glow);}
.tpl12 .b-notes-dots{display:flex;gap:.55rem;align-items:center;}
.tpl12 .b-notes-dots button{
  width:.9rem;height:.9rem;background:var(--border);border:none;cursor:pointer;
  border-radius:50%;transition:.25s;padding:0;
}
.tpl12 .b-notes-dots button.is-active{background:var(--accent);width:2.2rem;border-radius:999px;box-shadow:0 0 0 4px rgba(var(--accent-rgb),.14);}

/* MATERIALS (Core Values) — footer dark with accent stamp */
.tpl12 .b-materials{
  padding:6.5rem clamp(1.6rem,2.5vw,3rem) 6.5rem clamp(1.6rem,2.5vw,3rem);
  background:linear-gradient(180deg, var(--primary-deeper) 0%, var(--primary-dark) 100%);
  position:relative;overflow:hidden;
  border-top:4px solid var(--accent);
}
.tpl12 .b-materials::before{
  content:'';position:absolute;top:4px;left:0;width:10rem;height:2px;background:var(--gold);border-radius:0 2px 2px 0;z-index:2;
}
.tpl12 .b-materials::after{
  content:'';position:absolute;top:-8rem;right:-6rem;width:30rem;height:30rem;border-radius:50%;
  background:radial-gradient(circle, rgba(var(--accent-rgb),.14) 0%, transparent 65%);pointer-events:none;
}
.tpl12 .b-materials .b-head h2{color:var(--white);}
.tpl12 .b-materials .b-head p{color:rgba(255,255,255,.78);}
.tpl12 .b-materials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;position:relative;z-index:1;}
.tpl12 .b-material{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  padding:2.4rem 1.8rem 2.2rem;text-align:center;position:relative;transition:.3s;
  border-radius:16px;backdrop-filter:blur(2px);
}
.tpl12 .b-material:hover{transform:translateY(-4px);border-color:rgba(var(--gold-rgb),.38);background:rgba(255,255,255,.08);box-shadow:0 10px 28px rgba(0,0,0,.18);}
.tpl12 .b-material-num{
  position:absolute;top:1rem;right:1rem;
  font-family:var(--font-body);font-weight:800;font-size:1rem;color:var(--gold);
  border:1px solid rgba(var(--gold-rgb),.32);padding:.3rem .7rem;letter-spacing:.08em;
  background:rgba(255,255,255,.06);border-radius:999px;
}
.tpl12 .b-material > i{font-size:2.6rem;color:var(--gold);margin-bottom:1.2rem;display:block;}
.tpl12 .b-material h4{font-family:var(--font-heading);color:var(--white);font-size:1.65rem;font-weight:800;margin:0 0 .7rem;letter-spacing:-.01em;}
.tpl12 .b-material p{color:rgba(255,255,255,.78);font-size:1.33rem;line-height:1.65;margin:0;}

/* SITE WALKTHROUGH (Video) — colorful light with accent/gold tint */
.tpl12 .b-walkthrough{
  padding:6.5rem clamp(1.6rem,2.5vw,3rem) 6.5rem clamp(1.6rem,2.5vw,3rem);
  background:
    radial-gradient(ellipse at 18% 18%, rgba(var(--gold-rgb), .09) 0%, transparent 38%),
    radial-gradient(ellipse at 88% 88%, rgba(var(--accent-rgb), .07) 0%, transparent 36%),
    linear-gradient(180deg, var(--white) 0%, color-mix(in srgb, var(--gold) 6%, var(--white)) 100%);
  color:var(--text);position:relative;overflow:hidden;border:1px solid var(--border-light);border-radius:16px;
}
.tpl12 .b-walkthrough-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:3.2rem;align-items:center;}
.tpl12 .b-video-frame{position:relative;cursor:pointer;border:1px solid var(--border-light);overflow:hidden;border-radius:16px;background:var(--primary-deeper);box-shadow:var(--shadow-lg);}
.tpl12 .b-video-frame img{width:100%;height:34rem;object-fit:cover;display:block;filter:brightness(.88) saturate(1.02);}
.tpl12 .b-video-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--white);font-size:4rem;background:linear-gradient(180deg, rgba(0,0,0,.08) 0%, rgba(var(--primary-deeper-rgb),.45) 100%);transition:.3s;}
.tpl12 .b-video-frame:hover .b-video-play{background:linear-gradient(180deg, rgba(0,0,0,.02) 0%, rgba(var(--primary-deeper-rgb),.55) 100%);}
.tpl12 .b-video-play i{width:7rem;height:7rem;display:inline-flex;align-items:center;justify-content:center;background:var(--accent);color:var(--white);border-radius:50%;padding-left:.45rem;font-size:2.6rem;box-shadow:0 8px 22px rgba(0,0,0,.28);transition:transform .3s;}
.tpl12 .b-video-frame:hover .b-video-play i{transform:scale(1.06);}
.tpl12 .b-video-cap{position:absolute;left:1.2rem;bottom:1.2rem;background:rgba(255,255,255,.96);padding:.5rem 1rem;font-family:var(--font-body);font-size:1.02rem;font-weight:800;color:var(--primary-dark);letter-spacing:.04em;z-index:2;border-radius:999px;box-shadow:0 4px 14px rgba(0,0,0,.12);}
.tpl12 .b-drawing-corner{position:absolute;width:1.6rem;height:1.6rem;border:2px solid var(--gold);z-index:2;border-radius:3px;}
.tpl12 .b-drawing-corner--tl{top:.6rem;left:.6rem;border-right:none;border-bottom:none;}
.tpl12 .b-drawing-corner--tr{top:.6rem;right:.6rem;border-left:none;border-bottom:none;}
.tpl12 .b-drawing-corner--bl{bottom:.6rem;left:.6rem;border-right:none;border-top:none;}
.tpl12 .b-drawing-corner--br{bottom:.6rem;right:.6rem;border-left:none;border-top:none;}
.tpl12 .b-walkthrough-text h3{font-family:var(--font-heading);font-size:2.35rem;font-weight:800;margin:0 0 1.1rem;color:var(--primary-dark);line-height:1.2;letter-spacing:-.01em;}
.tpl12 .b-walkthrough-text p{font-size:1.48rem;color:var(--text-secondary);line-height:1.72;margin:0 0 1.4rem;}
.tpl12 .b-walkthrough-pills{display:flex;flex-wrap:wrap;gap:.7rem;margin-bottom:1.2rem;}
.tpl12 .b-pill{display:inline-flex;align-items:center;gap:.55rem;background:var(--white);border:1px solid var(--border-light);color:var(--primary-dark);padding:.55rem 1.05rem;font-family:var(--font-body);font-weight:700;font-size:1.12rem;letter-spacing:.02em;border-radius:999px;box-shadow:var(--shadow-xs);}
.tpl12 .b-pill i{color:var(--accent);font-size:.95rem;}

/* DRAWING LEGEND (Portal Features) — footer gradient */
.tpl12 .b-portal{padding:6.5rem clamp(1.6rem,2.5vw,3rem) 6.5rem clamp(1.6rem,2.5vw,3rem);background:linear-gradient(180deg, var(--primary-deeper) 0%, var(--primary-dark) 100%);position:relative;overflow:hidden;border-top:4px solid var(--accent);}
.tpl12 .b-portal::before{content:'';position:absolute;top:4px;left:0;width:10rem;height:2px;background:var(--gold);border-radius:0 2px 2px 0;z-index:2;}
.tpl12 .b-portal::after{content:'';position:absolute;top:-8rem;right:-8rem;width:30rem;height:30rem;border-radius:50%;background:radial-gradient(circle, rgba(var(--accent-rgb),.12) 0%, transparent 65%);pointer-events:none;}
.tpl12 .b-portal .b-head h2{color:var(--white);}
.tpl12 .b-portal .b-head h2 span{color:var(--gold);}
.tpl12 .b-portal .b-head p{color:rgba(255,255,255,.78);}
.tpl12 .b-portal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.8rem;position:relative;z-index:1;}
.tpl12 .b-portal-card{
  border:1px solid rgba(255,255,255,.08);
  padding:2.2rem 1.7rem;background:rgba(255,255,255,.05);
  text-decoration:none;color:var(--white);transition:.3s;position:relative;
  display:flex;flex-direction:column;border-radius:16px;
}
.tpl12 .b-portal-card:hover{transform:translateY(-6px);border-color:rgba(var(--gold-rgb),.38);background:rgba(255,255,255,.08);box-shadow:0 12px 28px rgba(0,0,0,.22);}
.tpl12 .b-portal-num{
  position:absolute;top:.9rem;right:.9rem;
  font-family:var(--font-body);font-weight:800;font-size:.98rem;color:var(--gold);
  border:1px solid rgba(var(--gold-rgb),.32);padding:.25rem .6rem;letter-spacing:.06em;
  background:rgba(255,255,255,.06);border-radius:999px;
}
.tpl12 .b-portal-card > i{font-size:2.35rem;color:var(--gold);margin-bottom:1.1rem;display:block;}
.tpl12 .b-portal-card h4{font-family:var(--font-heading);font-size:1.52rem;font-weight:800;color:var(--white);margin:0 0 .7rem;line-height:1.25;}
.tpl12 .b-portal-card p{color:rgba(255,255,255,.78);font-size:1.28rem;line-height:1.6;margin:0 0 1.2rem;flex:1;}
.tpl12 .b-portal-link{font-family:var(--font-body);font-weight:800;font-size:1.12rem;color:var(--gold);letter-spacing:.04em;display:inline-flex;align-items:center;gap:.4rem;}
.tpl12 .b-portal-card--wide{grid-column:span 4;background:linear-gradient(135deg, rgba(var(--primary-rgb),.45) 0%, rgba(var(--accent-rgb),.18) 100%);border-color:rgba(var(--gold-rgb),.28);}
.tpl12 .b-portal-card--wide h4{font-size:1.9rem;}
.tpl12 .b-portal-card--wide > i{font-size:2.8rem;}

/* COMPLETED PROJECTS (Academic Showcase) — dark band like footer top */
.tpl12 .b-projects{padding:6.5rem clamp(1.6rem,2.5vw,3rem) 6.5rem clamp(1.6rem,2.5vw,3rem);background:linear-gradient(180deg, var(--primary-deeper) 0%, var(--primary-dark) 100%);position:relative;overflow:hidden;border-top:1px solid rgba(255,255,255,.06);}
.tpl12 .b-projects .b-head h2{color:var(--white);}
.tpl12 .b-projects .b-head h2 span{color:var(--gold);}
.tpl12 .b-projects .b-head p{color:rgba(255,255,255,.78);}
.tpl12 .b-projects-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;position:relative;z-index:1;}
.tpl12 .b-project-card{background:var(--white);color:var(--text);text-decoration:none;border:1px solid var(--border-light);overflow:hidden;display:flex;flex-direction:column;transition:.3s;border-radius:16px;box-shadow:var(--shadow-card);}
.tpl12 .b-project-card:hover{transform:translateY(-6px);box-shadow:0 18px 36px rgba(0,0,0,.22);border-color:var(--accent);}
.tpl12 .b-project-visual{position:relative;background:var(--primary-deeper);padding:2rem;min-height:24rem;display:flex;align-items:center;justify-content:center;}
.tpl12 .b-project-visual--book{background:linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-deeper) 100%);}
.tpl12 .b-project-visual--gallery{padding:0;background:var(--white);}
.tpl12 .b-project-body{padding:1.9rem 1.8rem 2.1rem;flex:1;display:flex;flex-direction:column;}
.tpl12 .b-project-tag{display:inline-flex;align-items:center;gap:.5rem;align-self:flex-start;background:var(--primary-mist);color:var(--primary-dark);padding:.4rem .9rem;font-family:var(--font-body);font-size:1rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;margin-bottom:1rem;border-radius:999px;border:1px solid rgba(var(--primary-rgb),.12);}
.tpl12 .b-project-body h4{font-family:var(--font-heading);font-size:1.8rem;font-weight:800;margin:0 0 .8rem;color:var(--primary-dark);}
.tpl12 .b-project-body p{color:var(--text-secondary);font-size:1.32rem;line-height:1.62;margin:0 0 1.2rem;flex:1;}
.tpl12 .b-project-link{font-family:var(--font-body);font-weight:800;font-size:1.15rem;color:var(--accent);letter-spacing:.02em;display:inline-flex;align-items:center;gap:.45rem;}
.tpl12 .b-project-card:hover .b-project-link{color:var(--primary-dark);}

/* MINI DOC (Sample Result) */
.tpl12 .b-mini-doc{width:100%;max-width:25rem;background:var(--white);border:1px solid var(--border-light);padding:1.1rem;border-radius:12px;box-shadow:var(--shadow-sm);}
.tpl12 .b-md-band{display:flex;align-items:center;gap:.6rem;padding-bottom:.6rem;border-bottom:1px solid var(--border);margin-bottom:.6rem;}
.tpl12 .b-md-logo{width:2.4rem;height:2.4rem;background:var(--primary);flex-shrink:0;border-radius:6px;}
.tpl12 .b-md-lines{flex:1;}
.tpl12 .b-md-line{height:6px;background:var(--gray-300);border-radius:999px;margin-bottom:4px;}
.tpl12 .b-md-stamp{width:2.4rem;height:2.4rem;border:1px solid var(--gold);border-radius:50%;background:var(--gold);opacity:.65;flex-shrink:0;}
.tpl12 .b-md-title-strip{height:8px;background:var(--primary);margin-bottom:.8rem;border-radius:999px;}
.tpl12 .b-md-info{display:flex;flex-direction:column;gap:.6rem;margin-bottom:.8rem;}
.tpl12 .b-md-info-row{display:flex;gap:.6rem;}
.tpl12 .b-md-info-row .b-md-line{background:rgba(var(--primary-rgb),.35);}
.tpl12 .b-md-badges{display:flex;gap:.6rem;margin-bottom:.8rem;}
.tpl12 .b-md-badge{padding:.32rem .7rem;font-family:var(--font-body);font-weight:800;font-size:.95rem;border-radius:999px;}
.tpl12 .b-md-badge--gold{background:var(--gold);color:var(--primary-dark);}
.tpl12 .b-md-badge--blue{background:var(--primary);color:var(--white);}
.tpl12 .b-md-table{display:flex;flex-direction:column;gap:.4rem;}
.tpl12 .b-md-row{display:flex;gap:.4rem;align-items:center;}
.tpl12 .b-md-cell{height:.9rem;background:var(--gray-200);border-radius:999px;}
.tpl12 .b-md-cell--label{flex:1;background:var(--gray-300);}
.tpl12 .b-md-cell--total{background:var(--primary);}
.tpl12 .b-md-cell--grade{background:var(--gold);}

/* MINI BOOK (Yearbook) */
.tpl12 .b-mini-book{text-align:center;color:var(--white);padding:2rem;}
.tpl12 .b-mb-label{font-family:var(--font-body);font-size:.98rem;letter-spacing:.16em;text-transform:uppercase;opacity:.88;font-weight:700;}
.tpl12 .b-mb-year{font-family:var(--font-heading);font-size:2.9rem;font-weight:800;letter-spacing:-.03em;margin:.35rem 0;}
.tpl12 .b-mb-title{font-family:var(--font-body);font-size:1.1rem;letter-spacing:.18em;text-transform:uppercase;font-weight:800;}
.tpl12 .b-mb-rule{width:4rem;height:2px;background:var(--gold);margin:1rem auto 0;border-radius:999px;}

/* GALLERY SINGLE */
.tpl12 .b-gallery-single{position:relative;width:100%;height:24rem;overflow:hidden;}
.tpl12 .b-gallery-single img{width:100%;height:100%;object-fit:cover;display:block;}
.tpl12 .b-gallery-cap{position:absolute;left:.9rem;bottom:.9rem;background:rgba(255,255,255,.96);padding:.42rem .9rem;font-family:var(--font-body);font-size:1.05rem;font-weight:800;color:var(--primary-dark);border-radius:999px;box-shadow:0 4px 14px rgba(0,0,0,.12);}
.tpl12 .b-gallery-corner{position:absolute;right:.9rem;bottom:.9rem;width:3.2rem;height:3.2rem;background:var(--accent);color:var(--white);display:flex;align-items:center;justify-content:center;font-size:1.15rem;cursor:pointer;border-radius:50%;box-shadow:0 4px 14px rgba(0,0,0,.18);}

/* TECHNICAL SPECIFICATIONS (Why Us) — colorful tint with gold/primary blobs */
.tpl12 .b-techspecs{
  padding:6.5rem clamp(1.6rem,2.5vw,3rem) 6.5rem clamp(1.6rem,2.5vw,3rem);
  background:
    radial-gradient(ellipse at 14% 16%, rgba(var(--gold-rgb), .09) 0%, transparent 36%),
    radial-gradient(ellipse at 86% 88%, rgba(var(--primary-rgb), .06) 0%, transparent 38%),
    linear-gradient(180deg, var(--white) 0%, color-mix(in srgb, var(--primary-mist) 28%, var(--white)) 100%);
  color:var(--text);position:relative;overflow:hidden;border:1px solid var(--border-light);border-radius:16px;
}
.tpl12 .b-techspecs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.8rem;}
.tpl12 .b-techspec{background:var(--white);border:1px solid var(--border-light);padding:2.4rem 1.8rem 2.2rem;text-align:center;position:relative;transition:.3s;border-radius:16px;box-shadow:var(--shadow-card);}
.tpl12 .b-techspec:hover{transform:translateY(-4px);border-color:rgba(var(--primary-rgb),.18);box-shadow:var(--shadow-hover);}
.tpl12 .b-techspec::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--primary);border-radius:16px 16px 0 0;opacity:.9;}
.tpl12 .b-techspec:nth-child(2)::before{background:var(--accent);}
.tpl12 .b-techspec:nth-child(3)::before{background:var(--gold);}
.tpl12 .b-techspec-num{position:absolute;top:1rem;right:1rem;font-family:var(--font-body);font-weight:800;font-size:.95rem;color:var(--primary-dark);border:1px solid rgba(var(--primary-rgb),.14);padding:.28rem .65rem;letter-spacing:.06em;background:var(--primary-mist);border-radius:999px;}
.tpl12 .b-techspec > i{font-size:2.6rem;color:var(--primary);margin-bottom:1.2rem;display:block;}
.tpl12 .b-techspec h4{font-family:var(--font-heading);font-size:1.58rem;font-weight:800;margin:0 0 .7rem;color:var(--primary-dark);}
.tpl12 .b-techspec p{color:var(--text-secondary);font-size:1.32rem;line-height:1.62;margin:0;}

/* ARCHITECT'S NOTE (Founder) — footer-palette dark */
.tpl12 .b-architect-note{padding:6.5rem clamp(1.6rem,2.5vw,3rem) 6.5rem clamp(1.6rem,2.5vw,3rem);background:linear-gradient(180deg, var(--primary-deeper) 0%, var(--primary-dark) 100%);position:relative;overflow:hidden;border-top:4px solid var(--accent);}
.tpl12 .b-architect-note::before{content:'';position:absolute;top:4px;left:0;width:10rem;height:2px;background:var(--gold);border-radius:0 2px 2px 0;z-index:2;}
.tpl12 .b-architect-note::after{content:'';position:absolute;top:-8rem;right:-6rem;width:30rem;height:30rem;border-radius:50%;background:radial-gradient(circle, rgba(var(--gold-rgb),.10) 0%, transparent 65%);pointer-events:none;}
.tpl12 .b-architect-note .b-head h2{color:var(--white);}
.tpl12 .b-architect-note .b-head p{color:rgba(255,255,255,.78);}
.tpl12 .b-architect-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:3.2rem;align-items:center;position:relative;z-index:1;}
.tpl12 .b-architect-photo{position:relative;border:1px solid rgba(255,255,255,.10);width:26rem;max-width:100%;height:32rem;overflow:hidden;background:var(--primary-deeper);border-radius:16px;box-shadow:0 16px 40px rgba(0,0,0,.28);}
.tpl12 .b-architect-photo img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1.02) brightness(.97);}
.tpl12 .b-architect-initial{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-heading);font-size:8rem;color:var(--gold);font-weight:800;opacity:.9;}
.tpl12 .b-architect-stamp{position:absolute;top:1rem;right:1rem;background:var(--accent);color:var(--white);padding:.4rem .95rem;font-family:var(--font-body);font-size:.95rem;font-weight:800;letter-spacing:.12em;transform:rotate(7deg);z-index:2;border:1px solid rgba(255,255,255,.22);border-radius:999px;box-shadow:0 6px 14px rgba(0,0,0,.18);}
.tpl12 .b-architect-text blockquote{margin:0 0 1.8rem;font-family:var(--font-heading);font-size:1.85rem;color:var(--white);line-height:1.62;font-style:italic;font-weight:500;}
.tpl12 .b-architect-meta{display:flex;flex-direction:column;gap:.4rem;}
.tpl12 .b-architect-meta strong{font-family:var(--font-heading);font-size:1.6rem;color:var(--white);font-weight:800;}
.tpl12 .b-architect-meta span{font-family:var(--font-body);font-size:1.1rem;color:rgba(255,255,255,.74);letter-spacing:.02em;}
.tpl12 .b-architect-stars{color:var(--gold);display:flex;gap:.3rem;margin-top:.5rem;font-size:1.05rem;}

/* PROJECT LOG (News & Events) — colorful with soft gold tint */
.tpl12 .b-log{
  padding:6.5rem clamp(1.6rem,2.5vw,3rem) 6.5rem clamp(1.6rem,2.5vw,3rem);
  background:
    radial-gradient(ellipse at 90% 12%, rgba(var(--gold-rgb), .08) 0%, transparent 34%),
    radial-gradient(ellipse at 10% 85%, rgba(var(--accent-rgb), .06) 0%, transparent 36%),
    linear-gradient(180deg, var(--white) 0%, color-mix(in srgb, var(--primary-mist) 18%, var(--white)) 100%);
  color:var(--text);position:relative;overflow:hidden;border:1px solid var(--border-light);border-radius:16px;
}
.tpl12 .b-log-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;}
.tpl12 .b-log-card{background:var(--white);border:1px solid var(--border-light);text-decoration:none;color:var(--text);overflow:hidden;display:flex;flex-direction:column;transition:.3s;border-radius:16px;box-shadow:var(--shadow-card);}
.tpl12 .b-log-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-hover);border-color:rgba(var(--primary-rgb),.16);}
.tpl12 .b-log-img{position:relative;height:18rem;overflow:hidden;}
.tpl12 .b-log-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .55s;}
.tpl12 .b-log-card:hover .b-log-img img{transform:scale(1.05);}
.tpl12 .b-log-date{position:absolute;top:1rem;left:1rem;background:var(--accent);color:var(--white);padding:.5rem .85rem;text-align:center;font-family:var(--font-body);font-weight:800;line-height:1;z-index:2;border-radius:10px;box-shadow:0 4px 14px rgba(0,0,0,.18);}
.tpl12 .b-log-date strong{display:block;font-size:1.7rem;}
.tpl12 .b-log-date span{display:block;font-size:.92rem;letter-spacing:.06em;text-transform:uppercase;margin-top:.15rem;font-weight:700;}
.tpl12 .b-log-body{padding:1.8rem 1.8rem 2rem;flex:1;display:flex;flex-direction:column;}
.tpl12 .b-log-tag{display:inline-flex;align-items:center;gap:.4rem;align-self:flex-start;background:rgba(var(--accent-rgb),.12);color:var(--accent-dark);padding:.35rem .85rem;font-family:var(--font-body);font-size:.98rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;margin-bottom:.8rem;border-radius:999px;}
.tpl12 .b-log-body h4{font-family:var(--font-heading);font-size:1.62rem;font-weight:800;margin:0 0 .7rem;color:var(--primary-dark);line-height:1.28;}
.tpl12 .b-log-body p{color:var(--text-secondary);font-size:1.32rem;line-height:1.6;margin:0 0 1.2rem;flex:1;}
.tpl12 .b-log-link{font-family:var(--font-body);font-weight:800;font-size:1.12rem;color:var(--primary);letter-spacing:.02em;display:inline-flex;align-items:center;gap:.4rem;}
.tpl12 .b-log-card:hover .b-log-link{color:var(--accent);}

/* FINAL CTA — footer Top clone with breathe */
.tpl12 .b-final-cta{
  padding:6.5rem clamp(1.6rem,2.5vw,3rem) 5.5rem clamp(1.6rem,2.5vw,3rem);
  text-align:center;
  background:linear-gradient(180deg, var(--primary-deeper) 0%, var(--primary-dark) 100%);
  color:var(--white);position:relative;overflow:hidden;
  border-top:4px solid var(--accent);
}
.tpl12 .b-final-cta::before{content:'';position:absolute;top:4px;left:0;width:10rem;height:2px;background:var(--gold);border-radius:0 2px 2px 0;z-index:2;}
.tpl12 .b-final-cta::after{content:'';position:absolute;top:-10rem;right:-8rem;width:34rem;height:34rem;border-radius:50%;background:radial-gradient(circle, var(--primary-light) 0%, transparent 65%);opacity:.14;pointer-events:none;z-index:0;}
.tpl12 .b-final-cta > *{position:relative;z-index:1;}
.tpl12 .b-final-cta .b-hero-tag{margin:0 auto 1.8rem;}
.tpl12 .b-final-cta h3{font-family:var(--font-heading);color:var(--white);font-size:clamp(2.3rem,3.4vw,3.3rem);font-weight:800;margin:0 auto 1.2rem;line-height:1.18;max-width:62rem;}
.tpl12 .b-final-cta p{color:rgba(255,255,255,.78);font-size:1.48rem;max-width:58rem;margin:0 auto 2.2rem;line-height:1.68;}
.tpl12 .b-final-cta-stats{display:flex;justify-content:center;gap:1.4rem;margin:0 auto 2.2rem;flex-wrap:wrap;max-width:62rem;}
.tpl12 .b-final-cta-stats > div{text-align:center;padding:.85rem 1.4rem;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(255,255,255,.05);min-width:12rem;}
.tpl12 .b-final-cta-stats strong{display:block;font-family:var(--font-heading);font-size:2.1rem;color:var(--white);font-weight:800;line-height:1;}
.tpl12 .b-final-cta-stats span{font-family:var(--font-body);font-size:1rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.70);font-weight:700;margin-top:.35rem;display:block;}
.tpl12 .b-final-cta-actions{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap;margin-bottom:2rem;}
.tpl12 .b-final-cta-form{
  max-width:52rem;margin:0 auto;
  background:var(--white);border:2px solid rgba(255,255,255,.14);
  border-radius:999px;padding:.55rem;display:flex;gap:.5rem;
  box-shadow:0 16px 40px rgba(0,0,0,.28);
}
.tpl12 .b-final-cta-form input[type=email]{flex:1;border:none!important;background:transparent!important;box-shadow:none!important;padding:1.1rem 1.6rem!important;font-size:1.42rem;outline:none;color:var(--gray-900);font-family:var(--font-body);min-width:0;}
.tpl12 .b-final-cta-form input[type=email]::placeholder{color:var(--gray-500);}
.tpl12 .b-final-cta-form button{white-space:nowrap;border-radius:999px;}
.tpl12 .b-final-cta-foot{margin-top:1.2rem;font-size:1.15rem;color:rgba(255,255,255,.68);letter-spacing:.02em;}

/* VIDEO LIGHTBOX (injected by JS) — footer-palette */
.tpl12 .b-video-lightbox{position:fixed;inset:0;background:rgba(var(--primary-deeper-rgb),.88);z-index:99999;display:flex;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
.tpl12 .b-video-lightbox-inner{position:relative;width:100%;max-width:960px;aspect-ratio:16/9;background:var(--gray-900);border-radius:16px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.45);border:2px solid rgba(var(--gold-rgb),.32);}
.tpl12 .b-video-lightbox-inner iframe{width:100%;height:100%;border:0;display:block;}
.tpl12 .b-video-lightbox-close{position:absolute;top:12px;right:12px;z-index:2;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18);color:var(--white);font-size:18px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .2s;}
.tpl12 .b-video-lightbox-close:hover{background:rgba(255,255,255,.22);}

/* =====================================================
   RESPONSIVE — TABLET (≤991px)
   Tightened vertical rhythm + 2-col where 1-col would tower.
   ===================================================== */
@media(max-width:991px){
  .tpl12 .b-hero{padding:4.8rem clamp(1.4rem,2.5vw,2.4rem) 3.8rem clamp(1.4rem,2.5vw,2.4rem);}
  .tpl12 .b-hero-grid{grid-template-columns:1fr;gap:2.2rem;}
  .tpl12 .b-drawing{padding:1.2rem 1rem;}
  .tpl12 .b-drawing-frame img{height:26rem;}
  .tpl12 .b-specs{padding:2.2rem clamp(1.4rem,2.5vw,2.4rem);}
  .tpl12 .b-specs-grid{grid-template-columns:repeat(2,1fr);gap:0;}
  .tpl12 .b-spec:nth-child(3){border-left:none;border-top:1px solid rgba(255,255,255,.08);}
  .tpl12 .b-spec:nth-child(4){border-top:1px solid rgba(255,255,255,.08);}
  .tpl12 .b-levels,
  .tpl12 .b-brief,
  .tpl12 .b-notes-section,
  .tpl12 .b-materials,
  .tpl12 .b-walkthrough,
  .tpl12 .b-portal,
  .tpl12 .b-projects,
  .tpl12 .b-techspecs,
  .tpl12 .b-architect-note,
  .tpl12 .b-log,
  .tpl12 .b-final-cta{padding:3.8rem clamp(1.4rem,2.5vw,2.4rem);}
  /* First principle: on tablet keep density — 2 cols halves scroll vs 1-col tower */
  .tpl12 .b-plan-grid{grid-template-columns:repeat(2,1fr);gap:1.6rem;}
  .tpl12 .b-brief-grid{grid-template-columns:1fr;gap:1.6rem;}
  .tpl12 .b-materials-grid{grid-template-columns:repeat(2,1fr);gap:1.4rem;}
  .tpl12 .b-walkthrough-grid{grid-template-columns:1fr;gap:1.8rem;}
  .tpl12 .b-projects-grid{grid-template-columns:repeat(2,1fr);gap:1.6rem;}
  .tpl12 .b-techspecs-grid{grid-template-columns:repeat(2,1fr);gap:1.4rem;}
  .tpl12 .b-architect-grid{grid-template-columns:1fr;gap:1.8rem;}
  .tpl12 .b-log-grid{grid-template-columns:repeat(2,1fr);gap:1.6rem;}
  .tpl12 .b-portal-grid{grid-template-columns:repeat(2,1fr);gap:1.4rem;}
  .tpl12 .b-portal-card--wide{grid-column:span 2;}
  .tpl12 .b-architect-photo{width:100%;max-width:30rem;height:30rem;margin:0 auto;}
  .tpl12 .b-dim-side{display:none;}
  .tpl12 .b-final-cta-form{border-radius:20px;flex-direction:column;padding:.8rem;}
  .tpl12 .b-final-cta-form input[type=email]{border:1px solid var(--border-light)!important;border-radius:999px!important;padding:1rem 1.4rem!important;}
  .tpl12 .b-notes-card{flex:0 0 calc((100% - 2rem) / 2);}
  .tpl12 .b-hero-cta{justify-content:flex-start;gap:.8rem;}
  .tpl12 .b-hero-trust{justify-content:flex-start;gap:.8rem;}
  .tpl12 .b-video-frame img{height:26rem;}
  .tpl12 .b-head{margin-bottom:2.4rem;}
  .tpl12 .b-head h2{font-size:clamp(2.4rem,3.6vw,3.2rem);}
  .tpl12 .b-container{padding:0 1.6rem;}
}

/* =====================================================
   RESPONSIVE — MOBILE (≤600px)
   First principle: avoid N-row vertical towers. Where desktop
   uses 3-4 columns, mobile converts to horizontal snap (1 row
   tall, swipeable) and compact 2×2 where cells are tiny.
   Also trims padding/font/image height to cut scroll 30-40%.
   ===================================================== */
@media(max-width:600px){
  .tpl12 .b-container{padding:0 clamp(1rem,4vw,1.4rem);}
  .tpl12 .b-hero{padding:3.2rem clamp(1.2rem,4vw,1.6rem) 2.8rem clamp(1.2rem,4vw,1.6rem);}
  .tpl12 .b-hero-content p{font-size:1.38rem;line-height:1.62;margin-bottom:1.6rem;}
  .tpl12 .b-hero-content h1{margin-bottom:.8rem;font-size:clamp(2.5rem,7.5vw,3.2rem);line-height:1.05;}
  .tpl12 .b-hero-tag{font-size:.9rem;padding:.4rem .9rem;margin-bottom:1.2rem;}
  .tpl12 .b-drawing{padding:.8rem;}
  .tpl12 .b-drawing-frame{border-radius:12px;}
  .tpl12 .b-drawing-frame img{height:19rem;}
  .tpl12 .b-dim-top span{font-size:.85rem;padding:0 .6rem;}
  .tpl12 .b-corner{width:1rem;height:1rem;}
  .tpl12 .b-label{font-size:.9rem;padding:.4rem .8rem;}
  .tpl12 .b-coord{font-size:.82rem;padding:.22rem .5rem;}
  .tpl12 .b-specs{padding:1.6rem clamp(1.2rem,4vw,1.6rem);}
  .tpl12 .b-specs-grid{grid-template-columns:repeat(2,1fr);gap:0;}
  .tpl12 .b-spec{border-left:1px solid rgba(255,255,255,.08)!important;border-top:none!important;padding:1rem .6rem;}
  .tpl12 .b-spec:nth-child(2n+1){border-left:none!important;}
  .tpl12 .b-spec:nth-child(n+3){border-top:1px solid rgba(255,255,255,.08)!important;}
  .tpl12 .b-spec strong{font-size:1.95rem;}
  .tpl12 .b-spec span{font-size:.98rem;margin-top:.35rem;}
  .tpl12 .b-levels,
  .tpl12 .b-brief,
  .tpl12 .b-notes-section,
  .tpl12 .b-materials,
  .tpl12 .b-walkthrough,
  .tpl12 .b-portal,
  .tpl12 .b-projects,
  .tpl12 .b-techspecs,
  .tpl12 .b-architect-note,
  .tpl12 .b-log,
  .tpl12 .b-final-cta{padding:2.8rem clamp(1.2rem,4vw,1.6rem);}
  /* --- Horizontal snap for card-dense sections: 1 row tall instead of N rows --- */
  .tpl12 .b-plan-grid,
  .tpl12 .b-materials-grid,
  .tpl12 .b-portal-grid,
  .tpl12 .b-projects-grid,
  .tpl12 .b-techspecs-grid,
  .tpl12 .b-log-grid{
    display:flex;
    overflow-x:auto;
    overflow-y:hidden;
    gap:1.2rem;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding:0 clamp(1.2rem,4vw,1.6rem) 1rem;
    margin:0 calc(-1 * clamp(1.2rem,4vw,1.6rem));
    scroll-padding-inline:clamp(1.2rem,4vw,1.6rem);
  }
  .tpl12 .b-plan-grid::-webkit-scrollbar,
  .tpl12 .b-materials-grid::-webkit-scrollbar,
  .tpl12 .b-portal-grid::-webkit-scrollbar,
  .tpl12 .b-projects-grid::-webkit-scrollbar,
  .tpl12 .b-techspecs-grid::-webkit-scrollbar,
  .tpl12 .b-log-grid::-webkit-scrollbar{display:none;}
  .tpl12 .b-plan-card,
  .tpl12 .b-material,
  .tpl12 .b-portal-card,
  .tpl12 .b-project-card,
  .tpl12 .b-techspec,
  .tpl12 .b-log-card{
    flex:0 0 82%;
    max-width:82%;
    scroll-snap-align:start;
    scroll-snap-stop:always;
  }
  .tpl12 .b-project-card{min-width:0;}
  .tpl12 .b-portal-card--wide{grid-column:auto;flex:0 0 82%;max-width:82%;}
  .tpl12 .b-portal-card{padding:1.6rem 1.35rem;}
  .tpl12 .b-notes-card{flex:0 0 86%;}
  .tpl12 .b-notes-track{gap:1.1rem;padding:0 clamp(1.2rem,4vw,1.6rem) 0 0;margin-right:calc(-1 * clamp(1.2rem,4vw,1.6rem));}
  .tpl12 .b-brief-grid{grid-template-columns:1fr;gap:1.2rem;}
  .tpl12 .b-walkthrough-grid{grid-template-columns:1fr;gap:1.6rem;}
  .tpl12 .b-architect-grid{grid-template-columns:1fr;gap:1.6rem;}
  /* Compact & aligned hero trust + CTAs — first-principle: keep twin buttons & 3 trust pills side-by-side on mobile (like desktop) */
  .tpl12 .b-hero-trust{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;}
  .tpl12 .b-trust-item{flex-direction:column;align-items:center;text-align:center;padding:.6rem .35rem;gap:.35rem;justify-content:center;min-width:0;}
  .tpl12 .b-hero-trust .b-trust-item i{width:2.8rem;height:2.8rem;font-size:1.05rem;}
  .tpl12 .b-trust-item strong{font-size:1.08rem;line-height:1.15;}
  .tpl12 .b-trust-item span{font-size:.8rem;line-height:1.25;}
  .tpl12 .b-hero-cta{display:flex;flex-direction:row;flex-wrap:nowrap;gap:.6rem;}
  .tpl12 .b-hero-cta .b-btn{flex:1 1 0;min-width:0;width:auto;padding:.9rem .6rem;font-size:1.02rem;justify-content:center;white-space:nowrap;gap:.4rem;}
  .tpl12 .b-final-cta-actions{display:flex;flex-direction:row;flex-wrap:nowrap;gap:.6rem;justify-content:center;}
  .tpl12 .b-final-cta-actions .b-btn{flex:1 1 0;min-width:0;width:auto;padding:.9rem .6rem;font-size:1.02rem;justify-content:center;white-space:nowrap;gap:.4rem;}
  /* First-principle fallback: any twin-button row must stay side-by-side */
  .tpl12 .b-hero-cta, .tpl12 .b-final-cta-actions{flex-direction:row !important;flex-wrap:nowrap !important;}
  .tpl12 .b-final-cta-stats{gap:.6rem;}
  .tpl12 .b-final-cta-stats > div{padding:.6rem .7rem;min-width:0;flex:1 1 0;}
  .tpl12 .b-final-cta-stats strong{font-size:1.65rem;}
  .tpl12 .b-final-cta-stats span{font-size:.88rem;}
  .tpl12 .b-plan-body{padding:1.6rem 1.2rem 1.6rem;}
  .tpl12 .b-plan-body > i{font-size:2.4rem;margin-bottom:1rem;}
  .tpl12 .b-plan-body h4{font-size:1.7rem;}
  .tpl12 .b-plan-body p{font-size:1.28rem;line-height:1.58;margin-bottom:1rem;}
  .tpl12 .b-brief-card{padding:1.6rem 1.25rem;}
  .tpl12 .b-brief-card h3{font-size:1.62rem;gap:.8rem;}
  .tpl12 .b-brief-card h3 i{width:3.4rem;height:3.4rem;font-size:1.35rem;}
  .tpl12 .b-brief-card p{font-size:1.32rem;}
  .tpl12 .b-brief-card ul li{font-size:1.26rem;padding:.65rem 0 .65rem 2.4rem;}
  .tpl12 .b-techspec{padding:1.6rem 1.15rem;text-align:left;}
  .tpl12 .b-techspec > i{font-size:2.15rem;margin-bottom:.9rem;}
  .tpl12 .b-techspec h4{font-size:1.42rem;}
  .tpl12 .b-techspec p{font-size:1.22rem;}
  .tpl12 .b-project-body{padding:1.25rem 1.2rem 1.5rem;}
  .tpl12 .b-project-body h4{font-size:1.55rem;}
  .tpl12 .b-project-body p{font-size:1.24rem;line-height:1.55;}
  .tpl12 .b-project-visual{min-height:17rem;padding:1rem;}
  .tpl12 .b-mini-doc{max-width:22rem;padding:.9rem;}
  .tpl12 .b-gallery-single{height:17rem;}
  .tpl12 .b-log-body{padding:1.25rem 1.2rem 1.4rem;}
  .tpl12 .b-log-img{height:15rem;}
  .tpl12 .b-log-body h4{font-size:1.42rem;}
  .tpl12 .b-log-body p{font-size:1.2rem;}
  .tpl12 .b-walkthrough-text h3{font-size:1.75rem;}
  .tpl12 .b-walkthrough-text p{font-size:1.32rem;line-height:1.62;}
  .tpl12 .b-pill{font-size:1rem;padding:.45rem .85rem;}
  .tpl12 .b-architect-photo{height:24rem;max-width:100%;}
  .tpl12 .b-architect-text blockquote{font-size:1.42rem;line-height:1.55;}
  .tpl12 .b-notes-arrow{width:3.6rem;height:3.6rem;font-size:1rem;}
  .tpl12 .b-video-frame img{height:19rem;}
  .tpl12 .b-video-play i{width:4.8rem;height:4.8rem;font-size:2rem;}
  .tpl12 .b-head{margin-bottom:1.8rem;padding:0;}
  .tpl12 .b-head h2{font-size:clamp(2rem,6vw,2.5rem);line-height:1.1;margin:.6rem 0 .6rem;}
  .tpl12 .b-head p{font-size:1.28rem;line-height:1.58;}
  .tpl12 .b-final-cta h3{font-size:clamp(2rem,6vw,2.6rem);}
  .tpl12 .b-final-cta p{font-size:1.28rem;margin-bottom:1.5rem;}
  .tpl12 .b-final-cta-form{padding:.6rem;}
}
@media(max-width:400px){
  .tpl12 .b-hero-cta{gap:.45rem;}
  .tpl12 .b-hero-cta .b-btn{padding:.8rem .45rem;font-size:.92rem;gap:.35rem;}
  .tpl12 .b-final-cta-actions{gap:.45rem;}
  .tpl12 .b-final-cta-actions .b-btn{padding:.8rem .45rem;font-size:.92rem;gap:.35rem;}
  .tpl12 .b-hero-trust{gap:.35rem;}
  .tpl12 .b-trust-item{padding:.5rem .2rem;}
  .tpl12 .b-hero-trust .b-trust-item i{width:2.4rem;height:2.4rem;font-size:.95rem;}
  .tpl12 .b-trust-item strong{font-size:.96rem;}
  .tpl12 .b-trust-item span{font-size:.74rem;}
}

/* =====================================================
   TEMPLATE 13 — "BROADSHEET"  [PREMIUM — newspaper as art]
   Heritage newspaper meets modern editorial craft.
   Masthead with engraved rules, story-first hero, and a
   calm paper field that stays beautiful at every breakpoint.
   100% theme-driven via --primary / --accent / --gold tokens
   from stylenew.css — one admin palette recolours everything.
   ===================================================== */
.tpl13{
  --n-ink:            var(--primary-deeper);
  --n-ink-2:          var(--text);
  --n-ink-3:          var(--text-secondary);
  --n-ink-mute:       var(--text-muted);
  --n-red:            var(--accent);
  --n-red-dark:       var(--accent-dark);
  --n-paper:          var(--primary-mist);
  --n-paper-2:        color-mix(in srgb, var(--primary-mist) 78%, #ffffff);
  --n-paper-3:        color-mix(in srgb, var(--primary-mist) 50%, #ffffff);
  --n-rule:           var(--primary-deeper);
  --n-rule-soft:      rgba(var(--gold-rgb), .28);
  --n-rule-line:      color-mix(in srgb, var(--primary) 14%, var(--primary-mist));
  --n-amber:          var(--gold);
  --n-amber-soft:     color-mix(in srgb, var(--gold) 24%, #ffffff);
  --n-amber-glow:     rgba(var(--gold-rgb), .18);
  --n-on-dark:        var(--white);
  --n-on-dark-soft:   rgba(255,255,255,.82);
  --n-on-dark-mute:   rgba(255,255,255,.62);
  --n-on-dark-faint:  rgba(255,255,255,.48);
  --n-ease:           cubic-bezier(.22,.8,.22,1);
  --n-ease-bounce:    cubic-bezier(.34,1.56,.64,1);
  --n-shadow-sm:      0 4px 14px rgba(var(--primary-deeper-rgb),.06);
  --n-shadow:         0 10px 28px rgba(var(--primary-deeper-rgb),.08);
  --n-shadow-hover:   0 18px 40px rgba(var(--primary-deeper-rgb),.14);
  --n-shadow-card:    var(--shadow-card, 0 8px 22px rgba(var(--primary-deeper-rgb),.06));
  --n-radius:        16px;
  --n-radius-sm:     10px;
  font-family:'Trirong','Playfair Display',Georgia,serif;
  color:var(--n-ink);
  background:
    radial-gradient(ellipse 900px 420px at 12% -6%, rgba(var(--gold-rgb),.065) 0%, transparent 62%),
    radial-gradient(ellipse 800px 380px at 92% 0%, rgba(var(--accent-rgb),.05) 0%, transparent 60%),
    var(--n-paper);
  overflow-x:clip;
  overflow-y:visible;
  max-width:100%;
  position:relative;
}
.tpl13 *{box-sizing:border-box;}
.tpl13 img{max-width:100%;display:block;}
.tpl13 a{color:inherit;text-decoration:none;}
.tpl13 .n-container{max-width:1200px;margin:0 auto;padding:0 clamp(1rem,1.8vw,1.6rem);position:relative;z-index:1;}
.tpl13 section{scroll-margin-top:8rem;}
/* subtle paper grain — ultra faint, never distracts */
.tpl13::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.22;
  background-image:
    radial-gradient(circle, rgba(var(--primary-rgb),.04) 1px, transparent 1.4px),
    linear-gradient(rgba(var(--primary-rgb),.015) 1px, transparent 1px);
  background-size:22px 22px, 100% 28px;
  mask-image:radial-gradient(ellipse 85% 70% at 50% 0%, #000 55%, transparent 90%);
  -webkit-mask-image:radial-gradient(ellipse 85% 70% at 50% 0%, #000 55%, transparent 90%);
}
/* reveal — like tpl8, used selectively */
.tpl13 .n-reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--n-ease), transform .7s var(--n-ease);}
.tpl13 .n-reveal.is-in{opacity:1;transform:none;}
.tpl13 .n-reveal[data-delay='1']{transition-delay:.08s;}
.tpl13 .n-reveal[data-delay='2']{transition-delay:.16s;}
.tpl13 .n-reveal[data-delay='3']{transition-delay:.24s;}

/* ═══ BREAKING TICKER ═══ */
.tpl13 .n-ticker{
  background:var(--n-ink);
  color:var(--n-on-dark);
  display:flex;align-items:stretch;
  border-top:3px solid var(--n-amber);
  border-bottom:3px solid var(--n-amber);
  overflow:hidden;
  font-family:var(--font-body);
  position:relative;
  z-index:5;
}
.tpl13 .n-ticker::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  pointer-events:none;
}
.tpl13 .n-ticker-label{
  flex:0 0 auto;
  background:var(--n-red);
  color:var(--white);
  font-weight:800;font-size:1.08rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.85rem 1.5rem;
  display:inline-flex;align-items:center;gap:.55rem;
  border-right:2px solid var(--n-amber);
  z-index:2;
  box-shadow:4px 0 12px rgba(0,0,0,.12);
}
.tpl13 .n-ticker-label i{font-size:.9rem;animation:nPulse 1.4s infinite;}
.tpl13 .n-ticker-track{
  display:flex;gap:2.4rem;
  white-space:nowrap;
  align-items:center;
  padding:0 1.6rem;
  animation:nScroll 38s linear infinite;
  flex:1 1 auto;
  overflow:hidden;
}
.tpl13 .n-ticker-track span{
  display:inline-flex;align-items:center;
  font-size:1.16rem;font-weight:600;letter-spacing:.04em;
  opacity:.95;
}
.tpl13 .n-ticker-dot{
  display:inline-block;width:.5rem;height:.5rem;border-radius:50%;
  background:var(--n-amber);margin-left:2.4rem;
  box-shadow:0 0 0 4px rgba(var(--gold-rgb),.14);
}
@keyframes nScroll{0%{transform:translateX(0);}100%{transform:translateX(-50%);}}
@keyframes nPulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.45;transform:scale(.78);}}

/* ═══ MASTHEAD — DEEP PREMIUM (heritage-faith calibre, broadsheet voice) ═══ */
.tpl13 .n-masthead{
  background:
    radial-gradient(ellipse 760px 420px at 16% 10%, rgba(var(--gold-rgb),.13) 0%, transparent 58%),
    radial-gradient(ellipse 600px 360px at 88% 88%, rgba(var(--accent-rgb),.10) 0%, transparent 62%),
    linear-gradient(165deg, var(--primary-deeper) 0%, var(--primary-dark) 56%, var(--primary-deeper) 100%);
  color:var(--white);
  padding:2.2rem clamp(1.6rem,2.5vw,3rem) 1.9rem clamp(1.6rem,2.5vw,3rem);
  position:relative;overflow:hidden;
  border-top:4px solid var(--accent);
  border-bottom:1px solid rgba(255,255,255,.12);
  isolation:isolate;
}
.tpl13 .n-masthead::before{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.85;z-index:0;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.045) 1.05px, transparent 1.6px),
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:22px 22px, 100% 28px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 0%, #000 58%, transparent 90%);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 0%, #000 58%, transparent 90%);
}
.tpl13 .n-masthead::after{
  content:'\2666  \00a0  ESTD  \00a0 \2666';
  position:absolute;bottom:-.62rem;left:50%;transform:translateX(-50%);
  background:var(--primary-deeper);
  padding:0 .9rem;
  font-size:.78rem;letter-spacing:.22em;font-weight:800;color:var(--gold);
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  line-height:1.9;
  z-index:2;
  box-shadow:0 4px 12px rgba(0,0,0,.18);
}
.tpl13 .n-masthead .n-container{position:relative;z-index:1;}
.tpl13 .n-masthead-top{
  display:flex;justify-content:space-between;align-items:center;
  font-family:var(--font-body);
  font-size:1.06rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding-bottom:.95rem;
  border-bottom:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.78);
  position:relative;z-index:1;
}
.tpl13 .n-masthead-top span:nth-child(2){opacity:1;color:var(--gold);font-weight:700;background:rgba(255,255,255,.08);padding:.2rem .65rem;border-radius:999px;border:1px solid rgba(255,255,255,.12);}
.tpl13 .n-nameplate{
  font-family:'Playfair Display','Trirong',Georgia,serif;
  font-size:clamp(3.4rem,7.6vw,6.8rem);
  font-weight:900;
  letter-spacing:-.03em;
  line-height:.92;
  margin:1.35rem 0 .5rem;
  color:var(--white);
  text-align:center;
  text-wrap:balance;
  text-shadow:0 8px 28px rgba(0,0,0,.22);
  position:relative;z-index:1;
}
.tpl13 .n-motto{
  text-align:center;
  font-style:italic;
  font-size:1.42rem;
  color:rgba(255,255,255,.84);
  margin-bottom:1.15rem;
  font-family:'Playfair Display','Trirong',Georgia,serif;
  position:relative;z-index:1;
  text-shadow:0 2px 10px rgba(0,0,0,.12);
}
.tpl13 .n-masthead-rule{
  border-top:1px solid rgba(255,255,255,.16);
  margin:1.25rem 0 0;
  position:relative;z-index:1;
}
.tpl13 .n-masthead-rule::after{
  content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:7rem;height:2px;background:var(--gold);opacity:.95;border-radius:999px;
  box-shadow:0 0 10px rgba(var(--gold-rgb),.22);
}

/* ornamental corners — heritage-faith inspired, thin gold L */
.tpl13 .n-corner{position:absolute;width:90px;height:90px;pointer-events:none;z-index:2;opacity:.52;}
.tpl13 .n-corner::before,.tpl13 .n-corner::after{content:'';position:absolute;background:var(--gold);border-radius:1px;}
.tpl13 .n-corner::before{width:1.5px;height:100%;}
.tpl13 .n-corner::after{height:1.5px;width:100%;}
.tpl13 .n-corner--tl{top:12px;left:12px;}
.tpl13 .n-corner--tl::before{top:0;left:0;}
.tpl13 .n-corner--tl::after{top:0;left:0;}
.tpl13 .n-corner--tr{top:12px;right:12px;}
.tpl13 .n-corner--tr::before{top:0;right:0;}
.tpl13 .n-corner--tr::after{top:0;right:0;}
.tpl13 .n-corner--bl{bottom:12px;left:12px;}
.tpl13 .n-corner--bl::before{bottom:0;left:0;}
.tpl13 .n-corner--bl::after{bottom:0;left:0;}
.tpl13 .n-corner--br{bottom:12px;right:12px;}
.tpl13 .n-corner--br::before{bottom:0;right:0;}
.tpl13 .n-corner--br::after{bottom:0;right:0;}

/* faint twinkle stars — like tpl8, theme-driven */
.tpl13 .n-hero-stars{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0;}
.tpl13 .n-hero-stars span{position:absolute;width:6px;height:6px;background:var(--gold);opacity:.28;clip-path:polygon(50% 0,61% 35%,100% 50%,61% 65%,50% 100%,39% 65%,0 50%,39% 35%);}
.tpl13 .n-hero-stars span:nth-child(1){top:8%;left:6%;animation:t8Twinkle 4s ease-in-out infinite;}
.tpl13 .n-hero-stars span:nth-child(2){top:14%;right:12%;width:8px;height:8px;animation:t8Twinkle 5s ease-in-out infinite .5s;}
.tpl13 .n-hero-stars span:nth-child(3){top:28%;left:12%;width:4px;height:4px;animation:t8Twinkle 3.5s ease-in-out infinite 1s;}
.tpl13 .n-hero-stars span:nth-child(4){top:40%;right:7%;animation:t8Twinkle 4.5s ease-in-out infinite 1.5s;}
.tpl13 .n-hero-stars span:nth-child(5){top:54%;left:8%;width:4px;height:4px;animation:t8Twinkle 3s ease-in-out infinite .8s;}
.tpl13 .n-hero-stars span:nth-child(6){top:60%;right:16%;width:8px;height:8px;animation:t8Twinkle 5.5s ease-in-out infinite 1.2s;}
.tpl13 .n-hero-stars span:nth-child(7){top:72%;left:16%;animation:t8Twinkle 4.2s ease-in-out infinite .3s;}
.tpl13 .n-hero-stars span:nth-child(8){top:76%;right:8%;width:4px;height:4px;animation:t8Twinkle 3.8s ease-in-out infinite 1.7s;}
.tpl13 .n-hero-stars span:nth-child(9){top:86%;left:46%;width:8px;height:8px;animation:t8Twinkle 4.8s ease-in-out infinite .9s;}
.tpl13 .n-hero-stars span:nth-child(10){top:18%;left:48%;width:4px;height:4px;animation:t8Twinkle 3.2s ease-in-out infinite 1.4s;}
.tpl13 .n-hero-stars--hero span{opacity:.22;}

/* ═══ HERO — DEEP PREMIUM (same ink as masthead, continuous) ═══ */
.tpl13 .n-hero{
  padding:3.6rem clamp(1.6rem,2.5vw,3rem) 4.2rem clamp(1.6rem,2.5vw,3rem);
  background:
    radial-gradient(ellipse 820px 420px at 14% 14%, rgba(var(--gold-rgb),.13) 0%, transparent 58%),
    radial-gradient(ellipse 700px 380px at 88% 84%, rgba(var(--accent-rgb),.10) 0%, transparent 60%),
    radial-gradient(ellipse 900px 500px at 50% 102%, rgba(var(--primary-light-rgb),.09) 0%, transparent 65%),
    linear-gradient(165deg, var(--primary-deeper) 0%, var(--primary-dark) 52%, var(--primary-deeper) 100%);
  color:var(--white);
  position:relative;
  overflow:hidden;
  isolation:isolate;
  border-top:1px solid rgba(255,255,255,.08);
}
.tpl13 .n-hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.85;z-index:0;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.045) 1.05px, transparent 1.6px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:26px 26px, 56px 56px;
  mask-image:radial-gradient(ellipse 78% 68% at 50% 38%, #000 58%, transparent 88%);
  -webkit-mask-image:radial-gradient(ellipse 78% 68% at 50% 38%, #000 58%, transparent 88%);
}
.tpl13 .n-hero::after{
  content:'';position:absolute;left:0;right:0;bottom:-1px;height:22px;pointer-events:none;z-index:1;
  background:
    radial-gradient(ellipse 22px 18px at 22px 0, transparent 19px, var(--primary-mist) 20px 22px, transparent 23px) repeat-x left top / 44px 22px;
  opacity:1;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.08));
  max-width:100%;
  overflow:hidden;
}
.tpl13 .n-hero + .n-rule{display:none;}
.tpl13 .n-hero-grid{
  display:grid;grid-template-columns:1.05fr .95fr;gap:3.8rem;align-items:start;
  position:relative;z-index:1;
}
.tpl13 .n-hero-grid{position:relative;z-index:1;}
.tpl13 .n-eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--font-body);
  font-size:1.08rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--white);
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.16);
  padding:.42rem .85rem;
  border-radius:999px;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.tpl13 .n-eyebrow .fa-circle{font-size:.62rem;color:var(--gold);animation:nPulse 1.6s ease-in-out infinite;}
.tpl13 .n-headline{
  font-family:'Playfair Display','Trirong',Georgia,serif;
  font-size:clamp(2.75rem,4.6vw,4.45rem);
  font-weight:800;line-height:1.02;
  margin:.95rem 0 1.15rem;
  color:var(--white);
  letter-spacing:-.02em;
  text-wrap:balance;
  text-shadow:0 8px 28px rgba(0,0,0,.18);
}
.tpl13 .n-headline::after{
  content:'';display:block;width:4.6rem;height:3px;border-radius:999px;margin-top:.9rem;
  background:linear-gradient(90deg, var(--gold) 0%, var(--accent) 100%);
  opacity:1;
  box-shadow:0 2px 10px rgba(var(--gold-rgb),.18);
}
.tpl13 .n-dek{
  font-family:var(--font-body);
  font-size:1.48rem;line-height:1.75;
  color:rgba(255,255,255,.84);
  margin:0 0 1.7rem;
  max-width:52rem;
}
.tpl13 .n-byline{
  display:flex;align-items:center;gap:1rem;
  font-family:var(--font-body);
  font-size:1.15rem;
  margin-bottom:1.6rem;
  padding-bottom:1.2rem;
  border-bottom:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.72);
}
.tpl13 .n-byline-avatar{
  width:3.5rem;height:3.5rem;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--white);color:var(--primary-deeper);
  font-weight:800;font-size:1.35rem;flex-shrink:0;
  font-family:'Playfair Display',serif;
  border:2px solid var(--gold);
  box-shadow:0 6px 14px rgba(0,0,0,.18);
}
.tpl13 .n-byline-meta strong{color:var(--white);font-weight:800;}
.tpl13 .n-hero-cta{display:flex;flex-wrap:wrap;gap:.9rem;margin-bottom:1.9rem;}
.tpl13 .n-btn{
  display:inline-flex;align-items:center;gap:.65rem;
  padding:1.05rem 1.95rem;
  font-family:var(--font-body);
  font-weight:800;font-size:1.22rem;
  letter-spacing:.03em;text-decoration:none;
  border:2px solid rgba(255,255,255,.72);
  color:var(--white);background:rgba(255,255,255,.08);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:.22s var(--n-ease);cursor:pointer;line-height:1.2;
  border-radius:999px;
}
.tpl13 .n-btn:hover{background:var(--white);color:var(--primary-deeper);transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.18);border-color:var(--white);}
.tpl13 .n-btn--ink{background:var(--white);color:var(--primary-deeper);box-shadow:0 8px 18px rgba(0,0,0,.12);border-color:var(--white);}
.tpl13 .n-btn--ink:hover{background:var(--gold);border-color:var(--gold);color:var(--primary-deeper);}
.tpl13 .n-btn--red{background:var(--accent);border-color:var(--accent);color:var(--white);box-shadow:0 8px 18px rgba(var(--accent-rgb),.22);}
.tpl13 .n-btn--red:hover{background:var(--accent-dark);border-color:var(--accent-dark);transform:translateY(-2px);box-shadow:0 12px 24px rgba(var(--accent-rgb),.28);}
.tpl13 .n-btn--ink-outline{border:2px solid rgba(255,255,255,.72);color:var(--white);background:transparent;border-radius:999px;}
.tpl13 .n-btn--ink-outline:hover{background:var(--white);color:var(--primary-deeper);}
.tpl13 .n-hero-trust{display:flex;flex-wrap:wrap;gap:.7rem;}
.tpl13 .n-trust-pill{
  display:inline-flex;align-items:center;gap:.75rem;
  padding:.62rem 1rem;
  background:rgba(255,255,255,.09);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  font-family:var(--font-body);
  box-shadow:0 6px 18px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.08);
  transition:.2s var(--n-ease);
}
.tpl13 .n-trust-pill:hover{transform:translateY(-2px);background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.20);}
.tpl13 .n-trust-pill i{color:var(--gold);font-size:1.08rem;width:2.15rem;height:2.15rem;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.14);border-radius:50%;}
.tpl13 .n-trust-pill strong{display:block;font-size:1.08rem;font-weight:800;color:var(--white);line-height:1.1;}
.tpl13 .n-trust-pill span{display:block;font-size:.9rem;color:rgba(255,255,255,.72);text-transform:uppercase;letter-spacing:.06em;font-weight:600;}
.tpl13 .n-hero-photo{position:relative;}
.tpl13 .n-hero-photo-frame{
  position:relative;
  border:1.5px solid rgba(255,255,255,.28);
  padding:.55rem;background:var(--white);
  border-radius:14px;
  box-shadow:0 22px 50px rgba(0,0,0,.22), 0 4px 12px rgba(0,0,0,.12);
  transform:rotate(-.35deg);
  transition:transform .35s var(--n-ease);
  overflow:hidden;
}
.tpl13 .n-hero-photo-frame:hover{transform:rotate(0deg) translateY(-3px);}
.tpl13 .n-hero-photo-frame img{width:100%;height:38rem;object-fit:cover;filter:saturate(1.02) brightness(.98);transition:filter .35s, transform .6s;}
.tpl13 .n-hero-photo-frame:hover img{filter:saturate(1.05);transform:scale(1.02);}
.tpl13 .n-photo-stamp{
  position:absolute;top:.9rem;left:.9rem;
  background:var(--n-red);color:var(--white);
  font-family:var(--font-body);font-weight:800;font-size:.92rem;
  letter-spacing:.1em;text-transform:uppercase;
  padding:.38rem .78rem;
  box-shadow:0 4px 12px rgba(0,0,0,.14);
}
.tpl13 .n-photo-coord{
  position:absolute;font-family:var(--font-body);
  font-weight:800;font-size:.95rem;
  background:var(--n-ink);color:var(--n-paper);
  padding:.22rem .5rem;letter-spacing:.06em;
  border:1px solid rgba(255,255,255,.12);
}
.tpl13 .n-photo-coord--tl{top:.9rem;right:.9rem;}
.tpl13 .n-photo-coord--br{bottom:.9rem;left:.9rem;}
.tpl13 .n-hero-photo figcaption{ /* on deep hero, caption must be readable */
  font-family:var(--font-body);
  font-size:1.12rem;color:rgba(255,255,255,.72);
  padding:.85rem .3rem 0;
  border-top:1px solid rgba(var(--primary-deeper-rgb),.12);
  font-style:italic;
  display:flex;align-items:center;gap:.6rem;
}
  .tpl13 .n-hero-photo figcaption::before{content:'—';color:var(--gold);font-weight:800;}
  .tpl13 .n-hero-photo figcaption{border-top-color:rgba(255,255,255,.14);}
.tpl13 .n-rule{border:none;border-top:3px double var(--n-rule);margin:1.8rem 0;opacity:.9;}
.tpl13 .n-rule-thin{border:none;border-top:1px solid rgba(var(--primary-deeper-rgb),.12);margin:1.2rem 0;}

/* ═══ SECTION HEADS ═══ */
.tpl13 .n-section-head{
  display:flex;align-items:center;gap:1.4rem;
  margin:1.2rem 0 1.7rem;
  padding-bottom:.95rem;
  border-bottom:3px double var(--n-rule);
  position:relative;
}
.tpl13 .n-section-head::after{
  content:'';position:absolute;left:0;bottom:-3px;width:5.2rem;height:3px;background:var(--n-amber);
}
.tpl13 .n-section-head h2{
  font-family:'Playfair Display','Trirong',Georgia,serif;
  font-size:clamp(2rem,3.2vw,2.65rem);
  font-weight:800;letter-spacing:-.01em;
  white-space:nowrap;
  margin:0;color:var(--n-ink);
  display:inline-flex;align-items:center;gap:.7rem;
}
.tpl13 .n-section-head h2 i{color:var(--n-red);font-size:.88em;background:rgba(var(--accent-rgb),.08);width:2.2rem;height:2.2rem;display:flex;align-items:center;justify-content:center;border-radius:50%;}
.tpl13 .n-section-head .n-rule-flex{flex:1;border-top:3px solid var(--n-ink);opacity:.88;}
.tpl13 .n-section-head .n-section-num{
  font-family:var(--font-body);
  font-weight:800;font-size:1rem;letter-spacing:.12em;
  color:var(--n-red);
  background:var(--white);
  border:1px solid var(--n-rule-line);
  padding:.32rem .7rem;
  border-radius:999px;
  box-shadow:var(--n-shadow-sm);
}
.tpl13 .n-section-dek{
  font-family:var(--font-body);
  font-size:1.38rem;color:var(--n-ink-3);
  margin:0 0 1.7rem;line-height:1.62;
  max-width:76rem;
}

/* ═══ COLUMNS ═══ */
.tpl13 .n-columns-section{
  padding:4.8rem clamp(1.6rem,2.5vw,3rem) 4.8rem clamp(1.6rem,2.5vw,3rem);
  background:
    radial-gradient(ellipse at 90% 12%, rgba(var(--gold-rgb), .075) 0%, transparent 36%),
    radial-gradient(ellipse at 10% 88%, rgba(var(--accent-rgb), .05) 0%, transparent 34%),
    linear-gradient(180deg, var(--n-paper) 0%, color-mix(in srgb, var(--gold) 4.5%, var(--n-paper)) 100%);
  position:relative;overflow:hidden;
  border:1px solid var(--n-rule-line);
  border-radius:var(--n-radius);
  box-shadow:var(--n-shadow-sm);
}
.tpl13 .n-columns{
  column-count:3;column-gap:3rem;
  font-family:var(--font-body);
  color:var(--n-ink-2);
  column-rule:1px solid rgba(var(--primary-deeper-rgb),.09);
}
.tpl13 .n-column-block{break-inside:avoid;margin-bottom:1.2rem;position:relative;padding-left:.2rem;}
.tpl13 .n-columns h3{
  font-family:'Playfair Display',Georgia,serif;
  font-size:1.82rem;font-weight:800;
  margin:0 0 .75rem;color:var(--n-ink);
  letter-spacing:-.01em;
  display:flex;align-items:center;gap:.6rem;
}
.tpl13 .n-columns h3::before{content:'';width:.28rem;height:1.35rem;background:var(--n-red);border-radius:999px;flex-shrink:0;}
.tpl13 .n-columns p{font-size:1.3rem;line-height:1.75;margin:0 0 1.1rem;break-inside:avoid;color:var(--n-ink-2);}
.tpl13 .n-dropcap::first-letter{
  font-family:'Playfair Display',Georgia,serif;
  font-size:4.2rem;float:left;line-height:.82;
  padding:.35rem .6rem 0 0;
  font-weight:800;color:var(--n-red);
  text-shadow:0 1px 0 rgba(255,255,255,.8);
}

/* ═══ SCOREBOX — DEEP HERO-LIKE (premium) ═══ */
.tpl13 .n-scorebox{
  background:
    radial-gradient(ellipse 640px 340px at 16% 14%, rgba(var(--gold-rgb),.13) 0%, transparent 58%),
    radial-gradient(ellipse 540px 300px at 84% 88%, rgba(var(--accent-rgb),.11) 0%, transparent 62%),
    linear-gradient(135deg, var(--primary-deeper) 0%, var(--primary-dark) 68%, var(--primary-deeper) 100%);
  padding:2.8rem clamp(1.6rem,3vw,3rem);
  margin:1.6rem 0;
  border-radius:var(--n-radius);
  border:1px solid rgba(255,255,255,.08);
  border-top:4px solid var(--accent);
  box-shadow:0 16px 40px rgba(0,0,0,.18);
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.tpl13 .n-scorebox::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.22;
  background-image:radial-gradient(circle, rgba(255,255,255,.045) 1px, transparent 1.5px);
  background-size:22px 22px;
}
.tpl13 .n-scorebox::after{
  content:'';position:absolute;top:4px;left:0;width:8.5rem;height:2px;background:var(--gold);border-radius:0 2px 2px 0;z-index:2;
}
.tpl13 .n-scorebox .n-section-head h2{color:var(--white);text-shadow:0 2px 10px rgba(0,0,0,.18);}
.tpl13 .n-scorebox .n-section-head{border-bottom-color:rgba(255,255,255,.16);}
.tpl13 .n-scorebox .n-section-head .n-rule-flex{border-color:rgba(255,255,255,.18);}
.tpl13 .n-scorebox .n-section-head .n-section-num{color:var(--gold);background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.14);}
.tpl13 .n-scorebox-grid{display:grid;grid-template-columns:repeat(4,1fr);text-align:center;position:relative;z-index:1;}
.tpl13 .n-score-item{padding:1.5rem 1rem;border-left:1px solid rgba(255,255,255,.12);transition:background .22s, transform .22s;position:relative;}
.tpl13 .n-score-item:hover{background:rgba(255,255,255,.06);transform:translateY(-2px);}
.tpl13 .n-score-item:first-child{border-left:none;}
.tpl13 .n-score-item strong{
  display:block;
  font-family:'Playfair Display',Georgia,serif;
  font-size:3rem;font-weight:800;line-height:1;
  color:var(--white);
  letter-spacing:-.02em;
  text-shadow:0 2px 14px rgba(0,0,0,.18);
}
.tpl13 .n-score-item span{
  display:block;
  font-family:var(--font-body);
  font-size:1.08rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.08em;
  color:var(--gold);
  margin-top:.45rem;
}
.tpl13 .n-score-item small{
  display:block;
  font-family:var(--font-body);
  font-size:1.15rem;line-height:1.5;
  color:rgba(255,255,255,.72);margin-top:.45rem;
}

/* ═══ CLASSIFIEDS ═══ */
.tpl13 .n-classifieds{
  padding:4.8rem clamp(1.6rem,2.5vw,3rem) 4.8rem clamp(1.6rem,2.5vw,3rem);
  background:
    radial-gradient(ellipse at 88% 12%, rgba(var(--accent-rgb), .062) 0%, transparent 36%),
    linear-gradient(180deg, var(--white) 0%, color-mix(in srgb, var(--primary-mist) 20%, var(--white)) 100%);
  position:relative;overflow:hidden;
  border-radius:var(--n-radius);
  border:1px solid var(--n-rule-line);
  box-shadow:var(--n-shadow-sm);
}
.tpl13 .n-classifieds::before{
  content:'ADVERTISEMENT  \00a0 \2022  \00a0  CLASSIFIEDS';position:absolute;top:.85rem;right:1.2rem;
  font-family:var(--font-body);font-size:.78rem;font-weight:800;letter-spacing:.18em;color:var(--n-ink-mute);opacity:.7;
}
.tpl13 .n-ad-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;background:transparent;border:none;}
.tpl13 .n-ad{
  padding:2.2rem 1.9rem;
  border:1px solid var(--n-rule-line);
  background:var(--white);
  border-radius:var(--n-radius);
  text-decoration:none;color:var(--n-ink);
  transition:.24s var(--n-ease);
  position:relative;
  box-shadow:var(--n-shadow-sm);
  display:flex;flex-direction:column;
}
.tpl13 .n-ad::before{
  content:'';position:absolute;top:0;left:1.2rem;right:1.2rem;height:2px;background:var(--n-amber);opacity:0;transition:.22s;
}
.tpl13 .n-ad:hover{
  background:var(--n-ink);color:var(--n-paper);
  border-color:var(--n-ink);
  transform:translateY(-5px);
  box-shadow:var(--n-shadow-hover);
}
.tpl13 .n-ad:hover::before{opacity:1;}
.tpl13 .n-ad:hover .n-ad-tag,.tpl13 .n-ad:hover .n-ad-feature{color:var(--n-amber);border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.06);}
.tpl13 .n-ad:hover h4{color:var(--white);}
.tpl13 .n-ad:hover p{color:rgba(255,255,255,.78);}
.tpl13 .n-ad-tag{
  display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--font-body);
  font-size:.98rem;font-weight:800;letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--n-red);
  margin-bottom:.7rem;
}
.tpl13 .n-ad h4{font-family:'Playfair Display',Georgia,serif;font-size:1.92rem;font-weight:800;margin:0 0 .7rem;letter-spacing:-.01em;}
.tpl13 .n-ad p{font-family:var(--font-body);font-size:1.25rem;line-height:1.6;margin:0 0 1rem;flex:1;color:var(--n-ink-3);}
.tpl13 .n-ad-feature{
  display:inline-flex;align-items:center;gap:.35rem;
  font-family:var(--font-body);
  font-size:1.02rem;font-weight:700;
  padding:.32rem .65rem;
  background:var(--n-paper-3);
  border:1px solid var(--n-rule-line);
  margin-bottom:1rem;
  border-radius:999px;
  align-self:flex-start;
}
.tpl13 .n-ad-link{font-family:var(--font-body);font-weight:800;font-size:1.15rem;letter-spacing:.03em;display:inline-flex;align-items:center;gap:.35rem;}
.tpl13 .n-ad:hover .n-ad-link{color:var(--n-amber);}

/* ═══ EDITORIAL BOARD — DEEP HERO-LIKE (premium) ═══ */
.tpl13 .n-editorial{
  padding:4.8rem clamp(1.6rem,2.5vw,3rem) 4.8rem clamp(1.6rem,2.5vw,3rem);
  background:
    radial-gradient(ellipse 720px 380px at 14% 14%, rgba(var(--gold-rgb),.13) 0%, transparent 58%),
    radial-gradient(ellipse 560px 320px at 88% 88%, rgba(var(--accent-rgb),.10) 0%, transparent 62%),
    linear-gradient(135deg, var(--primary-deeper) 0%, var(--primary-dark) 68%, var(--primary-deeper) 100%);
  position:relative;overflow:hidden;
  border:1px solid rgba(255,255,255,.08);border-top:4px solid var(--accent);border-radius:var(--n-radius);box-shadow:0 16px 40px rgba(0,0,0,.18);
  isolation:isolate;
}
.tpl13 .n-editorial::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.20;background-image:radial-gradient(circle, rgba(255,255,255,.045) 1px, transparent 1.5px);background-size:22px 22px;}
.tpl13 .n-editorial::after{content:'';position:absolute;top:4px;left:0;width:8.5rem;height:2px;background:var(--gold);border-radius:0 2px 2px 0;z-index:2;}
.tpl13 .n-editorial .n-section-head h2{color:var(--white);text-shadow:0 2px 10px rgba(0,0,0,.18);}
.tpl13 .n-editorial .n-section-head{border-bottom-color:rgba(255,255,255,.16);}
.tpl13 .n-editorial .n-section-head .n-rule-flex{border-color:rgba(255,255,255,.18);}
.tpl13 .n-editorial .n-section-head .n-section-num{color:var(--gold);background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.14);}
.tpl13 .n-editorial .n-section-dek{color:rgba(255,255,255,.76);}
.tpl13 .n-editorial-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;}
.tpl13 .n-editor{
  position:relative;
  padding:2.1rem 1.8rem 1.7rem;
  border:1px solid var(--n-rule-line);
  border-top:3px solid var(--n-red);
  background:var(--white);
  border-radius:var(--n-radius);
  transition:.24s var(--n-ease);
  box-shadow:var(--n-shadow-sm);
  overflow:hidden;
}
.tpl13 .n-editor::after{
  content:'';position:absolute;bottom:-18%;right:-12%;width:66%;height:42%;border-radius:50%;
  background:radial-gradient(circle, rgba(var(--gold-rgb),.06) 0%, transparent 70%);opacity:0;transition:.3s;pointer-events:none;
}
.tpl13 .n-editor:hover{background:var(--white);box-shadow:var(--n-shadow-hover);transform:translateY(-5px);border-color:rgba(var(--primary-rgb),.14);}
.tpl13 .n-editor:hover::after{opacity:1;}
.tpl13 .n-editor-num{
  position:absolute;top:.9rem;right:.9rem;
  font-family:var(--font-body);
  font-weight:800;font-size:.92rem;letter-spacing:.1em;
  color:var(--n-red);background:rgba(var(--accent-rgb),.08);padding:.18rem .45rem;border-radius:999px;
}
.tpl13 .n-editor-icon{
  width:4.6rem;height:4.6rem;
  display:flex;align-items:center;justify-content:center;
  background:var(--n-ink);color:var(--n-amber);
  font-size:1.95rem;margin-bottom:1rem;
  border-radius:12px;
  border:1px solid rgba(var(--gold-rgb),.22);
  box-shadow:0 8px 16px rgba(var(--primary-deeper-rgb),.12);
  transition:.24s var(--n-ease);
}
.tpl13 .n-editor:hover .n-editor-icon{transform:rotate(-5deg) scale(1.04);}
.tpl13 .n-editor h4{font-family:'Playfair Display',Georgia,serif;font-size:1.55rem;font-weight:800;margin:0 0 .55rem;color:var(--n-ink);}
.tpl13 .n-editor p{font-family:var(--font-body);font-size:1.22rem;line-height:1.6;color:var(--n-ink-3);margin:0;}

/* ═══ SPOTLIGHT ═══ */
.tpl13 .n-spotlight{
  padding:4.8rem clamp(1.6rem,2.5vw,3rem) 4.8rem clamp(1.6rem,2.5vw,3rem);
  background:
    radial-gradient(ellipse at 18% 90%, rgba(var(--primary-rgb), .06) 0%, transparent 36%),
    radial-gradient(ellipse at 88% 12%, rgba(var(--gold-rgb), .075) 0%, transparent 34%),
    linear-gradient(180deg, var(--white) 0%, var(--n-paper) 100%);
  position:relative;overflow:hidden;
  border-radius:var(--n-radius);border:1px solid var(--n-rule-line);box-shadow:var(--n-shadow-sm);
}
.tpl13 .n-spotlight-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;border:none;}
.tpl13 .n-spot{
  padding:2rem 1.7rem;
  border:1px solid var(--n-rule-line);
  background:var(--white);
  border-radius:var(--n-radius);
  position:relative;
  transition:.24s var(--n-ease);
  box-shadow:var(--n-shadow-sm);
  overflow:hidden;
}
.tpl13 .n-spot::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg, var(--n-red), var(--n-amber));opacity:0;transition:.22s;}
.tpl13 .n-spot:hover{background:var(--white);transform:translateY(-5px);box-shadow:var(--n-shadow-hover);border-color:rgba(var(--primary-rgb),.12);}
.tpl13 .n-spot:hover::before{opacity:1;}
.tpl13 .n-spot-num{font-family:var(--font-body);font-size:.98rem;font-weight:800;letter-spacing:.1em;color:var(--n-red);margin-bottom:.45rem;display:block;background:rgba(var(--accent-rgb),.08);padding:.15rem .45rem;border-radius:999px;align-self:flex-start;display:inline-block;}
.tpl13 .n-spot i{font-size:2.2rem;color:var(--n-ink);margin-bottom:.85rem;display:flex;align-items:center;justify-content:center;width:3.8rem;height:3.8rem;background:var(--n-paper-2);border:1px solid var(--n-rule-line);border-radius:12px;}
.tpl13 .n-spot h4{font-family:'Playfair Display',Georgia,serif;font-size:1.5rem;font-weight:800;margin:0 0 .55rem;color:var(--n-ink);}
.tpl13 .n-spot p{font-family:var(--font-body);font-size:1.22rem;line-height:1.58;color:var(--n-ink-3);margin:0;}

/* ═══ PULL-QUOTES ═══ */
.tpl13 .n-pullquotes{padding:4.5rem clamp(1.6rem,2.5vw,3rem) 4.5rem clamp(1.6rem,2.5vw,3rem);overflow:hidden;background:var(--white);border:1px solid var(--n-rule-line);border-radius:var(--n-radius);box-shadow:var(--n-shadow);}
.tpl13 .n-pq-track-wrap{overflow:hidden;padding:0 0 1rem;}
.tpl13 .n-pq-track{display:flex;gap:1.6rem;transition:transform .55s var(--n-ease);will-change:transform;overflow:visible;}
.tpl13 .n-pq-card{
  flex:0 0 calc((100% - 3.2rem) / 3);
  min-width:0;
  background:var(--white);
  border:1px solid var(--n-rule-line);
  border-bottom:3px solid var(--n-red);
  border-radius:var(--n-radius);
  display:flex;flex-direction:column;
  overflow:hidden;
  box-shadow:var(--n-shadow-sm);
  transition:transform .24s, box-shadow .24s;
}
.tpl13 .n-pq-card:hover{transform:translateY(-5px);box-shadow:var(--n-shadow-hover);}
.tpl13 .n-pq-img{position:relative;height:18rem;overflow:hidden;background:var(--n-paper);}
.tpl13 .n-pq-img img{width:100%;height:100%;object-fit:cover;filter:saturate(1.02) brightness(.98);transition:transform .6s var(--n-ease);}
.tpl13 .n-pq-card:hover .n-pq-img img{transform:scale(1.05);}
.tpl13 .n-pq-tag{
  position:absolute;top:.85rem;left:.85rem;
  background:var(--n-red);color:var(--white);
  font-family:var(--font-body);font-weight:800;font-size:.88rem;
  letter-spacing:.09em;text-transform:uppercase;
  padding:.36rem .75rem;
  border-radius:999px;
  box-shadow:0 4px 12px rgba(0,0,0,.16);
}
.tpl13 .n-pq-body{padding:1.6rem 1.6rem 1.7rem;background:var(--white);flex:1;}
.tpl13 .n-pq-body p{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-size:1.36rem;line-height:1.6;color:var(--n-ink);margin:0;}
.tpl13 .n-pq-controls{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:1.7rem;}
.tpl13 .n-pq-arrow{
  width:4.2rem;height:4.2rem;border-radius:50%;
  background:var(--white);
  border:1.5px solid var(--n-rule-line);
  color:var(--n-ink);
  font-size:1.05rem;cursor:pointer;
  transition:.22s var(--n-ease);
  display:inline-flex;align-items:center;justify-content:center;
  box-shadow:var(--n-shadow-sm);
}
.tpl13 .n-pq-arrow:hover{background:var(--n-ink);color:var(--white);border-color:var(--n-ink);transform:translateY(-2px);box-shadow:0 8px 18px rgba(var(--primary-deeper-rgb),.18);}
.tpl13 .n-pq-dots{display:flex;gap:.5rem;align-items:center;}
.tpl13 .n-pq-dots button{width:.85rem;height:.85rem;border-radius:50%;background:var(--border);border:none;cursor:pointer;padding:0;transition:.22s var(--n-ease);}
.tpl13 .n-pq-dots button.is-active{background:var(--n-red);width:2.1rem;border-radius:999px;box-shadow:0 0 0 4px rgba(var(--accent-rgb),.12);}

/* ═══ FEATURED INTERVIEW — DEEP HERO-LIKE (premium) ═══ */
.tpl13 .n-interview{
  padding:4.8rem clamp(1.6rem,2.5vw,3rem) 4.8rem clamp(1.6rem,2.5vw,3rem);
  background:
    radial-gradient(ellipse 680px 360px at 16% 14%, rgba(var(--gold-rgb),.13) 0%, transparent 58%),
    radial-gradient(ellipse 560px 320px at 88% 88%, rgba(var(--accent-rgb),.10) 0%, transparent 62%),
    linear-gradient(135deg, var(--primary-deeper) 0%, var(--primary-dark) 68%, var(--primary-deeper) 100%);
  position:relative;overflow:hidden;
  border:1px solid rgba(255,255,255,.08);border-top:4px solid var(--accent);border-radius:var(--n-radius);box-shadow:0 16px 40px rgba(0,0,0,.18);
  isolation:isolate;
}
.tpl13 .n-interview::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.20;background-image:radial-gradient(circle, rgba(255,255,255,.045) 1px, transparent 1.5px);background-size:22px 22px;}
.tpl13 .n-interview::after{content:'';position:absolute;top:4px;left:0;width:8.5rem;height:2px;background:var(--gold);border-radius:0 2px 2px 0;z-index:2;}
.tpl13 .n-interview .n-section-head h2{color:var(--white);text-shadow:0 2px 10px rgba(0,0,0,.18);}
.tpl13 .n-interview .n-section-head{border-bottom-color:rgba(255,255,255,.16);}
.tpl13 .n-interview .n-section-head .n-rule-flex{border-color:rgba(255,255,255,.18);}
.tpl13 .n-interview .n-section-head .n-section-num{color:var(--gold);background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.14);}
.tpl13 .n-interview-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:3rem;align-items:center;}
.tpl13 .n-accent{color:var(--n-red);}
.tpl13 .n-video-frame{
  position:relative;cursor:pointer;
  border:2px solid var(--n-ink);
  overflow:hidden;
  background:var(--n-ink);
  border-radius:12px;
  box-shadow:var(--n-shadow);
}
.tpl13 .n-video-frame img{width:100%;height:34rem;object-fit:cover;filter:grayscale(38%) brightness(.88);opacity:.92;transition:.32s var(--n-ease);display:block;}
.tpl13 .n-video-frame:hover img{filter:grayscale(0%) brightness(1);opacity:1;transform:scale(1.02);}
.tpl13 .n-video-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}
.tpl13 .n-video-play i{
  width:6.8rem;height:6.8rem;border-radius:50%;
  background:var(--n-red);color:var(--white);
  display:flex;align-items:center;justify-content:center;
  font-size:2.4rem;padding-left:.4rem;
  box-shadow:0 14px 36px rgba(var(--accent-rgb),.38), 0 0 0 8px rgba(var(--accent-rgb),.14);
  transition:.24s var(--n-ease);
  border:2px solid rgba(255,255,255,.9);
}
.tpl13 .n-video-frame:hover .n-video-play i{transform:scale(1.08);box-shadow:0 18px 42px rgba(var(--accent-rgb),.45), 0 0 0 10px rgba(var(--accent-rgb),.12);}
.tpl13 .n-video-cap{
  position:absolute;left:.9rem;bottom:.9rem;
  background:rgba(255,255,255,.94);backdrop-filter:blur(6px);color:var(--n-ink);
  font-family:var(--font-body);font-weight:800;font-size:1.06rem;
  letter-spacing:.04em;
  padding:.42rem .85rem;border-radius:999px;
  box-shadow:var(--n-shadow-sm);
}
.tpl13 .n-interview-text h3{font-family:'Playfair Display',Georgia,serif;font-size:2.45rem;font-weight:800;margin:.75rem 0 1rem;letter-spacing:-.01em;color:var(--white);line-height:1.05;text-shadow:0 2px 10px rgba(0,0,0,.18);}
.tpl13 .n-interview-text p{font-family:var(--font-body);font-size:1.38rem;line-height:1.68;color:rgba(255,255,255,.78);margin:0 0 1.5rem;}
.tpl13 .n-interview .n-eyebrow{color:var(--white);background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.14);}
.tpl13 .n-interview .n-accent{color:var(--gold);}
.tpl13 .n-interview .n-btn--ink-outline{border-color:rgba(255,255,255,.72);color:var(--white);background:transparent;}
.tpl13 .n-interview .n-btn--ink-outline:hover{background:var(--white);color:var(--primary-deeper);border-color:var(--white);}
.tpl13 .n-interview-grid,.tpl13 .n-video-frame{position:relative;z-index:1;}

/* ═══ READER LETTERS ═══ */
.tpl13 .n-letters{
  padding:4.8rem clamp(1.6rem,2.5vw,3rem) 4.8rem clamp(1.6rem,2.5vw,3rem);
  background:
    radial-gradient(ellipse at 18% 12%, rgba(var(--gold-rgb), .065) 0%, transparent 36%),
    radial-gradient(ellipse at 88% 90%, rgba(var(--primary-rgb), .05) 0%, transparent 34%),
    linear-gradient(180deg, var(--n-paper-2) 0%, var(--white) 100%);
  position:relative;overflow:hidden;
  border:1px solid var(--n-rule-line);border-radius:var(--n-radius);box-shadow:var(--n-shadow-sm);
}
.tpl13 .n-letters-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem;}
.tpl13 .n-letter{
  background:var(--white);
  border:1px solid var(--n-rule-line);
  border-left:4px solid var(--n-red);
  border-radius:var(--n-radius);
  padding:2rem 1.9rem;
  position:relative;
  transition:.22s var(--n-ease);
  box-shadow:var(--n-shadow-sm);
}
.tpl13 .n-letter:hover{background:var(--white);box-shadow:var(--n-shadow-hover);transform:translateY(-4px);}
.tpl13 .n-letter-num{position:absolute;top:.85rem;right:1.1rem;font-family:var(--font-body);font-weight:800;font-size:.92rem;letter-spacing:.1em;color:var(--n-red);background:rgba(var(--accent-rgb),.08);padding:.16rem .45rem;border-radius:999px;}
.tpl13 .n-letter i{font-size:1.9rem;color:var(--n-amber);margin-bottom:.75rem;display:inline-flex;align-items:center;justify-content:center;width:3.2rem;height:3.2rem;background:var(--n-paper-2);border:1px solid var(--n-rule-line);border-radius:10px;}
.tpl13 .n-letter h4{font-family:'Playfair Display',Georgia,serif;font-size:1.6rem;font-weight:800;margin:0 0 .55rem;color:var(--n-ink);line-height:1.2;}
.tpl13 .n-letter p{font-family:var(--font-body);font-size:1.26rem;line-height:1.62;color:var(--n-ink-3);margin:0;}

/* ═══ DAILY EDITION — Portal ═══ */
.tpl13 .n-subs{
  padding:4.8rem clamp(1.6rem,2.5vw,3rem) 4.8rem clamp(1.6rem,2.5vw,3rem);
  background:
    radial-gradient(ellipse 640px 340px at 18% 14%, rgba(var(--gold-rgb),.13) 0%, transparent 58%),
    radial-gradient(ellipse 560px 300px at 82% 86%, rgba(var(--accent-rgb),.11) 0%, transparent 62%),
    linear-gradient(135deg, var(--primary-deeper) 0%, var(--primary-dark) 68%, var(--primary-deeper) 100%);
  position:relative;overflow:hidden;
  border-top:4px solid var(--accent);
  border-radius:var(--n-radius);
  isolation:isolate;
}
.tpl13 .n-subs::before{content:'';position:absolute;top:4px;left:0;width:8.5rem;height:2px;background:var(--gold);border-radius:0 2px 2px 0;z-index:2;}
.tpl13 .n-subs::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.22;
  background-image:radial-gradient(circle, rgba(255,255,255,.045) 1px, transparent 1.5px);
  background-size:22px 22px;
}
.tpl13 .n-subs .n-section-head h2{color:var(--white);text-shadow:0 2px 10px rgba(0,0,0,.18);}
.tpl13 .n-subs .n-section-head{border-bottom-color:rgba(255,255,255,.16);}
.tpl13 .n-subs .n-section-head .n-rule-flex{border-color:rgba(255,255,255,.18);}
.tpl13 .n-subs .n-section-head .n-section-num{color:var(--gold);background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.14);}
.tpl13 .n-subs .n-section-dek{color:rgba(255,255,255,.76);}
.tpl13 .n-subs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;position:relative;z-index:1;}
.tpl13 .n-sub-card{
  background:rgba(255,255,255,.98);
  border:1px solid var(--n-rule-line);
  border-radius:var(--n-radius);
  padding:2rem 1.6rem;
  text-decoration:none;color:var(--n-ink);
  position:relative;
  transition:.24s var(--n-ease);
  display:flex;flex-direction:column;
  box-shadow:0 8px 22px rgba(0,0,0,.08);
  overflow:hidden;
}
.tpl13 .n-sub-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg, var(--n-red), var(--n-amber));opacity:0;transition:.22s;}
.tpl13 .n-sub-card:hover{background:var(--n-ink);color:var(--n-paper);border-color:var(--n-ink);transform:translateY(-5px);box-shadow:0 18px 36px rgba(0,0,0,.18);}
.tpl13 .n-sub-card:hover::before{opacity:1;}
.tpl13 .n-sub-card:hover .n-sub-num,.tpl13 .n-sub-card:hover .n-sub-link{color:var(--n-amber);}
.tpl13 .n-sub-card:hover h4{color:var(--white);}
.tpl13 .n-sub-card:hover p{color:rgba(255,255,255,.74);}
.tpl13 .n-sub-card--lead{
  grid-column:span 2;grid-row:span 2;
  background:linear-gradient(135deg, var(--n-ink) 0%, var(--primary-dark) 100%);
  color:var(--n-paper);
  border-color:rgba(255,255,255,.08);
  box-shadow:0 14px 32px rgba(0,0,0,.22);
}
.tpl13 .n-sub-card--lead .n-sub-num{color:var(--n-amber);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);padding:.15rem .45rem;border-radius:999px;}
.tpl13 .n-sub-card--lead i{color:var(--n-amber);}
.tpl13 .n-sub-card--lead h4{color:var(--white);font-size:1.72rem;}
.tpl13 .n-sub-card--lead p{color:var(--white);font-size:1.26rem;opacity:.92;}
.tpl13 .n-sub-num{font-family:var(--font-body);font-weight:800;font-size:.92rem;letter-spacing:.11em;color:var(--n-red);display:block;margin-bottom:.5rem;}
.tpl13 .n-sub-card i{font-size:2rem;color:var(--n-ink);margin-bottom:.8rem;width:3.6rem;height:3.6rem;display:flex;align-items:center;justify-content:center;background:var(--n-paper-2);border:1px solid var(--n-rule-line);border-radius:12px;transition:.22s;}
.tpl13 .n-sub-card:hover i{transform:rotate(-5deg);}
.tpl13 .n-sub-card h4{font-family:'Playfair Display',Georgia,serif;font-size:1.48rem;font-weight:800;margin:0 0 .45rem;color:var(--primary);letter-spacing:-.01em;}
.tpl13 .n-sub-card p{font-family:var(--font-body);font-size:1.18rem;line-height:1.55;color:var(--primary-light);margin:0 0 .85rem;flex:1;}
.tpl13 .n-sub-link{font-family:var(--font-body);font-weight:800;font-size:1.08rem;letter-spacing:.03em;color:var(--n-red);display:inline-flex;align-items:center;gap:.35rem;}

/* ═══ PUBLISHER'S NOTE — DEEP HERO-LIKE (premium) ═══ */
.tpl13 .n-publisher{
  padding:4.8rem clamp(1.6rem,2.5vw,3rem) 4.8rem clamp(1.6rem,2.5vw,3rem);
  background:
    radial-gradient(ellipse 680px 360px at 14% 14%, rgba(var(--gold-rgb),.13) 0%, transparent 58%),
    radial-gradient(ellipse 560px 320px at 88% 88%, rgba(var(--accent-rgb),.10) 0%, transparent 62%),
    linear-gradient(135deg, var(--primary-deeper) 0%, var(--primary-dark) 68%, var(--primary-deeper) 100%);
  position:relative;overflow:hidden;
  border-radius:var(--n-radius);
  border:1px solid rgba(255,255,255,.08);border-top:4px solid var(--accent);box-shadow:0 16px 40px rgba(0,0,0,.18);
  isolation:isolate;
}
.tpl13 .n-publisher::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.20;background-image:radial-gradient(circle, rgba(255,255,255,.045) 1px, transparent 1.5px);background-size:22px 22px;}
.tpl13 .n-publisher::after{content:'';position:absolute;top:4px;left:0;width:8.5rem;height:2px;background:var(--gold);border-radius:0 2px 2px 0;z-index:2;}
.tpl13 .n-publisher .n-section-head h2{color:var(--white);text-shadow:0 2px 10px rgba(0,0,0,.18);}
.tpl13 .n-publisher .n-section-head{border-bottom-color:rgba(255,255,255,.16);}
.tpl13 .n-publisher .n-section-head .n-rule-flex{border-color:rgba(255,255,255,.18);}
.tpl13 .n-publisher .n-section-head .n-section-num{color:var(--gold);background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.14);}
.tpl13 .n-publisher .n-section-dek{color:rgba(255,255,255,.76);}
.tpl13 .n-publisher-grid{display:grid;grid-template-columns:.92fr 1.5fr;gap:3rem;align-items:center;}
.tpl13 .n-publisher-portrait{
  position:relative;
  border:1.5px solid var(--n-rule-line);
  background:var(--white);
  padding:.55rem;
  border-radius:var(--n-radius);
  display:flex;align-items:center;justify-content:center;
  min-height:32rem;
  box-shadow:var(--n-shadow);
  overflow:hidden;
  transform:rotate(-.4deg);
}
.tpl13 .n-publisher-portrait img{width:100%;height:32rem;object-fit:cover;filter:grayscale(78%) contrast(1.04);border-radius:12px;}
.tpl13 .n-publisher-initial{
  width:100%;height:32rem;
  display:flex;align-items:center;justify-content:center;
  font-family:'Playfair Display',Georgia,serif;
  font-size:8.5rem;font-weight:800;color:var(--n-paper);
  background:var(--n-ink);
  border-radius:12px;
}
.tpl13 .n-publisher-stamp{
  position:absolute;top:-.7rem;right:-.7rem;
  background:var(--n-red);color:var(--white);
  font-family:var(--font-body);font-weight:800;font-size:.98rem;
  letter-spacing:.12em;text-transform:uppercase;
  padding:.42rem .85rem;
  transform:rotate(3deg);
  box-shadow:0 6px 14px rgba(var(--accent-rgb),.28);
  border-radius:6px;
}
.tpl13 .n-publisher-quote{margin:0;padding:0;position:relative;}
.tpl13 .n-publisher-quote::before{
  content:'\201C';position:absolute;top:-1.2rem;left:-.2rem;
  font-family:'Playfair Display',serif;font-size:6rem;line-height:1;color:var(--n-amber);opacity:.22;pointer-events:none;
}
.tpl13 .n-publisher-quote p{
  font-family:'Playfair Display',Georgia,serif;
  font-style:italic;
  font-size:1.78rem;line-height:1.52;
  color:var(--white);
  margin:0 0 1.3rem;
  padding:0 0 0 1.4rem;
  border-left:3px solid var(--gold);
  text-shadow:0 1px 8px rgba(0,0,0,.18);
  position:relative;z-index:1;
}
.tpl13 .n-publisher-quote footer{display:flex;flex-direction:column;gap:.25rem;font-family:var(--font-body);position:relative;z-index:1;}
.tpl13 .n-publisher-quote footer strong{font-size:1.35rem;color:var(--white);font-weight:800;}
.tpl13 .n-publisher-quote footer span{font-size:1.1rem;color:rgba(255,255,255,.72);}
.tpl13 .n-publisher-stars{color:var(--gold);font-size:1.1rem;margin-top:.35rem;}
.tpl13 .n-publisher-grid{position:relative;z-index:1;}
.tpl13 .n-publisher-stars i{margin-right:.14rem;}

/* ═══ LATEST DISPATCHES ═══ */
.tpl13 .n-dispatch{
  padding:4.8rem clamp(1.6rem,2.5vw,3rem) 4.8rem clamp(1.6rem,2.5vw,3rem);
  background:
    radial-gradient(ellipse at 88% 14%, rgba(var(--gold-rgb), .065) 0%, transparent 36%),
    radial-gradient(ellipse at 12% 86%, rgba(var(--accent-rgb), .055) 0%, transparent 34%),
    linear-gradient(180deg, var(--white) 0%, color-mix(in srgb, var(--primary-mist) 16%, var(--white)) 100%);
  position:relative;overflow:hidden;
  border:1px solid var(--n-rule-line);
  border-radius:var(--n-radius);
  box-shadow:var(--n-shadow-sm);
}
.tpl13 .n-dispatch-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;}
.tpl13 .n-dispatch-card{
  display:flex;flex-direction:column;
  background:var(--white);
  border:1px solid var(--n-rule-line);
  border-radius:var(--n-radius);
  text-decoration:none;color:var(--n-ink);
  transition:.24s var(--n-ease);
  overflow:hidden;
  box-shadow:var(--n-shadow-sm);
}
.tpl13 .n-dispatch-card:hover{background:var(--white);box-shadow:var(--n-shadow-hover);transform:translateY(-5px);border-color:rgba(var(--primary-rgb),.12);}
.tpl13 .n-dispatch-img{position:relative;height:19rem;overflow:hidden;background:var(--n-paper);}
.tpl13 .n-dispatch-img img{width:100%;height:100%;object-fit:cover;filter:grayscale(36%) contrast(1.04);transition:transform .55s var(--n-ease);}
.tpl13 .n-dispatch-card:hover .n-dispatch-img img{transform:scale(1.05);filter:grayscale(12%);}
.tpl13 .n-dispatch-date{
  position:absolute;top:.85rem;left:.85rem;
  background:var(--white);color:var(--n-ink);
  text-align:center;
  padding:.5rem .7rem;
  border:1px solid var(--n-ink);
  font-family:var(--font-body);
  line-height:1.05;
  border-radius:8px;
  box-shadow:var(--n-shadow-sm);
}
.tpl13 .n-dispatch-date strong{display:block;font-size:1.5rem;font-weight:800;}
.tpl13 .n-dispatch-date span{display:block;font-size:.92rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--n-red);}
.tpl13 .n-dispatch-body{padding:1.6rem 1.6rem 1.7rem;flex:1;display:flex;flex-direction:column;}
.tpl13 .n-dispatch-tag{display:inline-flex;align-items:center;gap:.35rem;font-family:var(--font-body);font-weight:800;font-size:.92rem;letter-spacing:.11em;text-transform:uppercase;color:var(--n-red);margin-bottom:.6rem;}
.tpl13 .n-dispatch-card h4{font-family:'Playfair Display',Georgia,serif;font-size:1.62rem;font-weight:800;margin:0 0 .6rem;color:var(--n-ink);line-height:1.22;}
.tpl13 .n-dispatch-card p{font-family:var(--font-body);font-size:1.22rem;line-height:1.56;color:var(--n-ink-3);margin:0 0 1rem;flex:1;}
.tpl13 .n-dispatch-link{font-family:var(--font-body);font-weight:800;font-size:1.1rem;letter-spacing:.03em;color:var(--n-red);display:inline-flex;align-items:center;gap:.35rem;}

/* ═══ TODAY'S EDITION ═══ */
.tpl13 .n-edition{
  padding:4.8rem clamp(1.6rem,2.5vw,3rem) 4.8rem clamp(1.6rem,2.5vw,3rem);
  background:
    radial-gradient(ellipse at 18% 16%, rgba(var(--primary-rgb), .055) 0%, transparent 38%),
    radial-gradient(ellipse at 88% 88%, rgba(var(--gold-rgb), .075) 0%, transparent 36%),
    linear-gradient(180deg, var(--n-paper) 0%, color-mix(in srgb, var(--gold) 3.5%, var(--n-paper)) 100%);
  position:relative;overflow:hidden;
  border:1px solid var(--n-rule-line);border-radius:var(--n-radius);box-shadow:var(--n-shadow-sm);
}
.tpl13 .n-edition-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;}
.tpl13 .n-edition-card{
  background:var(--white);
  border:1px solid var(--n-rule-line);
  border-radius:var(--n-radius);
  text-decoration:none;color:var(--n-ink);
  display:flex;flex-direction:column;
  transition:.24s var(--n-ease);
  overflow:hidden;
  box-shadow:var(--n-shadow-sm);
}
.tpl13 .n-edition-card:hover{background:var(--white);box-shadow:var(--n-shadow-hover);transform:translateY(-5px);border-color:rgba(var(--primary-rgb),.12);}
.tpl13 .n-edition-visual{padding:1.4rem;background:var(--n-paper-2);border-bottom:1px solid var(--n-rule-line);display:flex;align-items:center;justify-content:center;}
.tpl13 .n-edition-visual--doc{min-height:22rem;}
.tpl13 .n-edition-visual--book{min-height:22rem;background:linear-gradient(135deg, var(--n-amber) 0%, color-mix(in srgb, var(--gold) 58%, var(--n-ink)) 100%);}
.tpl13 .n-edition-visual--gallery{min-height:22rem;}
.tpl13 .n-mini-doc{background:var(--white);border:1px solid rgba(var(--primary-deeper-rgb),.14);width:17.5rem;box-shadow:0 8px 18px rgba(var(--primary-deeper-rgb),.08);border-radius:6px;overflow:hidden;}
.tpl13 .n-md-band{display:flex;align-items:center;gap:.6rem;padding:.55rem .75rem;background:var(--n-paper-3);border-bottom:1px solid rgba(var(--primary-deeper-rgb),.12);}
.tpl13 .n-md-logo{width:1.5rem;height:1.5rem;border-radius:50%;background:var(--n-ink);}
.tpl13 .n-md-lines{flex:1;display:flex;flex-direction:column;gap:.22rem;}
.tpl13 .n-md-line{height:.45rem;background:var(--n-ink);border-radius:1px;}
.tpl13 .n-md-stamp{width:1.3rem;height:1.3rem;border:2px solid var(--n-red);border-radius:50%;}
.tpl13 .n-md-title-strip{height:1rem;background:var(--n-ink);margin:.35rem .75rem;border-radius:2px;}
.tpl13 .n-md-info{padding:.35rem .75rem;}
.tpl13 .n-md-info-row{display:flex;gap:.55rem;margin-bottom:.28rem;}
.tpl13 .n-md-info-row .n-md-line{height:.36rem;background:rgba(var(--primary-deeper-rgb),.45);}
.tpl13 .n-md-badges{display:flex;gap:.35rem;padding:.5rem .75rem;justify-content:flex-end;}
.tpl13 .n-md-badge{font-family:var(--font-body);font-weight:800;font-size:.82rem;padding:.22rem .5rem;border-radius:999px;}
.tpl13 .n-md-badge--gold{background:var(--n-amber);color:var(--n-ink);}
.tpl13 .n-md-badge--ink{background:var(--n-ink);color:var(--white);}
.tpl13 .n-md-table{padding:.35rem .75rem .7rem;}
.tpl13 .n-md-row{display:flex;gap:.18rem;margin-bottom:.18rem;align-items:center;}
.tpl13 .n-md-cell{height:.46rem;background:rgba(var(--primary-deeper-rgb),.07);border-radius:1px;}
.tpl13 .n-md-cell--label{flex:1;background:rgba(var(--primary-deeper-rgb),.14);}
.tpl13 .n-md-cell--total{background:var(--n-ink);}
.tpl13 .n-md-cell--grade{background:var(--n-amber);}
.tpl13 .n-mini-book{width:13.5rem;height:17.5rem;background:var(--n-ink);border:2px solid var(--n-amber);padding:1.3rem 1rem;text-align:center;position:relative;box-shadow:0 12px 24px rgba(var(--primary-deeper-rgb),.22);border-radius:6px;}
.tpl13 .n-mb-label{font-family:var(--font-body);font-size:.92rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--n-amber);margin-bottom:.65rem;}
.tpl13 .n-mb-year{font-family:'Playfair Display',Georgia,serif;font-size:3.8rem;font-weight:800;color:var(--n-paper);line-height:1;margin-bottom:.5rem;}
.tpl13 .n-mb-title{font-family:var(--font-body);font-size:1.08rem;font-weight:800;letter-spacing:.18em;color:var(--n-paper);text-transform:uppercase;}
.tpl13 .n-mb-rule{height:3px;width:54%;margin:.9rem auto 0;background:var(--n-amber);border-radius:999px;}
.tpl13 .n-gallery-single{position:relative;width:100%;height:21rem;overflow:hidden;border-radius:10px;border:1px solid var(--n-rule-line);box-shadow:var(--n-shadow-sm);}
.tpl13 .n-gallery-single img{width:100%;height:100%;object-fit:cover;filter:grayscale(24%) contrast(1.04);transition:transform .5s var(--n-ease);}
.tpl13 .n-edition-card:hover .n-gallery-single img{transform:scale(1.03);}
.tpl13 .n-gallery-cap{position:absolute;bottom:.85rem;left:.85rem;background:rgba(255,255,255,.92);backdrop-filter:blur(6px);color:var(--n-ink);font-family:var(--font-body);font-weight:700;font-size:.92rem;padding:.35rem .7rem;border-radius:999px;box-shadow:var(--n-shadow-sm);}
.tpl13 .n-gallery-corner{position:absolute;top:.85rem;right:.85rem;width:2.5rem;height:2.5rem;border-radius:50%;background:var(--n-ink);color:var(--n-paper);display:flex;align-items:center;justify-content:center;font-size:1.02rem;box-shadow:var(--n-shadow-sm);}
.tpl13 .n-edition-body{padding:1.7rem 1.6rem;flex:1;display:flex;flex-direction:column;}
.tpl13 .n-edition-tag{display:inline-flex;align-items:center;gap:.35rem;font-family:var(--font-body);font-weight:800;font-size:.92rem;letter-spacing:.11em;text-transform:uppercase;color:var(--n-red);margin-bottom:.6rem;}
.tpl13 .n-edition-card h4{font-family:'Playfair Display',Georgia,serif;font-size:1.6rem;font-weight:800;margin:0 0 .6rem;color:var(--n-ink);line-height:1.22;}
.tpl13 .n-edition-card p{font-family:var(--font-body);font-size:1.22rem;line-height:1.56;color:var(--n-ink-3);margin:0 0 1rem;flex:1;}
.tpl13 .n-edition-link{font-family:var(--font-body);font-weight:800;font-size:1.1rem;letter-spacing:.03em;color:var(--n-red);display:inline-flex;align-items:center;gap:.35rem;}

/* ═══ FINAL EDITION ═══ */
.tpl13 .n-final-cta{
  background:
    radial-gradient(ellipse 700px 320px at 20% 0%, rgba(var(--gold-rgb),.10) 0%, transparent 60%),
    radial-gradient(ellipse 600px 280px at 88% 100%, rgba(var(--accent-rgb),.08) 0%, transparent 60%),
    linear-gradient(180deg, var(--n-ink) 0%, color-mix(in srgb, var(--n-ink) 88%, #000) 100%);
  color:var(--n-paper);
  padding:4.8rem clamp(1.6rem,3vw,3.2rem);
  text-align:center;
  margin:1.6rem 0 0;
  position:relative;
  border-top:4px double var(--n-amber);
  border-bottom:4px double var(--n-amber);
  border-radius:var(--n-radius);
  overflow:hidden;
  isolation:isolate;
}
.tpl13 .n-final-cta::before{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.06;
  background-image:radial-gradient(circle, rgba(255,255,255,.9) 1px, transparent 1.3px);
  background-size:18px 18px;
  z-index:-1;
}
.tpl13 .n-final-cta .n-eyebrow{color:var(--n-amber);background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12);}
.tpl13 .n-final-cta h3{font-family:'Playfair Display',Georgia,serif;font-size:clamp(2.5rem,4.2vw,3.4rem);font-weight:800;margin:.85rem 0 1rem;letter-spacing:-.015em;line-height:1.05;color:var(--white);}
.tpl13 .n-final-cta>p{font-family:var(--font-body);font-size:1.42rem;line-height:1.65;color:var(--white);max-width:62rem;margin:0 auto 2rem;}
.tpl13 .n-final-cta-stats{display:flex;justify-content:center;gap:2.4rem;margin-bottom:2.2rem;flex-wrap:wrap;position:relative;z-index:1;}
.tpl13 .n-final-cta-stats > div{display:flex;flex-direction:column;align-items:center;gap:.28rem;border-left:1px solid rgba(255,255,255,.14);padding-left:2.4rem;}
.tpl13 .n-final-cta-stats > div:first-child{border-left:none;padding-left:0;}
.tpl13 .n-final-cta-stats strong{font-family:'Playfair Display',Georgia,serif;font-size:2.1rem;font-weight:800;color:var(--n-amber);line-height:1;}
.tpl13 .n-final-cta-stats span{font-family:var(--font-body);font-size:1.02rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--white);}
.tpl13 .n-final-cta-actions{display:flex;gap:.85rem;justify-content:center;flex-wrap:wrap;margin-bottom:2.2rem;position:relative;z-index:1;}
.tpl13 .n-final-cta .n-btn--ink{background:var(--n-paper);color:var(--n-ink);border-color:var(--n-paper);}
.tpl13 .n-final-cta .n-btn--ink:hover{background:var(--n-amber);border-color:var(--n-amber);color:var(--n-ink);}
.tpl13 .n-final-cta .n-btn--ink-outline{border-color:rgba(255,255,255,.55);color:var(--n-paper);background:transparent;}
.tpl13 .n-final-cta .n-btn--ink-outline:hover{background:var(--n-paper);color:var(--n-ink);border-color:var(--n-paper);}
.tpl13 .n-final-cta-form{max-width:60rem;margin:0 auto;border-top:1px solid rgba(255,255,255,.14);padding-top:2rem;position:relative;z-index:1;}
.tpl13 .n-final-cta-form h4{font-family:'Playfair Display',Georgia,serif;font-size:1.6rem;font-weight:800;color:var(--n-paper);margin:0 0 1rem;display:inline-flex;align-items:center;gap:.55rem;}
.tpl13 .n-final-cta-row{display:flex;gap:.6rem;flex-wrap:wrap;align-items:stretch;}
.tpl13 .n-final-cta-input{
  flex:1 1 30rem;min-width:24rem;
  padding:1.05rem 1.3rem;
  font-family:var(--font-body);font-size:1.22rem;
  border:1.5px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.06);color:var(--n-paper);
  border-radius:999px;
  transition:.2s;
}
.tpl13 .n-final-cta-input::placeholder{color:var(--n-on-dark-mute);}
.tpl13 .n-final-cta-input:focus{outline:none;border-color:var(--n-amber);background:rgba(255,255,255,.09);box-shadow:0 0 0 4px rgba(var(--gold-rgb),.12);}
.tpl13 .n-final-cta-foot{font-family:var(--font-body);font-size:1.08rem;color:var(--white);margin:1rem 0 0;}
.tpl13 .n-final-cta-foot i{color:var(--n-amber);margin-right:.4rem;}

/* ═══ VIDEO LIGHTBOX ═══ */
.tpl13 .n-video-lightbox{
  position:fixed;inset:0;
  background:rgba(0,0,0,.88);
  z-index:99999;
  display:flex;align-items:center;justify-content:center;
  padding:2rem;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.tpl13 .n-video-lightbox-inner{position:relative;width:100%;max-width:96rem;aspect-ratio:16/9;background:#000;box-shadow:0 30px 80px rgba(0,0,0,.5);border-radius:14px;overflow:hidden;}
.tpl13 .n-video-lightbox-inner iframe{width:100%;height:100%;border:0;}
.tpl13 .n-video-lightbox-close{
  position:absolute;top:.85rem;right:.85rem;z-index:2;
  width:4rem;height:4rem;border-radius:50%;
  background:rgba(255,255,255,.16);
  border:1.5px solid rgba(255,255,255,.32);
  color:var(--white);font-size:1.45rem;cursor:pointer;
  backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;
  transition:.2s;
}
.tpl13 .n-video-lightbox-close:hover{background:rgba(255,255,255,.28);transform:scale(1.04);}

/* Toggle hidden on desktop */
.tpl13 .n-columns-toggle{display:none;}

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE — Broadsheet — first-principles mobile
   Goal: avoid endless vertical scroll ONLY where lists are long
   (editorial 6-8, portal 8, spotlight 6, edition 3, classifieds)
   → horizontal swipe with snap + peek. Keep news/dispatch,
   letters, scorebox as compact grids — no swipe, just tighter.
   Every section stays aligned to the same 1.2rem container edge.
   ════════════════════════════════════════════════════════════════ */
@media(max-width:1199px){
  .tpl13 .n-hero-grid{grid-template-columns:1fr;gap:2.6rem;}
  .tpl13 .n-hero-photo-frame img{height:30rem;}
  .tpl13 .n-columns{column-count:2;}
  .tpl13 .n-ad-grid{grid-template-columns:repeat(2,1fr);}
  .tpl13 .n-editorial-grid{grid-template-columns:repeat(2,1fr);}
  .tpl13 .n-spotlight-grid{grid-template-columns:repeat(2,1fr);}
  .tpl13 .n-letters-grid{grid-template-columns:1fr;}
  .tpl13 .n-subs-grid{grid-template-columns:repeat(2,1fr);}
  .tpl13 .n-sub-card--lead{grid-column:span 2;}
  .tpl13 .n-publisher-grid{grid-template-columns:1fr;gap:2.2rem;}
  .tpl13 .n-publisher-portrait,.tpl13 .n-publisher-portrait img,.tpl13 .n-publisher-initial{min-height:24rem;height:24rem;}
  .tpl13 .n-dispatch-grid,.tpl13 .n-edition-grid{grid-template-columns:1fr;}
  .tpl13 .n-interview-grid{grid-template-columns:1fr;}
  .tpl13 .n-video-frame img{height:30rem;}
}
@media(max-width:768px){
  .tpl13 .n-container{padding:0 1.2rem;}
  .tpl13 .n-masthead{padding:1.6rem 1.2rem 1.6rem;}
  .tpl13 .n-masthead-top{flex-direction:column;gap:.45rem;text-align:center;font-size:.96rem;line-height:1.45;padding-bottom:.75rem;}
  .tpl13 .n-masthead-top span:nth-child(2){display:inline-flex;}
  .tpl13 .n-corner{width:58px;height:58px;opacity:.32;}
  .tpl13 .n-hero-stars span{opacity:.18;}
  .tpl13 .n-nameplate{font-size:clamp(2.6rem,10vw,4.2rem);margin:.85rem 0 .4rem;word-break:break-word;letter-spacing:-.02em;}
  .tpl13 .n-motto{font-size:1.18rem;line-height:1.4;padding:0 .5rem;margin-bottom:1rem;color:rgba(255,255,255,.82);}
  .tpl13 .n-ticker-label{font-size:.96rem;padding:.65rem .95rem;}
  .tpl13 .n-ticker-track span{font-size:1.05rem;}
  .tpl13 .n-hero{padding:2.4rem 1.2rem 2.4rem;}
  .tpl13 .n-hero-grid{gap:1.9rem;}
  .tpl13 .n-headline{font-size:clamp(2.15rem,7.6vw,2.85rem);line-height:1.06;margin:.7rem 0 .85rem;}
  .tpl13 .n-dek{font-size:1.34rem;line-height:1.62;margin-bottom:1.2rem;}
  .tpl13 .n-byline{flex-wrap:wrap;gap:.7rem;font-size:1.06rem;padding-bottom:.85rem;margin-bottom:1.2rem;}
  .tpl13 .n-hero-photo-frame{padding:.4rem;transform:none;}
  .tpl13 .n-hero-photo-frame img{height:22rem;}
  .tpl13 .n-photo-stamp{font-size:.82rem;padding:.28rem .55rem;top:.55rem;left:.55rem;}
  .tpl13 .n-photo-coord{font-size:.82rem;}
  .tpl13 .n-photo-coord--tl{top:.55rem;right:.55rem;}
  .tpl13 .n-photo-coord--br{bottom:.55rem;left:.55rem;}
  .tpl13 .n-hero-trust{display:grid;grid-template-columns:repeat(3,1fr);gap:.55rem;}
  .tpl13 .n-trust-pill{flex:none;min-width:0;padding:.6rem .5rem;justify-content:center;flex-direction:column;text-align:center;gap:.35rem;}
  .tpl13 .n-trust-pill strong{font-size:.98rem;text-align:center;}
  .tpl13 .n-trust-pill span{font-size:.82rem;text-align:center;}
  .tpl13 .n-section-head{flex-wrap:nowrap;gap:.7rem;margin:.7rem 0 1.2rem;padding-bottom:.7rem;align-items:center;}
  .tpl13 .n-section-head h2{font-size:1.48rem;white-space:normal;line-height:1.12;flex:0 1 auto;gap:.45rem;}
  .tpl13 .n-section-head h2 i{font-size:.88em;flex-shrink:0;width:1.9rem;height:1.9rem;}
  .tpl13 .n-section-head .n-rule-flex{flex:1 1 auto;min-width:2rem;border-top-width:2px;}
  .tpl13 .n-section-head .n-section-num{flex:0 0 auto;font-size:.88rem;padding:.24rem .5rem;white-space:nowrap;}
  .tpl13 .n-section-dek{font-size:1.22rem;margin-bottom:1.3rem;line-height:1.55;}
  .tpl13 .n-columns{column-count:1;column-rule:none;}
  .tpl13 .n-columns h3{font-size:1.62rem;margin-bottom:.55rem;}
  .tpl13 .n-columns p{font-size:1.22rem;line-height:1.68;margin-bottom:.9rem;}
  .tpl13 .n-dropcap::first-letter{font-size:3.4rem;}
  .tpl13 .n-columns-section{position:relative;}
  .tpl13 .n-columns-section.is-collapsed .n-column-block:nth-child(n+3){display:none;}
  .tpl13 .n-columns-toggle{display:inline-flex;align-items:center;gap:.45rem;margin-top:.85rem;padding:.62rem 1.05rem;font-family:var(--font-body);font-weight:800;font-size:1.02rem;letter-spacing:.06em;text-transform:uppercase;background:var(--white);border:1.5px solid var(--n-rule-line);color:var(--n-ink);cursor:pointer;border-radius:999px;box-shadow:var(--n-shadow-sm);}
  .tpl13 .n-columns-toggle i{transition:transform .22s;}
  .tpl13 .n-columns-section.is-collapsed .n-columns-toggle i{transform:rotate(0deg);}
  .tpl13 .n-columns-section:not(.is-collapsed) .n-columns-toggle i{transform:rotate(180deg);}
  .tpl13 .n-scorebox{padding:1.4rem .85rem;margin:1rem 0;border-radius:14px;}
  .tpl13 .n-scorebox-grid{grid-template-columns:repeat(2,1fr);gap:0;}
  .tpl13 .n-score-item{padding:1rem .6rem;border-left:1px solid var(--n-rule-line);border-top:1px solid var(--n-rule-line);}
  .tpl13 .n-score-item:nth-child(2n+1){border-left:none;}
  .tpl13 .n-score-item:nth-child(-n+2){border-top:none;}
  .tpl13 .n-score-item strong{font-size:2.25rem;}
  .tpl13 .n-score-item span{font-size:.95rem;margin-top:.3rem;}
  .tpl13 .n-score-item small{font-size:1.02rem;line-height:1.38;margin-top:.3rem;}
  .tpl13 .n-ad-grid{grid-template-columns:1fr;gap:.9rem;}
  .tpl13 .n-ad{padding:1.6rem 1.3rem;}
  .tpl13 .n-ad h4{font-size:1.65rem;}
  .tpl13 .n-ad p{font-size:1.18rem;}
  /* ── swipe concept: editorial / spotlight / subs / edition ── */
  .tpl13 .n-editorial-grid,
  .tpl13 .n-spotlight-grid{
    display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;gap:1rem;
    padding:0 .15rem .85rem;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;grid-template-columns:none;
  }
  .tpl13 .n-editorial-grid::-webkit-scrollbar,
  .tpl13 .n-spotlight-grid::-webkit-scrollbar,
  .tpl13 .n-subs-grid::-webkit-scrollbar{ display:none; }
  .tpl13 .n-editor,
  .tpl13 .n-spot{flex:0 0 82%;max-width:82%;scroll-snap-align:start;scroll-snap-stop:always;}
  .tpl13 .n-editor{padding:1.6rem 1.3rem;}
  .tpl13 .n-editor-icon{width:4rem;height:4rem;font-size:1.7rem;margin-bottom:.7rem;border-radius:10px;}
  .tpl13 .n-editor h4{font-size:1.42rem;}
  .tpl13 .n-editor p{font-size:1.14rem;line-height:1.55;}
  .tpl13 .n-spot{padding:1.45rem 1.25rem;}
  .tpl13 .n-spot i{font-size:1.85rem;margin-bottom:.55rem;width:3.4rem;height:3.4rem;}
  .tpl13 .n-spot h4{font-size:1.38rem;}
  .tpl13 .n-spot p{font-size:1.14rem;}
  .tpl13 .n-subs{padding-bottom:2.4rem;}
  .tpl13 .n-subs-grid{
    display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;gap:1rem;
    padding:0 .15rem .85rem;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;grid-template-columns:none;
  }
  .tpl13 .n-sub-card{flex:0 0 78%;max-width:78%;scroll-snap-align:start;scroll-snap-stop:always;padding:1.5rem 1.25rem;}
  .tpl13 .n-sub-card--lead{flex:0 0 84%;max-width:84%;grid-column:auto;grid-row:auto;}
  .tpl13 .n-sub-card i{font-size:1.75rem;margin-bottom:.6rem;width:3.2rem;height:3.2rem;}
  .tpl13 .n-sub-card h4{font-size:1.34rem;}
  .tpl13 .n-sub-card p{font-size:1.1rem;}
  .tpl13 .n-letters-grid{grid-template-columns:1fr;gap:.9rem;}
  .tpl13 .n-letter{padding:1.45rem 1.25rem;}
  .tpl13 .n-letter h4{font-size:1.42rem;}
  .tpl13 .n-letter p{font-size:1.14rem;}
  .tpl13 .n-pullquotes{padding:1.8rem 1rem 1.6rem;}
  .tpl13 .n-pq-track{gap:1rem;}
  .tpl13 .n-pq-card{flex:0 0 86%;scroll-snap-align:start;}
  .tpl13 .n-pq-img{height:15rem;}
  .tpl13 .n-pq-body p{font-size:1.22rem;}
  .tpl13 .n-pq-arrow{width:3.2rem;height:3.2rem;font-size:.95rem;}
  .tpl13 .n-pq-controls{gap:.7rem;margin-top:1.2rem;}
  .tpl13 .n-interview-grid{gap:1.7rem;}
  .tpl13 .n-video-frame img{height:22rem;}
  .tpl13 .n-interview-text h3{font-size:1.92rem;line-height:1.1;}
  .tpl13 .n-interview-text p{font-size:1.22rem;}
  .tpl13 .n-publisher-grid{gap:1.7rem;}
  .tpl13 .n-publisher-portrait,.tpl13 .n-publisher-portrait img,.tpl13 .n-publisher-initial{min-height:20rem;height:20rem;}
  .tpl13 .n-publisher-quote p{font-size:1.38rem;padding-left:1.1rem;}
  .tpl13 .n-publisher-stamp{font-size:.88rem;padding:.32rem .6rem;}
  .tpl13 .n-dispatch-grid{gap:1.05rem;}
  .tpl13 .n-dispatch-img{height:16rem;}
  .tpl13 .n-dispatch-body{padding:1.25rem 1.2rem 1.4rem;}
  .tpl13 .n-dispatch-card h4{font-size:1.45rem;}
  .tpl13 .n-dispatch-card p{font-size:1.14rem;}
  .tpl13 .n-edition-grid{
    display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
    gap:1rem;padding:0 .15rem .85rem;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    grid-template-columns:none;
  }
  .tpl13 .n-edition-grid::-webkit-scrollbar{ display:none; }
  .tpl13 .n-edition-card{flex:0 0 84%;max-width:84%;scroll-snap-align:start;scroll-snap-stop:always;}
  .tpl13 .n-edition-visual--doc,
  .tpl13 .n-edition-visual--book,
  .tpl13 .n-edition-visual--gallery{min-height:15rem;padding:.85rem;}
  .tpl13 .n-gallery-single{height:15rem;}
  .tpl13 .n-mini-doc{width:14.5rem;transform:scale(.9);transform-origin:center;}
  .tpl13 .n-mini-book{width:11.5rem;height:14.5rem;padding:.9rem;}
  .tpl13 .n-mb-year{font-size:2.85rem;}
  .tpl13 .n-edition-body{padding:1.25rem;}
  .tpl13 .n-edition-card h4{font-size:1.42rem;}
  .tpl13 .n-edition-card p{font-size:1.12rem;}
  .tpl13 .n-columns-section,
  .tpl13 .n-classifieds,
  .tpl13 .n-editorial,
  .tpl13 .n-spotlight,
  .tpl13 .n-pullquotes,
  .tpl13 .n-interview,
  .tpl13 .n-letters,
  .tpl13 .n-subs,
  .tpl13 .n-publisher,
  .tpl13 .n-dispatch,
  .tpl13 .n-edition{padding:2rem 1.1rem;}
  .tpl13 .n-final-cta{padding:2.4rem 1.1rem;margin-top:1.2rem;}
  .tpl13 .n-final-cta h3{font-size:clamp(1.95rem,7vw,2.5rem);line-height:1.06;}
  .tpl13 .n-final-cta>p{font-size:1.24rem;margin-bottom:1.4rem;}
  .tpl13 .n-final-cta-stats{flex-direction:row;flex-wrap:wrap;gap:.85rem;justify-content:center;margin-bottom:1.4rem;}
  .tpl13 .n-final-cta-stats > div{flex:1 1 28%;min-width:7.5rem;border-left:none;padding-left:0;align-items:center;text-align:center;border-top:1px solid rgba(255,255,255,.14);padding-top:.7rem;}
  .tpl13 .n-final-cta-stats > div:first-child{border-top:none;padding-top:0;}
  .tpl13 .n-final-cta-stats strong{font-size:1.7rem;}
  .tpl13 .n-final-cta-stats span{font-size:.9rem;}
  .tpl13 .n-final-cta-actions{display:flex;flex-direction:row;flex-wrap:nowrap;gap:.6rem;justify-content:center;margin-bottom:1.4rem;}
  .tpl13 .n-final-cta-actions .n-btn{flex:1 1 0;min-width:0;justify-content:center;white-space:nowrap;padding:.95rem .75rem;font-size:1.02rem;}
  .tpl13 .n-final-cta-form{padding-top:1.4rem;}
  .tpl13 .n-final-cta-form h4{font-size:1.38rem;}
  .tpl13 .n-final-cta-row{flex-direction:column;gap:.7rem;}
  .tpl13 .n-final-cta-input{min-width:100%;flex:1 1 auto;padding:.9rem 1.05rem;font-size:1.1rem;}
  .tpl13 .n-final-cta-foot{font-size:.96rem;}
  .tpl13 .n-btn{padding:.85rem 1.25rem;font-size:1.06rem;justify-content:center;}
  .tpl13 .n-hero-cta{display:flex;flex-direction:row;flex-wrap:nowrap;gap:.6rem;margin-bottom:1.4rem;}
  .tpl13 .n-hero-cta .n-btn{flex:1 1 0;min-width:0;width:auto;justify-content:center;white-space:nowrap;padding:.85rem .75rem;font-size:1.02rem;}
  /* First-principle fallback: any twin-button row stays side-by-side on mobile */
  .tpl13 .n-hero-cta, .tpl13 .n-final-cta-actions{flex-direction:row !important;flex-wrap:nowrap !important;}
  .tpl13 .n-rule{margin:1.2rem 0;}
}
@media(max-width:480px){
  .tpl13 .n-hero-photo-frame img{height:18rem;}
  .tpl13 .n-headline{font-size:clamp(1.95rem,8vw,2.5rem);}
  .tpl13 .n-hero-trust{grid-template-columns:repeat(3,1fr);gap:.4rem;}
  .tpl13 .n-trust-pill{flex:none;min-width:0;padding:.5rem .35rem;gap:.3rem;}
  .tpl13 .n-trust-pill strong{font-size:.88rem;}
  .tpl13 .n-trust-pill span{font-size:.74rem;}
  .tpl13 .n-hero-cta{gap:.45rem;}
  .tpl13 .n-hero-cta .n-btn{padding:.8rem .5rem;font-size:.92rem;gap:.4rem;}
  .tpl13 .n-final-cta-actions{gap:.45rem;}
  .tpl13 .n-final-cta-actions .n-btn{padding:.85rem .5rem;font-size:.92rem;gap:.4rem;}
  .tpl13 .n-section-head h2{font-size:1.32rem;}
  .tpl13 .n-section-head .n-section-num{font-size:.82rem;}
  .tpl13 .n-score-item strong{font-size:1.92rem;}
  .tpl13 .n-editor,.tpl13 .n-spot{flex:0 0 88%;max-width:88%;}
  .tpl13 .n-sub-card{flex:0 0 86%;max-width:86%;}
  .tpl13 .n-sub-card--lead{flex:0 0 88%;max-width:88%;}
  .tpl13 .n-edition-card{flex:0 0 88%;max-width:88%;}
  .tpl13 .n-pq-card{flex:0 0 90%;}
  .tpl13 .n-video-frame img{height:18rem;}
  .tpl13 .n-publisher-portrait,.tpl13 .n-publisher-portrait img,.tpl13 .n-publisher-initial{min-height:18rem;height:18rem;}
  .tpl13 .n-publisher-quote p{font-size:1.26rem;}
  .tpl13 .n-motto{font-size:1.1rem;}
}



/* =====================================================
   TEMPLATE 14 — TERRARIUM — organic growth garden
   Scoped under .tpl14 so it never bleeds.

   Palette — FULLY THEME-DRIVEN via admin Theme & Brand
   Colours panel (School Settings). Every token derives from
   var(--primary) / --primary-dark / --accent / --gold /
   --primary-mist / --cream etc. — no hardcoded hex values.
   The original earthy sage/terracotta intent is preserved
   by aliasing: sage = primary family, terracotta = accent,
   cream = cream/primary-mist, ink = text. Updating any swatch
   in the admin recolours the whole terrarium instantly.
   ===================================================== */
.tpl14{
  --g-sage: var(--primary);
  --g-sage-dk: var(--primary-dark);
  --g-sage-deeper: var(--primary-deeper);
  --g-sage-light: var(--primary-light);
  --g-sage-mist: var(--primary-mist);
  --g-terracotta: var(--accent);
  --g-terracotta-dk: var(--accent-dark);
  --g-gold: var(--gold);
  --g-cream: var(--cream, var(--primary-mist));
  --g-cream-2: var(--bg, #fafbfc);
  --g-ink: var(--text);
  --g-ink-2: var(--text-secondary);
  --g-ink-mute: var(--text-muted);
  --g-line: var(--border-light);
  --g-line-strong: var(--border);
  --g-bg: var(--bg);
  background: var(--g-cream-2);
  color: var(--g-ink);
  font-family: var(--font-body);
  line-height: 1.65;
  overflow-x: hidden;
}
.tpl14 *,.tpl14 *::before,.tpl14 *::after{ box-sizing: border-box; }
.tpl14 img{ max-width:100%; display:block; }
.tpl14 a{ color:inherit; text-decoration:none; }
.tpl14 .g-container{ max-width:1180px; margin:0 auto; padding:0 2.4rem; }
.tpl14 .g-eyebrow{ display:inline-flex; align-items:center; gap:.8rem; font-family:var(--font-body); font-size:1.2rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--g-terracotta); }
.tpl14 .g-eyebrow i{ color:var(--g-sage); }
.tpl14 .g-leaf-divider{ display:flex; align-items:center; justify-content:center; gap:1.2rem; margin:2rem 0; color:var(--g-sage); }
.tpl14 .g-leaf-divider::before,.tpl14 .g-leaf-divider::after{ content:''; width:6rem; height:1px; background:rgba(var(--primary-rgb),.18); }
.tpl14 .g-accent{ color: var(--g-sage-dk); }
.tpl14 .g-head{ text-align:center; max-width:72rem; margin:0 auto 4.8rem; }
.tpl14 .g-head h2{ font-family:var(--font-heading); font-size:clamp(2.6rem,4vw,3.6rem); font-weight:800; letter-spacing:-.02em; line-height:1.1; margin:1.2rem 0 0; color:var(--g-ink); }
.tpl14 .g-head h2 .g-accent{ color:var(--g-sage-dk); }
.tpl14 .g-head-sub{ font-size:1.45rem; color:var(--g-ink-2); line-height:1.75; margin:1rem auto 0; max-width:56rem; }

/* ─── HERO — TERRARIUM GARDEN STAGE ───
   Multi-layer organic background: aurora mist + golden-hour halo +
   botanical dot-field + soft vine watermark. All layers use theme
   tokens so admin palette shifts re-tint the whole garden. */
.tpl14 .g-hero{
  padding:8.5rem 0 8.4rem; position:relative; overflow:hidden;
  background: var(--g-sage-deeper);
  isolation:isolate;
}
.tpl14 .g-hero .g-container{ position:relative; }
.tpl14 .g-hero .g-container::after{
  content:''; position:absolute; left:-2.4rem; right:-2.4rem; bottom:-4.2rem; height:22px; pointer-events:none; z-index:1;
  background: var(--white);
  opacity:1;
}
.tpl14 .g-hero::before{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background: transparent;
  opacity:.9;
}
.tpl14 .g-hero::after{
  content:''; position:absolute; pointer-events:none; z-index:0;
  width:62rem; height:62rem; right:-14rem; top:-18rem;
  background: transparent;
  border-radius:50%; opacity:.7;
}
.tpl14 .g-hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:4.4rem; align-items:center; position:relative; z-index:1; }
/* subtle botanical watermark vine — white on deep, ultra-low opacity */
.tpl14 .g-hero-grid::before{
  content:''; position:absolute; pointer-events:none; z-index:-1;
  left:-6rem; right:-6rem; top:-3rem; bottom:-2rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='520' viewBox='0 0 720 520'%3E%3Cpath d='M 60 420 C 160 120 380 40 500 160 C 620 270 560 410 460 460' stroke='rgba(255,255,255,0.055)' stroke-width='2.2' fill='none' stroke-linecap='round'/%3E%3Cpath d='M 500 160 C 470 190 440 220 410 250 M 500 160 C 530 190 560 225 580 260 M 460 260 C 430 285 400 310 370 335 M 360 360 C 390 375 420 390 450 405' stroke='rgba(255,255,255,0.035)' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3Ccircle cx='62' cy='418' r='3.2' fill='rgba(255,255,255,0.05)'/%3E%3Ccircle cx='458' cy='458' r='2.6' fill='rgba(255,255,255,0.05)'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:68% 52%; background-size:720px 520px; opacity:.55;
}
.tpl14 .g-eyebrow{ background:rgba(var(--primary-rgb),.08); border:1px solid rgba(var(--primary-rgb),.14); padding:.45rem .95rem; border-radius:999px; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); box-shadow:0 4px 14px rgba(var(--primary-rgb),.06); }
.tpl14 .g-hero .g-eyebrow{ background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.16); color:var(--white); box-shadow:0 4px 14px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.10); }
.tpl14 .g-hero .g-eyebrow i{ color:var(--g-gold); }
.tpl14 .g-hero h1{ font-family:var(--font-heading); font-size:clamp(3.2rem,5vw,5rem); font-weight:800; line-height:.98; letter-spacing:-.035em; margin:1.5rem 0 .9rem; color:var(--white); text-wrap:balance; text-shadow:0 8px 28px rgba(0,0,0,.18); }
.tpl14 .g-hero h1 span{ color:var(--g-gold); position:relative; display:inline-block; text-shadow:0 2px 14px rgba(var(--gold-rgb),.22); }
.tpl14 .g-hero h1 span::after{ content:''; position:absolute; left:-.12em; right:-.10em; bottom:.08em; height:.34em; background: var(--g-gold); border-radius:999px; z-index:-1; transform:rotate(-.6deg); opacity:.35; }
.tpl14 .g-hero h1::after{ content:''; display:block; width:5.2rem; height:3px; border-radius:999px; margin:1rem 0 0; background: var(--g-gold); opacity:.9; }
.tpl14 .g-hero p{ font-size:1.52rem; color:rgba(255,255,255,.88); line-height:1.8; max-width:48rem; margin:0 0 .7rem; }
.tpl14 .g-hero-tagline{ font-style:italic; font-size:1.35rem; color:rgba(255,255,255,.92); font-weight:600; margin-bottom:1.2rem !important; padding-left:1rem; border-left:3px solid rgba(255,255,255,.22); text-shadow:0 2px 10px rgba(0,0,0,.12); }
.tpl14 .g-hero .g-head h2, .tpl14 .g-hero .g-head p{ color:var(--white); }
.tpl14 .g-hero-cta{ display:flex; flex-wrap:wrap; gap:1rem; margin:2rem 0 2.4rem; }
.tpl14 .g-btn{ display:inline-flex; align-items:center; gap:.8rem; padding:1.25rem 2.4rem; border-radius:999px; font-family:var(--font-body); font-weight:800; font-size:1.3rem; text-decoration:none; transition:.25s; border:2px solid transparent; cursor:pointer; position:relative; overflow:hidden; isolation:isolate; }
.tpl14 .g-btn::before{ content:''; position:absolute; inset:-1px; background: transparent; transform:translateX(-120%); transition:transform .6s cubic-bezier(.4,0,.2,1); z-index:-1; }
.tpl14 .g-btn:hover::before{ transform:translateX(120%); }
.tpl14 .g-btn--terra{ background:var(--g-terracotta); color:var(--white); box-shadow:0 10px 26px rgba(var(--accent-rgb),.28), inset 0 1px 0 rgba(255,255,255,.22); }
.tpl14 .g-btn--terra:hover{ background:var(--g-terracotta-dk); transform:translateY(-3px); box-shadow:0 16px 34px rgba(var(--accent-rgb),.38), inset 0 1px 0 rgba(255,255,255,.18); }
.tpl14 .g-hero .g-btn--outline{ border-color:rgba(255,255,255,.72); color:var(--white); background:rgba(255,255,255,.08); backdrop-filter:blur(8px); }
.tpl14 .g-hero .g-btn--outline:hover{ background:var(--white); color:var(--g-sage-deeper); border-color:var(--white); }
.tpl14 .g-btn--outline{ border-color:var(--g-sage-dk); color:var(--g-sage-dk); background:rgba(255,255,255,.72); backdrop-filter:blur(6px); }
.tpl14 .g-btn--outline:hover{ background:var(--g-sage-dk); color:var(--white); }
.tpl14 .g-btn--outline-light{ border-color:rgba(255,255,255,.7); color:var(--white); }
.tpl14 .g-btn--outline-light:hover{ background:var(--white); color:var(--g-sage-deeper); }
.tpl14 .g-hero-photo{ position:relative; padding:1rem; }
.tpl14 .g-hero-photo::before{
  content:''; position:absolute; inset:0; border-radius:50% 50% 18% 18% / 62% 62% 18% 18%;
  background: linear-gradient(135deg, rgba(255,255,255,.10) 0%, rgba(var(--gold-rgb),.08) 100%);
  border:1px solid rgba(255,255,255,.14);
  transform:rotate(-1.2deg);
  box-shadow:0 20px 50px rgba(0,0,0,.12);
}
.tpl14 .g-hero-photo img{
  width:100%; aspect-ratio:4/3; object-fit:cover; position:relative; z-index:1;
  border-radius:50% 50% 14% 14% / 68% 68% 14% 14%;
  box-shadow:0 28px 60px rgba(0,0,0,.22), 0 8px 22px rgba(0,0,0,.14);
  border:4px solid rgba(255,255,255,.96);
  outline:1px solid rgba(255,255,255,.18);
  outline-offset:6px;
}
.tpl14 .g-hero-photo::after{
  content:''; position:absolute; z-index:2; left:1.8rem; right:1.8rem; bottom:1.4rem; height:34%;
  background: rgba(var(--primary-deeper-rgb),.10);
  border-radius:0 0 14% 14% / 0 0 14% 14%;
  pointer-events:none;
}
.tpl14 .g-hero-badge{
  position:absolute; bottom:.2rem; left:.2rem; z-index:3;
  background:rgba(255,255,255,.92); backdrop-filter:blur(10px) saturate(160%); -webkit-backdrop-filter:blur(10px) saturate(160%);
  border-radius:18px; padding:1.2rem 1.6rem; display:flex; align-items:center; gap:1rem;
  border:1px solid rgba(var(--primary-rgb),.10);
  box-shadow:0 16px 36px rgba(var(--primary-deeper-rgb),.14), inset 0 1px 0 rgba(255,255,255,.8);
}
.tpl14 .g-hero-badge i{ width:4.2rem; height:4.2rem; border-radius:14px; background: var(--g-sage); color:var(--white); display:flex; align-items:center; justify-content:center; font-size:1.7rem; flex-shrink:0; box-shadow:0 8px 18px rgba(var(--primary-rgb),.22); transform:rotate(-6deg); }
.tpl14 .g-hero-badge strong{ display:block; font-family:var(--font-heading); font-size:1.6rem; color:var(--g-ink); line-height:1; }
.tpl14 .g-hero-badge span{ font-size:.98rem; color:var(--g-ink-mute); letter-spacing:.08em; text-transform:uppercase; font-weight:800; }
.tpl14 .g-hero-sprout{ position:absolute; pointer-events:none; z-index:2; }
.tpl14 .g-hero-sprout--1{
  top:-.4rem; right:1.6rem; width:5.2rem; height:5.2rem;
  background:rgba(255,255,255,.08); border:1.5px solid rgba(255,255,255,.16);
  border-radius:50% 50% 50% 10% / 50% 50% 50% 10%; transform:rotate(18deg);
  box-shadow:0 8px 22px rgba(0,0,0,.08);
}
.tpl14 .g-hero-sprout--2{
  bottom:3.4rem; right:-.2rem; width:3.8rem; height:3.8rem;
  background: rgba(255,255,255,.10);
  border:1.5px solid rgba(255,255,255,.18);
  border-radius:50% 10% 50% 50% / 50% 10% 50% 50%; transform:rotate(-14deg);
  box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.tpl14 .g-hero-trust{ display:flex; gap:.8rem; flex-wrap:wrap; margin-top:.8rem; }
.tpl14 .g-hero .g-trust-pill{
  display:flex; align-items:center; gap:.8rem; padding:.75rem 1.15rem;
  background:rgba(255,255,255,.09); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.14); border-radius:999px; box-shadow:0 6px 18px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.10);
  transition:.2s;
}
.tpl14 .g-hero .g-trust-pill:hover{ transform:translateY(-2px); background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.20); }
.tpl14 .g-hero .g-trust-pill i{
  width:2.6rem; height:2.6rem; border-radius:50%; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.16);
  display:flex; align-items:center; justify-content:center; color:var(--g-gold); font-size:1.1rem; flex-shrink:0;
}
.tpl14 .g-hero .g-trust-pill strong{ font-size:1.15rem; font-weight:800; color:var(--white); display:block; line-height:1; }
.tpl14 .g-hero .g-trust-pill span{ font-size:.9rem; color:rgba(255,255,255,.72); font-weight:600; }
.tpl14 .g-trust-pill{
  display:flex; align-items:center; gap:.8rem; padding:.75rem 1.15rem;
  background:rgba(255,255,255,.78); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(var(--primary-rgb),.10); border-radius:999px; box-shadow:0 6px 18px rgba(var(--primary-rgb),.06), inset 0 1px 0 rgba(255,255,255,.7);
  transition:.2s;
}
.tpl14 .g-trust-pill:hover{ transform:translateY(-2px); background:var(--white); border-color:rgba(var(--primary-rgb),.16); }
.tpl14 .g-trust-pill i{
  width:2.6rem; height:2.6rem; border-radius:50%; background:var(--g-sage-mist); border:1px solid rgba(var(--primary-rgb),.12);
  display:flex; align-items:center; justify-content:center; color:var(--g-sage); font-size:1.1rem; flex-shrink:0;
}
.tpl14 .g-trust-pill strong{ font-size:1.15rem; font-weight:800; color:var(--g-ink); display:block; line-height:1; }
.tpl14 .g-trust-pill span{ font-size:.9rem; color:var(--g-ink-mute); font-weight:600; }

/* ─── TICKER ─── */
.tpl14 .g-ticker{ background:var(--g-sage-deeper); color:var(--white); padding:1.1rem 0; overflow:hidden; white-space:nowrap; position:relative; }
.tpl14 .g-ticker::before,.tpl14 .g-ticker::after{ content:''; position:absolute; top:0; bottom:0; width:5rem; z-index:2; pointer-events:none; }
.tpl14 .g-ticker::before{ left:0; background: var(--g-sage-deeper); }
.tpl14 .g-ticker::after{ right:0; background: var(--g-sage-deeper); }
.tpl14 .g-ticker-track{ display:inline-flex; gap:3rem; align-items:center; font-weight:800; font-size:1.25rem; text-transform:uppercase; letter-spacing:.1em; animation:gScroll 28s linear infinite; padding-left:3rem; }
.tpl14 .g-ticker-track span{ display:inline-flex; align-items:center; gap:1.2rem; }
.tpl14 .g-ticker-dot{ width:.55rem; height:.55rem; background:var(--g-gold); border-radius:50%; flex-shrink:0; }
@keyframes gScroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ─── GROWTH PATH — LEVELS — premium modern garden walk ─── */
.tpl14 .g-growth{
  background: var(--white);
  padding:8.5rem 0 8rem; position:relative; overflow:hidden;
}
.tpl14 .g-growth::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background: transparent;
  opacity:.7;
}
.tpl14 .g-growth .g-container{ position:relative; z-index:1; }
.tpl14 .g-path{ position:relative; display:flex; justify-content:space-between; align-items:flex-start; gap:2rem; }
.tpl14 .g-path::before{
  content:''; position:absolute; top:5.4rem; left:12%; right:12%; height:2px;
  background: var(--g-sage);
  opacity:.18;
}
.tpl14 .g-path::after{
  content:''; position:absolute; top:5.05rem; left:50%; width:.75rem; height:.75rem; background:var(--g-gold); border-radius:50%; box-shadow:0 0 0 6px rgba(var(--gold-rgb),.12), -18rem 0 0 0 var(--g-sage), 18rem 0 0 0 var(--g-terracotta); opacity:.9; transform:translateX(-50%);
}
.tpl14 .g-path-item{
  flex:1; text-align:center; text-decoration:none; color:var(--g-ink); position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center; padding:1.8rem 1.2rem 1.4rem;
  background:rgba(255,255,255,.72); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(var(--primary-rgb),.07); border-radius:20px; transition:.32s cubic-bezier(.4,0,.2,1);
  box-shadow:0 2px 14px rgba(var(--primary-deeper-rgb),.04);
}
.tpl14 .g-path-item:hover{
  background:var(--white); border-color:rgba(var(--primary-rgb),.14); transform:translateY(-6px);
  box-shadow:0 18px 36px rgba(var(--primary-deeper-rgb),.08), 0 4px 14px rgba(var(--primary-rgb),.06);
}
.tpl14 .g-path-ring{
  width:11rem; height:11rem; border-radius:50%;
  background:radial-gradient(circle at 30% 28%, var(--white) 0%, var(--g-cream) 58%, var(--g-sage-mist) 100%);
  border:2.5px solid var(--white); outline:2px solid rgba(var(--primary-rgb),.12);
  outline-offset:3px;
  display:flex; align-items:center; justify-content:center; margin:0 auto 1.2rem;
  font-size:3.1rem; color:var(--g-sage-dk); transition:.35s cubic-bezier(.34,1.56,.64,1);
  box-shadow:0 12px 28px rgba(var(--primary-rgb),.10), inset 0 1px 0 rgba(255,255,255,.9);
  position:relative;
}
.tpl14 .g-path-ring::after{
  content:''; position:absolute; inset:14%; border-radius:50%; border:1px dashed rgba(var(--primary-rgb),.14); opacity:0; transition:.3s;
}
.tpl14 .g-path-item:hover .g-path-ring{ background: var(--g-sage); color:var(--white); transform:scale(1.07) rotate(-3deg); outline-color:rgba(var(--primary-rgb),.22); box-shadow:0 16px 34px rgba(var(--primary-rgb),.16); }
.tpl14 .g-path-item:hover .g-path-ring::after{ opacity:1; border-color:rgba(255,255,255,.35); transform:rotate(18deg); }
.tpl14 .g-path-ring--nursery{ color:var(--g-terracotta); }
.tpl14 .g-path-ring--primary{ color:var(--g-sage-dk); }
.tpl14 .g-path-ring--secondary{ color:var(--g-sage-deeper); }
.tpl14 .g-path-num{ font-size:.92rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--g-terracotta); margin-bottom:.35rem; background:rgba(var(--accent-rgb),.08); padding:.22rem .6rem; border-radius:999px; }
.tpl14 .g-path-item h4{ font-family:var(--font-heading); font-size:1.9rem; margin:0 0 .5rem; color:var(--g-ink); letter-spacing:-.01em; }
.tpl14 .g-path-item p{ font-size:1.28rem; color:var(--g-ink-2); line-height:1.65; max-width:24rem; margin:0 auto .75rem; }
.tpl14 .g-path-meta{ display:flex; gap:.5rem; flex-wrap:wrap; justify-content:center; font-size:1rem; color:var(--g-ink-2); }
.tpl14 .g-path-meta span{ display:inline-flex; align-items:center; gap:.35rem; background:var(--g-sage-mist); border:1px solid rgba(var(--primary-rgb),.08); padding:.28rem .65rem; border-radius:999px; font-weight:700; }
.tpl14 .g-path-meta i{ color:var(--g-terracotta); font-size:.9rem; }

/* ─── PROGRAMMES — deep terrarium beds (premium dark) ─── */
.tpl14 .g-programs{
  padding:7.5rem 0; position:relative; overflow:hidden; isolation:isolate;
  background: var(--g-sage-deeper);
}
.tpl14 .g-programs::before{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background: transparent;
  opacity:.85;
}
.tpl14 .g-programs .g-container{ position:relative; z-index:1; }
.tpl14 .g-programs .g-head h2{ color:var(--white); text-shadow:0 6px 22px rgba(0,0,0,.14); }
.tpl14 .g-programs .g-head h2 .g-accent{ color:var(--g-gold); }
.tpl14 .g-programs .g-head-sub{ color:rgba(255,255,255,.82); }
.tpl14 .g-programs .g-eyebrow{ background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.16); color:var(--white); }
.tpl14 .g-programs .g-eyebrow i{ color:var(--g-gold); }
.tpl14 .g-programs-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; }
.tpl14 .g-program{
  background:rgba(255,255,255,.09); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.12); border-radius:18px; padding:2.4rem 1.8rem 2rem; text-align:center;
  transition:.32s cubic-bezier(.4,0,.2,1); position:relative; overflow:hidden;
  box-shadow:0 8px 22px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.08);
}
.tpl14 .g-program::before{
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--g-sage) 0%, var(--g-gold) 48%, var(--g-terracotta) 100%); opacity:0; transition:.3s;
}
.tpl14 .g-program::after{
  content:''; position:absolute; bottom:-18%; right:-12%; width:72%; height:55%; border-radius:50%;
  background: transparent; pointer-events:none; opacity:0; transition:.3s;
}
.tpl14 .g-program:hover{ transform:translateY(-6px); background:rgba(255,255,255,.96); box-shadow:0 18px 36px rgba(0,0,0,.14), 0 6px 14px rgba(0,0,0,.08); border-color:rgba(255,255,255,.22); }
.tpl14 .g-program:hover::before{ opacity:1; }
.tpl14 .g-program:hover::after{ opacity:1; }
.tpl14 .g-prog-num{ font-size:.78rem; font-weight:800; letter-spacing:.14em; color:var(--g-gold); background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.14); padding:.2rem .5rem; border-radius:999px; }
.tpl14 .g-program:hover .g-prog-num{ color:var(--g-terracotta); background:rgba(var(--accent-rgb),.08); border-color:transparent; }
.tpl14 .g-program i{
  display:flex; align-items:center; justify-content:center; width:5.2rem; height:5.2rem; margin:1.1rem auto .7rem;
  font-size:2.1rem; color:var(--white);
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.14); border-radius:16px;
  box-shadow:0 6px 16px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.08);
  transition:.3s;
}
.tpl14 .g-program:hover i{ transform:rotate(-6deg) scale(1.05); background: var(--g-sage); color:var(--white); border-color:transparent; box-shadow:0 10px 22px rgba(var(--primary-rgb),.16); }
.tpl14 .g-program h4{ font-family:var(--font-heading); font-size:1.6rem; margin:0 0 .45rem; color:var(--white); letter-spacing:-.01em; }
.tpl14 .g-program:hover h4{ color:var(--g-ink); }
.tpl14 .g-program p{ font-size:1.28rem; color:rgba(255,255,255,.78); line-height:1.65; margin:0; }
.tpl14 .g-program:hover p{ color:var(--g-ink-2); }

/* ─── COMPASS — VISION / MISSION — split botanical ledger ─── */
.tpl14 .g-compass{
  padding:7.5rem 0; position:relative; overflow:hidden;
  background: var(--white);
}
.tpl14 .g-compass .g-container{ position:relative; z-index:1; }
.tpl14 .g-compass-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.8rem; }
.tpl14 .g-compass-card{
  background:rgba(255,255,255,.9); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(var(--primary-rgb),.08); border-radius:22px; padding:3rem 2.6rem 2.6rem; position:relative; overflow:hidden; transition:.32s cubic-bezier(.4,0,.2,1);
  box-shadow:0 4px 18px rgba(var(--primary-deeper-rgb),.04);
}
.tpl14 .g-compass-card::before{
  content:''; position:absolute; top:0; left:1.6rem; width:5.2rem; height:4px;
  background: var(--g-sage); border-radius:0 0 8px 8px;
}
.tpl14 .g-compass-card--mission::before{ background: var(--g-terracotta); }
.tpl14 .g-compass-card::after{
  content:''; position:absolute; bottom:-18%; right:-12%; width:68%; height:52%; border-radius:50%;
  background: transparent; pointer-events:none; opacity:0; transition:.3s;
}
.tpl14 .g-compass-card:hover{ transform:translateY(-6px); background:var(--white); box-shadow:0 18px 36px rgba(var(--primary-deeper-rgb),.08); border-color:rgba(var(--primary-rgb),.12); }
.tpl14 .g-compass-card:hover::after{ opacity:1; }
.tpl14 .g-compass-num{ font-size:.78rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--white); background: var(--g-sage); padding:.22rem .55rem; border-radius:999px; box-shadow:0 4px 12px rgba(var(--primary-rgb),.14); }
.tpl14 .g-compass-card--mission .g-compass-num{ background: var(--g-terracotta); }
.tpl14 .g-compass-icon{
  width:5.4rem; height:5.4rem; border-radius:16px;
  background: var(--g-sage-mist);
  border:1px solid rgba(var(--primary-rgb),.10); display:flex; align-items:center; justify-content:center;
  font-size:2rem; color:var(--g-sage-dk); margin:1.1rem 0 1rem;
  box-shadow:0 6px 16px rgba(var(--primary-rgb),.06), inset 0 1px 0 rgba(255,255,255,.8);
}
.tpl14 .g-compass-card h3{ font-family:var(--font-heading); font-size:2.05rem; margin:0 0 .9rem; color:var(--g-ink); letter-spacing:-.01em; }
.tpl14 .g-compass-text{ font-size:1.42rem; color:var(--g-ink-2); line-height:1.75; }
.tpl14 .g-compass-list{ list-style:none; padding:0; margin:0; }
.tpl14 .g-compass-list li{ display:flex; gap:.8rem; padding:1rem 0; border-bottom:1px dashed rgba(var(--primary-rgb),.12); font-size:1.35rem; color:var(--g-ink-2); line-height:1.6; }
.tpl14 .g-compass-list li:last-child{ border-bottom:none; }
.tpl14 .g-compass-list i{ color:var(--g-sage); margin-top:.2rem; flex-shrink:0; }

/* ─── CAROUSEL — Seeds of Thought — deep glass deck ─── */
.tpl14 .g-carousel{
  padding:7.5rem 0; position:relative; overflow:hidden; isolation:isolate;
  background: var(--g-sage-deeper);
}
.tpl14 .g-carousel::before{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background: transparent;
  opacity:.65;
}
.tpl14 .g-carousel .g-container{ position:relative; z-index:1; }
.tpl14 .g-carousel .g-head h2{ color:var(--white); text-shadow:0 6px 22px rgba(0,0,0,.14); }
.tpl14 .g-carousel .g-head h2 .g-accent{ color:var(--g-gold); }
.tpl14 .g-carousel .g-head-sub{ color:rgba(255,255,255,.82); }
.tpl14 .g-carousel .g-eyebrow{ background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.16); color:var(--white); }
.tpl14 .g-carousel .g-eyebrow i{ color:var(--g-gold); }
.tpl14 .g-carousel-stage{ overflow:hidden; }
.tpl14 .g-carousel-track{ display:flex; gap:1.8rem; transition:transform .6s cubic-bezier(.4,0,.2,1); will-change:transform; }
.tpl14 .g-carousel-card{ flex:0 0 calc((100% - 3.6rem)/3); background:var(--white); border:1px solid var(--g-line); border-radius:16px; overflow:hidden; box-shadow:var(--shadow-sm); transition:.25s; }
.tpl14 .g-carousel-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.tpl14 .g-carousel-img{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--g-sage-mist); }
.tpl14 .g-carousel-img img{ width:100%; height:100%; object-fit:cover; transition:transform .6s; }
.tpl14 .g-carousel-card:hover .g-carousel-img img{ transform:scale(1.06); }
.tpl14 .g-carousel-tag{ position:absolute; top:1rem; left:1rem; background:var(--white); color:var(--g-sage-dk); font-size:.95rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; padding:.35rem .8rem; border-radius:999px; box-shadow:var(--shadow-sm); }
.tpl14 .g-carousel-body{ padding:1.6rem 1.6rem 1.8rem; }
.tpl14 .g-carousel-body p{ font-size:1.35rem; color:var(--g-ink-2); line-height:1.65; margin:0; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
.tpl14 .g-carousel-controls{ display:flex; align-items:center; justify-content:center; gap:1.2rem; margin-top:2rem; }
.tpl14 .g-carousel-arrow{ width:4rem; height:4rem; border-radius:50%; border:1.5px solid rgba(255,255,255,.22); background:rgba(255,255,255,.10); backdrop-filter:blur(8px); color:var(--white); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:.2s; }
.tpl14 .g-carousel-arrow:hover{ background:var(--white); color:var(--g-sage-deeper); border-color:var(--white); transform:scale(1.06); }
.tpl14 .g-carousel-dots{ display:flex; gap:.5rem; align-items:center; }
.tpl14 .g-carousel-dots button{ width:.7rem; height:.7rem; border-radius:50%; border:none; background:rgba(255,255,255,.28); cursor:pointer; transition:.2s; padding:0; }
.tpl14 .g-carousel-dots button.is-active{ background:var(--g-gold); width:2.2rem; border-radius:999px; box-shadow:0 0 0 5px rgba(var(--gold-rgb),.14); }

/* ─── TREE RINGS — STATS — deep terrarium night census ─── */
.tpl14 .g-rings{
  padding:7.5rem 0; position:relative; overflow:hidden; isolation:isolate;
  background: var(--g-sage-deeper);
}
.tpl14 .g-rings::before{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image: radial-gradient(circle, rgba(255,255,255,.045) 1.05px, transparent 1.65px);
  background-size:32px 32px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 58%, transparent 88%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 58%, transparent 88%);
  opacity:.75;
}
.tpl14 .g-rings .g-container{ position:relative; z-index:1; }
.tpl14 .g-rings .g-head h2{ color:var(--white); text-shadow:0 6px 22px rgba(0,0,0,.14); }
.tpl14 .g-rings .g-head h2 .g-accent{ color:var(--g-gold); }
.tpl14 .g-rings .g-head-sub{ color:rgba(255,255,255,.82); }
.tpl14 .g-rings .g-eyebrow{ background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.16); color:var(--white); }
.tpl14 .g-rings .g-eyebrow i{ color:var(--g-gold); }
.tpl14 .g-rings-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.6rem; }
.tpl14 .g-ring-stat{
  text-align:center; background:rgba(255,255,255,.09); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.12); border-radius:22px; padding:2.6rem 1.5rem 2.2rem; transition:.32s cubic-bezier(.4,0,.2,1);
  box-shadow:0 8px 22px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.08); position:relative; overflow:hidden;
}
.tpl14 .g-ring-stat::before{
  content:''; position:absolute; top:-14%; right:-12%; width:70%; height:50%; border-radius:50%; background: transparent; pointer-events:none; opacity:0; transition:.3s;
}
.tpl14 .g-ring-stat:hover{ transform:translateY(-6px); background:rgba(255,255,255,.96); box-shadow:0 18px 36px rgba(0,0,0,.14); border-color:rgba(255,255,255,.22); }
.tpl14 .g-ring-visual{
  width:14.2rem; height:14.2rem; margin:0 auto 1.1rem; border-radius:50%; position:relative; display:flex; align-items:center; justify-content:center;
  background: var(--white);
  border:1px solid rgba(var(--primary-rgb),.07);
  box-shadow:0 10px 28px rgba(var(--primary-rgb),.08), inset 0 1px 0 rgba(255,255,255,.9);
}
.tpl14 .g-ring-visual::before{
  content:''; position:absolute; inset:22%; border-radius:50%; background: transparent; pointer-events:none;
}
.tpl14 .g-ring-visual strong{ position:relative; z-index:1; font-family:var(--font-heading); font-size:2.5rem; font-weight:800; color:var(--g-sage-deeper); letter-spacing:-.02em; text-shadow:none; }
.tpl14 .g-ring-stat:hover .g-ring-visual strong{ color:var(--g-sage-deeper); text-shadow:none; }
.tpl14 .g-ring-stat span{ position:relative; display:block; font-weight:800; text-transform:uppercase; letter-spacing:.08em; font-size:1.05rem; color:var(--g-gold); margin-bottom:.35rem; }
.tpl14 .g-ring-stat:hover span{ color:var(--g-sage-dk); }
.tpl14 .g-ring-stat small{ position:relative; font-size:1.18rem; color:rgba(255,255,255,.72); line-height:1.55; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.tpl14 .g-ring-stat:hover small{ color:var(--g-ink-mute); }

/* ─── VIDEO — See Us Grow — deep terrarium screening ─── */
.tpl14 .g-video{
  padding:7.5rem 0; position:relative; overflow:hidden; isolation:isolate;
  background: var(--g-sage-deeper);
}
.tpl14 .g-video::before{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background: transparent;
  opacity:.65;
}
.tpl14 .g-video .g-container{ position:relative; z-index:1; }
.tpl14 .g-video .g-head h2{ color:var(--white); text-shadow:0 6px 22px rgba(0,0,0,.14); }
.tpl14 .g-video .g-head h2 .g-accent{ color:var(--g-gold); }
.tpl14 .g-video .g-head-sub{ color:rgba(255,255,255,.82); }
.tpl14 .g-video .g-eyebrow{ background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.16); color:var(--white); }
.tpl14 .g-video .g-eyebrow i{ color:var(--g-gold); }
.tpl14 .g-video-text h3{ color:var(--white); }
.tpl14 .g-video-text p{ color:rgba(255,255,255,.82); }
.tpl14 .g-video .g-btn--outline{ border-color:rgba(255,255,255,.72); color:var(--white); background:rgba(255,255,255,.08); backdrop-filter:blur(8px); }
.tpl14 .g-video .g-btn--outline:hover{ background:var(--white); color:var(--g-sage-deeper); border-color:var(--white); }
.tpl14 .g-video-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:3rem; align-items:center; }
.tpl14 .g-video-frame{ position:relative; border-radius:20px; overflow:hidden; background:var(--g-sage-deeper); box-shadow:var(--shadow-lg); cursor:pointer; }
.tpl14 .g-video-frame img{ width:100%; height:36rem; object-fit:cover; opacity:.92; transition:.3s; }
.tpl14 .g-video-frame:hover img{ opacity:1; transform:scale(1.02); }
.tpl14 .g-video-play{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.tpl14 .g-video-play i{ width:6.4rem; height:6.4rem; border-radius:50%; background:var(--white); color:var(--g-sage-dk); display:flex; align-items:center; justify-content:center; font-size:2.2rem; box-shadow:0 12px 28px rgba(0,0,0,.18); transition:.25s; }
.tpl14 .g-video-frame:hover .g-video-play i{ transform:scale(1.08); background:var(--g-terracotta); color:var(--white); }
.tpl14 .g-video-cap{ position:absolute; left:1.2rem; bottom:1.2rem; background:rgba(255,255,255,.92); color:var(--g-ink); font-size:1.05rem; font-weight:700; padding:.5rem 1rem; border-radius:999px; display:inline-flex; align-items:center; gap:.5rem; }
.tpl14 .g-video-text h3{ font-family:var(--font-heading); font-size:clamp(2rem,3vw,2.5rem); margin:0 0 .9rem; color:var(--white); letter-spacing:-.02em; line-height:1.08; text-shadow:0 2px 14px rgba(0,0,0,.18); }
.tpl14 .g-video-text h3 .g-accent-gold{ color:var(--g-gold); }
.tpl14 .g-video-text h3 .g-accent-terra{ color:var(--g-terracotta); text-shadow:0 0 12px rgba(var(--accent-rgb),.22); }
.tpl14 .g-video-text p{ font-size:1.38rem; color:rgba(255,255,255,.88); line-height:1.7; max-width:48rem; }
.tpl14 .g-video-text p .g-em-gold{ font-style:normal; font-weight:800; color:var(--g-gold); }
.tpl14 .g-video-text p .g-em-terra{ font-style:normal; font-weight:800; color:var(--g-terracotta); }
.tpl14 .g-video-text p .g-em-sage{ font-style:normal; font-weight:800; color:var(--g-sage-light); text-shadow:0 1px 6px rgba(0,0,0,.18); }
.tpl14 .g-video-pills{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1.2rem; }
.tpl14 .g-video .g-pill{ display:inline-flex; align-items:center; gap:.4rem; background:rgba(255,255,255,.10); color:var(--white); font-size:1.12rem; font-weight:700; padding:.4rem .9rem; border-radius:999px; border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(8px); }
.tpl14 .g-video .g-pill i{ color:var(--g-gold); }
.tpl14 .g-video-pills .g-pill:nth-child(1){ background:rgba(var(--accent-rgb),.14); border-color:rgba(var(--accent-rgb),.22); }
.tpl14 .g-video-pills .g-pill:nth-child(1) i{ color:var(--g-terracotta); }
.tpl14 .g-video-pills .g-pill:nth-child(2){ background:rgba(255,255,255,.10); border-color:rgba(var(--primary-light-rgb),.18); }
.tpl14 .g-video-pills .g-pill:nth-child(2) i{ color:var(--g-sage-light); }
.tpl14 .g-video-pills .g-pill:nth-child(3){ background:rgba(var(--gold-rgb),.14); border-color:rgba(var(--gold-rgb),.22); }
.tpl14 .g-video-pills .g-pill:nth-child(3) i{ color:var(--g-gold); }
.tpl14 .g-pill{ display:inline-flex; align-items:center; gap:.4rem; background:var(--g-sage-mist); color:var(--g-sage-dk); font-size:1.15rem; font-weight:700; padding:.4rem .9rem; border-radius:999px; border:1px solid rgba(var(--primary-rgb),.12); }
.tpl14 .g-pill i{ color:var(--g-terracotta); }

/* ─── VALUES — LEAF CLUSTER — modern herbarium cards ─── */
.tpl14 .g-values{
  padding:7.5rem 0; position:relative; overflow:hidden;
  background: var(--white);
}
.tpl14 .g-values .g-container{ position:relative; z-index:1; }
.tpl14 .g-values-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(22rem,1fr)); gap:1.6rem; }
.tpl14 .g-value-leaf{
  background:rgba(255,255,255,.92); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(var(--primary-rgb),.09); border-radius:22px; padding:2.5rem 1.8rem 2.2rem; text-align:center;
  transition:.32s cubic-bezier(.4,0,.2,1); position:relative; overflow:hidden;
  box-shadow:0 4px 16px rgba(var(--primary-deeper-rgb),.04);
}
.tpl14 .g-value-leaf::before{
  content:''; position:absolute; top:-18%; right:-14%; width:68%; height:52%; border-radius:50%;
  background: transparent; pointer-events:none; opacity:0; transition:.3s;
}
.tpl14 .g-value-leaf::after{
  content:''; position:absolute; left:1.2rem; right:1.2rem; bottom:1.1rem; height:1px;
  background: var(--g-line); opacity:0; transition:.3s;
}
.tpl14 .g-value-leaf:nth-child(3n+1){ transform:rotate(-.35deg); }
.tpl14 .g-value-leaf:nth-child(3n+2){ transform:rotate(.35deg); }
.tpl14 .g-value-leaf:nth-child(3n+3){ transform:rotate(-.2deg); }
.tpl14 .g-value-leaf:hover{
  background:var(--white); border-color:rgba(var(--primary-rgb),.14); transform:translateY(-6px) rotate(0deg) !important;
  box-shadow:0 18px 36px rgba(var(--primary-deeper-rgb),.08), 0 6px 14px rgba(var(--primary-rgb),.06);
}
.tpl14 .g-value-leaf:hover::before{ opacity:1; }
.tpl14 .g-value-leaf:hover::after{ opacity:1; }
.tpl14 .g-value-num{
  font-size:.78rem; font-weight:800; letter-spacing:.14em; color:var(--white);
  display:inline-block; padding:.22rem .55rem; border-radius:999px;
  background: var(--g-terracotta);
  box-shadow:0 4px 12px rgba(var(--accent-rgb),.18); margin-bottom:.7rem;
}
.tpl14 .g-value-leaf i{
  display:flex; align-items:center; justify-content:center; width:5rem; height:5rem; margin:0 auto .75rem;
  font-size:2rem; color:var(--g-sage-dk);
  background: var(--g-sage-mist);
  border:1px solid rgba(var(--primary-rgb),.10); border-radius:16px;
  box-shadow:0 6px 16px rgba(var(--primary-rgb),.06), inset 0 1px 0 rgba(255,255,255,.8);
  transition:.3s; position:relative;
}
.tpl14 .g-value-leaf:hover i{ transform:rotate(-6deg) scale(1.05); background: var(--g-sage); color:var(--white); border-color:transparent; box-shadow:0 10px 22px rgba(var(--primary-rgb),.16); }
.tpl14 .g-value-leaf h4{ font-family:var(--font-heading); font-size:1.52rem; margin:0 0 .45rem; color:var(--g-ink); letter-spacing:-.01em; }
.tpl14 .g-value-leaf p{ font-size:1.22rem; color:var(--g-ink-2); line-height:1.6; margin:0; }

/* ─── PORTAL — greenhouse bento dashboard ─── */
.tpl14 .g-portal{
  padding:7.5rem 0; position:relative; overflow:hidden;
  background: var(--white);
}
.tpl14 .g-portal .g-container{ position:relative; z-index:1; }
.tpl14 .g-portal-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; grid-auto-rows:1fr; }
.tpl14 .g-portal-card{
  background:rgba(255,255,255,.9); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(var(--primary-rgb),.08); border-radius:18px; padding:2rem 1.6rem 1.6rem; display:flex; flex-direction:column; text-decoration:none; color:var(--g-ink); transition:.32s cubic-bezier(.4,0,.2,1); position:relative; overflow:hidden;
  box-shadow:0 4px 16px rgba(var(--primary-deeper-rgb),.04);
}
.tpl14 .g-portal-card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background: var(--g-sage); opacity:0; transition:.3s;
}
.tpl14 .g-portal-card::after{
  content:''; position:absolute; bottom:-16%; right:-10%; width:66%; height:48%; border-radius:50%;
  background: transparent; pointer-events:none; opacity:0; transition:.3s;
}
.tpl14 .g-portal-card:hover{ background:var(--white); transform:translateY(-6px); box-shadow:0 18px 36px rgba(var(--primary-deeper-rgb),.08), 0 6px 14px rgba(var(--primary-rgb),.06); border-color:rgba(var(--primary-rgb),.12); }
.tpl14 .g-portal-card:hover::before{ opacity:1; }
.tpl14 .g-portal-card:hover::after{ opacity:1; }
.tpl14 .g-portal-card--wide{ grid-column:span 2; background: var(--g-sage); color:var(--white); border-color:transparent; }
.tpl14 .g-portal-card--wide .g-portal-num, .tpl14 .g-portal-card--wide h4, .tpl14 .g-portal-card--wide p, .tpl14 .g-portal-card--wide .g-portal-link{ color:var(--white); }
.tpl14 .g-portal-card--wide .g-portal-num{ background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.18); }
.tpl14 .g-portal-card--wide .g-portal-icon{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.18); color:var(--white); }
.tpl14 .g-portal-card--wide .g-portal-link{ color:var(--g-gold); }
.tpl14 .g-portal-num{ font-size:.72rem; font-weight:800; letter-spacing:.12em; color:var(--g-terracotta); background:rgba(var(--accent-rgb),.08); padding:.2rem .5rem; border-radius:999px; align-self:flex-start; }
.tpl14 .g-portal-icon{
  width:4.8rem; height:4.8rem; border-radius:14px;
  background: var(--g-sage-mist);
  border:1px solid rgba(var(--primary-rgb),.10); display:flex; align-items:center; justify-content:center;
  font-size:1.95rem; color:var(--g-sage-dk); margin:1rem 0 .75rem;
  box-shadow:0 6px 16px rgba(var(--primary-rgb),.06), inset 0 1px 0 rgba(255,255,255,.8); transition:.3s;
}
.tpl14 .g-portal-card:hover .g-portal-icon{ transform:rotate(-6deg) scale(1.04); }
.tpl14 .g-portal-card h4{ font-family:var(--font-heading); font-size:1.48rem; margin:0 0 .4rem; color:var(--g-ink); letter-spacing:-.01em; }
.tpl14 .g-portal-card p{ font-size:1.24rem; color:var(--g-ink-2); line-height:1.6; margin:0 0 .75rem; flex:1; }
.tpl14 .g-portal-card--wide p{ color:rgba(255,255,255,.88); }
.tpl14 .g-portal-link{ font-size:1.1rem; font-weight:800; color:var(--g-sage-dk); display:inline-flex; align-items:center; gap:.4rem; letter-spacing:.02em; }
.tpl14 .g-portal-card:hover .g-portal-link{ gap:.65rem; }
.tpl14 .g-portal-bars{ display:flex; gap:.35rem; align-items:flex-end; height:4.4rem; margin:.5rem 0 .35rem; opacity:.85; }
.tpl14 .g-portal-bars span{ flex:1; background: var(--g-sage); border-radius:4px 4px 0 0; box-shadow:0 2px 6px rgba(var(--primary-rgb),.08); }
.tpl14 .g-portal-card--wide .g-portal-bars span{ background: var(--white); }

/* ─── SHOWCASE ─── */
.tpl14 .g-showcase{ padding:7rem 0; background:var(--g-cream); }
.tpl14 .g-showcase-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.8rem; }
.tpl14 .g-show-card{ background:var(--white); border:1px solid var(--g-line); border-radius:16px; overflow:hidden; text-decoration:none; color:var(--g-ink); display:flex; flex-direction:column; transition:.25s; }
.tpl14 .g-show-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:rgba(var(--primary-rgb),.12); }
.tpl14 .g-show-visual{ background:var(--g-sage-mist); padding:1.4rem; display:flex; align-items:center; justify-content:center; min-height:20rem; position:relative; }
.tpl14 .g-show-visual--book{ background: var(--g-sage); color:var(--white); }
.tpl14 .g-show-visual--gallery{ padding:0; background:var(--g-ink); }
.tpl14 .g-mini-doc{ width:100%; max-width:26rem; background:var(--white); border-radius:8px; overflow:hidden; box-shadow:var(--shadow-sm); border:1px solid var(--g-line); }
.tpl14 .g-md-band{ display:flex; align-items:center; gap:.8rem; padding:.7rem .8rem; background:var(--g-sage-deeper); color:var(--white); }
.tpl14 .g-md-logo{ width:2.4rem; height:2.4rem; border-radius:50%; background:var(--g-gold); flex-shrink:0; }
.tpl14 .g-md-lines{ flex:1; display:flex; flex-direction:column; gap:.2rem; }
.tpl14 .g-md-line{ height:.45rem; background:var(--white); border-radius:2px; opacity:.7; }
.tpl14 .g-md-stamp{ width:3rem; height:3rem; border-radius:50%; border:2px dashed rgba(255,255,255,.4); flex-shrink:0; }
.tpl14 .g-md-title-strip{ height:1rem; background:var(--g-sage); margin:.5rem .8rem; border-radius:2px; }
.tpl14 .g-md-info{ padding:.5rem .8rem; }
.tpl14 .g-md-info-row{ display:flex; gap:.6rem; margin-bottom:.3rem; }
.tpl14 .g-md-info-row .g-md-line{ background:rgba(var(--primary-deeper-rgb),.25); height:.4rem; }
.tpl14 .g-md-badges{ display:flex; gap:.4rem; padding:.5rem .8rem; justify-content:flex-end; }
.tpl14 .g-md-badge{ font-size:.85rem; font-weight:800; padding:.25rem .6rem; border-radius:4px; color:var(--white); }
.tpl14 .g-md-badge--terra{ background:var(--g-terracotta); }
.tpl14 .g-md-badge--sage{ background:var(--g-sage-dk); }
.tpl14 .g-md-table{ padding:.4rem .8rem .8rem; }
.tpl14 .g-md-row{ display:flex; gap:.2rem; margin-bottom:.2rem; align-items:center; }
.tpl14 .g-md-cell{ height:.45rem; background:rgba(var(--primary-deeper-rgb),.07); border-radius:1px; }
.tpl14 .g-md-cell--label{ flex:1; background:rgba(var(--primary-deeper-rgb),.14); }
.tpl14 .g-md-cell--total{ background:var(--g-sage-deeper); }
.tpl14 .g-md-cell--grade{ background:var(--g-gold); }
.tpl14 .g-mini-book{ text-align:center; padding:2rem; }
.tpl14 .g-mb-label{ font-size:.9rem; letter-spacing:.22em; text-transform:uppercase; opacity:.85; }
.tpl14 .g-mb-year{ font-family:var(--font-heading); font-size:3.6rem; font-weight:800; line-height:1; letter-spacing:-.03em; margin:.3rem 0; }
.tpl14 .g-mb-title{ font-size:1.15rem; letter-spacing:.2em; text-transform:uppercase; font-weight:800; opacity:.9; }
.tpl14 .g-mb-rule{ width:4rem; height:2px; background:var(--g-gold); margin:1rem auto 0; border-radius:2px; }
.tpl14 .g-gallery-single{ position:relative; width:100%; height:100%; min-height:20rem; }
.tpl14 .g-gallery-single img{ width:100%; height:100%; object-fit:cover; }
.tpl14 .g-gallery-cap{ position:absolute; left:.8rem; bottom:.8rem; background:rgba(255,255,255,.92); color:var(--g-ink); font-size:1rem; font-weight:700; padding:.4rem .8rem; border-radius:999px; display:inline-flex; align-items:center; gap:.4rem; }
.tpl14 .g-gallery-corner{ position:absolute; right:.8rem; top:.8rem; width:3rem; height:3rem; border-radius:50%; background:rgba(255,255,255,.18); color:var(--white); display:flex; align-items:center; justify-content:center; backdrop-filter:blur(6px); }
.tpl14 .g-show-body{ padding:1.6rem 1.6rem 1.8rem; flex:1; display:flex; flex-direction:column; }
.tpl14 .g-show-tag{ font-size:.95rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--g-terracotta); display:inline-flex; align-items:center; gap:.4rem; margin-bottom:.6rem; }
.tpl14 .g-show-card h4{ font-family:var(--font-heading); font-size:1.55rem; margin:0 0 .6rem; color:var(--g-ink); }
.tpl14 .g-show-card p{ font-size:1.3rem; color:var(--g-ink-2); line-height:1.6; margin:0 0 .8rem; flex:1; }
.tpl14 .g-show-link{ font-size:1.15rem; font-weight:700; color:var(--g-sage-dk); display:inline-flex; align-items:center; gap:.4rem; }

/* ─── WHY ─── */
.tpl14 .g-why{ padding:7rem 0; background:var(--white); }
.tpl14 .g-why-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.6rem; }
.tpl14 .g-why-card{ background:var(--g-cream); border:1px solid var(--g-line); border-radius:16px; padding:2rem 1.6rem; text-align:center; transition:.25s; position:relative; }
.tpl14 .g-why-card:hover{ background:var(--white); transform:translateY(-4px); box-shadow:var(--shadow-md); }
.tpl14 .g-why-num{ font-size:.85rem; font-weight:800; letter-spacing:.12em; color:var(--g-terracotta); }
.tpl14 .g-why-icon{ width:5rem; height:5rem; border-radius:50%; background:var(--white); border:1.5px solid var(--g-sage); display:flex; align-items:center; justify-content:center; font-size:1.9rem; color:var(--g-sage-dk); margin:1rem auto .8rem; }
.tpl14 .g-why-card h4{ font-family:var(--font-heading); font-size:1.4rem; margin:0 0 .5rem; color:var(--g-ink); }
.tpl14 .g-why-card p{ font-size:1.25rem; color:var(--g-ink-2); line-height:1.6; margin:0; }

/* ─── FOUNDER — Gardener's Note — deep terrarium letter ─── */
.tpl14 .g-founder{
  padding:7.5rem 0; position:relative; overflow:hidden; isolation:isolate;
  background: var(--g-sage-deeper);
}
.tpl14 .g-founder::before{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background: transparent;
  opacity:.6;
}
.tpl14 .g-founder .g-container{ position:relative; z-index:1; }
.tpl14 .g-founder .g-head h2{ color:var(--white); text-shadow:0 6px 22px rgba(0,0,0,.14); }
.tpl14 .g-founder .g-head h2 .g-accent{ color:var(--g-gold); }
.tpl14 .g-founder .g-head-sub{ color:rgba(255,255,255,.82); }
.tpl14 .g-founder .g-eyebrow{ background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.16); color:var(--white); }
.tpl14 .g-founder .g-eyebrow i{ color:var(--g-gold); }
.tpl14 .g-founder-inner{ display:grid; grid-template-columns:24rem 1fr; gap:3rem; align-items:center; background:var(--white); border:1px solid var(--g-line); border-radius:20px; padding:2.6rem; box-shadow:var(--shadow-sm); }
.tpl14 .g-founder-photo{ position:relative; border-radius:16px; overflow:hidden; background:var(--g-sage-mist); aspect-ratio:1; display:flex; align-items:center; justify-content:center; }
.tpl14 .g-founder-photo img{ width:100%; height:100%; object-fit:cover; }
.tpl14 .g-founder-initial{ width:8rem; height:8rem; border-radius:50%; background:var(--g-sage); color:var(--white); display:flex; align-items:center; justify-content:center; font-family:var(--font-heading); font-size:3.2rem; font-weight:800; }
.tpl14 .g-founder-stamp{ position:absolute; bottom:1rem; left:50%; transform:translateX(-50%); background:var(--g-terracotta); color:var(--white); font-size:.85rem; font-weight:800; letter-spacing:.08em; padding:.35rem .8rem; border-radius:999px; white-space:nowrap; box-shadow:var(--shadow-sm); }
.tpl14 .g-founder-quote{ font-family:var(--font-heading); font-style:italic; font-size:clamp(1.6rem,2.2vw,2rem); line-height:1.5; color:var(--g-ink); margin:0 0 1.4rem; position:relative; padding-left:1.2rem; border-left:3px solid var(--g-sage); }
.tpl14 .g-founder-meta strong{ font-family:var(--font-heading); font-size:1.6rem; color:var(--g-ink); display:block; line-height:1; }
.tpl14 .g-founder-meta span{ font-size:1.15rem; color:var(--g-ink-mute); letter-spacing:.04em; }
.tpl14 .g-founder-stars{ color:var(--g-gold); font-size:1.2rem; margin-top:.6rem; display:flex; gap:.2rem; }

/* ─── NEWS ─── */
.tpl14 .g-news{ padding:7rem 0; background:var(--white); }
.tpl14 .g-news-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.8rem; }
.tpl14 .g-news-card{ background:var(--white); border:1px solid var(--g-line); border-radius:16px; overflow:hidden; text-decoration:none; color:var(--g-ink); display:flex; flex-direction:column; transition:.25s; }
.tpl14 .g-news-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:rgba(var(--primary-rgb),.12); }
.tpl14 .g-news-img{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--g-sage-mist); }
.tpl14 .g-news-img img{ width:100%; height:100%; object-fit:cover; transition:transform .6s; }
.tpl14 .g-news-card:hover .g-news-img img{ transform:scale(1.06); }
.tpl14 .g-news-date{ position:absolute; top:1rem; left:1rem; background:var(--white); border:1px solid var(--g-line); border-radius:10px; padding:.7rem .9rem; text-align:center; box-shadow:var(--shadow-sm); }
.tpl14 .g-news-date strong{ display:block; font-family:var(--font-heading); font-size:1.8rem; font-weight:800; color:var(--g-sage-dk); line-height:1; }
.tpl14 .g-news-date span{ font-size:.85rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--g-ink-mute); }
.tpl14 .g-news-body{ padding:1.6rem 1.6rem 1.8rem; flex:1; display:flex; flex-direction:column; }
.tpl14 .g-news-tag{ font-size:.9rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--g-terracotta); display:inline-flex; align-items:center; gap:.35rem; margin-bottom:.5rem; }
.tpl14 .g-news-card h4{ font-family:var(--font-heading); font-size:1.45rem; margin:0 0 .6rem; line-height:1.3; color:var(--g-ink); }
.tpl14 .g-news-card p{ font-size:1.25rem; color:var(--g-ink-2); line-height:1.6; margin:0 0 .8rem; flex:1; }
.tpl14 .g-news-link{ font-size:1.1rem; font-weight:700; color:var(--g-sage-dk); display:inline-flex; align-items:center; gap:.4rem; }

/* ─── CTA — PREMIUM DARK TERRARIUM STAGE — hero-level beauty ───
   Mirrors hero aurora garden at night: deep sage canvas, gold halo,
   terracotta ember, dot-field mask + vine watermark, glass stats.
   Typography crafted for "Ready to Grow? / Give their roots a
   strong place to grow" to feel editorial and nurturing. */
.tpl14 .g-cta{
  position:relative; overflow:hidden; isolation:isolate;
  border-radius:28px; margin:4rem 2.4rem 5rem; padding:6.5rem 3.5rem 5.5rem;
  text-align:center; color:var(--white);
  background: var(--g-sage-deeper);
  box-shadow:0 24px 60px rgba(var(--primary-deeper-rgb),.18), 0 8px 22px rgba(var(--primary-deeper-rgb),.10), inset 0 1px 0 rgba(255,255,255,.08);
}
.tpl14 .g-cta::before{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background: transparent;
  opacity:.9;
}
.tpl14 .g-cta::after{
  content:''; position:absolute; pointer-events:none; z-index:0;
  width:62rem; height:62rem; right:-14rem; top:-18rem;
  background: transparent;
  border-radius:50%; opacity:.7;
}
.tpl14 .g-cta-inner{ position:relative; z-index:1; max-width:72rem; margin:0 auto; }
.tpl14 .g-cta-inner::before{
  content:''; position:absolute; pointer-events:none; z-index:-1;
  left:-4rem; right:-4rem; top:-2rem; bottom:-1rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='420' viewBox='0 0 720 420'%3E%3Cpath d='M 40 340 C 160 90 380 30 500 130 C 620 220 580 340 460 380' stroke='rgba(255,255,255,0.055)' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3Cpath d='M 500 130 C 470 155 440 185 410 215 M 500 130 C 530 155 560 185 580 215 M 460 220 C 430 245 400 270 370 295 M 360 300 C 385 315 410 330 435 345' stroke='rgba(255,255,255,0.035)' stroke-width='1.3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:68% 48%; background-size:720px 420px; opacity:.55;
}
.tpl14 .g-cta .g-eyebrow{
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.16); color:var(--white);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  box-shadow:0 4px 14px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.12);
}
.tpl14 .g-cta .g-eyebrow i{ color:var(--g-gold); }
.tpl14 .g-cta h3{
  font-family:var(--font-heading); font-size:clamp(2.8rem,5vw,4.2rem); font-weight:800;
  letter-spacing:-.035em; line-height:.98; margin:1.2rem 0 1rem; color:var(--white);
  text-wrap:balance; text-shadow:0 8px 28px rgba(0,0,0,.18);
}
.tpl14 .g-cta h3::after{
  content:''; display:block; width:5.5rem; height:3px; border-radius:999px; margin:1.1rem auto 0;
  background: var(--g-gold); opacity:.9;
}
.tpl14 .g-cta p{
  font-size:1.5rem; color:rgba(255,255,255,.88); max-width:56rem; margin:0 auto 1.6rem; line-height:1.75;
}
.tpl14 .g-cta p:first-of-type{ font-size:1.55rem; color:rgba(255,255,255,.92); }
.tpl14 .g-cta-stats{ display:flex; justify-content:center; gap:1.2rem; margin:2.2rem 0 2rem; flex-wrap:wrap; }
.tpl14 .g-cta-stats > div{
  text-align:center; min-width:11rem; padding:1.1rem 1.3rem;
  background:rgba(255,255,255,.08); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.12); border-radius:16px;
  box-shadow:0 8px 22px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.10);
  transition:.2s;
}
.tpl14 .g-cta-stats > div:hover{ transform:translateY(-3px); background:rgba(255,255,255,.11); border-color:rgba(255,255,255,.16); }
.tpl14 .g-cta-stats strong{ display:block; font-family:var(--font-heading); font-size:2.15rem; font-weight:800; color:var(--g-gold); line-height:1; letter-spacing:-.02em; text-shadow:0 2px 12px rgba(var(--gold-rgb),.22); }
.tpl14 .g-cta-stats span{ font-size:.82rem; letter-spacing:.10em; text-transform:uppercase; color:rgba(255,255,255,.72); font-weight:800; margin-top:.2rem; display:block; }
.tpl14 .g-cta-actions{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-bottom:1.8rem; }
.tpl14 .g-cta-actions .g-btn--terra{ box-shadow:0 12px 28px rgba(var(--accent-rgb),.32), inset 0 1px 0 rgba(255,255,255,.18); }
.tpl14 .g-cta-actions .g-btn--outline-light{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.22); backdrop-filter:blur(8px); }
.tpl14 .g-cta-actions .g-btn--outline-light:hover{ background:var(--white); color:var(--g-sage-deeper); }
.tpl14 .g-cta-form{
  display:flex; gap:.55rem; max-width:50rem; margin:0 auto;
  background:rgba(255,255,255,.96); backdrop-filter:blur(12px);
  padding:.5rem; border-radius:999px;
  box-shadow:0 16px 36px rgba(0,0,0,.18), 0 4px 14px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.9);
  border:1px solid rgba(255,255,255,.9);
}
.tpl14 .g-cta-form input[type="email"]{ flex:1; border:none !important; background:transparent !important; box-shadow:none !important; padding:1.05rem 1.5rem !important; font-size:1.42rem; color:var(--g-ink); }
.tpl14 .g-cta-form input::placeholder{ color:var(--g-ink-mute); }
.tpl14 .g-cta-form input:focus{ outline:none; }
.tpl14 .g-cta-form .g-btn{ flex-shrink:0; }
.tpl14 .g-cta-foot{ font-size:1.08rem; color:rgba(255,255,255,.62); margin-top:1.1rem; letter-spacing:.01em; }
.tpl14 .g-cta-foot i{ color:var(--g-gold); }

/* ─── Responsive — First-principles mobile: compress vertical scroll, fix alignment, keep desktop intact ─── */
@media(max-width:991px){
  .tpl14 .g-hero{ padding:6rem 0 5rem; }
  .tpl14 .g-hero-grid{ grid-template-columns:1fr; gap:2.4rem; }
  .tpl14 .g-hero-photo{ max-width:52rem; margin:0 auto; width:100%; }
  .tpl14 .g-hero-photo img{ aspect-ratio:16/10; }
  .tpl14 .g-hero-badge{ display:none; }
  .tpl14 .g-hero-trust{ justify-content:flex-start; }
  .tpl14 .g-path{ flex-direction:column; gap:1.4rem; }
  .tpl14 .g-path::before, .tpl14 .g-path::after{ display:none; }
  .tpl14 .g-path-item{ flex-direction:row; text-align:left; align-items:center; gap:1.4rem; padding:1.4rem 1.4rem; width:100%; }
  .tpl14 .g-path-item h4, .tpl14 .g-path-item p, .tpl14 .g-path-meta{ text-align:left; margin-left:0; margin-right:0; justify-content:flex-start; }
  .tpl14 .g-path-item p{ max-width:none; flex:1; }
  .tpl14 .g-path-ring{ margin:0; width:7.2rem; height:7.2rem; font-size:2.2rem; flex-shrink:0; }
  .tpl14 .g-programs-grid{ grid-template-columns:1fr 1fr; }
  .tpl14 .g-compass-grid{ grid-template-columns:1fr; }
  .tpl14 .g-compass-card{ text-align:center; align-items:center; }
  .tpl14 .g-compass-card::before{ left:50%; transform:translateX(-50%); }
  .tpl14 .g-compass-icon{ margin-left:auto; margin-right:auto; }
  .tpl14 .g-compass-card h3, .tpl14 .g-compass-text{ text-align:center; }
  .tpl14 .g-rings-grid{ grid-template-columns:1fr 1fr; }
  .tpl14 .g-carousel-card{ flex:0 0 calc((100% - 1.8rem)/2); }
  .tpl14 .g-portal-grid{ grid-template-columns:1fr 1fr; }
  .tpl14 .g-portal-card--wide{ grid-column:span 2; }
  .tpl14 .g-showcase-grid{ grid-template-columns:1fr; gap:1.4rem; }
  .tpl14 .g-show-visual{ min-height:16rem; }
  .tpl14 .g-why-grid{ grid-template-columns:1fr 1fr; }
  .tpl14 .g-founder-inner{ grid-template-columns:1fr; gap:2rem; padding:2rem; }
  .tpl14 .g-founder-photo{ max-width:28rem; margin:0 auto; aspect-ratio:4/3; }
  .tpl14 .g-news-grid{ grid-template-columns:1fr; gap:1.4rem; }
  .tpl14 .g-video-grid{ grid-template-columns:1fr; gap:2rem; }
  .tpl14 .g-video-frame img{ height:28rem; }
  .tpl14 .g-cta{ margin:2rem 1.2rem 3rem; padding:3.5rem 2rem; border-radius:16px; }
  .tpl14 .g-cta-form{ flex-direction:column; border-radius:16px; padding:1rem; }
  .tpl14 .g-cta-form input[type="email"]{ border:1px solid var(--g-line) !important; border-radius:999px !important; }
  /* reduce section height on tablet */
  .tpl14 .g-growth, .tpl14 .g-programs, .tpl14 .g-compass, .tpl14 .g-carousel, .tpl14 .g-rings, .tpl14 .g-video, .tpl14 .g-values, .tpl14 .g-portal, .tpl14 .g-showcase, .tpl14 .g-why, .tpl14 .g-founder, .tpl14 .g-news{ padding:4.5rem 0; }
  .tpl14 .g-head{ margin-bottom:2.8rem; }
}
@media(max-width:600px){
  .tpl14 .g-container{ padding:0 1.4rem; }
  .tpl14 .g-hero{ padding:4.2rem 0 3.2rem; }
  .tpl14 .g-hero h1{ font-size:clamp(2.4rem,8vw,3.2rem); line-height:1.05; margin:1rem 0 .7rem; }
  .tpl14 .g-hero h1::after{ margin-top:.7rem; }
  .tpl14 .g-hero p{ font-size:1.32rem; line-height:1.65; }
  .tpl14 .g-hero-tagline{ font-size:1.18rem; }
  .tpl14 .g-hero-cta{ display:flex; flex-direction:row; flex-wrap:nowrap; gap:.6rem; margin:1.4rem 0 1.6rem; }
  .tpl14 .g-hero-cta .g-btn{ flex:1 1 0; min-width:0; width:auto; justify-content:center; padding:.95rem .7rem; font-size:1.05rem; white-space:nowrap; }
  .tpl14 .g-hero-trust{ display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; }
  .tpl14 .g-hero .g-trust-pill, .tpl14 .g-trust-pill{ padding:.55rem .35rem; flex:none; min-width:0; justify-content:center; flex-direction:column; align-items:center; text-align:center; gap:.3rem; }
  .tpl14 .g-hero .g-trust-pill strong, .tpl14 .g-trust-pill strong{ font-size:.95rem; line-height:1.15; }
  .tpl14 .g-hero .g-trust-pill i, .tpl14 .g-trust-pill i{ width:2.4rem; height:2.4rem; font-size:1rem; }
  .tpl14 .g-hero .g-trust-pill span, .tpl14 .g-trust-pill span{ font-size:.78rem; line-height:1.25; }
  .tpl14 .g-hero-photo{ padding:.6rem; }
  .tpl14 .g-hero-photo::before{ display:none; }
  .tpl14 .g-hero-photo img{ border-width:3px; outline-offset:4px; aspect-ratio:4/3; }
  .tpl14 .g-head{ margin-bottom:2rem; }
  .tpl14 .g-head h2{ font-size:clamp(2rem,6.5vw,2.6rem); }
  .tpl14 .g-head-sub{ font-size:1.22rem; }
  .tpl14 .g-eyebrow{ font-size:1.05rem; }
  /* section padding compressed */
  .tpl14 .g-growth, .tpl14 .g-programs, .tpl14 .g-compass, .tpl14 .g-carousel, .tpl14 .g-rings, .tpl14 .g-video, .tpl14 .g-values, .tpl14 .g-portal, .tpl14 .g-showcase, .tpl14 .g-why, .tpl14 .g-founder, .tpl14 .g-news{ padding:3rem 0; }
  /* Programs — horizontal swipe instead of 6-row stack */
  .tpl14 .g-programs-grid{
    display:flex; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden;
    gap:1rem; padding:0 .2rem 1rem; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none;
    grid-template-columns:none;
  }
  .tpl14 .g-programs-grid::-webkit-scrollbar{ display:none; }
  .tpl14 .g-program{ flex:0 0 78%; max-width:78%; scroll-snap-align:start; scroll-snap-stop:always; padding:1.8rem 1.4rem 1.6rem; }
  .tpl14 .g-program i{ width:4.6rem; height:4.6rem; font-size:1.8rem; }
  .tpl14 .g-program h4{ font-size:1.42rem; }
  .tpl14 .g-program p{ font-size:1.18rem; }
  /* Compass — CENTRALIZED redesign (SEC-A/B + icons centered, premium compact) */
  .tpl14 .g-compass-card{
    padding:2rem 1.4rem 1.6rem; border-radius:18px;
    display:flex; flex-direction:column; align-items:center; text-align:center;
  }
  .tpl14 .g-compass-card::before{
    left:50%; transform:translateX(-50%); width:6.5rem; border-radius:999px;
  }
  .tpl14 .g-compass-num{
    align-self:center; margin:0 auto;
  }
  .tpl14 .g-compass-icon{
    margin:1rem auto .9rem; width:5rem; height:5rem; font-size:1.85rem;
    background:linear-gradient(135deg, var(--g-sage) 0%, var(--g-sage-dk) 100%);
    color:var(--white); border-color:transparent;
    box-shadow:0 8px 18px rgba(var(--primary-rgb),.18);
  }
  .tpl14 .g-compass-card--mission .g-compass-icon{
    background:linear-gradient(135deg, var(--g-terracotta) 0%, var(--g-gold) 100%);
    color:var(--white);
  }
  .tpl14 .g-compass-card h3{
    font-size:1.75rem; text-align:center; color:var(--g-sage-deeper);
  }
  .tpl14 .g-compass-card--mission h3{ color:var(--g-terracotta); }
  .tpl14 .g-compass-text{
    font-size:1.28rem; text-align:center; color:var(--g-ink-2);
  }
  .tpl14 .g-compass-list{ width:100%; text-align:left; }
  .tpl14 .g-compass-list li{
    font-size:1.2rem; padding:.75rem 0; justify-content:flex-start; text-align:left;
  }
  .tpl14 .g-compass-list i{ color:var(--g-sage); }
  .tpl14 .g-compass-card--mission .g-compass-list i{ color:var(--g-terracotta); }
  /* Rings — COUNTERS PREMIUM REDESIGN: white cards, variable gradient numbers, compact 2-col */
  .tpl14 .g-rings{ padding:2.6rem 0; }
  .tpl14 .g-rings .g-head{ margin-bottom:1.4rem; }
  .tpl14 .g-rings .g-head h2{ color:var(--white); font-size:clamp(1.95rem,6vw,2.35rem); }
  .tpl14 .g-rings .g-head h2 .g-accent{ color:var(--g-gold); }
  .tpl14 .g-rings-grid{ grid-template-columns:1fr 1fr; gap:.9rem; }
  .tpl14 .g-ring-stat{
    padding:1.35rem .95rem 1.15rem; border-radius:14px; text-align:center;
    background:var(--white); border:1px solid rgba(var(--primary-rgb),.07);
    border-top:3px solid var(--g-sage);
    box-shadow:0 6px 16px rgba(var(--primary-deeper-rgb),.06);
    backdrop-filter:none; -webkit-backdrop-filter:none;
  }
  .tpl14 .g-ring-stat:nth-child(1){ border-top-color:var(--g-sage); }
  .tpl14 .g-ring-stat:nth-child(2){ border-top-color:var(--g-terracotta); }
  .tpl14 .g-ring-stat:nth-child(3){ border-top-color:var(--g-gold); }
  .tpl14 .g-ring-stat:nth-child(4){ border-top-color:var(--g-sage-light); }
  .tpl14 .g-ring-stat::before{ display:none; }
  .tpl14 .g-ring-visual{
    width:auto; height:auto; margin:0 0 .3rem; padding:0;
    background:none !important; border:none !important; box-shadow:none !important; border-radius:0;
    display:block;
  }
  .tpl14 .g-ring-visual::before{ display:none; }
  .tpl14 .g-ring-visual strong{
    font-size:2.15rem; line-height:1; letter-spacing:-.02em; font-weight:800;
    background:linear-gradient(135deg, var(--g-sage) 0%, var(--g-sage-dk) 100%);
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
    color:transparent; text-shadow:none;
  }
  .tpl14 .g-ring-stat:nth-child(2) .g-ring-visual strong{
    background:linear-gradient(135deg, var(--g-terracotta) 0%, var(--g-terracotta-dk) 100%);
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  }
  .tpl14 .g-ring-stat:nth-child(3) .g-ring-visual strong{
    background:linear-gradient(135deg, var(--g-gold) 0%, #b8932f 100%);
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  }
  .tpl14 .g-ring-stat:nth-child(4) .g-ring-visual strong{
    background:linear-gradient(135deg, var(--g-sage-light) 0%, var(--g-sage) 100%);
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  }
  .tpl14 .g-ring-stat span{
    font-size:.78rem; color:var(--g-ink-mute); letter-spacing:.10em; font-weight:800; margin-bottom:.25rem;
  }
  .tpl14 .g-ring-stat:nth-child(1) span{ color:var(--g-sage-dk); }
  .tpl14 .g-ring-stat:nth-child(2) span{ color:var(--g-terracotta); }
  .tpl14 .g-ring-stat:nth-child(3) span{ color:#8a6d1b; }
  .tpl14 .g-ring-stat:nth-child(4) span{ color:var(--g-sage-dk); }
  .tpl14 .g-ring-stat small{
    font-size:.98rem; color:var(--g-ink-2); line-height:1.45; -webkit-line-clamp:2; display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden;
  }
  .tpl14 .g-ring-stat:hover{ transform:translateY(-3px); background:var(--white); box-shadow:0 10px 22px rgba(var(--primary-deeper-rgb),.08); }
  .tpl14 .g-ring-stat:hover .g-ring-visual strong{ color:transparent; text-shadow:none; }
  /* Carousel — snap one full card with peek (keep overflow hidden for JS transform; no scroll) */
  .tpl14 .g-carousel-card{ flex:0 0 86%; }
  .tpl14 .g-carousel-stage{ overflow:hidden; }
  .tpl14 .g-carousel-track{ gap:1rem; }
  .tpl14 .g-carousel-img{ aspect-ratio:16/10; }
  .tpl14 .g-carousel-body{ padding:1.2rem 1.2rem 1.4rem; }
  .tpl14 .g-carousel-body p{ font-size:1.22rem; -webkit-line-clamp:3; }
  /* Values — horizontal swipe (biggest saver for 6-8 values) */
  .tpl14 .g-values-grid{
    display:flex; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden;
    gap:1rem; padding:0 .2rem 1rem; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none;
    grid-template-columns:none;
  }
  .tpl14 .g-values-grid::-webkit-scrollbar{ display:none; }
  .tpl14 .g-value-leaf{ flex:0 0 76%; max-width:76%; scroll-snap-align:start; scroll-snap-stop:always; transform:none !important; padding:1.8rem 1.3rem 1.5rem; }
  .tpl14 .g-value-leaf i{ width:4.4rem; height:4.4rem; font-size:1.7rem; }
  .tpl14 .g-value-leaf h4{ font-size:1.32rem; }
  .tpl14 .g-value-leaf p{ font-size:1.12rem; }
  /* Portal — horizontal swipe (8 cards → 1 viewport height not 8) */
  .tpl14 .g-portal-grid{
    display:flex; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden;
    gap:1rem; padding:0 .2rem 1rem; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none;
    grid-template-columns:none; grid-auto-rows:auto;
  }
  .tpl14 .g-portal-grid::-webkit-scrollbar{ display:none; }
  .tpl14 .g-portal-card{ flex:0 0 76%; max-width:76%; scroll-snap-align:start; scroll-snap-stop:always; min-height:18rem; padding:1.6rem 1.3rem 1.3rem; }
  .tpl14 .g-portal-card--wide{ grid-column:auto; flex:0 0 84%; max-width:84%; }
  .tpl14 .g-portal-bars{ height:3.6rem; }
  /* Growth Path — PREMIUM TIMELINE REDESIGN (mobile): vertical stem + compact row cards, full variable palette */
  .tpl14 .g-growth{ padding:2.4rem 0 2.8rem; background: var(--white); }
  .tpl14 .g-growth .g-head{ margin-bottom:1.6rem; }
  .tpl14 .g-growth .g-head h2{ color:var(--g-ink); font-size:clamp(1.95rem,6vw,2.35rem); line-height:1.08; }
  .tpl14 .g-growth .g-head h2 .g-accent{ color:var(--g-sage-dk); }
  .tpl14 .g-growth .g-head .g-eyebrow{ background:var(--white); border-color:rgba(var(--primary-rgb),.10); color:var(--g-sage-dk); }
  .tpl14 .g-growth .g-head .g-eyebrow i{ color:var(--g-terracotta); }
  .tpl14 .g-growth .g-head-sub{ color:var(--g-ink-2); font-size:1.18rem; max-width:32rem; }
  .tpl14 .g-path{
    position:relative; display:flex; flex-direction:column; gap:1rem;
    padding-left:2.4rem; align-items:stretch;
  }
  .tpl14 .g-path::before{
    display:block !important; content:''; position:absolute;
    left:.85rem; top:.6rem; bottom:.6rem; width:2px; border-radius:999px;
    background: var(--g-sage);
    opacity:.18;
  }
  .tpl14 .g-path::after{ display:none !important; }
  .tpl14 .g-path-item{
    position:relative; flex:0 0 auto; max-width:none;
    display:grid; grid-template-columns:4.9rem 1fr; gap:.1rem .9rem; align-items:start;
    text-align:left; padding:1.15rem 1.1rem 1.05rem; border-radius:14px;
    background:var(--white); border:1px solid rgba(var(--primary-rgb),.08);
    border-left:3.5px solid var(--g-sage);
    box-shadow:0 6px 18px rgba(var(--primary-deeper-rgb),.06);
  }
  .tpl14 .g-path-item .g-path-ring{ grid-column:1; grid-row:1 / span 4; align-self:start; }
  .tpl14 .g-path-item .g-path-num{ grid-column:2; grid-row:1; justify-self:start; }
  .tpl14 .g-path-item h4{ grid-column:2; grid-row:2; }
  .tpl14 .g-path-item p{ grid-column:2; grid-row:3; }
  .tpl14 .g-path-item .g-path-meta{ grid-column:2; grid-row:4; }
  .tpl14 .g-path-item::before{
    content:''; position:absolute; left:-1.95rem; top:1.65rem;
    width:.78rem; height:.78rem; border-radius:50%; background:var(--g-sage);
    border:2.5px solid var(--white); box-shadow:0 0 0 4px rgba(var(--primary-rgb),.10);
  }
  .tpl14 .g-path-item:nth-child(1){ border-left-color:var(--g-terracotta); }
  .tpl14 .g-path-item:nth-child(1)::before{ background:var(--g-terracotta); box-shadow:0 0 0 4px rgba(var(--accent-rgb),.14); }
  .tpl14 .g-path-item:nth-child(2){ border-left-color:var(--g-sage); }
  .tpl14 .g-path-item:nth-child(2)::before{ background:var(--g-sage); }
  .tpl14 .g-path-item:nth-child(3){ border-left-color:var(--g-gold); }
  .tpl14 .g-path-item:nth-child(3)::before{ background:var(--g-gold); box-shadow:0 0 0 4px rgba(var(--gold-rgb),.14); }
  .tpl14 .g-path-item h4, .tpl14 .g-path-item p, .tpl14 .g-path-meta{
    text-align:left; margin-left:0; margin-right:0; justify-content:flex-start;
  }
  .tpl14 .g-path-item h4{
    font-size:1.38rem; margin:0 0 .2rem; line-height:1.15;
    color:var(--g-sage-deeper); letter-spacing:-.01em;
  }
  .tpl14 .g-path-item:nth-child(1) h4{ color:var(--g-terracotta); }
  .tpl14 .g-path-item:nth-child(2) h4{ color:var(--g-sage-dk); }
  .tpl14 .g-path-item:nth-child(3) h4{ color:var(--g-sage-deeper); }
  .tpl14 .g-path-item p{
    font-size:1.08rem; margin:0 0 .45rem; color:var(--g-ink-2); line-height:1.55;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
    max-width:none;
  }
  .tpl14 .g-path-num{
    font-size:.72rem; letter-spacing:.10em; padding:.18rem .48rem;
    background:var(--g-sage-mist); color:var(--g-sage-dk); border:1px solid rgba(var(--primary-rgb),.10);
  }
  .tpl14 .g-path-item:nth-child(1) .g-path-num{ background:rgba(var(--accent-rgb),.10); color:var(--g-terracotta); border-color:rgba(var(--accent-rgb),.14); }
  .tpl14 .g-path-item:nth-child(3) .g-path-num{ background:rgba(var(--gold-rgb),.12); color:var(--g-gold); border-color:rgba(var(--gold-rgb),.16); }
  .tpl14 .g-path-meta{ gap:.38rem; }
  .tpl14 .g-path-meta span{
    font-size:.84rem; padding:.22rem .5rem; background:var(--g-cream); border-color:rgba(var(--primary-rgb),.07); color:var(--g-ink-mute); font-weight:700;
  }
  .tpl14 .g-path-meta i{ font-size:.78rem; }
  .tpl14 .g-path-ring{
    width:4.9rem; height:4.9rem; font-size:1.65rem; margin:0; flex-shrink:0;
    border-width:1.5px; outline-width:1.5px; outline-offset:2px;
    box-shadow:0 6px 14px rgba(var(--primary-rgb),.10);
  }
  .tpl14 .g-path-item > div:not(.g-path-ring){ flex:1; min-width:0; display:flex; flex-direction:column; gap:.28rem; }
  .tpl14 .g-path-item .g-path-num + h4{ margin-top:.1rem; }
  /* Showcase — keep stacked but compact (only 3 cards) */
  .tpl14 .g-showcase-grid{ grid-template-columns:1fr; gap:1rem; }
  .tpl14 .g-show-visual{ min-height:14rem; padding:1rem; }
  .tpl14 .g-gallery-single{ min-height:14rem; }
  .tpl14 .g-mini-doc{ max-width:22rem; transform:scale(.92); transform-origin:center; }
  .tpl14 .g-mb-year{ font-size:3rem; }
  .tpl14 .g-show-body{ padding:1.2rem 1.3rem 1.4rem; }
  .tpl14 .g-show-card h4{ font-size:1.38rem; }
  .tpl14 .g-show-card p{ font-size:1.14rem; }
  /* Why — 2-col compact (4 cards = 2 rows not 4) */
  .tpl14 .g-why-grid{ grid-template-columns:1fr 1fr; gap:1rem; }
  .tpl14 .g-why-card{ padding:1.4rem 1rem; }
  .tpl14 .g-why-icon{ width:4.4rem; height:4.4rem; font-size:1.6rem; margin:.7rem auto .6rem; }
  .tpl14 .g-why-card h4{ font-size:1.22rem; }
  .tpl14 .g-why-card p{ font-size:1.1rem; }
  /* Founder — compact */
  .tpl14 .g-founder-inner{ padding:1.4rem; border-radius:16px; }
  .tpl14 .g-founder-photo{ max-width:none; aspect-ratio:16/10; border-radius:12px; }
  .tpl14 .g-founder-quote{ font-size:1.42rem; padding-left:1rem; }
  .tpl14 .g-founder-meta strong{ font-size:1.32rem; }
  /* News — slider in mobile (What is happening on campus) — horizontal swipe to avoid 3-row tower */
  .tpl14 .g-news-grid{
    display:flex; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden;
    gap:1rem; padding:0 .2rem 1rem; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none;
    grid-template-columns:none;
  }
  .tpl14 .g-news-grid::-webkit-scrollbar{ display:none; }
  .tpl14 .g-news-card{ flex:0 0 78%; max-width:78%; scroll-snap-align:start; scroll-snap-stop:always; }
  .tpl14 .g-news-img{ aspect-ratio:16/9; }
  .tpl14 .g-news-body{ padding:1.2rem 1.2rem 1.3rem; }
  .tpl14 .g-news-card h4{ font-size:1.32rem; }
  .tpl14 .g-news-card p{ font-size:1.12rem; }
  /* Video — compact + VARIABLE-COLOR centered (Why families trust) */
  .tpl14 .g-video-frame{ border-radius:14px; }
  .tpl14 .g-video-frame img{ height:20rem; }
  .tpl14 .g-video-text{ text-align:center; }
  .tpl14 .g-video-text .g-eyebrow{ justify-content:center; margin-left:auto; margin-right:auto; background:rgba(255,255,255,.12); color:var(--white); border-color:rgba(255,255,255,.18); }
  .tpl14 .g-video-text .g-eyebrow i{ color:var(--g-gold); }
  .tpl14 .g-video-text h3{
    font-size:1.85rem; text-align:center; color:var(--white);
  }
  .tpl14 .g-video-text h3 span{ color:var(--g-gold); }
  .tpl14 .g-video-text p{ font-size:1.18rem; text-align:center; color:rgba(255,255,255,.88); }
  .tpl14 .g-video-pills{ justify-content:center; }
  .tpl14 .g-video .g-pill, .tpl14 .g-pill{
    background:rgba(255,255,255,.12); color:var(--white); border-color:rgba(255,255,255,.16);
    backdrop-filter:blur(8px);
  }
  .tpl14 .g-video .g-pill i, .tpl14 .g-pill i{ color:var(--g-gold); }
  .tpl14 .g-video .g-btn--outline{ width:100%; justify-content:center; }
  /* CTA — tighter */
  .tpl14 .g-cta{ margin:1.2rem .8rem 2rem; padding:2.6rem 1.4rem 2rem; border-radius:16px; }
  .tpl14 .g-cta h3{ font-size:clamp(1.9rem,6.5vw,2.4rem); }
  .tpl14 .g-cta p, .tpl14 .g-cta p:first-of-type{ font-size:1.18rem; }
  .tpl14 .g-cta-stats{ gap:.7rem; margin:1.4rem 0 1.4rem; }
  .tpl14 .g-cta-stats > div{ flex:1; min-width:7.2rem; padding:.85rem .7rem; border-radius:12px; }
  .tpl14 .g-cta-stats strong{ font-size:1.55rem; }
  .tpl14 .g-cta-stats span{ font-size:.74rem; }
  .tpl14 .g-cta-actions{ display:flex; flex-direction:row; flex-wrap:nowrap; gap:.6rem; justify-content:center; }
  .tpl14 .g-cta-actions .g-btn{ flex:1 1 0; min-width:0; width:auto; justify-content:center; white-space:nowrap; padding:1rem .7rem; font-size:1.05rem; }
  /* First-principle fallback: any twin-button row must stay side-by-side on mobile */
  .tpl14 .g-hero-cta, .tpl14 .g-cta-actions{ flex-direction:row !important; flex-wrap:nowrap !important; }
  .tpl14 .g-cta-form{ padding:.8rem; gap:.6rem; }
}
@media(max-width:400px){
  .tpl14 .g-hero-cta{ gap:.45rem; }
  .tpl14 .g-hero-cta .g-btn{ padding:.85rem .5rem; font-size:.92rem; gap:.4rem; }
  .tpl14 .g-hero-trust{ gap:.35rem; }
  .tpl14 .g-hero .g-trust-pill, .tpl14 .g-trust-pill{ padding:.45rem .2rem; }
  .tpl14 .g-hero .g-trust-pill i, .tpl14 .g-trust-pill i{ width:2.2rem; height:2.2rem; font-size:.9rem; }
  .tpl14 .g-hero .g-trust-pill strong, .tpl14 .g-trust-pill strong{ font-size:.88rem; }
  .tpl14 .g-hero .g-trust-pill span, .tpl14 .g-trust-pill span{ font-size:.72rem; }
  .tpl14 .g-cta-actions{ gap:.45rem; }
  .tpl14 .g-cta-actions .g-btn{ padding:.85rem .5rem; font-size:.92rem; gap:.4rem; }
  .tpl14 .g-program{ flex:0 0 84%; max-width:84%; }
  .tpl14 .g-value-leaf{ flex:0 0 84%; max-width:84%; }
  .tpl14 .g-portal-card{ flex:0 0 84%; max-width:84%; }
  .tpl14 .g-rings-grid, .tpl14 .g-why-grid{ gap:.8rem; }
  .tpl14 .g-ring-visual{ width:7.8rem; height:7.8rem; }
}
/* =====================================================
   TEMPLATE 15 — "CONSTELLATION"
   Midnight indigo sky, twinkling star field, connecting
   constellation lines. Every colour is derived from the
   shared theme tokens (--primary*, --accent, --gold)
   so a single admin palette recolours the whole night sky.
   No hex is hardcoded — stars = var(--gold)/white,
   navy = primary-deeper, violet = primary-light,
   cyan = accent.
   ===================================================== */
.tpl15{
  --c-navy:        var(--primary-deeper);
  --c-navy2:       var(--primary-dark);
  --c-navy3:       var(--primary);
  --c-star:        var(--gold);
  --c-star-soft:   color-mix(in srgb, var(--gold) 72%, var(--white));
  --c-star-mute:   rgba(var(--gold-rgb), .45);
  --c-star-glow:   rgba(var(--gold-rgb), .32);
  --c-violet:      color-mix(in srgb, var(--primary-light) 88%, var(--primary-deeper));
  --c-violet-soft: rgba(var(--primary-light-rgb), .34);
  --c-cyan:        var(--accent);
  --c-cyan-soft:   rgba(var(--accent-rgb), .22);
  --c-cream:       color-mix(in srgb, var(--primary-mist) 78%, var(--white));
  --c-line:        rgba(var(--gold-rgb), .22);
  --c-line-soft:   rgba(255,255,255,.08);
  --c-on:          var(--white);
  --c-on-soft:     rgba(255,255,255,.82);
  --c-on-mute:     rgba(255,255,255,.62);
  --c-ink:         var(--text);
  --c-ink-2:       var(--text-secondary);
  background:var(--c-navy);
  color:rgba(255,255,255,.92);
  font-family:'Poppins','Open Sans',system-ui,sans-serif;
  overflow-x:hidden;
}
.tpl15 *{ box-sizing:border-box; }
.tpl15 img{ max-width:100%; display:block; }
.tpl15 a{ text-decoration:none; color:inherit; }
.tpl15 .c-container{ max-width:1240px; margin:0 auto; padding:0 clamp(1rem,1.8vw,1.6rem); position:relative; }
.tpl15 section{ scroll-margin-top:8rem; }

/* ——— Star field helper ——— */
.tpl15 .c-stars{ position:relative; overflow:hidden; }
.tpl15 .c-stars::before{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:
    radial-gradient(1.5px 1.5px at 10% 22%, var(--white) 0, transparent 60%),
    radial-gradient(1.5px 1.5px at 82% 16%, var(--white) 0, transparent 60%),
    radial-gradient(1px 1px at 46% 58%, var(--white) 0, transparent 60%),
    radial-gradient(1.5px 1.5px at 66% 82%, var(--white) 0, transparent 60%),
    radial-gradient(1px 1px at 24% 88%, var(--white) 0, transparent 60%),
    radial-gradient(1.5px 1.5px at 91% 54%, var(--white) 0, transparent 60%),
    radial-gradient(1px 1px at 14% 48%, var(--white) 0, transparent 60%),
    radial-gradient(1px 1px at 58% 8%, var(--c-star) 0, transparent 60%),
    radial-gradient(1px 1px at 78% 68%, var(--c-cyan) 0, transparent 60%);
  opacity:.55; animation:c-twinkle 4.6s ease-in-out infinite alternate;
}
@keyframes c-twinkle{ from{opacity:.32;} to{opacity:.72;} }
.tpl15 .c-stars > *{ position:relative; z-index:1; }

/* ——— Generic eyebrow / head ——— */
.tpl15 .c-eyebrow{
  display:inline-flex; align-items:center; gap:.65rem;
  border:1px solid rgba(var(--gold-rgb), .38);
  background:rgba(255,255,255,.07);
  color:var(--c-star);
  padding:.55rem 1.35rem;
  border-radius:999px;
  font-size:1.08rem; font-weight:800;
  letter-spacing:.10em; text-transform:uppercase;
  font-family:var(--font-body);
}
.tpl15 .c-eyebrow i{ color:var(--c-star); }
.tpl15 .c-head{ text-align:center; max-width:68rem; margin:0 auto 4.2rem; }
.tpl15 .c-head h2{
  font-family:var(--font-heading);
  font-size:clamp(2.6rem,4vw,3.8rem); font-weight:800;
  letter-spacing:-.02em; line-height:1.12; margin:.9rem 0 1rem;
  color:var(--c-on);
}
.tpl15 .c-head h2 span{ color:var(--c-star); }
.tpl15 .c-head p{
  font-size:1.52rem; line-height:1.72;
  color:var(--c-on-mute); max-width:62rem; margin:0 auto;
}
.tpl15 .c-head--light h2{ color:var(--c-navy); }
.tpl15 .c-head--light p{ color:var(--c-ink-2); }
/* Light-section overrides — ensure headings are dark on cream/white */
.tpl15 .c-compass .c-head h2,
.tpl15 .c-carousel .c-head h2,
.tpl15 .c-video .c-head h2,
.tpl15 .c-showcase .c-head h2,
.tpl15 .c-founder .c-head h2,
.tpl15 .c-news .c-head h2{ color:var(--c-navy); }
.tpl15 .c-compass .c-head h2 span,
.tpl15 .c-carousel .c-head h2 span,
.tpl15 .c-video .c-head h2 span,
.tpl15 .c-showcase .c-head h2 span,
.tpl15 .c-founder .c-head h2 span,
.tpl15 .c-news .c-head h2 span{ color:var(--c-cyan); }
.tpl15 .c-compass .c-head p,
.tpl15 .c-carousel .c-head p,
.tpl15 .c-video .c-head p,
.tpl15 .c-showcase .c-head p,
.tpl15 .c-founder .c-head p,
.tpl15 .c-news .c-head p{ color:var(--c-ink-2); }
.tpl15 .c-compass .c-eyebrow,
.tpl15 .c-carousel .c-eyebrow,
.tpl15 .c-video .c-eyebrow,
.tpl15 .c-showcase .c-eyebrow,
.tpl15 .c-founder .c-eyebrow,
.tpl15 .c-news .c-eyebrow{
  background:var(--white);
  border-color:rgba(var(--gold-rgb), .18);
  color:var(--c-navy);
}
.tpl15 .c-compass .c-eyebrow i,
.tpl15 .c-carousel .c-eyebrow i,
.tpl15 .c-video .c-eyebrow i,
.tpl15 .c-showcase .c-eyebrow i,
.tpl15 .c-founder .c-eyebrow i,
.tpl15 .c-news .c-eyebrow i{ color:var(--c-star); }

/* ——— Ticker ——— */
.tpl15 .c-ticker{
  background:var(--c-navy2);
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
  padding:1.05rem 0; overflow:hidden;
}
.tpl15 .c-ticker-track{
  display:inline-flex; gap:2.6rem; align-items:center;
  font-weight:800; font-size:1.08rem; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(255,255,255,.72);
  animation:cMarquee 32s linear infinite; padding-left:2rem; white-space:nowrap;
}
.tpl15 .c-ticker-track span{ display:inline-flex; align-items:center; gap:1rem; }
.tpl15 .c-ticker-dot{ width:.45rem; height:.45rem; background:var(--c-cyan); border-radius:50%; display:inline-block; flex-shrink:0; }
@keyframes cMarquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ——— HERO ——— */
.tpl15 .c-hero{
  padding:8rem 0 7rem; position:relative;
  background:
    radial-gradient(ellipse at 18% 18%, rgba(var(--gold-rgb), .14) 0%, transparent 46%),
    radial-gradient(ellipse at 86% 76%, rgba(var(--accent-rgb), .11) 0%, transparent 42%),
    radial-gradient(ellipse at 68% 14%, rgba(var(--primary-light-rgb), .18) 0%, transparent 52%),
    linear-gradient(180deg, var(--primary-deeper) 0%, var(--primary-dark) 58%, var(--c-navy) 100%);
  color:var(--c-on);
  overflow:hidden;
  border-top:4px solid var(--c-cyan);
}
.tpl15 .c-hero::after{
  content:''; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(var(--gold-rgb), .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--gold-rgb), .07) 1px, transparent 1px);
  background-size:36px 36px; opacity:.28; pointer-events:none;
  mask-image:radial-gradient(ellipse at 50% 0%, black 45%, transparent 78%);
}
.tpl15 .c-hero-grid{ display:grid; grid-template-columns:1.08fr .92fr; gap:4rem; align-items:center; position:relative; z-index:1; }
.tpl15 .c-hero h1{
  font-family:var(--font-heading);
  font-size:clamp(3.2rem,5.2vw,5.6rem); font-weight:800;
  line-height:1.08; letter-spacing:-.025em; margin:1.6rem 0 1.4rem;
  color:var(--white);
}
.tpl15 .c-hero h1 span{
  background:linear-gradient(120deg, var(--c-star) 10%, color-mix(in srgb, var(--c-star) 64%, var(--white)) 45%, var(--c-cyan) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.tpl15 .c-hero p{ color:rgba(255,255,255,.82); font-size:1.6rem; line-height:1.78; margin:0 0 2.2rem; max-width:56rem; }
.tpl15 .c-hero-tagline{ font-style:italic; color:rgba(255,255,255,.72); font-size:1.45rem; margin:0 0 2rem !important; }
.tpl15 .c-btn{
  display:inline-flex; align-items:center; gap:.9rem;
  padding:1.25rem 2.5rem; border-radius:999px;
  font-weight:800; font-size:1.32rem; text-decoration:none;
  transition:.3s; border:1.5px solid transparent; font-family:var(--font-body);
}
.tpl15 .c-btn--star{
  background:linear-gradient(135deg, var(--c-star) 0%, color-mix(in srgb, var(--c-star) 62%, var(--white)) 100%);
  color:var(--c-navy); box-shadow:0 14px 32px rgba(var(--gold-rgb), .32);
}
.tpl15 .c-btn--star:hover{ transform:translateY(-3px); box-shadow:0 20px 44px rgba(var(--gold-rgb), .42); }
.tpl15 .c-btn--outline{
  border-color:rgba(255,255,255,.35); color:var(--white);
  background:rgba(255,255,255,.06);
}
.tpl15 .c-btn--outline:hover{ border-color:var(--c-star); color:var(--c-star); background:rgba(255,255,255,.10); }
.tpl15 .c-hero-cta{ display:flex; flex-wrap:wrap; gap:1rem; align-items:center; margin-bottom:2.6rem; }
.tpl15 .c-hero-trust{ display:flex; flex-wrap:wrap; gap:1rem; }
.tpl15 .c-hero-trust .c-trust{
  display:flex; align-items:center; gap:1rem;
  padding:.85rem 1.3rem;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
}
.tpl15 .c-hero-trust .c-trust i{
  width:3.6rem; height:3.6rem; display:inline-flex; align-items:center; justify-content:center;
  border-radius:10px; background:rgba(var(--gold-rgb), .14); border:1px solid rgba(var(--gold-rgb), .22);
  color:var(--c-star); flex-shrink:0;
}
.tpl15 .c-hero-trust .c-trust strong{ display:block; font-size:1.42rem; color:var(--white); line-height:1; }
.tpl15 .c-hero-trust .c-trust span{ font-size:1.06rem; color:rgba(255,255,255,.72); }

/* hero photo */
.tpl15 .c-hero-photo{ position:relative; padding:1.6rem; }
.tpl15 .c-hero-frame{
  position:relative; border-radius:18px; overflow:hidden;
  border:1px solid rgba(var(--gold-rgb), .28);
  background:var(--c-navy2);
  box-shadow:0 18px 44px rgba(0,0,0,.38);
}
.tpl15 .c-hero-frame img{ width:100%; height:38rem; object-fit:cover; filter:saturate(1.02) brightness(.97); }
.tpl15 .c-hero-badge{
  position:absolute; top:1rem; left:1rem;
  background:rgba(255,255,255,.94); color:var(--c-navy);
  padding:.5rem 1rem; border-radius:999px; font-weight:800;
  font-size:1.02rem; letter-spacing:.06em; display:inline-flex; align-items:center; gap:.5rem;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
}
.tpl15 .c-hero-sprout{ position:absolute; width:1.2rem; height:1.2rem; border-radius:50%; background:var(--c-star); box-shadow:0 0 0 6px rgba(var(--gold-rgb), .18); animation:cTwinkleDot 2.8s ease-in-out infinite; }
.tpl15 .c-hero-sprout--1{ top:.6rem; right:1.6rem; }
.tpl15 .c-hero-sprout--2{ bottom:1.2rem; left:.6rem; background:var(--c-cyan); box-shadow:0 0 0 6px rgba(var(--accent-rgb), .18); animation-delay:.9s; }
@keyframes cTwinkleDot{ 0%,100%{ transform:scale(1); opacity:.9;} 50%{ transform:scale(1.35); opacity:1;} }

/* ——— CONSTELLATION STATS (star-node) ——— */
.tpl15 .c-constellation{ padding:6rem 0; position:relative; background:linear-gradient(180deg, var(--c-navy) 0%, var(--c-navy2) 100%); border-top:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06); }
.tpl15 .c-const-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.6rem; position:relative; }
.tpl15 .c-const-grid::before{
  content:''; position:absolute; top:2.6rem; left:8%; right:8%; height:1px;
  background:repeating-linear-gradient(90deg, rgba(var(--gold-rgb), .45) 0 6px, transparent 6px 14px);
  z-index:0; opacity:.7;
}
.tpl15 .c-star-node{ text-align:center; position:relative; z-index:1; padding:1.2rem .6rem; }
.tpl15 .c-star-dot{
  width:5.4rem; height:5.4rem; margin:0 auto 1.2rem; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--white) 0%, var(--c-star) 42%, color-mix(in srgb, var(--c-star) 68%, #000) 100%);
  box-shadow:0 0 26px rgba(var(--gold-rgb), .45), 0 6px 18px rgba(0,0,0,.25);
  display:flex; align-items:center; justify-content:center; font-size:1.75rem; color:var(--c-navy);
  border:2px solid rgba(255,255,255,.65);
}
.tpl15 .c-star-node strong{ display:block; font-family:var(--font-heading); font-size:2.6rem; font-weight:800; color:var(--white); line-height:1; }
.tpl15 .c-star-node span{ font-size:1.08rem; color:rgba(255,255,255,.72); text-transform:uppercase; letter-spacing:.06em; font-weight:700; display:block; margin-top:.45rem; }
.tpl15 .c-star-node p{ font-size:1.22rem; color:rgba(255,255,255,.62); margin:.6rem 0 0; line-height:1.55; }

/* ——— LEVELS ——— */
.tpl15 .c-levels{ background:var(--c-cream); padding:7rem 0; border-top:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08); color:var(--c-ink); }
.tpl15 .c-levels .c-head h2{ color:var(--c-navy); }
.tpl15 .c-levels .c-head p{ color:var(--c-ink-2); }
.tpl15 .c-levels .c-eyebrow{ background:var(--white); border-color:rgba(var(--gold-rgb), .18); color:var(--c-navy); }
.tpl15 .c-levels .c-eyebrow i{ color:var(--c-star); }
.tpl15 .c-level-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.8rem; }
.tpl15 .c-level-card{
  background:var(--white); border:1px solid var(--border-light, #e8eaed); border-radius:18px;
  padding:2.6rem 1.9rem 2rem; text-align:center; text-decoration:none; color:var(--c-ink);
  transition:.3s; position:relative; overflow:hidden; display:flex; flex-direction:column;
  box-shadow:var(--shadow-card, 0 4px 14px rgba(0,0,0,.06));
}
.tpl15 .c-level-card:hover{ border-color:rgba(var(--gold-rgb), .38); transform:translateY(-8px); box-shadow:0 18px 36px rgba(var(--primary-rgb), .14); }
.tpl15 .c-level-card::before{
  content:''; position:absolute; top:-4rem; right:-4rem; width:12rem; height:12rem; border-radius:50%;
  background:radial-gradient(circle, rgba(var(--primary-light-rgb), .12) 0%, transparent 70%); pointer-events:none;
}
.tpl15 .c-level-icon{
  width:6.2rem; height:6.2rem; border-radius:50%; margin:0 auto 1.4rem;
  background:rgba(var(--gold-rgb), .10); border:1.5px solid rgba(var(--gold-rgb), .32);
  display:flex; align-items:center; justify-content:center; font-size:2.4rem; color:var(--c-navy);
}
.tpl15 .c-level-card h4{ font-family:var(--font-heading); color:var(--c-navy); font-size:1.95rem; font-weight:800; margin:0 0 .7rem; }
.tpl15 .c-level-card p{ color:var(--c-ink-2); font-size:1.34rem; line-height:1.65; margin:0 0 1.2rem; flex:1; }
.tpl15 .c-level-meta{ display:flex; gap:.5rem; justify-content:center; flex-wrap:wrap; margin-bottom:1rem; }
.tpl15 .c-level-meta span{
  font-size:1.05rem; font-weight:700; padding:.35rem .85rem; border-radius:999px;
  background:rgba(var(--gold-rgb), .10); border:1px solid rgba(var(--gold-rgb), .18); color:var(--c-navy);
}
.tpl15 .c-level-cta{ display:inline-flex; align-items:center; gap:.5rem; font-weight:800; font-size:1.18rem; color:var(--c-cyan); transition:gap .25s; }
.tpl15 .c-level-card:hover .c-level-cta{ gap:.8rem; }

/* ——— PROGRAMMES ——— */
.tpl15 .c-programs{ padding:7rem 0; background:var(--c-navy2); color:var(--c-on); border-top:1px solid rgba(255,255,255,.06); }
.tpl15 .c-programs-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; }
.tpl15 .c-program{
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:16px;
  padding:2rem 1.6rem; text-align:center; transition:.25s;
}
.tpl15 .c-program:hover{ background:rgba(255,255,255,.07); transform:translateY(-4px); border-color:rgba(var(--gold-rgb), .26); }
.tpl15 .c-program i{ width:4.6rem; height:4.6rem; display:flex; align-items:center; justify-content:center; margin:0 auto 1rem; border-radius:12px; background:rgba(var(--gold-rgb), .14); color:var(--c-star); font-size:1.8rem; border:1px solid rgba(var(--gold-rgb), .22); }
.tpl15 .c-program h4{ font-size:1.5rem; color:var(--white); margin:0 0 .5rem; }
.tpl15 .c-program p{ font-size:1.28rem; color:rgba(255,255,255,.72); line-height:1.6; margin:0; }

/* ——— VISION / MISSION ——— */
.tpl15 .c-compass{ padding:7rem 0; background:var(--c-cream); color:var(--c-ink); }
.tpl15 .c-compass-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.8rem; }
.tpl15 .c-compass-card{
  background:var(--white); border:1px solid var(--border-light, #e8eaed); border-radius:16px;
  padding:2.4rem 2rem; position:relative; box-shadow:var(--shadow-card, 0 4px 14px rgba(0,0,0,.06));
}
.tpl15 .c-compass-card::before{ content:''; position:absolute; top:0; left:1.4rem; right:1.4rem; height:3px; border-radius:0 0 6px 6px; background:var(--c-star); }
.tpl15 .c-compass-card--mission::before{ background:var(--c-cyan); }
.tpl15 .c-compass-num{ position:absolute; top:1rem; right:1rem; font-size:.95rem; font-weight:800; letter-spacing:.08em; color:var(--c-navy); background:rgba(var(--gold-rgb), .10); border:1px solid rgba(var(--gold-rgb), .18); padding:.3rem .7rem; border-radius:999px; }
.tpl15 .c-compass-card--mission .c-compass-num{ color:var(--c-cyan); background:rgba(var(--accent-rgb), .10); border-color:rgba(var(--accent-rgb), .18); }
.tpl15 .c-compass-icon{ width:4.2rem; height:4.2rem; border-radius:12px; display:flex; align-items:center; justify-content:center; background:var(--c-navy); color:var(--c-star); font-size:1.6rem; margin-bottom:1rem; }
.tpl15 .c-compass-card--mission .c-compass-icon{ background:var(--c-cyan); color:var(--white); }
.tpl15 .c-compass-card h3{ font-family:var(--font-heading); font-size:1.85rem; margin:0 0 .8rem; color:var(--c-navy); }
.tpl15 .c-compass-text{ font-size:1.42rem; line-height:1.72; color:var(--c-ink-2); margin:0; }
.tpl15 .c-compass-list{ list-style:none; padding:0; margin:0; }
.tpl15 .c-compass-list li{ display:flex; gap:.8rem; padding:.85rem 0; border-bottom:1px solid rgba(var(--primary-rgb), .08); font-size:1.34rem; line-height:1.6; color:var(--c-ink-2); }
.tpl15 .c-compass-list li:last-child{ border-bottom:none; }
.tpl15 .c-compass-list li i{ color:var(--c-star); margin-top:.2rem; flex-shrink:0; }

/* ——— VALUES CAROUSEL ——— */
.tpl15 .c-carousel{ padding:7rem 0; background:var(--white); color:var(--c-ink); }
.tpl15 .c-carousel-stage{ overflow:hidden; padding:.4rem 0 1rem; }
.tpl15 .c-carousel-track{ display:flex; gap:1.6rem; transition:transform .55s cubic-bezier(.22,.8,.22,1); will-change:transform; }
.tpl15 .c-carousel-card{
  flex:0 0 calc((100% - 3.2rem)/3); min-width:0;
  background:var(--white); border:1px solid var(--border-light, #e8eaed); border-radius:16px; overflow:hidden;
  box-shadow:var(--shadow-card, 0 4px 14px rgba(0,0,0,.06)); display:flex; flex-direction:column;
}
.tpl15 .c-carousel-img{ position:relative; height:19rem; overflow:hidden; background:var(--c-cream); }
.tpl15 .c-carousel-img img{ width:100%; height:100%; object-fit:cover; }
.tpl15 .c-carousel-tag{
  position:absolute; top:1rem; left:1rem; background:var(--c-navy); color:var(--c-star);
  padding:.35rem .85rem; border-radius:999px; font-size:.95rem; font-weight:800; letter-spacing:.06em;
}
.tpl15 .c-carousel-body{ padding:1.6rem; flex:1; background:var(--white); }
.tpl15 .c-carousel-body p{ font-size:1.38rem; line-height:1.68; color:var(--c-ink-2); margin:0; }
.tpl15 .c-carousel-controls{ display:flex; align-items:center; justify-content:center; gap:1.2rem; margin-top:1.8rem; }
.tpl15 .c-carousel-arrow{
  width:4.2rem; height:4.2rem; border-radius:50%; border:1.5px solid var(--c-navy);
  background:var(--white); color:var(--c-navy); display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:.25s;
}
.tpl15 .c-carousel-arrow:hover{ background:var(--c-navy); color:var(--white); transform:translateY(-2px); }
.tpl15 .c-carousel-dots{ display:flex; gap:.5rem; align-items:center; }
.tpl15 .c-carousel-dots button{ width:.9rem; height:.9rem; border-radius:50%; border:none; background:rgba(var(--primary-rgb), .18); cursor:pointer; padding:0; transition:.25s; }
.tpl15 .c-carousel-dots button.is-active{ background:var(--c-star); width:2.2rem; border-radius:999px; }

/* ——— CORE VALUES ——— */
.tpl15 .c-values{ padding:7rem 0; background:var(--c-navy); border-top:1px solid rgba(255,255,255,.06); }
.tpl15 .c-values .c-head h2{ color:var(--white); }
.tpl15 .c-values .c-head p{ color:rgba(255,255,255,.72); }
.tpl15 .c-values-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.tpl15 .c-value-card{
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:16px;
  padding:2rem 1.5rem; text-align:center; transition:.3s;
}
.tpl15 .c-value-card:hover{ transform:translateY(-4px); border-color:rgba(var(--gold-rgb), .32); background:rgba(255,255,255,.07); }
.tpl15 .c-value-card i{ width:5rem; height:5rem; display:flex; align-items:center; justify-content:center; margin:0 auto 1rem; border-radius:12px; background:rgba(var(--gold-rgb), .14); color:var(--c-star); font-size:1.9rem; border:1px solid rgba(var(--gold-rgb), .22); }
.tpl15 .c-value-card span{ display:block; font-size:1.45rem; font-weight:800; color:var(--white); margin-bottom:.35rem; }
.tpl15 .c-value-card p{ font-size:1.22rem; color:rgba(255,255,255,.68); line-height:1.6; margin:0; }

/* ——— VIDEO ——— */
.tpl15 .c-video{ padding:7rem 0; background:var(--white); color:var(--c-ink); }
.tpl15 .c-video-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:2.8rem; align-items:center; }
.tpl15 .c-video-frame{ position:relative; border-radius:16px; overflow:hidden; border:1px solid var(--border-light, #e8eaed); background:var(--c-navy); box-shadow:var(--shadow-md, 0 10px 28px rgba(0,0,0,.12)); cursor:pointer; }
.tpl15 .c-video-frame img{ width:100%; height:34rem; object-fit:cover; filter:brightness(.92); }
.tpl15 .c-video-play{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg, rgba(0,0,0,.08) 0%, rgba(var(--primary-deeper-rgb), .45) 100%); color:var(--white);
}
.tpl15 .c-video-play i{ width:6.8rem; height:6.8rem; display:flex; align-items:center; justify-content:center; background:var(--c-cyan); border-radius:50%; font-size:2.2rem; padding-left:.3rem; box-shadow:0 10px 28px rgba(0,0,0,.22); }
.tpl15 .c-video-cap{ position:absolute; left:1rem; bottom:1rem; background:rgba(255,255,255,.92); color:var(--c-navy); padding:.4rem .85rem; border-radius:999px; font-size:1rem; font-weight:800; display:inline-flex; align-items:center; gap:.35rem; }
.tpl15 .c-video-pills{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1.2rem; }
.tpl15 .c-pill{ display:inline-flex; align-items:center; gap:.35rem; padding:.4rem .9rem; border-radius:999px; background:rgba(var(--gold-rgb), .10); border:1px solid rgba(var(--gold-rgb), .18); color:var(--c-navy); font-size:1.12rem; font-weight:700; }

/* ——— PORTAL ——— */
.tpl15 .c-portal{ padding:7rem 0; background:var(--c-navy2); color:var(--c-on); border-top:1px solid rgba(255,255,255,.06); }
.tpl15 .c-portal-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; }
.tpl15 .c-portal-card{
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:16px;
  padding:1.8rem 1.4rem; text-decoration:none; color:var(--white); display:flex; flex-direction:column; transition:.25s;
}
.tpl15 .c-portal-card:hover{ transform:translateY(-6px); background:rgba(255,255,255,.07); border-color:rgba(var(--gold-rgb), .28); }
.tpl15 .c-portal-card--wide{ grid-column:span 2; }
.tpl15 .c-portal-num{ font-size:.9rem; font-weight:800; letter-spacing:.08em; color:var(--c-star); }
.tpl15 .c-portal-icon{ width:4.4rem; height:4.4rem; border-radius:12px; background:rgba(var(--gold-rgb), .14); border:1px solid rgba(var(--gold-rgb), .22); color:var(--c-star); display:flex; align-items:center; justify-content:center; font-size:1.7rem; margin:.6rem 0 .8rem; }
.tpl15 .c-portal-card h4{ font-size:1.45rem; margin:0 0 .5rem; color:var(--white); }
.tpl15 .c-portal-card p{ font-size:1.26rem; color:rgba(255,255,255,.72); line-height:1.6; margin:0 0 .8rem; flex:1; }
.tpl15 .c-portal-link{ font-size:1.1rem; font-weight:700; color:var(--c-star); display:inline-flex; align-items:center; gap:.35rem; }
.tpl15 .c-portal-bars{ display:flex; gap:.3rem; align-items:flex-end; height:4rem; margin:.4rem 0; opacity:.9; }
.tpl15 .c-portal-bars span{ flex:1; background:linear-gradient(180deg, var(--c-star) 0%, rgba(var(--gold-rgb), .55) 100%); border-radius:4px 4px 0 0; }

/* ——— SHOWCASE ——— */
.tpl15 .c-showcase{ padding:7rem 0; background:var(--c-cream); color:var(--c-ink); }
.tpl15 .c-showcase-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; }
.tpl15 .c-show-card{
  background:var(--white); border:1px solid var(--border-light, #e8eaed); border-radius:16px; overflow:hidden;
  text-decoration:none; color:var(--c-ink); display:flex; flex-direction:column; transition:.25s; box-shadow:var(--shadow-card, 0 4px 14px rgba(0,0,0,.06));
}
.tpl15 .c-show-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md, 0 10px 28px rgba(0,0,0,.10)); }
.tpl15 .c-show-visual{ background:var(--c-navy2); padding:1.2rem; display:flex; align-items:center; justify-content:center; min-height:20rem; position:relative; }
.tpl15 .c-show-visual--book{ background:linear-gradient(135deg, var(--c-navy2) 0%, var(--c-navy) 100%); color:var(--white); }
.tpl15 .c-show-visual--gallery{ padding:0; background:var(--c-navy); }
.tpl15 .c-mini-doc{ width:100%; max-width:26rem; background:var(--white); border-radius:8px; overflow:hidden; border:1px solid rgba(var(--primary-rgb), .12); }
.tpl15 .c-md-band{ display:flex; align-items:center; gap:.7rem; padding:.6rem .7rem; background:var(--c-navy); color:var(--white); }
.tpl15 .c-md-logo{ width:2.2rem; height:2.2rem; border-radius:50%; background:var(--c-star); flex-shrink:0; }
.tpl15 .c-md-lines{ flex:1; display:flex; flex-direction:column; gap:.2rem; }
.tpl15 .c-md-line{ height:.4rem; background:var(--white); border-radius:2px; opacity:.7; }
.tpl15 .c-md-stamp{ width:2.6rem; height:2.6rem; border-radius:50%; border:2px dashed rgba(255,255,255,.35); flex-shrink:0; }
.tpl15 .c-md-title-strip{ height:.8rem; background:var(--c-star); margin:.4rem .7rem; border-radius:2px; }
.tpl15 .c-md-info{ padding:.4rem .7rem; }
.tpl15 .c-md-info-row{ display:flex; gap:.5rem; margin-bottom:.25rem; }
.tpl15 .c-md-info-row .c-md-line{ background:rgba(var(--primary-deeper-rgb), .22); height:.38rem; }
.tpl15 .c-md-badges{ display:flex; gap:.35rem; padding:.4rem .7rem; justify-content:flex-end; }
.tpl15 .c-md-badge{ font-size:.8rem; font-weight:800; padding:.2rem .5rem; border-radius:4px; color:var(--white); }
.tpl15 .c-md-badge--star{ background:var(--c-star); color:var(--c-navy); }
.tpl15 .c-md-badge--cyan{ background:var(--c-cyan); }
.tpl15 .c-md-table{ padding:.35rem .7rem .7rem; }
.tpl15 .c-md-row{ display:flex; gap:.18rem; margin-bottom:.18rem; }
.tpl15 .c-md-cell{ height:.42rem; background:rgba(var(--primary-rgb), .08); border-radius:1px; }
.tpl15 .c-md-cell--label{ flex:1; background:rgba(var(--primary-rgb), .16); }
.tpl15 .c-md-cell--total{ background:var(--c-navy); }
.tpl15 .c-md-cell--grade{ background:var(--c-star); }
.tpl15 .c-mini-book{ text-align:center; padding:1.6rem; }
.tpl15 .c-mb-label{ font-size:.85rem; letter-spacing:.20em; text-transform:uppercase; opacity:.85; }
.tpl15 .c-mb-year{ font-family:var(--font-heading); font-size:3.4rem; font-weight:800; line-height:1; margin:.25rem 0; }
.tpl15 .c-mb-title{ font-size:1.1rem; letter-spacing:.18em; text-transform:uppercase; font-weight:800; }
.tpl15 .c-mb-rule{ width:3.8rem; height:2px; background:var(--c-star); margin:.9rem auto 0; border-radius:2px; }
.tpl15 .c-gallery-single{ position:relative; width:100%; height:100%; min-height:20rem; }
.tpl15 .c-gallery-single img{ width:100%; height:100%; object-fit:cover; }
.tpl15 .c-gallery-cap{ position:absolute; left:.7rem; bottom:.7rem; background:rgba(255,255,255,.92); color:var(--c-navy); font-size:.95rem; font-weight:700; padding:.35rem .7rem; border-radius:999px; display:inline-flex; align-items:center; gap:.35rem; }
.tpl15 .c-gallery-corner{ position:absolute; right:.7rem; top:.7rem; width:2.8rem; height:2.8rem; border-radius:50%; background:rgba(255,255,255,.16); color:var(--white); display:flex; align-items:center; justify-content:center; backdrop-filter:blur(6px); }
.tpl15 .c-show-body{ padding:1.5rem 1.5rem 1.7rem; flex:1; display:flex; flex-direction:column; }
.tpl15 .c-show-tag{ font-size:.92rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--c-cyan); display:inline-flex; align-items:center; gap:.35rem; margin-bottom:.55rem; }
.tpl15 .c-show-card h4{ font-family:var(--font-heading); font-size:1.45rem; margin:0 0 .55rem; color:var(--c-navy); }
.tpl15 .c-show-card p{ font-size:1.26rem; color:var(--c-ink-2); line-height:1.6; margin:0 0 .75rem; flex:1; }
.tpl15 .c-show-link{ font-size:1.1rem; font-weight:700; color:var(--c-navy); display:inline-flex; align-items:center; gap:.35rem; }

/* ——— WHY US ——— */
.tpl15 .c-why{ padding:7rem 0; background:var(--c-navy); color:var(--c-on); border-top:1px solid rgba(255,255,255,.06); }
.tpl15 .c-why-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; }
.tpl15 .c-why-card{
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:16px;
  padding:1.9rem 1.4rem; text-align:center; transition:.25s;
}
.tpl15 .c-why-card:hover{ background:rgba(255,255,255,.07); transform:translateY(-4px); border-color:rgba(var(--gold-rgb), .28); }
.tpl15 .c-why-num{ font-size:.82rem; font-weight:800; letter-spacing:.10em; color:var(--c-star); }
.tpl15 .c-why-icon{ width:5rem; height:5rem; border-radius:50%; background:rgba(var(--gold-rgb), .12); border:1.5px solid rgba(var(--gold-rgb), .22); display:flex; align-items:center; justify-content:center; font-size:1.8rem; color:var(--c-star); margin:.7rem auto .7rem; }
.tpl15 .c-why-card h4{ font-size:1.4rem; margin:0 0 .45rem; color:var(--white); }
.tpl15 .c-why-card p{ font-size:1.22rem; color:rgba(255,255,255,.68); line-height:1.6; margin:0; }

/* ——— FOUNDER ——— */
.tpl15 .c-founder{ padding:7rem 0; background:var(--c-cream); color:var(--c-ink); }
.tpl15 .c-founder-inner{
  display:grid; grid-template-columns:22rem 1fr; gap:2.6rem; align-items:center;
  background:var(--white); border:1px solid var(--border-light, #e8eaed); border-radius:18px; padding:2.4rem; box-shadow:var(--shadow-card, 0 4px 14px rgba(0,0,0,.06));
}
.tpl15 .c-founder-photo{ position:relative; border-radius:14px; overflow:hidden; background:var(--c-navy2); aspect-ratio:1; display:flex; align-items:center; justify-content:center; }
.tpl15 .c-founder-photo img{ width:100%; height:100%; object-fit:cover; }
.tpl15 .c-founder-initial{ width:7rem; height:7rem; border-radius:50%; background:var(--c-star); color:var(--c-navy); display:flex; align-items:center; justify-content:center; font-family:var(--font-heading); font-size:2.8rem; font-weight:800; }
.tpl15 .c-founder-stamp{ position:absolute; bottom:.8rem; left:50%; transform:translateX(-50%); background:var(--c-star); color:var(--c-navy); font-size:.8rem; font-weight:800; letter-spacing:.06em; padding:.3rem .7rem; border-radius:999px; white-space:nowrap; }
.tpl15 .c-founder-quote{ font-family:var(--font-heading); font-style:italic; font-size:clamp(1.5rem,2vw,1.9rem); line-height:1.55; color:var(--c-navy); margin:0 0 1.1rem; border-left:3px solid var(--c-star); padding-left:1rem; }
.tpl15 .c-founder-meta strong{ font-size:1.45rem; color:var(--c-navy); display:block; }
.tpl15 .c-founder-meta span{ font-size:1.12rem; color:var(--c-ink-2); }
.tpl15 .c-founder-stars{ color:var(--c-star); font-size:1.15rem; margin-top:.45rem; display:flex; gap:.18rem; }

/* ——— NEWS ——— */
.tpl15 .c-news{ padding:7rem 0; background:var(--white); color:var(--c-ink); }
.tpl15 .c-news-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; }
.tpl15 .c-news-card{
  background:var(--white); border:1px solid var(--border-light, #e8eaed); border-radius:16px; overflow:hidden;
  text-decoration:none; color:var(--c-ink); display:flex; flex-direction:column; transition:.25s; box-shadow:var(--shadow-card, 0 4px 14px rgba(0,0,0,.06));
}
.tpl15 .c-news-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md, 0 10px 28px rgba(0,0,0,.10)); border-color:rgba(var(--gold-rgb), .18); }
.tpl15 .c-news-img{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--c-cream); }
.tpl15 .c-news-img img{ width:100%; height:100%; object-fit:cover; transition:transform .6s; }
.tpl15 .c-news-card:hover .c-news-img img{ transform:scale(1.06); }
.tpl15 .c-news-date{ position:absolute; top:.9rem; left:.9rem; background:var(--white); border:1px solid rgba(var(--gold-rgb), .18); border-radius:10px; padding:.6rem .8rem; text-align:center; box-shadow:var(--shadow-sm, 0 4px 10px rgba(0,0,0,.08)); }
.tpl15 .c-news-date strong{ display:block; font-family:var(--font-heading); font-size:1.65rem; font-weight:800; color:var(--c-navy); line-height:1; }
.tpl15 .c-news-date span{ font-size:.82rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-2); }
.tpl15 .c-news-body{ padding:1.5rem 1.5rem 1.6rem; flex:1; display:flex; flex-direction:column; }
.tpl15 .c-news-tag{ font-size:.88rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--c-cyan); display:inline-flex; align-items:center; gap:.35rem; margin-bottom:.45rem; }
.tpl15 .c-news-card h4{ font-family:var(--font-heading); font-size:1.42rem; margin:0 0 .55rem; line-height:1.32; color:var(--c-navy); }
.tpl15 .c-news-card p{ font-size:1.22rem; color:var(--c-ink-2); line-height:1.6; margin:0 0 .7rem; flex:1; }
.tpl15 .c-news-link{ font-size:1.08rem; font-weight:700; color:var(--c-navy); display:inline-flex; align-items:center; gap:.35rem; }

/* ——— CTA ——— */
.tpl15 .c-cta{
  position:relative; text-align:center; padding:6rem 1.6rem;
  background:linear-gradient(180deg, var(--c-navy2) 0%, var(--c-navy) 100%);
  color:var(--white); overflow:hidden; border-top:1px solid rgba(255,255,255,.06);
}
.tpl15 .c-cta::before{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(var(--gold-rgb), .16) 0%, transparent 60%),
    radial-gradient(ellipse at 18% 18%, rgba(var(--primary-light-rgb), .10) 0%, transparent 45%);
  pointer-events:none;
}
.tpl15 .c-cta-inner{ position:relative; z-index:1; max-width:74rem; margin:0 auto; }
.tpl15 .c-cta h3{ font-family:var(--font-heading); color:var(--white); font-size:clamp(2.6rem,4vw,3.8rem); font-weight:800; margin:0 0 1rem; line-height:1.12; }
.tpl15 .c-cta p{ color:rgba(255,255,255,.78); font-size:1.45rem; max-width:52rem; margin:0 auto 1.6rem; line-height:1.65; }
.tpl15 .c-cta-stats{ display:flex; justify-content:center; gap:1.2rem; margin:1.8rem 0 1.6rem; flex-wrap:wrap; }
.tpl15 .c-cta-stats > div{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10); border-radius:12px;
  padding:.9rem 1.4rem; min-width:10rem;
}
.tpl15 .c-cta-stats strong{ display:block; font-size:1.95rem; font-weight:800; color:var(--c-star); line-height:1; }
.tpl15 .c-cta-stats span{ font-size:.82rem; letter-spacing:.10em; text-transform:uppercase; color:rgba(255,255,255,.68); font-weight:700; }
.tpl15 .c-cta-actions{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-bottom:1.4rem; }
.tpl15 .c-cta-form{
  max-width:54rem; margin:0 auto; background:var(--white); border:1px solid rgba(255,255,255,.18);
  border-radius:999px; padding:.45rem; display:flex; gap:.45rem; box-shadow:0 12px 28px rgba(0,0,0,.18);
}
.tpl15 .c-cta-form input[type="email"]{
  flex:1; border:none !important; background:transparent !important; box-shadow:none !important;
  padding:1rem 1.4rem !important; font-size:1.38rem; color:var(--c-navy);
}
.tpl15 .c-cta-form input::placeholder{ color:var(--c-ink-2); }
.tpl15 .c-cta-foot{ font-size:1.06rem; color:rgba(255,255,255,.62); margin-top:.9rem; }
.tpl15 .c-cta-foot i{ color:var(--c-star); }

/* ——— Responsive ——— */
@media(max-width:991px){
  .tpl15 .c-hero-grid, .tpl15 .c-compass-grid, .tpl15 .c-video-grid, .tpl15 .c-founder-inner{ grid-template-columns:1fr; }
  .tpl15 .c-const-grid{ grid-template-columns:repeat(2,1fr); gap:1.2rem; }
  .tpl15 .c-const-grid::before{ display:none; }
  .tpl15 .c-level-grid, .tpl15 .c-programs-grid, .tpl15 .c-values-grid, .tpl15 .c-showcase-grid, .tpl15 .c-news-grid{ grid-template-columns:1fr; }
  .tpl15 .c-portal-grid, .tpl15 .c-why-grid{ grid-template-columns:1fr 1fr; }
  .tpl15 .c-carousel-card{ flex:0 0 calc((100% - 1.6rem)/2); }
  .tpl15 .c-hero-frame img{ height:30rem; }
  .tpl15 .c-cta-form{ flex-direction:column; border-radius:16px; padding:.8rem; }
  .tpl15 .c-cta-form input[type="email"]{ border:1px solid rgba(var(--primary-rgb), .12) !important; border-radius:999px !important; }
}
/* ——— MOBILE FIRST-PRINCIPLE FIX ———
   Goal: avoid endless vertical tower on mobile.
   • Keep desktop/tablet >=769px untouched (grid stays grid).
   • On <=768px, long repeating grids become horizontal snap
     sliders (1 row tall) instead of 6-8 stacked rows.
   • Sections where 1 column would double scroll height are
     converted selectively; vision/mission, CTA stay stacked
     because they are only 2 items / form.
   • Also tighten paddings, center-align pills/text that
     misalign when grid collapses.
*/
@media(max-width:768px){
  /* — Global rhythm: less whitespace = less scroll — */
  .tpl15 .c-constellation,
  .tpl15 .c-levels,
  .tpl15 .c-programs,
  .tpl15 .c-compass,
  .tpl15 .c-carousel,
  .tpl15 .c-values,
  .tpl15 .c-video,
  .tpl15 .c-portal,
  .tpl15 .c-showcase,
  .tpl15 .c-why,
  .tpl15 .c-founder,
  .tpl15 .c-news{ padding:3.2rem 0; }
  .tpl15 .c-head{ margin:0 auto 2rem; }
  .tpl15 .c-head h2{ font-size:clamp(2.1rem,6.2vw,2.8rem); line-height:1.12; }
  .tpl15 .c-head h2 span{ display:inline; }
  .tpl15 .c-head p{ font-size:1.32rem; line-height:1.6; padding:0 .4rem; }
  .tpl15 .c-eyebrow{ font-size:.98rem; padding:.45rem 1rem; }
  /* — HERO: alignment + CTA — */
  .tpl15 .c-hero{ padding:4.8rem 0 3rem; }
  .tpl15 .c-hero h1{ font-size:clamp(2.8rem,8.5vw,3.6rem); margin:1rem 0 .9rem; }
  .tpl15 .c-hero p{ font-size:1.42rem; line-height:1.68; margin-bottom:1.4rem; }
  .tpl15 .c-hero-cta{ display:flex; flex-direction:row; flex-wrap:nowrap; gap:.6rem; }
  .tpl15 .c-hero-cta .c-btn{ flex:1 1 0; min-width:0; justify-content:center; padding:.95rem .75rem; font-size:1.05rem; white-space:nowrap; }
  .tpl15 .c-hero-cta .c-btn--outline{ width:auto; }
  .tpl15 .c-hero-trust{ display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; }
  .tpl15 .c-hero-trust .c-trust{ flex-direction:column; align-items:center; text-align:center; padding:.6rem .35rem; border-radius:10px; gap:.35rem; justify-content:center; }
  .tpl15 .c-hero-trust .c-trust i{ width:2.8rem; height:2.8rem; font-size:1.05rem; }
  .tpl15 .c-hero-trust .c-trust strong{ font-size:1.1rem; line-height:1.15; }
  .tpl15 .c-hero-trust .c-trust span{ font-size:.82rem; line-height:1.25; }
  .tpl15 .c-hero-photo{ padding:.6rem 0 0; }
  .tpl15 .c-hero-frame{ border-radius:14px; }
  .tpl15 .c-hero-frame img{ height:24rem; }
  .tpl15 .c-hero-badge{ font-size:.92rem; padding:.4rem .8rem; top:.6rem; left:.6rem; }
  .tpl15 .c-ticker-track{ font-size:.95rem; gap:1.8rem; animation-duration:22s; }
  /* — CONSTELLATION STATS: keep 2×2, not 1×4 — */
  .tpl15 .c-const-grid{ grid-template-columns:repeat(2,1fr); gap:.8rem; }
  .tpl15 .c-star-node{ padding:.8rem .4rem; }
  .tpl15 .c-star-dot{ width:4.4rem; height:4.4rem; font-size:1.5rem; margin-bottom:.7rem; }
  .tpl15 .c-star-node strong{ font-size:2.15rem; }
  .tpl15 .c-star-node span{ font-size:.92rem; margin-top:.3rem; }
  .tpl15 .c-star-node p{ font-size:1.08rem; margin-top:.3rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  /* — LEVELS: horizontal snap (3 cards → 1 row) — */
  .tpl15 .c-level-grid{
    display:flex; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden;
    gap:1rem; padding:0 .2rem 1rem; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; grid-template-columns:none;
  }
  .tpl15 .c-level-grid::-webkit-scrollbar{ display:none; }
  .tpl15 .c-level-card{ flex:0 0 78%; max-width:78%; scroll-snap-align:start; scroll-snap-stop:always; padding:1.8rem 1.3rem 1.4rem; }
  .tpl15 .c-level-icon{ width:5rem; height:5rem; font-size:1.9rem; margin-bottom:1rem; }
  .tpl15 .c-level-card h4{ font-size:1.65rem; }
  .tpl15 .c-level-card p{ font-size:1.2rem; -webkit-line-clamp:3; display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; }
  .tpl15 .c-level-meta span{ font-size:.96rem; padding:.3rem .7rem; }
  /* — PROGRAMMES: 6 cards → slider (biggest scroll saver) — */
  .tpl15 .c-programs-grid{
    display:flex; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden;
    gap:1rem; padding:0 .2rem 1rem; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; grid-template-columns:none;
  }
  .tpl15 .c-programs-grid::-webkit-scrollbar{ display:none; }
  .tpl15 .c-program{ flex:0 0 68%; max-width:68%; scroll-snap-align:start; scroll-snap-stop:always; padding:1.5rem 1.1rem; }
  .tpl15 .c-program i{ width:4rem; height:4rem; font-size:1.55rem; margin-bottom:.7rem; }
  .tpl15 .c-program h4{ font-size:1.32rem; }
  .tpl15 .c-program p{ font-size:1.15rem; }
  /* — VISION/MISSION: keep stacked but tighten + fix badge overlap — */
  .tpl15 .c-compass-grid{ grid-template-columns:1fr; gap:1rem; }
  .tpl15 .c-compass-card{ padding:2rem 1.3rem 1.5rem; padding-top:2.4rem; }
  .tpl15 .c-compass-num{ top:.7rem; right:.7rem; font-size:.82rem; padding:.28rem .6rem; }
  .tpl15 .c-compass-icon{ width:3.8rem; height:3.8rem; font-size:1.45rem; margin-bottom:.7rem; }
  .tpl15 .c-compass-card h3{ font-size:1.55rem; padding-right:5.5rem; }
  .tpl15 .c-compass-text{ font-size:1.28rem; line-height:1.65; }
  .tpl15 .c-compass-list li{ gap:.6rem; padding:.65rem 0; font-size:1.18rem; }
  /* — VALUES: slider instead of 6-row tower — */
  .tpl15 .c-values-grid{
    display:flex; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden;
    gap:1rem; padding:0 .2rem 1rem; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; grid-template-columns:none;
  }
  .tpl15 .c-values-grid::-webkit-scrollbar{ display:none; }
  .tpl15 .c-value-card{ flex:0 0 72%; max-width:72%; scroll-snap-align:start; scroll-snap-stop:always; padding:1.5rem 1.1rem; }
  .tpl15 .c-value-card i{ width:4.2rem; height:4.2rem; font-size:1.6rem; margin-bottom:.7rem; }
  .tpl15 .c-value-card span{ font-size:1.28rem; }
  .tpl15 .c-value-card p{ font-size:1.12rem; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
  /* — VIDEO: image first, text centered + variable-color fix — */
  .tpl15 .c-video-grid{ gap:1.4rem; }
  .tpl15 .c-video-frame{ border-radius:12px; }
  .tpl15 .c-video-frame img{ height:20rem; }
  .tpl15 .c-video-play i{ width:5.4rem; height:5.4rem; font-size:1.7rem; }
  .tpl15 .c-video-grid > div:last-child{ text-align:center; }
  .tpl15 .c-video-grid > div:last-child .c-eyebrow{ justify-content:center; margin-left:auto; margin-right:auto; }
  .tpl15 .c-video-grid > div:last-child h3{ font-size:1.85rem !important; text-align:center; }
  .tpl15 .c-video-grid > div:last-child p{ text-align:center; font-size:1.28rem !important; }
  .tpl15 .c-video-pills{ justify-content:center; }
  .tpl15 .c-video-grid > div:last-child .c-btn--outline{ width:100%; justify-content:center; border-color:var(--c-navy); color:var(--c-navy); }
  /* — PORTAL: 8 cards → slider (critical) — */
  .tpl15 .c-portal-grid{
    display:flex; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden;
    gap:1rem; padding:0 .2rem 1rem; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; grid-template-columns:none;
  }
  .tpl15 .c-portal-grid::-webkit-scrollbar{ display:none; }
  .tpl15 .c-portal-card{ flex:0 0 70%; max-width:70%; scroll-snap-align:start; scroll-snap-stop:always; padding:1.4rem 1.1rem; }
  .tpl15 .c-portal-card--wide{ grid-column:auto; }
  .tpl15 .c-portal-icon{ width:3.8rem; height:3.8rem; font-size:1.5rem; margin:.5rem 0 .6rem; }
  .tpl15 .c-portal-card h4{ font-size:1.3rem; }
  .tpl15 .c-portal-card p{ font-size:1.12rem; }
  .tpl15 .c-portal-bars{ height:3.2rem; }
  /* — SHOWCASE: 3 cards → slider — */
  .tpl15 .c-showcase-grid{
    display:flex; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden;
    gap:1rem; padding:0 .2rem 1rem; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; grid-template-columns:none;
  }
  .tpl15 .c-showcase-grid::-webkit-scrollbar{ display:none; }
  .tpl15 .c-show-card{ flex:0 0 80%; max-width:80%; scroll-snap-align:start; scroll-snap-stop:always; }
  .tpl15 .c-show-visual{ min-height:16rem; padding:.8rem; }
  .tpl15 .c-gallery-single{ min-height:16rem; }
  .tpl15 .c-show-body{ padding:1.2rem 1.2rem 1.3rem; }
  .tpl15 .c-show-card h4{ font-size:1.28rem; }
  .tpl15 .c-show-card p{ font-size:1.12rem; }
  /* — WHY US: compact 2-col grid (only 4 cards, 2×2 is shorter than slider UX) — */
  .tpl15 .c-why-grid{ grid-template-columns:repeat(2,1fr); gap:.8rem; }
  .tpl15 .c-why-card{ padding:1.3rem .9rem; }
  .tpl15 .c-why-num{ font-size:.76rem; }
  .tpl15 .c-why-icon{ width:4rem; height:4rem; font-size:1.5rem; margin:.4rem auto .5rem; }
  .tpl15 .c-why-card h4{ font-size:1.22rem; line-height:1.3; }
  .tpl15 .c-why-card p{ font-size:1.06rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  /* — FOUNDER: centered — */
  .tpl15 .c-founder-inner{ gap:1.2rem; padding:1.4rem; text-align:center; }
  .tpl15 .c-founder-photo{ max-width:22rem; margin:0 auto; aspect-ratio:1; border-radius:12px; }
  .tpl15 .c-founder-quote{ font-size:1.38rem; border-left:none; border-top:3px solid var(--c-star); padding:1rem 0 0; padding-left:0; }
  .tpl15 .c-founder-meta strong{ font-size:1.32rem; }
  .tpl15 .c-founder-meta span{ font-size:1.05rem; }
  .tpl15 .c-founder-stars{ justify-content:center; }
  /* — CAROUSEL: single card peeking — */
  .tpl15 .c-carousel-stage{ padding:.2rem 0 .6rem; }
  .tpl15 .c-carousel-card{ flex:0 0 84%; }
  .tpl15 .c-carousel-img{ height:16rem; }
  .tpl15 .c-carousel-body{ padding:1.2rem; }
  .tpl15 .c-carousel-body p{ font-size:1.22rem; }
  .tpl15 .c-carousel-arrow{ width:3.6rem; height:3.6rem; font-size:1.1rem; }
  /* — NEWS: slider (3 cards → swipe) — */
  .tpl15 .c-news-grid{
    display:flex; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden;
    gap:1rem; padding:0 .2rem 1rem; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; grid-template-columns:none;
  }
  .tpl15 .c-news-grid::-webkit-scrollbar{ display:none; }
  .tpl15 .c-news-card{ flex:0 0 78%; max-width:78%; scroll-snap-align:start; scroll-snap-stop:always; }
  .tpl15 .c-news-img{ aspect-ratio:16/10; }
  .tpl15 .c-news-body{ padding:1.1rem 1.1rem 1.2rem; }
  .tpl15 .c-news-card h4{ font-size:1.28rem; }
  .tpl15 .c-news-card p{ font-size:1.1rem; }
  .tpl15 .c-news-link{ font-size:1rem; }
  /* — CTA: tighter + stacked stats — */
  .tpl15 .c-cta{ padding:3rem 1rem 2.2rem; }
  .tpl15 .c-cta h3{ font-size:clamp(1.9rem,6.8vw,2.6rem); }
  .tpl15 .c-cta p{ font-size:1.18rem; }
  .tpl15 .c-cta-stats{ gap:.6rem; margin:1.2rem 0; }
  .tpl15 .c-cta-stats > div{ flex:1 1 7.2rem; min-width:7.2rem; padding:.75rem .6rem; border-radius:10px; }
  .tpl15 .c-cta-stats strong{ font-size:1.55rem; }
  .tpl15 .c-cta-stats span{ font-size:.74rem; }
  .tpl15 .c-cta-actions{ flex-direction:row; flex-wrap:nowrap; gap:.6rem; justify-content:center; }
  .tpl15 .c-cta-actions .c-btn{ flex:1 1 0; min-width:0; width:auto; justify-content:center; white-space:nowrap; padding:1rem .75rem; font-size:1.12rem; }
  /* First-principle fallback: any twin-button row must stay side-by-side on mobile (covers future pairs) */
  .tpl15 .c-hero-cta, .tpl15 .c-cta-actions{ flex-direction:row !important; flex-wrap:nowrap !important; }
  .tpl15 .c-cta-form{ flex-direction:column; border-radius:16px; padding:.7rem; gap:.6rem; max-width:100%; }
  .tpl15 .c-cta-form input[type="email"]{ border:1px solid rgba(var(--primary-rgb), .12) !important; border-radius:999px !important; padding:.9rem 1.2rem !important; font-size:1.2rem !important; }
  .tpl15 .c-cta-foot{ font-size:.98rem; padding:0 .5rem; }
}
@media(max-width:600px){
  .tpl15 .c-hero{ padding:4.2rem 0 2.6rem; }
  .tpl15 .c-const-grid{ grid-template-columns:repeat(2,1fr); }
  /* keep .c-portal-grid as horizontal slider from 768px — do not revert to grid */
  .tpl15 .c-carousel-card{ flex:0 0 84%; }
  .tpl15 .c-hero-photo{ padding:.4rem 0 0; }
  .tpl15 .c-hero-frame img{ height:22rem; }
  .tpl15 .c-btn--outline{ margin-left:0; }
}
@media(max-width:400px){
  .tpl15 .c-hero-cta{ gap:.45rem; }
  .tpl15 .c-hero-cta .c-btn{ padding:.85rem .5rem; font-size:.92rem; gap:.4rem; }
  .tpl15 .c-hero-trust{ gap:.35rem; }
  .tpl15 .c-hero-trust .c-trust{ padding:.5rem .2rem; }
  .tpl15 .c-hero-trust .c-trust i{ width:2.4rem; height:2.4rem; font-size:.95rem; }
  .tpl15 .c-hero-trust .c-trust strong{ font-size:.98rem; }
  .tpl15 .c-hero-trust .c-trust span{ font-size:.76rem; }
  .tpl15 .c-cta-actions{ gap:.45rem; }
  .tpl15 .c-cta-actions .c-btn{ padding:.9rem .5rem; font-size:.98rem; gap:.4rem; }
  .tpl15 .c-level-card{ flex:0 0 84%; max-width:84%; }
  .tpl15 .c-program{ flex:0 0 76%; max-width:76%; }
  .tpl15 .c-value-card{ flex:0 0 78%; max-width:78%; }
  .tpl15 .c-portal-card{ flex:0 0 76%; max-width:76%; }
  .tpl15 .c-show-card{ flex:0 0 86%; max-width:86%; }
  .tpl15 .c-news-card{ flex:0 0 84%; max-width:84%; }
  .tpl15 .c-why-grid{ gap:.6rem; }
  .tpl15 .c-why-card{ padding:1.1rem .7rem; }
}