/* ============================================================================
   AURA — CONTENT PAGES (about / contact / schools) — Clean-agency skin.
   Loaded AFTER aura.css + app-shell.css, so these page-specific rules win.
   Foundations come from aura.css and are NOT redefined here:
     - tokens (--ink/--paper/--marigold-deep/--teal/--disp/--body/--mono/--ease/
       --sh-1/--sh-2/--radius ...)
     - base components (.btn/.btn--solid/.btn--ghost/.card/.chip/.eyebrow/
       .field/.input/.label/.glass-nav/.reveal/.wrap/.sec)
     - shared clean chrome scoped to `.home` (glass nav, footer, cursor,
       floating glass-cta, ambient glow + grain)
   Every rule below is scoped to a page class (.about/.contact/.schools) or a
   page-local component class, so nothing leaks into home or the portal.
   Breakpoint 900px (native-app under). Motion is transform/opacity only.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   SHARED CONTENT-PAGE PRIMITIVES
   ------------------------------------------------------------------------- */
.about main, .contact main, .schools main{ display:block; }

/* page hero */
.page-hero{ padding-top:clamp(34px,6vw,74px); padding-bottom:clamp(26px,4vw,48px); position:relative; }
.page-hero .crumb{ display:flex; align-items:center; gap:9px; font-family:var(--mono);
  font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint);
  margin-bottom:clamp(16px,2.4vw,26px); }
.page-hero .crumb a{ color:var(--ink-faint); transition:color .2s var(--ease); }
.page-hero .crumb a:hover{ color:var(--marigold-deep); }
.page-hero .crumb .sep{ opacity:.5; }
.page-hero h1{ font-size:clamp(38px,7.4vw,84px); line-height:1.0; letter-spacing:-.03em; max-width:15ch; }
.page-hero h1 em{ font-style:italic; color:var(--marigold-deep); }
.page-hero .hero-foot{ display:flex; align-items:flex-end; justify-content:space-between;
  gap:clamp(18px,3vw,40px); flex-wrap:wrap; margin-top:clamp(20px,3vw,34px); }
.page-hero .hero-foot .lead{ max-width:54ch; }
.page-hero .folio{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-faint); white-space:nowrap; padding-bottom:4px; }

/* section heads */
.p-head{ max-width:720px; margin-bottom:clamp(26px,4vw,46px); }
.p-head .eyebrow{ margin-bottom:14px; }
.p-head h2{ margin:0; }
.p-head h2 em{ font-style:italic; color:var(--marigold-deep); }
.p-head .lead{ margin-top:16px; }
.p-runhead{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding-bottom:14px; margin-bottom:clamp(22px,3vw,40px); border-bottom:1px solid var(--line); }
.p-runhead .eyebrow{ margin:0; }
.p-runhead h2{ margin:0; font-size:clamp(23px,3.2vw,38px); }
.p-runhead .note{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-faint); }

/* card grids — auto-fit so they never overflow a 360px viewport */
.p-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:16px; }
.p-cards--2{ grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); }

/* a plain feature card body (used inside base .card) */
.fcard .k{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--marigold-deep); font-weight:600; margin-bottom:14px; display:block; }
.fcard h3{ font-size:clamp(19px,1.9vw,24px); line-height:1.15; margin-bottom:10px; }
.fcard p{ color:var(--ink-soft); font-size:15px; line-height:1.55; }

/* long-form prose */
.prose{ max-width:64ch; }
.prose p{ font-size:clamp(16px,1.35vw,18px); line-height:1.7; color:var(--ink-soft); margin-bottom:20px; }
.prose p:last-child{ margin-bottom:0; }
.prose strong{ color:var(--ink); font-weight:600; }

/* dark feature band */
.ink-band{ position:relative; overflow:hidden; background:linear-gradient(165deg,var(--ink),var(--deep));
  color:var(--paper); border-radius:26px; padding:clamp(28px,5vw,64px); box-shadow:var(--sh-2); }
.ink-band .eyebrow{ color:var(--marigold); }
.ink-band h2{ color:var(--paper); }
.ink-band h2 em{ font-style:italic; color:var(--marigold); }
.ink-band .p-runhead{ border-color:rgba(251,250,247,.18); }
.ink-band .p-runhead .note{ color:rgba(251,250,247,.5); }
.ink-card{ background:rgba(251,250,247,.045); border:1px solid rgba(251,250,247,.12); border-radius:16px;
  padding:clamp(20px,2.4vw,28px); transition:transform .25s var(--ease), background .25s var(--ease); }
.ink-card:hover{ transform:translateY(-3px); background:rgba(251,250,247,.08); }
.ink-card .k{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--marigold); font-weight:600; margin-bottom:12px; display:block; }
.ink-card h2, .ink-card h3{ color:var(--paper); font-size:clamp(18px,1.7vw,22px); margin-bottom:8px; }
.ink-card p{ color:rgba(251,250,247,.72); font-size:14.5px; line-height:1.55; }

/* cta rows + underline link */
.cta-row{ display:flex; gap:16px 20px; align-items:center; flex-wrap:wrap; margin-top:clamp(26px,3.2vw,42px); }
.ink-band .link-u{ color:var(--marigold); }
.ink-band .link-u:hover{ border-bottom-color:var(--marigold); }

/* closing CTA band */
.cta-band{ text-align:center; }
.cta-band .eyebrow{ margin-bottom:14px; }
.cta-band h2{ font-size:clamp(30px,5.4vw,58px); letter-spacing:-.025em; line-height:1.02; max-width:17ch; margin:0 auto; }
.cta-band h2 em{ font-style:italic; color:var(--marigold-deep); }
.cta-band p{ margin:18px auto 0; max-width:48ch; color:var(--ink-soft); }
.cta-band .cta-row{ justify-content:center; }

/* ---------------------------------------------------------------------------
   ABOUT
   ------------------------------------------------------------------------- */
.about .founder-grid{ display:grid; grid-template-columns:.72fr 2fr; gap:clamp(20px,3vw,48px);
  align-items:start; margin-top:clamp(30px,4vw,54px); }
.about .fpanel{ position:relative; overflow:hidden; aspect-ratio:4/5; border-radius:20px;
  background:linear-gradient(165deg,var(--ink),var(--deep)); color:var(--paper); padding:20px;
  display:flex; flex-direction:column; justify-content:space-between; box-shadow:var(--sh-2); }
.about .fpanel .cap{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(251,250,247,.6); position:relative; z-index:2; }
.about .fpanel .initial{ position:absolute; left:50%; top:52%; transform:translate(-50%,-50%);
  font-family:var(--disp); font-weight:700; font-size:clamp(120px,16vw,220px); line-height:.7;
  color:rgba(251,250,247,.09); }
.about .fnote{ font-size:clamp(15px,1.2vw,17.5px); line-height:1.7; color:var(--ink-soft); }
.about .fnote .sig{ display:block; font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink); margin-top:20px; }

.about .founder-quote{ position:relative; overflow:hidden; text-align:center;
  background:linear-gradient(150deg,var(--plum),var(--ink)); color:var(--paper); border-radius:26px;
  padding:clamp(38px,6vw,88px) clamp(24px,4vw,60px); box-shadow:var(--sh-2); }
.about .founder-quote .qmark{ font-family:var(--disp); font-weight:700; font-size:clamp(84px,12vw,132px);
  line-height:.5; color:var(--marigold); opacity:.4; height:.44em; }
.about .founder-quote blockquote{ font-family:var(--disp); font-weight:500; font-size:clamp(24px,3.6vw,42px);
  line-height:1.18; letter-spacing:-.02em; max-width:22ch; margin:clamp(18px,2.4vw,28px) auto 0; }
.about .founder-quote blockquote em{ font-style:italic; color:var(--marigold); }
.about .founder-quote figcaption{ font-family:var(--mono); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(251,250,247,.6); margin-top:22px; }

@media (max-width:760px){
  .about .founder-grid{ grid-template-columns:1fr; }
}

/* ---------------------------------------------------------------------------
   CONTACT
   ------------------------------------------------------------------------- */
.contact .contact-grid{ display:grid; grid-template-columns:1.35fr .95fr; gap:clamp(20px,3vw,40px);
  align-items:start; }
.contact .form-card{ padding:clamp(22px,3vw,36px); }
.contact .form-card:hover, .contact .reach:hover{ transform:none; box-shadow:var(--sh-1); }
.contact .form-card:active, .contact .reach:active{ transform:none; box-shadow:var(--sh-1); }
.contact .form-card .eyebrow{ display:block; margin-bottom:12px; }
.contact .form-card h2{ font-size:clamp(24px,3vw,36px); margin-bottom:clamp(18px,2.6vw,28px); }

/* Restyle the JS-generated lead form (.lead / .lead-row / label / .btn-red) to
   the clean skin. The form markup is produced by aura.js and moved in here, so
   we style it in place rather than changing its structure. */
.contact #leadForm{ display:flex; flex-direction:column; gap:16px; max-width:100%; }
.contact #leadForm .lead-row{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; }
.contact #leadForm label{ display:flex; flex-direction:column; gap:8px; font-family:var(--mono);
  font-size:12px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); }
.contact #leadForm .opt{ text-transform:none; letter-spacing:0; font-weight:400; color:var(--ink-faint); }
.contact #leadForm input,
.contact #leadForm select,
.contact #leadForm textarea{ width:100%; min-width:0; font-family:var(--body); font-size:16px; color:var(--ink);
  line-height:1.3; background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:14px 16px; min-height:48px; transition:border-color .2s var(--ease), box-shadow .2s var(--ease); }
.contact #leadForm textarea{ min-height:120px; resize:vertical; }
.contact #leadForm input:focus,
.contact #leadForm select:focus,
.contact #leadForm textarea:focus{ outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(18,165,148,.18); }
.contact #leadForm .btn-red{ margin-top:4px; align-self:flex-start; background:var(--marigold-deep);
  color:var(--ink); border:1px solid transparent;
  box-shadow:0 1px 2px rgba(233,122,31,.25),0 10px 26px rgba(233,122,31,.28); }
.contact #leadForm .btn-red:hover{ background:#d86e14;
  box-shadow:0 2px 6px rgba(233,122,31,.30),0 16px 40px rgba(233,122,31,.34); }
.contact #leadForm .lead-err{ font-size:13.5px; color:#c0392b; font-weight:500; }
.contact #leadForm .lead-err a{ color:#c0392b; text-decoration:underline; }
.contact #leadForm .lead-fine{ font-size:12.5px; color:var(--ink-faint); line-height:1.5; }

/* reach-us aside */
.contact .reach{ padding:clamp(22px,3vw,32px); }
.contact .reach .eyebrow{ display:block; margin-bottom:16px; }
.contact .reach ul{ list-style:none; }
.contact .reach li{ display:flex; justify-content:space-between; gap:14px; padding:13px 0;
  border-top:1px solid var(--line); font-size:14.5px; }
.contact .reach li:first-child{ border-top:none; }
.contact .reach li .k{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-faint); }
.contact .reach li .v{ color:var(--ink); font-weight:500; text-align:right; }
.contact .reach li a.v{ color:var(--marigold-deep); }
.contact .reach .btns{ margin-top:22px; display:flex; flex-direction:column; gap:12px; }
.contact .reach .btns .btn{ width:100%; }

/* community channels */
.contact .comm-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
  gap:14px; margin-top:clamp(20px,3vw,30px); }
/* channel tiles are liquid glass (.lglass supplies fill/border/backdrop); these
   rules keep layout only, plus a tile-weight shadow that reads over the glass. */
.contact .chan{ display:flex; align-items:center; gap:15px; padding:15px 17px;
  border-radius:16px; min-height:64px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85), 0 6px 18px -12px rgba(20,18,58,.26);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease); }
.contact .chan:hover{ transform:translateY(-3px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 14px 28px -12px rgba(20,18,58,.34); }
.contact .chan .cico{ width:44px; height:44px; flex:none; border-radius:12px; display:grid; place-items:center;
  font-family:var(--disp); font-weight:700; color:#fff; box-shadow:0 6px 14px -4px rgba(20,18,58,.35); }
.contact .chan .cbody b{ display:block; font-family:var(--disp); font-weight:600; font-size:16px; color:var(--ink); }
.contact .chan .cbody span{ font-size:13px; color:var(--ink-soft); }
.contact .chan .carr{ margin-left:auto; color:var(--ink-faint); }
.contact .comm-pending{ font-family:var(--mono); font-size:13px; color:var(--ink-faint);
  margin-top:clamp(18px,2.4vw,26px); }

@media (max-width:820px){
  .contact .contact-grid{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .contact #leadForm .lead-row{ grid-template-columns:1fr; }
}

/* ---------------------------------------------------------------------------
   SCHOOLS
   ------------------------------------------------------------------------- */
.schools .step-card .sn{ font-family:var(--disp); font-weight:700; font-size:clamp(28px,3vw,40px);
  color:var(--marigold-deep); line-height:1; margin-bottom:14px; }
.schools .step-card h2{ font-size:clamp(18px,1.7vw,22px); margin-bottom:8px; }
.schools .step-card p{ color:var(--ink-soft); font-size:14.5px; line-height:1.55; }
.schools .step-card .chip{ margin-top:14px; }

.schools .spec .k{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-faint); display:block; }
.schools .spec .v{ font-family:var(--disp); font-weight:600; font-size:clamp(22px,2.4vw,30px);
  letter-spacing:-.01em; margin:10px 0 8px; }
.schools .spec p{ color:var(--ink-soft); font-size:14px; line-height:1.5; }