/* =====================================================================
   Preshit Ambade — shared site styles
   One stylesheet for every page. Edit here to change the whole site.
   ===================================================================== */

:root {
  --ink:        #16211f;
  --ink-soft:   #46524f;
  --ivory:      #f7f3ec;
  --ivory-deep: #efe8dc;
  --teal-900:   #08201c;
  --teal-700:   #0f3b34;
  --teal-500:   #1b6b5f;
  --teal-300:   #4fb3a3;
  --coral:      #ff6b52;
  --coral-soft: #ff8a75;
  --gold:       #e8b04b;
  --card:       #ffffff;
  --line:       #e2d9c9;
  --max: 1140px;
  --shadow: 0 22px 50px -20px rgba(8, 32, 28, 0.45);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--ivory);
  line-height: 1.72;
  font-size: 18px;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--coral); color: #fff; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 26px; }
.serif { font-family: "Fraunces", Georgia, serif; }
.eyebrow {
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--coral);
  display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--coral); display: inline-block; }

/* ============ BUTTONS ============ */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 600; font-size: 0.95rem; text-decoration: none;
  padding: 14px 26px; border-radius: 999px; cursor: pointer; border: 0;
  transition: transform .2s, box-shadow .2s, background .2s;
}
.btn-primary { background: var(--coral); color: #fff; box-shadow: 0 12px 26px -10px rgba(255,107,82,.7); }
.btn-primary:hover { transform: translateY(-2px); background: var(--coral-soft); }
.btn-ghost { background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.25); }
.btn-ghost:hover { background: rgba(255,255,255,.16); transform: translateY(-2px); }
.btn-outline { background: transparent; color: var(--teal-500); border: 1.5px solid var(--teal-500); }
.btn-outline:hover { background: var(--teal-500); color: #fff; transform: translateY(-2px); }

/* ============ NAV ============ */
header.nav {
  position: sticky; top: 0; z-index: 100;
  backdrop-filter: saturate(140%) blur(12px);
  transition: background .3s, box-shadow .3s, padding .3s;
  padding: 16px 0;
}
header.nav.scrolled {
  background: rgba(247, 243, 236, 0.86);
  box-shadow: 0 1px 0 rgba(0,0,0,0.06);
  padding: 10px 0;
}
header.nav:not(.scrolled) .brand,
header.nav:not(.scrolled) .navlinks a { color: #f2efe9; }
.navbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand {
  font-family: "Fraunces", serif; font-weight: 600; font-size: 1.25rem;
  text-decoration: none; letter-spacing: .3px; color: #fff;
}
.brand b { color: var(--coral); }
.navlinks { display: flex; gap: 26px; align-items: center; }
.navlinks a {
  color: #eef3f1; text-decoration: none; font-size: 0.95rem; font-weight: 500;
  position: relative; padding: 4px 0;
}
.navlinks a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0;
  background: var(--coral); transition: width .25s ease;
}
.navlinks a:hover::after, .navlinks a.active::after { width: 100%; }
header.nav.scrolled .navlinks a, header.nav.scrolled .brand { color: var(--ink); }
.nav-cta {
  background: var(--coral); color: #fff !important; padding: 9px 18px; border-radius: 999px;
  font-weight: 600; box-shadow: 0 8px 20px -6px rgba(255,107,82,.6);
}
.nav-cta::after { display: none; }
.nav-cta:hover { background: var(--coral-soft); }
.burger { display: none; background: none; border: 0; cursor: pointer; padding: 6px; }
.burger span { display: block; width: 26px; height: 2px; background: #fff; margin: 5px 0; transition: .3s; }
header.nav.scrolled .burger span { background: var(--ink); }

/* ============ HERO (home) ============ */
.hero {
  position: relative; overflow: hidden;
  background: radial-gradient(120% 120% at 80% 0%, var(--teal-700) 0%, var(--teal-900) 55%);
  color: #eaf4f1; margin-top: -76px; padding-top: 76px;
}
.aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; opacity: .55; }
.aurora span { position: absolute; border-radius: 50%; filter: blur(70px); animation: drift 18s ease-in-out infinite; }
.aurora .b1 { width: 460px; height: 460px; background: #14b39a; top: -140px; right: -80px; }
.aurora .b2 { width: 380px; height: 380px; background: #ff6b52; bottom: -160px; left: -60px; animation-delay: -6s; }
.aurora .b3 { width: 300px; height: 300px; background: #2dd4bf; top: 40%; left: 40%; animation-delay: -11s; opacity:.5; }
@keyframes drift {
  0%,100% { transform: translate(0,0) scale(1); }
  33%     { transform: translate(40px,30px) scale(1.12); }
  66%     { transform: translate(-30px,20px) scale(.95); }
}
.hero-grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.25fr .9fr; gap: 60px; align-items: center;
  padding: 70px 0 96px;
}
.hero h1 {
  font-family: "Fraunces", serif; font-weight: 600;
  font-size: clamp(2.6rem, 6vw, 4.4rem); line-height: 1.03; margin: 20px 0 18px; letter-spacing: -0.5px;
}
.hero h1 em { font-style: italic; color: var(--gold); }
.hero .role { font-size: 1.12rem; color: #bfe0d8; max-width: 30ch; margin-bottom: 30px; }
.hero .role strong { color: #fff; font-weight: 600; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; }
.hero-photo { justify-self: center; position: relative; }
.hero-photo .frame {
  width: min(340px, 74vw); aspect-ratio: 4/5; border-radius: 24px; overflow: hidden;
  padding: 0; box-shadow: var(--shadow); transform: rotate(-2deg);
  background: #0d3b34;
}
.hero-photo .frame img {
  width: 106%; height: 106%;
  margin-left: -3%; margin-top: -3%;
  object-fit: cover; object-position: center;
  border-radius: 24px; display: block;
  border: 0; outline: 0;
}
.hero-photo .badge {
  position: absolute; bottom: -18px; left: -26px; background: #fff; color: var(--ink);
  border-radius: 16px; padding: 12px 16px; box-shadow: var(--shadow); transform: rotate(-2deg);
  display: flex; align-items: center; gap: 12px; max-width: 230px;
}
.hero-photo .badge .dot { width: 40px; height: 40px; border-radius: 12px; background: var(--teal-500); color:#fff;
  display: grid; place-items: center; font-family: "Fraunces", serif; font-weight: 700; font-size: 1.1rem; flex-shrink: 0; }
.hero-photo .badge small { font-size: .72rem; color: var(--ink-soft); line-height: 1.35; display:block; }

/* ============ PAGE HERO (inner pages) ============ */
.page-hero {
  position: relative; overflow: hidden; color: #eaf4f1;
  background: radial-gradient(120% 130% at 85% 0%, var(--teal-700) 0%, var(--teal-900) 60%);
  margin-top: -76px; padding: 150px 0 76px;
}
.page-hero .wrap { position: relative; z-index: 2; }
.page-hero h1 {
  font-family: "Fraunces", serif; font-weight: 600; letter-spacing: -0.5px;
  font-size: clamp(2.2rem, 5vw, 3.5rem); line-height: 1.05; margin: 16px 0 14px;
}
.page-hero p { color: #bfe0d8; max-width: 60ch; font-size: 1.08rem; margin: 0; }

/* ============ STATS STRIP (home) ============ */
.stats { position: relative; z-index: 3; margin-top: -46px; }
.stats-inner {
  background: var(--card); border-radius: 20px; box-shadow: var(--shadow);
  display: grid; grid-template-columns: repeat(4, 1fr); overflow: hidden;
}
.stat { padding: 26px 24px; text-align: center; border-right: 1px solid var(--line); }
.stat:last-child { border-right: 0; }
.stat .num { font-family: "Fraunces", serif; font-size: 2rem; font-weight: 700; color: var(--teal-500); line-height: 1; }
.stat .lbl { font-size: .82rem; color: var(--ink-soft); margin-top: 8px; letter-spacing:.02em; }

/* ============ SECTIONS ============ */
section.block { padding: 88px 0; }
section.block.tight { padding: 64px 0; }
.sec-head { max-width: 64ch; margin-bottom: 46px; }
.sec-head h2 {
  font-family: "Fraunces", serif; font-weight: 600; letter-spacing: -.5px;
  font-size: clamp(1.9rem, 4vw, 2.9rem); margin: 14px 0 0; line-height: 1.1;
}
.bg-deep { background: var(--ivory-deep); }

/* about */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: start; }
.about-grid p { color: var(--ink-soft); margin: 0 0 20px; }
.pull {
  border-left: 3px solid var(--coral); padding: 6px 0 6px 22px; margin: 26px 0;
  font-family: "Fraunces", serif; font-style: italic; font-size: 1.25rem; color: var(--ink);
}
.lede { font-size: 1.18rem; color: var(--ink-soft); max-width: 68ch; }

/* research cards */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px,1fr)); gap: 22px; }
.rcard {
  background: var(--card); border-radius: 18px; padding: 30px; border: 1px solid var(--line);
  transition: transform .25s, box-shadow .25s, border-color .25s; position: relative; overflow: hidden;
}
.rcard::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--teal-300), var(--coral)); transform: scaleX(0);
  transform-origin: left; transition: transform .3s;
}
.rcard:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: transparent; }
.rcard:hover::before { transform: scaleX(1); }
.rcard .ico {
  width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center;
  background: var(--ivory-deep); font-size: 1.5rem; margin-bottom: 18px;
}
.rcard h3 { font-family: "Fraunces", serif; font-weight: 600; font-size: 1.3rem; margin: 0 0 10px; }
.rcard p { color: var(--ink-soft); margin: 0; font-size: .98rem; }

/* ============ EDUCATION TIMELINE ============ */
.edu-sec { background: var(--teal-900); color: #dcece8; }
.edu-sec .sec-head h2 { color: #fff; }
.edu-sec .eyebrow, .on-teal .eyebrow { color: var(--gold); }
.edu-sec .eyebrow::before, .on-teal .eyebrow::before { background: var(--gold); }
.timeline { position: relative; margin-top: 20px; padding-left: 30px; }
.timeline::before {
  content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px;
  background: linear-gradient(var(--teal-300), rgba(79,179,163,.15));
}
.tl-item { position: relative; padding: 0 0 38px 34px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: ""; position: absolute; left: -30px; top: 4px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--teal-900); border: 3px solid var(--coral); box-shadow: 0 0 0 4px rgba(255,107,82,.15);
}
.tl-item .yr { font-size: .82rem; font-weight: 600; letter-spacing: .12em; color: var(--gold); text-transform: uppercase; }
.tl-item h3 { font-family: "Fraunces", serif; font-weight: 600; font-size: 1.35rem; margin: 6px 0 4px; color: #fff; }
.tl-item .sch { color: #9fc4bc; font-size: .96rem; }

/* ============ AWARDS ============ */
.awards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 22px; }
.award {
  background: var(--card); border-radius: 18px; padding: 30px; border: 1px solid var(--line);
  display: flex; gap: 18px; align-items: flex-start; transition: transform .2s, box-shadow .2s;
}
.award:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.award .medal { font-size: 1.8rem; line-height: 1; filter: saturate(1.2); }
.award .yr { color: var(--coral); font-weight: 700; font-size: .82rem; letter-spacing:.08em; }
.award p { margin: 6px 0 0; color: var(--ink-soft); font-size: .96rem; }

/* ============ INTERESTS CTA ============ */
.interests-cta {
  background: linear-gradient(120deg, var(--teal-700), var(--teal-500));
  border-radius: 26px; padding: 60px; color: #eaf4f1; position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1.4fr .8fr; gap: 40px; align-items: center;
}
.interests-cta::after {
  content: "📷"; position: absolute; right: -10px; bottom: -30px; font-size: 12rem; opacity: .08; transform: rotate(-12deg);
}
.interests-cta h2 { font-family: "Fraunces", serif; font-weight: 600; font-size: clamp(1.7rem,3vw,2.4rem); margin: 12px 0 14px; color:#fff; }
.interests-cta p { color: #cfe6e0; margin: 0 0 26px; }
.interests-cta .eyebrow { color: var(--gold); }
.interests-cta .eyebrow::before { background: var(--gold); }

/* ============ NUMBERED PAPER LIST (working papers) ============ */
.paper-list { display: grid; gap: 22px; margin-top: 10px; }
.paper {
  background: var(--card); border: 1px solid var(--line); border-radius: 18px;
  padding: 30px 32px; display: grid; grid-template-columns: 62px 1fr; gap: 24px; align-items: start;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.paper:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; }
.paper .idx {
  font-family: "Fraunces", serif; font-weight: 700; font-size: 1.7rem; color: #fff;
  width: 62px; height: 62px; border-radius: 16px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--teal-500), var(--teal-700));
}
.paper h3 { font-family: "Fraunces", serif; font-weight: 600; font-size: 1.28rem; margin: 4px 0 10px; line-height: 1.3; }
.paper p { color: var(--ink-soft); margin: 0 0 16px; font-size: 1rem; }
.tag {
  display: inline-flex; align-items: center; gap: 7px; font-size: .8rem; font-weight: 600;
  padding: 6px 14px; border-radius: 999px; background: var(--ivory-deep); color: var(--teal-500);
}
.tag.muted { background: #f0ece3; color: var(--ink-soft); }
.paper a.tag { text-decoration: none; }
.paper a.tag:hover { background: var(--coral); color: #fff; }

/* ============ PUBLICATIONS ============ */
.pub-list { display: grid; gap: 16px; counter-reset: pub; }
.pub {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 24px 28px;
  position: relative; transition: transform .2s, box-shadow .2s; border-left: 4px solid var(--teal-300);
}
.pub:hover { transform: translateX(4px); box-shadow: var(--shadow); }
.pub p { margin: 0; color: var(--ink); font-size: 1rem; }
.pub .venue { color: var(--teal-500); font-weight: 600; font-style: italic; }
.conf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 20px; }
.conf-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 28px;
  border-top: 4px solid var(--gold); transition: transform .2s, box-shadow .2s;
}
.conf-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.conf-card .yr { color: var(--coral); font-weight: 700; font-size: .82rem; letter-spacing: .08em; }
.conf-card h3 { font-family: "Fraunces", serif; font-weight: 600; font-size: 1.2rem; margin: 6px 0 0; }

/* ============ ARTICLES ============ */
.article-list { display: grid; gap: 18px; }
.article-item {
  background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 28px 32px;
  display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap;
  transition: transform .2s, box-shadow .2s;
}
.article-item:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.article-item .date { font-size: .82rem; font-weight: 600; letter-spacing: .06em; color: var(--coral); text-transform: uppercase; }
.article-item h3 { font-family: "Fraunces", serif; font-weight: 600; font-size: 1.25rem; margin: 8px 0 0; max-width: 46ch; }
.article-item .lang { font-size: .78rem; color: var(--ink-soft); }

/* ============ QUOTES (teaching feedback) ============ */
.quote-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 22px; }
.quote {
  background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 30px 30px 26px;
  position: relative; transition: transform .2s, box-shadow .2s;
}
.quote:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.quote::before {
  content: "\201C"; font-family: "Fraunces", serif; font-size: 4rem; color: var(--teal-300);
  position: absolute; top: 6px; left: 20px; opacity: .5; line-height: 1;
}
.quote p { margin: 26px 0 0; color: var(--ink); font-size: 1.02rem; font-style: italic; }
.quote .who { margin-top: 16px; font-size: .82rem; color: var(--ink-soft); font-style: normal; font-weight: 600; }

/* ============ DOCUMENT CARDS (teaching materials) ============ */
.doc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 18px; }
.doc-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 26px;
  text-decoration: none; color: var(--ink); display: flex; flex-direction: column; gap: 14px;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.doc-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: var(--teal-300); }
.doc-card .file { width: 44px; height: 44px; border-radius: 12px; background: var(--ivory-deep);
  display: grid; place-items: center; font-size: 1.3rem; }
.doc-card h3 { font-family: "Fraunces", serif; font-weight: 600; font-size: 1.1rem; margin: 0; }
.doc-card .open { color: var(--teal-500); font-weight: 600; font-size: .88rem; margin-top: auto; }
.doc-card:hover .open { color: var(--coral); }

/* ============ COURSES (teaching page) ============ */
.course-list { display: grid; gap: 26px; margin-top: 10px; }
.course {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--teal-500);
  border-radius: 18px;
  padding: 30px 34px;
  transition: transform .2s, box-shadow .2s, border-left-color .2s;
}
.course:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-left-color: var(--coral); }
.course-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 24px;
  padding-bottom: 20px; margin-bottom: 22px; border-bottom: 1px solid var(--line); flex-wrap: wrap;
}
.course-code {
  display: inline-block;
  font-family: "Inter", sans-serif; font-weight: 700; font-size: .78rem;
  letter-spacing: .1em; color: var(--teal-500);
  background: var(--ivory-deep); padding: 5px 12px; border-radius: 999px;
  margin-bottom: 10px;
}
.course-title {
  font-family: "Fraunces", serif; font-weight: 600; font-size: 1.5rem;
  margin: 0; color: var(--ink); line-height: 1.25;
}
.course-meta { text-align: right; display: flex; flex-direction: column; gap: 4px; }
.course-meta .course-term { font-weight: 600; color: var(--coral); font-size: .92rem; letter-spacing: .01em; }
.course-meta .course-level { color: var(--ink-soft); font-size: .82rem; }

.course-topics-label {
  font-family: "Inter", sans-serif; font-weight: 700; font-size: .78rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft);
  margin: 0 0 14px;
}
.course-topics {
  columns: 2; column-gap: 34px;
  margin: 0; padding-left: 22px;
}
.course-topics li {
  break-inside: avoid;
  margin: 0 0 10px;
  color: var(--ink);
  font-size: .98rem;
  line-height: 1.5;
  padding-left: 4px;
}
.course-topics li::marker { color: var(--teal-500); font-weight: 700; }

@media (max-width: 700px) {
  .course { padding: 24px 22px; }
  .course-head { flex-direction: column; gap: 8px; }
  .course-meta { text-align: left; flex-direction: row; gap: 12px; flex-wrap: wrap; }
  .course-topics { columns: 1; }
}

/* ============ CONTACT ============ */
.contact-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 60px; align-items: center; }
.contact-info { display: grid; gap: 30px; }
.contact-info-head { margin-bottom: 8px; }
.contact-info-head h2 { font-family: "Fraunces", serif; font-weight: 600; font-size: 1.75rem; margin: 6px 0 10px; line-height: 1.2; }
.contact-info-head p { color: var(--ink-soft); margin: 0; font-size: 1rem; line-height: 1.6; }
.contact-line { display: flex; gap: 18px; align-items: center; }
.contact-line .ci {
  width: 46px; height: 46px; border-radius: 12px; background: var(--ivory-deep);
  display: grid; place-items: center; font-size: 1.2rem; flex-shrink: 0;
}
.contact-line h3 { margin: 0 0 3px; font-size: 1rem; font-family: "Fraunces", serif; font-weight: 600; }
.contact-line p, .contact-line a { margin: 0; color: var(--ink-soft); text-decoration: none; font-size: .98rem; }
.contact-line a:hover { color: var(--coral); }
.form-card { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 36px; box-shadow: var(--shadow); }
.form-card.form-embed { padding: 0; overflow: hidden; background: #fff; }
.form-card.form-embed iframe { display: block; width: 100%; border: 0; min-height: 993px; border-radius: 22px; }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: .82rem; font-weight: 600; margin-bottom: 7px; color: var(--ink); }
.field input, .field textarea {
  width: 100%; padding: 13px 16px; border: 1.5px solid var(--line); border-radius: 12px;
  font-family: inherit; font-size: .98rem; background: var(--ivory); color: var(--ink); transition: border-color .2s;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--teal-500); }
.field textarea { resize: vertical; min-height: 130px; }

/* ============ SURGEON GENERAL FRAMEWORK (image + attribution) ============ */
.framework-figure {
  max-width: 820px;
  margin: 0 auto;
  padding: 0;
}
.framework-image {
  background: #fff;
  border-radius: 20px;
  padding: 22px;
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
}
.framework-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  background: var(--ivory);
}
.framework-placeholder {
  padding: 60px 24px;
  text-align: center;
  color: var(--ink-soft);
  border-radius: 10px;
  background: var(--ivory-deep);
  border: 2px dashed #cdc0a5;
}
.framework-placeholder .fp-inner { max-width: 460px; margin: 0 auto; line-height: 1.7; }
.framework-placeholder code {
  background: #fff; padding: 2px 8px; border-radius: 4px;
  font-size: .88em; color: var(--coral);
}
.framework-placeholder a { color: var(--coral); font-weight: 600; text-decoration: none; }
.framework-attribution {
  margin: 22px 0 0;
  padding: 20px 24px;
  background: var(--card);
  border-left: 4px solid var(--gold);
  border-radius: 10px;
  font-size: .85rem;
  color: var(--ink-soft);
  line-height: 1.65;
}
.framework-attribution strong { color: var(--ink); }
.framework-attribution a { color: var(--coral); font-weight: 600; text-decoration: none; }

/* legacy custom-wheel classes (no longer used but kept harmless) */
.framework-wheel {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: 940px;
  margin: 0 auto;
}
.fw-center {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--teal-500), var(--teal-700));
  color: #fff;
  display: grid;
  place-items: center;
  padding: 22px;
  text-align: center;
  box-shadow: 0 18px 40px -18px rgba(8,32,28,0.55), inset 0 0 0 6px rgba(255,255,255,0.08);
  position: relative;
}
.fw-center::before {
  content: "";
  position: absolute; inset: -8px;
  border-radius: 50%;
  border: 2px dashed rgba(232,176,75,0.5);
  animation: fw-spin 40s linear infinite;
}
@keyframes fw-spin { to { transform: rotate(360deg); } }
.fw-center-inner { position: relative; z-index: 2; }
.fw-center-eye { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.fw-center-title { font-family: "Fraunces", serif; font-weight: 700; font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1.05; }

.fw-domain {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px 18px;
  text-align: center;
  transition: transform .2s, box-shadow .2s, border-color .2s;
  position: relative;
  overflow: hidden;
  border-top: 4px solid;
}
.fw-domain:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.fw-domain .fw-ico { font-size: 1.8rem; margin-bottom: 6px; }
.fw-domain h3 {
  font-family: "Fraunces", serif; font-weight: 600;
  font-size: .95rem; margin: 4px 0 6px; line-height: 1.25;
  color: var(--ink);
}
.fw-domain p { font-size: .78rem; color: var(--ink-soft); margin: 0; line-height: 1.45; }

.fw-d1 { grid-column: 1 / 2; grid-row: 1 / 2; border-top-color: #e55b45; }        /* Protection */
.fw-d2 { grid-column: 2 / 3; grid-row: 1 / 2; border-top-color: var(--teal-500); } /* Connection */
.fw-d3 { grid-column: 3 / 4; grid-row: 1 / 2; border-top-color: var(--gold); }     /* Harmony */
.fw-d4 { grid-column: 1 / 2; grid-row: 2 / 3; border-top-color: #c47a4a; }         /* Mattering */
.fw-d5 { grid-column: 3 / 4; grid-row: 2 / 3; border-top-color: var(--teal-300); } /* Growth */

@media (max-width: 700px) {
  .framework-wheel { grid-template-columns: 1fr; }
  .fw-center, .fw-d1, .fw-d2, .fw-d3, .fw-d4, .fw-d5 { grid-column: 1 / 2; grid-row: auto; }
  .fw-center { aspect-ratio: auto; padding: 32px; border-radius: 22px; order: -1; }
}

/* ============ FOUNDATIONAL PAPER ============ */
.foundational {
  background: var(--card);
  border: 2px solid var(--gold);
  border-radius: 22px;
  padding: 32px;
  box-shadow: 0 22px 50px -22px rgba(232,176,75,0.5);
  position: relative;
}
.foundational .fnd-badge {
  display: inline-block;
  background: var(--gold); color: #3a2a08;
  font-weight: 700; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
  padding: 6px 14px; border-radius: 999px;
  margin-bottom: 14px;
}
.foundational .fnd-cite {
  font-family: "Fraunces", serif; font-size: 1.15rem; color: var(--ink);
  line-height: 1.55; margin: 0 0 22px;
}
.foundational .fnd-cite strong { color: var(--coral); }
.foundational .fnd-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }

/* ============ DOMAIN SCORE BARS (assessment result) ============ */
.domain-scores {
  margin-top: 34px; padding-top: 30px; border-top: 1px solid var(--line);
}
.domain-scores h3 {
  font-family: "Fraunces", serif; font-weight: 600; font-size: 1.15rem;
  margin: 0 0 20px; text-align: center;
}
.domain-scores .ds-row { margin-bottom: 16px; }
.domain-scores .ds-row:last-child { margin-bottom: 0; }
.domain-scores .ds-meta {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 6px; font-size: .88rem;
}
.domain-scores .ds-name { font-weight: 600; color: var(--ink); }
.domain-scores .ds-value { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.domain-scores .ds-track {
  height: 10px; border-radius: 999px; background: var(--ivory-deep); overflow: hidden;
}
.domain-scores .ds-fill {
  height: 100%; border-radius: 999px; transition: width .8s cubic-bezier(.2,.7,.2,1);
}
.ds-color-protection { background: linear-gradient(90deg, #ff8a75, #e55b45); }
.ds-color-connection { background: linear-gradient(90deg, #4fb3a3, var(--teal-500)); }
.ds-color-harmony    { background: linear-gradient(90deg, #f2c96e, var(--gold)); }
.ds-color-mattering  { background: linear-gradient(90deg, #d59870, #c47a4a); }
.ds-color-growth     { background: linear-gradient(90deg, #7ad0c1, var(--teal-300)); }

/* ============ AUGUSTA+ HERO / INSTRUMENT ============ */
.instrument-hero {
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 60px; align-items: center;
  position: relative; z-index: 2;
}
.instrument-hero .badge-pill {
  display: inline-block; padding: 6px 14px; border-radius: 999px;
  background: rgba(232,176,75,.18); color: var(--gold); font-size: .78rem;
  font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
}
.gauge-preview {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
  border-radius: 22px; padding: 34px; backdrop-filter: blur(8px);
}
.gauge-preview .metric { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.gauge-preview .metric-num { font-family: "Fraunces", serif; font-size: 3rem; font-weight: 700; color: var(--gold); line-height: 1; }
.gauge-preview .metric-lbl { text-align: right; color: #bfe0d8; font-size: .88rem; max-width: 140px; }
.gauge-preview .bar { height: 10px; border-radius: 999px; background: rgba(255,255,255,.12); overflow: hidden; }
.gauge-preview .bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--teal-300), var(--gold), var(--coral)); }
.gauge-preview .marks { display: flex; justify-content: space-between; margin-top: 10px; font-size: .72rem; color: #9fc4bc; letter-spacing: .05em; }

.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 22px; }
.feature {
  background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 30px;
  transition: transform .2s, box-shadow .2s;
}
.feature:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.feature .num { font-family: "Fraunces", serif; font-size: 2rem; font-weight: 700; color: var(--coral); }
.feature h3 { font-family: "Fraunces", serif; font-weight: 600; font-size: 1.2rem; margin: 10px 0 8px; }
.feature p { color: var(--ink-soft); margin: 0; font-size: .96rem; }

/* ============ ASSESSMENT / QUIZ ============ */
.quiz-shell {
  background: var(--card); border: 1px solid var(--line); border-radius: 24px;
  padding: 42px 44px; box-shadow: var(--shadow); max-width: 780px; margin: 0 auto;
}
.quiz-progress {
  height: 8px; background: var(--ivory-deep); border-radius: 999px; overflow: hidden; margin-bottom: 8px;
}
.quiz-progress-fill {
  height: 100%; background: linear-gradient(90deg, var(--teal-500), var(--coral));
  border-radius: 999px; transition: width .35s ease; width: 0%;
}
.quiz-progress-meta { display: flex; justify-content: space-between; font-size: .82rem; color: var(--ink-soft); margin-bottom: 32px; }
.quiz-step { display: none; }
.quiz-step.active { display: block; }
.quiz-step h2 {
  font-family: "Fraunces", serif; font-weight: 600; font-size: 1.6rem; margin: 0 0 6px; line-height: 1.3;
}
.quiz-step .q-hint { color: var(--ink-soft); margin: 0 0 26px; font-size: .96rem; }

.prof-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 14px; }
.prof-opt {
  padding: 22px 16px; border-radius: 14px; border: 2px solid var(--line);
  background: var(--ivory); cursor: pointer; text-align: center; transition: all .2s;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.prof-opt:hover { border-color: var(--teal-300); transform: translateY(-2px); }
.prof-opt.selected { border-color: var(--coral); background: #fff; box-shadow: 0 6px 16px -4px rgba(255,107,82,.35); }
.prof-opt .p-ico { font-size: 1.6rem; }
.prof-opt .p-label { font-weight: 600; font-size: .92rem; }

.likert-row {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 8px;
}
.likert-opt {
  padding: 16px 8px; border-radius: 12px; border: 2px solid var(--line);
  background: var(--ivory); text-align: center; cursor: pointer; transition: all .2s;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: .82rem; color: var(--ink-soft); font-weight: 500;
}
.likert-opt:hover { border-color: var(--teal-300); }
.likert-opt.selected { border-color: var(--coral); background: #fff; color: var(--ink); box-shadow: 0 6px 14px -4px rgba(255,107,82,.3); }
.likert-opt .dot-num {
  width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 1.5px solid var(--line);
  display: grid; place-items: center; font-weight: 700; color: var(--ink);
}
.likert-opt.selected .dot-num { background: var(--coral); border-color: var(--coral); color: #fff; }
.likert-input { position: absolute; opacity: 0; pointer-events: none; }

.quiz-nav {
  display: flex; justify-content: space-between; gap: 12px; margin-top: 32px;
  padding-top: 24px; border-top: 1px solid var(--line);
}
.quiz-nav .btn-outline { background: transparent; }

/* Grouped (multi-item) quiz step — inline number + text, matching fonts */
.group-items { display: flex; flex-direction: column; gap: 26px; margin-top: 12px; }
.group-item { padding: 20px 0 4px; border-top: 1px solid var(--line); }
.group-item:first-child { border-top: 0; padding-top: 4px; }
.gi-text {
  margin: 0 0 14px;
  font-family: inherit;
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--ink);
  font-weight: 500;
}
.gi-num {
  font-weight: 700;
  color: var(--teal-500);
  margin-right: 8px;
  font-variant-numeric: tabular-nums;
}

/* Do-not-print / do-not-copy notice on assessment page */
.assessment-notice {
  text-align: center;
  font-size: .82rem;
  color: var(--ink-soft);
  margin: 28px auto 0;
  padding: 12px 20px;
  border: 1px dashed var(--coral);
  border-radius: 12px;
  max-width: 560px;
  font-weight: 500;
  letter-spacing: .01em;
  background: rgba(255,107,82,.04);
}

/* Result screen */
.result-hero { text-align: center; padding: 20px 0; }
.result-score {
  font-family: "Fraunces", serif; font-size: 4.5rem; font-weight: 700;
  background: linear-gradient(120deg, var(--teal-500), var(--coral));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  line-height: 1;
}
.result-tier {
  display: inline-block; margin: 14px 0 10px; padding: 8px 22px; border-radius: 999px;
  font-weight: 700; font-size: .95rem; letter-spacing: .05em;
}
.tier-low { background: #ffe3dc; color: #c93b1e; }
.tier-mod { background: #fdecc6; color: #93670f; }
.tier-high { background: #d2ebe4; color: #16695c; }

.result-gauge {
  margin: 28px auto 8px; max-width: 500px;
  height: 14px; border-radius: 999px; overflow: hidden; position: relative;
  background: linear-gradient(90deg, #ff8f7a 0%, #f0c86a 45%, #4fb3a3 100%);
}
.result-marker {
  position: absolute; top: -6px; width: 4px; height: 26px; border-radius: 2px;
  background: var(--ink); box-shadow: 0 2px 6px rgba(0,0,0,.35); transition: left .5s ease;
}
.gauge-labels { display: flex; justify-content: space-between; max-width: 500px; margin: 8px auto 0; font-size: .78rem; color: var(--ink-soft); font-weight: 600; }

.result-context {
  margin: 32px 0 20px; padding: 22px 24px; border-radius: 16px;
  background: var(--ivory-deep); border-left: 4px solid var(--coral);
}
.result-context h3 { font-family: "Fraunces", serif; font-weight: 600; font-size: 1.15rem; margin: 0 0 8px; }
.result-context p { margin: 0; color: var(--ink-soft); font-size: .96rem; }

.result-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }

.disclaimer {
  font-size: .82rem; color: var(--ink-soft); padding: 16px 20px; border-radius: 12px;
  background: #fff5e5; border: 1px solid #f2d999; margin-top: 26px; line-height: 1.55;
}
.disclaimer strong { color: #93670f; }

@media (max-width: 700px) {
  .instrument-hero { grid-template-columns: 1fr; }
  .quiz-shell { padding: 28px 22px; }
  .likert-row { grid-template-columns: repeat(5, 1fr); gap: 6px; }
  .likert-opt { padding: 10px 4px; font-size: .7rem; }
  .likert-opt .dot-num { width: 26px; height: 26px; font-size: .82rem; }
  .result-score { font-size: 3.2rem; }
}

/* ============ FOOTER ============ */
footer { background: var(--teal-900); color: #a9c7c0; padding: 60px 0 34px; text-align: center; }
footer .fbrand { font-family: "Fraunces", serif; font-size: 1.6rem; color: #fff; font-weight: 600; }
footer .fbrand b { color: var(--coral); }
footer .flinks { display: flex; justify-content: center; flex-wrap: wrap; gap: 24px; margin: 22px 0; }
footer .flinks a { color: #cfe6e0; text-decoration: none; font-size: .95rem; }
footer .flinks a:hover { color: var(--coral); }
footer .copy { font-size: .82rem; color: #6f938c; margin-top: 18px; }

/* ============ SCROLL REVEAL ============ */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ============ RESPONSIVE ============ */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; text-align: center; padding-bottom: 80px; }
  .hero .role { margin-left: auto; margin-right: auto; }
  .hero-cta { justify-content: center; }
  .hero-photo { order: -1; }
  .about-grid, .interests-cta, .contact-grid { grid-template-columns: 1fr; }
  .stats-inner { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2) { border-right: 0; }
  .stat:nth-child(1), .stat:nth-child(2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 640px) {
  .navlinks { display: none; }
  .burger { display: block; }
  .navlinks.open {
    display: flex; flex-direction: column; position: absolute; top: 100%; right: 26px;
    background: #fff; padding: 18px 24px; border-radius: 16px; box-shadow: var(--shadow); gap: 16px;
  }
  /* Override the hero-nav white color so mobile-menu items stay dark on the white dropdown, regardless of scroll state */
  header.nav:not(.scrolled) .navlinks.open a,
  header.nav.scrolled .navlinks.open a { color: var(--ink); }
  .interests-cta { padding: 40px 28px; }
  .paper { grid-template-columns: 1fr; }
  .page-hero { padding-top: 130px; }
}
@media (prefers-reduced-motion: reduce) {
  .aurora span { animation: none; }
  .reveal { transition: none; opacity: 1; transform: none; }
}