/* The Shishuvann — theme.css
 * Palette: warm porcelain / ash grey neutrals with sandy-clay and sage accents.
 * Brand colors are overridden live via inc/customizer.php (wp_add_inline_style).
 * Variable names (--green/--navy/--orange/--gold) are kept stable across the
 * theme even though their hues have moved to this warmer family, so template
 * files never need to change when the palette does.
 * ------------------------------------------------------------------------- */
:root{
  --paper:#FDFAF3;
  --paper-2:#F4EFE1;
  --paper-3:#EDE6D3;
  --wash-sage:#E9F1E3;
  --wash-sage-2:#DDE8D5;
  --wash-clay:#F9EEE3;
  --wash-clay-2:#F2E1D0;
  --card:#FFFFFF;
  --ink:#332E26;
  --ink-soft:#7A705F;
  --line:#E6DCC7;
  --green:#7C9473;
  --green-deep:#5F7A56;
  --green-tint:#D9E4D1;
  --navy:#413A2E;
  --navy-tint:#ECE5D6;
  --orange:#D2884A;
  --orange-deep:#B06B32;
  --orange-tint:#F6E5D2;
  --gold:#E0A23D;
  --gold-tint:#FAEED2;
  --shadow: 0 18px 40px -18px rgba(58,50,36,0.28);
  --heading: var(--ink);
  --header-bg: rgba(251,246,236,0.88);
  --logo-width: 90px;

  /* Buttons. Each of these is overridable from Customize → Buttons; the
     defaults are expressed as brand colours so they track the palette and
     dark mode without being restated. */
  --btn-radius: 100px;
  --btn-bg: var(--orange);
  --btn-text: #FFFFFF;
  --btn-bg-hover: var(--orange-deep);
  --btn-shadow: 178,107,50;
  --btn-outline-text: var(--heading);
  --btn-outline-border: var(--line);
  /* A solid fill, not a tint: the old pale tint sat within 1.05:1 of the clay
     section behind the team block, so the hover simply didn't read there. */
  --btn-outline-bg-hover: var(--orange-deep);
  --btn-outline-text-hover: #FFFFFF;
  --btn-cta-bg: var(--gold);
  --btn-cta-text: var(--navy);
  --btn-cta-bg-hover: var(--orange);
  --btn-cta-text-hover: #FFFFFF;
}
:root[data-theme="dark"]{
  --paper:#1C1811;
  --paper-2:#242019;
  --paper-3:#2C2720;
  --wash-sage:#1E2A1A;
  --wash-sage-2:#243020;
  --wash-clay:#2A211A;
  --wash-clay-2:#322820;
  --card:#2B251B;
  --ink:#F1E9D8;
  --ink-soft:#C2B7A0;
  --line:#3C3527;
  --green:#93B182;
  --green-deep:#AECB9C;
  --green-tint:#25301F;
  --navy:#241F17;
  --navy-tint:#332D22;
  --btn-outline-text-hover: #241F17;
  --orange:#E29E62;
  --orange-deep:#F0B37E;
  --orange-tint:#3A2A19;
  --gold:#EFBD5E;
  --gold-tint:#332810;
  --shadow: 0 18px 40px -18px rgba(0,0,0,0.6);
  --heading: var(--ink);
  --header-bg: rgba(31,27,20,0.88);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#1C1811;
    --paper-2:#242019;
    --paper-3:#2C2720;
    --wash-sage:#1E2A1A;
    --wash-sage-2:#243020;
    --wash-clay:#2A211A;
    --wash-clay-2:#322820;
    --card:#2B251B;
    --ink:#F1E9D8;
    --ink-soft:#C2B7A0;
    --line:#3C3527;
    --green:#93B182;
    --green-deep:#AECB9C;
    --green-tint:#25301F;
    --navy:#241F17;
    --navy-tint:#332D22;
    --btn-outline-text-hover: #241F17;
    --orange:#E29E62;
    --orange-deep:#F0B37E;
    --orange-tint:#3A2A19;
    --gold:#EFBD5E;
    --gold-tint:#332810;
    --shadow: 0 18px 40px -18px rgba(0,0,0,0.6);
    --heading: var(--ink);
    --header-bg: rgba(31,27,20,0.88);
  }
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
/* clip, not hidden: overflow-x:hidden on body alone gets propagated to the
   viewport and leaves body itself a scroll container, so the off-screen drawer
   and the decorative glows still widened the page — the strip of empty
   background down the right-hand side on a phone. clip can't be scrolled into. */
html{ overflow-x:clip; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:-apple-system,"Helvetica Neue","Segoe UI",Arial,sans-serif;
  overflow-x:clip; -webkit-font-smoothing:antialiased;
  max-width:100%;
}
.display{ font-family: ui-rounded, "SF Pro Rounded", "Segoe UI Rounded", "Nunito", -apple-system, sans-serif; }
h1,h2,h3{ margin:0; text-wrap:balance; font-weight:800; letter-spacing:-.01em; color:var(--heading); }
p{ text-wrap:pretty; }
a{ color:inherit; }
img{ max-width:100%; height:auto; display:block; }
.wrap{ max-width:1160px; margin:0 auto; padding:0 30px; }
:focus-visible{ outline:2px solid var(--navy); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
}

/* top bar */
.top-bar{ font-size:12.5px; }
.top-bar-message{ display:inline-flex; align-items:center; gap:6px; font-weight:700; opacity:.95; }
.top-bar-inner{ display:flex; align-items:center; justify-content:space-between; padding:8px 30px; gap:20px; }
.top-bar-inner.has-message{ justify-content:flex-start; }
.top-bar-message-wrap{ flex:1; min-width:0; }
.top-bar-contact{ display:flex; gap:22px; flex-wrap:wrap; }
.top-bar-contact a{ display:inline-flex; align-items:center; gap:6px; text-decoration:none; color:inherit; opacity:.9; transition:opacity .15s ease; }
.top-bar-contact a:hover{ opacity:1; text-decoration:underline; }
.top-bar-contact svg{ flex-shrink:0; }
.top-bar-social{ display:flex; align-items:center; gap:14px; }
.top-bar-social a{ display:inline-flex; align-items:center; justify-content:center; color:inherit; opacity:.85; transition:opacity .15s ease, transform .15s ease; }
.top-bar-social a:hover{ opacity:1; transform:translateY(-1px); }

/* header — two selectable styles (Customize → Header → Header Style) */
.site-header{ position:sticky; top:0; z-index:30; transition:padding .25s ease, box-shadow .25s ease; }
.nav{ display:flex; align-items:center; justify-content:space-between; gap:24px; transition:box-shadow .25s ease, border-radius .25s ease; }

/* Header 1 — classic full-width bar */
.site-header.header-style-1{ padding:0; background:var(--header-bg); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.site-header.header-style-1.is-scrolled{ box-shadow:0 8px 24px -18px rgba(28,24,16,0.35); }
.site-header.header-style-1 .nav{ max-width:1160px; margin:0 auto; padding:14px 30px; background:transparent; border:none; border-radius:0; box-shadow:none; }

/* Header 2 — modern floating pill, clearly separated from the page background */
.site-header.header-style-2{ padding:14px 20px 0; background:transparent; }
.site-header.header-style-2.is-scrolled{ padding-top:8px; }
.site-header.header-style-2 .nav{
  max-width:1160px; margin:0 auto; padding:10px 20px 10px 24px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:100px;
  box-shadow:0 14px 34px -18px rgba(28,24,16,0.22);
}
.site-header.header-style-2.is-scrolled .nav{ box-shadow:0 18px 40px -14px rgba(28,24,16,0.3); }
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.brand img{ width:var(--logo-width); height:auto; max-height:none; }
.brand svg{ width:var(--logo-width); height:auto; }
.site-footer .brand img,
.site-footer .brand svg{ width:calc(var(--logo-width) * 0.6); }
.brand .name{ font-size:19px; font-weight:800; line-height:1.1; color:var(--heading); }
.brand .name span{ display:block; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--orange); font-weight:700; margin-top:2px; }

nav.links{ display:flex; font-size:14.5px; font-weight:600; }
nav.links > ul{ display:flex; gap:6px; list-style:none; margin:0; padding:0; }
nav.links li{ position:relative; }
nav.links > ul > li > a{ display:inline-flex; align-items:center; text-decoration:none; color:var(--ink-soft); padding:9px 14px; border-radius:100px; transition:color .18s ease, background .18s ease; }
nav.links > ul > li > a:hover, nav.links > ul > li > a:focus-visible{ color:var(--ink); background:var(--paper-2); outline:none; }
nav.links > ul > li.current-menu-item > a{ color:var(--ink); background:var(--green-tint); }

/* dropdown submenus (if a menu item has children) */
nav.links .sub-menu{ display:none; position:absolute; top:100%; left:0; min-width:210px; background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); padding:8px; list-style:none; margin:6px 0 0; z-index:40; }
nav.links li:hover > .sub-menu, nav.links li:focus-within > .sub-menu{ display:block; }
nav.links .sub-menu li{ width:100%; }
nav.links .sub-menu a{ display:block; padding:9px 12px; border-radius:8px; color:var(--ink-soft); text-decoration:none; font-size:14px; }
nav.links .sub-menu a:hover{ background:var(--paper-2); color:var(--ink); }

.nav-actions{ display:flex; align-items:center; gap:14px; }
.header-cta{ white-space:nowrap; }

/* animated hamburger */
.menu-toggle{ display:none; flex-direction:column; justify-content:center; gap:5px; width:40px; height:40px; background:none; border:none; cursor:pointer; padding:0; border-radius:10px; transition:background .2s ease; }
.menu-toggle:hover{ background:var(--paper-2); }
.menu-toggle:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--paper), 0 0 0 5.5px var(--orange-deep); }
.menu-toggle span{ width:22px; height:2px; background:var(--ink); display:block; margin:0 auto; transition:transform .25s ease, opacity .2s ease; border-radius:2px; }
.menu-toggle.is-active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.menu-toggle.is-active span:nth-child(2){ opacity:0; }
.menu-toggle.is-active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* mobile menu — slide-in drawer */
.mobile-menu-overlay{ position:fixed; inset:0; background:rgba(20,17,12,0.5); z-index:48; opacity:0; visibility:hidden; transition:opacity .25s ease; }
.mobile-menu-overlay.is-open{ opacity:1; visibility:visible; }
/* Full width, pinned to both edges rather than offset from the right.
   Offsetting from the right made the panel depend on how wide the browser
   thinks the containing block is — and with the closed panel parked off-screen
   the document is wider than the viewport, so it opened past the right edge and
   took the close button with it. left:0 plus a 100vw cap can't drift, and the
   transform slide keeps the closed panel from widening the document at all. */
.mobile-menu{
  position:fixed; top:0; left:0; right:0;
  width:auto; max-width:100vw;
  /* Height stated outright for the same reason as the width: top/bottom left it
     to the containing block, which measured taller than the screen and pushed
     the bottom CTA below the fold. dvh follows the mobile browser's chrome. */
  height:100vh; height:100dvh;
  background:var(--card); z-index:49;
  padding:22px 24px 28px;
  box-shadow:-10px 0 30px -10px rgba(28,24,16,0.3);
  transform:translateX(100%);
  transition:transform .3s ease;
  display:flex; flex-direction:column;
  overscroll-behavior:contain; overflow-y:auto;
}
/* Hidden as well as moved: a panel that is only pushed off-screen still takes
   keyboard focus and is still read out, and it reappears if the transform is
   ever ignored. */
.mobile-menu{ visibility:hidden; }
.mobile-menu.is-open{ transform:translateX(0); visibility:visible; }
@media (prefers-reduced-motion: reduce){ .mobile-menu{ transition-duration:.01ms; } }
.mobile-menu-head{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:22px; }
/* the_custom_logo() emits the image at its full uploaded size. In the header
   that's constrained by .brand, but the drawer's logo isn't wrapped in one, so
   it rendered at ~230px inside a 320px panel and swamped the menu. */
.mobile-menu-head .custom-logo-link,
.mobile-menu-head .brand{ display:inline-flex; align-items:center; flex:0 0 auto; }
.mobile-menu-head img,
.mobile-menu-head svg{ width:var(--logo-width); height:auto; }
/* Was a 36px pale-grey circle on a white panel — easy to miss, and below the
   44px minimum for a comfortable tap target. */
.mobile-menu-close{ width:44px; height:44px; flex:0 0 auto; border-radius:50%; border:1.5px solid var(--line); background:var(--paper-2); font-size:26px; line-height:1; cursor:pointer; color:var(--ink);
  transition:background .2s ease, color .2s ease, transform .28s cubic-bezier(.2,.7,.3,1); }
.mobile-menu-close:hover{ background:var(--orange); color:#fff; transform:rotate(90deg); }
.mobile-menu-close:active{ transform:rotate(90deg) scale(.9); transition-duration:.08s; }
.mobile-menu-close:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--paper), 0 0 0 5.5px var(--orange-deep); }
.mobile-menu ul{ list-style:none; margin:0 0 24px; padding:0; display:grid; gap:2px; }
/* :not(.btn) matters — .mobile-menu a is more specific than .btn-orange, so
   without it the drawer's CTA lost its white label and rendered dark text on
   orange, and picked up the link padding and rule. */
.mobile-menu a:not(.btn){ display:block; text-decoration:none; color:var(--ink); font-weight:600; padding:12px 6px; border-bottom:1px solid var(--line); }
.mobile-menu .sub-menu{ padding-left:16px; }
.mobile-menu .sub-menu a{ font-weight:500; font-size:14px; color:var(--ink-soft); border-bottom:none; padding:8px 6px; }
/* margin-top:auto pinned this to the bottom of a full-height panel, leaving a
   large empty gap under the links. It belongs with the menu it follows. */
.mobile-menu .btn{ align-self:flex-start; margin-top:26px; }

/* .btn / .btn-orange / .btn-outline are defined once in "button system" below,
   alongside their .a-btn aliases. */

/* hero */
.hero{ position:relative; padding:56px 0 20px; overflow:hidden; }
.hero-grid{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:52px; align-items:center; }
.eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--green-deep); background:var(--green-tint); border:1px solid rgba(0,0,0,0.06); padding:7px 14px 7px 10px; border-radius:100px; margin-bottom:20px; }
.eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--orange); }
.hero h1{ font-size:clamp(32px,4.2vw,50px); line-height:1.12; }
.hero-lead{ font-size:16.5px; line-height:1.7; color:var(--ink-soft); max-width:46ch; margin-top:18px; }
.hero-lead p{ margin:0; }
.hero-ctas{ display:flex; gap:14px; margin-top:28px; flex-wrap:wrap; }
.trust-row{ display:flex; gap:26px; margin-top:36px; flex-wrap:wrap; }
.trust-row .stat b{ display:block; font-size:22px; font-weight:800; color:var(--green-deep); }
.trust-row .stat span{ font-size:11px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.06em; }

.hero-art{ position:relative; height:430px; }
.arc{ position:absolute; left:50%; top:6%; width:340px; height:340px; transform:translateX(-50%); border:3px solid var(--green); border-radius:50%; clip-path:inset(0 0 45% 0); opacity:.55; }
.block{ position:absolute; border-radius:16px; box-shadow:var(--shadow); display:flex; align-items:center; justify-content:center; font-weight:800; color:#fff; }
.b-a{ width:96px; height:96px; left:26%; bottom:6%; background:linear-gradient(150deg,var(--green),var(--green-deep)); font-size:38px; transform:rotate(-4deg); }
.b-b{ width:88px; height:88px; left:42%; bottom:2%; background:linear-gradient(150deg,var(--gold),#B87F1E); color:var(--navy); font-size:34px; transform:rotate(3deg); }
.b-d{ width:96px; height:96px; left:58%; bottom:7%; background:linear-gradient(150deg,var(--orange),var(--orange-deep)); font-size:38px; transform:rotate(-2deg); }
.kid-badge{ position:absolute; width:118px; height:118px; border-radius:50%; box-shadow:var(--shadow); display:flex; flex-direction:column; align-items:center; justify-content:center; color:#fff; text-align:center; }
.kb1{ top:6%; right:6%; background:linear-gradient(150deg,var(--navy),#241F17); }
.kb2{ top:38%; left:2%; background:linear-gradient(150deg,var(--orange),var(--orange-deep)); width:96px; height:96px; }
.kid-badge b{ font-size:20px; }
.kid-badge span{ font-size:9.5px; text-transform:uppercase; letter-spacing:.08em; opacity:.85; margin-top:2px; }
.star{ position:absolute; font-size:20px; }
.st1{ top:2%; left:6%; color:var(--gold); }
.st2{ top:18%; left:16%; color:var(--orange); font-size:13px; }
.badge-card{ position:absolute; bottom:14%; right:0; background:var(--card); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); padding:14px 16px; display:flex; align-items:center; gap:10px; overflow:hidden; }
.badge-ic{ width:64px; height:64px; border-radius:10px; overflow:hidden; }

/* sections */
section{ padding:68px 0; }
.section-tinted{ background:linear-gradient(180deg, var(--paper-2) 0%, var(--paper-2) 55%, var(--paper-3) 100%); }
.section-sage{ background:linear-gradient(180deg, var(--wash-sage), var(--wash-sage-2)); }
.section-clay{ background:linear-gradient(180deg, var(--wash-clay), var(--wash-clay-2)); }

/* Back-to-back washed sections should read as one continuous surface. Each
   gradient ends on its darker stop, so the follower stays flat at that stop
   instead of restarting light and creating a visible seam. */
.section-tinted + .section-tinted{ background:var(--paper-3); }
.section-sage + .section-sage{ background:var(--wash-sage-2); }
.section-clay + .section-clay{ background:var(--wash-clay-2); }

/* …but they're still separate sections, so mark the boundary with a hairline
   that fades at both ends plus a small centred ornament. */
.section-tinted + .section-tinted,
.section-sage + .section-sage,
.section-clay + .section-clay{ position:relative; }
.section-tinted + .section-tinted::before,
.section-sage + .section-sage::before,
.section-clay + .section-clay::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:min(1100px, calc(100% - 60px)); height:1px;
  background:linear-gradient(90deg, transparent, var(--line) 18%, var(--line) 82%, transparent);
}
.section-tinted + .section-tinted::after,
.section-sage + .section-sage::after,
.section-clay + .section-clay::after{
  content:""; position:absolute; top:-4px; left:50%; transform:translateX(-50%) rotate(45deg);
  width:9px; height:9px; border-radius:2px;
  background:var(--orange); opacity:.55;
}
.section-head{ text-align:center; max-width:600px; margin:0 auto 46px; }
.section-head h2{ font-size:clamp(26px,3vw,34px); margin-top:6px; }
.section-head p{ color:var(--ink-soft); margin-top:12px; font-size:15.5px; }

.features{ background:var(--paper-2); }
.feat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.feat-card{ background:var(--card); border:1px solid var(--line); border-radius:20px; padding:26px 22px; }
.feat-icon{ width:46px; height:46px; border-radius:14px; display:flex; align-items:center; justify-content:center; margin-bottom:16px; background:var(--green-tint); color:var(--green-deep); }
.feat-card h3{ font-size:16.5px; margin-bottom:8px; }
.feat-card p{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; margin:0; }

.ph{ position:relative; overflow:hidden; display:flex; align-items:flex-end; color:#fff; background:linear-gradient(150deg,var(--green),var(--green-deep)); text-decoration:none; }
.ph > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 28%; transition:transform .6s cubic-bezier(.22,.61,.36,1); }
.ph em{
  font-style:normal; position:relative; z-index:2;
  font-size:14.5px; font-weight:700; line-height:1.35;
  margin:18px; padding-left:0;
  text-shadow:0 1px 8px rgba(0,0,0,0.55);
  transition:transform .3s ease;
}
.gallery-grid .ph:hover em{ transform:translateY(-2px); }

/* "Our Story" — layered photo collage beside the copy */
.about-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:64px; align-items:center; }

.about-art{ position:relative; height:440px; }
.about-dots{
  position:absolute; left:-6px; bottom:34px; width:96px; height:96px; z-index:0;
  background-image:radial-gradient(var(--green) 2px, transparent 2px);
  background-size:13px 13px; opacity:.4; pointer-events:none;
}
.about-photo,
.about-photo2{ position:absolute; overflow:hidden; box-shadow:0 26px 50px -22px rgba(28,24,16,0.38); }
.about-photo img,
.about-photo2 img{ width:100%; height:100%; object-fit:cover; object-position:center 25%; transition:transform .45s ease; }
.about-photo{
  top:0; left:0; width:70%; height:80%; z-index:1;
  border-radius:200px 200px 26px 26px;
  background:linear-gradient(155deg,var(--green),var(--green-deep));
  outline:6px solid var(--paper);
}
.about-photo2{
  bottom:0; right:0; width:50%; height:46%; z-index:2;
  border-radius:24px;
  background:linear-gradient(155deg,var(--orange),var(--orange-deep));
  outline:6px solid var(--paper);
}
.about-art:hover .about-photo img{ transform:scale(1.04); }
.about-art:hover .about-photo2 img{ transform:scale(1.06); }

.about-chip{
  position:absolute; top:8%; right:-6px; z-index:3;
  background:var(--card); border:1px solid var(--line); border-radius:18px;
  box-shadow:0 16px 32px -16px rgba(28,24,16,0.35);
  padding:16px 20px; text-align:center; min-width:104px;
}
.about-chip b{ display:block; font-size:28px; font-weight:800; line-height:1.05; color:var(--orange); font-family:ui-rounded,"SF Pro Rounded","Segoe UI Rounded",sans-serif; }
.about-chip span{ display:block; font-size:10px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.07em; margin-top:3px; }

.about-copy h2{ font-size:clamp(26px,3.2vw,36px); line-height:1.2; margin:0 0 16px; }
.about-lead{ color:var(--ink-soft); font-size:16px; line-height:1.8; margin:0 0 26px; max-width:52ch; }

.about-points{ list-style:none; padding:0; margin:0 0 30px; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.about-points li{
  display:flex; gap:11px; align-items:center;
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:12px 14px; font-size:13.5px; line-height:1.4; color:var(--ink);
  transition:transform .2s ease, border-color .2s ease;
}
.about-points li:hover{ transform:translateY(-2px); border-color:var(--green); }
.about-point-ic{
  flex-shrink:0; display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:10px;
  background:var(--green-tint); color:var(--green-deep);
}
.about-actions{ display:flex; gap:14px; flex-wrap:wrap; }
.about-actions .a-btn-clay{ display:inline-flex; align-items:center; gap:9px; }
.about-actions .a-btn-clay:hover{ gap:13px; }

/* Mosaic sized for portrait photos: tall rows and at least one full-height
   column, so faces aren't cropped away by wide letterbox tiles. */
.gallery-grid{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:215px; gap:18px; }
.gallery-grid .ph{ border-radius:22px; }
.g1{ grid-column:span 2; grid-row:span 2; }
.g2{ grid-column:span 1; grid-row:span 1; }
.g3{ grid-column:span 1; grid-row:span 2; }
.g4{ grid-column:span 1; grid-row:span 1; }
.g5{ grid-column:span 2; grid-row:span 1; }
.g6{ grid-column:span 2; grid-row:span 1; }

.programs-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.prog-card{ background:var(--card); border:1px solid var(--line); border-radius:22px; overflow:hidden; box-shadow:var(--shadow); }
.prog-top{ height:112px; display:flex; align-items:flex-end; padding:18px; color:#fff; font-size:15.5px; font-weight:800; }
.prog-top-green{ background:linear-gradient(135deg,var(--green),var(--green-deep)); }
.prog-top-orange{ background:linear-gradient(135deg,var(--orange),var(--orange-deep)); }
.prog-top-navy{ background:linear-gradient(135deg,#5C5140,var(--navy)); }
.prog-body{ padding:20px 20px 22px; }
.prog-body p{ font-size:13.5px; color:var(--ink-soft); line-height:1.65; margin:0 0 14px; }
.prog-link{ font-size:13px; font-weight:700; color:var(--heading); text-decoration:none; }

/* team — portrait cards with an arch photo frame and role pill */
.team-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; }
.staff-archive-grid{ padding-top:56px; }
.team-card{
  --accent: var(--green); --accent-deep: var(--green-deep);
  position:relative;
  background:var(--card); border:1px solid var(--line); border-radius:24px;
  padding:14px 14px 26px; text-align:center;
  box-shadow:0 14px 30px -22px rgba(28,24,16,0.26);
}
/* Full-card link overlay — keeps one tap target without nesting interactive elements. */
.team-link{ position:absolute; inset:0; z-index:3; border-radius:24px; }
.team-link:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.team-card:nth-child(2){ --accent:var(--orange); --accent-deep:var(--orange-deep); }
.team-card:nth-child(3){ --accent:var(--navy); --accent-deep:#5C5140; }
.team-card:nth-child(4){ --accent:var(--gold); --accent-deep:#9C6A10; }
.team-card:hover{ border-color:var(--accent); }

.team-media{ position:relative; margin-bottom:30px; }
.team-photo{
  display:block; width:100%; height:220px;
  border-radius:180px 180px 20px 20px;
  object-fit:cover; object-position:center 18%;
  background:var(--paper-2);
  transition:transform .4s ease;
}
.team-card:hover .team-photo{ transform:scale(1.03); }
.team-photo-fallback{
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(150deg, var(--accent), var(--accent-deep));
  color:#fff;
}
.team-photo-fallback span{ font-size:46px; font-weight:800; letter-spacing:.02em; font-family:ui-rounded,"SF Pro Rounded","Segoe UI Rounded",sans-serif; }

.team-role{
  position:absolute; left:50%; bottom:-14px; transform:translateX(-50%);
  background:var(--accent); color:#fff;
  font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  padding:7px 16px; border-radius:100px; white-space:nowrap;
  box-shadow:0 10px 20px -10px var(--accent);
  transition:transform .25s ease;
}
.team-card:nth-child(4) .team-role{ color:var(--navy); }
.team-card:hover .team-role{ transform:translateX(-50%) translateY(-2px); }

.team-body{ padding:0 8px; }
.team-card h3{ font-size:16.5px; margin:0 0 7px; }
.team-card p{ font-size:13px; color:var(--ink-soft); line-height:1.6; margin:0 0 14px; }
.team-cta{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12.5px; font-weight:700; color:var(--accent-deep);
  opacity:0; transform:translateY(4px);
  transition:opacity .25s ease, transform .25s ease, gap .2s ease;
}
.team-card:hover .team-cta,
.team-link:focus-visible ~ .team-body .team-cta{ opacity:1; transform:translateY(0); }
.team-card:hover .team-cta{ gap:9px; }

/* single staff profile */
.staff-hero{ display:grid; grid-template-columns:0.72fr 1.28fr; gap:56px; align-items:start; }
.staff-hero-media, .staff-hero-copy{ min-width:0; }
/* The breadcrumb sits on its own row above the two columns, so it lines up
   with the page edge instead of floating inside the copy column. */
.staff-hero-section > .wrap:first-child{ margin-bottom:26px; }
.staff-photo{ display:block; width:100%; height:400px; object-fit:cover; object-position:center 18%; border-radius:220px 220px 26px 26px; box-shadow:0 26px 50px -22px rgba(28,24,16,0.4); background:var(--paper-2); }
.staff-photo-fallback{ display:flex; align-items:center; justify-content:center; background:linear-gradient(150deg,var(--green),var(--green-deep)); color:#fff; }
.staff-hero-copy h1{ font-size:clamp(28px,3.6vw,42px); line-height:1.15; margin:0 0 18px; }
.staff-role-pill{ display:inline-block; background:var(--orange); color:#fff; font-size:11.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:8px 18px; border-radius:100px; margin-bottom:16px; }
.staff-bio{ max-width:60ch; margin-bottom:28px; }
.staff-bio p{ font-size:15.5px; line-height:1.75; color:var(--ink-soft); }

/* A compact fact list, so a profile with a one-line bio still fills its column. */
.staff-facts{
  list-style:none; margin:0 0 28px; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr)); gap:12px;
  max-width:640px;
}
.staff-facts li{
  display:flex; align-items:center; gap:12px;
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:12px 16px;
}
.staff-fact-ic{
  flex:0 0 34px; height:34px; border-radius:10px;
  display:grid; place-items:center;
  background:var(--green-tint); color:var(--green-deep);
}
.staff-facts li{ min-width:0; }
.staff-fact-body{ display:flex; flex-direction:column; min-width:0; }
.staff-fact-label{ font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); }
.staff-fact-value{ font-size:14px; font-weight:600; overflow-wrap:anywhere; }
.staff-actions{ display:flex; flex-wrap:wrap; gap:12px; }

.team-foot{ display:flex; flex-direction:column; align-items:center; gap:14px; margin-top:34px; }
.team-more{ font-size:13.5px; color:var(--ink-soft); font-weight:600; }
/* The clay wash washes out the default outline button, so give it a solid fill. */
.team-foot .btn-outline{ background:var(--navy); color:#fff; border-color:var(--navy); }
.team-foot .btn-outline:hover{ background:var(--orange); border-color:var(--orange); }

/* trust stats band */
.stats-band{
  position:relative; overflow:hidden;
  background:linear-gradient(135deg,var(--navy),#241F17);
  color:#fff; border-radius:28px; padding:50px 44px;
  box-shadow:0 30px 60px -30px rgba(28,24,16,0.6);
}
.stats-band::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,0.13) 1.4px, transparent 1.4px);
  background-size:15px 15px;
  -webkit-mask-image:radial-gradient(circle at 88% 8%, #000 0%, transparent 46%);
  mask-image:radial-gradient(circle at 88% 8%, #000 0%, transparent 46%);
}
.stats-inner{ position:relative; z-index:1; max-width:1064px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.stat-item{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px; padding:0 10px; position:relative; }
.stat-item:not(:last-child)::after{ content:""; position:absolute; right:-12px; top:14%; bottom:14%; width:1px; background:rgba(255,255,255,0.14); }
.stat-ic{
  display:flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:14px; margin-bottom:10px;
  background:rgba(224,162,61,0.16); color:var(--gold);
  transition:transform .3s ease, background .3s ease;
}
.stat-item:hover .stat-ic{ transform:translateY(-3px) scale(1.06); background:rgba(224,162,61,0.28); }
.stat-value{ display:block; font-size:clamp(28px,3.4vw,38px); font-weight:800; line-height:1.1; color:var(--gold); font-variant-numeric:tabular-nums; font-family:ui-rounded,"SF Pro Rounded","Segoe UI Rounded",sans-serif; }
.stat-label{ font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,0.72); line-height:1.4; max-width:18ch; }

.testi-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.testi-card{ background:var(--card); border:1px solid var(--line); border-radius:20px; padding:26px; }
.testi-card .stars{ color:var(--gold); font-size:13px; margin-bottom:14px; letter-spacing:2px; }
.testi-card .quote{ font-size:15px; line-height:1.7; margin-bottom:18px; }
.testi-who{ display:flex; align-items:center; gap:10px; }
.avatar{ width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,var(--green),var(--orange)); flex-shrink:0; overflow:hidden; }
.testi-who b{ display:block; font-size:13.5px; }
.testi-who span{ font-size:11.5px; color:var(--ink-soft); }

.cta-band{ position:relative; background:linear-gradient(135deg,var(--green),var(--green-deep)); border-radius:28px; padding:56px 48px; color:#fff; display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; overflow:hidden; }
.cta-band::after{ content:""; position:absolute; width:220px; height:220px; border-radius:50%; background:rgba(255,255,255,0.1); top:-70px; right:-40px; }
.cta-band h2{ font-size:clamp(22px,2.8vw,30px); max-width:520px; position:relative; color:#fff; }
.cta-band .btn-orange{ position:relative; }

/* Accessibility utilities ------------------------------------------------- */
/* WordPress's standard visually-hidden class: read by screen readers, and
   pulled back on screen when the element takes focus. */
.screen-reader-text{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}
.screen-reader-text:focus,
.skip-link:focus{
  position:fixed !important;
  top:12px; left:12px;
  z-index:100000;
  width:auto; height:auto;
  margin:0; padding:12px 20px;
  clip:auto; clip-path:none;
  background:var(--card);
  color:var(--heading);
  font-size:14px; font-weight:700;
  text-decoration:none;
  border-radius:10px;
  box-shadow:0 0 0 3px var(--paper), 0 0 0 5.5px var(--orange-deep);
}

/* footer */
/* footer */
.site-footer{
  /* No overflow:hidden here — the glows below bleed sideways and are already
     contained by body{overflow-x:hidden}. */
  position:relative;
  /* Starts on the page background so the seam above it looks the same on
     every template, then settles into the darker tone. */
  background:linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 38%, var(--paper-3) 100%);
  border-top:1px solid var(--line);
  /* No top margin: the footer butts straight onto the last section, so pages
     whose final section is a wash (sage/clay/tinted) don't show a strip of a
     third colour between the two. */
  padding:72px 0 32px;
  margin-top:0;
}
/* Soft brand glows so the footer doesn't read as a flat slab. Both stay within
   the footer vertically so they never add stray page scroll. */
.site-footer::before{
  content:""; position:absolute; width:520px; height:520px; left:-200px; bottom:0;
  border-radius:50%; pointer-events:none; z-index:0;
  background:radial-gradient(circle, var(--green-tint), transparent 68%);
  opacity:.7;
}
.site-footer::after{
  content:""; position:absolute; width:420px; height:420px; right:-180px; top:60px;
  border-radius:50%; pointer-events:none; z-index:0;
  background:radial-gradient(circle, var(--orange-tint), transparent 70%);
  opacity:.55;
}
.site-footer > .wrap{ position:relative; z-index:1; }

/* Closing CTA band. It sits fully inside the footer — it used to be pulled
   152px above the footer's top edge, which left the section behind it showing
   around the band's rounded corners and read as a gap on any page whose last
   section wasn't paper-coloured. */
.foot-cta{
  position:relative; overflow:hidden;
  background:linear-gradient(135deg,var(--navy),#241F17); color:#fff;
  border-radius:30px; padding:46px 50px; margin:0 0 60px;
  display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap;
  box-shadow:0 34px 64px -32px rgba(28,24,16,0.6);
}
.foot-cta::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,0.13) 1.4px, transparent 1.4px);
  background-size:15px 15px;
  -webkit-mask-image:radial-gradient(circle at 90% 10%, #000 0%, transparent 48%);
  mask-image:radial-gradient(circle at 90% 10%, #000 0%, transparent 48%);
}
.foot-cta > *{ position:relative; z-index:1; }
.foot-cta h2{ color:#fff; font-size:clamp(22px,2.6vw,29px); margin:0 0 8px; max-width:24ch; }
.foot-cta p{ color:rgba(255,255,255,0.72); font-size:14.5px; margin:0; }
.foot-cta-btn{ white-space:nowrap; }

.foot-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.3fr; gap:44px; padding-bottom:38px; border-bottom:1px solid var(--line); }
.foot-grid h4{ position:relative; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.1em; color:var(--heading); margin-bottom:22px; padding-bottom:13px; }
.foot-grid h4::after{ content:""; position:absolute; left:0; bottom:0; width:30px; height:3px; border-radius:3px; background:linear-gradient(90deg, var(--orange), var(--gold)); }
.foot-grid ul{ list-style:none; padding:0; margin:0; display:grid; gap:12px; font-size:13.5px; }
.foot-grid a{ text-decoration:none; color:var(--ink-soft); transition:color .18s ease, padding-left .18s ease; }
.foot-grid li > a:hover{ color:var(--orange-deep); }
/* Nudge plain link lists on hover; skip the brand and contact rows. */
.foot-grid ul:not(.foot-contact) li > a{ display:inline-block; }
.foot-grid ul:not(.foot-contact) li > a:hover{ padding-left:5px; }

.foot-brand-col{ max-width:34ch; }
.foot-brand{ display:inline-block; margin-bottom:18px; }
.foot-brand img,
.foot-brand svg{ width:auto; max-width:100%; height:auto; }
.foot-tagline{ font-size:14px; color:var(--ink-soft); line-height:1.75; margin:0 0 24px; }
.foot-menu-hint{ font-size:12.5px; line-height:1.5; margin:0; }
.foot-menu-hint a{ color:var(--orange-deep); text-decoration:underline; }
.foot-contact li{ display:flex; align-items:flex-start; gap:12px; color:var(--ink-soft); line-height:1.55; }
.foot-ic{
  flex-shrink:0; display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:11px;
  background:var(--card); color:var(--orange-deep); border:1px solid var(--line);
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.foot-contact li:hover .foot-ic{ background:var(--orange); border-color:var(--orange); color:#fff; }

.foot-socials{ display:inline-flex; align-items:center; gap:10px; }
.foot-socials a{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%;
  background:var(--card); border:1px solid var(--line);
  text-decoration:none; color:var(--ink-soft);
  transition:background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.foot-socials a:hover{ background:var(--orange); border-color:var(--orange); color:#fff; transform:translateY(-3px); }

.foot-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:26px; font-size:12.5px; color:var(--ink-soft); flex-wrap:wrap; gap:12px; }
.foot-top{
  display:inline-flex; align-items:center; gap:7px; text-decoration:none;
  color:var(--ink-soft); font-weight:700;
  padding:8px 16px; border-radius:100px; border:1px solid var(--line); background:var(--card);
  transition:color .18s ease, border-color .18s ease, transform .18s ease;
}
.foot-top svg{ transform:rotate(-90deg); }
.foot-top:hover{ color:var(--orange-deep); border-color:var(--orange); transform:translateY(-2px); }

/* generic content page */
.page-content{ font-size:16px; line-height:1.75; color:var(--ink); }
.page-content h2{ margin-top:34px; margin-bottom:14px; }
.page-content p{ margin:0 0 16px; color:var(--ink); }
.page-content img{ border-radius:18px; }

/* forms (Admissions/Contact enquiry) */
form label{ display:block; font-size:13px; font-weight:700; margin-bottom:6px; color:var(--heading); }
form input[type="text"], form input[type="email"], form input[type="tel"], form textarea{
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--line);
  background:var(--paper); color:var(--ink); font-family:inherit; font-size:14.5px; margin-bottom:16px;
}
form input:focus, form textarea:focus{ outline:2px solid var(--green-deep); outline-offset:1px; }

/* ---------------------------------------------------------------------
 * Reference-inspired layout components: photo collage, split rows,
 * wavy dividers, founder intro, FAQ accordion, contact panel.
 * ------------------------------------------------------------------- */

/* wavy divider between sections */
/* wave divider — layered, soft transition between section backgrounds.
 * Every variant below only re-points the --dv-* tokens; the three paint rules
 * are declared once. That way a per-divider override — the inline --dv-band /
 * --dv-fill the renderer writes when a neighbouring section carries a colour
 * picked in the admin — lands on flipped and toned dividers alike, without
 * having to out-specify each variant. */
.wavy-divider-wrap{
	position:relative; z-index:1; line-height:0; margin-top:-1px;
	--dv-band:transparent;              /* strip above the wave, i.e. the section being left */
	--dv-back:var(--paper-3); --dv-back-op:.5;
	--dv-fill:var(--paper-2);
	--dv-line:var(--orange); --dv-line-op:.22;
	background:var(--dv-band);
}
.wavy-divider{ display:block; width:100%; height:clamp(48px, 6vw, 82px); }
.wavy-divider path{ transition:fill .3s ease; }

/* default direction: page background → tinted background */
.wavy-divider-wrap .wave-back{ fill:var(--dv-back); opacity:var(--dv-back-op); }
.wavy-divider-wrap .wave-fill{ fill:var(--dv-fill); }
.wavy-divider-wrap .wave-line{ fill:none; stroke:var(--dv-line); stroke-width:1.5; stroke-dasharray:1.5 6; stroke-linecap:round; opacity:var(--dv-line-op); }

/* flipped: tinted background → page background */
.wavy-divider-wrap.flip{
	--dv-band:var(--paper-3);
	--dv-back:var(--paper-2); --dv-back-op:.55;
	--dv-fill:var(--paper);
	--dv-line:var(--green); --dv-line-op:.24;
}

/* sage tone: use when the divider borders a .section-sage block */
.wavy-divider-wrap.tone-sage{ --dv-back:var(--wash-sage-2); --dv-fill:var(--wash-sage); }
.wavy-divider-wrap.tone-sage.flip{ --dv-band:var(--wash-sage-2); --dv-back:var(--paper); --dv-fill:var(--paper); }

/* clay tone: use when the divider borders a .section-clay block */
.wavy-divider-wrap.tone-clay{ --dv-back:var(--wash-clay-2); --dv-fill:var(--wash-clay); --dv-line:var(--green); --dv-line-op:.3; }
.wavy-divider-wrap.tone-clay.flip{ --dv-band:var(--wash-clay-2); --dv-back:var(--paper); --dv-fill:var(--paper); }

/* shared eyebrow/button styles used by the reference-inspired sections */
.a-eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--green-deep); background:var(--green-tint); border:1px solid rgba(0,0,0,0.06); padding:7px 14px 7px 10px; border-radius:100px; margin-bottom:20px; }
.a-eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--orange); }
/* .a-btn variants: see "button system" below. */

/* photo collage hero — premium: deeper shadows, color-graded photos, layered accents */
.a-hero-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.a-hero h1{ font-size:clamp(32px,4.4vw,52px); line-height:1.1; margin:0; letter-spacing:-.015em; }
.a-hero-lead{ font-size:16.5px; line-height:1.7; color:var(--ink-soft); max-width:46ch; margin-top:18px; }
.a-hero-ctas{ display:flex; gap:14px; margin-top:28px; flex-wrap:wrap; }
.a-collage{ position:relative; height:460px; }
.a-blob{ position:absolute; inset:0; margin:auto; width:90%; height:94%; background:linear-gradient(155deg,var(--green-tint),var(--paper-2)); border-radius:62% 38% 55% 45% / 55% 48% 52% 45%; box-shadow:inset 0 0 0 1px rgba(0,0,0,0.03); }
.a-collage-dots{ position:absolute; top:0; right:8%; width:64px; height:64px; background-image:radial-gradient(var(--orange) 2px, transparent 2px); background-size:11px 11px; opacity:.45; pointer-events:none; }
.a-collage-photo{ position:absolute; border-radius:28px; box-shadow:0 24px 48px -20px rgba(28,24,16,0.35), 0 2px 0 rgba(255,255,255,0.4) inset; object-fit:cover; object-position:center 25%; overflow:hidden; outline:5px solid var(--paper); background:var(--paper-2); transition:transform .35s ease; }
.a-cp1{ top:2%; left:6%; width:60%; height:68%; z-index:2; }
.a-cp2{ bottom:2%; right:0; width:48%; height:46%; z-index:1; }
.a-cp3{ top:44%; left:-4%; width:96px; height:96px; border-radius:50%; box-shadow:0 16px 30px -14px rgba(28,24,16,0.4); z-index:3; object-position:center 20%; }
.a-collage:hover .a-cp1{ transform:scale(1.025); }
.a-collage:hover .a-cp2{ transform:scale(1.04); }
.a-badge{ position:absolute; z-index:4; background:var(--card); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); padding:14px 16px; display:flex; align-items:center; gap:10px; animation:shishuvann-float 5s ease-in-out infinite; }
.a-badge-top{ top:2%; right:0; }
.a-badge-bottom{ bottom:8%; left:-4%; animation-delay:.6s; }
.a-badge-ic{ width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:var(--green-tint); color:var(--green-deep); flex-shrink:0; }
.a-badge b{ display:block; font-size:13px; }
.a-badge span{ font-size:11px; color:var(--ink-soft); }
@keyframes shishuvann-float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }
@media (prefers-reduced-motion: reduce){ .a-badge{ animation:none; } }

/* hero style 2 — clean single image */
.a-hero-clean{ position:relative; height:460px; }
.a-hero-clean-img{ width:100%; height:100%; object-fit:cover; object-position:center 25%; border-radius:32px; box-shadow:0 30px 60px -24px rgba(28,24,16,0.4); transition:transform .4s ease; }
.a-hero-clean:hover .a-hero-clean-img{ transform:scale(1.015); }
.a-badge-clean{ position:absolute; bottom:24px; left:24px; animation:shishuvann-float 5s ease-in-out infinite; }

/* support strip — compact horizontal interactive cards */
.a-support{ background:linear-gradient(180deg, var(--paper-2), var(--paper-3)); }
.a-support-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }

.a-support-item{
  --accent: var(--green); --accent-deep: var(--green-deep); --accent-tint: var(--green-tint);
  position:relative; overflow:hidden;
  display:flex; align-items:center; gap:18px;
  background:var(--card); border:1px solid var(--line); border-radius:20px;
  padding:20px 22px; text-align:left;
  box-shadow:0 12px 26px -20px rgba(28,24,16,0.22);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.a-support-item::before{
  content:""; position:absolute; top:0; left:0; bottom:0; width:4px;
  background:linear-gradient(180deg, var(--accent), var(--accent-deep));
  transform:scaleY(0); transform-origin:top; transition:transform .3s ease;
}
.a-support-item:hover{ transform:translateY(-4px); box-shadow:0 20px 34px -18px rgba(28,24,16,0.28); border-color:var(--accent); }
.a-support-item:hover::before{ transform:scaleY(1); }

.a-support-item:nth-child(2){ --accent:var(--orange); --accent-deep:var(--orange-deep); --accent-tint:var(--orange-tint); }
.a-support-item:nth-child(3){ --accent:var(--gold); --accent-deep:#9C6A10; --accent-tint:var(--gold-tint); }
.a-support-item:nth-child(4){ --accent:var(--navy); --accent-deep:var(--navy); --accent-tint:var(--navy-tint); }

.a-support-num{
  position:absolute; top:6px; right:14px; font-size:44px; font-weight:800; line-height:1;
  color:var(--accent); opacity:.1; pointer-events:none; font-family:ui-rounded,"SF Pro Rounded","Segoe UI Rounded",sans-serif;
}
.a-support-ic{
  position:relative; z-index:1; flex-shrink:0; width:64px; height:64px; border-radius:18px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(155deg, var(--accent), var(--accent-deep));
  color:#fff; box-shadow:0 10px 20px -10px var(--accent);
  transition:transform .3s ease;
}
.a-support-item:hover .a-support-ic{ transform:scale(1.08) rotate(-4deg); }
.a-support-body{ position:relative; z-index:1; flex:1; min-width:0; }
.a-support-item h3{ font-size:15.5px; margin:0 0 4px; }
.a-support-item p{ font-size:13px; color:var(--ink-soft); line-height:1.55; margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.a-support-arrow{
  position:relative; z-index:1; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:50%;
  background:var(--accent-tint); color:var(--accent-deep);
  opacity:0; transform:translateX(-6px);
  transition:opacity .25s ease, transform .25s ease;
}
.a-support-item:hover .a-support-arrow{ opacity:1; transform:translateX(0); }

/* "A Personal Note" — letter-style panel from the head of school */
.founder-intro{
  position:relative; overflow:hidden;
  background:linear-gradient(150deg, var(--navy), #2E281E);
  border-radius:32px; padding:52px 56px;
  display:grid; grid-template-columns:0.62fr 1.38fr; gap:52px; align-items:center;
  box-shadow:0 30px 60px -28px rgba(28,24,16,0.55);
}
.founder-intro::before{
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,0.14) 1.5px, transparent 1.5px);
  background-size:14px 14px;
  -webkit-mask-image:radial-gradient(circle at 84% 14%, #000 0%, transparent 44%);
  mask-image:radial-gradient(circle at 84% 14%, #000 0%, transparent 44%);
  pointer-events:none;
}
.founder-intro::after{
  content:""; position:absolute; width:280px; height:280px; left:-110px; bottom:-130px;
  border-radius:50%; background:radial-gradient(circle, rgba(224,162,61,0.16), transparent 68%);
  pointer-events:none;
}

/* photo + role badge */
.founder-media{ position:relative; z-index:1; }
.founder-photo{
  position:relative; height:340px; border-radius:220px 220px 22px 22px;
  background:linear-gradient(155deg,var(--orange),var(--orange-deep));
  background-size:cover; background-position:center 22%;
  box-shadow:0 24px 46px -18px rgba(0,0,0,0.55);
  outline:6px solid rgba(255,255,255,0.06);
}
.founder-role-badge{
  position:absolute; left:50%; bottom:-14px; transform:translateX(-50%);
  background:var(--gold); color:var(--navy);
  font-size:11.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  padding:8px 18px; border-radius:100px; white-space:nowrap;
  box-shadow:0 10px 22px -10px rgba(0,0,0,0.6);
}

/* copy */
.founder-copy{ position:relative; z-index:1; }
.founder-quote-mark{ display:block; color:var(--gold); opacity:.5; margin-bottom:10px; }
.founder-copy .a-eyebrow{ margin-bottom:14px; background:rgba(255,255,255,0.12); color:#fff; border-color:rgba(255,255,255,0.16); }
.founder-copy .a-eyebrow .dot{ background:var(--gold); }
.founder-copy h2{ color:#fff; font-size:clamp(24px,2.9vw,32px); margin-bottom:14px; }
.founder-letter{ color:rgba(255,255,255,0.84); font-size:15.5px; line-height:1.75; margin:0 0 24px; max-width:56ch; }

/* trust points as chips */
.founder-points{ list-style:none; margin:0 0 28px; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.founder-points li{
  display:flex; gap:11px; align-items:center;
  background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.1);
  border-radius:14px; padding:11px 14px;
  font-size:13px; line-height:1.4; color:rgba(255,255,255,0.92);
  transition:background .22s ease, transform .22s ease;
}
.founder-points li:hover{ background:rgba(255,255,255,0.12); transform:translateY(-2px); }
.founder-point-ic{
  flex-shrink:0; width:30px; height:30px; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(224,162,61,0.18); color:var(--gold);
}

/* signature + actions */
.founder-footer{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; padding-top:22px; border-top:1px solid rgba(255,255,255,0.12); }
.founder-signature{ display:flex; flex-direction:column; gap:2px; }
.founder-sign-name{ font-family:Georgia,"Iowan Old Style",serif; font-style:italic; font-size:21px; color:#fff; }
.founder-sign-role{ font-size:11.5px; letter-spacing:.05em; text-transform:uppercase; color:rgba(255,255,255,0.55); }
.founder-actions{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.founder-intro .a-btn-clay{ background:var(--gold); color:var(--navy); }
.founder-call{ display:inline-flex; align-items:center; gap:7px; font-size:14px; font-weight:700; color:#fff; text-decoration:none; opacity:.85; transition:opacity .18s ease; }
.founder-call:hover{ opacity:1; text-decoration:underline; }

/* "A Learning Path" — numbered, connected stage cards */
.arch-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.arch-card{
  --accent: var(--green); --accent-deep: var(--green-deep); --accent-tint: var(--green-tint);
  position:relative; display:flex; flex-direction:column;
  background:var(--card); border:1px solid var(--line); border-radius:26px; padding:14px 14px 22px;
  box-shadow:0 16px 34px -22px rgba(28,24,16,0.28);
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.arch-card:hover{ transform:translateY(-6px); box-shadow:0 28px 48px -22px rgba(28,24,16,0.34); border-color:var(--accent); }
.arch-card:nth-child(2){ --accent:var(--orange); --accent-deep:var(--orange-deep); --accent-tint:var(--orange-tint); }
.arch-card:nth-child(3){ --accent:var(--navy); --accent-deep:#5C5140; --accent-tint:var(--navy-tint); }
.arch-card:nth-child(4){ --accent:var(--gold); --accent-deep:#9C6A10; --accent-tint:var(--gold-tint); }

.arch-media{ position:relative; margin-bottom:20px; }
.arch-photo{
  height:220px; border-radius:220px 220px 18px 18px;
  background-size:cover; background-position:center 25%;
  background-color:var(--accent);
  background-image:linear-gradient(150deg, var(--accent), var(--accent-deep));
  transition:transform .4s ease;
}
.arch-card:hover .arch-photo{ transform:scale(1.03); }

/* ==========================================================================
   button system
   One definition shared by .btn and .a-btn (both class names stay valid).
   Layers: lift + shadow on hover, a light sweep across the face, an icon
   nudge, and a real press on :active. All of it is disabled under
   prefers-reduced-motion at the bottom of this file.
   ========================================================================== */

.btn, .a-btn{
  --btn-lift: -2px;
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  font-family:inherit;
  font-weight:700;
  font-size:14px;
  line-height:1.2;
  padding:13px 26px;
  border-radius:var(--btn-radius);
  border:none;
  cursor:pointer;
  text-decoration:none;
  white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
  transition:
    transform .28s cubic-bezier(.2,.7,.3,1),
    box-shadow .28s cubic-bezier(.2,.7,.3,1),
    background-color .22s ease,
    border-color .22s ease,
    color .22s ease;
}

.btn > svg, .a-btn > svg{
  flex:0 0 auto;
  transition:transform .28s cubic-bezier(.2,.7,.3,1);
}
.btn:hover > svg, .a-btn:hover > svg{ transform:translateX(3px); }

.btn:hover, .a-btn:hover{ transform:translateY(var(--btn-lift)); }
.btn:active, .a-btn:active{ transform:translateY(0); transition-duration:.08s; }

/* keyboard users get a ring the mouse never shows */
.btn:focus-visible, .a-btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px var(--paper), 0 0 0 5.5px var(--btn-bg-hover);
}

.btn:disabled, .a-btn:disabled,
.btn[aria-disabled="true"], .a-btn[aria-disabled="true"]{
  opacity:.6;
  cursor:not-allowed;
  transform:none;
}

/* --- solid (primary) ---------------------------------------------------- */
.btn-orange, .a-btn-clay{
  background:var(--btn-bg);
  color:var(--btn-text);
  box-shadow:0 10px 22px -12px rgba(var(--btn-shadow),0.55);
}
.btn-orange:hover, .a-btn-clay:hover{
  background:var(--btn-bg-hover);
  box-shadow:0 16px 28px -14px rgba(var(--btn-shadow),0.6);
}

/* --- outline (secondary) ------------------------------------------------ */
/* The fill wipes up from the bottom rather than snapping in. */
.btn-outline, .a-btn-outline{
  background:transparent;
  color:var(--btn-outline-text);
  border:1.5px solid var(--btn-outline-border);
  box-shadow:none;
}
.btn-outline:hover, .a-btn-outline:hover{
  background:var(--btn-outline-bg-hover);
  color:var(--btn-outline-text-hover);
  border-color:var(--btn-outline-bg-hover);
  box-shadow:0 14px 26px -16px rgba(var(--btn-shadow),0.6);
}

/* --- gold (footer CTA band) --------------------------------------------- */
.foot-cta-btn{
  background:var(--btn-cta-bg);
  color:var(--btn-cta-text);
  box-shadow:0 12px 24px -12px rgba(0,0,0,0.55);
}
.foot-cta-btn:hover{ background:var(--btn-cta-bg-hover); color:var(--btn-cta-text-hover); box-shadow:0 16px 30px -14px rgba(0,0,0,0.65); }
.foot-cta-btn:focus-visible{ box-shadow:0 0 0 3px var(--navy), 0 0 0 5.5px var(--btn-cta-bg); }

/* --- enquiry submit ----------------------------------------------------- */
.a-form-submit{
  background:var(--btn-bg);
  color:var(--btn-text);
  box-shadow:0 12px 24px -14px rgba(var(--btn-shadow),0.55);
}
.a-form-submit:hover{ background:var(--btn-bg-hover); box-shadow:0 16px 28px -14px rgba(var(--btn-shadow),0.6); }
/* while sending, the button should read as busy, not as clickable */
.a-form-submit.is-loading, .a-form-submit:disabled{ transform:none; background:var(--btn-bg); }

/* --- text link with a growing underline --------------------------------- */
.prog-link{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding-bottom:3px;
  transition:color .22s ease, gap .28s cubic-bezier(.2,.7,.3,1);
}
/* The rest state keeps a full underline so the link still reads as a link;
   hover only changes its weight and colour. */
.prog-link::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:1.5px;
  border-radius:2px;
  background:var(--gold);
  opacity:.55;
  transition:opacity .22s ease, background-color .22s ease, height .22s ease;
}
.prog-link-arrow{
  display:inline-block;
  transition:transform .28s cubic-bezier(.2,.7,.3,1);
}
.prog-link:hover{ color:var(--orange-deep); }
.prog-link:hover .prog-link-arrow{ transform:translateX(4px); }
.prog-link:hover::after{ opacity:1; height:2px; background:var(--orange-deep); }
.prog-link:focus-visible{ outline:2px solid var(--orange-deep); outline-offset:3px; border-radius:3px; }

/* --------------------------------------------------------------------------
   Motion is decoration here — every state above still reads without it.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .btn, .a-btn, .btn > svg, .a-btn > svg, .prog-link, .prog-link::after{
    transition-duration:.01ms;
  }
  .btn:hover, .a-btn:hover, .btn:active, .a-btn:active{ transform:none; }
  .prog-link:hover .prog-link-arrow{ transform:none; }
  .gallery-filters button:hover, .gallery-filters button:active,
  .testi-nav:hover:not(:disabled), .testi-nav:active:not(:disabled),
  .mobile-menu-close:hover, .mobile-menu-close:active{ transform:none; }
  .testi-nav[data-slider-prev]:hover:not(:disabled) svg{ transform:rotate(180deg); }
  .testi-nav[data-slider-next]:hover:not(:disabled) svg{ transform:none; }
}


/* stage badge — the path's step marker */
.arch-step{
  position:absolute; top:14px; left:14px; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:16px;
  background:var(--card); border:1px solid var(--line);
  box-shadow:0 8px 18px -8px rgba(28,24,16,0.4);
}
.arch-step-label{ font-size:8px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); line-height:1; }
.arch-step-num{ font-size:20px; font-weight:800; line-height:1.1; color:var(--accent-deep); font-family:ui-rounded,"SF Pro Rounded","Segoe UI Rounded",sans-serif; }

.arch-age{
  position:absolute; bottom:14px; left:50%; transform:translateX(-50%); z-index:2;
  background:var(--card); border:1px solid var(--line);
  font-size:11.5px; font-weight:700; color:var(--accent-deep);
  padding:6px 14px; border-radius:100px; white-space:nowrap;
  box-shadow:0 8px 16px -8px rgba(28,24,16,0.35);
}

.arch-body{ display:flex; flex-direction:column; flex-grow:1; padding:0 10px; }
.arch-card h3{ font-size:17.5px; margin:0 0 8px; }
.arch-card p{ color:var(--ink-soft); font-size:13.5px; line-height:1.65; margin:0 0 18px; flex-grow:1; }
.arch-link{
  display:inline-flex; align-items:center; gap:7px; align-self:flex-start;
  font-size:13.5px; font-weight:700; color:var(--accent-deep); text-decoration:none;
  padding:9px 16px; border-radius:100px; background:var(--accent-tint);
  transition:gap .22s ease, background .22s ease, color .22s ease;
}
.arch-card:hover .arch-link{ gap:11px; background:var(--accent); color:#fff; }

/* connector between stages — shows the path progression */
.arch-connector{
  position:absolute; top:96px; right:-30px; z-index:3;
  width:30px; display:flex; align-items:center; justify-content:center;
  color:var(--line);
}
.arch-connector::before{ content:""; position:absolute; left:0; right:0; height:2px; background:repeating-linear-gradient(90deg, var(--line) 0 5px, transparent 5px 10px); }
.arch-connector svg{ position:relative; background:var(--wash-sage); padding:2px; }

/* quote stack (testimonials) */
/* testimonial slider */
.testi-slider{ position:relative; }
.testi-track{
  display:flex; gap:24px; overflow-x:auto; scroll-snap-type:x mandatory;
  /* Side padding + negative margin keeps card shadows from being clipped, and
     leaves the last card room to sit fully in view at the end of the scroll. */
  padding:22px 20px 14px; margin:-22px -20px 0;
  scroll-padding-inline:20px;
  scrollbar-width:none; -ms-overflow-style:none;
}
.testi-track::-webkit-scrollbar{ display:none; }
.testi-slide{
  position:relative; flex:0 0 clamp(280px, 32%, 370px); scroll-snap-align:start;
  display:flex; flex-direction:column;
  background:var(--card); border:1px solid var(--line); border-radius:24px;
  padding:34px 28px 28px;
  box-shadow:0 16px 34px -22px rgba(28,24,16,0.26);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.testi-slide:hover{ transform:translateY(-4px); box-shadow:0 24px 42px -20px rgba(28,24,16,0.3); border-color:var(--orange); }
.testi-quote-ic{
  position:absolute; top:-16px; left:26px;
  width:44px; height:44px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(150deg,var(--orange),var(--orange-deep)); color:#fff;
  box-shadow:0 12px 22px -12px var(--orange-deep);
}
.testi-stars{ display:flex; gap:3px; margin:8px 0 16px; color:var(--line); }
.testi-stars .is-filled{ color:var(--gold); }
.testi-stars svg{ display:block; }
.testi-stars .is-filled svg{ fill:var(--gold); }
.testi-text{ font-size:15.5px; line-height:1.75; color:var(--ink); margin:0 0 22px; flex-grow:1; }
.testi-person{ display:flex; align-items:center; gap:12px; padding-top:18px; border-top:1px solid var(--line); }
.testi-avatar{ width:44px; height:44px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.testi-avatar-fallback{
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(150deg,var(--green),var(--green-deep));
  color:#fff; font-weight:800; font-size:15px;
}
.testi-meta{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.testi-meta b{ font-size:14px; }
.testi-meta span{ font-size:12px; color:var(--ink-soft); }

.testi-controls{ display:flex; align-items:center; justify-content:center; gap:18px; margin-top:28px; }
.testi-nav{
  width:44px; height:44px; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:var(--card); border:1px solid var(--line); color:var(--ink);
  transition:background .22s ease, color .22s ease, border-color .22s ease, opacity .22s ease,
             transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s cubic-bezier(.2,.7,.3,1);
}
.testi-nav svg{ transition:transform .28s cubic-bezier(.2,.7,.3,1); }
.testi-nav:hover:not(:disabled){ background:var(--orange); border-color:var(--orange); color:#fff; transform:translateY(-2px); box-shadow:0 14px 24px -14px var(--orange-deep); }
.testi-nav[data-slider-next]:hover:not(:disabled) svg{ transform:translateX(2px); }
.testi-nav:active:not(:disabled){ transform:translateY(0) scale(.93); transition-duration:.08s; }
.testi-nav:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--paper), 0 0 0 5.5px var(--orange-deep); }
.testi-nav:disabled{ opacity:.35; cursor:default; }
.testi-nav[data-slider-prev] svg{ transform:rotate(180deg); }
.testi-nav[data-slider-prev]:hover:not(:disabled) svg{ transform:rotate(180deg) translateX(2px); }
.testi-dots{ display:flex; align-items:center; gap:8px; }
.testi-dots button{
  width:8px; height:8px; padding:0; border:none; border-radius:50%; cursor:pointer;
  background:var(--line); transition:width .25s ease, background .25s ease;
}
.testi-dots button.is-active{ width:24px; border-radius:100px; background:var(--orange); }

/* FAQ accordion — native <details>/<summary>, no JS required */
/* FAQ — sticky intro column beside the accordion */
.faq-layout{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:56px; align-items:start; }
.faq-aside{ position:sticky; top:120px; }
.faq-aside h2{ font-size:clamp(26px,3vw,34px); margin:6px 0 12px; }
.faq-aside > p{ color:var(--ink-soft); font-size:15.5px; line-height:1.7; margin:0 0 26px; max-width:34ch; }
.faq-help{ display:flex; gap:14px; background:var(--card); border:1px solid var(--line); border-radius:20px; padding:22px; box-shadow:0 14px 30px -22px rgba(28,24,16,0.25); }
.faq-help-ic{ flex-shrink:0; width:42px; height:42px; border-radius:13px; display:flex; align-items:center; justify-content:center; background:var(--orange-tint); color:var(--orange-deep); }
.faq-help b{ display:block; font-size:14.5px; margin-bottom:4px; }
.faq-help p{ font-size:13px; color:var(--ink-soft); line-height:1.5; margin:0 0 10px; }
.faq-help-call{ display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:700; color:var(--orange-deep); text-decoration:none; }
.faq-help-call:hover{ text-decoration:underline; }

.faq-list{ display:grid; gap:12px; }
.faq-item{ background:var(--card); border:1px solid var(--line); border-radius:18px; overflow:hidden; transition:border-color .22s ease, box-shadow .22s ease; }
.faq-item:hover{ border-color:var(--orange); }
.faq-item summary{ padding:20px 22px; font-weight:700; font-size:15px; cursor:pointer; list-style:none; display:flex; align-items:center; gap:14px; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-num{ flex-shrink:0; width:32px; height:32px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:var(--paper-2); color:var(--ink-soft); font-size:12px; font-weight:800; transition:background .22s ease, color .22s ease; }
.faq-item[open] .faq-num{ background:var(--orange); color:#fff; }
.faq-q{ flex:1; min-width:0; }
.faq-item summary::after{ content:"+"; font-size:22px; font-weight:400; line-height:1; color:var(--orange); flex-shrink:0; transition:transform .25s ease; }
.faq-item[open] summary::after{ transform:rotate(45deg); }
.faq-item .faq-answer{ padding:0 22px 22px 68px; color:var(--ink-soft); font-size:14.5px; line-height:1.75; }

/* contact panel — big colored info block */
/* contact panel */
.a-contact-panel{
  position:relative; overflow:hidden;
  background:linear-gradient(135deg,var(--green),var(--green-deep));
  border-radius:32px; padding:54px; color:#fff;
  display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;
  box-shadow:0 30px 60px -30px rgba(28,24,16,0.5);
}
.a-contact-panel::before{
  content:""; position:absolute; width:340px; height:340px; right:-120px; top:-140px;
  border-radius:50%; background:rgba(255,255,255,0.08); pointer-events:none;
}
.a-contact-panel::after{
  content:""; position:absolute; width:220px; height:220px; left:-90px; bottom:-110px;
  border-radius:50%; background:rgba(255,255,255,0.06); pointer-events:none;
}
.a-contact-info{ position:relative; z-index:1; }
.a-contact-info .a-eyebrow{ background:rgba(255,255,255,0.16); color:#fff; border-color:rgba(255,255,255,0.2); }
.a-contact-info .a-eyebrow .dot{ background:var(--gold); }
.a-contact-panel h2{ color:#fff; font-size:clamp(26px,3.2vw,34px); margin-bottom:14px; }
.a-contact-panel > .a-contact-info > p{ color:rgba(255,255,255,0.88); font-size:15.5px; line-height:1.7; margin:0 0 28px; max-width:42ch; }
.a-contact-list{ list-style:none; margin:0; padding:0; display:grid; gap:18px; }
.a-contact-list li{ display:flex; align-items:flex-start; gap:14px; }
.a-contact-ic{ width:44px; height:44px; border-radius:13px; background:rgba(255,255,255,0.18); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background .22s ease; }
.a-contact-list li:hover .a-contact-ic{ background:rgba(255,255,255,0.3); }
.a-contact-text{ display:flex; flex-direction:column; gap:2px; font-size:14.5px; line-height:1.5; }
.a-contact-text b{ font-size:11.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:rgba(255,255,255,0.65); }
.a-contact-text a{ color:#fff; text-decoration:none; }
.a-contact-text a:hover{ text-decoration:underline; }

/* enquiry card */
.a-quick-card{ position:relative; z-index:1; background:var(--card); border-radius:24px; padding:32px 30px; box-shadow:0 24px 48px -24px rgba(0,0,0,0.4); }
.a-quick-card h3{ font-size:19px; margin:0 0 20px; color:var(--heading); }
.a-honeypot{ position:absolute; left:-9999px; }
.a-form-note{ display:none; font-size:13px; font-weight:700; color:var(--orange-deep); background:var(--orange-tint); border-radius:10px; padding:10px 14px; margin:0 0 16px; }
.a-form-note.is-visible{ display:block; }
.a-form-row{ margin-bottom:16px; }
.a-form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.a-quick-card label{ display:block; font-size:12px; font-weight:700; letter-spacing:.03em; margin-bottom:7px; color:var(--ink); }
.a-quick-card label span{ color:var(--orange-deep); }
.a-quick-card input, .a-quick-card textarea{
  width:100%; padding:12px 14px; border-radius:12px;
  border:1.5px solid var(--line); background:var(--paper);
  color:var(--ink); font-family:inherit; font-size:14.5px; margin:0;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.a-quick-card input::placeholder, .a-quick-card textarea::placeholder{ color:var(--ink-soft); opacity:.7; }
.a-quick-card input:focus, .a-quick-card textarea:focus{ outline:none; border-color:var(--green-deep); box-shadow:0 0 0 3px var(--green-tint); }
.a-form-submit{ justify-content:center; width:100%; }
.a-form-privacy{ font-size:11.5px; color:var(--ink-soft); text-align:center; margin:14px 0 0; }
/* standalone form (Admissions / Contact pages) sits on the page background,
   so it needs its own border rather than the contact panel's contrast. */
.enquiry-card{ max-width:640px; margin:0 auto; border:1px solid var(--line); box-shadow:0 18px 40px -26px rgba(28,24,16,0.3); }

/* success panel — hidden until the submission actually succeeds */
.a-form-success{ display:none; text-align:center; padding:26px 0; }
.a-form-success.is-visible{ display:block; animation:shishuvann-pop .35s ease both; }
.a-form-success-ic{ display:inline-flex; align-items:center; justify-content:center; width:60px; height:60px; border-radius:50%; background:var(--green-tint); color:var(--green-deep); margin-bottom:16px; }
.a-form-success b{ display:block; font-size:20px; color:var(--heading); margin-bottom:8px; }
.a-form-success p{ font-size:14.5px; color:var(--ink-soft); line-height:1.65; margin:0; }
.a-form-wrap.is-hidden{ display:none; }
@keyframes shishuvann-pop{ from{ opacity:0; transform:scale(.96); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .a-form-success.is-visible{ animation:none; } }

/* inline field errors */
.a-form-error{ display:none; font-size:12px; font-weight:600; color:var(--orange-deep); margin-top:6px; }
.a-form-error.is-visible{ display:block; }
.a-quick-card input.has-error,
.a-quick-card textarea.has-error{ border-color:var(--orange); box-shadow:0 0 0 3px var(--orange-tint); }

/* submit button loading state */
.a-form-submit{ position:relative; }
.a-form-submit:disabled{ opacity:.75; cursor:progress; }
.a-form-spinner{ display:none; width:16px; height:16px; border-radius:50%; border:2px solid rgba(255,255,255,0.4); border-top-color:#fff; animation:shishuvann-spin .7s linear infinite; }
.a-form-submit.is-loading .a-form-spinner{ display:inline-block; }
.a-form-submit.is-loading svg{ display:none; }
@keyframes shishuvann-spin{ to{ transform:rotate(360deg); } }

/* ---------------------------------------------------------------------
 * Scroll-reveal animation (JS toggles .in-view on .reveal-group via
 * IntersectionObserver) + card hover polish + gallery filter/lightbox.
 * ------------------------------------------------------------------- */
.reveal-group > *{ opacity:0; transform:translateY(18px); transition:opacity .55s ease, transform .55s ease; }
.reveal-group.in-view > *{ opacity:1; transform:none; }
.reveal-group.in-view > *:nth-child(1){ transition-delay:.02s; }
.reveal-group.in-view > *:nth-child(2){ transition-delay:.09s; }
.reveal-group.in-view > *:nth-child(3){ transition-delay:.16s; }
.reveal-group.in-view > *:nth-child(4){ transition-delay:.23s; }
.reveal-group.in-view > *:nth-child(5){ transition-delay:.3s; }
.reveal-group.in-view > *:nth-child(6){ transition-delay:.37s; }
.reveal-group.in-view > *:nth-child(n+7){ transition-delay:.4s; }
.reveal-solo{ opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s ease; }
.reveal-solo.in-view{ opacity:1; transform:none; }

/* card hover polish */
.feat-card, .arch-card, .team-card, .testi-card, .prog-card{ transition:transform .22s ease, box-shadow .22s ease; }
.feat-card:hover, .team-card:hover, .testi-card:hover, .prog-card:hover{ transform:translateY(-4px); box-shadow:0 20px 36px -18px rgba(28,24,16,0.28); }
.arch-card:hover{ transform:translateY(-5px); box-shadow:0 24px 42px -18px rgba(28,24,16,0.32); }
.arch-photo, .a-collage-photo{ transition:transform .35s ease; }
.arch-card:hover .arch-photo{ transform:scale(1.03); }
.faq-item{ transition:box-shadow .2s ease; }
.faq-item[open]{ box-shadow:0 14px 28px -18px rgba(28,24,16,0.25); }

/* gallery: filter pills */
/* gallery: filter pills with counts */
.gallery-filters{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:0 0 32px; }
.gallery-filters button{ display:inline-flex; align-items:center; gap:8px; font-family:inherit; font-size:13px; font-weight:700; padding:9px 14px 9px 18px; border-radius:100px; border:1px solid var(--line); background:var(--card); color:var(--ink-soft); cursor:pointer;
  transition:background .22s ease, border-color .22s ease, color .22s ease, transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s cubic-bezier(.2,.7,.3,1); }
.gallery-filters button:hover{ color:var(--ink); border-color:var(--orange); transform:translateY(-2px); box-shadow:0 12px 22px -14px rgba(28,24,16,0.4); }
.gallery-filters button:active{ transform:translateY(0) scale(.97); transition-duration:.08s; }
.gallery-filters button:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--paper), 0 0 0 5.5px var(--orange-deep); }
.gallery-filters button.is-active{ background:var(--orange); border-color:var(--orange); color:#fff; box-shadow:0 10px 20px -12px var(--orange-deep); }
.gallery-filter-count{ display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:22px; padding:0 6px; border-radius:100px; background:var(--paper-2); color:var(--ink-soft); font-size:11px; font-weight:800; }
.gallery-filters button.is-active .gallery-filter-count{ background:rgba(255,255,255,0.24); color:#fff; }

/* Filtered view: drop the mosaic spans so the remaining tiles stay even. */
.gallery-grid.is-filtered{ grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); grid-auto-rows:230px; }
.gallery-grid.is-filtered .ph{ grid-column:auto; grid-row:auto; }

/* gallery: tiles — scrim, category chip, zoom cue */
.gallery-grid .ph{ cursor:pointer; transition:box-shadow .3s ease, transform .3s ease; }
.gallery-grid .ph:hover{ box-shadow:0 26px 46px -18px rgba(28,24,16,0.45); transform:translateY(-4px); }
.gallery-grid .ph:hover > img{ transform:scale(1.08); }

/* Only the bottom third is shaded at rest, so the photo stays the hero and the
   caption still has something to sit on. */
.ph-scrim{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(20,17,12,0) 55%, rgba(20,17,12,0.58) 88%, rgba(20,17,12,0.78) 100%); transition:background .35s ease; }
.gallery-grid .ph:hover .ph-scrim{ background:linear-gradient(180deg, rgba(20,17,12,0.1) 0%, rgba(20,17,12,0.5) 55%, rgba(20,17,12,0.85) 100%); }

.ph-cat{ position:absolute; top:14px; left:14px; z-index:2; background:rgba(255,255,255,0.92); color:var(--ink); font-size:10.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; padding:5px 11px; border-radius:100px; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }

.ph-zoom{ position:absolute; top:14px; right:14px; z-index:2; width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,0.94); color:var(--orange-deep); opacity:0; transform:scale(.75) rotate(-25deg); transition:opacity .3s ease, transform .3s ease; box-shadow:0 6px 16px -6px rgba(0,0,0,0.4); }
.gallery-grid .ph:hover .ph-zoom{ opacity:1; transform:scale(1) rotate(0); }

/* empty tile (no featured image yet) */
.ph.is-empty{ background:linear-gradient(150deg, var(--paper-2), var(--paper-3)); }
.ph.is-empty em{ color:var(--ink-soft); text-shadow:none; }
.ph.is-empty .ph-scrim, .ph.is-empty .ph-zoom{ display:none; }

/* gallery footer */
.gallery-foot{ display:flex; flex-direction:column; align-items:center; gap:14px; margin-top:34px; }
.gallery-more{ font-size:13.5px; color:var(--ink-soft); font-weight:600; }

/* lightbox */
.lightbox{ position:fixed; inset:0; z-index:100; display:none; align-items:center; justify-content:center; background:rgba(20,17,12,0.86); padding:30px; }
.lightbox.is-open{ display:flex; }
.lightbox-frame{ max-width:900px; width:100%; }
.lightbox-frame img{ width:100%; max-height:78vh; object-fit:contain; border-radius:16px; }
.lightbox-caption{ color:#fff; text-align:center; margin-top:14px; font-size:14px; }
.lightbox-close{ position:absolute; top:22px; right:26px; width:42px; height:42px; border-radius:50%; border:none; background:rgba(255,255,255,0.14); color:#fff; font-size:24px; line-height:1; cursor:pointer; z-index:2; }
.lightbox-close:hover{ background:rgba(255,255,255,0.24); }
.lightbox-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:50px; height:50px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(255,255,255,0.14); color:#fff; font-size:30px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s ease;
}
.lightbox-nav:hover{ background:rgba(255,255,255,0.28); }
.lightbox-prev{ left:22px; }
.lightbox-next{ right:22px; }
.lightbox-counter{ color:rgba(255,255,255,0.65); text-align:center; margin-top:6px; font-size:12.5px; letter-spacing:.05em; }

/* album photo-count badge on a tile */
.ph-count{
  position:absolute; bottom:14px; right:14px; z-index:2;
  display:inline-flex; align-items:center; gap:5px;
  background:rgba(255,255,255,0.92); color:var(--ink);
  font-size:11.5px; font-weight:800; padding:5px 10px; border-radius:100px;
}
.ph-count::before{ content:""; width:11px; height:11px; border-radius:2px; border:1.5px solid currentColor; box-shadow:2.5px -2.5px 0 -1.5px currentColor; }

/* video play badge on gallery tiles */
.ph-video-badge{
  position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); z-index:3;
  width:48px; height:48px; border-radius:50%;
  background:rgba(210,136,74,0.92); color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 6px 20px rgba(0,0,0,0.3);
  transition:all .3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ph:hover .ph-video-badge{ transform:translate(-50%, -50%) scale(1.15); background:var(--primary, #d2884a); }

/* ---------------------------------------------------------------------
 * Video Showcase Section
 * ------------------------------------------------------------------- */
.video-section{ position:relative; overflow:hidden; }
.video-hero-card{
  position:relative; width:100%; border-radius:24px; overflow:hidden;
  background:#1e293b; box-shadow:0 20px 40px -12px rgba(15,23,42,0.25);
  cursor:pointer; transition:transform .3s ease, box-shadow .3s ease;
}
.video-hero-card:hover{ transform:translateY(-4px); box-shadow:0 26px 50px -12px rgba(15,23,42,0.35); }

.video-poster-wrapper{ position:relative; width:100%; aspect-ratio:16/9; max-height:520px; overflow:hidden; background:#0f172a; }
.video-poster-img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease; }
.video-hero-card:hover .video-poster-img{ transform:scale(1.04); }

.video-overlay-gradient{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(15,23,42,0.2) 0%, rgba(15,23,42,0.7) 100%);
  pointer-events:none;
}

.video-badge-pill{
  position:absolute; top:20px; left:20px; z-index:2;
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,0.92); backdrop-filter:blur(8px);
  color:#0f172a; font-size:12px; font-weight:700; padding:6px 14px; border-radius:100px;
  box-shadow:0 4px 12px rgba(0,0,0,0.15);
}

.video-play-btn{
  position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); z-index:3;
  width:76px; height:76px; border-radius:50%; border:none;
  background:#d2884a; color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 30px rgba(210,136,74,0.5);
  transition:all .3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.video-hero-card:hover .video-play-btn{ transform:translate(-50%, -50%) scale(1.12); background:#b87034; }

.video-play-pulse{
  position:absolute; inset:-8px; border-radius:50%;
  border:2px solid rgba(210,136,74,0.6);
  animation:videoPulse 2s infinite; pointer-events:none;
}
@keyframes videoPulse{
  0%{ transform:scale(0.95); opacity:1; }
  100%{ transform:scale(1.35); opacity:0; }
}

.video-card-content{ padding:24px 30px; background:#fff; border-top:1px solid #f1f5f9; }
.video-card-title{ margin:0 0 8px 0; font-size:22px; font-weight:800; color:#0f172a; line-height:1.3; }
.video-card-caption{ margin:0; font-size:14.5px; color:#64748b; line-height:1.6; }

.video-grid-heading{ margin:40px 0 20px 0; }
.video-grid-heading h4{ font-size:18px; font-weight:800; color:#0f172a; margin:0; }

.video-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:20px; }
.video-tile{
  position:relative; background:#fff; border-radius:16px; overflow:hidden;
  box-shadow:0 4px 14px rgba(0,0,0,0.06); cursor:pointer;
  transition:transform .25s ease, box-shadow .25s ease;
}
.video-tile:hover{ transform:translateY(-3px); box-shadow:0 10px 24px rgba(0,0,0,0.12); }
.video-tile-thumb{ position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; background:#1e293b; }
.video-tile-thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; }
.video-tile:hover .video-tile-thumb img{ transform:scale(1.05); }

.video-tile-badge{
  position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); z-index:2;
  width:40px; height:40px; border-radius:50%; background:rgba(210,136,74,0.9);
  color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 12px rgba(0,0,0,0.25); transition:transform .3s ease;
}
.video-tile:hover .video-tile-badge{ transform:translate(-50%, -50%) scale(1.12); }

.video-tile-info{ padding:14px 16px; }
.video-tile-info h5{ margin:0 0 4px 0; font-size:14.5px; font-weight:700; color:#0f172a; }
.video-tile-info p{ margin:0; font-size:12.5px; color:#64748b; }

@media (max-width:560px){
  .lightbox-nav{ width:42px; height:42px; font-size:24px; }
  .lightbox-prev{ left:8px; }
  .lightbox-next{ right:8px; }
}

@media (max-width:880px){
  .a-hero-grid, .a-contact-panel, .founder-intro{ grid-template-columns:1fr; }
  .arch-grid{ grid-template-columns:1fr 1fr; }
  .arch-connector{ display:none; }
  .a-collage, .a-hero-clean{ height:340px; }
  .founder-intro{ padding:36px 26px; gap:36px; }
  .staff-hero{ grid-template-columns:1fr; gap:34px; }
  .staff-photo{ height:320px; }
  .founder-photo{ height:260px; }
  .founder-footer{ align-items:flex-start; }

  .hero-grid, .about-grid{ grid-template-columns:1fr; }
  .about-art{ height:360px; }
  .hero-art{ height:320px; margin-top:10px; }
  .feat-grid, .programs-grid, .testi-grid, .team-grid{ grid-template-columns:1fr 1fr; }
  .stats-inner{ grid-template-columns:1fr 1fr; gap:30px 16px; }
  .stat-item:nth-child(2)::after{ display:none; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
  .faq-layout{ grid-template-columns:1fr; gap:34px; }
  .faq-aside{ position:static; }
  .a-contact-panel{ padding:36px 26px; gap:34px; }
  .site-footer{ padding-top:52px; margin-top:0; }
  .foot-cta{ padding:34px 28px; margin:0 0 44px; }
  .testi-slide{ flex-basis:clamp(260px, 74%, 380px); }
  /* Two columns: keep one wide feature tile per band, everything else square. */
  .gallery-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:180px; }
  .g1{ grid-column:span 2; grid-row:span 2; }
  .g2,.g3,.g4{ grid-column:span 1; grid-row:span 1; }
  .g5,.g6{ grid-column:span 2; grid-row:span 1; }
  nav.links{ display:none; }
  .header-cta{ display:none; }
  .menu-toggle{ display:flex; }
  .top-bar-inner{ padding:8px 16px; }
  .top-bar-social{ display:none; }
}

/* On a phone the phone number, the email and the announcement can't share one
   row — the announcement was running past the right edge. Letting the row wrap
   puts the announcement on its own line and keeps both contact links. */
@media (max-width:640px){
  .top-bar-inner, .top-bar-inner.has-message{ flex-wrap:wrap; justify-content:center; gap:4px 16px; }
  .top-bar-message-wrap{ flex:1 1 100%; min-width:0; text-align:center !important; }
  .top-bar-message{ display:inline-flex; max-width:100%; }
}
@media (max-width:560px){
  .feat-grid, .programs-grid, .testi-grid, .foot-grid, .check-list, .team-grid, .arch-grid, .a-support-row, .founder-points, .a-form-grid, .about-points{ grid-template-columns:1fr; }
  .cta-band{ flex-direction:column; text-align:center; }
  .gallery-grid{ grid-template-columns:1fr 1fr; grid-auto-rows:150px; gap:12px; }
  .gallery-grid .ph{ border-radius:16px; }
  .ph em{ font-size:12.5px; margin:12px; }
  .stats-inner{ grid-template-columns:1fr; }
  .stat-item::after{ display:none; }
  .a-quick-card{ padding:26px 22px; }
  .foot-cta{ flex-direction:column; align-items:flex-start; }
}

/* ---------------------------------------------------------------------
 * Events — archive list, cards, and single view
 * ------------------------------------------------------------------- */
.events-group-title{ font-size:15px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 20px; }
.events-group-past{ margin-top:48px; }
.events-list{ display:grid; gap:16px; }
.events-list.is-past{ opacity:.82; }

.event-card{
  display:flex; align-items:center; gap:22px;
  background:var(--card); border:1px solid var(--line); border-radius:20px;
  padding:20px 24px; text-decoration:none; color:inherit;
  box-shadow:0 12px 26px -20px rgba(28,24,16,0.22);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.event-card:hover{ transform:translateY(-3px); box-shadow:0 20px 34px -18px rgba(28,24,16,0.28); border-color:var(--orange); }

.event-date{
  flex-shrink:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:76px; height:82px; border-radius:16px;
  background:linear-gradient(155deg, var(--orange), var(--orange-deep)); color:#fff;
  box-shadow:0 10px 20px -12px var(--orange-deep);
}
.event-month{ font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; opacity:.9; }
.event-day{ font-size:27px; font-weight:800; line-height:1.05; font-family:ui-rounded,"SF Pro Rounded","Segoe UI Rounded",sans-serif; }
.event-year{ font-size:10px; letter-spacing:.06em; opacity:.75; }

.event-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
.event-title{ font-size:17px; font-weight:800; color:var(--heading); line-height:1.3; }
.event-meta{ display:flex; flex-wrap:wrap; gap:16px; font-size:12.5px; color:var(--ink-soft); }
.event-meta span{ display:inline-flex; align-items:center; gap:6px; }
.event-excerpt{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; }
.event-arrow{
  flex-shrink:0; display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%; background:var(--orange-tint); color:var(--orange-deep);
  opacity:0; transform:translateX(-6px); transition:opacity .22s ease, transform .22s ease;
}
.event-card:hover .event-arrow{ opacity:1; transform:translateX(0); }

/* single event */
.event-single-head{ display:flex; align-items:flex-start; gap:26px; margin-top:18px; }
.event-date-lg{ width:96px; height:104px; border-radius:20px; }
.event-date-lg .event-day{ font-size:34px; }
.event-date-lg .event-month{ font-size:12px; }
.event-single-copy{ flex:1; min-width:0; }
.event-single-head h1{ font-size:clamp(28px,3.6vw,42px); line-height:1.15; margin:0 0 14px; }
.event-single-meta{ display:flex; flex-wrap:wrap; gap:22px; font-size:14.5px; color:var(--ink-soft); }
.event-single-meta span{ display:inline-flex; align-items:center; gap:8px; }
.event-badge-past{ display:inline-block; background:var(--paper-3); color:var(--ink-soft); font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; padding:6px 14px; border-radius:100px; margin:0 0 12px; }
.event-badge-upcoming{ display:inline-block; background:var(--green-tint); color:var(--green-deep); font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; padding:6px 14px; border-radius:100px; margin:0 0 12px; }

/* two-column body: description beside a details card */
.event-single-layout{ display:grid; grid-template-columns:1.55fr 0.95fr; gap:44px; align-items:start; }
.event-single-image{ width:100%; border-radius:24px; margin-bottom:28px; box-shadow:var(--shadow); }

/* readable placeholder for events that have no description yet */
.event-empty{ background:var(--card); border:1px dashed var(--line); border-radius:22px; padding:38px 32px; text-align:center; }
.event-empty-ic{ display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:50%; background:var(--orange-tint); color:var(--orange-deep); margin-bottom:16px; }
.event-empty h2{ font-size:19px; margin:0 0 8px; }
.event-empty p{ font-size:14.5px; color:var(--ink-soft); line-height:1.7; margin:0 auto; max-width:44ch; }

/* details card */
.event-single-aside{ position:sticky; top:120px; }
.event-info-card{ background:var(--card); border:1px solid var(--line); border-radius:24px; padding:28px 26px; box-shadow:0 18px 40px -26px rgba(28,24,16,0.3); }
.event-info-card h3{ font-size:17px; margin:0 0 20px; padding-bottom:14px; border-bottom:1px solid var(--line); }
.event-info-list{ list-style:none; margin:0 0 24px; padding:0; display:grid; gap:18px; }
.event-info-list li{ display:flex; gap:13px; align-items:flex-start; }
.event-info-ic{ flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:11px; background:var(--orange-tint); color:var(--orange-deep); }
.event-info-list b{ display:block; font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:3px; }
.event-info-list span span,
.event-info-list li > span:last-child{ font-size:14px; line-height:1.5; color:var(--ink); }
.event-info-list a{ color:var(--ink); text-decoration:none; }
.event-info-list a:hover{ color:var(--orange-deep); }
.event-info-cta{ display:flex; align-items:center; justify-content:center; gap:9px; width:100%; }
.event-info-cta:hover{ gap:13px; }
.event-info-mail{ display:flex; align-items:center; justify-content:center; gap:7px; margin-top:14px; font-size:12.5px; color:var(--ink-soft); text-decoration:none; }
.event-info-mail:hover{ color:var(--orange-deep); }

@media (max-width:560px){
  .event-card{ flex-wrap:wrap; gap:16px; padding:18px; }
  .event-arrow{ display:none; }
  .event-single-head{ flex-direction:column; gap:18px; }
}
@media (max-width:880px){
  .event-single-layout{ grid-template-columns:1fr; gap:32px; }
  .event-single-aside{ position:static; }
}

/* ---------------------------------------------------------------------
 * Inner-page hero — one shared treatment for every archive and single
 * view, so the sticky header always floats over the same tone.
 * ------------------------------------------------------------------- */
/* Decoration here is painted as background layers rather than positioned
   shapes, so nothing can be clipped by the section box and leave a hard edge. */
.page-hero{
  position:relative;
  padding-top:52px; padding-bottom:62px;
  border-bottom:1px solid var(--line);
  /* the border is dropped again below when a wave divider follows */
  background-color:var(--paper);
  background-image:
    radial-gradient(120% 90% at 88% -30%, var(--green-tint) 0%, transparent 62%),
    radial-gradient(90% 80% at -10% 120%, var(--orange-tint) 0%, transparent 60%);
  background-repeat:no-repeat;
}
.page-hero > .wrap{ position:relative; z-index:1; max-width:1160px; }
/* When the next section is a different tone the renderer inserts a wave
   divider, and the hero's hairline then sat directly above it — a hard rule and
   a soft wave stacked on top of each other. Let the wave be the only edge. */
.page-hero:has(+ .wavy-divider-wrap){ border-bottom:0; }

/* breadcrumbs */
.crumbs{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; font-size:12.5px; margin-bottom:20px; color:var(--ink-soft); }
.crumbs a{ color:var(--ink-soft); text-decoration:none; transition:color .18s ease; }
.crumbs a:hover{ color:var(--orange-deep); }
.crumbs span[aria-current]{ color:var(--ink); font-weight:700; }
.crumbs-sep{ opacity:.45; }

.page-hero h1{
  font-size:clamp(30px,4.2vw,50px);
  line-height:1.08;
  letter-spacing:-.015em;
  margin:0 0 16px;
  max-width:18ch;
}
.page-hero > .wrap > p{ color:var(--ink-soft); font-size:16.5px; line-height:1.75; margin:0; max-width:56ch; }
.page-hero .a-eyebrow{ margin-bottom:16px; }

/* Archives put their intro in a .section-head, which centres itself. Inside the
   hero let the alignment setting drive it instead. */
.page-hero .section-head{ text-align:inherit; max-width:none; margin-left:0; margin-right:0; }
.hero-align-center .page-hero .section-head,
.hero-align-right .page-hero .section-head{ max-width:640px; }
.hero-align-center .page-hero .section-head{ margin-left:auto; margin-right:auto; }
.hero-align-right .page-hero .section-head{ margin-left:auto; margin-right:0; }

/* Alignment comes from Customize → Page Headers, applied via a body class so
   one setting covers every template that uses .page-hero. */
.hero-align-center .page-hero > .wrap{ text-align:center; }
.hero-align-center .page-hero h1,
.hero-align-center .page-hero > .wrap > p{ margin-left:auto; margin-right:auto; }
.hero-align-center .page-hero .crumbs{ justify-content:center; }
.hero-align-center .page-hero h1::after{ margin-left:auto; margin-right:auto; }

.hero-align-right .page-hero > .wrap{ text-align:right; }
.hero-align-right .page-hero h1,
.hero-align-right .page-hero > .wrap > p{ margin-left:auto; margin-right:0; }
.hero-align-right .page-hero .crumbs{ justify-content:flex-end; }
.hero-align-right .page-hero h1::after{ margin-left:auto; margin-right:0; }

/* The staff single lays its hero out in two columns, so the global alignment
   setting would fight the layout — pin the whole thing left. Without the crumb
   and rule overrides the breadcrumb and the accent bar stayed centred while
   everything beside them sat left. */
.hero-align-center .staff-hero-section,
.hero-align-right .staff-hero-section,
.hero-align-center .page-hero .staff-hero,
.hero-align-right .page-hero .staff-hero{ text-align:left; }
.hero-align-center .staff-hero-section .crumbs,
.hero-align-right .staff-hero-section .crumbs{ justify-content:flex-start; }
/* The h1 carries a max-width, so the centre setting was centring it as a block
   even once the text alignment had been pinned left. */
.hero-align-center .staff-hero-section h1,
.hero-align-right .staff-hero-section h1,
.hero-align-center .staff-hero-section h1::after,
.hero-align-right .staff-hero-section h1::after{ margin-left:0; margin-right:0; }

/* a short accent rule under the title, in place of a heavier flourish */
.page-hero h1::after{
  content:""; display:block; width:56px; height:4px; border-radius:4px; margin-top:20px;
  background:linear-gradient(90deg, var(--orange), var(--gold));
}
.page-hero .section-head{ margin-bottom:0; }
.page-hero .section-head h1{ max-width:none; }

@media (max-width:560px){
  .page-hero{ padding-top:36px; padding-bottom:44px; }
  .page-hero h1{ max-width:none; }
}

/* album single */
.album-head{ margin-top:6px; }
.album-count{ display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:700; color:var(--orange-deep); margin:0; }
.album-grid{ margin-bottom:34px; }
.album-copy{ max-width:70ch; }

/* Default page body */
.page-body{ max-width:800px; margin:0 auto; }
.page-thumb{ width:100%; border-radius:24px; margin-bottom:32px; box-shadow:var(--shadow); }

/* ---------------------------------------------------------------------
 * Inner-page building blocks: value cards, subject chips, daily timeline
 * ------------------------------------------------------------------- */
.values-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.value-card{
  --accent: var(--green); --accent-deep: var(--green-deep); --accent-tint: var(--green-tint);
  background:var(--card); border:1px solid var(--line); border-radius:22px;
  padding:28px 26px;
  box-shadow:0 14px 30px -22px rgba(28,24,16,0.24);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.value-card:hover{ transform:translateY(-4px); box-shadow:0 22px 38px -20px rgba(28,24,16,0.3); border-color:var(--accent); }
.value-card.accent-1{ --accent:var(--orange); --accent-deep:var(--orange-deep); --accent-tint:var(--orange-tint); }
.value-card.accent-2{ --accent:var(--gold); --accent-deep:#9C6A10; --accent-tint:var(--gold-tint); }
.value-card.accent-3{ --accent:var(--navy); --accent-deep:var(--navy); --accent-tint:var(--navy-tint); }
.value-ic{
  display:inline-flex; align-items:center; justify-content:center;
  width:54px; height:54px; border-radius:16px; margin-bottom:18px;
  background:linear-gradient(155deg, var(--accent), var(--accent-deep)); color:#fff;
  box-shadow:0 10px 20px -10px var(--accent);
  transition:transform .25s ease;
}
.value-card:hover .value-ic{ transform:scale(1.07) rotate(-4deg); }
.value-card h3{ font-size:17px; margin:0 0 9px; }
.value-card p{ font-size:14px; color:var(--ink-soft); line-height:1.7; margin:0; }

.subject-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.subject-chip{
  display:flex; align-items:center; gap:11px;
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:14px 16px; font-size:13.5px; font-weight:600; line-height:1.35;
  transition:transform .2s ease, border-color .2s ease;
}
.subject-chip:hover{ transform:translateY(-2px); border-color:var(--orange); }
.subject-ic{
  flex-shrink:0; display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:11px;
  background:var(--orange-tint); color:var(--orange-deep);
}

.daily-layout{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:56px; align-items:start; }
.daily-copy h2{ font-size:clamp(24px,3vw,32px); margin:6px 0 14px; }
.daily-copy p{ color:var(--ink-soft); font-size:15.5px; line-height:1.75; margin:0; max-width:40ch; }
.daily-timeline{ list-style:none; margin:0; padding:0 0 0 22px; position:relative; }
.daily-timeline::before{ content:""; position:absolute; left:5px; top:10px; bottom:10px; width:2px; background:var(--line); }
.daily-timeline li{ position:relative; display:flex; gap:18px; align-items:baseline; padding:12px 0; }
.daily-timeline li::before{
  content:""; position:absolute; left:-22px; top:19px;
  width:12px; height:12px; border-radius:50%;
  background:var(--card); border:2.5px solid var(--orange);
}
.daily-time{ flex-shrink:0; width:64px; font-size:13px; font-weight:800; color:var(--orange-deep); font-variant-numeric:tabular-nums; }
.daily-what{ font-size:14.5px; color:var(--ink); line-height:1.5; }

@media (max-width:880px){
  .subject-grid{ grid-template-columns:repeat(2,1fr); }
  .daily-layout{ grid-template-columns:1fr; gap:32px; }
}
@media (max-width:560px){
  .values-grid{ grid-template-columns:1fr; }
  .subject-grid{ grid-template-columns:1fr; }
}

/* Admissions steps */
.steps-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.step-card{
  position:relative; background:var(--card); border:1px solid var(--line);
  border-radius:22px; padding:30px 24px 26px;
  box-shadow:0 14px 30px -22px rgba(28,24,16,0.24);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.step-card:hover{ transform:translateY(-4px); box-shadow:0 22px 38px -20px rgba(28,24,16,0.3); border-color:var(--orange); }
.step-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:14px; margin-bottom:16px;
  background:linear-gradient(155deg, var(--orange), var(--orange-deep)); color:#fff;
  font-size:15px; font-weight:800; letter-spacing:.02em;
  box-shadow:0 10px 20px -10px var(--orange-deep);
}
.step-card h3{ font-size:16.5px; margin:0 0 8px; }
.step-card p{ font-size:13.5px; color:var(--ink-soft); line-height:1.65; margin:0; }

@media (max-width:880px){ .steps-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .steps-grid{ grid-template-columns:1fr; } }

/* Search results / generic archive listing */
.search-results{ display:grid; gap:16px; }
.search-result{
  display:block; text-decoration:none; color:inherit;
  background:var(--card); border:1px solid var(--line); border-radius:20px;
  padding:24px 26px;
  box-shadow:0 12px 26px -22px rgba(28,24,16,0.22);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.search-result:hover{ transform:translateY(-3px); box-shadow:0 20px 34px -20px rgba(28,24,16,0.28); border-color:var(--orange); }
.search-type{ display:inline-block; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--orange-deep); background:var(--orange-tint); padding:5px 11px; border-radius:100px; margin-bottom:12px; }
.search-result h2{ font-size:19px; margin:0 0 8px; }
.search-result p{ font-size:14px; color:var(--ink-soft); line-height:1.65; margin:0; }

.error-search{ max-width:460px; margin:36px auto 0; }
.error-search form{ display:flex; gap:10px; }
.error-search label{ flex:1; margin:0; }
.error-search input[type="search"]{
  width:100%; padding:12px 16px; border-radius:100px;
  border:1.5px solid var(--line); background:var(--card);
  color:var(--ink); font-family:inherit; font-size:14.5px;
}
.error-search input[type="search"]:focus{ outline:none; border-color:var(--green-deep); box-shadow:0 0 0 3px var(--green-tint); }
.error-search input[type="submit"]{
  border:none; cursor:pointer; border-radius:100px; padding:12px 24px;
  background:var(--orange); color:#fff; font-family:inherit; font-weight:700; font-size:14px;
}

/* 404 cards are links, so keep the heading colour from turning into link blue */
.error-page .value-card{ text-decoration:none; color:inherit; display:block; }

/* ---------------------------------------------------------------------
 * Map — embedded location, plus the "get directions" links that appear
 * anywhere the address is shown.
 * ------------------------------------------------------------------- */
.map-frame{
  position:relative;
  border-radius:24px;
  overflow:hidden;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  background:var(--paper-2);
  /* A fixed ratio keeps the embed from collapsing before it loads. */
  aspect-ratio:16 / 7;
}
.map-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
.map-actions{ margin:22px 0 0; text-align:center; }

.a-contact-map,
.foot-map{
  display:inline-flex; align-items:center; gap:5px;
  margin-top:6px;
  font-size:13px; font-weight:700;
  color:var(--orange-deep); text-decoration:none;
  border-bottom:1.5px solid transparent;
  transition:color .2s ease, border-color .2s ease, gap .25s cubic-bezier(.2,.7,.3,1);
}
.a-contact-map:hover,
.foot-map:hover{ color:var(--orange); border-color:var(--orange); gap:8px; }
.a-contact-map:focus-visible,
.foot-map:focus-visible{ outline:2px solid var(--orange-deep); outline-offset:3px; border-radius:3px; }
.foot-map{ display:block; margin-top:4px; }

@media (max-width:640px){
  .map-frame{ aspect-ratio:4 / 3; border-radius:18px; }
}
@media (prefers-reduced-motion: reduce){
  .a-contact-map, .foot-map{ transition-duration:.01ms; }
  .a-contact-map:hover, .foot-map:hover{ gap:5px; }
}

/* Lightbox video: the frame is sized here rather than inline, so an embed and a
   photo share the same box and swapping between them doesn't jump. */
/* The frame follows the video's own shape. Width is capped by the viewport and
   by height, so a 9:16 reel gets tall-and-narrow instead of a 16:9 box with
   black bars, and neither shape can run off the bottom of the screen. */
.lightbox-video-box{
  --lb-ar: 1.7778;
  display:none;
  aspect-ratio:var(--lb-ar);
  /* Capped against the viewport rather than the parent: a percentage would
     inherit whatever width the frame happens to have, while vw/vh always mean
     the screen. */
  width:min(92vw, 1000px, calc(76vh * var(--lb-ar)));
  max-height:76vh;
  margin:0 auto;
}
.lightbox-video-box iframe,
.lightbox-video-box video{ width:100%; height:100%; border:0; border-radius:12px; display:block; background:#000; }

/* The album tile's count now reads "12 photos · 2 videos" rather than a bare
   number, so it needs room and its own pill rather than a circle. */
.ph-count{
  min-width:0; width:auto; height:auto;
  padding:5px 11px; border-radius:100px;
  font-size:11.5px; font-weight:700; letter-spacing:.01em;
  white-space:nowrap;
}
/* The stacked-photos glyph made sense beside a bare number; beside "5 photos"
   it reads as a stray box. */
.ph-count::before{ display:none; }
.gallery-filters button svg{ flex:0 0 auto; }