/* ==========================================================================
   RESMA — Real Estate Studies and Management Academy
   Design System — "From Experience. For The Future."
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,500&family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

/* ---------------------------------- Tokens ---------------------------------- */
:root{
  /* Brand colours — extracted from the official RESMA mark */
  --coral: #EF795F;
  --coral-600: #DD6347;
  --coral-700: #C65536;
  --coral-100: #FCEAE4;
  --coral-050: #FDF4F1;

  --charcoal: #191A19;
  --charcoal-800: #232423;
  --charcoal-600: #4A4B49;
  --charcoal-400: #777777;

  --warm-white: #F8F7F4;
  --white: #FFFFFF;
  --muted-grey: #777777;
  --line: rgba(25,26,25,0.10);
  --line-on-dark: rgba(248,247,244,0.14);

  --ink: #1C1C1A;
  --ink-soft: #52534F;

  /* Type */
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  --fs-hero: clamp(2.6rem, 6.4vw, 6.4rem);
  --fs-display: clamp(2.1rem, 4.6vw, 4rem);
  --fs-h2: clamp(1.8rem, 3.4vw, 3rem);
  --fs-h3: clamp(1.3rem, 2vw, 1.75rem);
  --fs-h4: clamp(1.1rem, 1.4vw, 1.3rem);
  --fs-lead: clamp(1.1rem, 1.6vw, 1.4rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9rem;
  --fs-micro: 0.75rem;

  /* Motion */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 320ms;
  --dur-med: 620ms;
  --dur-slow: 900ms;

  /* Spacing / shape */
  --section-pad: clamp(4.5rem, 9vw, 9rem);
  --container: 1320px;
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 10px;
  --shadow-soft: 0 40px 80px -40px rgba(25,26,25,0.25);
  --shadow-card: 0 24px 48px -28px rgba(25,26,25,0.22);
}

/* ---------------------------------- Reset ---------------------------------- */
*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p,figure{ margin:0; }
button{ font-family: inherit; cursor:pointer; }
input,textarea,select{ font-family: inherit; font-size: 1rem; }
::selection{ background: var(--coral); color: var(--white); }

.container{ max-width: var(--container); margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 3rem); }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ---------------------------------- Type ---------------------------------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family: var(--font-body); font-weight:600;
  font-size: var(--fs-micro); letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--coral-700);
}
.eyebrow::before{ content:""; width:28px; height:1.5px; background: var(--coral); display:inline-block; }
.eyebrow--on-dark{ color: var(--coral); }
.eyebrow--center{ justify-content:center; }

h1,h2,h3,h4,.font-display{ font-family: var(--font-display); font-weight:500; letter-spacing:-0.01em; color: var(--ink); line-height:1.08; }
.display-hero{ font-size: var(--fs-hero); font-weight:500; line-height:1.02; letter-spacing:-0.015em; }
.display-1{ font-size: var(--fs-display); font-weight:500; line-height:1.06; }
.display-2{ font-size: var(--fs-h2); font-weight:500; line-height:1.1; }
.display-3{ font-size: var(--fs-h3); font-weight:500; }
.lead{ font-size: var(--fs-lead); color: var(--ink-soft); line-height:1.55; font-weight:400; }
.text-muted{ color: var(--muted-grey); }
.text-on-dark{ color: rgba(248,247,244,0.82); }
.italic{ font-style: italic; }
.small-caps-label{ font-size: var(--fs-micro); letter-spacing: 0.18em; text-transform:uppercase; font-weight:600; color: var(--charcoal-400); }

/* ---------------------------------- Buttons ---------------------------------- */
.btn{
  position:relative; display:inline-flex; align-items:center; gap:0.75rem;
  padding: 0.3rem 0.3rem 0.3rem 1.5rem; border-radius: 999px;
  font-weight:600; font-size: 0.95rem; white-space:nowrap;
  border: 1px solid transparent; background:none;
  transition: transform var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.btn span.btn__icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:2.4rem; height:2.4rem; border-radius:50%;
  transition: transform var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
  flex-shrink:0;
}
.btn:active{ transform: scale(0.97); }

.btn--primary{ background: var(--charcoal); color: var(--white); }
.btn--primary .btn__icon{ background: var(--coral); color: var(--white); }
.btn--primary:hover{ background: var(--ink); box-shadow: var(--shadow-card); }
.btn--primary:hover .btn__icon{ transform: translate(2px,-2px) scale(1.06); }

.btn--coral{ background: var(--coral); color: var(--white); }
.btn--coral .btn__icon{ background: rgba(255,255,255,0.22); color:var(--white); }
.btn--coral:hover{ background: var(--coral-700); box-shadow: 0 24px 48px -24px rgba(239,121,95,0.55); }
.btn--coral:hover .btn__icon{ transform: translate(2px,-2px) scale(1.06); }

.btn--outline{ border-color: rgba(25,26,25,0.22); color: var(--ink); padding-left:1.5rem; }
.btn--outline .btn__icon{ background: var(--warm-white); color: var(--ink); }
.btn--outline:hover{ border-color: var(--ink); }
.btn--outline:hover .btn__icon{ background: var(--charcoal); color:var(--white); transform: translate(2px,-2px) scale(1.06); }

.btn--outline-light{ border-color: rgba(248,247,244,0.35); color: var(--white); padding-left:1.5rem; }
.btn--outline-light .btn__icon{ background: rgba(248,247,244,0.14); color: var(--white); }
.btn--outline-light:hover{ border-color: var(--white); }
.btn--outline-light:hover .btn__icon{ background: var(--coral); transform: translate(2px,-2px) scale(1.06); }

.btn--ghost{ padding: 0.6rem 0; color: var(--ink); gap:0.5rem; }
.btn--ghost .btn__icon{ width:1.9rem; height:1.9rem; background: var(--coral-100); color: var(--coral-700); }
.btn--ghost:hover .btn__icon{ background: var(--coral); color: var(--white); transform: translateX(3px); }

.btn--sm{ font-size:0.85rem; padding:0.25rem 0.25rem 0.25rem 1.1rem; }
.btn--sm .btn__icon{ width:2rem; height:2rem; }

/* ---------------------------------- Layout helpers ---------------------------------- */
.section{ padding: var(--section-pad) 0; position:relative; }
.section--tight{ padding: clamp(3rem,6vw,5rem) 0; }
.section--dark{ background: var(--charcoal); color: rgba(248,247,244,0.92); }
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4{ color: var(--white); }
.section--alt{ background: var(--warm-white); }
.section--coral{ background: var(--coral); color: var(--white); }
.section--coral h1,.section--coral h2,.section--coral h3{ color:var(--white); }

.header-row{ display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; flex-wrap:wrap; margin-bottom: clamp(2.5rem,5vw,4rem); }
.header-row .lead{ max-width:460px; }

.grid{ display:grid; gap: clamp(1.25rem, 2.4vw, 2.25rem); }
.grid-2{ grid-template-columns: repeat(2,1fr); }
.grid-3{ grid-template-columns: repeat(3,1fr); }
.grid-4{ grid-template-columns: repeat(4,1fr); }
@media (max-width: 1000px){ .grid-3{ grid-template-columns: repeat(2,1fr); } .grid-4{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px){ .grid-2,.grid-3,.grid-4{ grid-template-columns: 1fr; } }

.divider{ height:1px; background: var(--line); border:0; margin: clamp(2.5rem,5vw,4.5rem) 0; }
.divider--on-dark{ background: var(--line-on-dark); }

.pill-badge{
  display:inline-flex; align-items:center; gap:.5rem; padding:.45rem 1rem;
  border:1px solid var(--line); border-radius:999px; font-size:var(--fs-micro);
  letter-spacing:.14em; text-transform:uppercase; font-weight:600; color: var(--ink-soft);
}

/* ---------------------------------- Reveal animation ---------------------------------- */
.reveal{ opacity:0; transform: translateY(32px); filter: blur(6px); transition: opacity var(--dur-slow) var(--ease-soft), transform var(--dur-slow) var(--ease-soft), filter var(--dur-slow) var(--ease-soft); }
.reveal.is-visible{ opacity:1; transform:none; filter:blur(0); }
.reveal-stagger > *{ opacity:0; transform: translateY(28px); transition: opacity var(--dur-med) var(--ease-soft), transform var(--dur-med) var(--ease-soft); }
.reveal-stagger.is-visible > *{ opacity:1; transform:none; }
.reveal-stagger.is-visible > *:nth-child(1){ transition-delay: 0ms; }
.reveal-stagger.is-visible > *:nth-child(2){ transition-delay: 90ms; }
.reveal-stagger.is-visible > *:nth-child(3){ transition-delay: 180ms; }
.reveal-stagger.is-visible > *:nth-child(4){ transition-delay: 270ms; }
.reveal-stagger.is-visible > *:nth-child(5){ transition-delay: 360ms; }
.reveal-stagger.is-visible > *:nth-child(6){ transition-delay: 450ms; }

/* ==========================================================================
   Header / Navigation
   ========================================================================== */
.site-header{
  position: sticky; top:0; z-index: 90;
  background: rgba(248,247,244,0.88); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), padding var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.site-header.is-scrolled{ box-shadow: 0 10px 30px -22px rgba(25,26,25,0.35); border-color: var(--line); background: rgba(248,247,244,0.97); }
.header-inner{ max-width: var(--container); margin:0 auto; padding: 0 clamp(1.25rem,4vw,3rem); display:flex; align-items:center; justify-content:space-between; gap:1.5rem; height:88px; transition: height var(--dur-fast) var(--ease); }
.site-header.is-scrolled .header-inner{ height:72px; }

.brand{ display:flex; align-items:center; gap:.65rem; flex-shrink:0; }
.brand img{ height:44px; width:auto; transition: height var(--dur-fast) var(--ease); }
.site-header.is-scrolled .brand img{ height:38px; }

.main-nav{ display:flex; align-items:center; gap:0.25rem; }
.main-nav > li{ position:relative; }
.main-nav > li > a, .main-nav > li > button{
  display:flex; align-items:center; gap:.3rem; background:none; border:0;
  padding: 0.9rem 1rem; font-size:0.92rem; font-weight:600; color: var(--ink);
  position:relative;
}
.main-nav > li > a::after, .main-nav > li > button::after{
  content:""; position:absolute; left:1rem; right:1rem; bottom: 0.55rem; height:2px; background: var(--coral);
  transform: scaleX(0); transform-origin:left; transition: transform var(--dur-fast) var(--ease);
}
.main-nav > li > a:hover::after, .main-nav > li > button:hover::after, .main-nav > li.is-active > a::after{ transform: scaleX(1); }
.main-nav > li.is-active > a{ color: var(--coral-700); }
.nav-caret{ width:9px; height:9px; transition: transform var(--dur-fast) var(--ease); }
.main-nav > li:hover .nav-caret{ transform: rotate(180deg); }

.mega-menu{
  position:absolute; top: calc(100% + 10px); left:50%; transform: translate(-50%,10px);
  min-width: 300px; background: var(--white); border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft); border:1px solid var(--line);
  padding: 1.25rem; opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), visibility var(--dur-fast);
  z-index: 50;
}
.main-nav > li:hover .mega-menu, .main-nav > li:focus-within .mega-menu{ opacity:1; visibility:visible; pointer-events:auto; transform: translate(-50%,0); }
.mega-menu a{ display:flex; flex-direction:column; gap:.15rem; padding:.7rem .85rem; border-radius:10px; transition: background var(--dur-fast) var(--ease); }
.mega-menu a:hover{ background: var(--coral-050); }
.mega-menu a strong{ font-size:0.92rem; font-weight:600; }
.mega-menu a span{ font-size:0.8rem; color: var(--muted-grey); }
.mega-menu--wide{ min-width: 560px; }
.mega-menu--wide .mega-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.25rem .5rem; }

.header-actions{ display:flex; align-items:center; gap:0.6rem; }
.header-actions .btn{ }
.icon-link{ display:flex; align-items:center; justify-content:center; width:2.6rem; height:2.6rem; border-radius:50%; border:1px solid var(--line); transition: all var(--dur-fast) var(--ease); }
.icon-link:hover{ background: var(--charcoal); color:var(--white); border-color:var(--charcoal); }

.nav-toggle{ display:none; width:48px; height:48px; border-radius:50%; border:1px solid var(--line); background:none; align-items:center; justify-content:center; position:relative; flex-shrink:0; }
.nav-toggle span{ position:absolute; width:18px; height:1.5px; background: var(--ink); transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease); }
.nav-toggle span:nth-child(1){ transform: translateY(-5px); }
.nav-toggle span:nth-child(3){ transform: translateY(5px); }
.nav-toggle.is-open span:nth-child(1){ transform: rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ transform: rotate(-45deg); }

.mobile-panel{
  position:fixed; inset:0; top:0; background: rgba(25,26,25,0.97); backdrop-filter: blur(20px);
  z-index: 120; display:flex; flex-direction:column; padding: 1.5rem clamp(1.25rem,6vw,3rem) 2.5rem;
  opacity:0; visibility:hidden; transition: opacity var(--dur-med) var(--ease-soft), visibility var(--dur-med);
  overflow-y:auto;
}
.mobile-panel.is-open{ opacity:1; visibility:visible; }
.mobile-panel-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:2.5rem; }
.mobile-panel-top img{ height:36px; filter: brightness(0) invert(1); }
.mobile-nav{ display:flex; flex-direction:column; }
.mobile-nav > li{ border-bottom:1px solid var(--line-on-dark); }
.mobile-nav > li > a, .mobile-nav details summary{ display:flex; justify-content:space-between; align-items:center; padding: 1.1rem 0; color:var(--white); font-family:var(--font-display); font-size:1.4rem; }
.mobile-nav details summary{ cursor:pointer; list-style:none; }
.mobile-nav details summary::-webkit-details-marker{ display:none; }
.mobile-nav details[open] summary{ color: var(--coral); }
.mobile-nav .sub-links{ padding: 0 0 1rem 0; display:flex; flex-direction:column; gap:.65rem; }
.mobile-nav .sub-links a{ color: rgba(248,247,244,0.72); font-size:0.98rem; }
.mobile-panel-cta{ margin-top:2rem; display:flex; flex-wrap:wrap; gap:.75rem; }
.mobile-panel .reveal-stagger > li{ opacity:1; transform:none; }
.mobile-nav > li{
  opacity:0; transform: translateY(18px); transition: opacity var(--dur-med) var(--ease-soft), transform var(--dur-med) var(--ease-soft);
}
.mobile-panel.is-open .mobile-nav > li{ opacity:1; transform:none; }
.mobile-panel.is-open .mobile-nav > li:nth-child(1){ transition-delay:60ms; }
.mobile-panel.is-open .mobile-nav > li:nth-child(2){ transition-delay:110ms; }
.mobile-panel.is-open .mobile-nav > li:nth-child(3){ transition-delay:160ms; }
.mobile-panel.is-open .mobile-nav > li:nth-child(4){ transition-delay:210ms; }
.mobile-panel.is-open .mobile-nav > li:nth-child(5){ transition-delay:260ms; }
.mobile-panel.is-open .mobile-nav > li:nth-child(6){ transition-delay:310ms; }
.mobile-panel.is-open .mobile-nav > li:nth-child(7){ transition-delay:360ms; }

@media (max-width: 1080px){
  .main-nav, .header-actions .btn--outline, .header-actions .btn--primary span.btn-text-full{ display:none; }
  .nav-toggle{ display:flex; }
  .header-actions .btn--coral{ display:inline-flex; }
}
@media (max-width: 480px){
  .header-actions .btn--coral .btn-label{ display:none; }
  .header-actions .btn--coral{ padding:.5rem; }
  .header-actions .btn--coral .btn__icon{ margin:0; }
}

/* breadcrumb / page header (internal pages) */
.page-hero{ padding: clamp(7rem,14vw,10rem) 0 clamp(3rem,6vw,5rem); background: var(--charcoal); color:var(--white); position:relative; overflow:hidden; }
.page-hero .container{ position:relative; z-index:2; }
.page-hero__bg{ position:absolute; inset:0; opacity:0.62; background-size:cover; background-position:center; transform:scale(1.03); }
.page-hero__bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(25,26,25,0.94) 0%, rgba(25,26,25,0.78) 28%, rgba(25,26,25,0.42) 58%, rgba(25,26,25,0.18) 100%),
    linear-gradient(180deg, rgba(25,26,25,0.05) 0%, rgba(25,26,25,0.1) 55%, rgba(25,26,25,0.85) 100%);
}
@media (max-width: 760px){ .page-hero__bg::after{ background: linear-gradient(180deg, rgba(25,26,25,0.78) 0%, rgba(25,26,25,0.6) 45%, rgba(25,26,25,0.92) 100%); } }
.breadcrumb{ display:flex; align-items:center; gap:.5rem; font-size:var(--fs-small); color: rgba(248,247,244,0.6); margin-bottom:1.25rem; }
.breadcrumb a:hover{ color: var(--coral); }

/* ==========================================================================
   Cards & components
   ========================================================================== */

/* Double-bezel shell used across program / landscape / faculty cards */
.bezel{ background: var(--warm-white); border-radius: calc(var(--radius-lg) + 8px); padding:8px; }
.bezel__core{ background: var(--white); border-radius: var(--radius-lg); overflow:hidden; box-shadow: inset 0 1px 0 rgba(255,255,255,0.6); height:100%; }

.card{
  background: var(--white); border:1px solid var(--line); border-radius: var(--radius-lg);
  overflow:hidden; transition: transform var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease), border-color var(--dur-med) var(--ease);
  height:100%; display:flex; flex-direction:column;
}
/* Hover lift/zoom is an affordance that a card is clickable — restrict it to <a class="card">
   so purely informational <div class="card"> blocks (e.g. static profile tiles, banners)
   never imply interactivity they don't have. */
a.card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-card); border-color: rgba(25,26,25,0.02); cursor:pointer; }
.card__media{ position:relative; aspect-ratio: 4/3; overflow:hidden; background:var(--charcoal); }
.card__media img{ width:100%; height:100%; object-fit:cover; transition: transform 1.1s var(--ease-soft); }
a.card:hover .card__media img{ transform: scale(1.07); }
.card__tag{ position:absolute; top:1rem; left:1rem; background: rgba(248,247,244,0.92); backdrop-filter: blur(6px); padding:.35rem .8rem; border-radius:999px; font-size:0.7rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color: var(--coral-700); z-index:2; }
.card__body{ padding: 1.6rem; display:flex; flex-direction:column; gap:.6rem; flex:1; }
.card__body h3{ font-size: 1.25rem; }
.card__body p{ color: var(--muted-grey); font-size: 0.95rem; line-height:1.6; flex:1; }
.card__meta{ display:flex; gap:1rem; font-size:0.8rem; color: var(--charcoal-400); font-weight:600; }
.card__link{ display:inline-flex; align-items:center; gap:.4rem; font-weight:700; font-size:0.9rem; color: var(--ink); margin-top:.4rem; }
.card__link svg{ transition: transform var(--dur-fast) var(--ease); }
a.card:hover .card__link svg{ transform: translateX(4px); }

/* Process / Learning philosophy timeline */
.process-rail{ display:grid; grid-template-columns: repeat(6, 1fr); gap:1px; background: var(--line-on-dark); border-radius: var(--radius-lg); overflow:hidden; }
.process-step{ background: var(--charcoal); padding: 2.2rem 1.5rem; min-height: 280px; display:flex; flex-direction:column; justify-content:space-between; gap:1.5rem; transition: background var(--dur-med) var(--ease); position:relative; }
.process-step:hover{ background: #121312; }
.process-step .num{ font-family: var(--font-display); font-size:2.6rem; color: var(--coral); line-height:1; }
.process-step h4{ color:var(--white); font-size:1.05rem; letter-spacing:.04em; text-transform:uppercase; font-family:var(--font-body); font-weight:700; }
.process-step p{ color: rgba(248,247,244,0.65); font-size:0.88rem; line-height:1.55; }
@media (max-width: 1000px){ .process-rail{ grid-template-columns: repeat(3,1fr); } }
@media (max-width: 620px){ .process-rail{ grid-template-columns: 1fr; } .process-step{ min-height:unset; } }

/* Stats */
.stat-row{ display:grid; grid-template-columns: repeat(4,1fr); gap: clamp(1.5rem,3vw,2.5rem); }
.stat b{ display:block; font-family: var(--font-display); font-size: clamp(2.2rem,4vw,3.4rem); color: var(--coral); font-weight:500; line-height:1; }
.stat span{ display:block; margin-top:.6rem; font-size:0.85rem; letter-spacing:.05em; color: rgba(248,247,244,0.65); }
@media (max-width:760px){ .stat-row{ grid-template-columns: repeat(2,1fr); } }

/* Split / editorial sections */
.split{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,5rem); align-items:center; }
.split.reverse{ direction: rtl; } .split.reverse > *{ direction: ltr; }
@media (max-width: 880px){ .split{ grid-template-columns: 1fr; } .split.reverse{ direction:ltr; } }
.media-frame{ position:relative; border-radius: var(--radius-lg); overflow:hidden; aspect-ratio: 5/4; }
.media-frame img{ width:100%; height:100%; object-fit:cover; }
.media-frame--tall{ aspect-ratio: 4/5; }
.media-frame--wide{ aspect-ratio: 16/9; }

/* Bento gallery (learning environment, etc.) */
.bento-gallery{ display:grid; grid-template-columns: 1.3fr 1fr; grid-auto-rows:220px; gap:1.25rem; }
.bento-gallery .media-frame{ aspect-ratio:auto; height:100%; }
.bento-gallery .media-frame--tall{ grid-row: span 2; }
@media (max-width: 760px){ .bento-gallery{ grid-template-columns: 1fr; grid-auto-rows:240px; } .bento-gallery .media-frame--tall{ grid-row: span 1; } }

/* Faculty / people */
.people-card{ text-align:left; }
.people-card .card__media{ aspect-ratio: 1/1.05; }
.people-card h3{ font-size:1.1rem; margin-bottom:.1rem; }
.people-card .role{ color: var(--coral-700); font-weight:600; font-size:0.85rem; }
.people-card .exp{ color: var(--muted-grey); font-size:0.85rem; }

/* Quote / pull */
.pull-quote{ font-family: var(--font-display); font-style:italic; font-size: clamp(1.4rem,2.6vw,2rem); line-height:1.4; color: var(--white); }

/* Forms */
.form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width:700px){ .form-grid{ grid-template-columns: 1fr; } }
.field{ display:flex; flex-direction:column; gap:.5rem; }
.field.full{ grid-column: 1/-1; }
.field label{ font-size:0.82rem; font-weight:600; color: var(--ink-soft); }
.field input, .field select, .field textarea{
  border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 0.85rem 1rem;
  background: var(--white); color: var(--ink); transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color: var(--coral); box-shadow: 0 0 0 4px var(--coral-100); }
.field textarea{ resize: vertical; min-height:120px; }
.field .error{ font-size:0.78rem; color:#C64B2E; min-height:1em; }
.field.has-error input, .field.has-error select, .field.has-error textarea{ border-color:#C64B2E; }
.consent{ display:flex; align-items:flex-start; gap:.65rem; font-size:0.85rem; color: var(--ink-soft); }
.consent input{ margin-top:.25rem; }
.form-success{ display:none; text-align:center; padding: 3rem 1rem; }
.form-success.is-visible{ display:block; }
.form-success svg{ color: var(--coral); margin-bottom:1rem; }

/* Table-ish lists (FAQ / structure) */
.accordion-item{ border-bottom:1px solid var(--line); }
.accordion-item button{ width:100%; display:flex; justify-content:space-between; align-items:center; gap:1rem; padding: 1.4rem 0; background:none; border:0; text-align:left; font-family:var(--font-display); font-size:1.1rem; color:var(--ink); }
.accordion-item .plus{ position:relative; width:22px; height:22px; flex-shrink:0; }
.accordion-item .plus::before, .accordion-item .plus::after{ content:""; position:absolute; background: var(--coral); border-radius:2px; transition: transform var(--dur-fast) var(--ease); }
.accordion-item .plus::before{ width:100%; height:2px; top:50%; left:0; transform:translateY(-50%); }
.accordion-item .plus::after{ width:2px; height:100%; left:50%; top:0; transform:translateX(-50%); }
.accordion-item.is-open .plus::after{ transform: translateX(-50%) rotate(90deg); opacity:0; }
.accordion-item .answer{ max-height:0; overflow:hidden; transition: max-height var(--dur-med) var(--ease-soft); }
.accordion-item .answer p{ padding-bottom:1.4rem; color:var(--muted-grey); max-width:70ch; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{
  background: var(--charcoal); color: rgba(248,247,244,0.72);
  padding: clamp(4rem,7vw,6rem) 0 0; position:relative; overflow:hidden;
  border-top: 1px solid var(--coral);
}
/* Faint architectural line texture — echoes the hero facade imagery without another image request */
.site-footer::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0.05;
  background-image: repeating-linear-gradient(115deg, transparent 0 46px, rgba(248,247,244,0.9) 46px 48px);
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.9), transparent 75%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.9), transparent 75%);
}
.site-footer .container{ position:relative; z-index:1; }

.footer-top{ display:grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: clamp(2rem,4vw,3rem); padding-bottom: clamp(3rem,5vw,4rem); border-bottom: 1px solid var(--line-on-dark); }
.footer-brand img{ height:40px; margin-bottom:.9rem; }
.footer-brand .footer-estd{ display:inline-flex; align-items:center; gap:.6rem; font-size:0.7rem; letter-spacing:.2em; text-transform:uppercase; font-weight:700; color: var(--coral); margin-bottom:1.4rem; }
.footer-brand .footer-estd::after{ content:""; width:22px; height:1px; background: var(--coral); opacity:.6; }
.footer-brand p{ font-size:0.92rem; line-height:1.7; max-width:320px; color: rgba(248,247,244,0.6); }
.footer-motto{ margin-top:1.5rem; font-family:var(--font-display); font-style:italic; font-size:1.05rem; color: rgba(248,247,244,0.85); letter-spacing:.01em; }
.footer-contact{ margin-top:1.5rem; display:flex; flex-direction:column; gap:.75rem; font-size:0.9rem; }
.footer-contact a{ display:flex; gap:.75rem; align-items:flex-start; transition: color var(--dur-fast) var(--ease); }
.footer-contact a:hover{ color: var(--white); }
.footer-contact svg{ flex-shrink:0; margin-top:3px; color: var(--coral); }
.footer-social-label{ font-size:0.72rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color: rgba(248,247,244,0.4); margin:1.75rem 0 .85rem; }
.footer-social{ display:flex; gap:.65rem; }
.footer-social a{ width:2.5rem; height:2.5rem; border:1px solid var(--line-on-dark); border-radius:50%; display:flex; align-items:center; justify-content:center; color: rgba(248,247,244,0.8); transition: transform var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.footer-social a:hover{ background: var(--coral); border-color: var(--coral); color: var(--white); transform: translateY(-3px); }

.footer-col h5{ position:relative; color: var(--white); font-family:var(--font-body); font-size:0.78rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; margin-bottom:1.4rem; padding-left:1.1rem; }
.footer-col h5::before{ content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:6px; height:6px; border-radius:50%; background: var(--coral); }
.footer-col ul{ display:flex; flex-direction:column; gap:.85rem; }
.footer-col a{ position:relative; display:inline-flex; font-size:0.92rem; color: rgba(248,247,244,0.65); transition: color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.footer-col a:hover{ color:var(--white); transform: translateX(4px); }
.footer-col a::before{ content:"\2192"; position:absolute; left:-1.1rem; opacity:0; transition: opacity var(--dur-fast) var(--ease); color: var(--coral); }
.footer-col a:hover::before{ opacity:1; }

.footer-bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; padding: 1.75rem 0; font-size:0.82rem; color: rgba(248,247,244,0.45); }
.footer-bottom ul{ display:flex; gap:1.5rem; flex-wrap:wrap; }
.footer-bottom a{ transition: color var(--dur-fast) var(--ease); }
.footer-bottom a:hover{ color: var(--coral); }
@media (max-width: 900px){ .footer-top{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){
  .footer-top{ grid-template-columns: 1fr; gap:2.5rem; }
  .footer-col{ padding-top:1.75rem; border-top:1px solid var(--line-on-dark); }
  .footer-col a:hover{ transform:none; }
  .footer-col a::before{ display:none; }
}

/* back to top */
.back-to-top{ position:fixed; right:1.5rem; bottom:1.5rem; width:3rem; height:3rem; border-radius:50%; background: var(--charcoal); color:var(--white); display:flex; align-items:center; justify-content:center; z-index:60; opacity:0; visibility:hidden; transform: translateY(10px); transition: all var(--dur-fast) var(--ease); }
.back-to-top.is-visible{ opacity:1; visibility:visible; transform:none; }
.back-to-top:hover{ background: var(--coral); }

/* utility */
.center{ text-align:center; margin-left:auto; margin-right:auto; }
.mx-auto{ margin-left:auto; margin-right:auto; }
.mt-0{ margin-top:0; } .mb-0{ margin-bottom:0; }
.max-w-sm{ max-width:560px; } .max-w-md{ max-width:760px; } .max-w-lg{ max-width:960px; }
.flex{ display:flex; } .items-center{ align-items:center; } .gap-1{ gap:1rem; } .wrap{ flex-wrap:wrap; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.skip-link{ position:absolute; left:1rem; top:-60px; background:var(--coral); color:white; padding:.75rem 1.25rem; border-radius:8px; z-index:200; transition: top var(--dur-fast) var(--ease); }
.skip-link:focus{ top:1rem; }

@media (max-width: 1080px){ .footer-top{ } }

/* ==========================================================================
   Leadership profile cards (faculty page — no individual photos available)
   ========================================================================== */
.leader-card{ background: var(--white); border:1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.75rem,3vw,2.25rem); display:flex; flex-direction:column; gap:1.1rem; height:100%; transition: transform var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease); }
.leader-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-card); }
.leader-avatar{ width:4.2rem; height:4.2rem; border-radius:50%; background: var(--charcoal); color: var(--coral); display:flex; align-items:center; justify-content:center; font-family: var(--font-display); font-size:1.4rem; letter-spacing:0.02em; flex-shrink:0; }
.leader-card h3{ font-size:1.3rem; margin-bottom:.15rem; }
.leader-card .leader-title{ color: var(--coral-700); font-weight:700; font-size:0.88rem; }
.leader-card .leader-desc{ color: var(--muted-grey); font-size:0.92rem; line-height:1.6; margin-top:.1rem; }