/* =========================================================
   TOKENS
   ========================================================= */
:root{
  /* Color — classic New England maritime, drawn from the logo */
  --paper:        #F6F3ED;   /* clean off-white, slight warmth */
  --paper-2:      #ECE7DC;   /* slightly deeper cream for tonal sections */
  --ink:          #14223F;   /* deep navy — primary brand color from logo */
  --ink-2:        #1F2F4D;   /* slightly lighter navy for body text */
  --muted:        #5C6577;   /* muted slate for secondary text */
  --line:         rgba(20,34,63,0.12);
  --line-strong:  rgba(20,34,63,0.22);
  --ocean:        #1A2B4A;   /* deep navy alt for accents */
  --ocean-2:      #2B406A;   /* lighter navy hover */
  --sun:          #B98B4F;   /* warm gold — secondary accent from logo */
  --sun-2:        #D4A968;   /* soft gold for hovers */
  --shell:        #FBF8F1;   /* lightest cream for cards */

  /* Type */
  --display: "Fraunces", "Cormorant Garamond", Georgia, serif;
  --sans:    "Geist", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --mono:    "Geist Mono", ui-monospace, monospace;

  /* Layout */
  --max:      1320px;
  --gutter:   clamp(20px, 4vw, 56px);
  --radius:   14px;

  /* Motion */
  --ease:     cubic-bezier(.2,.7,.2,1);
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
html { scroll-behavior: smooth; }
body{
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

::selection { background: var(--ocean); color: var(--shell); }

/* Subtle grain over the whole page — adds tactile, editorial feel */
body::before{
  content:"";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: .035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* =========================================================
   TYPE
   ========================================================= */
.eyebrow{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow::before{
  content:"";
  width: 22px; height:1px; background: currentColor; opacity:.6;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.04;
  color: var(--ink);
  margin: 0;
}

.h-display{
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(44px, 6.2vw, 92px);
  letter-spacing: -0.025em;
  line-height: 1;
}
.h-display em{
  font-style: italic;
  font-weight: 300;
}

.h-section{
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(36px, 5.4vw, 72px);
  letter-spacing: -0.02em;
  line-height: 1.02;
}
.h-section em { font-style: italic; font-weight: 300; }

.lede{
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 56ch;
}

.fine{
  font-size: 13.5px;
  color: var(--muted);
}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{
  position: relative;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 16px 26px;
  border-radius: 999px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: .005em;
  transition: transform .35s var(--ease), background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
  white-space: nowrap;
}
.btn .arrow{
  width: 16px; height: 16px;
  transition: transform .4s var(--ease);
}
.btn:hover .arrow { transform: translateX(4px); }

.btn-primary{
  background: var(--ink);
  color: var(--paper);
}
.btn-primary:hover{ background: var(--ocean-2); }

/* On dark overlays (hero, CTA) primary should be cream so it pops */
.hero-actions .btn-primary,
.cta .btn-primary{
  background: var(--shell);
  color: var(--ink);
}
.hero-actions .btn-primary:hover,
.cta .btn-primary:hover{ background: #fff; }

.btn-light{
  background: var(--paper);
  color: var(--ink);
}
.btn-light:hover{ background: #fff; }

.btn-ghost{
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line-strong);
}
.btn-ghost:hover{ border-color: var(--ink); background: rgba(26,31,28,.04); }

.btn-link{
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  padding: 4px 0;
  border-bottom: 1px solid currentColor;
  color: var(--ink);
  letter-spacing: .01em;
  transition: gap .3s var(--ease), opacity .3s var(--ease);
}
.btn-link:hover{ gap: 12px; }

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 18px var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  transition: background .35s var(--ease), padding .35s var(--ease), border-color .35s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.scrolled{
  background: rgba(244,240,232,.85);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--line);
  padding-top: 14px; padding-bottom: 14px;
}

.brand{
  display: inline-flex; align-items: center;
  text-decoration: none;
}
.brand .wordmark{
  display: flex; align-items: baseline; gap: 12px;
  font-family: var(--display);
  line-height: 1;
}
.brand .primary{
  font-size: 22px;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.005em;
  transition: color .35s var(--ease);
}
.brand .stays{
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--sun);
  font-weight: 400;
  padding-left: 12px;
  border-left: 1px solid rgba(185,139,79,.5);
  transform: translateY(-1px);
  transition: color .35s var(--ease);
}
/* Hero state — nav sits over dark photo, wordmark needs to be cream */
.nav:not(.scrolled) .brand .primary{ color: var(--shell); }
.nav:not(.scrolled) .brand .stays{ color: var(--sun-2); border-left-color: rgba(212,169,104,.5); }
.brand:hover .primary{ color: var(--ocean-2); }
.nav:not(.scrolled) .brand:hover .primary{ color: #fff; }

.nav-links{
  display: flex; align-items: center; gap: 36px;
}
.nav-links a{
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: .03em;
  color: var(--ink-2);
  position: relative;
  transition: color .35s var(--ease);
}
.nav-links a:hover { color: var(--ink); }
/* Over hero photo before scroll — needs light text */
.nav:not(.scrolled) .nav-links a{ color: rgba(251,248,241,.85); }
.nav:not(.scrolled) .nav-links a:hover{ color: #fff; }
/* The Contact button should also flip color over hero */
.nav:not(.scrolled) .nav-cta{
  color: #FBF8F1;
  border-color: rgba(251,248,241,.4);
}
.nav:not(.scrolled) .nav-cta:hover{
  background: rgba(251,248,241,.12);
  border-color: #FBF8F1;
}
.nav-cta{
  padding: 10px 18px !important;
  font-size: 13.5px !important;
}

.nav-toggle{
  display: none;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  transition: border-color .35s var(--ease);
}
.nav-toggle span{
  display:block; width: 16px; height: 1.5px; background: var(--ink);
  position: relative;
  transition: background .35s var(--ease);
}
.nav-toggle span::before, .nav-toggle span::after{
  content:""; position:absolute; left:0; width: 16px; height: 1.5px; background: var(--ink);
  transition: background .35s var(--ease);
}
.nav-toggle span::before{ top: -5px; }
.nav-toggle span::after { top:  5px; }
/* Over hero — flip to light */
.nav:not(.scrolled) .nav-toggle{ border-color: rgba(251,248,241,.4); }
.nav:not(.scrolled) .nav-toggle span,
.nav:not(.scrolled) .nav-toggle span::before,
.nav:not(.scrolled) .nav-toggle span::after{ background: #FBF8F1; }

@media (max-width: 880px){
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; }
}

/* Mobile menu drawer */
.mobile-menu{
  position: fixed; inset: 0;
  z-index: 99;
  background: var(--paper);
  padding: 100px var(--gutter) var(--gutter);
  display: flex; flex-direction: column; gap: 8px;
  transform: translateY(-100%);
  transition: transform .5s var(--ease);
  visibility: hidden;
}
.mobile-menu.open{ transform: translateY(0); visibility: visible; }
.mobile-menu a{
  font-family: var(--display);
  font-size: 36px;
  font-weight: 300;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.mobile-menu a em { font-style: italic; }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position: relative;
  min-height: 100svh;
  padding: 120px var(--gutter) 64px;
  display: grid;
  grid-template-rows: 1fr auto;
  overflow: hidden;
  isolation: isolate;
}
.hero-bg{
  position: absolute; inset: 0;
  z-index: -2;
  overflow: hidden;
}
.hero-bg img{
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 40%;
  display: block;
  /* Subtle filter to unify with brand palette */
  filter: saturate(1.05) contrast(1.02);
}
.hero-vignette{
  position: absolute; inset: 0;
  z-index: -1;
  background:
    /* Top band for nav readability across full width */
    linear-gradient(180deg,
      rgba(20,34,63,.6) 0%,
      rgba(20,34,63,.25) 12%,
      rgba(20,34,63,0) 22%),
    /* Left gradient where headline + buttons sit */
    linear-gradient(95deg,
      rgba(20,34,63,.78) 0%,
      rgba(20,34,63,.62) 25%,
      rgba(20,34,63,.30) 50%,
      rgba(20,34,63,.08) 75%,
      rgba(20,34,63,0) 100%),
    /* Bottom fade for trust bar + transition into page */
    linear-gradient(180deg,
      rgba(20,34,63,0) 50%,
      rgba(20,34,63,.35) 75%,
      rgba(20,34,63,.55) 88%,
      rgba(246,243,237,.95) 100%);
  pointer-events: none;
}
@media (max-width: 720px){
  .hero-bg img{ object-position: 65% 40%; }
  .hero-vignette{
    background:
      linear-gradient(180deg,
        rgba(20,34,63,.78) 0%,
        rgba(20,34,63,.68) 25%,
        rgba(20,34,63,.55) 50%,
        rgba(20,34,63,.60) 78%,
        rgba(246,243,237,.95) 100%);
  }
}

.hero-inner{
  display: grid;
  grid-template-columns: minmax(0,1fr);
  align-content: end;
  gap: 56px;
  max-width: var(--max);
  width: 100%;
  margin: 0 auto;
}

.hero-headline{
  max-width: 720px;
}
.hero-headline .h-display{
  color: #FBF8F1;
}
.hero-headline .eyebrow{
  color: rgba(251,248,241,.78);
}
.hero-sub{
  margin-top: 28px;
  max-width: 46ch;
  font-size: clamp(17px, 1.5vw, 21px);
  color: rgba(251,248,241,.88);
  line-height: 1.45;
}
.hero-sub strong{ font-weight: 500; color: #FBF8F1; }

.hero-actions{
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  margin-top: 36px;
}
.hero-actions .btn-ghost{
  color: #FBF8F1;
  border-color: rgba(251,248,241,.4);
}
.hero-actions .btn-ghost:hover{
  background: rgba(251,248,241,.1);
  border-color: #FBF8F1;
}
.hero-meta{
  display: flex; align-items: center; gap: 10px;
  margin-top: 28px;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(251,248,241,.65);
}
.hero-meta .dot{ width: 4px; height: 4px; border-radius: 50%; background: rgba(251,248,241,.55); }

.hero-foot{
  display: flex; align-items: end; justify-content: space-between; gap: 32px;
  border-top: 1px solid rgba(251,248,241,.18);
  padding-top: 24px;
  margin-top: 48px;
}
.hero-foot-block{ max-width: 28ch; }
.hero-foot-block .label{
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: rgba(251,248,241,.6);
  margin-bottom: 8px;
}
.hero-foot-block .value{
  font-family: var(--display); font-size: 18px; font-weight: 400; color: #FBF8F1;
  font-style: italic;
}
.hero-foot .scroll{
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: rgba(251,248,241,.6);
  display: flex; align-items: center; gap: 10px;
}
.hero-foot .scroll .line{
  width: 32px; height: 1px; background: currentColor; opacity: .5;
  position: relative; overflow: hidden;
}
.hero-foot .scroll .line::after{
  content:""; position:absolute; left:0; top:0; width: 12px; height:1px; background: #FBF8F1;
  animation: scrollNudge 2.4s var(--ease) infinite;
}
@keyframes scrollNudge{
  0%   { transform: translateX(-12px); }
  60%  { transform: translateX(32px); }
  100% { transform: translateX(32px); }
}

@media (max-width: 720px){
  .hero{ padding-top: 96px; padding-bottom: 40px; min-height: 92svh; }
  .hero-foot{ flex-direction: column; align-items: flex-start; gap: 18px; }
}

/* Reveal on load */
.reveal-load > *{
  opacity: 0;
  transform: translateY(18px);
  animation: rise .9s var(--ease) forwards;
}
.reveal-load > *:nth-child(1){ animation-delay:.05s; }
.reveal-load > *:nth-child(2){ animation-delay:.18s; }
.reveal-load > *:nth-child(3){ animation-delay:.30s; }
.reveal-load > *:nth-child(4){ animation-delay:.42s; }
.reveal-load > *:nth-child(5){ animation-delay:.54s; }

@keyframes rise{
  to{ opacity:1; transform: translateY(0); }
}

/* Scroll reveal */
.reveal{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.in{ opacity: 1; transform: translateY(0); }
.reveal-stagger > *{
  opacity: 0; transform: translateY(20px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal-stagger.in > *{ opacity: 1; transform: translateY(0); }
.reveal-stagger.in > *:nth-child(2){ transition-delay: .08s; }
.reveal-stagger.in > *:nth-child(3){ transition-delay: .16s; }
.reveal-stagger.in > *:nth-child(4){ transition-delay: .24s; }
.reveal-stagger.in > *:nth-child(5){ transition-delay: .32s; }

/* =========================================================
   SECTION SHELL
   ========================================================= */
section{ position: relative; }
.wrap{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section-pad{
  padding: clamp(80px, 11vw, 160px) 0;
}

.section-head{
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-bottom: clamp(48px, 6vw, 80px);
  max-width: 880px;
}
.section-head .lede{ margin-top: 6px; }

/* =========================================================
   HOMES
   ========================================================= */
.homes{
  background: var(--paper);
  position: relative;
}
.homes-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 3vw, 40px);
}
@media (max-width: 880px){
  .homes-grid{ grid-template-columns: 1fr; }
}

.home-card{
  position: relative;
  display: flex; flex-direction: column;
  text-decoration: none;
  color: var(--ink);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--shell);
  border: 1px solid var(--line);
  transition: transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.home-card:hover{
  transform: translateY(-4px);
  border-color: var(--line-strong);
  box-shadow: 0 12px 40px rgba(20,34,63,.08);
}
.home-media{
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--paper-2);
}
.home-media img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.2s var(--ease);
}
.home-card:hover .home-media img{ transform: scale(1.04); }

.home-tag{
  position: absolute; top: 14px; left: 14px;
  background: rgba(246,243,237,.92);
  backdrop-filter: blur(6px);
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink);
  padding: 7px 12px;
  border-radius: 999px;
}

.home-body{
  padding: 28px 28px 32px;
  display: flex; flex-direction: column; gap: 12px;
  flex: 1;
}

.home-name{
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(24px, 2.8vw, 34px);
  letter-spacing: -.015em;
  line-height: 1.1;
  color: var(--ink);
  display: flex; align-items: baseline; gap: 10px;
}
.home-name em{ font-style: italic; font-weight: 300; }
.home-name .arrow-up{
  font-size: 16px;
  color: var(--muted);
  transition: transform .5s var(--ease), color .5s var(--ease);
  margin-left: auto;
}
.home-card:hover .home-name .arrow-up{ transform: translate(3px,-3px); color: var(--ink); }

.home-loc{
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted);
}

.home-meta{
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  font-size: 14px;
  color: var(--ink-2);
  padding: 14px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.home-meta .sep{ width:3px; height:3px; border-radius:50%; background: var(--muted); }
.home-meta strong{ font-weight: 600; color: var(--ink); }

.home-desc{
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
}

.home-body .btn{
  align-self: flex-start;
  margin-top: 8px;
}

/* Small "school-year" link below both cards */
.homes-aside{
  text-align: center;
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

/* =========================================================
   WHY (DARK)
   ========================================================= */
.why{
  background: var(--ink);
  color: var(--shell);
  position: relative;
  overflow: hidden;
}
.why::before{
  content:"";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 80% 20%, rgba(43,64,106,.55), transparent 60%),
    radial-gradient(ellipse 50% 40% at 10% 90%, rgba(185,139,79,.18), transparent 60%);
  pointer-events: none;
}
.why .eyebrow{ color: rgba(250,246,238,.55); }
.why h2{ color: var(--shell); }
.why .lede{ color: rgba(250,246,238,.78); }

.why-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 48px);
  margin-top: clamp(40px, 5vw, 64px);
}
@media (max-width: 880px){
  .why-grid{ grid-template-columns: 1fr; gap: 0; }
}

.why-item{
  padding: 32px 0;
  border-top: 1px solid rgba(250,246,238,.16);
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 20px;
  align-items: start;
}
.why-item:last-child{ border-bottom: 1px solid rgba(250,246,238,.16); }
@media (min-width: 881px){
  .why-item:nth-last-child(-n+2){ border-bottom: 1px solid rgba(250,246,238,.16); }
}
.why-item .num{
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .2em;
  color: rgba(250,246,238,.5);
  margin-top: 10px;
}
.why-item h3{
  font-family: var(--display);
  font-size: 26px;
  font-weight: 400;
  color: var(--shell);
  letter-spacing: -.01em;
  margin: 0 0 10px;
}
.why-item h3 em{ font-style: italic; font-weight: 300; }
.why-item p{
  margin: 0;
  font-size: 15.5px;
  line-height: 1.55;
  color: rgba(250,246,238,.72);
  max-width: 42ch;
}

.why-foot{
  margin-top: clamp(48px, 5vw, 72px);
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  padding-top: 28px;
  border-top: 1px solid rgba(250,246,238,.16);
}
.why-foot .note{
  font-style: italic;
  color: rgba(250,246,238,.65);
  font-size: 15px;
  max-width: 46ch;
}
.why .btn-light{ color: var(--ink); }

/* =========================================================
   TESTIMONIALS
   ========================================================= */
.tx{
  background: var(--paper);
  padding-bottom: 0;
}
.tx-head{
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  align-items: end;
  gap: 32px;
  margin-bottom: 56px;
}
@media (max-width: 880px){ .tx-head{ grid-template-columns: 1fr; align-items: start; } }
.tx-head .meta{
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted);
  text-align: right;
}
@media (max-width: 880px){ .tx-head .meta{ text-align: left; } }

.tx-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.5vw, 32px);
}
@media (max-width: 980px){ .tx-grid{ grid-template-columns: 1fr; } }

.tx-card{
  background: var(--shell);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 36px 32px;
  display: flex; flex-direction: column;
  gap: 20px;
  position: relative;
  transition: transform .5s var(--ease), border-color .5s var(--ease);
}
.tx-card:hover{ transform: translateY(-4px); border-color: var(--line-strong); }
.tx-card .quote-mark{
  font-family: var(--display);
  font-size: 80px;
  line-height: .8;
  font-style: italic;
  color: var(--ocean);
  font-weight: 300;
  height: 26px;
  user-select: none;
}
.tx-card blockquote{
  margin: 0;
  font-family: var(--display);
  font-size: 21px;
  font-weight: 400;
  line-height: 1.32;
  letter-spacing: -.005em;
  color: var(--ink);
  flex: 1;
}
.tx-card blockquote em{ font-style: italic; font-weight: 300; }
.tx-card .stars{
  display: inline-flex; gap: 3px;
  color: var(--sun);
  font-size: 13px;
  letter-spacing: 1px;
}
.tx-card .who{
  display: flex; align-items: center; gap: 12px;
  border-top: 1px solid var(--line);
  padding-top: 20px;
}
.tx-card .who .avatar{
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--sun);
  color: var(--shell);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display);
  font-size: 14px;
  font-style: italic;
  flex: none;
}
.tx-card .who .who-text{
  display: flex; flex-direction: column; gap: 2px;
}
.tx-card .who .name{
  font-size: 14px; font-weight: 500; color: var(--ink);
}
.tx-card .who .ctx{
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted);
}

.tx-cta{
  margin-top: clamp(56px, 7vw, 88px);
  text-align: center;
}

/* =========================================================
   ACADEMIC
   ========================================================= */
.academic{
  background: var(--paper-2);
  padding-top: clamp(120px, 13vw, 180px);
  padding-bottom: clamp(120px, 13vw, 180px);
}
.academic-grid{
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
}
@media (max-width: 880px){
  .academic-grid{ grid-template-columns: 1fr; gap: 48px; }
}

.academic-img{
  position: relative;
  aspect-ratio: 4/5;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--shell);
}
.academic-img svg{ width: 100%; height: 100%; display:block; }
.academic-img .badge{
  position: absolute;
  top: 24px; left: 24px;
  background: var(--paper);
  border-radius: 999px;
  padding: 10px 16px;
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink);
}

.academic-copy h2{
  margin-top: 18px;
  margin-bottom: 24px;
}
.academic-copy .lede{ margin-bottom: 36px; }

.academic-list{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 32px;
  margin: 0 0 36px;
  padding: 0;
  list-style: none;
}
@media (max-width: 560px){ .academic-list{ grid-template-columns: 1fr; } }
.academic-list li{
  font-size: 15px;
  color: var(--ink-2);
  padding-left: 22px;
  position: relative;
  line-height: 1.45;
}
.academic-list li::before{
  content:"";
  position: absolute;
  left: 0; top: 9px;
  width: 10px; height: 1px;
  background: var(--ocean);
}

/* =========================================================
   HIGHLIGHTS
   ========================================================= */
.highlights{
  background: var(--paper);
  overflow: hidden;
}
.highlights-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 72px);
  align-items: end;
}
@media (max-width: 880px){ .highlights-grid{ grid-template-columns: 1fr; } }

.highlights-copy h2 em{ font-style: italic; font-weight: 300; }
.highlights-copy .lede{ margin-top: 22px; }

.highlights-img{
  aspect-ratio: 5/4;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--shell);
  position: relative;
}
.highlights-img svg{ width: 100%; height: 100%; display: block; }

.highlights-list{
  margin-top: clamp(56px, 7vw, 80px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 3vw, 40px);
  padding-top: 36px;
  border-top: 1px solid var(--line);
}
@media (max-width: 880px){ .highlights-list{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px){ .highlights-list{ grid-template-columns: 1fr; } }

.h-item .num{
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
  display: flex; align-items: center; gap: 10px;
}
.h-item .num::before{
  content:""; width: 14px; height: 1px; background: var(--muted);
}
.h-item h4{
  font-family: var(--display);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -.01em;
  margin: 0 0 10px;
}
.h-item h4 em{ font-style: italic; font-weight: 300; }
.h-item p{
  margin: 0;
  font-size: 14.5px;
  color: var(--muted);
  line-height: 1.55;
}

/* =========================================================
   FINAL CTA / FOOTER
   ========================================================= */
.cta{
  background: var(--ocean);
  color: var(--shell);
  padding: clamp(96px, 12vw, 160px) 0;
  position: relative;
  overflow: hidden;
}
.cta::before{
  content:"";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 20% 10%, rgba(251,248,241,.10), transparent 60%),
    radial-gradient(ellipse 60% 50% at 90% 90%, rgba(185,139,79,.22), transparent 60%);
  pointer-events: none;
}
.cta-inner{
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  text-align: center;
  position: relative; z-index: 1;
}
.cta h2{
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(44px, 7vw, 96px);
  letter-spacing: -.025em;
  line-height: 1;
  color: var(--shell);
  max-width: 16ch;
  margin: 0 auto;
}
.cta h2 em{ font-style: italic; }
.cta .lede{ color: rgba(250,246,238,.78); margin: 0 auto; max-width: 52ch; text-align: center; }
.cta-actions{
  display: flex; justify-content: center; gap: 14px; flex-wrap: wrap;
}
.cta .btn-light:hover{ background: #fff; color: var(--ocean); }
.cta .btn-ghost{
  color: var(--shell);
  border-color: rgba(250,246,238,.4);
}
.cta .btn-ghost:hover{
  background: rgba(250,246,238,.08);
  border-color: var(--shell);
}

footer{
  background: var(--ink);
  color: rgba(250,246,238,.7);
  padding: 64px 0 40px;
  font-size: 14px;
}
.footer-top{
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(250,246,238,.14);
}
@media (max-width: 720px){ .footer-top{ grid-template-columns: 1fr; gap: 32px; } }

.footer-wordmark{
  display: flex; flex-direction: column;
  margin-bottom: 22px;
  font-family: var(--display);
  line-height: .95;
}
.footer-wordmark > span:first-child{
  font-size: 32px;
  font-weight: 400;
  letter-spacing: -0.005em;
  color: var(--shell);
}
.footer-wordmark .stays{
  font-size: 14px;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--sun);
  margin-top: 10px;
  font-family: var(--mono);
  font-weight: 400;
  border-top: 1px solid rgba(185,139,79,.5);
  padding-top: 10px;
  width: fit-content;
}
.footer-brand p{
  max-width: 36ch;
  font-size: 14.5px;
  color: rgba(250,246,238,.65);
  margin: 0;
}

.footer-col h5{
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(250,246,238,.5);
  margin: 0 0 18px;
  font-weight: 400;
}
.footer-col a, .footer-col p{
  display: block;
  color: rgba(250,246,238,.78);
  font-size: 14.5px;
  margin: 0 0 10px;
  transition: color .3s var(--ease);
}
.footer-col a:hover{ color: var(--shell); }

.footer-bottom{
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding-top: 28px;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .15em; text-transform: uppercase;
  color: rgba(250,246,238,.45);
}

/* =========================================================
   FLOURISHES
   ========================================================= */
.divider-mark{
  display: flex; align-items: center; gap: 14px;
  margin-top: 28px;
  color: var(--muted);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
}
.divider-mark .dline{ flex: 1; height: 1px; background: currentColor; opacity: .35; }