/* ==============================================================================
   The home page.

   The sections of the page in the order they appear, followed by the four
   layers that were added over the top of them: the floating header, the two
   motion passes, and the logo colourway.

   Those four layers were written as overrides and several of them use
   !important, so they only work from where they are. Nothing in this file may
   be reordered, and nothing may be lifted out of it into base.css or
   chrome.css, without checking the page at every width afterwards.
   ============================================================================== */

/* ==========================================================
   HERO — full-bleed photography, simple institutional slogan
   ========================================================== */
.hero {
  position: relative;
  min-height: min(760px, calc(100vh - 124px));
  overflow: hidden;
  background: #29232c;
  color: #fff;
}
.hero-media,
.hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-media img {
  object-fit: cover;
  object-position: center 45%;
  filter: saturate(.92) contrast(1.02);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13,7,17,.12) 30%, rgba(15,8,18,.74) 100%);
}
.hero-content {
  position: relative;
  z-index: 2;
  min-height: min(760px, calc(100vh - 124px));
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 54px;
}
.hero-tag {
  max-width: 1100px;
  margin: 0;
  font-family: "Barlow Condensed", Arial, sans-serif;
  font-size: clamp(3.2rem, 7.1vw, 7.75rem);
  font-weight: 600;
  letter-spacing: .035em;
  line-height: .88;
  text-transform: uppercase;
}
.hero-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  margin-top: 31px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.5);
}
.hero-bottom p { max-width: 580px; margin: 0; font-size: .98rem; color: rgba(255,255,255,.84); }
.hero-bottom .arrow-link { color: #fff; white-space: nowrap; }

/* ==========================================================
   MISSION INTRO — mirrors LCA's photo + faith statement rhythm
   ========================================================== */
.mission-intro {
  position: relative;
  padding: 125px 0 112px;
  overflow: hidden;
}
.mission-grid {
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  gap: 105px;
  align-items: center;
}
.mission-image {
  position: relative;
  min-height: 565px;
}
.mission-image::before {
  content: "";
  position: absolute;
  left: -35px;
  top: 48px;
  width: 82%;
  height: calc(100% - 10px);
  background: var(--lavender);
}
.mission-image img {
  position: absolute;
  inset: 0 0 0 28px;
  width: calc(100% - 28px);
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.mission-copy { max-width: 655px; }
.mission-copy h2 {
  margin-bottom: 30px;
  font-size: clamp(2.85rem, 4.55vw, 5.2rem);
}
.mission-copy p {
  margin: 0 0 33px;
  color: var(--muted);
  font-size: 1.04rem;
  line-height: 1.82;
}
.mission-mark {
  position: absolute;
  right: -44px;
  bottom: -65px;
  color: var(--lavender-soft);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 21rem;
  font-weight: 700;
  letter-spacing: -.09em;
  line-height: .7;
  z-index: -1;
  user-select: none;
}

/* ==========================================================
   STORIES / SCHOOL PATHWAYS — no rounded AI cards
   ========================================================== */
.stories {
  padding: 112px 0 124px;
  background: var(--lavender-soft);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stories-head {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 70px;
  align-items: end;
  margin-bottom: 56px;
}
.stories-head .section-title { max-width: 800px; }
.stories-head p { max-width: 520px; margin: 0 0 5px; color: var(--muted); line-height: 1.75; }

.story-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.story {
  position: relative;
  min-height: 515px;
  overflow: hidden;
  background: #2a252d;
  color: #fff;
}
.story img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition: transform .45s ease; }
.story::after {
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(20,12,24,.03) 34%, rgba(20,10,25,.84) 100%);
}
.story:hover img { transform: scale(1.025); }
.story-content {
  position:absolute;
  left:0; right:0; bottom:0;
  z-index:2;
  padding: 32px 31px 29px;
}
.story-label {
  display:block;
  margin-bottom: 9px;
  color: #d9cae5;
  font-family:"Barlow Condensed", sans-serif;
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.story h3 {
  margin:0 0 10px;
  font-family:"Libre Baskerville", Georgia, serif;
  font-size:1.7rem;
  line-height:1.14;
}
.story p { margin:0 0 18px; color:rgba(255,255,255,.8); font-size:.88rem; line-height:1.65; }
.story .arrow-link { color:#fff; font-size:.86rem; }

/* ==========================================================
   DARK STATEMENT / ADMISSIONS SECTION
   ========================================================== */
.statement {
  position: relative;
  overflow: hidden;
  background: var(--purple-dark);
  color: #fff;
}
.statement::after {
  content: "CCA";
  position: absolute;
  right: -42px;
  bottom: -85px;
  color: rgba(255,255,255,.045);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 22rem;
  font-weight: 700;
  letter-spacing: -.08em;
  line-height: .8;
}
.statement-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  gap: 90px;
  align-items: end;
  padding: 105px 0 114px;
}
.statement h2 {
  margin: 0;
  max-width: 950px;
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: clamp(2.65rem, 5vw, 6rem);
  font-weight: 400;
  letter-spacing: -.045em;
  line-height: 1.08;
}
.statement-actions { padding-bottom: 9px; }
.statement-actions p { margin:0 0 24px; color:rgba(255,255,255,.76); }
.statement .arrow-link { color:#fff; }

/* ==========================================================
   TOP STORIES / PRACTICAL SCHOOL LINKS
   ========================================================== */
.updates { padding: 118px 0 126px; }
.updates-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 60px;
  margin-bottom: 50px;
}
.updates-header .section-title { max-width: 770px; }
.updates-header .arrow-link { margin-bottom: 8px; }
.updates-grid {
  display:grid;
  grid-template-columns: 1.1fr .9fr .9fr;
  border-top:1px solid var(--ink);
}
.update-item {
  min-width:0;
  padding: 27px 27px 0;
  border-right:1px solid var(--line);
}
.update-item:first-child { padding-left:0; }
.update-item:last-child { border-right:0; padding-right:0; }
.update-image { height: 290px; overflow:hidden; margin-bottom:24px; background:#ddd; }
.update-item:first-child .update-image { height: 365px; }
.update-image img { width:100%; height:100%; object-fit:cover; }
.update-meta {
  margin:0 0 8px;
  color:var(--purple);
  font-family:"Barlow Condensed",sans-serif;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.update-item h3 {
  margin:0 0 13px;
  font-family:"Libre Baskerville",Georgia,serif;
  font-size:1.43rem;
  line-height:1.25;
}
.update-item:first-child h3 { font-size:1.78rem; }
.update-item p { margin:0 0 17px; color:var(--muted); font-size:.9rem; line-height:1.68; }

/* ==========================================================
   SOCIAL / PHOTO FEED — styled like a live school feed
   ========================================================== */
.social {
  padding: 110px 0 118px;
  background: #121013;
  color: #fff;
}
.social-header {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:50px;
  margin-bottom:45px;
}
.social .eyebrow { color:#cdb8df; }
.social .section-title { max-width:700px; }
.social .arrow-link { color:#fff; margin-bottom:8px; }
.social-grid {
  display:grid;
  grid-template-columns: 1.2fr .8fr .8fr;
  grid-template-rows: 265px 265px;
  gap:12px;
}
.social-shot { position:relative; overflow:hidden; background:#333; }
.social-shot:first-child { grid-row:1 / 3; }
.social-shot:nth-child(2) { grid-column:2 / 4; }
.social-shot img { width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.social-shot:hover img { transform:scale(1.02); }
.social-shot span {
  position:absolute;
  left:16px; bottom:14px;
  padding:6px 8px;
  background:rgba(18,16,19,.82);
  font-family:"Barlow Condensed",sans-serif;
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}



/* Search overlay */
.search-overlay {
  position:fixed;
  inset:0;
  z-index:110;
  display:none;
  place-items:center;
  background:rgba(29,16,38,.97);
  color:#fff;
}
.search-overlay.open { display:grid; }
.search-box { width:min(calc(100% - 48px), 850px); position:relative; }
.search-box label { display:block; margin-bottom:18px; color:#cbb7dc; font-family:"Barlow Condensed",sans-serif; font-size:.9rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
.search-row { display:grid; grid-template-columns:1fr auto; border-bottom:2px solid #fff; }
.search-row input { min-width:0; padding:10px 0 18px; border:0; outline:0; background:transparent; color:#fff; font-family:"Libre Baskerville",Georgia,serif; font-size:clamp(2rem,5vw,4.4rem); }
.search-row input::placeholder { color:rgba(255,255,255,.35); }
.search-row button { border:0; background:transparent; color:#fff; font-size:1.8rem; }
.search-close { position:absolute; right:0; top:-72px; width:48px; height:48px; border:1px solid rgba(255,255,255,.4); background:transparent; color:#fff; font-size:1.5rem; }

@media (max-width: 1100px) {
  .shell { width:min(calc(100% - 44px), var(--max)); }
  .header-inner { grid-template-columns:1fr auto; min-height:98px; }
  .brand-logo { width:64px; height:74px; padding-right:20px; }
  .brand-name strong { font-size:1.15rem; }
  .header-right { min-width:auto; display:flex; border-left:0; }
  .utility-nav, .header-cta:not(.apply) { display:none; }
  .primary-actions { align-items:stretch; }
  .header-cta.apply { min-width:92px; }
  .search-button,.menu-button { width:66px; }
  .hero,.hero-content { min-height:650px; }
  .mission-grid { gap:65px; }
  .mission-image { min-height:500px; }
  .drawer-grid { grid-template-columns:1.15fr 1fr 1fr; }
  .drawer-column:last-child { display:none; }
  .story { min-height:470px; }
  .statement-inner { grid-template-columns:1fr; gap:44px; }
  .statement-actions { max-width:520px; }
}

@media (max-width: 820px) {
  .shell { width:min(calc(100% - 34px), var(--max)); }
  .brand-lockup { padding-right:12px; }
  .brand-logo { width:54px; height:64px; padding-right:15px; }
  .brand-name { padding-left:16px; max-width:185px; }
  .brand-name strong { font-size:.92rem; }
  .brand-name span { font-size:.67rem; letter-spacing:.1em; }
  .header-cta.apply, .search-button { display:none; }
  .menu-button { width:63px; border-left:1px solid var(--line); }
  .hero,.hero-content { min-height:590px; }
  .hero-content { padding-bottom:35px; }
  .hero-tag { font-size:clamp(3.15rem,13vw,6rem); }
  .hero-bottom { display:block; margin-top:23px; }
  .hero-bottom p { margin-bottom:20px; }
  .mission-intro,.stories,.updates,.social { padding-top:85px; padding-bottom:88px; }
  .mission-grid { grid-template-columns:1fr; gap:55px; }
  .mission-image { min-height:480px; }
  .mission-image::before { left:-17px; }
  .mission-image img { left:14px; width:calc(100% - 14px); }
  .mission-mark { display:none; }
  .stories-head { grid-template-columns:1fr; gap:23px; }
  .story-grid { grid-template-columns:1fr; gap:12px; }
  .story { min-height:430px; }
  .statement-inner { padding:78px 0 84px; }
  .statement::after { font-size:13rem; }
  .updates-header,.social-header { display:block; }
  .updates-header .arrow-link,.social-header .arrow-link { margin-top:25px; }
  .updates-grid { grid-template-columns:1fr; }
  .update-item,.update-item:first-child,.update-item:last-child { padding:29px 0 35px; border-right:0; border-bottom:1px solid var(--line); }
  .update-item:last-child { border-bottom:0; }
  .update-image,.update-item:first-child .update-image { height:340px; }
  .social-grid { grid-template-columns:1fr 1fr; grid-template-rows:330px 220px; }
  .social-shot:first-child { grid-row:1; grid-column:1/3; }
  .social-shot:nth-child(2) { grid-column:auto; }
  .drawer-grid { grid-template-columns:1fr 1fr; gap:45px; }
  .drawer-main { grid-column:1/3; padding-bottom:30px; border-bottom:1px solid rgba(255,255,255,.18); }
}

@media (max-width: 540px) {
  .header-inner { min-height:84px; }
  .brand-logo { width:46px; height:56px; padding-right:12px; }
  .brand-name strong { font-size:.78rem; }
  .brand-name span { display:none; }
  .menu-button { width:54px; }
  .hero,.hero-content { min-height:535px; }
  .hero::after { background:linear-gradient(180deg,rgba(13,7,17,.18) 20%,rgba(15,8,18,.82) 100%); }
  .hero-bottom p { font-size:.88rem; }
  .mission-image { min-height:390px; }
  .story { min-height:390px; }
  .social-grid { display:grid; grid-template-columns:1fr; grid-template-rows:330px 230px 230px; }
  .social-shot:first-child,.social-shot:nth-child(2) { grid-column:auto; grid-row:auto; }
  .drawer-shell { width:calc(100% - 34px); }
  .drawer-brand span { display:none; }
  .drawer-grid { grid-template-columns:1fr; }
  .drawer-main { grid-column:auto; }
  .drawer-column { padding-bottom:25px; border-bottom:1px solid rgba(255,255,255,.16); }
}



/* Supplied Carter Christian Academy logo */
.brand-logo {
  display:block;
  width:72px;
  height:88px;
  padding-right:23px;
  border-right:1px solid var(--line);
  object-fit:contain;
  object-position:center;
  flex:0 0 auto;
}
.drawer-brand span {
  color:#fff;
  font-family:"Libre Baskerville", Georgia, serif;
  font-size:1.12rem;
  font-weight:700;
}

/* ==========================================================
   CLEAN CCA FOOTER
   One contact block, one navigation block, ACSI image only.
   ========================================================== */
.footer-clean {
  --footer-purple:#522d82;
  --footer-purple-deep:#321849;
  --footer-line:rgba(255,255,255,.25);
  background:var(--footer-purple);
  color:#fff;
}
.footer-accent {
  width:100%;
  height:8px;
  background:var(--footer-purple-deep);
}
.footer-layout {
  display:grid;
  grid-template-columns:1.35fr .7fr 1fr 1.15fr;
  gap:clamp(34px,5vw,78px);
  align-items:start;
  padding:68px 0 52px;
}
.footer-clean h2,
.footer-clean h3,
.footer-clean p { margin-top:0; }
.footer-kicker,
.footer-clean h3 {
  margin-bottom:16px;
  color:rgba(255,255,255,.72);
  font-family:"Barlow Condensed",Arial,sans-serif;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.footer-brand h2 {
  margin-bottom:14px;
  font-family:"Libre Baskerville",Georgia,serif;
  font-size:clamp(1.55rem,2.2vw,2.15rem);
  line-height:1.15;
  letter-spacing:-.025em;
}
.footer-tagline {
  max-width:330px;
  margin-bottom:0;
  color:rgba(255,255,255,.78);
  font-size:.9rem;
  line-height:1.7;
}
.footer-links nav { display:grid; gap:10px; }
.footer-links a,
.footer-contact a {
  display:inline-flex;
  align-items:center;
  min-height:24px;
  width:max-content;
  max-width:100%;
  color:#fff;
  font-size:.9rem;
  border-bottom:1px solid transparent;
  transition:border-color .18s ease, opacity .18s ease;
}
.footer-links a:hover,
.footer-contact a:hover { border-bottom-color:rgba(255,255,255,.8); }
.footer-contact address {
  margin:0 0 17px;
  color:rgba(255,255,255,.82);
  font-style:normal;
  font-size:.9rem;
  line-height:1.7;
}
.footer-phone,
.footer-site { display:flex; margin-top:8px; overflow-wrap:anywhere; }
.footer-acsi {
  min-height:138px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px 0 18px 36px;
  border-left:1px solid var(--footer-line);
}
.footer-acsi img {
  display:block;
  width:min(100%,330px);
  height:auto;
  object-fit:contain;
}
.footer-policy {
  padding:28px 0 34px;
  border-top:1px solid var(--footer-line);
}
.footer-policy p {
  max-width:1180px;
  margin-bottom:0;
  color:rgba(255,255,255,.67);
  font-size:.69rem;
  line-height:1.75;
}
.footer-end-wrap {
  background:var(--footer-purple-deep);
  border-top:1px solid rgba(255,255,255,.12);
}
.footer-end {
  min-height:58px;
  display:flex;
  align-items:center;
  color:rgba(255,255,255,.72);
  font-size:.66rem;
  letter-spacing:.09em;
  text-transform:uppercase;
}

@media (max-width: 980px) {
  .footer-layout { grid-template-columns:1.2fr .8fr 1fr; }
  .footer-acsi {
    grid-column:1 / 4;
    min-height:0;
    justify-content:flex-start;
    padding:30px 0 0;
    border-left:0;
    border-top:1px solid var(--footer-line);
  }
  .footer-acsi img { width:min(300px,70vw); }
}
@media (max-width: 640px) {
  .footer-layout {
    grid-template-columns:1fr 1fr;
    gap:36px 28px;
    padding:52px 0 40px;
  }
  .footer-brand { grid-column:1 / 3; }
  .footer-acsi { grid-column:1 / 3; }
  .footer-policy { padding-top:25px; }
  .footer-policy p { font-size:.66rem; }
}
@media (max-width: 420px) {
  .footer-layout { grid-template-columns:1fr; }
  .footer-brand,
  .footer-acsi { grid-column:auto; }
  .footer-contact { padding-top:4px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { transition:none !important; }
}
  

/* ==========================================================
   IMAGE PLACEHOLDERS — intentional blocks, no temporary photos
   ========================================================== */
.image-placeholder {
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  padding:24px;
  background:#ddd2e7;
  color:#522d82;
  border:1px solid rgba(82,45,130,.28);
  font-family:"Barlow Condensed",Arial,sans-serif;
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.16em;
  line-height:1.3;
  text-align:center;
  text-transform:uppercase;
}
.hero-media .image-placeholder {
  position:absolute;
  inset:0;
  border:0;
  background:#493660;
  color:rgba(255,255,255,.62);
  font-size:clamp(.86rem,1.2vw,1.05rem);
  letter-spacing:.22em;
}
.mission-image .image-placeholder {
  position:absolute;
  inset:0 0 0 28px;
  width:calc(100% - 28px);
  background:#d5c5e1;
}
.story > .image-placeholder {
  position:absolute;
  inset:0;
  border:0;
  background:#6d577f;
  color:rgba(255,255,255,.58);
  transition:transform .35s ease;
}
.story:nth-child(2) > .image-placeholder { background:#806a91; }
.story:nth-child(3) > .image-placeholder { background:#58466a; }
.story:hover > .image-placeholder { transform:scale(1.015); }
.update-image .image-placeholder {
  background:#eee8f3;
  color:#522d82;
}
.social-shot .image-placeholder {
  position:absolute;
  inset:0;
  border:0;
  background:#3a2948;
  color:rgba(255,255,255,.54);
}
.social-shot:nth-child(2) .image-placeholder { background:#4d3860; }
.social-shot:nth-child(3) .image-placeholder { background:#2e2237; }

/* A rule here used to hide every photograph on the site outright, from the
   days when the blocks of colour above were the only artwork. It had nothing
   to hide, because no section carried a picture, and it would have hidden the
   first one anybody added through the editor. The rules that size a
   photograph in each of these slots are further up this file and are what draw
   one now. */
  

/* Small-site navigation cleanup */
#about, #academics, #admissions, #tuition, #calendar, #contact { scroll-margin-top: 24px; }
.drawer-grid { grid-template-columns: 1fr; max-width: 760px; }
.drawer-main { grid-column: auto; }
.social-shot { cursor: default; }

/* Compact footer for CCA's current five-item site. */
.footer-layout {
  grid-template-columns:minmax(260px,1.35fr) .7fr 1fr minmax(190px,.8fr);
  gap:clamp(30px,4vw,64px);
}
.footer-acsi {
  grid-column:auto;
  min-height:132px;
  padding:8px 0 8px 30px;
  margin:0;
  border-top:0;
  border-left:1px solid var(--footer-line);
  justify-content:center;
}
.footer-acsi img {
  width:min(100%,250px);
  max-height:118px;
  object-fit:contain;
  object-position:center;
}
.footer-end {
  justify-content:space-between;
  gap:24px;
}
.footer-end-right { text-align:right; }
@media (max-width: 980px) {
  .footer-layout { grid-template-columns:1.2fr .8fr 1fr; }
  .footer-acsi {
    grid-column:auto;
    padding-left:24px;
    border-left:1px solid var(--footer-line);
    border-top:0;
  }
  .footer-acsi img { width:min(220px,100%); }
}
@media (max-width: 760px) {
  .footer-layout { grid-template-columns:1fr 1fr; }
  .footer-brand { grid-column:1 / -1; }
  .footer-acsi {
    grid-column:auto;
    justify-content:flex-start;
    padding:4px 0 4px 24px;
  }
  .footer-end { align-items:flex-start; }
}
@media (max-width: 520px) {
  .footer-layout { grid-template-columns:1fr; }
  .footer-brand, .footer-acsi { grid-column:auto; }
  .footer-acsi { padding:26px 0 0; border-left:0; border-top:1px solid var(--footer-line); }
  .footer-acsi img { width:min(230px,78vw); }
  .footer-end { display:grid; gap:7px; padding:17px 0 19px; }
  .footer-end-right { text-align:left; }
}

/* ==========================================================
   MOTION + INTERACTION POLISH
   Restrained movement: editorial, not app-like.
   ========================================================== */
.header-inner {
  grid-template-columns:minmax(400px,1fr) auto;
}
.header-right { min-width:520px; }
.brand-name {
  max-width:none;
  padding-left:28px;
}
.brand-name strong {
  font-size:clamp(1.62rem,2vw,2.08rem);
  line-height:1.08;
  white-space:nowrap;
}

@keyframes ccaHeaderIn {
  from { opacity:0; transform:translateY(-8px); }
  to { opacity:1; transform:translateY(0); }
}
@keyframes ccaHeroIn {
  from { opacity:0; transform:translateY(34px); }
  to { opacity:1; transform:translateY(0); }
}
@keyframes ccaHeroLine {
  from { transform:scaleX(0); }
  to { transform:scaleX(1); }
}
.site-header {
  position:sticky;
  top:0;
  transition:box-shadow .25s ease;
}
.site-header.is-scrolled { box-shadow:0 10px 34px rgba(27,16,33,.09); }
.brand-lockup { animation:ccaHeaderIn .65s cubic-bezier(.2,.75,.25,1) both; }
.hero-tag { animation:ccaHeroIn .8s .1s cubic-bezier(.18,.78,.22,1) both; }
.hero-bottom { animation:ccaHeroIn .8s .25s cubic-bezier(.18,.78,.22,1) both; }
.hero-bottom::before {
  content:"";
  position:absolute;
  top:-1px;
  left:0;
  width:100%;
  height:1px;
  background:rgba(255,255,255,.72);
  transform-origin:left center;
  animation:ccaHeroLine 1s .4s cubic-bezier(.2,.75,.25,1) both;
}
.hero-bottom { position:relative; border-top:0; }

.story,
.update-item {
  transition:transform .28s ease, box-shadow .28s ease;
}
.story:hover { transform:translateY(-5px); }
.update-item:not(.calendar-item):hover { transform:translateY(-3px); }

.image-placeholder {
  position:relative;
  overflow:hidden;
}
.image-placeholder::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.13) 48%,transparent 66%);
  transform:translateX(-130%);
  transition:transform .85s cubic-bezier(.2,.65,.2,1);
  pointer-events:none;
}
.story:hover .image-placeholder::after,
.mission-image:hover .image-placeholder::after { transform:translateX(130%); }

/* Calendar preview — ready to be swapped for Google Calendar data later. */
.calendar-item { padding-top:27px; }
.calendar-intro { max-width:520px; }
.calendar-widget {
  margin-top:25px;
  border:1px solid #d7d0dc;
  background:#fff;
  box-shadow:0 16px 38px rgba(37,21,48,.07);
  transition:box-shadow .25s ease, transform .25s ease;
}
.calendar-widget:hover {
  transform:translateY(-2px);
  box-shadow:0 20px 48px rgba(37,21,48,.11);
}
.calendar-toolbar {
  min-height:84px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:17px 18px 16px 20px;
  border-bottom:1px solid #e5e0e8;
  background:var(--lavender-soft);
}
.calendar-kicker {
  display:block;
  margin-bottom:3px;
  color:var(--purple);
  font-family:"Barlow Condensed",Arial,sans-serif;
  font-size:.69rem;
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase;
}
.calendar-month {
  display:block;
  font-family:"Libre Baskerville",Georgia,serif;
  font-size:1.17rem;
  line-height:1.2;
}
.calendar-controls { display:flex; align-items:center; gap:5px; }
.calendar-control,
.calendar-today {
  min-width:36px;
  /* A floor rather than a height: with the accessibility panel's bigger text
     the arrow grows past 36px and a fixed height clipped it. */
  min-height:36px;
  border:1px solid #d5ceda;
  background:#fff;
  color:var(--ink);
  transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease;
}
.calendar-control { font-size:1rem; }
.calendar-today {
  min-width:auto;
  padding:0 11px;
  font-family:"Barlow Condensed",Arial,sans-serif;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.calendar-control:hover,
.calendar-today:hover {
  border-color:var(--purple);
  background:var(--purple);
  color:#fff;
  transform:translateY(-1px);
}
.calendar-control:focus-visible,
.calendar-today:focus-visible {
  outline:3px solid rgba(82,45,130,.22);
  outline-offset:2px;
}
.calendar-grid {
  display:grid;
  grid-template-columns:repeat(7,1fr);
  padding:12px 13px 15px;
}
/* The rows are for screen readers only; the cells still sit on the grid. */
.calendar-row { display:contents; }
.calendar-weekday,
.calendar-day {
  min-width:0;
  display:grid;
  place-items:center;
  aspect-ratio:1;
  font-size:.76rem;
}
.calendar-weekday {
  aspect-ratio:auto;
  min-height:27px;
  color:#837d86;
  font-family:"Barlow Condensed",Arial,sans-serif;
  font-size:.64rem;
  font-weight:700;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.calendar-day {
  position:relative;
  border:0;
  background:transparent;
  color:#28252a;
  border-radius:50%;
}
.calendar-day.is-outside { color:#bbb5bd; }
.calendar-day.is-today {
  background:var(--purple);
  color:#fff;
  font-weight:700;
}
.calendar-day:not(.is-outside):not(.is-today):hover {
  background:var(--lavender);
  color:var(--purple-dark);
}
.calendar-foot {
  min-height:46px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:0 20px;
  border-top:1px solid #e5e0e8;
  color:#716b74;
  font-size:.73rem;
}
.calendar-dot {
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--purple);
  box-shadow:0 0 0 4px rgba(82,45,130,.1);
}

@media (max-width:1120px) {
  .brand-name strong { white-space:normal; }
}
@media (max-width:760px) {
  .brand-name { padding-left:18px; }
  .brand-name strong { font-size:1.42rem; }
  .calendar-toolbar { align-items:flex-start; }
}
@media (max-width:480px) {
  .brand-logo { width:60px; height:72px; padding-right:17px; }
  .brand-name strong { font-size:1.22rem; }
  .calendar-toolbar { display:block; }
  .calendar-controls { margin-top:13px; }
  .calendar-weekday,.calendar-day { font-size:.7rem; }
}

@media (prefers-reduced-motion: reduce) {
  .brand-lockup,.hero-tag,.hero-bottom,.hero-bottom::before { animation:none !important; }
  .will-reveal { opacity:1 !important; transform:none !important; }
  .calendar-widget,.story,.update-item { transform:none !important; }
}



/* ==========================================================
   FINAL RESPONSIVE QA PASS — desktop, iPad/tablet, mobile
   Keeps the page fluid, touch-friendly, and free of overflow.
   ========================================================== */
.sr-only {
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

.footer-facebook {
  display:inline-grid !important;
  place-items:center;
  width:38px !important;
  height:38px;
  margin-top:18px;
  border:1px solid rgba(255,255,255,.46) !important;
  border-radius:50%;
  color:#fff;
  transition:background .18s ease,border-color .18s ease,transform .18s ease !important;
}

.footer-brand .footer-facebook {
  margin-top:18px;
}
.footer-facebook svg { width:20px; height:20px; fill:currentColor; }
.footer-facebook:hover { background:#fff; color:var(--footer-purple); border-color:#fff !important; transform:translateY(-2px); }
.footer-facebook:focus-visible { outline:3px solid rgba(255,255,255,.35); outline-offset:3px; }

/* Header: explicitly undo desktop minimums at smaller widths. */
@media (max-width:1100px) {
  .header-inner { grid-template-columns:minmax(0,1fr) auto; min-height:98px; }
  .header-right { min-width:0; width:auto; display:flex; }
  .brand-lockup { min-width:0; max-width:100%; padding-right:14px; }
  .brand-name { min-width:0; max-width:none; padding-left:20px; }
  .brand-name strong { font-size:clamp(1.25rem,2.4vw,1.7rem); white-space:normal; }
  .brand-logo { width:64px; height:74px; padding-right:20px; }
}

@media (max-width:820px) {
  .shell { width:min(calc(100% - 34px),var(--max)); }
  .header-inner { min-height:88px; }
  .brand-lockup { padding-right:8px; }
  .brand-logo { width:56px; height:66px; padding-right:14px; }
  .brand-name { padding-left:14px; }
  .brand-name strong { font-size:clamp(1.08rem,3.4vw,1.42rem); line-height:1.08; }
  .header-right { flex:0 0 auto; min-width:0; }
  .menu-button { width:60px; min-width:60px; min-height:88px; }
  .drawer-shell { padding-top:24px; }
  .drawer-top { padding-bottom:22px; }
  .drawer-brand span { display:block; font-size:1rem; }
  .drawer-main a { font-size:clamp(2rem,7vw,3rem); }
  .story:hover,.update-item:not(.calendar-item):hover { transform:none; }
  .calendar-control,.calendar-today { min-height:44px; }
  .calendar-control { min-width:44px; }
  .calendar-today { padding-inline:14px; }

  /* Tablet footer: brand first, then Explore / Contact / ACSI side by side. */
  .footer-layout {
    grid-template-columns:minmax(110px,.8fr) minmax(180px,1.25fr) minmax(110px,.8fr);
    gap:28px 22px;
    padding:52px 0 40px;
  }
  .footer-brand { grid-column:1 / -1; }
  .footer-acsi {
    grid-column:auto;
    align-self:start;
    min-height:0;
    justify-content:center;
    padding:4px 0 4px 20px;
    border-left:1px solid var(--footer-line);
    border-top:0;
  }
  .footer-acsi img { width:min(100%,150px); max-height:92px; object-fit:contain; }
}

@media (max-width:600px) {
  .shell { width:min(calc(100% - 30px),var(--max)); }
  .header-inner { min-height:82px; }
  .brand-logo { width:50px; height:60px; padding-right:12px; }
  .brand-name { padding-left:12px; }
  .brand-name strong { font-size:clamp(.98rem,4.6vw,1.2rem); }
  .menu-button { width:54px; min-width:54px; min-height:82px; }

  .hero,.hero-content { min-height:520px; }
  .hero-tag { font-size:clamp(2.65rem,12.8vw,3.15rem); line-height:.9; }
  .hero-bottom p { max-width:100%; }
  .section-title { font-size:clamp(2.15rem,10.5vw,3.45rem); }
  .mission-intro,.stories,.updates { padding-top:72px; padding-bottom:76px; }

  .calendar-widget { margin-top:20px; }
  .calendar-toolbar { display:flex; flex-direction:column; align-items:stretch; min-height:0; padding:16px; }
  .calendar-controls { width:100%; margin-top:4px; display:grid; grid-template-columns:44px 1fr 44px; gap:7px; }
  .calendar-today { width:100%; }
  .calendar-grid { padding:10px 7px 12px; }
  .calendar-weekday { font-size:.58rem; }
  .calendar-day { font-size:.72rem; }
  .calendar-foot { padding:11px 15px; min-height:0; line-height:1.4; }

  /* Phone footer: Explore + Contact + compact ACSI stay in one row. */
  .footer-layout {
    grid-template-columns:minmax(70px,.72fr) minmax(128px,1.35fr) minmax(72px,.72fr);
    gap:20px 14px;
    padding:46px 0 36px;
  }
  .footer-brand { grid-column:1 / -1; }
  .footer-brand h2 { margin-bottom:10px; font-size:1.65rem; }
  .footer-tagline { max-width:430px; font-size:.82rem; }
  .footer-links,.footer-contact,.footer-acsi { min-width:0; }
  .footer-clean h3 { margin-bottom:12px; font-size:.7rem; }
  .footer-links nav { gap:8px; }
  .footer-links a,.footer-contact a { width:auto; max-width:100%; font-size:.78rem; line-height:1.45; }
  .footer-contact .footer-address { display:block; }
  .footer-phone,.footer-site { margin-top:7px; }
  .footer-site { font-size:.7rem !important; overflow-wrap:anywhere; }
  .footer-facebook { width:34px !important; height:34px; margin-top:13px; }
  .footer-facebook svg { width:18px; height:18px; }
  .footer-acsi {
    grid-column:auto;
    align-self:start;
    min-height:0;
    padding:3px 0 0 13px;
    border-left:1px solid var(--footer-line);
    border-top:0;
    justify-content:center;
  }
  .footer-acsi img { width:min(100%,105px); max-height:76px; object-fit:contain; }
  .footer-policy { padding:23px 0 27px; }
  .footer-policy p { font-size:.62rem; line-height:1.65; }
  .footer-end { display:flex; justify-content:space-between; align-items:center; min-height:0; padding:16px 0 18px; font-size:.58rem; gap:12px; }
  .footer-end-right { text-align:right; }
}

@media (max-width:390px) {
  .shell { width:min(calc(100% - 24px),var(--max)); }
  .brand-name strong { font-size:.98rem; }
  .footer-layout {
    grid-template-columns:minmax(62px,.68fr) minmax(118px,1.42fr) minmax(64px,.68fr);
    gap:18px 10px;
  }
  .footer-links a,.footer-contact a { font-size:.74rem; }
  .footer-site { font-size:.64rem !important; }
  .footer-acsi { padding-left:9px; }
  .footer-acsi img { width:min(100%,88px); max-height:64px; }
  .footer-end { font-size:.54rem; gap:8px; }
}

@media (pointer:coarse) {
  .arrow-link,.footer-links a,.footer-contact a { min-height:34px; align-items:center; }
  .menu-button,.drawer-close,.calendar-control,.calendar-today { touch-action:manipulation; }
}

/* Keep the placeholder label out of the hero headline until real photography is added. */
.hero-media .image-placeholder { place-items:start end; padding:24px 26px; }
@media (max-width:600px) {
  .hero-media .image-placeholder { padding:16px 15px; font-size:.68rem; letter-spacing:.15em; }
}



/* ==========================================================
   COMPACT MOBILE MENU — off-canvas drawer rather than takeover
   ========================================================== */
@media (max-width: 820px) {
  .menu-drawer {
    display: block;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
    background: rgba(20, 10, 28, .46);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    transition: opacity .22s ease, visibility 0s linear .22s;
  }
  .menu-drawer.open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition-delay: 0s;
  }
  .drawer-shell {
    width: min(88vw, 360px);
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0 0 0 auto;
    padding: 0;
    background: var(--purple-black);
    box-shadow: -18px 0 50px rgba(0,0,0,.24);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform .28s cubic-bezier(.22,.8,.3,1);
  }
  .menu-drawer.open .drawer-shell { transform: translateX(0); }
  .drawer-top {
    min-height: 74px;
    padding: 15px 16px 15px 20px;
    gap: 14px;
    flex: 0 0 auto;
    border-bottom-color: rgba(255,255,255,.16);
  }
  .drawer-brand {
    display: block;
    min-width: 0;
  }
  .drawer-brand span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: "DM Sans", Arial, sans-serif;
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.2;
  }
  .drawer-close {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-color: rgba(255,255,255,.28);
    border-radius: 50%;
    transition: background .18s ease, border-color .18s ease;
  }
  .drawer-close:hover, .drawer-close:focus-visible {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.5);
  }
  .drawer-close::before, .drawer-close::after {
    top: 20px;
    left: 11px;
    right: 11px;
  }
  .drawer-grid {
    display: block;
    padding: 8px 18px 28px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .drawer-main {
    display: block;
    grid-column: auto;
    padding: 0;
    border: 0;
  }
  .drawer-main a {
    width: 100%;
    min-height: 56px;
    padding: 16px 4px;
    border: 0;
    border-bottom: 1px solid rgba(255,255,255,.13);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-family: "DM Sans", Arial, sans-serif;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.2;
  }
  .drawer-main a::after {
    content: "→";
    color: #bda7d2;
    font-family: Arial, sans-serif;
    font-size: 1rem;
    transition: transform .18s ease;
  }
  .drawer-main a:hover, .drawer-main a:focus-visible {
    color: #fff;
    border-bottom-color: rgba(255,255,255,.28);
  }
  .drawer-main a:hover::after, .drawer-main a:focus-visible::after { transform: translateX(4px); }
  .drawer-main a:last-child { border-bottom: 0; }
}

@media (max-width: 540px) {
  .drawer-shell { width: min(89vw, 330px); }
  .drawer-top { min-height: 70px; padding-left: 18px; }
  .drawer-grid { padding-inline: 16px; }
  .drawer-main a { min-height: 54px; padding: 15px 3px; font-size: .96rem; }
}

@media (prefers-reduced-motion: reduce) {
  .menu-drawer, .drawer-shell { transition: none !important; }
}


/* Final mobile-menu polish: links first, no repeated title or MENU label. */
@media (max-width: 820px) {
  .drawer-top {
    min-height: 58px;
    padding: 10px 14px 6px;
    justify-content: flex-end;
    border-bottom: 0;
  }
  .drawer-brand { display:none !important; }
  .drawer-grid { padding-top: 2px; }
}
@media (max-width: 540px) {
  .drawer-top { min-height: 54px; padding: 8px 12px 4px; }
  .drawer-grid { padding-top: 0; }
}

/* Bottom legal bar: calmer, lower, and visually anchored. */
.footer-end-wrap {
  border-top: 1px solid rgba(255,255,255,.16);
}
.footer-end {
  min-height: 50px;
  padding: 15px 0 13px;
  justify-content: space-between;
  gap: 24px;
  color: rgba(255,255,255,.76);
  font-size: .64rem;
  letter-spacing: .055em;
  line-height: 1.35;
  text-transform: none;
}
.footer-end-right { margin-left:auto; text-align:right; white-space:nowrap; }
@media (max-width: 600px) {
  .footer-end {
    padding: 13px 0 14px;
    gap: 14px;
    font-size: .57rem;
    letter-spacing: .035em;
  }
  .footer-end > span:first-child { max-width: 58%; }
}
@media (max-width: 360px) {
  .footer-end { font-size: .54rem; gap: 10px; }
}


/* ==========================================================
   FINAL HEADER NAV BEHAVIOR
   Desktop: one clean navigation row, no mobile-menu control.
   Phone/tablet: compact drawer only.
   ========================================================== */
@media (min-width: 821px) {
  .header-inner {
    grid-template-columns: minmax(300px, 1fr) auto;
  }
  .header-right {
    min-width: 0 !important;
    width: auto;
    display: flex !important;
    align-items: stretch;
    border-left: 1px solid var(--line);
  }
  .utility-nav {
    display: flex !important;
    align-items: stretch;
    justify-content: flex-end;
    gap: 0;
    height: 100%;
    padding: 0;
    border-bottom: 0;
  }
  .utility-nav a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 0 clamp(12px, 1.45vw, 22px);
    border-left: 1px solid var(--line);
    color: #3f3c43;
    font-size: clamp(.76rem, .85vw, .9rem);
    line-height: 1;
    white-space: nowrap;
    transition: background .18s ease, color .18s ease;
  }
  .utility-nav a:first-child { border-left: 0; }
  .utility-nav a:hover,
  .utility-nav a:focus-visible {
    background: var(--lavender-soft);
    color: var(--purple);
  }
  .primary-actions,
  .menu-button {
    display: none !important;
  }
  .menu-drawer,
  .menu-drawer.open {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

@media (max-width: 820px) {
  .utility-nav { display: none !important; }
  .primary-actions { display: flex !important; }
  .menu-button { display: grid !important; }
}


/* Final nav lock: desktop is one row; drawer only exists visually on <=820px. */
.menu-drawer { display: none; }

@media (min-width: 821px) {
  .header-inner {
    display: grid !important;
    grid-template-columns: minmax(270px, 1fr) auto !important;
    align-items: stretch !important;
  }
  .header-right {
    display: flex !important;
    align-items: stretch !important;
    justify-content: flex-end !important;
    width: auto !important;
    min-width: 0 !important;
  }
  .utility-nav {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-end !important;
    width: auto !important;
    white-space: nowrap !important;
  }
  .utility-nav a {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }
  .primary-actions,
  .menu-button,
  #menuOpen,
  .menu-drawer,
  .menu-drawer.open,
  #menuDrawer {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

@media (max-width: 820px) {
  .utility-nav { display: none !important; }
  .primary-actions { display: flex !important; }
  .menu-button, #menuOpen { display: grid !important; }
  .menu-drawer.open { display: block !important; }
}



/* ==========================================================
   PREMIUM MOTION SYSTEM — modern, editorial, intentionally quiet
   Inspired by high-end school/editorial sites: motion guides the eye
   instead of competing with the content.
   ========================================================== */
:root {
  --ease-premium: cubic-bezier(.2,.72,.2,1);
}

/* Desktop navigation gets a precise animated baseline instead of a loud hover. */
@media (min-width:821px) {
  .utility-nav a { position:relative; overflow:hidden; }
  .utility-nav a::after {
    content:"";
    position:absolute;
    left:clamp(12px,1.45vw,22px);
    right:clamp(12px,1.45vw,22px);
    bottom:15px;
    height:2px;
    background:var(--purple);
    transform:scaleX(0);
    transform-origin:right center;
    transition:transform .34s var(--ease-premium);
  }
  .utility-nav a:hover::after,
  .utility-nav a:focus-visible::after {
    transform:scaleX(1);
    transform-origin:left center;
  }
  .brand-logo {
    transform-origin:center;
    transition:transform .45s var(--ease-premium);
  }
  .brand-lockup:hover .brand-logo { transform:translateY(-1px) scale(1.035); }
}

/* Hero depth: barely perceptible scroll movement + ambient placeholder texture. */
.hero-content {
  transform:translate3d(0,var(--hero-parallax,0px),0);
  will-change:transform;
}
.hero-media .image-placeholder::before {
  content:"";
  position:absolute;
  inset:-18%;
  z-index:0;
  background:
    linear-gradient(112deg, transparent 25%, rgba(255,255,255,.055) 49%, transparent 72%),
    linear-gradient(28deg, rgba(82,45,130,.20), transparent 52%);
  transform:translate3d(-4%,0,0) rotate(-2deg) scale(1.04);
  animation:ccaAmbientHero 14s ease-in-out infinite alternate;
  pointer-events:none;
}
.hero-media .image-placeholder { isolation:isolate; }
.hero-media .image-placeholder > * { position:relative; z-index:1; }
@keyframes ccaAmbientHero {
  from { transform:translate3d(-4%,-1%,0) rotate(-2deg) scale(1.04); }
  to { transform:translate3d(4%,1%,0) rotate(1deg) scale(1.08); }
}

/* Richer reveal vocabulary: mask-like titles, soft depth on content. */
.motion-reveal {
  opacity:0;
  transform:translate3d(0,30px,0);
  filter:blur(3px);
  transition:
    opacity .78s var(--ease-premium) var(--reveal-delay,0ms),
    transform .88s var(--ease-premium) var(--reveal-delay,0ms),
    filter .65s ease var(--reveal-delay,0ms);
}
.motion-reveal.reveal-left { transform:translate3d(-34px,8px,0); }
.motion-reveal.reveal-right { transform:translate3d(34px,8px,0); }
.motion-reveal.reveal-title { transform:translate3d(0,22px,0); }
.motion-reveal.is-visible {
  opacity:1;
  transform:translate3d(0,0,0);
  filter:blur(0);
}

.motion-title {
  opacity:0;
  clip-path:inset(0 0 100% 0);
  transform:translateY(20px);
  transition:opacity .42s ease, clip-path .9s var(--ease-premium), transform .9s var(--ease-premium);
}
.motion-title.is-visible {
  opacity:1;
  clip-path:inset(0 0 0 0);
  transform:translateY(0);
}
.motion-eyebrow {
  position:relative;
  width:fit-content;
  opacity:0;
  transform:translateY(7px);
  transition:opacity .5s ease,transform .65s var(--ease-premium);
}
.motion-eyebrow::after {
  content:"";
  position:absolute;
  left:0;
  bottom:-8px;
  width:34px;
  height:2px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .7s .12s var(--ease-premium);
}
.motion-eyebrow.is-visible { opacity:1; transform:translateY(0); }
.motion-eyebrow.is-visible::after { transform:scaleX(1); }

/* A little depth in the oversized CCA watermark, tied to the scroll. */
.mission-mark {
  transform:translate3d(0,var(--mark-parallax,0px),0);
  transition:opacity .2s ease;
  will-change:transform;
}

/* Content hover: tactile, but only on devices that actually hover. */
@media (hover:hover) and (pointer:fine) {
  .story,
  .update-item:not(.calendar-item) {
    transition:transform .4s var(--ease-premium), box-shadow .4s var(--ease-premium);
  }
  .story:hover { transform:translateY(-7px); }
  .update-item:not(.calendar-item):hover { transform:translateY(-5px); }
  .story .image-placeholder,
  .update-image .image-placeholder,
  .mission-image .image-placeholder {
    transition:transform .65s var(--ease-premium), filter .65s var(--ease-premium);
  }
  .story:hover .image-placeholder,
  .update-item:not(.calendar-item):hover .image-placeholder,
  .mission-image:hover .image-placeholder {
    transform:scale(1.018);
  }
  .arrow-link { transition:color .22s ease; }
  .arrow-link::after { transition:transform .34s var(--ease-premium); }
}

/* Statement section gains a quiet moving watermark instead of another card effect. */
.statement { position:relative; overflow:hidden; }
.statement::after {
  content:"CCA";
  position:absolute;
  right:-.08em;
  bottom:-.27em;
  color:rgba(255,255,255,.035);
  font-family:"Barlow Condensed",Arial,sans-serif;
  font-size:clamp(10rem,30vw,32rem);
  font-weight:700;
  letter-spacing:-.07em;
  line-height:.8;
  pointer-events:none;
  transform:translate3d(0,0,0);
}
.statement-inner { position:relative; z-index:1; }

/* Calendar feels like a real product surface without inventing event data. */
.calendar-widget { overflow:hidden; }
.calendar-control,
.calendar-today { overflow:hidden; position:relative; }
.calendar-control:active,
.calendar-today:active { transform:translateY(0) scale(.94); }
.calendar-month { transition:opacity .12s ease,transform .12s ease; }
.calendar-month.calendar-month-exit { opacity:0; transform:translateY(-5px); }
.calendar-month.calendar-month-enter { animation:calendarMonthIn .3s var(--ease-premium) both; }
.calendar-grid { transition:opacity .12s ease,transform .12s ease; transform-origin:center top; }
.calendar-grid.calendar-exit { opacity:.12; transform:translateY(5px) scale(.992); }
.calendar-grid.calendar-enter { animation:calendarGridIn .36s var(--ease-premium) both; }
@keyframes calendarMonthIn {
  from { opacity:0; transform:translateY(7px); }
  to { opacity:1; transform:translateY(0); }
}
@keyframes calendarGridIn {
  from { opacity:.12; transform:translateY(-5px) scale(.992); }
  to { opacity:1; transform:translateY(0) scale(1); }
}
.calendar-day { transition:background .2s ease,color .2s ease,transform .2s var(--ease-premium); }
@media (hover:hover) and (pointer:fine) {
  .calendar-day:not(.is-outside):hover { transform:scale(1.08); }
}
.calendar-day.is-today::after {
  content:"";
  position:absolute;
  inset:-4px;
  border:1px solid rgba(82,45,130,.28);
  border-radius:50%;
  animation:todayHalo 3.4s ease-in-out infinite;
}
@keyframes todayHalo {
  0%,100% { opacity:.25; transform:scale(.92); }
  50% { opacity:.7; transform:scale(1.06); }
}

/* Mobile drawer links cascade in very lightly when the panel opens. */
@media (max-width:820px) {
  .menu-drawer.open .drawer-main a {
    opacity:0;
    animation:drawerLinkIn .38s var(--ease-premium) forwards;
  }
  .menu-drawer.open .drawer-main a:nth-child(1) { animation-delay:.06s; }
  .menu-drawer.open .drawer-main a:nth-child(2) { animation-delay:.10s; }
  .menu-drawer.open .drawer-main a:nth-child(3) { animation-delay:.14s; }
  .menu-drawer.open .drawer-main a:nth-child(4) { animation-delay:.18s; }
  @keyframes drawerLinkIn {
    from { opacity:0; transform:translateX(10px); }
    to { opacity:1; transform:translateX(0); }
  }
}

/* Footer links have a simple editorial nudge rather than button-like animation. */
@media (hover:hover) and (pointer:fine) {
  .footer-links a,
  .footer-contact a { transition:color .2s ease,transform .3s var(--ease-premium); }
  .footer-links a:hover,
  .footer-contact a:hover { transform:translateX(3px); }
  .footer-facebook { transition:background .2s ease,color .2s ease,transform .35s var(--ease-premium) !important; }
  .footer-facebook:hover { transform:translateY(-3px) rotate(-3deg); }
}

@media (max-width:820px) {
  .hero-content,
  .mission-mark { transform:none !important; }
}

@media (prefers-reduced-motion:reduce) {
  .hero-content,
  .mission-mark { transform:none !important; }
  .hero-media .image-placeholder::before,
  .calendar-day.is-today::after { animation:none !important; }
  .motion-reveal,
  .motion-title,
  .motion-eyebrow {
    opacity:1 !important;
    filter:none !important;
    clip-path:none !important;
    transform:none !important;
    transition:none !important;
  }
  .motion-eyebrow::after { transform:scaleX(1) !important; transition:none !important; }
  .menu-drawer.open .drawer-main a,
  .calendar-grid.calendar-enter,
  .calendar-month.calendar-month-enter { animation:none !important; opacity:1 !important; transform:none !important; }
}


/* ==========================================================
   FLOATING HEADER — compact, premium, and responsive
   Keeps navigation available without a full-width sticky bar.
   ========================================================== */
html { scroll-padding-top: 112px; }
#admissions, #tuition, #contact, #calendar { scroll-margin-top: 112px; }

.site-header {
  position: fixed !important;
  inset: 0 0 auto 0 !important;
  z-index: 90 !important;
  padding: 16px 0 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  pointer-events: none;
}

.site-header.is-scrolled { box-shadow: none !important; }

.header-inner {
  width: min(calc(100% - 40px), var(--max)) !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  pointer-events: none;
}

.brand-lockup {
  pointer-events: auto;
  display: flex !important;
  align-items: center !important;
  width: auto !important;
  max-width: min(520px, 52vw);
  min-height: 72px;
  padding: 8px 18px 8px 11px !important;
  border: 1px solid rgba(39, 27, 45, .12);
  border-radius: 12px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 12px 34px rgba(26, 15, 33, .12);
  -webkit-backdrop-filter: blur(15px) saturate(1.08);
  backdrop-filter: blur(15px) saturate(1.08);
  transition: transform .32s var(--ease-premium), box-shadow .32s ease, background .32s ease;
}

.brand-lockup:hover,
.brand-lockup:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 17px 42px rgba(26, 15, 33, .16);
}

.site-header.is-scrolled .brand-lockup {
  transform: translateY(-3px);
  background: rgba(255,255,255,.93);
  box-shadow: 0 15px 38px rgba(26,15,33,.15);
}

.brand-logo {
  width: 52px !important;
  height: 56px !important;
  padding-right: 13px !important;
  border-right: 1px solid rgba(42,31,47,.15) !important;
  object-fit: contain !important;
}

.brand-name {
  max-width: none !important;
  padding-left: 13px !important;
}

.brand-name strong {
  font-size: clamp(1.12rem, 1.55vw, 1.48rem) !important;
  line-height: 1.08 !important;
  white-space: nowrap;
}

.header-right {
  pointer-events: auto;
  width: auto !important;
  min-width: 0 !important;
  min-height: 62px;
  display: flex !important;
  grid-template-rows: none !important;
  align-items: stretch !important;
  justify-content: flex-end !important;
  border: 1px solid rgba(39, 27, 45, .12) !important;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255,255,255,.96);
  box-shadow: 0 12px 34px rgba(26, 15, 33, .12);
  -webkit-backdrop-filter: blur(15px) saturate(1.08);
  backdrop-filter: blur(15px) saturate(1.08);
  transition: transform .32s var(--ease-premium), box-shadow .32s ease, background .32s ease;
}

.site-header.is-scrolled .header-right {
  transform: translateY(-3px);
  background: rgba(255,255,255,.93);
  box-shadow: 0 15px 38px rgba(26,15,33,.15);
}

@media (min-width: 821px) {
  .utility-nav {
    display: flex !important;
    width: auto !important;
    min-height: 62px !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
    align-items: stretch !important;
    justify-content: flex-end !important;
    border: 0 !important;
    white-space: nowrap !important;
  }

  .utility-nav a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 118px !important;
    padding: 0 22px !important;
    border-left: 1px solid rgba(39,27,45,.10) !important;
    background: transparent !important;
    color: #3f3c43 !important;
    font-size: .86rem !important;
    white-space: nowrap !important;
    transition: color .2s ease, background .2s ease !important;
  }

  .utility-nav a:first-child { border-left: 0 !important; }
  .utility-nav a:hover,
  .utility-nav a:focus-visible {
    color: var(--purple) !important;
    background: rgba(82,45,130,.06) !important;
  }

  .utility-nav a::after {
    left: 20px !important;
    right: 20px !important;
    bottom: 9px !important;
  }

  .primary-actions,
  .menu-button,
  #menuOpen,
  .menu-drawer,
  .menu-drawer.open,
  #menuDrawer {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

@media (max-width: 820px) {
  html { scroll-padding-top: 90px; }
  #admissions, #tuition, #contact, #calendar { scroll-margin-top: 90px; }

  .site-header { padding-top: 10px !important; }
  .header-inner {
    width: calc(100% - 20px) !important;
    gap: 10px !important;
  }

  .brand-lockup {
    min-width: 0;
    min-height: 58px;
    max-width: calc(100% - 66px);
    padding: 6px 11px 6px 8px !important;
    border-radius: 10px;
    box-shadow: 0 9px 26px rgba(26,15,33,.14);
  }

  .brand-logo {
    width: 43px !important;
    height: 46px !important;
    padding-right: 10px !important;
  }

  .brand-name { min-width: 0; padding-left: 10px !important; }
  .brand-name strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: clamp(.94rem, 4.2vw, 1.12rem) !important;
    white-space: nowrap;
  }

  .header-right {
    min-height: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .site-header.is-scrolled .header-right {
    transform: translateY(-2px);
    background: transparent !important;
    box-shadow: none !important;
  }

  .utility-nav { display: none !important; }
  .primary-actions { display: flex !important; }
  .menu-button,
  #menuOpen {
    display: grid !important;
    width: 56px !important;
    min-width: 56px !important;
    height: 56px !important;
    min-height: 56px !important;
    place-items: center !important;
    border: 1px solid rgba(39,27,45,.12) !important;
    border-radius: 11px !important;
    background: rgba(255,255,255,.96) !important;
    box-shadow: 0 9px 26px rgba(26,15,33,.14) !important;
    -webkit-backdrop-filter: blur(15px) saturate(1.08);
    backdrop-filter: blur(15px) saturate(1.08);
    transition: transform .22s var(--ease-premium), background .2s ease, box-shadow .2s ease !important;
    pointer-events: auto !important;
  }

  .menu-button:hover,
  .menu-button:focus-visible {
    transform: translateY(-2px);
    background: #fff !important;
    box-shadow: 0 13px 31px rgba(26,15,33,.18) !important;
  }

  .menu-lines { width: 24px !important; gap: 5px !important; }
  .menu-lines span { height: 2px !important; }
  .menu-lines span:nth-child(2) { width: 17px !important; }
  .menu-drawer.open { display: block !important; }
}

@media (max-width: 390px) {
  .brand-lockup { max-width: calc(100% - 60px); }
  .brand-logo { width: 39px !important; height: 42px !important; padding-right: 8px !important; }
  .brand-name { padding-left: 8px !important; }
  .brand-name strong { font-size: .89rem !important; }
  .menu-button, #menuOpen { width: 52px !important; min-width: 52px !important; height: 52px !important; min-height: 52px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .brand-lockup,
  .header-right,
  .menu-button { transition: none !important; }
}

/* ==========================================================
   MOTION V2 — inspired by current editorial / school sites.
   Distinctive, restrained, and touch-friendly.
   ========================================================== */

/* Logo-only floating brand tile. */
.site-header .brand-lockup {
  position:relative !important;
  width:78px !important;
  min-width:78px !important;
  height:86px !important;
  min-height:86px !important;
  max-width:none !important;
  padding:8px !important;
  display:grid !important;
  place-items:center !important;
  overflow:hidden !important;
  isolation:isolate;
  border:0 !important;
  border-radius:15px !important;
  background:transparent !important;
  box-shadow:0 13px 36px rgba(26,15,33,.13) !important;
  transform-origin:top left;
}
.site-header .brand-lockup::before {
  content:\"\";
  position:absolute;
  width:160%;
  aspect-ratio:1;
  z-index:-2;
  background:conic-gradient(
    from 0deg,
    rgba(82,45,130,.06),
    rgba(82,45,130,.48),
    rgba(46,47,54,.22),
    rgba(82,45,130,.06)
  );
  animation:ccaLogoOrbit 10s linear infinite;
}
.site-header .brand-lockup::after {
  content:\"\";
  position:absolute;
  inset:1px;
  z-index:-1;
  border-radius:14px;
  background:rgba(255,255,255,.965);
  -webkit-backdrop-filter:blur(16px) saturate(1.08);
  backdrop-filter:blur(16px) saturate(1.08);
}
.site-header .brand-logo {
  position:relative;
  z-index:2;
  width:auto !important;
  height:68px !important;
  max-width:46px !important;
  padding:0 !important;
  border:0 !important;
  object-fit:contain !important;
  transform:translateZ(0);
  transition:transform .48s var(--ease-premium), filter .35s ease !important;
}
.site-header .brand-name { display:none !important; }
.site-header.is-scrolled .brand-lockup {
  transform:translateY(-2px) scale(.92) !important;
  box-shadow:0 15px 39px rgba(26,15,33,.16) !important;
}
@keyframes ccaLogoOrbit { to { transform:rotate(360deg); } }

@media (hover:hover) and (pointer:fine) {
  .site-header .brand-lockup:hover .brand-logo {
    transform:translateY(-2px) scale(1.055) !important;
    filter:drop-shadow(0 7px 8px rgba(82,45,130,.14));
  }
}

/* Active navigation is useful motion: the page tells you where you are. */
@media (min-width:821px) {
  .utility-nav a { position:relative; }
  .utility-nav a.is-current {
    color:var(--purple) !important;
    background:rgba(82,45,130,.055) !important;
  }
  .utility-nav a.is-current::after {
    transform:scaleX(1) !important;
    transform-origin:left center !important;
  }
}
.drawer-main a.is-current { color:#fff; }
.drawer-main a.is-current::after { opacity:1; transform:translateX(0); }

/* Media enters with a clean vertical curtain instead of a generic fade. */
.media-reveal {
  clip-path:inset(0 0 100% 0);
  transform:translate3d(0,18px,0) scale(1.025);
  transform-origin:center center;
  transition:
    clip-path 1.02s var(--ease-premium),
    transform 1.02s var(--ease-premium);
  will-change:clip-path,transform;
}
.media-reveal.is-visible {
  clip-path:inset(0 0 0 0);
  transform:translate3d(0,0,0) scale(1);
}

/* A fine purple stroke draws in as each pathway arrives. */
.story::before {
  content:\"\";
  position:absolute;
  top:0; left:0;
  z-index:4;
  width:100%;
  height:3px;
  background:#cbb5dc;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .85s var(--ease-premium) .18s;
  pointer-events:none;
}
.story.is-visible::before { transform:scaleX(1); }

/* Pointer spotlight: desktop-only, tiny depth cue with no UI cost on touch. */
@media (hover:hover) and (pointer:fine) {
  .image-placeholder {
    background-image:radial-gradient(
      circle at var(--spot-x,50%) var(--spot-y,50%),
      rgba(255,255,255,.15),
      rgba(255,255,255,.045) 16%,
      transparent 34%
    );
    background-blend-mode:screen;
  }
}

/* Section headings feel slightly more editorial as their underline breathes in. */
.motion-title { position:relative; }
.motion-title::after {
  content:\"\";
  display:block;
  width:clamp(42px,6vw,78px);
  height:1px;
  margin-top:22px;
  background:rgba(82,45,130,.4);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .85s var(--ease-premium) .24s;
}
.motion-title.is-visible::after { transform:scaleX(1); }
.statement .motion-title::after { background:rgba(255,255,255,.32); }

/* Subtle depth on the calendar: active controls feel tactile, grid stays calm. */
.calendar-widget {
  transition:transform .5s var(--ease-premium), box-shadow .5s var(--ease-premium), border-color .35s ease !important;
}
@media (hover:hover) and (pointer:fine) {
  .calendar-widget:hover {
    transform:translateY(-4px) !important;
    box-shadow:0 24px 55px rgba(29,16,38,.11) !important;
    border-color:rgba(82,45,130,.32) !important;
  }
}

/* Responsive: preserve the floating-logo idea without wasting phone space. */
@media (max-width:820px) {
  .site-header .brand-lockup {
    width:60px !important;
    min-width:60px !important;
    height:68px !important;
    min-height:68px !important;
    padding:7px !important;
    border-radius:13px !important;
  }
  .site-header .brand-lockup::after { border-radius:12px; }
  .site-header .brand-logo {
    width:auto !important;
    height:54px !important;
    max-width:36px !important;
  }
  .site-header.is-scrolled .brand-lockup { transform:translateY(-1px) scale(.94) !important; }
  .media-reveal {
    transform:translate3d(0,12px,0) scale(1.012);
    transition-duration:.82s;
  }
  .motion-title::after { margin-top:16px; }
}

@media (max-width:390px) {
  .site-header .brand-lockup {
    width:56px !important;
    min-width:56px !important;
    height:64px !important;
    min-height:64px !important;
  }
  .site-header .brand-logo { height:50px !important; max-width:33px !important; }
}

@media (prefers-reduced-motion:reduce) {
  .site-header .brand-lockup::before { animation:none !important; }
  .media-reveal { clip-path:none !important; transform:none !important; transition:none !important; }
  .story::before, .motion-title::after { transform:scaleX(1) !important; transition:none !important; }
}

/* ==========================================================
   MOTION V3 — distinctive, calm, and purpose-built for CCA.
   Inspired by editorial/school motion patterns, without scroll-jacking.
   ========================================================== */

/* Kinetic hero typography: three beats rather than one generic fade. */
.hero-tag.hero-kinetic {
  animation:none !important;
  opacity:1 !important;
  transform:none !important;
}
.hero-kinetic .hero-line {
  display:block;
  overflow:hidden;
  padding:.04em 0 .08em;
}
.hero-kinetic .hero-word {
  display:inline-block;
  opacity:0;
  filter:blur(7px);
  transform:translate3d(0,1.02em,0) rotate(.6deg);
  transition:
    opacity .56s ease,
    filter .82s ease,
    transform .92s var(--ease-premium);
  will-change:transform,opacity,filter;
}
body.motion-ready .hero-kinetic .hero-word {
  opacity:1;
  filter:blur(0);
  transform:translate3d(0,0,0) rotate(0);
}
body.motion-ready .hero-kinetic .hero-line:nth-child(1) .hero-word:nth-child(1) { transition-delay:.08s; }
body.motion-ready .hero-kinetic .hero-line:nth-child(1) .hero-word:nth-child(2) { transition-delay:.18s; }
body.motion-ready .hero-kinetic .hero-line:nth-child(2) .hero-word { transition-delay:.30s; }

/* A calm ambient depth field behind the hero placeholder. */
.hero-media .image-placeholder::after {
  content:"";
  position:absolute;
  inset:-12%;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 18% 28%, rgba(255,255,255,.16), transparent 17%),
    radial-gradient(circle at 78% 68%, rgba(82,45,130,.32), transparent 24%),
    linear-gradient(128deg, transparent 34%, rgba(255,255,255,.08) 49%, transparent 64%);
  transform:translate3d(var(--hero-ambient-x,-2%),var(--hero-ambient-y,0%),0) scale(1.05);
  transition:transform .16s linear;
  mix-blend-mode:screen;
}

/* One-time section wash: creates continuity between sections without becoming a gimmick. */
.motion-zone {
  position:relative;
  isolation:isolate;
}
.motion-zone::before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:-28%;
  width:46%;
  height:100%;
  pointer-events:none;
  background:linear-gradient(100deg, transparent 0%, rgba(82,45,130,.035) 46%, rgba(82,45,130,.08) 54%, transparent 100%);
  transform:translate3d(-115%,0,0) skewX(-8deg);
  opacity:0;
}
.motion-zone.zone-visible::before {
  animation:ccaSectionWash 1.18s var(--ease-premium) both;
}
@keyframes ccaSectionWash {
  0% { opacity:0; transform:translate3d(-115%,0,0) skewX(-8deg); }
  18% { opacity:1; }
  100% { opacity:0; transform:translate3d(340%,0,0) skewX(-8deg); }
}
.statement.motion-zone::before {
  background:linear-gradient(100deg, transparent 0%, rgba(255,255,255,.025) 46%, rgba(255,255,255,.095) 54%, transparent 100%);
}

/* Anchor arrival cue: briefly confirms where a navigation action landed. */
#admissions, #tuition, #contact, #about, #academics, #calendar { position:relative; }
.section-arrival::after {
  content:"";
  position:absolute;
  z-index:15;
  left:0;
  top:0;
  width:100%;
  height:2px;
  pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(82,45,130,.72), transparent);
  transform-origin:left center;
  animation:ccaArrival 1.1s var(--ease-premium) both;
}
.statement.section-arrival::after,
.footer.section-arrival::after {
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.72), transparent);
}
@keyframes ccaArrival {
  0% { opacity:0; transform:scaleX(.08); }
  22% { opacity:1; }
  70% { opacity:.8; transform:scaleX(1); }
  100% { opacity:0; transform:scaleX(1); }
}

/* Refined floating logo: animated border is slower and calmer, with a soft color bloom. */
.site-header .brand-lockup::before { animation-duration:16s !important; }
.site-header .brand-lockup {
  transition:transform .42s var(--ease-premium), box-shadow .42s ease !important;
}
.site-header .brand-lockup .brand-logo { filter:drop-shadow(0 6px 10px rgba(82,45,130,.10)); }

/* Interactive controls feel tactile, not game-like. */
.calendar-control, .calendar-today { isolation:isolate; }
.calendar-control .tap-ripple, .calendar-today .tap-ripple {
  position:absolute;
  width:12px;
  height:12px;
  border-radius:50%;
  background:currentColor;
  opacity:.14;
  pointer-events:none;
  transform:translate(-50%,-50%) scale(0);
  animation:ccaRipple .48s ease-out forwards;
  z-index:-1;
}
@keyframes ccaRipple { to { opacity:0; transform:translate(-50%,-50%) scale(9); } }

/* Desktop-only magnetic micro motion. Touch layouts remain perfectly still. */
@media (hover:hover) and (pointer:fine) {
  .magnetic-ui {
    translate:var(--mag-x,0px) var(--mag-y,0px);
    transition:translate .18s ease-out, color .2s ease, background .2s ease;
    will-change:translate;
  }
}

@media (max-width:820px) {
  .hero-kinetic .hero-word {
    filter:blur(4px);
    transform:translate3d(0,.72em,0);
    transition-duration:.66s;
  }
  .motion-zone::before { display:none; }
  .hero-media .image-placeholder::after { opacity:.72; }
}

@media (prefers-reduced-motion:reduce) {
  .hero-kinetic .hero-word {
    opacity:1 !important;
    filter:none !important;
    transform:none !important;
    transition:none !important;
  }
  .motion-zone::before,
  .section-arrival::after,
  .calendar-control .tap-ripple,
  .calendar-today .tap-ripple { display:none !important; animation:none !important; }
  .hero-media .image-placeholder::after { transform:none !important; transition:none !important; }
  .magnetic-ui { translate:0 0 !important; transition:none !important; }
}

/* Logo-only colorway: white over the hero, full-color once the page moves. */
.site-header .brand-lockup {
  box-shadow:none !important;
  background:transparent !important;
}
.site-header .brand-lockup::before {
  opacity:.26;
  filter:blur(10px);
  transition:opacity .42s ease, filter .42s ease;
}
.site-header .brand-lockup::after {
  z-index:0 !important;
  inset:0 !important;
  background:rgba(255,255,255,0) !important;
  border:1px solid rgba(255,255,255,0) !important;
  box-shadow:none !important;
  transition:background .42s ease,border-color .42s ease,box-shadow .42s ease;
}
.site-header .brand-logo {
  z-index:2 !important;
  filter:brightness(0) invert(1) drop-shadow(0 7px 12px rgba(82,45,130,.22)) !important;
  transition:transform .48s var(--ease-premium),filter .42s ease !important;
}
.site-header.is-scrolled .brand-lockup {
  box-shadow:0 13px 34px rgba(26,15,33,.14) !important;
}
.site-header.is-scrolled .brand-lockup::before {
  opacity:.48;
  filter:blur(2px);
}
.site-header.is-scrolled .brand-lockup::after {
  background:rgba(255,255,255,.94) !important;
  border-color:rgba(39,27,45,.11) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.54) !important;
}
.site-header.is-scrolled .brand-logo {
  filter:drop-shadow(0 6px 10px rgba(82,45,130,.12)) !important;
}
@media (prefers-reduced-motion:reduce) {
  .site-header .brand-lockup::before,
  .site-header .brand-lockup::after,
  .site-header .brand-logo { transition:none !important; }
}

/* The accessibility panel's Content Scaling can make the page half as big
   again, which on a phone leaves about 260px for the content. Neither rule
   below changes the page at its normal size: each only acts on a box
   narrower than any screen 320px or wider gives it on its own (the headline
   is 284px there, the footer 320px). */
.hero-tag.hero-kinetic { container-type:inline-size; }
@container (max-width:270px) {
  .hero-kinetic .hero-word { font-size:13cqi; }
}
.footer-clean { container-type:inline-size; }
@container (max-width:300px) {
  .footer-layout { grid-template-columns:1fr 1fr; }
  .footer-acsi { grid-column:1 / -1; justify-content:flex-start; padding-left:0; border-left:0; }
}

/* The accessibility panel's Stop Animations switch: every reduced-motion rule
   above, again under the attribute the panel writes onto <html>. The panel
   stops the motion itself; these say what each thing looks like at rest, so
   nothing is left hidden. They also cover the scripts: each one only sets
   classes and inline styles that these rules override. Generated from the
   blocks above; when one changes, change its twin here. */
html[data-a11y-stop-anim] { scroll-behavior:auto; }
html[data-a11y-stop-anim] *,
html[data-a11y-stop-anim] *::before,
html[data-a11y-stop-anim] *::after { transition:none !important; }
html[data-a11y-stop-anim] .brand-lockup,
html[data-a11y-stop-anim] .hero-tag,
html[data-a11y-stop-anim] .hero-bottom,
html[data-a11y-stop-anim] .hero-bottom::before { animation:none !important; }
html[data-a11y-stop-anim] .will-reveal { opacity:1 !important; transform:none !important; }
html[data-a11y-stop-anim] .calendar-widget,
html[data-a11y-stop-anim] .story,
html[data-a11y-stop-anim] .update-item { transform:none !important; }
html[data-a11y-stop-anim] .menu-drawer,
html[data-a11y-stop-anim] .drawer-shell { transition: none !important; }
html[data-a11y-stop-anim] .hero-content,
html[data-a11y-stop-anim] .mission-mark { transform:none !important; }
html[data-a11y-stop-anim] .hero-media .image-placeholder::before,
html[data-a11y-stop-anim] .calendar-day.is-today::after { animation:none !important; }
html[data-a11y-stop-anim] .motion-reveal,
html[data-a11y-stop-anim] .motion-title,
html[data-a11y-stop-anim] .motion-eyebrow { opacity:1 !important; filter:none !important; clip-path:none !important; transform:none !important; transition:none !important; }
html[data-a11y-stop-anim] .motion-eyebrow::after { transform:scaleX(1) !important; transition:none !important; }
html[data-a11y-stop-anim] .menu-drawer.open .drawer-main a,
html[data-a11y-stop-anim] .calendar-grid.calendar-enter,
html[data-a11y-stop-anim] .calendar-month.calendar-month-enter { animation:none !important; opacity:1 !important; transform:none !important; }
html[data-a11y-stop-anim] .brand-lockup,
html[data-a11y-stop-anim] .header-right,
html[data-a11y-stop-anim] .menu-button { transition: none !important; }
html[data-a11y-stop-anim] .site-header .brand-lockup::before { animation:none !important; }
html[data-a11y-stop-anim] .media-reveal { clip-path:none !important; transform:none !important; transition:none !important; }
html[data-a11y-stop-anim] .story::before,
html[data-a11y-stop-anim] .motion-title::after { transform:scaleX(1) !important; transition:none !important; }
html[data-a11y-stop-anim] .hero-kinetic .hero-word { opacity:1 !important; filter:none !important; transform:none !important; transition:none !important; }
html[data-a11y-stop-anim] .motion-zone::before,
html[data-a11y-stop-anim] .section-arrival::after,
html[data-a11y-stop-anim] .calendar-control .tap-ripple,
html[data-a11y-stop-anim] .calendar-today .tap-ripple { display:none !important; animation:none !important; }
html[data-a11y-stop-anim] .hero-media .image-placeholder::after { transform:none !important; transition:none !important; }
html[data-a11y-stop-anim] .magnetic-ui { translate:0 0 !important; transition:none !important; }
html[data-a11y-stop-anim] .site-header .brand-lockup::before,
html[data-a11y-stop-anim] .site-header .brand-lockup::after,
html[data-a11y-stop-anim] .site-header .brand-logo { transition:none !important; }