/* =============================================================
   NATIVOS / NOSARA — vintage editorial surf magazine
   ============================================================= */

:root {
  /* Paper palette */
  --paper:        #f1e6d1;
  --paper-warm:   #ead8b8;
  --paper-deep:   #ddc59a;

  /* Ink */
  --ink:          #1c1916;
  --ink-soft:     #3a322a;
  --ink-mute:     #6a5e51;

  /* Sea & accent */
  --ocean:        #0f2a36;
  --ocean-deep:   #081a23;
  --rust:         #b8633e;
  --rust-deep:    #8a4527;
  --sun:          #d4a35e;
  --sun-soft:     #e3bd83;

  /* Type */
  --wordmark:     "Boldonse", "Cooper Black", Impact, sans-serif; /* used ONLY for NATIVOS logo */
  --display:      "Inter Tight", "Inter", system-ui, -apple-system, sans-serif; /* headlines */
  --sans:         "Inter", system-ui, -apple-system, sans-serif; /* body */
  --hand:         "Caveat", cursive; /* handwritten accents */
  --serif:        var(--display); /* legacy alias */

  /* Layout */
  --max:          1320px;
  --gutter:       clamp(1.25rem, 4vw, 3rem);

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

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
  background: var(--paper);
}

body {
  font-family: var(--sans);
  font-weight: 400;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { display: block; max-width: 100%; height: auto; }

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

::selection { background: var(--rust); color: var(--paper); }

/* =============================================================
   FILM GRAIN OVERLAY
   ============================================================= */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: multiply;
  opacity: .18;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.1  0 0 0 0 0.08  0 0 0 0 0.06  0 0 0 0.85 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
  animation: grainShift 1.6s steps(6) infinite;
}
@keyframes grainShift {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-4%, 3%); }
  40%  { transform: translate(2%, -3%); }
  60%  { transform: translate(-2%, 2%); }
  80%  { transform: translate(3%, -2%); }
  100% { transform: translate(0, 0); }
}

/* =============================================================
   FILM-LEADER LOADER
   ============================================================= */
.loader {
  position: fixed;
  inset: 0;
  background: var(--ink);
  color: var(--paper);
  display: grid;
  place-items: center;
  z-index: 10000;
  transition: opacity .8s var(--ease), visibility .8s;
}
.loader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }

.loader-frame {
  position: relative;
  width: min(70vw, 520px);
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  border: 1px solid rgba(241, 230, 209, .25);
}
.loader-corners span {
  position: absolute;
  width: 22px; height: 22px;
  border: 1px solid var(--paper);
}
.loader-corners span:nth-child(1) { top: -1px; left: -1px;  border-right: 0; border-bottom: 0; }
.loader-corners span:nth-child(2) { top: -1px; right: -1px; border-left:  0; border-bottom: 0; }
.loader-corners span:nth-child(3) { bottom: -1px; left: -1px;  border-right: 0; border-top: 0; }
.loader-corners span:nth-child(4) { bottom: -1px; right: -1px; border-left:  0; border-top: 0; }

.loader-meta {
  position: absolute;
  font-size: 11px;
  letter-spacing: .25em;
  font-weight: 500;
  text-transform: uppercase;
  opacity: .7;
}
.loader-meta-tl { top: 18px; left: 18px; }
.loader-meta-tr { top: 18px; right: 18px; }
.loader-meta-bl { bottom: 18px; left: 18px; }
.loader-meta-br { bottom: 18px; right: 18px; }

.loader-count {
  font-family: var(--wordmark);
  font-weight: 400;
  font-size: clamp(7rem, 15vw, 12rem);
  line-height: 1;
  letter-spacing: -.04em;
}

/* =============================================================
   NAV
   ============================================================= */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 2rem;
  padding: 1rem var(--gutter);
  z-index: 100;
  background: linear-gradient(180deg, rgba(241, 230, 209, .85), rgba(241, 230, 209, 0));
  backdrop-filter: blur(6px) saturate(140%);
  -webkit-backdrop-filter: blur(6px) saturate(140%);
  transition: background .4s var(--ease), padding .4s var(--ease);
}
.nav.is-scrolled {
  background: rgba(241, 230, 209, .94);
  padding-top: .65rem;
  padding-bottom: .65rem;
  border-bottom: 1px solid rgba(28, 25, 22, .08);
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: .85rem;
  color: var(--ink);
  white-space: nowrap;
}
.brand-wordmark {
  font-family: var(--wordmark);
  font-weight: 400;
  font-size: 1.35rem;
  line-height: 1;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.brand-divider {
  display: inline-block;
  width: 22px;
  height: 1px;
  background: var(--ink-mute);
  opacity: .5;
  flex-shrink: 0;
}
.brand-loc {
  font-family: var(--sans);
  font-weight: 500;
  font-size: .68rem;
  letter-spacing: .08em;
  color: var(--ink-mute);
  text-transform: uppercase;
  white-space: nowrap;
}

.nav-links {
  display: flex;
  justify-content: center;
  gap: 1.8rem;
}
.nav-links a {
  position: relative;
  font-size: .82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: .4rem 0;
  transition: color .3s var(--ease);
}
.nav-links a::before {
  content: attr(data-num);
  font-family: var(--serif);
  font-style: italic;
  font-size: .6rem;
  letter-spacing: 0;
  margin-right: .4rem;
  color: var(--rust);
  text-transform: none;
  vertical-align: super;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity .3s, transform .3s;
}
.nav-links a:hover::before { opacity: 1; transform: translateY(0); }
.nav-links a:hover { color: var(--ink); }

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .6rem 1rem;
  background: var(--ink);
  color: var(--paper);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  border-radius: 999px;
  transition: background .3s, transform .3s, color .3s;
  white-space: nowrap;
  flex-shrink: 0;
}
.nav-cta em { font-style: normal; transition: transform .3s var(--ease); }
.nav-cta:hover { background: var(--rust); }
.nav-cta:hover em { transform: translateX(4px); }

@media (max-width: 820px) {
  .nav { grid-template-columns: auto 1fr auto; gap: .8rem; padding: .85rem var(--gutter); }
  .nav-links { display: none; }
  .nav-cta { padding: .55rem .9rem; font-size: .7rem; letter-spacing: .15em; }
  .brand-wordmark { font-size: 1.2rem; }
  .brand-divider { width: 16px; }
  .brand-loc { font-size: .62rem; letter-spacing: .12em; }
}
@media (max-width: 520px) {
  .nav-cta span { display: none; }
  .nav-cta::before { content: "WA"; }
  .brand-divider, .brand-loc { display: none; }
}

/* =============================================================
   HERO
   ============================================================= */
.hero {
  position: relative;
  min-height: 100vh;
  display: grid;
  overflow: hidden;
  background: var(--ink);
}

.hero-image {
  position: absolute;
  inset: 0;
  will-change: transform;
}
.hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.78) contrast(1.02) sepia(.12) brightness(.78);
  transform: scale(1.06);
  transition: transform 8s var(--ease);
}
.hero.is-ready .hero-image img { transform: scale(1.0); }

.hero-tint {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .35) 100%),
    linear-gradient(180deg, rgba(8, 26, 35, .35) 0%, rgba(8, 26, 35, .15) 50%, rgba(8, 26, 35, .55) 100%);
}

.hero-frame {
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: 100vh;
  padding: clamp(5.5rem, 10vh, 8rem) var(--gutter) clamp(2.2rem, 5vh, 4rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: var(--paper);
}

.hero-meta {
  font-size: .74rem;
  letter-spacing: .12em;
  font-weight: 500;
  opacity: .92;
  display: flex; align-items: center; gap: .6rem;
  z-index: 3;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .65);
  font-family: var(--sans);
}
.hero-meta .dot { opacity: .55; }

.hero-meta-tl, .hero-meta-tr {
  position: absolute;
  top: clamp(5.5rem, 10vh, 7rem);
}
.hero-meta-tl { left: var(--gutter); }
.hero-meta-tr { right: var(--gutter); }
.hero-tag { font-family: var(--sans); }

.hero-bottom {
  margin-top: auto;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: clamp(1rem, 3vw, 3rem);
  padding-bottom: 0;
}
.hero-bottom-main { display: flex; flex-direction: column; gap: .9rem; }
.hero-subtitle {
  font-family: var(--sans);
  font-size: clamp(.95rem, 1.3vw, 1.15rem);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .005em;
  color: rgba(241, 230, 209, .92);
  max-width: 30ch;
  margin: 0;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .55);
}

.hero-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(3rem, 8.5vw, 8.5rem);
  line-height: 1.0;
  letter-spacing: -.035em;
  margin: 0;
  color: var(--paper);
}
.hero-line {
  display: block;
  overflow: hidden;
}
.hero-word {
  display: inline-block;
  transform: translateY(110%);
  animation: heroReveal 1.2s var(--ease) forwards;
  animation-delay: .3s;
}
.hero-line:nth-child(2) .hero-word {
  animation-delay: .55s;
  color: var(--sun-soft);
}
@keyframes heroReveal {
  to { transform: translateY(0); }
}

.hero-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 1rem;
  padding-bottom: .5rem;
}

.hero-handwritten {
  display: block;
  font-family: var(--hand);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.8vw, 2.4rem);
  color: var(--sun-soft);
  opacity: 0;
  transform: translateY(8px) rotate(-3deg);
  animation: handReveal 1s var(--ease) forwards;
  animation-delay: 1.4s;
  letter-spacing: -.01em;
  text-transform: none;
}
@keyframes handReveal { to { opacity: 1; transform: translateY(0) rotate(-3deg); } }

.hero-scroll {
  font-size: .72rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  font-weight: 500;
  opacity: .8;
}
.hero-scroll em {
  display: inline-block;
  font-style: normal;
  margin-left: .3rem;
  animation: scrollBob 2.4s var(--ease) infinite;
}
@keyframes scrollBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}

@media (max-width: 820px) {
  .hero-meta-tr { display: none; }
  .hero-bottom { grid-template-columns: 1fr; align-items: start; }
  .hero-aside { align-items: flex-start; padding-top: 1rem; }
}
@media (max-width: 520px) {
  .hero-meta { font-size: .62rem; }
}

/* Hero gradient at bottom for headline contrast */
.hero-tint {
  background:
    linear-gradient(180deg, rgba(8, 26, 35, .35) 0%, rgba(8, 26, 35, .05) 35%, rgba(8, 26, 35, .15) 60%, rgba(8, 26, 35, .75) 100%);
}

/* =============================================================
   MARQUEE
   ============================================================= */
.marquee {
  background: var(--ink);
  color: var(--paper);
  padding: 1.4rem 0;
  border-top: 1px solid rgba(241, 230, 209, .1);
  border-bottom: 1px solid rgba(241, 230, 209, .1);
  overflow: hidden;
}
.marquee-track {
  display: inline-flex;
  gap: 2.4rem;
  white-space: nowrap;
  font-family: var(--display);
  font-size: clamp(1.2rem, 2.2vw, 1.7rem);
  font-weight: 600;
  letter-spacing: -.015em;
  animation: marquee 42s linear infinite;
  padding-right: 2.4rem;
}
.marquee-track > span { display: inline-block; }
.m-dot { color: var(--rust); font-style: normal; font-size: .8em; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* =============================================================
   SECTION ATOMS
   ============================================================= */
.section-label {
  display: inline-block;
  font-size: .7rem;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--rust);
  font-weight: 500;
  margin-bottom: 1.4rem;
}

.section-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.2rem, 4.8vw, 4.2rem);
  line-height: 1.05;
  letter-spacing: -.03em;
  margin-bottom: 1.6rem;
  color: var(--ink);
}
.section-title em {
  font-style: normal;
  color: var(--rust);
  font-weight: 700;
}
.section-title.centered { text-align: center; }

.lead {
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  line-height: 1.45;
  color: var(--ink);
  margin-bottom: 1.4rem;
  letter-spacing: -.005em;
}

p { font-size: 1rem; line-height: 1.65; color: var(--ink-soft); margin-bottom: 1rem; max-width: 56ch; }

.bullets {
  list-style: none;
  margin-top: 1.6rem;
  padding: 1.4rem 0;
  border-top: 1px solid rgba(28, 25, 22, .15);
  border-bottom: 1px solid rgba(28, 25, 22, .15);
}
.bullets li {
  padding: .55rem 0;
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  gap: .6rem;
  align-items: baseline;
  font-size: .98rem;
  color: var(--ink);
}
.bullets li span {
  font-family: var(--display);
  color: var(--rust);
  font-size: .85rem;
  letter-spacing: .02em;
}

/* Reveal animation */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}
[data-reveal].is-in {
  opacity: 1;
  transform: translateY(0);
}

/* =============================================================
   ABOUT
   ============================================================= */
.about {
  padding: clamp(5rem, 10vw, 8rem) var(--gutter);
  max-width: var(--max);
  margin: 0 auto;
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  margin-top: 2rem;
}

.about-photo { position: relative; }
.about-photo-card {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  background: var(--ink);
  box-shadow:
    0 1px 1px rgba(0, 0, 0, .04),
    0 30px 60px -30px rgba(28, 25, 22, .45),
    0 12px 30px -12px rgba(28, 25, 22, .25);
  transition: transform .8s var(--ease), box-shadow .8s var(--ease);
}
.about-photo-card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 1px 1px rgba(0, 0, 0, .04),
    0 36px 70px -28px rgba(28, 25, 22, .5),
    0 16px 36px -14px rgba(28, 25, 22, .3);
}
.about-photo-card img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: contrast(1.02) saturate(.95);
  transition: transform 1.4s var(--ease);
}
.about-photo-card:hover img { transform: scale(1.03); }

.about-photo-overlay {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  padding: 14px 18px;
  background: rgba(28, 25, 22, .55);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--paper);
}
.about-photo-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -.01em;
  line-height: 1.1;
}
.about-photo-role {
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(241, 230, 209, .7);
  font-weight: 500;
}

.about-photo-badge {
  position: absolute;
  top: 18px;
  right: 18px;
  padding: 6px 12px;
  background: rgba(241, 230, 209, .92);
  color: var(--ink);
  border-radius: 999px;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

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

/* =============================================================
   MANIFESTO
   ============================================================= */
.manifesto {
  position: relative;
  min-height: 70vh;
  display: grid;
  place-items: center;
  padding: clamp(6rem, 14vw, 12rem) var(--gutter);
  color: var(--paper);
  overflow: hidden;
}
.manifesto-bg {
  position: absolute; inset: 0; z-index: 0;
  will-change: transform;
}
.manifesto-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(.55) contrast(1.05) brightness(.55) sepia(.18);
  transform: scale(1.1);
}
.manifesto-tint {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8, 26, 35, .55), rgba(8, 26, 35, .85));
}
.manifesto-content {
  position: relative; z-index: 2;
  max-width: 1000px;
  text-align: center;
}
.manifesto-mark {
  display: block;
  font-family: var(--wordmark);
  font-size: clamp(5rem, 9vw, 9rem);
  line-height: .6;
  color: var(--sun);
  margin-bottom: 2rem;
}
.manifesto-quote {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.5rem, 3.2vw, 2.6rem);
  line-height: 1.25;
  letter-spacing: -.02em;
}
.manifesto-quote em {
  font-family: var(--hand);
  font-weight: 700;
  font-style: italic;
  color: var(--sun-soft);
  font-size: 1.25em;
  margin: 0 .05em;
  letter-spacing: 0;
}
.manifesto-attr {
  margin-top: 2.4rem;
  font-size: .72rem;
  letter-spacing: .35em;
  text-transform: uppercase;
  opacity: .7;
}

/* =============================================================
   PROGRAMS
   ============================================================= */
.programs {
  padding: clamp(5rem, 10vw, 8rem) var(--gutter);
  max-width: var(--max);
  margin: 0 auto;
}

.programs-head {
  text-align: center;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}
.programs-intro {
  margin: 1.4rem auto 0;
  max-width: 56ch;
  font-family: var(--sans);
  font-size: 1.1rem;
  color: var(--ink-soft);
  line-height: 1.55;
}

.program {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: clamp(1.5rem, 3vw, 3rem);
  padding: clamp(2rem, 4vw, 3rem) 0;
  border-top: 1px solid rgba(28, 25, 22, .2);
  position: relative;
}
.program:last-child { border-bottom: 1px solid rgba(28, 25, 22, .2); }

.program-side {
  position: sticky;
  top: 90px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding-top: .25rem;
}
.program-side-dark { color: var(--rust-deep); }

.program-edition {
  font-size: .66rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-mute);
  margin-bottom: .35rem;
}
.program-num {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(4.5rem, 8vw, 7rem);
  line-height: .9;
  color: var(--ink);
  letter-spacing: -.05em;
}
.program-feature .program-num { color: var(--rust); }

.program-unit {
  margin-top: .15rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--ink);
}
.program-feature .program-unit { color: var(--rust); }

/* Legacy alias */
.program-len {
  margin-top: .4rem;
  font-size: .72rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.program-body { padding-top: 1rem; }

.program-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
}
.program-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  line-height: 1.1;
  letter-spacing: -.02em;
}
.program-price {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.2rem, 1.7vw, 1.55rem);
  color: var(--rust);
  letter-spacing: -.01em;
}
.program-price em { font-style: normal; font-size: .72em; color: var(--ink-mute); font-family: var(--sans); letter-spacing: .12em; font-weight: 500; }

.program-tag {
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.45;
  color: var(--ink);
  margin-bottom: 2rem;
  max-width: 70ch;
}
.program-tag em { font-style: normal; color: var(--rust); font-weight: 500; }

.program-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  padding: 1.6rem 0;
  border-top: 1px solid rgba(28, 25, 22, .12);
  border-bottom: 1px solid rgba(28, 25, 22, .12);
}
.program-cols h4 {
  font-size: .7rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--rust);
  margin-bottom: .8rem;
  font-weight: 500;
}
.program-cols .h4-spaced { margin-top: 1.5rem; }
.program-cols ul {
  list-style: none;
}
.program-cols li {
  padding: .35rem 0;
  font-size: .95rem;
  line-height: 1.45;
  color: var(--ink-soft);
  position: relative;
  padding-left: 1rem;
}
.program-cols li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--rust);
  opacity: .6;
}
.program-cols li strong {
  color: var(--ink);
  font-weight: 700;
  font-family: var(--display);
}

.program-note {
  margin-top: 1.4rem;
  font-family: var(--sans);
  font-size: .95rem;
  color: var(--ink-mute);
}

.program-cta {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  margin-top: 1.8rem;
  padding: .95rem 1.6rem;
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 500;
  background: var(--ink);
  color: var(--paper);
  border-radius: 999px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
  cursor: pointer;
}
.program-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(95deg, var(--rust) 0%, #c87547 100%);
  border-radius: 999px;
  transform: translateX(-101%);
  transition: transform .55s var(--ease);
  z-index: -1;
}
.program-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  box-shadow: 0 0 0 0 rgba(184, 99, 62, 0);
  transition: box-shadow .35s var(--ease);
  z-index: -2;
  pointer-events: none;
}
.program-cta em {
  font-style: normal;
  display: inline-block;
  transition: transform .4s var(--ease);
}
.program-cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px -12px rgba(184, 99, 62, .55), 0 4px 10px -4px rgba(28, 25, 22, .25);
}
.program-cta:hover::before { transform: translateX(0); }
.program-cta:hover em { transform: translateX(8px) scale(1.1); }
.program-cta:active { transform: translateY(-1px); transition-duration: .1s; }

.program-cta-pulse {
  position: relative;
  width: 8px;
  height: 8px;
  margin-right: .1rem;
}
.program-cta-pulse::before,
.program-cta-pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #25d366;
}
.program-cta-pulse::after {
  animation: ctaPulse 2s var(--ease) infinite;
  opacity: .55;
}
@keyframes ctaPulse {
  0%   { transform: scale(1);   opacity: .55; }
  70%  { transform: scale(2.4); opacity: 0; }
  100% { transform: scale(2.4); opacity: 0; }
}

@media (max-width: 820px) {
  .program { grid-template-columns: 1fr; }
  .program-side { position: static; flex-direction: row; align-items: baseline; gap: 1rem; }
  .program-num { font-size: 4rem; }
  .program-cols { grid-template-columns: 1fr; gap: 1.4rem; }
}

/* =============================================================
   APPROACH
   ============================================================= */
.approach {
  padding: clamp(5rem, 10vw, 8rem) var(--gutter);
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  overflow-wrap: anywhere;
}
.approach-text { min-width: 0; }
.approach-text .section-title {
  font-size: clamp(2rem, 4.4vw, 3.6rem);
  word-wrap: break-word;
}
.approach-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.approach-img {
  position: relative;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: var(--ink);
}
.approach-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(.7) contrast(1.06) sepia(.1);
  transform: scale(1.04);
  transition: transform 1.2s var(--ease), filter 1.2s var(--ease);
}
.approach-img:hover img { transform: scale(1.08); filter: saturate(1) contrast(1.08); }
.approach-img-2 { transform: translateY(2rem); }
.approach-img-3 { transform: translateY(-1rem); }
.approach-num {
  position: absolute;
  top: 12px; left: 12px;
  font-family: var(--display);
  color: var(--paper);
  font-size: 1.5rem;
  letter-spacing: -.02em;
  font-weight: 400;
}
.approach-cap {
  position: absolute;
  bottom: 12px; left: 12px;
  font-size: .65rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--paper);
  font-weight: 500;
  background: rgba(15, 42, 54, .55);
  padding: .35rem .6rem;
  backdrop-filter: blur(4px);
}

@media (max-width: 820px) {
  .approach { grid-template-columns: 1fr; padding-left: var(--gutter); padding-right: var(--gutter); }
  .approach-img-2 { transform: none; }
  .approach-img-3 { transform: none; }
  .approach-text .section-title { font-size: clamp(1.8rem, 8vw, 2.6rem); line-height: 1.08; }
}

/* =============================================================
   REEL / GALLERY
   ============================================================= */
.reel {
  padding: clamp(5rem, 10vw, 8rem) var(--gutter) clamp(3rem, 6vw, 5rem);
  max-width: var(--max);
  margin: 0 auto;
}
.reel-head { text-align: center; margin-bottom: clamp(2rem, 4vw, 4rem); }

.reel-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
  grid-auto-rows: 80px;
}
.reel-item {
  position: relative;
  overflow: hidden;
  background: var(--ink);
}
.reel-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(.78) contrast(1.04) sepia(.06);
  transform: scale(1.04);
  transition: transform 1.6s var(--ease), filter 1.2s var(--ease);
}
.reel-item:hover img { transform: scale(1.1); filter: saturate(1) contrast(1.05); }
.reel-item figcaption {
  position: absolute;
  bottom: 12px; left: 12px;
  font-size: .62rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--paper);
  font-weight: 500;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .5s, transform .5s;
}
.reel-item:hover figcaption { opacity: 1; transform: translateY(0); }

/* Editorial layout — asymmetric (3 photos) */
.reel-grid-3 .reel-item.r1 { grid-column: span 7; grid-row: span 6; }
.reel-grid-3 .reel-item.r2 { grid-column: span 5; grid-row: span 6; }
.reel-grid-3 .reel-item.r3 { grid-column: span 12; grid-row: span 5; }

@media (max-width: 820px) {
  .reel-grid { grid-template-columns: repeat(1, 1fr); grid-auto-rows: 220px; }
  .reel-grid-3 .reel-item.r1,
  .reel-grid-3 .reel-item.r2,
  .reel-grid-3 .reel-item.r3 { grid-column: span 1; grid-row: span 1; }
}

/* =============================================================
   COACHES
   ============================================================= */
.coaches {
  background: var(--paper-warm);
  padding: clamp(5rem, 10vw, 8rem) var(--gutter);
}
.coaches > * + * { margin-top: 0; }
.coaches {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  max-width: var(--max);
  margin: 0 auto;
}

.coaches-photo {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--ink);
  overflow: hidden;
}
.coaches-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: contrast(1.06);
  transform: scale(1.02);
  transition: transform 1.6s var(--ease);
}
.coaches-photo:hover img { transform: scale(1.06); }
.coaches-photo-meta {
  position: absolute;
  top: 14px; right: 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  color: var(--paper);
  font-size: .62rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  font-weight: 500;
}

.coaches-text h4 {
  margin-top: 1.6rem;
  font-size: .72rem;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--rust);
  font-weight: 500;
}
.coaches-method {
  margin-top: 1.6rem;
  font-family: var(--sans);
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.55;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(28, 25, 22, .15);
}

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

/* =============================================================
   CTA
   ============================================================= */
.cta {
  position: relative;
  min-height: 80vh;
  display: grid;
  place-items: center;
  padding: clamp(6rem, 12vw, 10rem) var(--gutter);
  overflow: hidden;
  color: var(--paper);
}
.cta-bg { position: absolute; inset: 0; z-index: 0; will-change: transform; }
.cta-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(.6) brightness(.55) contrast(1.04) sepia(.18);
}
.cta-tint {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8, 26, 35, .65), rgba(184, 99, 62, .25));
}

.cta-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 900px;
}
.cta-overline {
  font-size: .72rem;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--sun-soft);
  margin-bottom: 1rem;
  font-weight: 500;
}
.cta-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.4rem, 5.4vw, 4.8rem);
  line-height: 1.05;
  letter-spacing: -.03em;
  margin-bottom: 1.6rem;
}
.cta-title em { font-style: normal; color: var(--sun); }
.cta-text {
  font-family: var(--sans);
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  line-height: 1.55;
  margin: 0 auto 2.8rem;
  max-width: 56ch;
  color: rgba(241, 230, 209, .92);
}

.cta-button {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 2rem;
  background: var(--paper);
  color: var(--ink);
  border-radius: 999px;
  font-size: .85rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 500;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color .4s var(--ease), transform .4s var(--ease);
}
.cta-button-bg {
  position: absolute;
  inset: 0;
  background: var(--rust);
  border-radius: 999px;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .6s var(--ease);
  z-index: -1;
}
.cta-button:hover { color: var(--paper); }
.cta-button:hover .cta-button-bg {
  transform: scaleX(1);
  transform-origin: left;
}
.cta-button-arrow { font-style: normal; transition: transform .4s var(--ease); }
.cta-button:hover .cta-button-arrow { transform: translateX(6px); }

.cta-meta {
  margin-top: 1.6rem;
  font-size: .85rem;
  color: rgba(241, 230, 209, .65);
}
.cta-meta a { color: var(--sun-soft); border-bottom: 1px solid rgba(227, 189, 131, .4); }

/* =============================================================
   FOOTER
   ============================================================= */
.footer {
  background: var(--ink);
  color: var(--paper);
  padding: clamp(4rem, 8vw, 6rem) var(--gutter) 2rem;
}

.footer-mark {
  text-align: center;
  margin-bottom: clamp(3rem, 6vw, 5rem);
  border-bottom: 1px solid rgba(241, 230, 209, .12);
  padding-bottom: clamp(2rem, 4vw, 3rem);
}
.footer-mark-big {
  display: block;
  font-family: var(--wordmark);
  font-weight: 400;
  font-size: clamp(4rem, 13vw, 12rem);
  line-height: 1;
  letter-spacing: -.02em;
}
.footer-mark-sub {
  display: block;
  margin-top: 1rem;
  font-size: .72rem;
  letter-spacing: .35em;
  text-transform: uppercase;
  opacity: .55;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  max-width: var(--max);
  margin: 0 auto;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(241, 230, 209, .12);
}
.footer-grid > div { display: flex; flex-direction: column; gap: .35rem; }
.footer-grid p { color: rgba(241, 230, 209, .85); font-size: .92rem; max-width: none; margin: 0; }
.footer-grid a {
  font-size: .92rem;
  color: rgba(241, 230, 209, .85);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, color .3s;
  align-self: flex-start;
}
.footer-grid a:hover { color: var(--sun-soft); border-color: var(--sun-soft); }

.footer-label {
  font-size: .68rem !important;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--rust) !important;
  margin-bottom: .4rem !important;
  font-weight: 500;
}

.footer-mantra {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.15;
  letter-spacing: -.02em;
}
.footer-mantra em { font-style: normal; color: var(--sun-soft); font-weight: 700; }
.footer-mantra-hand {
  display: block;
  margin-top: .25rem;
  font-family: var(--hand);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--sun-soft);
  transform: rotate(-2deg);
  transform-origin: left;
}

.footer-base {
  max-width: var(--max);
  margin: 0 auto;
  padding-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  justify-content: center;
  font-size: .72rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: rgba(241, 230, 209, .5);
}
.footer-base .dot { color: var(--rust); }

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

/* =============================================================
   ACCESSIBILITY
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  .grain { animation: none; }
  .marquee-track { animation: none; }
}

/* ==============================================================
   FINAL BRAND · VARIANT D · VINTAGE CALIFORNIA FILM
   Promoted from /d/ to root — chosen direction.
   ============================================================== */

:root {
  /* Paper */
  --paper:        #efe6cf;
  --paper-warm:   #e1d2b0;
  --paper-deep:   #ccb986;

  /* Ink */
  --ink:          #2a2218;
  --ink-soft:     #463a2a;
  --ink-mute:     #74644a;

  /* Accents */
  --rust:         #c46d44;     /* dusty terracotta */
  --rust-deep:    #8e4626;
  --sun:          #d8b06b;
  --sun-soft:     #ebd29c;

  /* Sea (dusty pacific blue) */
  --ocean:        #5a7a90;
  --ocean-deep:   #34536c;
}

html body {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(196, 109, 68, .10), transparent 70%),
    var(--paper);
}

/* Display swap — Anton condensed bold for hero/sections; Bricolage for program-num */
.brand-wordmark {
  font-family: "Anton", "Bricolage Grotesque", Impact, sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: .005em !important;
}
.footer-mark-big,
.loader-count,
.manifesto-mark {
  font-family: "Anton", Impact, sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: -.005em !important;
}

.section-title,
.hero-title,
.cta-title,
.program-title,
.manifesto-quote {
  font-family: "Anton", Impact, sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: .005em !important;
  text-transform: uppercase !important;
}
.hero-title { font-size: clamp(3.8rem, 12vw, 11rem) !important; line-height: .96 !important; }
.section-title { font-size: clamp(2.6rem, 6vw, 5.4rem) !important; line-height: 1.0 !important; }
.program-title { font-size: clamp(1.8rem, 3.2vw, 2.6rem) !important; }
.cta-title { font-size: clamp(2.6rem, 6vw, 5.6rem) !important; }
.manifesto-quote { font-size: clamp(1.6rem, 3.6vw, 3rem) !important; line-height: 1.15 !important; }
.footer-mark-big { font-size: clamp(4.5rem, 14vw, 13rem) !important; letter-spacing: -.005em !important; }

/* Anton has no italic — give the "intention." line the rust color instead */
.hero-title .hero-line:nth-child(2) .hero-word {
  color: var(--sun-soft);
}

/* Program numerals — Bricolage Grotesque heavy */
.program-num {
  font-family: "Bricolage Grotesque", "Inter", system-ui, sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -.04em !important;
}
.program-feature .program-num { color: var(--rust) !important; }
.program-unit { font-family: "Bricolage Grotesque", Inter, system-ui, sans-serif !important; font-weight: 700 !important; }

/* Body keeps Inter */
/* Lead in italic-ish via Bricolage italic — but Bricolage doesn't have italic, so leave as Inter */
.lead, .programs-intro {
  font-family: "Inter", system-ui, sans-serif !important;
  font-weight: 500 !important;
}

/* Hero image — heavy faded film look (dusty, low-saturation, slight cyan-magenta cross-process) */
.hero-image img {
  filter: saturate(.65) contrast(1.06) sepia(.14) brightness(.78) hue-rotate(-4deg) !important;
}
.about-photo-card img,
.coaches-photo img,
.approach-img img,
.reel-item img {
  filter: contrast(1.05) saturate(.7) sepia(.14) brightness(.96) !important;
}
.manifesto-bg img {
  filter: saturate(.4) contrast(1.05) brightness(.55) sepia(.18) !important;
}
.cta-bg img {
  filter: contrast(1.06) saturate(.5) brightness(.55) sepia(.2) !important;
}
.cta-tint {
  background: linear-gradient(180deg, rgba(52, 83, 108, .55), rgba(196, 109, 68, .35)) !important;
}
.manifesto-tint {
  background: linear-gradient(180deg, rgba(52, 83, 108, .5), rgba(52, 83, 108, .85)) !important;
}

/* Heavier grain for D — film print feel */
.grain { opacity: .25 !important; }

/* Section labels — terracotta */
.section-label,
.cta-overline {
  color: var(--rust) !important;
  letter-spacing: .35em !important;
}

/* Marquee — terracotta with cream */
.marquee {
  background: var(--rust-deep) !important;
  color: var(--paper) !important;
  border-top: 1px solid var(--ink) !important;
  border-bottom: 1px solid var(--ink) !important;
}
.marquee-track {
  font-family: "Anton", Impact, sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(1.3rem, 2.4vw, 1.9rem) !important;
  text-transform: uppercase !important;
  letter-spacing: .005em !important;
}
.m-dot { color: var(--sun-soft) !important; }

/* Coaches background — slightly cooler */
.coaches { background: var(--paper-warm) !important; }

/* Photo card — softer corner radius for that "polaroid-ish but cleaner" film feel */
.about-photo-card {
  border-radius: 6px !important;
}
.about-photo-overlay {
  background: rgba(42, 34, 24, .58) !important;
  border-radius: 6px !important;
}
.about-photo-name {
  font-family: "Anton", Impact, sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: .005em !important;
  text-transform: uppercase;
  font-size: 1.4rem !important;
}
.about-photo-badge {
  background: var(--rust) !important;
  color: var(--paper) !important;
}

/* CTAs */
.cta-button-bg { background: var(--rust) !important; }
.nav-cta:hover { background: var(--rust) !important; }
.program-cta::before { background: linear-gradient(95deg, var(--rust) 0%, var(--rust-deep) 100%) !important; }
.program-cta:hover { box-shadow: 0 14px 30px -12px rgba(196, 109, 68, .55), 0 4px 10px -4px rgba(28, 25, 22, .25) !important; }

/* Footer */
.footer-mark-sub { letter-spacing: .25em !important; }

/* Variant chooser pill */
.variant-back {
  position: fixed; bottom: 16px; left: 16px; z-index: 200;
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .55rem 1rem;
  background: var(--ink); color: var(--paper);
  font-family: Inter, system-ui, sans-serif;
  font-size: .68rem; letter-spacing: .25em; text-transform: uppercase; font-weight: 600;
  border-radius: 999px; opacity: .85;
  transition: opacity .3s, background .3s;
  text-decoration: none;
}
.variant-back strong { color: var(--sun-soft); font-weight: 700; }
.variant-back:hover { opacity: 1; background: var(--rust) !important; }

/* =============================================================
   TESTIMONIALS — Google reviews carousel
   ============================================================= */
.testimonials {
  padding: clamp(5rem, 10vw, 8rem) var(--gutter);
  max-width: 1080px;
  margin: 0 auto;
  text-align: center;
  position: relative;
}

.testimonials-head {
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.testimonials-kicker {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--sans);
  font-size: .68rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-mute);
  margin: 0 auto 1.2rem;
  padding: .55rem 1rem;
  background: var(--paper-warm);
  border-radius: 999px;
  border: 1px solid rgba(28, 25, 22, .08);
}
.google-g {
  width: 14px !important;
  height: 14px !important;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}
svg.google-g { width: 14px !important; height: 14px !important; }

.testimonials-stage {
  position: relative;
  max-width: 780px;
  margin: 0 auto;
  min-height: clamp(280px, 32vw, 360px);
  display: grid;
  place-items: center;
}

.testimonial-quote-mark {
  position: absolute;
  top: -clamp(2rem, 4vw, 3.5rem);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--wordmark);
  font-size: clamp(6rem, 10vw, 9rem);
  line-height: 1;
  color: var(--rust);
  opacity: .18;
  pointer-events: none;
  user-select: none;
}

.testimonial {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .8s var(--ease), transform .8s var(--ease), visibility 0s linear .8s;
  padding: 0 clamp(.5rem, 2vw, 1rem);
}
.testimonial.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity .8s var(--ease), transform .8s var(--ease), visibility 0s linear 0s;
}

.testimonial-stars {
  font-size: 1.4rem;
  letter-spacing: .15em;
  color: var(--sun);
  filter: drop-shadow(0 1px 2px rgba(180, 130, 60, .25));
}

.testimonial-text {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.25rem, 2.4vw, 1.85rem);
  line-height: 1.35;
  color: var(--ink);
  max-width: 56ch;
  margin: 0 auto;
  letter-spacing: -.01em;
}

.testimonial-attr {
  font-family: var(--sans);
  font-size: .82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .55rem;
  font-weight: 600;
  margin: 0;
}
.testimonial-name { color: var(--ink); }
.testimonial-dot { color: var(--rust); }

.testimonials-dots {
  display: flex;
  justify-content: center;
  gap: .55rem;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
.testimonials-dot {
  width: 8px; height: 8px;
  border-radius: 999px;
  border: 0;
  padding: 0;
  background: rgba(28, 25, 22, .2);
  cursor: pointer;
  transition: background .35s var(--ease), width .35s var(--ease);
}
.testimonials-dot:hover { background: rgba(28, 25, 22, .35); }
.testimonials-dot.is-active {
  background: var(--rust);
  width: 22px;
}

.testimonials-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  font-size: .8rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  font-weight: 600;
}
.testimonials-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--ink-soft);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color .3s, border-color .3s;
}
.testimonials-link em {
  font-style: normal;
  transition: transform .35s var(--ease);
  display: inline-block;
}
.testimonials-link:hover {
  color: var(--ink);
  border-color: var(--ink);
}
.testimonials-link:hover em { transform: translateX(4px); }

.testimonials-link-primary {
  background: var(--ink);
  color: var(--paper);
  padding: .7rem 1.2rem;
  border-radius: 999px;
  border-bottom: 0;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.testimonials-link-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--rust);
  border-radius: 999px;
  transform: translateX(-101%);
  transition: transform .55s var(--ease);
  z-index: -1;
}
.testimonials-link-primary:hover {
  color: var(--paper);
  border-color: transparent;
}
.testimonials-link-primary:hover::before { transform: translateX(0); }

.testimonials-divider {
  color: var(--ink-mute);
  opacity: .5;
}

@media (max-width: 600px) {
  .testimonials-cta { gap: .8rem; }
  .testimonials-divider { display: none; }
}

/* =============================================================
   Grain disabled — feedback removed the animated film grain overlay
   ============================================================= */
.grain { display: none !important; }