/*
 * PGEN school website template catalogue
 * --------------------------------------
 * This layer sits after the original Luminous Ascent stylesheet. It turns the
 * shared, accessible CMS markup into a set of genuinely different layout
 * systems while preserving content portability between designs.
 */

/* ---------- Shared customisable design layer ---------- */
.template-site {
  --pointer-x: 0deg;
  --pointer-y: 0deg;
  --signature-scale: 1;
  --section-gutter: clamp(4.5rem, 9vw, 8rem);
  --line: color-mix(in srgb, var(--text-bright) 12%, transparent);
  --soft-shadow: 0 24px 70px color-mix(in srgb, var(--bg-deep) 60%, transparent);
  font-family: var(--font-body);
  background: var(--bg-deep);
  color: var(--text-primary);
}

.template-site .site-main {
  display: flex;
  flex-direction: column;
  position: relative;
  isolation: isolate;
}

.template-site .site-main > .hero { order: 0; }
.template-site .site-main > .about { order: 1; }
.template-site .site-main > .programs { order: 2; }
.template-site .site-main > .gallery-section { order: 3; }
.template-site .site-main > .testimonials { order: 4; }
.template-site .site-main > .events { order: 5; }
.template-site .site-main > .contact { order: 6; }

.template-site,
.template-site .btn,
.template-site button,
.template-site input,
.template-site select,
.template-site textarea {
  font-family: var(--font-body);
}

.template-site .hero-title,
.template-site .section-title,
.template-site .card-title,
.template-site .card-back-title,
.template-site .timeline-title,
.template-site .form-title,
.template-site .footer-heading,
.template-site .stat-number,
.template-site .stat-suffix,
.template-site .floating-card-text strong,
.template-site .logo-text {
  font-family: var(--font-display);
}

.template-site .section-label,
.template-site .hero-badge,
.template-site .stat-label,
.template-site .timeline-tag,
.template-site .date-month {
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: .13em;
}

.template-site .section-container {
  max-width: 1240px;
}

.template-site .about,
.template-site .programs,
.template-site .gallery-section,
.template-site .testimonials,
.template-site .events,
.template-site .contact {
  padding-block: var(--section-gutter);
}

.template-site .about { background: var(--bg-primary); }
.template-site .programs { background: var(--bg-deep); }
.template-site .gallery-section { background: var(--bg-primary); }
.template-site .testimonials { background: var(--bg-deep); }
.template-site .events { background: var(--bg-primary); }
.template-site .contact { background: var(--bg-deep); }
.template-site .footer { background: var(--bg-deep); }

.template-site.webgl .about,
.template-site.webgl .gallery-section,
.template-site.webgl .events {
  background: color-mix(in srgb, var(--bg-primary) 86%, transparent);
}

.template-site.webgl .programs,
.template-site.webgl .testimonials,
.template-site.webgl .contact {
  background: color-mix(in srgb, var(--bg-deep) 80%, transparent);
}

.template-site .section-title,
.template-site .hero-title,
.template-site .card-title,
.template-site .timeline-title,
.template-site .form-title,
.template-site .footer-heading,
.template-site .author-name {
  color: var(--text-bright);
}

.template-site .title-accent {
  color: var(--template-secondary);
  filter: none;
  text-shadow: none;
}

.template-site .text-gradient {
  color: var(--template-accent);
  background: none;
  -webkit-text-fill-color: currentColor;
}

.template-site .hero-badge {
  background: color-mix(in srgb, var(--bg-primary) 88%, transparent);
  border-color: var(--line);
  color: var(--text-bright);
  box-shadow: 0 12px 36px color-mix(in srgb, var(--bg-deep) 22%, transparent);
}

.template-site .badge-dot { background: var(--template-secondary); }

.template-site .btn-primary,
.template-site .hero-ctas .btn-primary,
.template-site .nav-cta,
.template-site .mobile-cta {
  background: var(--template-accent);
  color: var(--on-accent);
  border-color: color-mix(in srgb, var(--template-accent) 70%, #fff);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--template-accent) 30%, transparent);
}

.template-site .btn-primary::before,
.template-site .hero-ctas .btn-primary::before {
  background: color-mix(in srgb, var(--template-secondary) 28%, transparent);
}

.template-site .hero-ctas .btn-ghost {
  background: color-mix(in srgb, var(--bg-primary) 72%, transparent);
  color: var(--text-bright);
  border-color: var(--line);
}

.template-site .section-label { color: var(--template-accent); }
.template-site .section-label::before { background: var(--template-secondary); }

.template-site .navbar {
  background: color-mix(in srgb, var(--bg-deep) 82%, transparent);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
}

.template-site .navbar.scrolled {
  background: color-mix(in srgb, var(--bg-deep) 94%, transparent);
  border-bottom-color: var(--line);
}

.template-site .nav-link,
.template-site .nav-logo,
.template-site .mobile-link,
.template-site .footer-logo { color: var(--text-bright); }

.template-site .nav-link.active,
.template-site .nav-link:hover { color: var(--template-accent); }

.template-site .mobile-menu {
  background: color-mix(in srgb, var(--bg-deep) 96%, transparent);
}

.template-site .hamburger-line { background: var(--text-bright); }

.template-site .program-card .card-front,
.template-site .program-card .card-back,
.template-site .testimonial-card,
.template-site .timeline-card,
.template-site .contact-form,
.template-site .about-floating-card {
  background: var(--bg-elevated);
  border-color: var(--line);
}

.template-site .card-back { border-color: var(--template-accent); }
.template-site .card-icon,
.template-site .detail-icon { color: var(--template-accent); }
.template-site .timeline-line,
.template-site .timeline-dot,
.template-site .dot.active { background: var(--template-accent); }
.template-site .timeline-tag { color: var(--template-accent); }

.template-site .form-group input,
.template-site .form-group textarea,
.template-site .form-group select {
  color: var(--text-bright);
}

.template-site .form-group label { color: var(--text-muted); }
.template-site .form-line { background: var(--line); }

.template-site .about-diagonal,
.template-site .footer-wave { display: none; }

.template-site .noise-overlay { opacity: .018; }
.template-site .world-canvas { opacity: .86; }

.template-site.theme-light .world-canvas {
  opacity: .22;
  filter: saturate(.8) contrast(.9);
}

.template-site.theme-light .hero-overlay {
  background: linear-gradient(90deg, color-mix(in srgb, var(--bg-deep) 92%, transparent) 0%, color-mix(in srgb, var(--bg-deep) 52%, transparent) 52%, transparent 100%);
}

.template-site.theme-light .hero-subtitle { color: var(--text-primary); filter: none; }
.template-site.theme-light .title-line { filter: none; }
.template-site.theme-light .footer-bottom { border-color: var(--line); }
.template-site.theme-light .social-link { color: var(--text-bright); border-color: var(--line); }
.template-site.theme-light .about-floating-card { color: var(--text-primary); }

/* ---------- Ops customisation modifiers ---------- */
.template-site.corners-sharp {
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --radius-xl: 0;
  --radius-2xl: 0;
}

.template-site.corners-soft {
  --radius-sm: .35rem;
  --radius-md: .7rem;
  --radius-lg: 1rem;
  --radius-xl: 1.35rem;
  --radius-2xl: 1.75rem;
}

.template-site.corners-round {
  --radius-sm: .75rem;
  --radius-md: 1.25rem;
  --radius-lg: 1.75rem;
  --radius-xl: 2.4rem;
  --radius-2xl: 3.4rem;
}

.template-site.surfaces-solid .program-card .card-front,
.template-site.surfaces-solid .program-card .card-back,
.template-site.surfaces-solid .testimonial-card,
.template-site.surfaces-solid .timeline-card,
.template-site.surfaces-solid .contact-form {
  background: var(--bg-elevated);
  backdrop-filter: none;
}

.template-site.surfaces-glass .program-card .card-front,
.template-site.surfaces-glass .program-card .card-back,
.template-site.surfaces-glass .testimonial-card,
.template-site.surfaces-glass .timeline-card,
.template-site.surfaces-glass .contact-form {
  background: color-mix(in srgb, var(--bg-elevated) 65%, transparent);
  backdrop-filter: blur(18px) saturate(125%);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
}

.template-site.surfaces-outline .program-card .card-front,
.template-site.surfaces-outline .program-card .card-back,
.template-site.surfaces-outline .testimonial-card,
.template-site.surfaces-outline .timeline-card,
.template-site.surfaces-outline .contact-form {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--template-accent) 52%, var(--line));
  box-shadow: none;
}

.template-site.images-monochrome .hero-image,
.template-site.images-monochrome .about-image,
.template-site.images-monochrome .gallery-item img,
.template-site.images-monochrome .card-image-wrapper img {
  filter: grayscale(1) contrast(1.08);
}

.template-site.images-duotone .hero-image,
.template-site.images-duotone .about-image,
.template-site.images-duotone .gallery-item img,
.template-site.images-duotone .card-image-wrapper img {
  filter: grayscale(1) sepia(.18) saturate(1.35) hue-rotate(155deg) contrast(1.08);
}

.template-site.motion-calm .hero-signature,
.template-site.motion-calm .about-floating-card { animation: none !important; }
.template-site.motion-calm .signature-object { --pointer-x: 0deg !important; --pointer-y: 0deg !important; }
.template-site.motion-calm .program-card:hover .card-inner { transition-duration: .35s; }
.template-site.motion-calm .animate-on-scroll,
.template-site.motion-calm .scroll-line,
.template-site.motion-calm .signature-object,
.template-site.motion-calm .signature-plane,
.template-site.motion-calm .signature-ring { animation: none !important; transition-duration: .01ms !important; }
.template-site.motion-expressive { --signature-scale: 1.08; }

.template-site.hero-align-left .hero-content { text-align: left !important; margin-left: 6vw !important; margin-right: auto !important; }
.template-site.hero-align-left .hero-subtitle { margin-left: 0 !important; margin-right: 0 !important; }
.template-site.hero-align-left .hero-ctas { justify-content: flex-start !important; }
.template-site.hero-align-center .hero-content { text-align: center !important; margin-inline: auto !important; }
.template-site.hero-align-center .hero-subtitle { margin-inline: auto !important; }
.template-site.hero-align-center .hero-ctas { justify-content: center !important; }
.template-site.hero-align-right .hero-content { text-align: right !important; margin-left: auto !important; margin-right: 6vw !important; }
.template-site.hero-align-right .hero-subtitle { margin-left: auto !important; margin-right: 0 !important; }
.template-site.hero-align-right .hero-ctas { justify-content: flex-end !important; }

@media (min-width: 821px) {
  .template-site.hero-align-right:is(.layout-classic, .layout-editorial, .layout-modular, .layout-organic, .layout-studio, .layout-playful, .layout-monolith) .hero-image {
    left: 5vw !important;
    right: auto !important;
  }

  .template-site.hero-align-right:is(.layout-classic, .layout-editorial, .layout-modular, .layout-organic, .layout-studio, .layout-playful, .layout-monolith) .hero-signature {
    left: 1vw;
    right: auto;
  }
}

/* Keyboard focus reveals the same program details as pointer hover. */
.template-site .program-card:focus-within .card-inner { transform: rotateY(180deg); }

/* Touch layouts show both faces as ordinary content instead of relying on hover. */
@media (hover: none) {
  .template-site .program-card { height: auto !important; min-height: 0; }
  .template-site .program-card .card-inner {
    display: grid;
    grid-template-columns: 1fr;
    height: auto;
    min-height: 0;
    transform: none !important;
  }
  .template-site .program-card .card-front,
  .template-site .program-card .card-back {
    position: relative;
    inset: auto;
    min-height: 0;
    transform: none !important;
    backface-visibility: visible;
  }
  .template-site .program-card .card-back {
    border-top: 1px solid var(--line);
    box-shadow: none;
  }
}

/* ---------- Shared reactive 3D signature ---------- */
.hero-signature {
  position: absolute;
  right: clamp(1rem, 7vw, 8rem);
  top: 50%;
  width: clamp(260px, 34vw, 520px);
  aspect-ratio: 1;
  transform: translateY(-50%);
  z-index: 2;
  perspective: 1100px;
  pointer-events: none;
  opacity: .92;
}

.signature-object {
  position: absolute;
  inset: 12%;
  transform-style: preserve-3d;
  transform: rotateX(calc(-10deg + var(--pointer-y))) rotateY(calc(-18deg + var(--pointer-x))) scale(var(--signature-scale));
  transition: transform .18s ease-out;
  animation: signature-float 7s ease-in-out infinite;
}

.signature-plane,
.signature-ring,
.signature-core {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  transform-style: preserve-3d;
}

.signature-plane {
  width: 58%;
  height: 58%;
  border: 1px solid color-mix(in srgb, var(--template-accent) 55%, transparent);
  background: linear-gradient(145deg, color-mix(in srgb, var(--template-accent) 34%, transparent), color-mix(in srgb, var(--template-secondary) 10%, transparent));
  box-shadow: inset 0 0 38px color-mix(in srgb, var(--template-accent) 14%, transparent), 0 22px 60px color-mix(in srgb, var(--bg-deep) 45%, transparent);
  backdrop-filter: blur(6px);
}

.signature-plane-1 { transform: translate(-50%, -50%) translateZ(-72px) rotateZ(-14deg); }
.signature-plane-2 { transform: translate(-50%, -50%) translateZ(-24px) rotateZ(-5deg); }
.signature-plane-3 { transform: translate(-50%, -50%) translateZ(28px) rotateZ(7deg); }
.signature-plane-4 { transform: translate(-50%, -50%) translateZ(78px) rotateZ(17deg); }

.signature-ring {
  width: 82%;
  height: 82%;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--template-secondary) 50%, transparent);
}

.signature-ring-1 { transform: translate(-50%, -50%) rotateX(68deg) translateZ(18px); }
.signature-ring-2 { transform: translate(-50%, -50%) rotateY(72deg) rotateZ(24deg) translateZ(-5px); }

.signature-core {
  width: 34%;
  height: 34%;
  transform: translate(-50%, -50%) translateZ(118px);
  border-radius: 50%;
  background: var(--template-accent);
  color: var(--on-accent);
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 3vw, 2.4rem);
  letter-spacing: -.04em;
  box-shadow: 0 18px 60px color-mix(in srgb, var(--template-accent) 46%, transparent);
}

@keyframes signature-float {
  0%, 100% { translate: 0 -6px; }
  50% { translate: 0 10px; }
}

/* ---------- Layout 1: immersive world ---------- */
.layout-immersive .hero {
  min-height: 100svh;
  justify-content: flex-start;
  background:
    radial-gradient(circle at 74% 45%, color-mix(in srgb, var(--template-accent) 21%, transparent), transparent 28%),
    radial-gradient(circle at 18% 78%, color-mix(in srgb, var(--template-secondary) 12%, transparent), transparent 32%),
    var(--bg-deep);
}

.layout-immersive .hero-content {
  max-width: 720px;
  margin-left: clamp(1rem, 7vw, 8rem);
  margin-right: 48vw;
  text-align: left;
}

.layout-immersive .hero-subtitle { margin-left: 0; }
.layout-immersive .hero-ctas { justify-content: flex-start; }
.layout-immersive .hero-overlay { background: linear-gradient(90deg, color-mix(in srgb, var(--bg-deep) 92%, transparent), color-mix(in srgb, var(--bg-deep) 36%, transparent) 64%, transparent); }
.layout-immersive .hero-image { opacity: .42; }
.layout-immersive .programs-grid { gap: clamp(1rem, 2vw, 2rem); }
.layout-immersive .program-card { transform-style: preserve-3d; }

/* ---------- Layout 2: collegiate classic ---------- */
.layout-classic .hero {
  min-height: 900px;
  justify-content: flex-start;
  background: var(--bg-deep);
}

.layout-classic .hero::before {
  content: '';
  position: absolute;
  inset: 7.5rem 4vw 4rem;
  border: 1px solid var(--line);
  pointer-events: none;
}

.layout-classic .hero-content {
  max-width: 620px;
  margin-left: clamp(2rem, 8vw, 9rem);
  margin-right: 53%;
  text-align: left;
  padding-inline: 0;
}

.layout-classic .hero-title { font-size: clamp(4rem, 7.4vw, 7.8rem); font-weight: 600; line-height: .9; letter-spacing: -.045em; }
.layout-classic .hero-subtitle { margin-left: 0; max-width: 540px; }
.layout-classic .hero-ctas { justify-content: flex-start; }
.layout-classic .hero-image {
  inset: 10rem 5.5vw 5.5rem auto;
  width: 42%;
  height: auto;
  object-fit: cover;
  border-radius: var(--radius-xl);
  mask-image: none;
  -webkit-mask-image: none;
  box-shadow: var(--soft-shadow);
}
.layout-classic .hero-overlay { display: none; }
.layout-classic .hero-signature { right: 3vw; width: 46vw; opacity: .34; }
.layout-classic .signature-plane { background: transparent; border-width: 2px; }
.layout-classic .about-grid { grid-template-columns: 1.2fr .8fr; }
.layout-classic .section-title { font-weight: 600; }
.layout-classic .programs-grid { grid-template-columns: repeat(3, 1fr); }
.layout-classic .card-front,
.layout-classic .card-back { border-top: 4px solid var(--template-secondary); }

/* ---------- Layout 3: atlas / ledger editorial ---------- */
.layout-editorial .site-main > .events { order: 1; }
.layout-editorial .site-main > .about { order: 2; }
.layout-editorial .site-main > .programs { order: 3; }
.layout-editorial .hero {
  min-height: 840px;
  align-items: flex-end;
  justify-content: flex-start;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 72px 72px;
}
.layout-editorial .hero::after {
  content: attr(data-school);
  position: absolute;
  left: 3vw;
  top: 8rem;
  writing-mode: vertical-rl;
  font-size: .7rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.layout-editorial .hero-content {
  max-width: min(900px, 75vw);
  margin: 0 0 6vw 8vw;
  padding: 0;
  text-align: left;
}
.layout-editorial .hero-title { font-size: clamp(4.2rem, 10vw, 10rem); line-height: .82; font-weight: 650; }
.layout-editorial .hero-subtitle { margin-left: 0; max-width: 620px; }
.layout-editorial .hero-ctas { justify-content: flex-start; }
.layout-editorial .hero-image {
  inset: 8rem 5vw auto auto;
  width: 38vw;
  height: 48vh;
  mask-image: none;
  -webkit-mask-image: none;
  object-fit: cover;
  opacity: .7;
  border: 1px solid var(--line);
}
.layout-editorial .hero-overlay { display: none; }
.layout-editorial .hero-signature { right: 1vw; top: 38%; width: 44vw; opacity: .28; }
.layout-editorial .about-grid { grid-template-columns: .8fr 1.2fr; align-items: start; }
.layout-editorial .about-visual { order: -1; }
.layout-editorial .stats-grid { grid-template-columns: 1fr; border-top: 0; border-left: 1px solid var(--line); padding: 0 0 0 1.5rem; }
.layout-editorial .stat-item { display: grid; grid-template-columns: 120px 1fr; text-align: left; align-items: baseline; border-bottom: 1px solid var(--line); padding-block: .85rem; }
.layout-editorial .programs-grid { display: flex; flex-direction: column; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.layout-editorial .program-card { height: auto; min-height: 220px; background: var(--bg-deep); transform: none !important; }
.layout-editorial .card-inner { display: grid; grid-template-columns: minmax(220px, .8fr) 1.2fr; height: auto; min-height: 220px; transform: none !important; }
.layout-editorial .card-front,
.layout-editorial .card-back { position: relative; inset: auto; transform: none; backface-visibility: visible; border: 0; border-radius: 0; }
.layout-editorial .card-front { display: grid; grid-template-columns: 42% 1fr; min-height: 220px; }
.layout-editorial .card-image-wrapper { height: 100%; }
.layout-editorial .card-front-content { justify-content: center; }
.layout-editorial .card-back { box-shadow: none; border-left: 1px solid var(--line); padding: 2rem; }

/* ---------- Layout 4: modular campus ---------- */
.layout-modular .hero {
  min-height: 880px;
  justify-content: flex-start;
  background:
    linear-gradient(90deg, transparent 0 49.8%, var(--line) 49.8% 50%, transparent 50%),
    var(--bg-deep);
}
.layout-modular .hero-content { max-width: 600px; margin-left: clamp(1.25rem, 7vw, 7rem); margin-right: 54%; text-align: left; }
.layout-modular .hero-title { font-size: clamp(4rem, 8vw, 8.5rem); line-height: .86; font-weight: 800; }
.layout-modular .hero-subtitle { margin-left: 0; }
.layout-modular .hero-ctas { justify-content: flex-start; }
.layout-modular .hero-image {
  inset: 8rem 4vw 4rem auto;
  width: 44%;
  height: auto;
  mask-image: none;
  -webkit-mask-image: none;
  object-fit: cover;
  border-radius: var(--radius-lg);
}
.layout-modular .hero-overlay { display: none; }
.layout-modular .hero-signature { right: 2vw; width: 48%; opacity: .62; }
.layout-modular .signature-plane { border-radius: var(--radius-md); }
.layout-modular .section-header { text-align: left; display: grid; grid-template-columns: .55fr 1.2fr; column-gap: 3rem; align-items: end; }
.layout-modular .section-header .section-label { grid-column: 1; }
.layout-modular .section-header .section-title { grid-column: 1; }
.layout-modular .section-header .section-subtitle { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
.layout-modular .programs-grid { grid-template-columns: repeat(12, 1fr); gap: 1rem; }
.layout-modular .program-card { grid-column: span 4; }
.layout-modular .program-card:nth-child(1),
.layout-modular .program-card:nth-child(5) { grid-column: span 5; }
.layout-modular .program-card:nth-child(2),
.layout-modular .program-card:nth-child(6) { grid-column: span 7; }
.layout-modular .gallery-grid { grid-template-columns: repeat(12, 1fr); grid-auto-rows: 150px; }
.layout-modular .gallery-item { grid-column: span 4; }
.layout-modular .gallery-item-wide { grid-column: span 8; }

/* ---------- Layout 5: technical / lab ---------- */
.layout-technical .hero {
  min-height: 920px;
  justify-content: flex-start;
  background:
    radial-gradient(circle at 73% 46%, color-mix(in srgb, var(--template-accent) 18%, transparent), transparent 26%),
    repeating-linear-gradient(0deg, transparent 0 31px, var(--line) 31px 32px),
    repeating-linear-gradient(90deg, transparent 0 31px, var(--line) 31px 32px),
    var(--bg-deep);
}
.layout-technical .hero::before {
  content: 'X  06.14   Y  09.27';
  position: absolute;
  right: 4vw;
  bottom: 2.5rem;
  color: var(--template-secondary);
  letter-spacing: .18em;
  font-size: .68rem;
}
.layout-technical .hero-content { max-width: 690px; margin-left: clamp(1.5rem, 7vw, 8rem); margin-right: 48%; text-align: left; }
.layout-technical .hero-title { font-size: clamp(4rem, 8.8vw, 9rem); line-height: .86; }
.layout-technical .hero-subtitle { margin-left: 0; }
.layout-technical .hero-ctas { justify-content: flex-start; }
.layout-technical .hero-overlay { background: linear-gradient(90deg, var(--bg-deep), transparent 80%); }
.layout-technical .hero-image { opacity: .2; mix-blend-mode: luminosity; }
.layout-technical .signature-plane { clip-path: polygon(50% 0, 100% 100%, 0 100%); background: linear-gradient(145deg, color-mix(in srgb, var(--template-accent) 44%, transparent), transparent); }
.layout-technical .signature-ring { border-style: dashed; }
.layout-technical .program-card .card-front,
.layout-technical .program-card .card-back { border-radius: 2px; }
.layout-technical .programs-grid { gap: 1px; background: var(--line); border: 1px solid var(--line); }
.layout-technical .program-card { background: var(--bg-deep); }
.layout-technical .gallery-item { border-radius: 2px; }

/* ---------- Layout 6: organic learning landscape ---------- */
.layout-organic .hero {
  min-height: 900px;
  justify-content: flex-start;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 85% 10%, color-mix(in srgb, var(--template-secondary) 15%, transparent), transparent 35%),
    var(--bg-deep);
}
.layout-organic .hero::before {
  content: '';
  position: absolute;
  width: 72vw;
  height: 72vw;
  right: -28vw;
  bottom: -45vw;
  border: 1px solid var(--line);
  border-radius: 50%;
  box-shadow: 0 0 0 8vw color-mix(in srgb, var(--template-accent) 5%, transparent), 0 0 0 16vw color-mix(in srgb, var(--template-secondary) 4%, transparent);
}
.layout-organic .hero-content { max-width: 680px; margin-left: clamp(1.25rem, 8vw, 9rem); margin-right: 48%; text-align: left; }
.layout-organic .hero-title { font-size: clamp(4.2rem, 8vw, 8rem); line-height: .92; font-weight: 500; }
.layout-organic .hero-subtitle { margin-left: 0; }
.layout-organic .hero-ctas { justify-content: flex-start; }
.layout-organic .hero-image {
  inset: 9rem 5vw 5rem auto;
  width: 42%;
  height: auto;
  object-fit: cover;
  border-radius: 48% 52% 38% 62% / 58% 35% 65% 42%;
  mask-image: none;
  -webkit-mask-image: none;
}
.layout-organic .hero-overlay { display: none; }
.layout-organic .hero-signature { right: 2vw; width: 48%; opacity: .35; }
.layout-organic .signature-plane { border-radius: 55% 45% 62% 38% / 48% 62% 38% 52%; }
.layout-organic .about-image-wrapper { border-radius: 44% 56% 48% 52% / 54% 46% 54% 46%; }
.layout-organic .programs-grid { gap: 1.2rem; }
.layout-organic .program-card:nth-child(even) { translate: 0 2.5rem; }
.layout-organic .card-front,
.layout-organic .card-back { border-radius: 2.5rem 2.5rem 7rem 2.5rem; }
.layout-organic .gallery-item { border-radius: 2.5rem; }

/* ---------- Layout 7: creative studio ---------- */
.layout-studio .site-main > .gallery-section { order: 1; }
.layout-studio .site-main > .about { order: 2; }
.layout-studio .site-main > .programs { order: 3; }
.layout-studio .hero {
  min-height: 880px;
  justify-content: flex-start;
  background:
    linear-gradient(115deg, color-mix(in srgb, var(--template-accent) 14%, transparent) 0 28%, transparent 28% 100%),
    var(--bg-deep);
}
.layout-studio .hero-content { max-width: 860px; margin-left: clamp(1.5rem, 6vw, 7rem); margin-right: 36%; text-align: left; }
.layout-studio .hero-title { font-size: clamp(5rem, 11vw, 11rem); line-height: .78; font-weight: 600; }
.layout-studio .hero-subtitle { margin-left: 0; max-width: 520px; }
.layout-studio .hero-ctas { justify-content: flex-start; }
.layout-studio .hero-image {
  inset: 10rem 4vw 3rem auto;
  width: 38%;
  height: auto;
  object-fit: cover;
  mask-image: none;
  -webkit-mask-image: none;
  transform: rotate(2.5deg);
  border: 12px solid color-mix(in srgb, var(--bg-primary) 86%, #fff);
  box-shadow: var(--soft-shadow);
}
.layout-studio .hero-overlay { display: none; }
.layout-studio .hero-signature { right: 0; width: 46%; opacity: .44; }
.layout-studio .signature-plane { border-radius: 2px; }
.layout-studio .signature-plane-1 { transform: translate(-50%, -50%) translateZ(-90px) rotateZ(-24deg); }
.layout-studio .signature-plane-4 { transform: translate(-50%, -50%) translateZ(95px) rotateZ(25deg); }
.layout-studio .gallery-grid { grid-template-columns: repeat(12, 1fr); grid-auto-rows: 120px; gap: 1.25rem; }
.layout-studio .gallery-item { grid-column: span 4; grid-row: span 2; }
.layout-studio .gallery-item:nth-child(3n + 1) { grid-column: span 7; grid-row: span 3; }
.layout-studio .gallery-item:nth-child(3n + 2) { grid-column: span 5; }
.layout-studio .program-card:nth-child(odd) { rotate: -1deg; }
.layout-studio .program-card:nth-child(even) { rotate: 1deg; }

/* ---------- Layout 8: athletic motion ---------- */
.layout-motion .hero {
  min-height: 900px;
  justify-content: flex-start;
  background: var(--bg-deep);
}
.layout-motion .hero::before,
.layout-motion .hero::after {
  content: '';
  position: absolute;
  left: -10vw;
  width: 120vw;
  height: 3px;
  background: var(--template-secondary);
  transform: rotate(-9deg);
  opacity: .6;
}
.layout-motion .hero::before { top: 31%; }
.layout-motion .hero::after { top: 37%; left: -6vw; }
.layout-motion .hero-content { max-width: 850px; margin-left: clamp(1.25rem, 6vw, 7rem); margin-right: 38%; text-align: left; transform: skewY(-2deg); }
.layout-motion .hero-title { font-size: clamp(5rem, 11vw, 11rem); line-height: .75; text-transform: uppercase; letter-spacing: -.07em; }
.layout-motion .hero-subtitle { margin-left: 0; max-width: 560px; }
.layout-motion .hero-ctas { justify-content: flex-start; }
.layout-motion .hero-image { clip-path: polygon(55% 0, 100% 0, 100% 100%, 38% 100%); mask-image: none; -webkit-mask-image: none; opacity: .54; }
.layout-motion .hero-overlay { background: linear-gradient(90deg, var(--bg-deep) 0 40%, transparent 75%); }
.layout-motion .hero-signature { right: -3vw; width: 50%; }
.layout-motion .signature-plane { clip-path: polygon(18% 0, 100% 0, 82% 100%, 0 100%); }
.layout-motion .programs-grid { transform: skewY(-1.5deg); }
.layout-motion .program-card { height: 390px; }
.layout-motion .card-front,
.layout-motion .card-back { border-radius: 0; }
.layout-motion .section-title { text-transform: uppercase; letter-spacing: -.055em; }

/* ---------- Layout 9: civic architecture ---------- */
.layout-civic .hero {
  min-height: 900px;
  align-items: flex-end;
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(12.5% - 1px), var(--line) calc(12.5% - 1px) 12.5%),
    var(--bg-deep);
}
.layout-civic .hero-content { max-width: 1050px; margin: 0 auto 7vw; text-align: center; }
.layout-civic .hero-title { font-size: clamp(4.5rem, 9vw, 9rem); line-height: .86; font-weight: 600; }
.layout-civic .hero-subtitle { max-width: 700px; }
.layout-civic .hero-image { inset: 7rem 12vw 42% 12vw; width: 76vw; height: auto; mask-image: linear-gradient(to bottom, #000 70%, transparent); -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent); opacity: .5; }
.layout-civic .hero-overlay { background: linear-gradient(to bottom, transparent 30%, var(--bg-deep) 82%); }
.layout-civic .hero-signature { left: 50%; right: auto; top: 35%; translate: -50% 0; width: 45vw; opacity: .34; }
.layout-civic .signature-plane { background: transparent; border-width: 2px; border-radius: 50% 50% 0 0; }
.layout-civic .about-grid { border: 1px solid var(--line); padding: clamp(1.5rem, 5vw, 5rem); }
.layout-civic .programs-grid { gap: 0; border: 1px solid var(--line); }
.layout-civic .program-card .card-front,
.layout-civic .program-card .card-back { border-radius: 0; border-color: var(--line); }

/* ---------- Layout 10: panoramic horizon ---------- */
.layout-cinematic .hero {
  min-height: 100svh;
  align-items: flex-end;
  justify-content: flex-start;
  background: var(--bg-deep);
}
.layout-cinematic .hero-content { max-width: 1100px; margin: 0 0 5vw 5vw; padding: 0; text-align: left; }
.layout-cinematic .hero-title { font-size: clamp(4.5rem, 10vw, 10rem); line-height: .8; max-width: 1000px; }
.layout-cinematic .hero-subtitle { margin-left: 0; max-width: 650px; }
.layout-cinematic .hero-ctas { justify-content: flex-start; }
.layout-cinematic .hero-image { mask-image: linear-gradient(to bottom, #000 0 62%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, #000 0 62%, transparent 100%); }
.layout-cinematic .hero-overlay { background: linear-gradient(to top, var(--bg-deep) 4%, color-mix(in srgb, var(--bg-deep) 18%, transparent) 65%, transparent); }
.layout-cinematic .hero-signature { right: 3vw; top: 36%; width: 40vw; opacity: .38; }
.layout-cinematic .signature-plane { width: 78%; height: 18%; border-radius: var(--radius-full); }
.layout-cinematic .signature-ring { width: 95%; height: 28%; }
.layout-cinematic .about-grid { grid-template-columns: 1.25fr .75fr; }
.layout-cinematic .programs-grid { grid-template-columns: repeat(6, 1fr); overflow-x: auto; padding-bottom: 1rem; scroll-snap-type: x proximity; }
.layout-cinematic .program-card { min-width: 300px; scroll-snap-align: start; }

/* ---------- Layout 11: early-learning pop-up ---------- */
.layout-playful .hero {
  min-height: 880px;
  justify-content: flex-start;
  background:
    radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--template-secondary) 20%, transparent) 0 9%, transparent 9.2%),
    radial-gradient(circle at 72% 74%, color-mix(in srgb, var(--template-accent) 15%, transparent) 0 14%, transparent 14.2%),
    var(--bg-deep);
}
.layout-playful .hero-content { max-width: 680px; margin-left: clamp(1.25rem, 7vw, 8rem); margin-right: 48%; text-align: left; }
.layout-playful .hero-title { font-size: clamp(4.2rem, 8vw, 8rem); line-height: .9; font-weight: 650; }
.layout-playful .hero-subtitle { margin-left: 0; }
.layout-playful .hero-ctas { justify-content: flex-start; }
.layout-playful .hero-image { inset: 9rem 5vw 5rem auto; width: 42%; height: auto; mask-image: none; -webkit-mask-image: none; border-radius: 48% 52% 44% 56% / 58% 42% 58% 42%; }
.layout-playful .hero-overlay { display: none; }
.layout-playful .hero-signature { right: 2vw; width: 47%; opacity: .42; }
.layout-playful .signature-plane { border-radius: 35% 65% 40% 60%; }
.layout-playful .signature-plane-1 { transform: translate(-60%, -42%) translateZ(-70px) rotateZ(-20deg); }
.layout-playful .signature-plane-4 { transform: translate(-38%, -58%) translateZ(80px) rotateZ(18deg); }
.layout-playful .program-card:nth-child(3n + 1) { translate: 0 -1rem; }
.layout-playful .card-front,
.layout-playful .card-back { border-radius: 2rem; }
.layout-playful .gallery-grid { grid-auto-rows: 190px; }

/* ---------- Layout 12: sculptural monolith ---------- */
.layout-monolith .navbar,
body.layout-monolith.loaded .navbar {
  width: calc(100% - 3rem);
  max-width: none;
  left: 1.5rem;
  top: 1.5rem;
  transform: none;
  border: 1px solid var(--line);
}
.layout-monolith .hero {
  min-height: 940px;
  justify-content: flex-start;
  background:
    linear-gradient(90deg, var(--template-accent) 0 1.1rem, transparent 1.1rem),
    var(--bg-deep);
}
.layout-monolith .hero-content { max-width: 880px; margin-left: clamp(2.5rem, 10vw, 11rem); margin-right: 34%; text-align: left; }
.layout-monolith .hero-title { font-size: clamp(5rem, 11vw, 11.5rem); line-height: .73; font-weight: 800; letter-spacing: -.075em; }
.layout-monolith .hero-subtitle { margin-left: 0; max-width: 560px; }
.layout-monolith .hero-ctas { justify-content: flex-start; }
.layout-monolith .hero-image { inset: 8rem 3vw 3rem auto; width: 34%; height: auto; object-fit: cover; mask-image: none; -webkit-mask-image: none; filter: grayscale(1) contrast(1.08); }
.layout-monolith .hero-overlay { display: none; }
.layout-monolith .hero-signature { right: 0; width: 40%; opacity: .55; }
.layout-monolith .signature-plane { width: 25%; height: 78%; border-radius: 0; }
.layout-monolith .signature-ring { display: none; }
.layout-monolith .signature-core { border-radius: 0; }
.layout-monolith .about-grid { grid-template-columns: .7fr 1.3fr; }
.layout-monolith .about-visual { order: -1; }
.layout-monolith .programs-grid { grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); }
.layout-monolith .program-card { height: 340px; }
.layout-monolith .card-front,
.layout-monolith .card-back,
.layout-monolith .gallery-item,
.layout-monolith .contact-form { border-radius: 0; }

/* ---------- Layout: aurora (abstract void) ---------- */
.layout-aurora .hero {
  min-height: 100svh;
  justify-content: center;
}
.layout-aurora .hero-content { max-width: 760px; margin: 0 auto; text-align: center; }
.layout-aurora .hero-title {
  font-size: clamp(4rem, 9vw, 8.5rem); font-weight: 600; letter-spacing: -.03em; line-height: .95;
  text-shadow: 0 6px 32px color-mix(in srgb, var(--bg-deep) 92%, black), 0 1px 4px color-mix(in srgb, var(--bg-deep) 95%, black);
}
.layout-aurora .hero-subtitle {
  margin: 0 auto; max-width: 560px;
  text-shadow: 0 3px 18px color-mix(in srgb, var(--bg-deep) 90%, black);
}
.layout-aurora .hero-ctas { justify-content: center; }
.layout-aurora .hero-image { opacity: .18; }
.layout-aurora .hero-overlay { background: radial-gradient(48% 62% at 50% 44%, color-mix(in srgb, var(--bg-deep) 82%, transparent) 0%, transparent 68%); }
.layout-aurora .hero-signature { left: 50%; right: auto; top: 68%; translate: -50% 0; width: 34vw; opacity: .3; }
.layout-aurora .signature-plane { border-radius: 30%; background: transparent; border-width: 1px; }
.layout-aurora .programs-grid { gap: clamp(1rem, 2vw, 2rem); }
.layout-aurora .program-card .card-front,
.layout-aurora .program-card .card-back { border-radius: var(--radius-lg); backdrop-filter: blur(6px); }
.layout-aurora .gallery-item { border-radius: var(--radius-lg); }

/* ---------- Layout: atrium (architectural corridor) ---------- */
.layout-atrium .hero {
  min-height: 100svh;
  justify-content: flex-end;
  padding-bottom: 10vh;
}
.layout-atrium .hero-content { max-width: 620px; margin: 0 auto; text-align: center; }
.layout-atrium .hero-title { font-size: clamp(3.6rem, 7vw, 7rem); font-weight: 600; line-height: .95; }
.layout-atrium .hero-subtitle { max-width: 520px; margin: 0 auto; }
.layout-atrium .hero-image { inset: 6rem 14vw 30% 14vw; width: 72vw; height: auto; opacity: .4; mask-image: linear-gradient(to bottom, #000 65%, transparent); -webkit-mask-image: linear-gradient(to bottom, #000 65%, transparent); }
.layout-atrium .hero-overlay { background: linear-gradient(to bottom, transparent 20%, var(--bg-deep) 88%); }
.layout-atrium .hero-signature { left: 50%; right: auto; top: 30%; translate: -50% 0; width: 40vw; opacity: .3; }
.layout-atrium .signature-plane { border-radius: 0; background: transparent; border-width: 2px; }
.layout-atrium .about-grid { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding-block: clamp(1.5rem, 4vw, 3rem); }
.layout-atrium .programs-grid { gap: 0; border-left: 1px solid var(--line); }
.layout-atrium .program-card .card-front,
.layout-atrium .program-card .card-back { border-radius: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.layout-atrium .gallery-item { border-radius: 0; }

/* ---------- Layout: metrics (data dashboard) ---------- */
.layout-metrics .hero {
  min-height: 100svh;
  justify-content: center;
}
.layout-metrics .hero-content { max-width: 660px; margin-left: clamp(1.5rem, 7vw, 8rem); margin-right: 46%; text-align: left; }
.layout-metrics .hero-title { font-size: clamp(3.6rem, 7.6vw, 7.6rem); font-weight: 650; line-height: .9; letter-spacing: -.02em; }
.layout-metrics .hero-subtitle { margin-left: 0; max-width: 520px; }
.layout-metrics .hero-ctas { justify-content: flex-start; }
.layout-metrics .hero-image { opacity: .16; }
.layout-metrics .hero-overlay { background: linear-gradient(90deg, var(--bg-deep), transparent 75%); }
.layout-metrics .hero-signature { right: 4vw; width: 42vw; opacity: .32; }
.layout-metrics .signature-plane { border-radius: 6px; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 10px 10px; }
.layout-metrics .stats-grid { border-top: 2px solid var(--template-accent); }
.layout-metrics .programs-grid { gap: 1px; background: var(--line); border: 1px solid var(--line); }
.layout-metrics .program-card { background: var(--bg-deep); }

/* ---------- Individual template signatures ---------- */
.tpl-luminous-ascent .signature-plane { border-radius: 22%; }
.tpl-luminous-ascent .signature-core { box-shadow: 0 0 0 12px color-mix(in srgb, var(--template-accent) 12%, transparent), 0 20px 70px var(--glow-azure); }

.tpl-constellation .signature-plane { width: 16%; height: 16%; border-radius: 50%; background: var(--template-secondary); }
.tpl-constellation .signature-plane-1 { transform: translate(-220%, -160%) translateZ(-50px); }
.tpl-constellation .signature-plane-2 { transform: translate(110%, -210%) translateZ(10px); }
.tpl-constellation .signature-plane-3 { transform: translate(160%, 90%) translateZ(60px); }
.tpl-constellation .signature-plane-4 { transform: translate(-260%, 160%) translateZ(85px); }
.tpl-constellation .signature-ring-1 { width: 110%; height: 42%; transform: translate(-50%, -50%) rotateX(70deg) rotateZ(12deg); }
.tpl-constellation .programs-grid { padding-bottom: 3rem; }
.tpl-constellation .program-card:nth-child(even) { translate: 0 3rem; }
.tpl-constellation .gallery-item { border-radius: 50% 50% var(--radius-lg) var(--radius-lg); }

.tpl-heritage-hall .signature-plane { background: transparent; border-radius: 50%; }
.tpl-heritage-hall .signature-plane-1 { box-shadow: inset 0 0 0 8px color-mix(in srgb, var(--template-secondary) 10%, transparent); }
.tpl-heritage-hall .signature-core { border: 6px double color-mix(in srgb, var(--template-secondary) 70%, #fff); }
.tpl-heritage-hall .program-card .card-front,
.tpl-heritage-hall .program-card .card-back { outline: 1px solid var(--line); outline-offset: -10px; }

.tpl-summit-preparatory .signature-plane { clip-path: polygon(50% 0, 100% 100%, 0 100%); border: 0; }
.tpl-summit-preparatory .signature-plane-1 { width: 80%; height: 55%; }
.tpl-summit-preparatory .signature-core { clip-path: polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%); border-radius: 0; }
.tpl-summit-preparatory .about-image,
.tpl-summit-preparatory .program-card .card-front,
.tpl-summit-preparatory .program-card .card-back { clip-path: polygon(0 0, calc(100% - 2.2rem) 0, 100% 2.2rem, 100% 100%, 2.2rem 100%, 0 calc(100% - 2.2rem)); }

.tpl-atlas-editorial .signature-plane { display: none; }
.tpl-atlas-editorial .signature-ring { border-width: 2px; }
.tpl-atlas-editorial .signature-ring-1::before,
.tpl-atlas-editorial .signature-ring-1::after { content: ''; position: absolute; left: 50%; top: -8%; width: 1px; height: 116%; background: var(--template-secondary); }
.tpl-atlas-editorial .signature-ring-1::after { rotate: 90deg; }
.tpl-atlas-editorial .signature-core { clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); border-radius: 0; }

.tpl-scholars-ledger .signature-plane { border-radius: 2px; background: var(--bg-primary); box-shadow: 8px 8px 0 color-mix(in srgb, var(--template-accent) 15%, transparent); }
.tpl-scholars-ledger .signature-ring { display: none; }
.tpl-scholars-ledger .signature-core { border-radius: 2px; }

.tpl-kinetic-campus .signature-plane { border-radius: .4rem; }
.tpl-kinetic-campus .signature-plane-1 { width: 82%; height: 20%; transform: translate(-55%, -210%) translateZ(-60px) rotateZ(-4deg); }
.tpl-kinetic-campus .signature-plane-2 { width: 35%; height: 78%; transform: translate(-170%, -45%) translateZ(-10px) rotateZ(3deg); }
.tpl-kinetic-campus .signature-plane-3 { width: 62%; height: 30%; transform: translate(-5%, 90%) translateZ(45px) rotateZ(-7deg); }
.tpl-kinetic-campus .program-card .card-front,
.tpl-kinetic-campus .program-card .card-back { border-left: .65rem solid var(--template-secondary); }

.tpl-mosaic-community .signature-plane { width: 42%; height: 42%; border-radius: .7rem; }
.tpl-mosaic-community .signature-plane-1 { transform: translate(-112%, -108%) translateZ(-45px); }
.tpl-mosaic-community .signature-plane-2 { transform: translate(12%, -108%) translateZ(-5px); background: color-mix(in srgb, var(--template-secondary) 40%, transparent); }
.tpl-mosaic-community .signature-plane-3 { transform: translate(-112%, 12%) translateZ(35px); background: color-mix(in srgb, var(--template-accent) 55%, transparent); }
.tpl-mosaic-community .signature-plane-4 { transform: translate(12%, 12%) translateZ(75px); }
.tpl-mosaic-community .signature-ring { display: none; }
.tpl-mosaic-community .programs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tpl-mosaic-community .program-card { grid-column: auto !important; }
.tpl-mosaic-community .program-card:nth-child(3n + 1) { translate: 0 1.5rem; }
.tpl-mosaic-community .gallery-item:nth-child(3n + 1) { border-radius: 45% 12% 28% 10%; }

.tpl-prism-laboratory .signature-plane { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.tpl-prism-laboratory .signature-core { clip-path: polygon(50% 0, 100% 100%, 0 100%); border-radius: 0; padding-top: 8%; }
.tpl-prism-laboratory .program-card:nth-child(odd) .card-front,
.tpl-prism-laboratory .program-card:nth-child(odd) .card-back { clip-path: polygon(0 0, 100% 0, 100% 86%, 86% 100%, 0 100%); }

.tpl-blueprint-stem .signature-plane { background: transparent; border-style: dashed; }
.tpl-blueprint-stem .signature-plane-1 { width: 76%; height: 24%; }
.tpl-blueprint-stem .signature-plane-2 { width: 34%; height: 72%; }
.tpl-blueprint-stem .signature-plane-3 { width: 58%; height: 44%; }
.tpl-blueprint-stem .programs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tpl-blueprint-stem .program-card .card-front,
.tpl-blueprint-stem .program-card .card-back { background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 18px 18px; }

.tpl-verdant-path .signature-plane { border-radius: 100% 0 100% 0; }
.tpl-verdant-path .signature-plane-1 { transform: translate(-90%, -60%) translateZ(-55px) rotateZ(-28deg); }
.tpl-verdant-path .signature-plane-4 { transform: translate(-10%, -40%) translateZ(70px) rotateZ(38deg); }
.tpl-verdant-path .signature-core { border-radius: 100% 0 100% 0; }
.tpl-verdant-path .program-card:nth-child(3n + 1) .card-front,
.tpl-verdant-path .program-card:nth-child(3n + 1) .card-back { border-radius: 4rem 1rem 4rem 1rem; }

.tpl-grove-learning .signature-plane { border-radius: 50%; }
.tpl-grove-learning .signature-plane-1 { width: 90%; height: 28%; transform: translate(-50%, 80%) translateZ(-60px); }
.tpl-grove-learning .signature-plane-2 { width: 72%; height: 34%; transform: translate(-50%, 20%) translateZ(-10px); }
.tpl-grove-learning .signature-plane-3 { width: 56%; height: 40%; transform: translate(-50%, -35%) translateZ(40px); }
.tpl-grove-learning .programs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tpl-grove-learning .program-card:nth-child(even) { translate: 0; }
.tpl-grove-learning .program-card .card-front,
.tpl-grove-learning .program-card .card-back { border-radius: 999px 999px var(--radius-xl) var(--radius-xl); }

.tpl-atelier-school .signature-plane { background: color-mix(in srgb, var(--bg-primary) 78%, var(--template-accent)); }
.tpl-atelier-school .signature-ring { display: none; }
.tpl-atelier-school .signature-core { border-radius: 2px; }

.tpl-cadence-conservatory .signature-plane { height: 15%; width: 92%; border-radius: 999px; }
.tpl-cadence-conservatory .signature-plane-1 { transform: translate(-50%, -210%) translateZ(-60px) rotateZ(-16deg); }
.tpl-cadence-conservatory .signature-plane-2 { transform: translate(-50%, -80%) translateZ(-10px) rotateZ(9deg); }
.tpl-cadence-conservatory .signature-plane-3 { transform: translate(-50%, 60%) translateZ(35px) rotateZ(-7deg); }
.tpl-cadence-conservatory .signature-plane-4 { transform: translate(-50%, 190%) translateZ(80px) rotateZ(14deg); }

.tpl-arena-academy .signature-plane { clip-path: polygon(18% 0, 100% 0, 82% 100%, 0 100%); }
.tpl-arena-academy .signature-ring { border-width: 3px; }

.tpl-civic-courtyard .signature-plane { border-radius: 50% 50% 0 0; background: transparent; }
.tpl-civic-courtyard .signature-core { border-radius: 50% 50% 0 0; }

.tpl-horizon-international .signature-plane { height: 12%; width: 92%; }
.tpl-horizon-international .signature-core { width: 18%; height: 18%; }

.tpl-beacon-school .signature-plane { display: none; }
.tpl-beacon-school .signature-ring { width: 95%; height: 95%; border-style: dashed; }
.tpl-beacon-school .signature-object::before,
.tpl-beacon-school .signature-object::after { content: ''; position: absolute; left: 50%; top: 50%; width: 95%; height: 2px; background: linear-gradient(90deg, transparent, var(--template-secondary), transparent); transform: translate(-50%, -50%) rotate(22deg); }
.tpl-beacon-school .signature-object::after { transform: translate(-50%, -50%) rotate(-22deg); }

.tpl-storybook-garden .signature-plane { border-radius: 45% 55% 8% 8%; }
.tpl-storybook-garden .signature-core { border-radius: 48% 52% 10% 10%; }

.tpl-monolith-modern .signature-plane-1 { transform: translate(-170%, -50%) translateZ(-70px); }
.tpl-monolith-modern .signature-plane-2 { transform: translate(-70%, -50%) translateZ(-15px); }
.tpl-monolith-modern .signature-plane-3 { transform: translate(30%, -50%) translateZ(35px); }
.tpl-monolith-modern .signature-plane-4 { transform: translate(130%, -50%) translateZ(85px); }

.tpl-facet-aurora .signature-plane { background: transparent; border-radius: 50%; box-shadow: inset 0 0 24px color-mix(in srgb, var(--template-accent) 20%, transparent); }
.tpl-facet-aurora .signature-ring { border-style: dotted; }

.tpl-atrium-walk .signature-plane { border-radius: 50% 50% 0 0; background: transparent; }
.tpl-atrium-walk .signature-core { border-radius: 50% 50% 0 0; }

.tpl-ascent-metrics .signature-plane { border-radius: 4px; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 8px 8px; }
.tpl-ascent-metrics .signature-ring { display: none; }

/* ---------- Cross-template composition controls (PGEN Ops) ---------- */
body.template-site.composition-story-first .site-main > .hero { order: 0; }
body.template-site.composition-story-first .site-main > .about { order: 1; }
body.template-site.composition-story-first .site-main > .testimonials { order: 2; }
body.template-site.composition-story-first .site-main > .gallery-section { order: 3; }
body.template-site.composition-story-first .site-main > .programs { order: 4; }
body.template-site.composition-story-first .site-main > .events { order: 5; }
body.template-site.composition-story-first .site-main > .contact { order: 6; }

body.template-site.composition-program-first .site-main > .hero { order: 0; }
body.template-site.composition-program-first .site-main > .programs { order: 1; }
body.template-site.composition-program-first .site-main > .about { order: 2; }
body.template-site.composition-program-first .site-main > .gallery-section { order: 3; }
body.template-site.composition-program-first .site-main > .testimonials { order: 4; }
body.template-site.composition-program-first .site-main > .events { order: 5; }
body.template-site.composition-program-first .site-main > .contact { order: 6; }

body.template-site.composition-news-first .site-main > .hero { order: 0; }
body.template-site.composition-news-first .site-main > .events { order: 1; }
body.template-site.composition-news-first .site-main > .about { order: 2; }
body.template-site.composition-news-first .site-main > .programs { order: 3; }
body.template-site.composition-news-first .site-main > .gallery-section { order: 4; }
body.template-site.composition-news-first .site-main > .testimonials { order: 5; }
body.template-site.composition-news-first .site-main > .contact { order: 6; }

/* Composition is applied by script as real DOM order; never create a visual-only order. */
.template-site .site-main > section { order: initial !important; }

.template-site.gallery-grid .gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 260px;
  gap: 1rem;
}
.template-site.gallery-grid .gallery-item,
.template-site.gallery-grid .gallery-item:nth-child(n),
.template-site.gallery-grid .gallery-item-wide {
  grid-column: span 1;
  grid-row: span 1;
}

.template-site.gallery-masonry .gallery-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: 115px;
  gap: 1rem;
}
.template-site.gallery-masonry .gallery-item,
.template-site.gallery-masonry .gallery-item:nth-child(n) { grid-column: span 4; grid-row: span 2; }
.template-site.gallery-masonry .gallery-item:nth-child(5n + 1) { grid-column: span 7; grid-row: span 3; }
.template-site.gallery-masonry .gallery-item:nth-child(5n + 2) { grid-column: span 5; grid-row: span 3; }

.template-site.gallery-filmstrip .gallery-grid {
  display: flex;
  gap: clamp(1rem, 2vw, 2rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0 max(1rem, calc((100vw - 1240px) / 2)) 1.5rem;
  margin-inline: min(-2rem, calc((1240px - 100vw) / 2));
}
.template-site.gallery-filmstrip .gallery-item,
.template-site.gallery-filmstrip .gallery-item:nth-child(n),
.template-site.gallery-filmstrip .gallery-item-wide {
  flex: 0 0 min(760px, 68vw);
  height: clamp(320px, 48vw, 560px);
  scroll-snap-align: center;
}

.template-site.density-compact { --section-gutter: clamp(3rem, 6vw, 5rem); }
.template-site.density-compact .section-header { margin-bottom: 2rem; }
.template-site.density-compact .program-card { height: 350px; }
.template-site.density-comfortable { --section-gutter: clamp(5rem, 9vw, 8rem); }
.template-site.density-spacious { --section-gutter: clamp(7rem, 12vw, 11rem); }
.template-site.density-spacious .section-header { margin-bottom: 5rem; }
.template-site.density-spacious .programs-grid { gap: clamp(2rem, 4vw, 4rem); }

/* ---------- Responsive safeguards ---------- */
@media (max-width: 1100px) {
  .hero-signature { opacity: .32; right: -7vw; width: 54vw; }
  .layout-classic .hero-content,
  .layout-modular .hero-content,
  .layout-organic .hero-content,
  .layout-playful .hero-content { margin-right: 43%; }
  .layout-editorial .card-inner { grid-template-columns: 1fr; }
  .layout-editorial .card-back { border-left: 0; border-top: 1px solid var(--line); }
  .layout-modular .program-card { grid-column: span 6; }
}

@media (max-width: 820px) {
  .template-site { --section-gutter: 4.5rem; }
  .template-site.density-compact { --section-gutter: 3.5rem; }
  .template-site.density-comfortable { --section-gutter: 4.5rem; }
  .template-site.density-spacious { --section-gutter: 5.5rem; }
  .hero-signature { width: 88vw; right: -38vw; top: 38%; opacity: .2; }
  .layout-immersive .hero-content,
  .layout-classic .hero-content,
  .layout-editorial .hero-content,
  .layout-modular .hero-content,
  .layout-technical .hero-content,
  .layout-organic .hero-content,
  .layout-studio .hero-content,
  .layout-motion .hero-content,
  .layout-cinematic .hero-content,
  .layout-playful .hero-content,
  .layout-monolith .hero-content {
    max-width: none;
    margin: auto 1.25rem 5rem;
    padding: 1rem;
    text-align: left;
    transform: none;
  }
  .template-site .hero-title { font-size: clamp(3.25rem, 16vw, 6.5rem); line-height: .88; }
  .template-site .hero-subtitle { margin-left: 0; }
  .template-site .hero-ctas { justify-content: flex-start; }
  .layout-classic .hero,
  .layout-editorial .hero,
  .layout-modular .hero,
  .layout-technical .hero,
  .layout-organic .hero,
  .layout-studio .hero,
  .layout-motion .hero,
  .layout-civic .hero,
  .layout-playful .hero,
  .layout-monolith .hero { min-height: 820px; align-items: flex-end; }
  .layout-classic .hero-image,
  .layout-editorial .hero-image,
  .layout-modular .hero-image,
  .layout-organic .hero-image,
  .layout-studio .hero-image,
  .layout-playful .hero-image,
  .layout-monolith .hero-image {
    inset: 5rem 0 auto;
    width: 100%;
    height: 54%;
    border: 0;
    border-radius: 0;
    opacity: .48;
    transform: none;
    mask-image: linear-gradient(to bottom, #000 45%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent);
  }
  .layout-classic .hero-overlay,
  .layout-modular .hero-overlay,
  .layout-organic .hero-overlay,
  .layout-studio .hero-overlay,
  .layout-playful .hero-overlay,
  .layout-monolith .hero-overlay { display: block; background: linear-gradient(to bottom, transparent 20%, var(--bg-deep) 68%); }
  .layout-civic .hero-content { margin-inline: 1.25rem; text-align: left; }
  .layout-civic .hero-subtitle { margin-left: 0; }
  .layout-civic .hero-ctas { justify-content: flex-start; }
  .layout-modular .section-header { display: block; }
  .layout-modular .section-header .section-subtitle { margin-inline: 0; }
  .template-site .about-grid,
  .template-site .programs-grid { grid-template-columns: minmax(0, 1fr); }
  .layout-modular .program-card { grid-column: 1 / -1 !important; }
  .layout-studio .gallery-item,
  .layout-studio .gallery-item:nth-child(n) { grid-column: span 12; grid-row: span 2; }
  .layout-editorial .about-grid,
  .layout-monolith .about-grid { grid-template-columns: 1fr; }
  .layout-editorial .about-visual,
  .layout-monolith .about-visual { order: 0; }
  .layout-editorial .card-front { grid-template-columns: 1fr; }
  .layout-editorial .card-image-wrapper { height: 220px; }
  .layout-cinematic .programs-grid { grid-template-columns: repeat(6, minmax(280px, 1fr)); }
  .layout-organic .program-card:nth-child(even) { translate: 0; }
  .tpl-constellation .program-card:nth-child(even),
  .tpl-mosaic-community .program-card:nth-child(3n + 1) { translate: 0; }
  .template-site.gallery-template.layout-modular .gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 220px;
  }
  .template-site.gallery-template.layout-modular .gallery-item,
  .template-site.gallery-template.layout-modular .gallery-item:nth-child(n),
  .template-site.gallery-template.layout-modular .gallery-item-wide {
    grid-column: span 1;
    grid-row: span 1;
  }
  .template-site.gallery-grid .gallery-grid { grid-template-columns: 1fr 1fr; }
  .template-site.gallery-masonry .gallery-item,
  .template-site.gallery-masonry .gallery-item:nth-child(n) { grid-column: span 6; }
  .template-site.gallery-filmstrip .gallery-item,
  .template-site.gallery-filmstrip .gallery-item:nth-child(n) { flex-basis: 82vw; }
}

@media (max-width: 520px) {
  .template-site .hero-content { margin-inline: .25rem; }
  .template-site .hero-title { font-size: clamp(3rem, 17vw, 5rem); }
  .template-site .hero-badge { margin-bottom: 1.25rem; }
  .template-site .hero-ctas { align-items: stretch; }
  .template-site .hero-ctas .btn { width: 100%; justify-content: center; }
  .layout-editorial .stat-item { grid-template-columns: 92px 1fr; }
  .layout-monolith .programs-grid { grid-template-columns: 1fr; }
  .template-site.gallery-template.layout-modular .gallery-grid { grid-template-columns: 1fr; }
  .template-site.gallery-grid .gallery-grid { grid-template-columns: 1fr; }
  .template-site.gallery-masonry .gallery-item,
  .template-site.gallery-masonry .gallery-item:nth-child(n) { grid-column: span 12; }
}

@media (prefers-reduced-motion: reduce) {
  .template-site .signature-object { animation: none; transform: rotateX(-8deg) rotateY(-12deg); }
}