@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@600;700;800;900&family=Inter:ital,wght@0,400;0,500;0,600;0,700;0,800;1,500&display=swap');

:root {
  --pink: #f172a1;
  --pink-deep: #c73578;
  --pink-hot: #ff4f9b;
  --pink-pale: #ffe4ef;
  --pink-wash: #fff5f9;
  --white: #ffffff;
  --ink: #171014;
  --muted: rgba(23, 16, 20, 0.58);
  --muted-strong: rgba(23, 16, 20, 0.72);
  --line: rgba(23, 16, 20, 0.13);
  --line-light: rgba(255, 255, 255, 0.34);
  --glass: rgba(255, 255, 255, 0.22);
  --container: 1180px;
  --taupe: #e6e2d9;
  /* One font, one job: the system (Apple) font reads everywhere. Big Shoulders
     Display is the single exception, reserved for titles so it keeps its punch. */
  --font-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Type scale — every small/UI text size on the site maps to one of these
     seven steps. Reach for a token before adding a new one-off rem value. */
  --text-3xs: 0.68rem;
  --text-2xs: 0.72rem;
  --text-xs: 0.76rem;
  --text-sm: 0.78rem;
  --text-base: 0.82rem;
  --text-md: 0.9rem;
  --text-lg: 1rem;
  /* The one shared size for a page's <h1> — every interior page uses the
     compact hero pattern, so there's a single hero-heading tier, not three. */
  --h1-size: clamp(2.1rem, 5.4vw, 3.5rem);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--pink-wash);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body::selection,
::selection {
  background: var(--ink);
  color: var(--white);
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
button { border: 0; background: none; color: inherit; cursor: pointer; }

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9000;
  opacity: 0.025;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap {
  width: min(100% - 32px, var(--container));
  margin: 0 auto;
}

.site-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 245, 249, 0.76);
  backdrop-filter: blur(24px) saturate(1.4);
}

.nav-logo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: 3px;
}

.nav-logo img { width: 170px; height: auto; }

.pill,
.small-caps,
.member-meta {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: lowercase;
}

/* "at UCLA" badge — the plain hand-drawn wordmark from Figma, recolored to
   --pink-deep so it reads against the pink-wash nav/footer background. */
.nav-logo img.at-ucla-badge,
.footer-logo img.at-ucla-badge {
  height: 19px;
  width: auto;
  flex-shrink: 0;
  margin-left: 2px;
}

.nav-toggle {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
}

.nav-toggle span,
.nav-toggle::before,
.nav-toggle::after {
  content: "";
  width: 18px;
  height: 2px;
  border-radius: 99px;
  background: var(--ink);
  transition: transform 220ms var(--ease), opacity 220ms ease;
}

.nav-toggle { gap: 4px; }
.site-nav.open .nav-toggle span { opacity: 0; }
.site-nav.open .nav-toggle::before { transform: translateY(6px) rotate(45deg); }
.site-nav.open .nav-toggle::after { transform: translateY(-6px) rotate(-45deg); }

.nav-links {
  position: fixed;
  inset: 72px 12px auto 12px;
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.84);
  backdrop-filter: blur(22px) saturate(1.3);
  box-shadow: 0 24px 70px rgba(199, 53, 120, 0.18);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px);
  transition: opacity 220ms ease, transform 220ms var(--ease);
}

.site-nav.open .nav-links {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.nav-links a {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 12px;
  color: var(--ink);
}

.nav-links a:hover,
.nav-links a.current {
  color: var(--pink-deep);
}

/* Shared mono-label treatment — nav links, buttons, eyebrows, and footer
   links are all the same UI-chrome type (mono, uppercase, tracked out), so
   they share one declaration instead of each re-stating it. */
.eyebrow,
.btn,
.terra-cta,
.nav-links a,
.footer-links a {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--text-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.nav-links a.nav-cta {
  justify-content: center;
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
  background: var(--pink) !important;
  color: var(--white) !important;
}

.nav-links a.nav-cta:hover {
  background: var(--pink-deep) !important;
}

h1, h2, h3, p { margin-top: 0; }

h1 {
  margin-bottom: 18px;
  color: var(--pink-hot);
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
  font-size: var(--h1-size);
  line-height: 0.86;
}

h2 {
  margin-bottom: 18px;
  color: var(--pink-hot);
  font-family: var(--font-sans);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: none;
  font-size: clamp(2.1rem, 5.4vw, 3.8rem);
  line-height: 1.05;
}

h3 {
  margin-bottom: 10px;
  color: var(--pink-deep);
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
  font-size: clamp(1.3rem, 3vw, 1.7rem);
  line-height: 1.25;
}

p,
.body-copy,
.faq p,
.client-card p {
  color: var(--muted-strong);
  font-size: clamp(1rem, 1.4vw, 1.1rem);
  line-height: 1.6;
}

.lead {
  max-width: 720px;
  color: var(--ink);
  font-weight: 400;
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  line-height: 1.45;
}

.body-copy { max-width: 640px; }

.section { padding: 78px 0; }
.section.pink {
  background: var(--pink-pale);
  border-block: 1px solid var(--line);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  margin: 0 0 18px;
  color: var(--pink-deep);
}

.eyebrow-lg { font-size: var(--text-lg); letter-spacing: 0.01em; }

/* Home page teaser titles ("Who are WE", "For INDUSTRY", "Apply NOW") — since
   those sections dropped their H2s, the eyebrow is now the section's title,
   so it reads much larger than the standard small-caps label size. Set in
   the Apple system font (not the mono UI-label font) in black, sentence
   case, with only the key word highlighted by .eyebrow-highlight below. */
.eyebrow-xl {
  font-family: var(--font-sans);
  font-weight: 800;
  text-transform: none;
  letter-spacing: -0.01em;
  color: var(--ink);
  font-size: clamp(1.8rem, 4.5vw, 2.75rem);
  margin-bottom: 0;
}

/* The one emphasized word in a home-page title — same sentence case as the
   rest of the heading, sitting on the hand-drawn pink oval asset so the oval
   always tracks the highlighted word. line-height:1 keeps the box hugging
   the glyphs instead of inheriting body's 1.6, which was inflating the oval. */
.eyebrow-highlight {
  position: relative;
  display: inline-block;
  min-width: 2.2em;
  text-align: center;
  line-height: 1;
  text-transform: none;
  padding: 0.12em 0.32em;
}

.eyebrow-highlight::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -0.05em -0.15em;
  background: url("images/oval-highlight.webp") center / 100% 100% no-repeat;
}

/* Landing screen — Terra Labs hero layout (dot-matrix field, mono UI chrome), in pink */
.terra-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--pink-wash);
  margin-bottom: 36px;
}

.terra-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  padding-top: 36px;
  padding-bottom: 0;
}

/* Matches the hero-stamp-to-subhead gap (36px) exactly, instead of
   stacking the default .section padding-top (78px) on top of it. */

/* Hero stamp — the GIVC wordmark lockup from the givcucla Figma file:
   a torn-edge "stamp" card (the jagged silhouette is baked into the
   exported PNG's alpha channel, not a CSS clip-path) filled with the
   brand's halftone pink texture, with the white logo + a handwritten
   "at UCLA" tag centered on top. Full-bleed, edge to edge — no page
   margin around it. */
.hero-stamp {
  position: relative;
  width: 100%;
  aspect-ratio: 1319 / 546;
}

.hero-stamp-bg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-stamp-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.hero-stamp-logo {
  width: 58%;
  height: auto;
}

.hero-stamp-tag {
  width: clamp(120px, 22vw, 170px);
  height: auto;
}

.terra-sub {
  font-family: var(--font-sans);
  font-size: clamp(1rem, 1.4vw, 1.1rem);
  line-height: 1.6;
  color: var(--muted-strong);
  max-width: 620px;
  margin: 0 auto 32px;
}

/* Hand-drawn highlighter oval around "UCLA" in the hero subhead — the
   actual marker-drawn asset from the givcucla Figma file (irregular,
   hand-drawn edges), not a CSS ellipse — reads far more charismatic. */
.oval-highlight {
  position: relative;
  display: inline-block;
  padding: 0 4px;
}

.oval-highlight::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -0.2em -0.4em;
  background: url("images/oval-highlight.webp") center / 100% 100% no-repeat;
}

.terra-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

/* Shared button shape — a chamfered rectangle (top-right corner cut), not
   a pill. Every CTA sitewide (.btn and .terra-cta) uses this same silhouette
   so "join us" and "apply now" read as the same kind of button. */
.btn,
.terra-cta {
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
}

.terra-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 15px 26px;
  border: 1.5px solid var(--pink);
  color: var(--pink);
  background: var(--pink-wash);
  transition: background 220ms var(--ease), color 220ms var(--ease);
}

.terra-cta:hover { background: var(--pink); color: var(--white); }

.terra-cta-solid {
  background: var(--pink);
  color: var(--white);
}

.terra-cta-solid:hover { background: var(--pink-deep); color: var(--white); }

.hero-grid,
.split,
.section-head {
  display: grid;
  gap: 34px;
  align-items: start;
}

.section-head .body-copy {
  max-width: none;
}

.hero-kicker {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

.pill {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.48);
  color: var(--pink-deep);
  font-size: var(--text-2xs);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 22px;
  border: 1px solid currentColor;
  line-height: 1;
  transition: transform 220ms var(--ease), background 220ms ease, color 220ms ease, border-color 220ms ease;
}

.btn:hover { transform: translateY(-2px); }
.btn-pink { background: var(--pink); color: var(--white); border-color: var(--pink); }
.btn-pink:hover { background: var(--pink-deep); border-color: var(--pink-deep); }
.btn-outline-pink { background: var(--white); color: var(--pink); border-color: var(--pink); }
.btn-outline-pink:hover { background: var(--pink); color: var(--white); }

.member-meta,
.small-caps {
  color: var(--pink-deep);
  font-size: var(--text-base);
}

.client-grid {
  display: grid;
  gap: 16px;
}

.client-card {
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background:
    radial-gradient(ellipse 120% 90% at 20% 0%, rgba(255, 79, 155, 0.08), transparent 65%),
    rgba(255, 255, 255, 0.78);
  box-shadow: 0 18px 54px rgba(199, 53, 120, 0.08);
  transition: transform 320ms var(--ease), box-shadow 320ms var(--ease), border-color 320ms ease;
}

.client-card:hover {
  transform: translateY(-4px);
  border-color: rgba(199, 53, 120, 0.28);
  box-shadow: 0 26px 64px rgba(199, 53, 120, 0.16);
}

/* Community section — a centered grid of polaroids with a "meet the
   girls!" moment (handwritten wordmark, star stickers, learn-more CTA)
   sitting in the open space at the middle of the grid. */
.community-photos {
  position: relative;
  text-align: center;
}

.community-star {
  position: absolute;
  width: 40px;
  height: auto;
  z-index: 5;
}

.star-1 { top: 0; right: 8%; transform: rotate(-15deg); }
.star-2 { bottom: 4%; left: 6%; transform: rotate(12deg); }
.star-3 { top: 38%; left: -1%; transform: rotate(8deg); }
.star-4 { top: 42%; right: -1%; transform: rotate(-10deg); }

.community-reveal {
  grid-area: reveal;
  align-self: center;
  text-align: center;
}

.community-reveal-text {
  display: inline-block;
  width: clamp(180px, 26vw, 260px);
  height: auto;
  margin: 12px auto 10px;
}

/* Scrapbook grid — six polaroid prints, each given a slight rotation so
   it reads as a scattered photo pile rather than a rigid grid. Photos are
   cropped to a uniform aspect ratio (see .polaroid img below) so every
   row lines up evenly instead of leaving dead space under shorter shots.
   The "meet the girls!" moment sits in the reveal row, in the open space
   between the two rows of photos rather than below them. */
.polaroid-fan {
  max-width: 1080px;
  margin: 12px auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas:
    "p1 p2 p3"
    "reveal reveal reveal"
    "p4 p5 p6";
  row-gap: 4px;
  column-gap: 40px;
  align-items: start;
}

.gp-1 { grid-area: p1; transform: rotate(-3deg); }
.gp-2 { grid-area: p2; transform: rotate(2deg); }
.gp-3 { grid-area: p3; transform: rotate(-2deg); }
.gp-4 { grid-area: p4; transform: rotate(3deg); }
.gp-5 { grid-area: p5; transform: rotate(-1.5deg); }
.gp-6 { grid-area: p6; transform: rotate(2.5deg); }

/* Clean, edge-to-edge photo cards — rounded corners and a soft shadow,
   not the print-style white-bordered polaroid look. */
.polaroid {
  position: relative;
  width: 100%;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(23, 16, 20, 0.16), 0 2px 6px rgba(23, 16, 20, 0.1);
  transition: transform 320ms var(--ease), box-shadow 320ms var(--ease);
}

.polaroid:hover {
  transform: translateY(-12px) scale(1.04);
  box-shadow: 0 20px 38px rgba(23, 16, 20, 0.22);
}

.polaroid img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.summit-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.summit-photo {
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 16px 34px rgba(23, 16, 20, 0.16);
}

.summit-photo img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

@media (max-width: 600px) {
  .summit-photos { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .polaroid-fan {
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
      "p1 p2"
      "p3 p4"
      "reveal reveal"
      "p5 p6";
    row-gap: 4px;
    column-gap: 24px;
  }
}

.testimonials-section {
  background: var(--pink-deep);
}

.testimonials-section > .wrap > .eyebrow { color: rgba(255, 255, 255, 0.85); }
.testimonials-section .eyebrow::before { background: rgba(255, 255, 255, 0.85); }

.tp-desc { color: rgba(255, 255, 255, 0.92); }
.testimonials-section .pill { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.32); color: #fff; }

.project-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 24px;
}

.project-card {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 18px;
  padding: 22px;
}

.project-card-top {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.project-card-top .small-caps {
  display: block;
  margin-bottom: 4px;
}

.tp-media-sm {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.92);
  font-family: var(--font-display);
  font-size: 1.1rem;
}

/* Client logo badges — a real wordmark instead of a lettered avatar circle */
.tp-media-sm.tp-logo {
  width: 60px;
  height: 34px;
  border-radius: 8px;
  overflow: hidden;
}

.tp-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-card-top h3 { color: #fff; font-size: 1.02rem; margin-top: 2px; }
.project-card .small-caps { color: rgba(255, 255, 255, 0.7); text-transform: none; }
.tp-desc-sm { color: rgba(255, 255, 255, 0.9); font-size: var(--text-md); }

.testimonial-inline {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  font-style: italic;
  font-size: var(--text-md);
}

.testimonial-inline span {
  display: block;
  margin-top: 4px;
  font-style: normal;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 720px) {
  .project-grid { grid-template-columns: 1fr; }
}

.timeline-list { border-top: 1px solid var(--line); }

.timeline-row {
  display: flex;
  gap: 24px;
  align-items: baseline;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

.timeline-row .t-when {
  flex: 0 0 110px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.timeline-row .t-date {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pink-deep);
}

.timeline-row .t-time {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--muted);
}

.timeline-row h3 {
  font-size: 1rem;
  margin-bottom: 0;
}

.timeline-row .t-tag {
  font-family: var(--font-mono);
  font-size: var(--text-3xs);
  font-weight: 500;
  color: var(--muted);
  text-transform: none;
}

@media (max-width: 560px) {
  .timeline-row { flex-direction: column; gap: 4px; }
  .timeline-row .t-when { flex: none; flex-direction: row; gap: 8px; }
}

.staircase { display: flex; flex-direction: column; }

.staircase-step {
  display: flex;
  gap: 24px;
  align-items: baseline;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
}

.staircase-num {
  flex-shrink: 0;
  width: 48px;
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--pink);
}

.staircase-body h3 { margin-bottom: 8px; }
.staircase-body p { margin-bottom: 4px; }

@media (max-width: 760px) {
  .staircase-step { flex-direction: column; gap: 8px; }
  .staircase-num { width: auto; }
}

.partner-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.partner-block {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.6);
  transition: transform 220ms var(--ease), border-color 220ms ease, background 220ms ease;
}

.partner-num {
  display: block;
  margin-bottom: 10px;
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--pink);
}

.partner-block h3 { margin-bottom: 0; font-size: 1.1rem; }

.partner-block p {
  margin-top: 8px;
  color: var(--muted-strong);
  font-size: var(--text-md);
  line-height: 1.5;
}

.partner-block:hover {
  transform: translateY(-4px);
  border-color: rgba(199, 53, 120, 0.3);
  background: rgba(255, 255, 255, 0.85);
}

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

.quicklinks {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 14px;
}

.quicklinks a {
  position: relative;
  color: var(--pink-deep);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-base);
  letter-spacing: 0.02em;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: opacity 220ms ease;
}

.quicklinks a:hover { opacity: 0.65; }

.exec-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.exec-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.6);
  transition: transform 320ms var(--ease), box-shadow 320ms var(--ease);
}

.exec-card .btn { margin-top: auto; }
.exec-card > p:last-of-type { margin-bottom: 12px; }

.exec-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 64px rgba(199, 53, 120, 0.16);
}

.exec-photo {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  margin-bottom: 14px;
  border-radius: 16px;
  overflow: hidden;
}

.exec-card h3 { margin-bottom: 0; font-size: 1.05rem; }

@media (min-width: 720px) {
  .exec-grid { grid-template-columns: repeat(4, 1fr); }
}

.page-hero {
  padding: 68px 0 44px;
  border-bottom: 1px solid var(--line);
  background: var(--pink-wash);
}

.page-hero .lead { max-width: 980px; }

.hero-compact { padding: 52px 0 32px; }

.faq {
  display: grid;
  gap: 10px;
}

.faq details {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--white);
  transition: border-color 220ms ease;
}

.faq details[open],
.faq details:hover {
  border-color: rgba(199, 53, 120, 0.3);
}

.faq summary {
  min-height: 58px;
  padding: 18px;
  color: var(--ink);
  cursor: pointer;
  font-weight: 600;
  font-size: 1.05rem;
}

.faq p {
  margin: 0;
  padding: 0 18px 18px;
}

.site-footer {
  padding: 44px 0 28px;
  background: var(--pink-wash);
  border-top: 1px solid var(--line);
}

.footer-grid {
  display: grid;
  gap: 28px;
  align-items: start;
}

.footer-contact {
  display: grid;
  gap: 12px;
}

.footer-contact .eyebrow { margin: 0; }

.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.footer-logo img { width: 190px; }

.footer-socials {
  display: flex;
  align-items: center;
  gap: 14px;
}

.footer-socials a {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 220ms var(--ease);
}

.footer-socials a:hover { transform: translateY(-4px) scale(1.08); }

.footer-socials img {
  width: 32px;
  height: 32px;
  max-width: none;
  object-fit: contain;
  filter: drop-shadow(0 3px 8px rgba(23, 16, 20, 0.22));
}

.footer-links {
  display: grid;
  gap: 8px;
}

.footer-links a {
  display: inline-block;
  width: fit-content;
  color: var(--muted-strong);
}

.footer-links a:hover { color: var(--pink-deep); }

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms ease, transform 700ms var(--ease);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Hero intro paragraph — split into words by script.js, each word
   blurs/fades/rises in with a short stagger instead of the whole
   paragraph fading in as one block. */
.split-reveal .word {
  display: inline-block;
  opacity: 0;
  filter: blur(4px);
  transform: translateY(0.35em);
  transition: opacity 640ms var(--ease), transform 640ms var(--ease), filter 640ms var(--ease);
  transition-delay: calc(var(--i, 0) * 26ms);
}

.split-reveal.visible .word {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

/* Photo banners — a left-to-right clip wipe reveals the frame while the
   image itself settles from a slight zoom + desaturation, like a print
   developing, instead of a plain fade. */
.photo-wipe {
  overflow: hidden;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1000ms cubic-bezier(0.65, 0, 0.35, 1);
}

.photo-wipe img {
  transform: scale(1.15);
  filter: saturate(0.6) brightness(0.94);
  transition: transform 1300ms cubic-bezier(0.16, 1, 0.3, 1), filter 1300ms ease;
}

.photo-wipe.visible {
  clip-path: inset(0 0 0 0);
}

.photo-wipe.visible img {
  transform: scale(1);
  filter: saturate(1) brightness(1);
}

@media (min-width: 720px) {
  .wrap { width: min(100% - 56px, var(--container)); }
  .hero-grid,
  .split { grid-template-columns: 0.95fr 1.05fr; }
  .footer-grid { grid-template-columns: auto 1fr auto; align-items: start; gap: 40px; }
  .footer-links { justify-self: end; }
}

@media (min-width: 760px) {
  .site-nav { padding-inline: 20px; }
  .nav-toggle { display: none; }
  .nav-links {
    position: static;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    backdrop-filter: none;
  }
  .nav-links a { min-height: 40px; padding-inline: 10px; }
}

@media (min-width: 980px) {
  .site-nav { padding-inline: 26px; }
  .nav-links { gap: 6px; }
  .nav-links a { padding-inline: 13px; }
}

@media (max-width: 560px) {
  .at-ucla-badge { display: none; }
  .nav-logo img { width: 146px; }
}

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