@import url('../fonts/fonts.css?v=3');

:root {
  --white: #FCFCFC;
  --slate: #2A2A2A;
  --teal: #80D6C5;
  --green: #97D39B;
  --yellow: #D3CE71;
  --purple: #909ECE;

  --teal-deep: #2E7E6E;
  --green-deep: #3C6B43;
  --slate-soft: #4A4A4A;
  --gold: #D6A101;
  --label: #2F6A4A;
  --green-text: #17251A;
  --line: rgba(42, 42, 42, 0.16);
  --line-soft: rgba(42, 42, 42, 0.09);

  --serif: 'Quinn Display', 'Times New Roman', serif;
  --sans: 'Helvetica Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --maxw: 1180px;
  --gutter: clamp(20px, 5vw, 64px);
  --nav-h: 78px;

}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
.section[id], .wrap[id] { scroll-margin-top: 96px; }

body {
  background: var(--white);
  color: var(--slate);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 19px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  cursor: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='20'%20height='20'%3E%3Cpolygon%20points='3,2%203,14%2015,8'%20fill='%23605E60'/%3E%3C/svg%3E") 3 2, auto;
}
@media (pointer: coarse) { body { cursor: auto; } }
input, textarea { cursor: text; }
a, button, select, .btn, .card-link, label, [role="button"] { cursor: pointer; }
@media (max-width: 680px) { body { font-size: 17px; } }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 100;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--slate);
}

a { color: inherit; text-decoration: none; }

p { max-width: 60ch; }

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.eyebrow {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--label);
}

.accent-green { color: var(--green-deep); }
.accent-teal { color: var(--teal-deep); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-weight: 300;
  font-size: 14px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 15px 30px;
  border-radius: 100px;
  border: 1px solid transparent;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), background .35s, color .35s, border-color .35s;
}
.btn:hover { transform: translateY(-2px); }
.btn-fill { background: var(--teal); color: #1f5249; }
.btn-fill:hover { background: #6fcdbb; }
.btn-line { border-color: var(--slate); color: var(--slate); background: transparent; }
.btn-line:hover { background: var(--slate); color: var(--white); }
.btn .arrow { transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.btn:hover .arrow { transform: translateX(4px); }

/* ---------- nav ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  z-index: 100;
  background: rgba(252, 252, 252, 0.94);
  backdrop-filter: saturate(180%) blur(12px);
  transition: background .4s, border-color .4s, backdrop-filter .4s, box-shadow .4s;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(252, 252, 252, 0.98);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 18px rgba(42, 42, 42, 0.05);
}
.nav .wrap { display: flex; align-items: center; justify-content: space-between; }
.brand {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 22px;
  letter-spacing: 0.01em;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 34px;
  list-style: none;
}
.nav-links a {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  position: relative;
  padding: 6px 0;
  color: var(--slate);
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--teal-deep);
  transition: width .3s ease;
}
.nav-links a:hover::after { width: 100%; }
.nav-cta {
  border: 1px solid var(--slate);
  border-radius: 100px;
  padding: 9px 20px !important;
}
.nav-cta::after { display: none; }
.nav-cta:hover { background: var(--slate); color: var(--white); }
.nav-cta { display: inline-flex; align-items: center; gap: 7px; }
.nav-check { width: 13px; height: 13px; margin-left: 9px; color: var(--teal-deep); transition: color .3s; }
.nav-cta:hover .nav-check { color: var(--white); }
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; color: var(--slate); }
.brand, .nav-cta { white-space: nowrap; }
/* between full desktop and the hamburger: keep the bigger type from crowding */
@media (min-width: 901px) and (max-width: 1120px) {
  .nav-links { gap: 22px; }
  .nav-links a { font-size: 15px; letter-spacing: 0.05em; }
  .brand { font-size: 19px; }
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: clamp(540px, 74vh, 760px);
  display: flex;
  align-items: center;
  padding-top: calc(var(--nav-h) + clamp(16px, 4vh, 40px));
  padding-bottom: clamp(48px, 7vh, 90px);
  overflow: visible;
}
.hero .wrap {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.hero-copy { position: relative; z-index: 3; max-width: 560px; }
.hero h1 {
  font-size: clamp(54px, 8.5vw, 116px);
  margin: 22px 0 26px;
}
.hero h1 .line { display: block; overflow: hidden; }
.hero-lead {
  font-size: clamp(18px, 2.1vw, 22px);
  max-width: 46ch;
  margin-bottom: 38px;
  color: var(--slate);
}
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }
.hero-figure { position: relative; z-index: 2; width: 100%; max-width: 430px; margin-left: auto; }
.hero-figure .media-ph { width: 100%; }
.hero-figure.has-video { max-width: none; overflow: hidden; border-radius: 6px; }
.hero-figure.has-video video { display: block; width: 100%; height: auto; border-radius: inherit; }
.hero-portrait-float { display: none; }

.scroll-cue {
  position: absolute;
  bottom: clamp(20px, 4vh, 34px); left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--slate-soft);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.scroll-cue .bar {
  width: 1px; height: 40px;
  background: linear-gradient(var(--slate-soft), transparent);
  animation: cue 2.2s ease-in-out infinite;
  transform-origin: top;
}
@keyframes cue { 0%,100%{transform:scaleY(.4);opacity:.4} 50%{transform:scaleY(1);opacity:1} }

/* ---------- sections ---------- */
section { position: relative; }
section[id], [id].section { scroll-margin-top: calc(var(--nav-h) + 24px); }
.section { padding: clamp(90px, 13vh, 170px) 0; }
.section-head { max-width: 720px; margin-bottom: 64px; }
.section-head h2 {
  font-size: clamp(38px, 5.5vw, 76px);
  margin: 18px 0 0;
}
.section-head p {
  font-size: clamp(17px, 1.9vw, 22px);
  color: var(--slate);
  max-width: 50ch;
  margin-top: 24px;
}

.band-green { background: var(--green); color: var(--green-text); }
.band-green h2, .band-green h3 { color: var(--green-text); }
.band-green .eyebrow { color: var(--green-text); }
.band-green .tl-item { border-color: rgba(23, 37, 26, 0.28); }
.band-green .tl-year { color: var(--green-text); }
.band-green .tl-body p { color: var(--green-text); }
.band-green.pullquote blockquote { color: var(--green-text); }
.band-green.pullquote cite { color: var(--green-text); }

.band-purple { background: #D2D7EF; }
.band-purple .eyebrow { color: #4a4f94; }
/* Alma First: everything fits one desktop viewport. Tighter band padding and
   the portrait capped against the viewport height (it keeps its 4:5 shape). */
@media (min-width: 901px) {
  #alma-first { padding: clamp(36px, 5.5vh, 64px) 0; }
  #alma-first .wrap.feature { grid-template-columns: 1fr minmax(0, 400px); }
  #alma-first .feature-copy h2 { font-size: clamp(30px, 3.2vw, 46px); }
  #alma-first .media-col { width: min(400px, calc((100svh - 380px) * 0.8), 100%); justify-self: end; }
  #alma-first .feature-copy p { font-size: 17px; max-width: 66ch; }
}

/* intro */
.intro .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.intro-media { position: relative; width: 100%; max-width: 460px; margin-inline: auto; border-radius: 4px; overflow: hidden; }
.intro-media video { display: block; width: 100%; height: auto; border-radius: inherit; }
.intro h2 { font-size: clamp(40px, 6vw, 88px); margin-bottom: 30px; }
.intro p + p { margin-top: 20px; }
.intro p { max-width: 52ch; }

/* proof strip */
.proof { border-bottom: 1px solid var(--line); }
.proof .wrap { display: grid; grid-template-columns: repeat(4, 1fr); max-width: none; padding-inline: 0; }
.proof-item { padding: 40px clamp(22px, 2.2vw, 40px); display: flex; flex-direction: column; }
.proof-item:first-child { padding-left: var(--gutter); }
.proof-item:last-child { padding-right: var(--gutter); }
.proof-item + .proof-item { border-left: 1px solid var(--line); }
.proof-num { font-family: var(--serif); font-weight: 100; font-size: clamp(40px, 5vw, 62px); color: var(--slate); display: block; }
.proof-label { font-size: 14px; letter-spacing: 0.04em; color: var(--slate-soft); margin-top: 8px; }

/* what I do */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.card { background: var(--white); padding: 46px 38px 52px; transition: background .4s; }
.card:hover { background: #fafaf7; }
.card .card-no { font-size: 12px; letter-spacing: 0.18em; color: var(--teal-deep); }
.card h3 { font-size: 27px; margin: 22px 0 16px; line-height: 1.1; }
.card p { font-size: 16.5px; }
.card .card-link { display: inline-flex; gap: 8px; margin-top: 26px; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate); }

/* Short desktop windows (laptop screens): tighten the vertical rhythm so a
   section lands close to one screen. Tall monitors keep the airy spacing. */
@media (min-width: 901px) and (max-height: 1250px) {
  .section { padding: clamp(56px, 7vh, 96px) 0; }
  .section-head { margin-bottom: 40px; }
  .section-head h2 { font-size: clamp(36px, 4.4vw, 62px); }
  .section-head p { margin-top: 18px; }
  .card { padding: 34px 32px 38px; }
  .card h3 { margin: 16px 0 12px; }
  .card .card-link { margin-top: 18px; }
}

/* services SEO additions */
.svc-tagline { font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal-deep); margin-top: 16px; }
.svc-proof { margin-top: 18px; font-size: 15.5px; color: var(--slate-soft); }
.svc-proof a { text-decoration: underline; text-underline-offset: 3px; }
.faq-list { max-width: 760px; }
.faq-item { border-top: 1px solid var(--line); padding: 22px 0; }
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-item summary { cursor: pointer; font-family: var(--serif); font-size: clamp(20px, 2vw, 26px); line-height: 1.2; list-style: none; display: flex; justify-content: space-between; align-items: baseline; gap: 18px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 22px; color: var(--teal-deep); }
.faq-item[open] summary::after { content: "\2212"; }
.faq-item p { margin-top: 14px; font-size: 16.5px; color: var(--slate); max-width: 62ch; }

/* talks (teal band, video lightbox) */
.band-teal { background: #D9EAE4; }
.band-teal .eyebrow { color: var(--teal-deep); }
@media (min-width: 901px) {
  #talks { padding: clamp(36px, 5.5vh, 64px) 0; }
  #talks .wrap.feature { grid-template-columns: 1fr minmax(0, 560px); align-items: center; }
  #talks .feature-copy h2 { font-size: clamp(30px, 3.2vw, 46px); }
  #talks .feature-copy p { font-size: 17px; max-width: 58ch; }
}
.talk-thumb { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; padding: 0; background: #000; overflow: hidden; border-radius: 10px; cursor: pointer; }
.talk-inline { aspect-ratio: 16 / 9; width: 100%; background: #000; border-radius: 10px; overflow: hidden; }
.talk-inline iframe { width: 100%; height: 100%; display: block; border: 0; }
.talk-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s, opacity .4s; }
.talk-thumb:hover img { transform: scale(1.03); opacity: .88; }
.talk-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 50%; background: rgba(252,252,252,0.92); color: var(--slate); display: flex; align-items: center; justify-content: center; padding-left: 4px; transition: transform .3s; }
.talk-thumb:hover .talk-play { transform: translate(-50%, -50%) scale(1.08); }
.talk-thumb-title { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 18px 14px; text-align: left; font-size: 13.5px; line-height: 1.45; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,0.72)); }
.talk-more { margin-top: 20px; }
.talk-more summary { cursor: pointer; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal-deep); list-style: none; display: inline-flex; align-items: center; gap: 8px; }
.talk-more summary::-webkit-details-marker { display: none; }
.talk-more summary::after { content: "+"; font-size: 16px; }
.talk-more[open] summary::after { content: "\2212"; }
.talk-more p { margin-top: 14px; font-size: 15.5px; color: var(--slate); max-width: 58ch; }
.talk-credit { font-size: 14px; color: var(--slate-soft); }

/* split feature (building out loud) */
.feature .wrap, .wrap.feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 90px); align-items: center; }
.feature h2 { font-size: clamp(36px, 5vw, 70px); margin-bottom: 26px; }
.feature.flip .feature-copy { order: 2; }
.feature.flip .media-col { order: 1; }
@media (max-width: 880px) { .feature.flip .feature-copy, .feature.flip .media-col { order: 0; } }
.feature-copy .svc-num { display: block; font-family: var(--serif); font-weight: 300; font-size: 34px; color: var(--teal-deep); margin-bottom: 12px; }
.feature-body > .eyebrow { display: block; margin-bottom: 14px; }
.svc-cred { margin-top: 18px; font-size: 16.5px; color: var(--slate-soft); max-width: 52ch; }
/* signature talks: full-width boxed grid at the bottom of the Speaking block,
   same family as the Selected honors cells */
.talks-wrap, .feature .wrap.talks-wrap { display: block; margin-top: clamp(36px, 5vh, 60px); }
.talks-head { font-size: clamp(24px, 2.6vw, 32px); margin: 0 0 22px; }
.talks-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.talk { background: var(--white); padding: 28px 26px; position: relative; transition: background .4s; }
.talk::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(46, 126, 110, 0.32) 0.6px, transparent 1px);
  background-size: 3px 3px;
  opacity: 0;
  transition: opacity .35s;
  pointer-events: none;
}
.talk:hover { background: #fafaf7; }
.talk:hover::after { opacity: 1; }
.talk .t-title { display: block; font-family: var(--serif); font-weight: 300; font-size: 21px; line-height: 1.2; margin-bottom: 8px; }
.talk .t-sub { display: block; font-size: 15px; line-height: 1.55; color: var(--slate-soft); }
/* five talks: the last one spans the leftover columns so no empty cell shows */
.talk:last-child { grid-column: span 2; }
.talk:last-child .t-sub { max-width: 62ch; }
@media (max-width: 1000px) { .talks-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .talks-grid { grid-template-columns: 1fr; } .talk:last-child { grid-column: auto; } }
.feature-body p { max-width: 56ch; }
.feature-body strong { font-weight: 600; }
.feature-body p + p { margin-top: 18px; }
.tag-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.tag { font-size: 13px; letter-spacing: 0.06em; padding: 9px 17px; border: 1px solid var(--line); border-radius: 100px; color: var(--slate); }

/* digitized media block */
.digitized {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: 4px;
  overflow: hidden;
  background:
    repeating-conic-gradient(#8EC8A1 0% 25%, #7FBE92 0% 50%) 0 0 / 7px 7px,
    var(--green);
}
.digitized::after {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, rgba(96,94,96,0.10) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
}
.digitized .play {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(252,252,252,0.9);
  display: grid; place-items: center;
  z-index: 2;
}
.digitized .play::before {
  content: ''; width: 0; height: 0;
  border-left: 15px solid var(--slate);
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  margin-left: 4px;
}
.media-cap { font-size: 12px; letter-spacing: 0.04em; color: var(--slate-soft); margin-top: 14px; }

/* writing */
.insights-split { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(30px, 5vw, 70px); align-items: center; margin-bottom: clamp(38px, 5vw, 58px); }
.insights-split .media-ph { width: 100%; max-width: 400px; margin-left: auto; }
@media (max-width: 820px) { .insights-split { grid-template-columns: 1fr; gap: 30px; } .insights-split .media-ph { margin: 0; max-width: 360px; } }
.writing-list { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 10px; }
.writing-item { background: var(--white); padding: 40px; transition: background .4s; }
.writing-item:hover { background: #fafaf7; }
.writing-item .kicker { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal-deep); }
.writing-item h3 { font-size: 24px; margin: 16px 0 12px; }

/* ---------- Nazca line icons ----------
   Small figures above section eyebrows. They sit IN the text flow, so they are
   locked to their section on every screen size (no sticker drift). One SVG per
   figure in img/nazca/, recolored via CSS mask (gold on light, white on green). */
.nz { display: block; background-color: currentColor; -webkit-mask: var(--nzi) center / contain no-repeat; mask: var(--nzi) center / contain no-repeat; }
.nz-f02 { --nzi: url(../img/nazca/ico-02.svg); width: 100px; height: 134px; } /* standing bird */
.nz-f03 { --nzi: url(../img/nazca/ico-03.svg); width: 84px; height: 138px; } /* zigzag-neck bird */
.nz-f04 { --nzi: url(../img/nazca/ico-04.svg); width: 76px; height: 136px; } /* figure, raised arms */
.nz-f05 { --nzi: url(../img/nazca/ico-05.svg); width: 145px; height: 120px; } /* monkey, spiral tail */
.nz-f06 { --nzi: url(../img/nazca/ico-06.svg); width: 132px; height: 112px; } /* spider */
.nz-f07 { --nzi: url(../img/nazca/ico-07.svg); width: 94px; height: 132px; } /* perched bird */
.nz-f09 { --nzi: url(../img/nazca/ico-09.svg); width: 66px; height: 132px; } /* sprig */
.nz-f10 { --nzi: url(../img/nazca/ico-10.svg); width: 150px; height: 146px; } /* condor */
.nz-gold { color: var(--gold); margin-bottom: 18px; }
/* tonal dark figures for green bands: the band green itself, stepped darker
   and muted so it reads as shading rather than a new color */
.nz-green { color: #5E9066; margin-bottom: 18px; }
.pullquote .nz { margin: 0 auto 30px; }

/* giant ghosted figures behind green sections (anchored to the section, so
   they hold their spot at every screen size) */
.pullquote::before {
  content: '';
  position: absolute;
  left: -160px; bottom: -140px;
  width: 600px; height: 496px;
  background: #17251A;
  opacity: 0.12;
  pointer-events: none;
  -webkit-mask: url(../img/nazca/ico-05.svg) center / contain no-repeat;
  mask: url(../img/nazca/ico-05.svg) center / contain no-repeat;
}
@media (max-width: 700px) {
  .pullquote::before { width: 420px; height: 347px; left: -120px; bottom: -100px; }
}
#publications::before {
  content: '';
  position: absolute;
  right: -140px; top: 44%;
  width: 620px; height: 527px;
  transform: translateY(-50%);
  background: #17251A;
  opacity: 0.11;
  pointer-events: none;
  -webkit-mask: url(../img/nazca/ico-06.svg) center / contain no-repeat;
  mask: url(../img/nazca/ico-06.svg) center / contain no-repeat;
}
@media (max-width: 700px) {
  #publications::before { width: 430px; height: 366px; right: -130px; }
}

/* Insights newsletter section: fits one desktop viewport */
@media (min-width: 901px) {
  #substack { padding: clamp(40px, 6vh, 72px) 0 clamp(110px, 14vh, 170px); }
  #press { padding-bottom: clamp(110px, 14vh, 170px); }
  #substack .section-head { margin-bottom: 30px; }
  #substack .section-head h2 { font-size: clamp(34px, 3.4vw, 50px); }
  #substack .feed-item { padding: 24px 24px; min-height: 0; }
  #substack .feed-item h3 { font-size: 20px; }
  #substack .feed-item p { font-size: 14.5px; }
  #substack .feed-item .kicker { margin-bottom: 10px; }
  #substack .feed-item .feed-link { margin-top: 14px; }
}

/* cta band: the interlaced diamonds return as one small horizontal emblem
   centered above the eyebrow (locked in the text flow, scales with the type) */
.cta-band { text-align: center; position: relative; overflow: hidden; }
.cta-band .wrap { position: relative; z-index: 1; }
.cta-band .wrap::before {
  content: '';
  display: block;
  width: 54px;
  height: 39px;
  margin: 0 auto 18px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20560%20400'%20fill='none'%20stroke='%23D6A101'%20stroke-width='9'%3E%3Cpath%20d='M200,20L380,200L200,380L20,200Z'/%3E%3Cpath%20d='M200,85L315,200L200,315L85,200Z'/%3E%3Cpath%20d='M360,20L540,200L360,380L180,200Z'/%3E%3Cpath%20d='M360,85L475,200L360,315L245,200Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.cta-band h2 { font-size: clamp(40px, 6vw, 92px); margin-bottom: 16px; }
.cta-band p { margin: 0 auto 40px; }

.band-green { overflow: hidden; }
.band-green > .wrap { position: relative; z-index: 1; }


/* footer */
.footer { background: var(--white); border-top: 1px solid var(--line); padding: 80px 0 48px; }
.footer .wrap { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
/* desktop: Explore and Connect sit low, ending on the same bottom line as the
   brand column, with their headers aligned to each other */
@media (min-width: 761px) {
  .footer .wrap > div:nth-child(2), .footer .wrap > div:nth-child(3) { align-self: end; }
  .footer .wrap > div:nth-child(3) ul { min-height: 200px; }
}
.footer .brand { font-size: 30px; margin-bottom: 18px; }
.footer h4 { font-family: var(--sans); font-weight: 300; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--slate-soft); margin-bottom: 18px; }
.footer ul { list-style: none; display: grid; gap: 12px; }
.footer a:hover { color: var(--teal-deep); }
.footer-bottom { border-top: 1px solid var(--line); margin-top: 64px; padding-top: 28px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; font-size: 13px; color: var(--slate-soft); }
.disclaimer { max-width: 58ch; font-size: 13px; color: var(--slate-soft); margin-top: 14px; }

/* ---------- reveal animations ---------- */
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1); }
[data-reveal].in { opacity: 1; transform: none; }
[data-reveal][data-delay="1"] { transition-delay: .08s; }
[data-reveal][data-delay="2"] { transition-delay: .16s; }
[data-reveal][data-delay="3"] { transition-delay: .24s; }

.lattice path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 2.1s cubic-bezier(.4, 0, .2, 1) forwards;
}
.lattice path:nth-child(1) { animation-delay: .15s; }
.lattice path:nth-child(2) { animation-delay: .30s; }
.lattice path:nth-child(3) { animation-delay: .45s; }
.lattice path:nth-child(4) { animation-delay: .60s; }
.lattice path:nth-child(5) { animation-delay: .50s; }
.lattice path:nth-child(6) { animation-delay: .65s; }
.lattice path:nth-child(7) { animation-delay: .80s; }
@keyframes draw { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  [data-reveal] { opacity: 1; transform: none; }
  .lattice path { stroke-dashoffset: 0 !important; }
  html { scroll-behavior: auto; }
}

/* ---------- responsive ---------- */
@media (max-width: 880px) {
  .hero { min-height: auto; padding-bottom: clamp(40px, 6vh, 70px); }
  .hero .wrap { grid-template-columns: 1fr; gap: 36px; }
  .hero-copy { max-width: none; }
  .hero-figure { max-width: 340px; margin: 0 auto; order: -1; }
}

@media (max-width: 900px) {
  .nav-links { position: fixed; inset: var(--nav-h) 0 auto 0; background: rgba(252,252,252,0.97); backdrop-filter: blur(14px); flex-direction: column; align-items: flex-start; gap: 10px; padding: 30px var(--gutter) 38px; border-bottom: 1px solid var(--line); transform: translateY(calc(-100% - var(--nav-h) - 6px)); transition: transform .45s cubic-bezier(.2,.7,.2,1); }
  .nav-links.open { transform: translateY(0); }
  .nav-links a { font-size: 19px; padding: 12px 0; display: block; }
  .nav-links .nav-cta { margin-top: 18px; padding: 12px 22px !important; }
  .nav-toggle { display: block; }
  .intro .wrap, .feature .wrap, .wrap.feature { grid-template-columns: 1fr; }
  .intro-media, .feature .media-col { max-width: 460px; }
  .intro-media { max-width: 340px; }
  /* stacked features: photo goes landscape so text + photo fit closer to one
     screen (sacrifice the photo, not the type). Alma First stays portrait. */
  .feature .media-col { max-width: 560px; }
  .feature .media-col .media-ph.ratio-4x5 { aspect-ratio: 16 / 10; }
  #alma-first .media-col { max-width: 460px; }
  #alma-first .media-col .media-ph.ratio-4x5 { aspect-ratio: 4 / 5; }
  .proof .wrap { grid-template-columns: 1fr 1fr; }
  .proof-item { border-top: 1px solid var(--line); padding: 34px 26px; }
  .proof-item:nth-child(odd) { border-left: 0; padding-left: var(--gutter); }
  .proof-item:nth-child(even) { border-left: 1px solid var(--line); padding-right: var(--gutter); }
  .cards, .writing-list { grid-template-columns: 1fr; }
  .footer .wrap { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .proof-item { padding: 26px 18px !important; }
  .proof-item:nth-child(odd) { padding-left: var(--gutter) !important; }
  .proof-item:nth-child(even) { padding-right: var(--gutter) !important; }
  .proof-num { font-size: 38px; }
  .footer .wrap { grid-template-columns: 1fr; }
}

/* ---------- contact page ---------- */
.page-head { padding-top: calc(var(--nav-h) + clamp(60px, 10vh, 120px)); }
.contact-layout { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(40px, 6vw, 90px); align-items: stretch; }
.form-card { display: flex; flex-direction: column; justify-content: center; }
.contact-info h1 { font-size: clamp(46px, 6vw, 88px); margin: 18px 0 26px; }
.contact-info p { margin-bottom: 30px; max-width: 42ch; }
.contact-methods { list-style: none; display: grid; gap: 22px; margin-top: 8px; border-top: 1px solid var(--line); padding-top: 32px; }
.contact-methods li { display: grid; gap: 3px; }
.contact-methods .m-label { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--slate-soft); }
.contact-methods a, .contact-methods span.m-val { font-size: 17px; }
.contact-methods a:hover { color: var(--teal-deep); }
.social-row { display: flex; gap: 16px; align-items: center; margin-top: 6px; }
.social-ic { display: inline-flex; color: var(--slate); transition: color .3s, transform .3s; }
.social-ic svg { width: 22px; height: 22px; }
.social-ic:hover { color: var(--teal-deep); transform: translateY(-2px); }

.form-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: clamp(26px, 4vw, 46px); }
.field { margin-bottom: 22px; position: relative; }
.field label { display: block; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate); margin-bottom: 9px; }
.field .req { color: var(--teal-deep); }
.field input, .field select, .field textarea {
  width: 100%; font-family: var(--sans); font-weight: 300; font-size: 16px; color: var(--slate);
  background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px;
  transition: border-color .25s, box-shadow .25s; -webkit-appearance: none; appearance: none;
}
.field textarea { min-height: 150px; resize: vertical; }
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M3 5l4 4 4-4' fill='none' stroke='%23605E60' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; padding-right: 42px; cursor: pointer;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(128, 214, 197, 0.28);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-actions { display: flex; align-items: center; gap: 20px; margin-top: 6px; flex-wrap: wrap; }
.btn-submit { border: 0; cursor: pointer; }
.form-status { font-size: 14px; min-height: 1em; }
.form-status.ok { color: var(--green-deep); }
.form-status.err { color: #b4564a; }
.hp { position: absolute; left: -9999px; top: 0; height: 0; width: 0; overflow: hidden; }

@media (max-width: 860px) {
  .contact-layout { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
}

/* ---------- about page ---------- */
.about-head h1 { font-size: clamp(48px, 7vw, 104px); margin: 18px 0 30px; text-wrap: balance; }
.about-head .lede { font-family: var(--serif); font-weight: 300; font-size: clamp(20px, 2.4vw, 28px); line-height: 1.45; max-width: 30ch; color: var(--slate); }
.head-split .wrap { display: grid; grid-template-columns: 1.18fr 0.82fr; gap: clamp(36px, 5vw, 72px); align-items: center; }
.head-split h1 { font-size: clamp(42px, 5.4vw, 82px); }
.head-split .ih-media { width: 100%; max-width: 400px; margin-left: auto; }
@media (max-width: 880px) {
  .head-split .wrap { grid-template-columns: 1fr; gap: 32px; }
  .head-split .ih-media { max-width: 360px; margin: 6px 0 0; }
}

.editorial { display: grid; grid-template-columns: 200px 1fr; gap: clamp(30px, 5vw, 80px); align-items: start; }
.editorial .side-label { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--slate-soft); position: sticky; top: calc(var(--nav-h) + 30px); }
.editorial .body p { margin-bottom: 22px; max-width: 64ch; }
.editorial .body p.first { font-family: var(--serif); font-weight: 300; font-size: clamp(21px, 2.4vw, 30px); line-height: 1.45; color: var(--slate); margin-bottom: 30px; }

.pullquote { text-align: center; }
.pullquote blockquote { font-family: var(--serif); font-weight: 100; font-size: clamp(28px, 4.6vw, 58px); line-height: 1.16; color: var(--slate); max-width: 18ch; margin: 0 auto; }
.pullquote cite { display: block; margin-top: 28px; font-style: normal; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--slate-soft); }

.values-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.value { background: var(--white); padding: 40px 36px; transition: background .4s; }
.value:hover { background: #fafaf7; }
.value h3 { font-size: 25px; margin-bottom: 14px; }
.value p { font-size: 15.5px; }

.timeline { display: grid; }
.tl-item { display: grid; grid-template-columns: 170px 1fr; gap: 28px; padding: 28px 0; border-top: 1px solid var(--line); transition: padding-left .35s; }
.tl-item:last-child { border-bottom: 1px solid var(--line); }
.tl-item:hover { padding-left: 10px; }
.tl-year { font-family: var(--serif); font-weight: 300; font-size: 21px; color: var(--teal-deep); }
.tl-body h3 { font-size: 24px; font-weight: 500; margin-bottom: 7px; }
.tl-body p { font-size: 17px; color: var(--slate-soft); }
a.tl-item { color: inherit; }
a.tl-item .tl-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal-deep); opacity: 0; transition: opacity .35s; }
a.tl-item:hover .tl-link { opacity: 1; }
.band-green a.tl-item .tl-link { color: #2f5a31; }
.ilink { color: var(--teal-deep); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color .3s; }
.ilink:hover { color: var(--slate); }

.cert-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
#recognition .cert-grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { #recognition .cert-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { #recognition .cert-grid { grid-template-columns: 1fr; } }
.cert { background: var(--white); padding: 28px 26px; }
.cert .c-title { font-size: 16px; display: block; margin-bottom: 6px; }
.cert .c-sub { font-size: 13px; color: var(--slate-soft); }
/* About credentials: clean two-column list (scales to any count, no empty boxes) */
.cred-list { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(23, 37, 26, 0.22); }
.cred-item { padding: 16px 0; border-bottom: 1px solid rgba(23, 37, 26, 0.22); }
.cred-item:nth-child(odd) { padding-right: clamp(20px, 3vw, 44px); }
.cred-item:nth-child(even) { padding-left: clamp(20px, 3vw, 44px); }
.cred-item .c-title { display: block; font-size: 16px; line-height: 1.3; margin-bottom: 5px; color: var(--green-text); }
.cred-item .c-sub { display: block; font-size: 13px; line-height: 1.45; color: var(--green-text); opacity: 0.72; }
@media (max-width: 760px) { .cred-list { grid-template-columns: 1fr; } .cred-item:nth-child(odd), .cred-item:nth-child(even) { padding-left: 0; padding-right: 0; } }

@media (max-width: 860px) {
  .editorial { grid-template-columns: 1fr; }
  .editorial .side-label { position: static; }
  .values-grid { grid-template-columns: 1fr; }
  .cert-grid { grid-template-columns: 1fr 1fr; }
  .tl-item { grid-template-columns: 110px 1fr; gap: 18px; }
}
@media (max-width: 560px) {
  .cert-grid { grid-template-columns: 1fr; }
  .tl-item { grid-template-columns: 1fr; gap: 4px; }
}

/* ---------- media placeholders ---------- */
.media-ph {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center; padding: 24px; color: var(--slate-soft);
  border: 1px dashed rgba(96, 94, 96, 0.30); border-radius: 12px; background: #f5f4ef;
}
.media-ph.fill { position: absolute; inset: 0; border-radius: inherit; }
.media-ph .ph-ico { width: 34px; height: 34px; stroke: var(--slate-soft); fill: none; }
.media-ph .ph-label { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--slate); }
.media-ph .ph-sub { font-size: 13.5px; max-width: 34ch; line-height: 1.5; }
.media-ph.ratio-4x5 { aspect-ratio: 4 / 5; }
.media-ph.ratio-16x9 { aspect-ratio: 16 / 9; }
.media-ph.ratio-3x2 { aspect-ratio: 3 / 2; }
.media-ph.ratio-1x1 { aspect-ratio: 1 / 1; }
.media-ph.ratio-3x4 { aspect-ratio: 3 / 4; }
.media-ph.ph-video { background: #eaf1ee; }
.media-ph.ph-video .ph-label { color: var(--teal-deep); }
.media-ph.is-img { border: none; background: none; padding: 0; overflow: hidden; }
.media-ph.is-img img, .media-ph.is-img video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
/* "digitized" filter = fine halftone dot-screen overlaid on the media (matches her Wix look) */
.digitized::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  background-image: radial-gradient(rgba(10,15,13,0.55) 0.6px, transparent 1px);
  background-size: 3px 3px;
}
.media-ph .ph-play { position: relative; z-index: 1; width: 56px; height: 56px; border-radius: 50%; background: var(--white); border: 1px solid var(--line); display: grid; place-items: center; }
.media-ph .ph-play::before { content: ''; width: 0; height: 0; border-left: 14px solid var(--slate); border-top: 9px solid transparent; border-bottom: 9px solid transparent; margin-left: 4px; }
.media-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.media-strip.two { grid-template-columns: 1fr 1fr; }
.media-strip.five { grid-template-columns: repeat(5, 1fr); gap: 12px; }
@media (max-width: 760px) { .media-strip, .media-strip.two { grid-template-columns: 1fr; } .media-strip.five { grid-template-columns: 1fr 1fr; } }
/* Beyond medicine gallery: big centerpiece, two squares each side; click a side
   photo to swap it into the middle; plain zoom on hover, no captions */
.bm-gallery {
  display: grid;
  grid-template-columns: 1fr 2.06fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 12px;
}
.bm-gallery .media-ph { border-radius: 14px; }
.bm-gallery .bm-side { aspect-ratio: 1 / 1; cursor: pointer; }
.bm-gallery .bm-side:nth-child(1) { grid-column: 1; grid-row: 1; }
.bm-gallery .bm-l2 { grid-column: 1; grid-row: 2; }
.bm-gallery .bm-main { grid-column: 2; grid-row: 1 / 3; }
.bm-gallery .bm-r1 { grid-column: 3; grid-row: 1; }
.bm-gallery .bm-r2 { grid-column: 3; grid-row: 2; }
.bm-gallery .media-ph img { transition: transform .5s ease, opacity .2s ease; }
.bm-gallery .bm-side:hover img { transform: scale(1.12); }
.bm-gallery .bm-main:hover img { transform: scale(1.04); }
@media (max-width: 760px) {
  .bm-gallery { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .bm-gallery .bm-main { grid-column: 1 / 3; grid-row: 1; aspect-ratio: 4 / 3; }
  .bm-gallery .bm-side:nth-child(1) { grid-column: 1; grid-row: 2; }
  .bm-gallery .bm-l2 { grid-column: 2; grid-row: 2; }
  .bm-gallery .bm-r1 { grid-column: 1; grid-row: 3; }
  .bm-gallery .bm-r2 { grid-column: 2; grid-row: 3; }
}

/* About gallery: big 16:9 photo with clickable square previews on each side */
.about-gallery { display: grid; grid-template-columns: clamp(72px, 11vw, 150px) 1fr clamp(72px, 11vw, 150px); gap: clamp(10px, 1.6vw, 20px); align-items: center; }
.about-gallery .ag-main img { transition: opacity .2s ease; }
.about-gallery .ag-thumb { aspect-ratio: 1 / 1; border-radius: 18px; cursor: pointer; transition: transform .3s ease, box-shadow .3s ease; }
.about-gallery .ag-thumb:hover { transform: scale(1.04); box-shadow: 0 6px 22px rgba(42, 42, 42, 0.18); }

/* ---------- showcase (four-video band with overlay quote) ---------- */
.showcase { position: relative; }
.showcase-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
/* showcase videos: keep cells flush and square even with the digitized filter */
.showcase-cell.digitized { border-radius: 0; aspect-ratio: 4/5; }
.showcase-cell {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden;
  background: #eaf1ee; border-radius: 0;
}
.showcase-cell .ph-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 5;
  width: 58px; height: 58px; border-radius: 50%; background: var(--white); border: 1px solid var(--line); display: grid; place-items: center;
}
.showcase-cell .ph-play::before {
  content: ''; width: 0; height: 0; margin-left: 4px;
  border-left: 15px solid var(--slate); border-top: 10px solid transparent; border-bottom: 10px solid transparent;
}
.showcase-cell .cell-label {
  position: absolute; left: 16px; bottom: 14px; z-index: 5;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal-deep);
}
.showcase-scrim { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(rgba(40, 55, 38, 0.32), rgba(40, 55, 38, 0.58)); }
.showcase-overlay {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 6vw;
}
.showcase-overlay .eyebrow { color: rgba(255, 255, 255, 0.85); margin-bottom: 24px; }
.showcase-overlay blockquote {
  font-family: var(--serif); font-weight: 100; color: #fff; max-width: 20ch; margin: 0;
  font-size: clamp(28px, 4.4vw, 60px); line-height: 1.16;
}
@media (max-width: 900px) {
  .showcase-grid { grid-template-columns: 1fr 1fr; }
}

/* ---------- status badge ---------- */
.status-badge {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--teal-deep);
  background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(128, 214, 197, 0.55);
  border-radius: 100px; padding: 8px 16px; margin: 4px 0 22px;
}
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--teal-deep); animation: pulse 2s ease-out infinite; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(46, 126, 110, 0.45); }
  70% { box-shadow: 0 0 0 8px rgba(46, 126, 110, 0); }
  100% { box-shadow: 0 0 0 0 rgba(46, 126, 110, 0); }
}
@media (max-width: 600px) {
  .status-badge { font-size: 11px; letter-spacing: 0.02em; padding: 7px 13px; gap: 7px; }
  .status-dot { width: 8px; height: 8px; }
}

/* ---------- impact header floating video ---------- */
.impact-head .wrap { position: relative; }
.impact-head-text { max-width: 62%; }
.impact-head-media {
  position: absolute; right: 0; top: 50%;
  width: clamp(230px, 27vw, 380px);
  transform: translateY(-50%);
  filter: drop-shadow(0 24px 36px rgba(40, 40, 40, 0.13));
  animation: floaty 6.5s ease-in-out infinite;
}
@keyframes floaty {
  0%, 100% { transform: translateY(-50%); }
  50% { transform: translateY(calc(-50% - 14px)); }
}
@media (max-width: 900px) {
  .impact-head-text { max-width: none; }
  .impact-head-media { position: static; transform: none; width: 100%; max-width: 360px; margin-top: 36px; animation: none; filter: drop-shadow(0 18px 26px rgba(40, 40, 40, 0.12)); }
}

.contact-head { position: relative; overflow: hidden; }
.contact-head .wrap { position: relative; z-index: 1; }
/* large gold condor resting under the contact details, bottom-left */
.contact-head::after {
  content: '';
  position: absolute;
  left: clamp(20px, 6vw, 120px); bottom: 30px;
  width: 400px; height: 388px;
  background: var(--gold);
  opacity: 0.22;
  pointer-events: none;
  -webkit-mask: url(../img/nazca/ico-10.svg) center / contain no-repeat;
  mask: url(../img/nazca/ico-10.svg) center / contain no-repeat;
}
@media (max-width: 760px) {
  .contact-head::after { width: 300px; height: 291px; left: auto; right: -90px; bottom: -100px; opacity: 0.18; }
}

/* ---------- insights feed ---------- */
.feed-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.feed-item { background: var(--white); padding: 36px 32px; display: flex; flex-direction: column; min-height: 220px; transition: background .4s; color: inherit; }
.feed-item:hover { background: #fafaf7; }
.feed-item .kicker { font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal-deep); margin-bottom: 14px; }
.feed-item h3 { font-size: 23px; line-height: 1.16; margin-bottom: 12px; }
.feed-item p { font-size: 16px; color: var(--slate); flex: 1 1 auto; }
.feed-item .feed-link { margin-top: 22px; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--slate); display: inline-flex; gap: 8px; }
.feed-item .feed-link span { transition: transform .3s; }
.feed-item:hover .feed-link { color: var(--teal-deep); }
.feed-item:hover .feed-link span { transform: translateX(4px); }
.feed-loading { padding: 40px 0; font-size: 16px; color: var(--slate-soft); }

/* single fallback panel when the live feed is empty */
.feed-empty { border: 1px solid var(--line); background: #fafaf7; padding: clamp(34px, 5vw, 56px); display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.feed-empty .kicker { font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal-deep); }
.feed-empty h3 { font-size: clamp(24px, 3vw, 32px); max-width: 22ch; }
.feed-empty p { font-size: 17px; color: var(--slate); max-width: 56ch; }

/* ---------- instagram feed ---------- */
.ig-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-bottom: 26px; }
.ig-handle { display: inline-flex; align-items: center; gap: 11px; font-size: clamp(17px, 2.4vw, 21px); color: var(--slate); }
.ig-handle svg { width: 24px; height: 24px; flex: none; }
.ig-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.ig-tile { position: relative; aspect-ratio: 1/1; background: #f0efe9; border: 1px solid var(--line); border-radius: 4px; display: grid; place-items: center; color: var(--slate-soft); overflow: hidden; transition: background .4s ease, transform .4s ease; }
a.ig-tile:hover { background: #eaf1ee; transform: translateY(-3px); }
.ig-tile > svg { width: 24px; height: 24px; opacity: .42; }
.ig-tile .ig-kind { position: absolute; top: 8px; right: 9px; font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate-soft); }
@media (max-width: 900px) { .ig-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 460px) { .ig-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; } }

/* ---------- services list ---------- */
.svc-list { display: grid; }
.svc-item { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(24px, 4vw, 64px); padding: clamp(38px, 5vw, 66px) 0; border-top: 1px solid var(--line); }
.svc-item:last-child { border-bottom: 1px solid var(--line); }
.svc-head { display: flex; flex-direction: column; gap: 14px; }
.svc-head .card-no { font-family: var(--serif); font-weight: 300; font-size: 30px; color: var(--teal-deep); }
.svc-item h2 { font-size: clamp(28px, 3.2vw, 44px); line-height: 1.06; }
.svc-body p { font-size: 18px; color: var(--slate); max-width: 62ch; }
.svc-body p + p { margin-top: 16px; }
@media (max-width: 760px) { .svc-item { grid-template-columns: 1fr; gap: 14px; padding: 34px 0; } .svc-head { flex-direction: row; align-items: baseline; gap: 16px; } }

/* ---------- featured / seen-at strip ---------- */
.featured-strip { text-align: center; padding-top: clamp(30px, 4vw, 52px); padding-bottom: clamp(30px, 4vw, 52px); border-top: 1px solid var(--line); }
.featured-strip .eyebrow { display: block; margin-bottom: 26px; }
.logos { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(18px, 4vw, 54px); align-items: center; }
.logos span { font-family: var(--serif); font-weight: 300; font-size: clamp(20px, 2.6vw, 33px); color: var(--slate); }
.center-cta { text-align: center; padding-top: clamp(28px, 4vw, 44px); }

/* ---------- testimonial ---------- */
.testimonial { text-align: center; position: relative; overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding-top: clamp(44px, 5.5vw, 74px); padding-bottom: clamp(44px, 5.5vw, 74px); }
.testimonial .wrap { position: relative; z-index: 1; }
.testimonial blockquote { font-family: var(--serif); font-weight: 300; font-size: clamp(24px, 3vw, 40px); line-height: 1.3; color: var(--slate); max-width: 26ch; margin: 0 auto; }
.testimonial cite { display: block; margin-top: 28px; font-style: normal; font-size: 15px; letter-spacing: 0.03em; color: var(--slate-soft); max-width: 46ch; margin-inline: auto; }

/* ---------- section progress rail: timeline at the bottom (Work page) ---------- */
.scroll-rail {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: clamp(4px, 1.2vw, 16px);
  padding: 30px clamp(28px, 6vw, 72px) 9px;
  background: linear-gradient(to top, #FCFCFC 46%, rgba(252, 252, 252, 0.7) 72%, rgba(252, 252, 252, 0) 100%);
  pointer-events: none;
}
.scroll-rail::before {
  content: '';
  position: absolute;
  left: clamp(28px, 6vw, 72px);
  right: clamp(28px, 6vw, 72px);
  top: 33px;
  height: 1px;
  background: var(--line);
}
.scroll-rail .rail-fill {
  position: absolute;
  left: clamp(28px, 6vw, 72px);
  top: 32.5px;
  height: 1.5px;
  width: 0;
  background: var(--teal-deep);
  transition: width .35s ease;
}
.scroll-rail a {
  position: relative;
  pointer-events: auto;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  text-align: center;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 8px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate-soft);
  opacity: 0.5;
  transition: opacity .3s, color .3s;
}
.scroll-rail a::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--white);
  border: 1.5px solid var(--line);
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  transition: background .3s, border-color .3s, transform .3s;
}
.scroll-rail a:hover { opacity: 0.85; }
.scroll-rail a.active { opacity: 1; color: var(--teal-deep); }
.scroll-rail a.active::before { background: var(--teal-deep); border-color: var(--teal-deep); transform: scale(1.5); }
/* under 1080px the rail becomes a horizontal strip of sliding words:
   the current section reads green, the rest slate */
@media (max-width: 1080px) {
  .scroll-rail {
    justify-content: flex-start;
    align-items: center;
    gap: 26px;
    padding: 15px 18px calc(15px + env(safe-area-inset-bottom, 0px));
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    pointer-events: auto;
    background: rgba(252, 252, 252, 0.96);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--line);
  }
  .scroll-rail::-webkit-scrollbar { display: none; }
  .scroll-rail::before, .scroll-rail .rail-fill { display: none; }
  .scroll-rail a {
    flex: 0 0 auto;
    flex-direction: row;
    gap: 0;
    font-size: 12px;
    letter-spacing: 0.08em;
    color: var(--slate);
    opacity: 1;
    white-space: nowrap;
  }
  .scroll-rail a::before { display: none; }
  .scroll-rail a.active { color: var(--teal-deep); }
}
/* keep the footer clear of the fixed bottom bar */
body:has(.scroll-rail) .footer { padding-bottom: 70px; }
@media (max-width: 1080px) { body:has(.scroll-rail) .footer { padding-bottom: 86px; } }

/* ===== Cinematic full-bleed homepage hero ===== */
.hero-cine {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  background: url('../img/hero-4977w-v2.jpg') 30% center / cover no-repeat;
  display: flex; align-items: center; overflow: hidden;
}
.hero-cine .hero-scrim {
  position: absolute; inset: 0;
  /* eased multi-stop ramps so the fade blends without a visible edge */
  background:
    linear-gradient(180deg,
      rgba(10,16,12,0.55) 0%, rgba(10,16,12,0.38) 10%, rgba(10,16,12,0.24) 20%,
      rgba(10,16,12,0.18) 30%, rgba(10,16,12,0.21) 46%, rgba(10,16,12,0.26) 60%,
      rgba(10,16,12,0.36) 76%, rgba(10,16,12,0.48) 89%, rgba(10,16,12,0.58) 100%),
    linear-gradient(96deg,
      rgba(10,16,12,0) 18%, rgba(10,16,12,0.04) 30%, rgba(10,16,12,0.12) 40%,
      rgba(10,16,12,0.24) 49%, rgba(10,16,12,0.38) 58%, rgba(10,16,12,0.52) 67%,
      rgba(10,16,12,0.63) 76%, rgba(10,16,12,0.70) 85%, rgba(10,16,12,0.72) 100%);
}
.hero-cine .wrap { position: relative; z-index: 2; display: flex; justify-content: flex-end; }
.hero-cine .hero-copy { width: min(52%, 640px); }
.hero-cine h1 {
  font-size: clamp(38px, 4.6vw, 76px); line-height: 1.02; letter-spacing: -0.01em;
  margin: 0 0 24px; color: #fff; text-shadow: 0 2px 24px rgba(8,14,10,0.6);
}
.hero-cine h1 .line { display: block; overflow: hidden; }
.hero-cine .hero-sub { font-size: 11.5px; letter-spacing: 0.13em; text-transform: uppercase; color: rgba(255,255,255,0.85); margin-top: 18px; line-height: 1.8; white-space: nowrap; }
@media (max-width: 900px) { .hero-cine .hero-sub { white-space: normal; } }
.hero-cine .hero-lead {
  font-family: var(--sans); font-weight: 400;
  font-size: clamp(18px, 1.7vw, 23px); line-height: 1.55;
  max-width: 42ch; margin-bottom: 34px; color: #fff; text-shadow: 0 1px 14px rgba(8,14,10,0.6);
}
.hero-cine .hero-lead .accent-teal { color: var(--teal); }
.hero-cine .btn-line { border-color: rgba(255,255,255,0.8); color: #fff; }
.hero-cine .btn-line:hover { background: #fff; color: var(--slate); }
@media (max-width: 900px) {
  /* one exact viewport on phones: svh ignores the collapsing URL bar */
  .hero-cine { height: 100vh; height: 100svh; min-height: 0; background-image: url('../img/hero-4977-m2.jpg'); background-position: center top; align-items: flex-end; }
  .hero-cine .hero-scrim { background: linear-gradient(180deg, rgba(10,16,12,0.5) 0%, rgba(10,16,12,0.12) 30%, rgba(10,16,12,0.55) 58%, rgba(10,16,12,0.9) 100%); }
  .hero-cine .wrap { justify-content: center; }
  .hero-cine .hero-copy { width: 100%; padding-bottom: 4vh; }
}
/* short/landscape phones: let the hero grow instead of clipping the copy */
@media (max-width: 900px) and (max-height: 560px) {
  .hero-cine { height: auto; min-height: 100svh; padding-top: calc(var(--nav-h) + 24px); }
}

/* ===== Services collage (5 cards before the CTA) ===== */
.svc-collage { padding-top: clamp(56px, 8vh, 110px); }
.collage-grid { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: clamp(150px, 21vw, 250px); gap: 10px; }
.collage-grid .media-ph { border-radius: 10px; }
.collage-grid .c-video { grid-column: 3 / 5; grid-row: 1 / 3; }
.collage-grid .c-a { grid-column: 1 / 3; grid-row: 1; }
.collage-grid .c-b { grid-column: 5 / 7; grid-row: 1; }
.collage-grid .c-c { grid-column: 1 / 3; grid-row: 2; }
.collage-grid .c-d { grid-column: 5 / 7; grid-row: 2; }
@media (max-width: 640px) {
  .collage-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: clamp(130px, 26vw, 190px); gap: 8px; }
  .collage-grid .c-a { grid-column: 1; grid-row: 1; }
  .collage-grid .c-b { grid-column: 2; grid-row: 1; }
  .collage-grid .c-video { grid-column: 1 / 3; grid-row: 2 / 4; }
  .collage-grid .c-c { grid-column: 1; grid-row: 4; }
  .collage-grid .c-d { grid-column: 2; grid-row: 4; }
}
@media (max-width: 560px) {
  .hero-cine .hero-actions { flex-direction: column; align-items: stretch; width: 100%; }
  .hero-cine .hero-actions .btn { width: 100%; justify-content: center; }
}

/* nav: transparent white over the hero, fades to the cream bar past it */
.brand, .nav-links a, .nav-cta, .nav-toggle { transition: color .4s ease, border-color .4s ease; }
.nav.over-hero { background: transparent; backdrop-filter: none; border-bottom-color: transparent; box-shadow: none; }
.nav.over-hero .brand,
.nav.over-hero .nav-links a,
.nav.over-hero .nav-cta { color: #fff; }
.nav.over-hero .nav-cta { border-color: rgba(255,255,255,0.75); }
.nav.over-hero .nav-check { color: #fff; }
.nav.over-hero .nav-links a::after { background: #fff; }
.nav.over-hero .nav-toggle { color: #fff; }
/* the mobile dropdown is a cream panel: keep its links dark even over the hero */
.nav.over-hero .nav-links.open a,
.nav.over-hero .nav-links.open .nav-cta { color: var(--slate); }
.nav.over-hero .nav-links.open .nav-cta { border-color: var(--slate); }

/* clinic video relocated into the first showcase cell */
.showcase-cell.is-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }

/* Nazca constellation decorations (js/decor.json): desktop-only, positions are
   calibrated to desktop layout and would drift onto text on small screens */
@media (max-width: 900px) { #decorLayer { display: none; } }
/* contained boxes sit ABOVE the decor layer so figures never show through them */
.card, .feed-item, .feed-empty, .value, .cert, .form-card,
.media-ph.is-img, .showcase-cell, .btn { position: relative; z-index: 3; }

/* hover: the green halftone dot-screen (same geometry as the video filter) */
.writing-item, .card, .feed-item, .value { position: relative; overflow: hidden; }
.writing-item::after, .card::after, .feed-item::after, .value::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(46, 126, 110, 0.32) 0.6px, transparent 1px);
  background-size: 3px 3px;
  opacity: 0;
  transition: opacity .35s;
}
.writing-item:hover::after, .card:hover::after, .feed-item:hover::after, .value:hover::after { opacity: 1; }

/* touch devices: no lingering hover effects. The dotted tap feedback stays on
   boxes that are real links (a.writing-item, a.feed-item); plain info boxes
   (.card, .value, div.feed-item) get nothing. */
@media (hover: none) {
  .btn:hover, .social-ic:hover, a.ig-tile:hover { transform: none; }
  .btn:hover .arrow, .feed-item:hover .feed-link span { transform: none; }
  .tl-item:hover { padding-left: 0; }
  /* no mouse, no hover: the publication links stay visible */
  a.tl-item .tl-link { opacity: 1; }
  .bm-gallery .bm-side:hover img, .bm-gallery .bm-main:hover img { transform: none; }
  .about-gallery .ag-thumb:hover { transform: none; box-shadow: none; }
  .card:hover, .value:hover, div.feed-item:hover, .talk:hover { background: var(--white); }
  .card:hover::after, .value:hover::after, div.feed-item:hover::after, .talk:hover::after { opacity: 0; }
}

/* llama mark: single SVG recolored via CSS mask (gold on light, white over the hero) */
.llama-ico { display: inline-block; background-color: currentColor; -webkit-mask: url(../favicon.svg) center / contain no-repeat; mask: url(../favicon.svg) center / contain no-repeat; }
.nav .brand { display: inline-flex; align-items: center; gap: 9px; }
.brand-llama { width: 22px; height: 26px; color: var(--gold); transition: color .4s ease; flex: none; }
.nav.over-hero .brand-llama { color: #fff; }
.footer .brand { display: flex; flex-direction: column; align-items: flex-start; }
.llama-foot { width: 34px; height: 40px; color: var(--gold); margin-bottom: 12px; }