/* JM Valetz static site. Ported 1:1 from the Lovable build (commit 91fe347).
   Theme: obsidian + charcoal with gold from the logo. Anton display, Manrope body.
   Colour tokens below are the hex equivalents of the original oklch values. */

:root {
  --radius: 1rem;
  --r-lg: 1rem;
  --r-2xl: 1.5rem;

  --bg: #0b0c0f;
  --fg: #f3f5f8;
  --surface: #111317;
  --surface-2: #1a1c20;
  --card: #14161a;
  --gold: #dcb05b;
  --gold-soft: #e9d29c;
  --on-gold: #130c05;
  --muted: #222429;
  --muted-fg: #a6abb3;
  --destructive: #ea3c3f;

  --border-gold: rgba(220, 176, 91, 0.18);
  --ring: rgba(220, 176, 91, 0.55);

  --gradient-gold: linear-gradient(120deg, #b88848, #f5dc98, #ca9c4e);
  --shadow-glow: 0 0 0 1px color-mix(in oklab, var(--gold) 35%, transparent),
    0 18px 45px -18px color-mix(in oklab, var(--gold) 55%, transparent);
  --shadow-card: 0 24px 60px -30px rgba(0, 0, 0, 0.9);

  --font-display: "Anton", "Arial Narrow", sans-serif;
  --font-sans: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: var(--border-gold); }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background-color: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
::selection { background-color: color-mix(in oklab, var(--gold) 40%, transparent); }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p, figure, blockquote, dl, dd, dt { margin: 0; }
button { font: inherit; color: inherit; background: none; cursor: pointer; padding: 0; }
input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* icons (lucide paths in a sprite) */
.ic { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.ic-fill { fill: currentColor; }
.i4 { width: 1rem; height: 1rem; }
.i5 { width: 1.25rem; height: 1.25rem; }
.i6 { width: 1.5rem; height: 1.5rem; }
.i7 { width: 1.75rem; height: 1.75rem; }
.i8 { width: 2rem; height: 2rem; }
.i10 { width: 2.5rem; height: 2.5rem; }
.c-gold { color: var(--gold); }
.c-muted { color: var(--muted-fg); }

/* ---------- shared utilities ---------- */
.wrap { max-width: 80rem; margin-inline: auto; padding-inline: 1rem; }
@media (min-width: 640px) { .wrap { padding-inline: 1.5rem; } }
.display { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.01em; line-height: 0.92; font-weight: 400; }
.gold-text { background: var(--gradient-gold); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.blueprint {
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 56px 56px;
}
.glass-card {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.015));
  border: 1px solid color-mix(in oklab, var(--gold) 22%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-card);
}
.glow-ring { box-shadow: var(--shadow-glow); }
.abs-fill { position: absolute; inset: 0; }
.blob {
  position: absolute; border-radius: 9999px; filter: blur(64px);
  background: radial-gradient(circle, var(--gold), transparent 65%);
  pointer-events: none;
}
.muted { color: var(--muted-fg); }
.balance { text-wrap: balance; }

.shine { position: relative; overflow: hidden; }
.shine::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  transform: translateX(-120%) skewX(-18deg);
  pointer-events: none;
}
.shine:hover::after { animation: shine-sweep 0.9s ease-out; }
@keyframes shine-sweep { from { transform: translateX(-120%) skewX(-18deg); } to { transform: translateX(240%) skewX(-18deg); } }

/* ---------- CTA buttons ---------- */
.cta {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  border-radius: 9999px; font-size: 0.875rem; line-height: 1.25rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.75rem 1.5rem;
  transition: all 0.3s;
  cursor: pointer;
}
.cta::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  transform: translateX(-120%) skewX(-18deg); pointer-events: none;
}
.cta:hover::after { animation: shine-sweep 0.9s ease-out; }
.cta-lg { padding: 1rem 2rem; font-size: 1rem; line-height: 1.5rem; }
.cta-sm { padding: 0.625rem 1.25rem; font-size: 0.75rem; line-height: 1rem; }
.cta-gold { background: var(--gold); color: var(--on-gold); box-shadow: var(--shadow-glow); }
.cta-gold:hover { transform: translateY(-2px); filter: brightness(1.1); }
.cta-outline {
  border: 1px solid color-mix(in oklab, var(--gold) 45%, transparent);
  background: rgba(255, 255, 255, 0.05); color: var(--fg);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.cta-outline:hover { transform: translateY(-2px); border-color: var(--gold); background: color-mix(in oklab, var(--gold) 10%, transparent); }
.cta-dark { background: var(--bg); color: var(--fg); }
.cta-dark:hover { transform: translateY(-2px); background: var(--surface-2); }
.cta-ongold { background: var(--bg); color: var(--fg); box-shadow: var(--shadow-glow); }
.cta-ongold:hover { transform: translateY(-2px); background: var(--surface-2); }
.cta-block { width: 100%; }
.cta-flex { flex: 1 1 0%; }
.cta-self-start { align-self: flex-start; }

/* ---------- section scaffolding ---------- */
.section { position: relative; padding-block: 6rem; }
@media (min-width: 640px) { .section { padding-block: 8rem; } }
.bg-bg { background: var(--bg); }
.bg-surface { background: var(--surface); }
.clip { overflow: hidden; }

.eyebrow { font-size: 0.75rem; line-height: 1rem; font-weight: 600; letter-spacing: 0.28em; color: var(--gold); text-transform: uppercase; }
.rule { height: 1px; background: linear-gradient(to right, var(--gold), transparent); }
.sh .rule { margin-top: 0.75rem; width: 4rem; }
.sh h2 { margin-top: 1.25rem; font-size: 2.25rem; text-wrap: balance; }
@media (min-width: 640px) { .sh h2 { font-size: 3rem; } }
@media (min-width: 1024px) { .sh h2 { font-size: 3.75rem; } }
.sh-narrow { max-width: 48rem; }
.rule-sm { margin-top: 0.75rem; width: 3rem; }

/* ---------- reveal on scroll (visible by default) ---------- */
.js-reveal [data-reveal] {
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.65s var(--ease) var(--d, 0s), transform 0.65s var(--ease) var(--d, 0s);
}
.js-reveal [data-reveal="x"] {
  transform: translateX(-12px);
  transition: opacity 0.45s ease var(--d, 0s), transform 0.45s ease var(--d, 0s);
}
.js-reveal [data-reveal].is-in { opacity: 1; transform: none; }

/* on-load entrance (CSS only, always ends visible) */
@keyframes rise { from { opacity: 0; transform: translateY(var(--y, 24px)); } to { opacity: 1; transform: none; } }
.rise { animation: rise var(--t, 0.6s) var(--e, ease) var(--d, 0s) both; }

/* ---------- navbar ---------- */
.nav {
  position: fixed; inset-inline: 0; top: 0; z-index: 50;
  border-bottom: 1px solid transparent; padding-block: 1rem;
  transition: all 0.5s;
}
.nav.is-shrunk {
  border-bottom-color: color-mix(in oklab, var(--gold) 15%, transparent);
  background: color-mix(in oklab, var(--bg) 80%, transparent);
  padding-block: 0.5rem;
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
}
.nav-in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; max-width: 80rem; margin-inline: auto; padding-inline: 1rem; }
@media (min-width: 640px) { .nav-in { padding-inline: 1.5rem; } }
.brand { display: flex; min-width: 0; align-items: center; gap: 0.75rem; }
.brand img { flex-shrink: 0; border-radius: 9999px; width: 3rem; height: 3rem; transition: all 0.5s; }
.nav.is-shrunk .brand img { width: 2.5rem; height: 2.5rem; }
.brand span { font-size: 1.125rem; line-height: 1.75rem; letter-spacing: 0.025em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 640px) { .brand span { font-size: 1.25rem; } }
.nav-links { display: none; align-items: center; gap: 1.75rem; }
@media (min-width: 1024px) { .nav-links { display: flex; } }
.nav-links a {
  position: relative; font-size: 0.875rem; line-height: 1.25rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-fg); transition: color 0.15s;
}
.nav-links a:hover { color: var(--fg); }
.nav-links a.is-active { color: var(--gold); }
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: -0.5rem; width: 100%; height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--ease);
}
.nav-links a.is-active::after { transform: scaleX(1); }
.nav-end { display: flex; flex-shrink: 0; align-items: center; gap: 0.5rem; }
.nav-cta { display: none; }
@media (min-width: 640px) { .nav-cta { display: inline-flex; } }
.icon-btn {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 9999px;
  border: 1px solid color-mix(in oklab, var(--gold) 30%, transparent); color: var(--gold);
}
.menu-btn { }
@media (min-width: 1024px) { .menu-btn { display: none; } }

.mmenu {
  position: fixed; inset: 0; z-index: 60;
  background: color-mix(in oklab, var(--bg) 97%, transparent);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s;
  overflow-y: auto;
}
.mmenu.is-open { opacity: 1; visibility: visible; }
@media (min-width: 1024px) { .mmenu { display: none; } }
.mmenu-top { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1rem; }
@media (min-width: 640px) { .mmenu-top { padding-inline: 1.5rem; } }
.mmenu-top span { font-size: 1.125rem; line-height: 1.75rem; }
.mmenu ul { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; padding-inline: 1.5rem; }
.mmenu li { opacity: 0; transform: translateY(18px); transition: opacity 0.4s, transform 0.4s; }
.mmenu.is-open li { opacity: 1; transform: none; transition-delay: calc(0.06s * var(--i, 0)); }
.mmenu li a { display: block; border-bottom: 1px solid rgba(255, 255, 255, 0.05); padding-block: 1rem; font-size: 1.875rem; line-height: 0.92; }
.mmenu li a:hover { color: var(--gold); }
.mmenu-cta { padding: 2rem 1.5rem 0; }

/* ---------- hero ---------- */
.hero { position: relative; isolation: isolate; min-height: 100vh; min-height: 100svh; overflow: hidden; }
.hero-media { position: absolute; inset: 0; z-index: -10; transform: translateY(var(--py, 0%)); will-change: transform; }
.hero-media img {
  width: 100%; height: 115%; object-fit: cover; object-position: 50% 35%;
  transform: scale(1.14); animation: hero-zoom 22s linear infinite alternate;
}
@keyframes hero-zoom { from { transform: scale(1.14); } to { transform: scale(1.28); } }
.hero-shade { position: absolute; inset: 0; z-index: -10;
  background: linear-gradient(to bottom, color-mix(in oklab, var(--bg) 85%, transparent), color-mix(in oklab, var(--bg) 70%, transparent), var(--bg)); }
.hero .blueprint { z-index: -10; opacity: 0.4; }
.hero-glow { top: -6rem; left: 50%; z-index: -10; width: 520px; height: 520px; transform: translateX(-50%); opacity: 0.25; }
.hero-body {
  display: flex; flex-direction: column; justify-content: center;
  min-height: 100vh; min-height: 100svh; max-width: 80rem; margin-inline: auto;
  padding: 7rem 1rem 5rem; opacity: var(--fade, 1);
}
@media (min-width: 640px) { .hero-body { padding-inline: 1.5rem; } }
.hero-top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.hero-top .eyebrow { letter-spacing: 0.3em; }
.pill {
  border-radius: 9999px; border: 1px solid color-mix(in oklab, var(--gold) 40%, transparent);
  background: color-mix(in oklab, var(--gold) 10%, transparent);
  padding: 0.25rem 0.75rem; font-size: 11px; line-height: 1rem; font-weight: 700;
  letter-spacing: 0.18em; color: var(--gold); text-transform: uppercase;
}
.hero h1 { margin-top: 1.5rem; max-width: 56rem; font-size: clamp(2.75rem, 10vw, 6.5rem); }
.hero h1 .w { display: inline-block; margin-right: 0.25em; }
.hero-sub { margin-top: 1.75rem; max-width: 42rem; font-size: 1rem; line-height: 1.625; color: var(--muted-fg); }
@media (min-width: 640px) { .hero-sub { font-size: 1.125rem; line-height: 1.75rem; } }
.hero-ctas { margin-top: 2.25rem; display: flex; flex-direction: column; gap: 0.75rem; }
@media (min-width: 640px) { .hero-ctas { flex-direction: row; align-items: center; } }
.pulse { animation: glow-pulse 3.2s ease-in-out infinite; }
@keyframes glow-pulse {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(212, 167, 88, 0)); }
  50% { filter: drop-shadow(0 0 18px rgba(212, 167, 88, 0.45)); }
}
.pulse .cta { width: 100%; }
@media (min-width: 640px) { .pulse .cta { width: auto; } }
.tiles { margin-top: 3rem; display: grid; gap: 1rem; }
@media (min-width: 640px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tile { display: flex; align-items: center; gap: 0.75rem; border-radius: var(--r-2xl); padding: 0.75rem 1rem; }
.tile > span:last-child { font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; }
.stars { display: flex; gap: 0.125rem; }

/* ---------- marquee ---------- */
.marquee { position: relative; display: flex; overflow: hidden; border-block: 1px solid color-mix(in oklab, var(--gold) 20%, transparent); background: var(--surface); padding-block: 0.75rem; }
.marquee-track { display: flex; width: max-content; flex-shrink: 0; align-items: center; gap: 2rem; padding-right: 2rem; animation: marquee-x 26s linear infinite; }
@keyframes marquee-x { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-track span { display: flex; align-items: center; gap: 2rem; font-size: 0.75rem; line-height: 1rem; font-weight: 700; letter-spacing: 0.28em; color: var(--muted-fg); text-transform: uppercase; white-space: nowrap; }
.marquee-track i { display: block; width: 0.25rem; height: 0.25rem; border-radius: 9999px; background: var(--gold); }

/* ---------- stats ---------- */
.stats { border-bottom: 1px solid color-mix(in oklab, var(--gold) 15%, transparent); background: color-mix(in oklab, var(--surface-2) 60%, transparent); }
.stats dl { display: grid; gap: 2rem; max-width: 80rem; margin-inline: auto; padding: 3.5rem 1rem; }
@media (min-width: 640px) { .stats dl { padding-inline: 1.5rem; } }
@media (min-width: 768px) { .stats dl { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.stats .s { text-align: center; }
.stats dd { font-size: 3rem; }
@media (min-width: 640px) { .stats dd { font-size: 3.75rem; } }
.stats dt { margin-top: 0.75rem; font-size: 0.75rem; line-height: 1rem; font-weight: 600; letter-spacing: 0.24em; color: var(--muted-fg); text-transform: uppercase; }

/* ---------- about ---------- */
.about .blueprint { opacity: 0.4; }
.about-grid { position: relative; display: grid; align-items: center; gap: 3.5rem; max-width: 80rem; margin-inline: auto; padding-inline: 1rem; }
@media (min-width: 640px) { .about-grid { padding-inline: 1.5rem; } }
@media (min-width: 1024px) { .about-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.about-copy { margin-top: 1.75rem; display: flex; flex-direction: column; gap: 1.25rem; font-size: 1rem; line-height: 1.625; color: var(--muted-fg); }
.about .cta { margin-top: 2.25rem; }
.frame { border-radius: var(--r-2xl); border: 1px solid color-mix(in oklab, var(--gold) 25%, transparent); overflow: hidden; }
.frame img { width: 100%; height: 100%; object-fit: cover; }
.about-fig { position: relative; }
.badge {
  position: absolute; bottom: -1.5rem; left: 1rem; max-width: 15rem; border-radius: var(--r-2xl);
  border: 1px solid color-mix(in oklab, var(--gold) 30%, transparent);
  background: color-mix(in oklab, var(--bg) 95%, transparent); padding: 1.25rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
}
@media (min-width: 640px) { .badge { left: 1.5rem; } }
.badge .display { font-size: 1.5rem; line-height: 0.92; }
.badge p:last-child { margin-top: 0.5rem; font-size: 0.75rem; line-height: 1.625; color: color-mix(in oklab, var(--fg) 75%, transparent); }

/* ---------- services ---------- */
.services-grid { margin-top: 3.5rem; display: grid; gap: 1.5rem; }
@media (min-width: 1024px) { .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.svc {
  display: flex; height: 100%; flex-direction: column; overflow: hidden; border-radius: var(--r-2xl);
  transition: transform 0.35s var(--ease), box-shadow 0.3s;
}
.svc:hover { transform: translateY(-6px) scale(1.02); box-shadow: 0 0 0 1px var(--gold), 0 30px 60px -30px rgba(0, 0, 0, 0.9); }
.svc-img { position: relative; height: 13rem; overflow: hidden; }
.svc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s; }
.svc:hover .svc-img img { transform: scale(1.05); }
.svc-img::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, var(--card), color-mix(in oklab, var(--card) 25%, transparent), transparent); }
.svc-body { display: flex; flex: 1 1 0%; flex-direction: column; padding: 1.75rem; }
.svc-body h3 { font-size: 1.5rem; }
@media (min-width: 640px) { .svc-body h3 { font-size: 1.875rem; } }
.svc-body .rule { margin-top: 0.75rem; width: 3rem; }
.svc-body > p { margin-top: 1rem; font-size: 0.875rem; line-height: 1.625; color: var(--muted-fg); }
.checklist { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 0.625rem; }
.checklist li { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.875rem; line-height: 1.25rem; }
.checklist .ic { margin-top: 0.125rem; color: var(--gold); }
.svc-note { margin-top: 1.5rem; font-size: 0.75rem; line-height: 1rem; letter-spacing: 0.025em; color: color-mix(in oklab, var(--gold) 80%, transparent); }
.svc .cta { margin-top: 1.75rem; }

/* ---------- gallery ---------- */
.gal-intro { margin-top: 1.25rem; max-width: 42rem; font-size: 0.875rem; line-height: 1.625; color: var(--muted-fg); }
.gal-grid { margin-top: 3rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 200px; gap: 1rem; }
@media (min-width: 640px) { .gal-grid { grid-auto-rows: 240px; } }
@media (min-width: 1024px) { .gal-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.gal-grid > div { height: 100%; }
.gal-btn { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: var(--r-2xl); border: 1px solid color-mix(in oklab, var(--gold) 20%, transparent); display: block; }
.gal-btn img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s; }
.gal-btn:hover img { transform: scale(1.1); }
.gal-btn::before { content: ""; position: absolute; inset: 0; z-index: 1; transition: opacity 0.5s;
  background: linear-gradient(to top, color-mix(in oklab, var(--bg) 75%, transparent), transparent, transparent); }
.gal-btn:hover::before { opacity: 0.6; }
.lightbox {
  position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 1rem;
  background: color-mix(in oklab, var(--bg) 95%, transparent);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  opacity: 0; visibility: hidden; transition: opacity 0.25s, visibility 0.25s;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox .icon-btn { position: absolute; top: 1.25rem; right: 1.25rem; }
.lightbox img {
  max-height: 85vh; width: auto; max-width: 100%; border-radius: var(--r-2xl);
  border: 1px solid color-mix(in oklab, var(--gold) 25%, transparent); object-fit: contain;
  opacity: 0; transform: scale(0.95); transition: opacity 0.3s, transform 0.3s;
}
.lightbox.is-open img { opacity: 1; transform: none; }

/* ---------- meet jm ---------- */
.meet-blob { top: 33%; right: -8rem; width: 420px; height: 420px; opacity: 0.2; }
.meet-grid { position: relative; display: grid; align-items: center; gap: 3.5rem; max-width: 80rem; margin-inline: auto; padding-inline: 1rem; }
@media (min-width: 640px) { .meet-grid { padding-inline: 1.5rem; } }
@media (min-width: 1024px) { .meet-grid { grid-template-columns: 0.85fr 1fr; } }
.meet-img { order: 2; }
.meet-txt { order: 1; }
@media (min-width: 1024px) { .meet-img { order: 1; } .meet-txt { order: 2; } }
.quote-card { margin-top: 2rem; border-radius: var(--r-2xl); padding: 1.75rem; }
.quote-card > p { margin-top: 1rem; font-size: 1rem; line-height: 1.625; color: var(--muted-fg); }
@media (min-width: 640px) { .quote-card > p { font-size: 1.125rem; line-height: 1.75rem; } }
.quote-card footer { margin-top: 1.5rem; font-size: 0.75rem; line-height: 1rem; font-weight: 700; letter-spacing: 0.24em; color: var(--gold); text-transform: uppercase; }

/* ---------- club band ---------- */
.club { position: relative; overflow: hidden; background: var(--gradient-gold); }
.club-in { display: grid; align-items: center; gap: 2rem; max-width: 80rem; margin-inline: auto; padding: 4rem 1rem; }
@media (min-width: 640px) { .club-in { padding-inline: 1.5rem; } }
@media (min-width: 1024px) { .club-in { grid-template-columns: 1fr auto; } }
.club .k { font-size: 0.75rem; line-height: 1rem; font-weight: 700; letter-spacing: 0.3em; color: color-mix(in oklab, var(--on-gold) 70%, transparent); text-transform: uppercase; }
.club h2 { margin-top: 0.75rem; font-size: 2.25rem; color: var(--on-gold); }
@media (min-width: 640px) { .club h2 { font-size: 3.75rem; } }
.club p.b { margin-top: 1rem; max-width: 42rem; font-size: 0.875rem; line-height: 1.625; color: color-mix(in oklab, var(--on-gold) 80%, transparent); }
@media (min-width: 640px) { .club p.b { font-size: 1rem; line-height: 1.625; } }

/* ---------- testimonials ---------- */
.reviews .blueprint { opacity: 0.3; }
.reviews .wrap { position: relative; }
.tm { margin-top: 3rem; overflow: hidden; }
.tm-track { display: flex; flex-wrap: wrap; }
.is-js .tm-track { flex-wrap: nowrap; transition: transform 0.55s var(--ease); will-change: transform; touch-action: pan-y; }
.is-js .tm-track.no-anim { transition: none; }
.tm-slide { min-width: 0; flex: 0 0 100%; padding-inline: 0.5rem; }
.tm-slide + .tm-slide { margin-top: 1rem; }
.is-js .tm-slide + .tm-slide { margin-top: 0; }
@media (min-width: 768px) { .tm-slide { flex-basis: 50%; } }
.tm-card { display: flex; height: 100%; flex-direction: column; border-radius: var(--r-2xl); padding: 1.75rem; }
.tm-card blockquote { margin-top: 1.25rem; flex: 1 1 0%; font-size: 0.875rem; line-height: 1.625; color: var(--muted-fg); }
@media (min-width: 640px) { .tm-card blockquote { font-size: 1rem; line-height: 1.625; } }
.tm-card figcaption { margin-top: 1.5rem; border-top: 1px solid color-mix(in oklab, var(--gold) 15%, transparent); padding-top: 1.25rem; }
.tm-card figcaption .display { font-size: 1.25rem; line-height: 0.92; }
.tm-card figcaption .role { margin-top: 0.25rem; display: block; font-size: 0.75rem; line-height: 1rem; letter-spacing: 0.2em; color: var(--gold); text-transform: uppercase; }
.tm-card .stars { gap: 0.25rem; }
.dots { margin-top: 2rem; display: none; align-items: center; justify-content: center; gap: 0.75rem; }
.dots.on { display: flex; }
.dots button { height: 0.375rem; width: 1rem; border-radius: 9999px; background: color-mix(in oklab, var(--muted-fg) 40%, transparent); transition: all 0.3s; }
.dots button.is-sel { width: 2.5rem; background: var(--gold); }
.g-link { margin-top: 2.5rem; text-align: center; }
.g-link a { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 700; letter-spacing: 0.14em; color: var(--gold); text-transform: uppercase; }
.g-link a:hover { color: var(--gold-soft); }

/* ---------- faqs (home + institute) ---------- */
.faq-grid { display: grid; gap: 3rem; max-width: 80rem; margin-inline: auto; padding-inline: 1rem; }
@media (min-width: 640px) { .faq-grid { padding-inline: 1.5rem; } }
@media (min-width: 1024px) { .faq-grid { grid-template-columns: 0.9fr 1.1fr; } .faq-grid.alt { grid-template-columns: 0.8fr 1.2fr; } }
.acc { width: 100%; }
.acc details { border-bottom: 1px solid color-mix(in oklab, var(--gold) 15%, transparent); }
.acc summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; list-style: none;
  padding-block: 1.5rem; text-align: left; font-size: 1rem; line-height: 1.5rem; font-weight: 700; transition: color 0.15s;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary:hover { color: var(--gold); }
.acc summary .ic { width: 1rem; height: 1rem; color: var(--muted-fg); transition: transform 0.2s; }
.acc details[open] summary .ic { transform: rotate(180deg); }
.acc .a { padding-bottom: 1.5rem; font-size: 0.875rem; line-height: 1.625; color: var(--muted-fg); }
@media (min-width: 640px) { .acc.big summary { font-size: 1.125rem; line-height: 1.75rem; } }

/* ---------- contact ---------- */
.contact-blob { top: -10rem; left: 25%; width: 460px; height: 460px; opacity: 0.2; }
.contact-grid { margin-top: 3.5rem; display: grid; gap: 1.5rem; }
@media (min-width: 1024px) { .contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.c-card { height: 100%; border-radius: var(--r-2xl); padding: 1.75rem; }
@media (min-width: 640px) { .c-card { padding: 2.25rem; } }
.c-card h3 { font-size: 1.5rem; }
@media (min-width: 640px) { .c-card h3 { font-size: 1.875rem; } }
.c-card .rule { margin-top: 0.75rem; width: 3rem; }
.c-list { margin-top: 1.75rem; display: flex; flex-direction: column; gap: 1rem; font-size: 0.875rem; line-height: 1.25rem; }
.c-list li { display: flex; align-items: center; gap: 0.75rem; }
.c-list a { font-weight: 600; }
.c-list a:hover { color: var(--gold); }
.btn-row { margin-top: 1.75rem; display: flex; flex-direction: column; gap: 0.75rem; }
@media (min-width: 640px) { .btn-row { flex-direction: row; } }
.btn-row.t0 { margin-top: 0; }
.c-sec { margin-top: 2.25rem; border-top: 1px solid color-mix(in oklab, var(--gold) 15%, transparent); padding-top: 1.75rem; }
.c-sec .k { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; line-height: 1rem; font-weight: 700; letter-spacing: 0.22em; color: var(--gold); text-transform: uppercase; }
.hours { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.875rem; line-height: 1.25rem; }
.hours div { display: flex; justify-content: space-between; gap: 1rem; }
.hours dt { color: var(--muted-fg); }
.hours dd { font-weight: 600; }
.c-sec p.t { margin-top: 0.75rem; font-size: 0.875rem; line-height: 1.625; color: var(--muted-fg); }
.fast { margin-top: 1.75rem; border-radius: var(--r-2xl); border: 1px solid color-mix(in oklab, var(--gold) 25%, transparent); background: rgba(255, 255, 255, 0.05); padding: 1.5rem; }
.fast .k { font-size: 0.75rem; line-height: 1rem; font-weight: 700; letter-spacing: 0.22em; color: var(--gold); text-transform: uppercase; }
.fast > p { margin-top: 0.75rem; font-size: 0.875rem; line-height: 1.625; color: var(--muted-fg); }
.fast ol { margin-top: 1.25rem; display: flex; flex-direction: column; gap: 0.75rem; }
.fast li { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.875rem; line-height: 1.25rem; }
.fast li b { display: grid; place-items: center; flex-shrink: 0; width: 1.5rem; height: 1.5rem; border-radius: 9999px; border: 1px solid color-mix(in oklab, var(--gold) 40%, transparent); font-size: 0.75rem; line-height: 1rem; font-weight: 700; color: var(--gold); }
.book-embed { margin-top: 1.75rem; display: flex; flex-direction: column; gap: 0.75rem; }
@media (min-width: 640px) { .book-embed { flex-direction: row; } }
.c-card .fine { margin-top: 1.5rem; font-size: 0.75rem; line-height: 1.625; color: var(--muted-fg); }

/* ---------- footer ---------- */
.foot { border-top: 1px solid color-mix(in oklab, var(--gold) 15%, transparent); background: var(--surface); }
.foot-grid { display: grid; gap: 3rem; max-width: 80rem; margin-inline: auto; padding: 4rem 1rem; }
@media (min-width: 640px) { .foot-grid { padding-inline: 1.5rem; } }
@media (min-width: 1024px) { .foot-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.foot .logo { display: flex; align-items: center; gap: 0.75rem; }
.foot .logo img { width: 3.25rem; height: 3.25rem; border-radius: 9999px; }
.foot .logo span { font-size: 1.25rem; line-height: 1.75rem; }
.foot .about-t { margin-top: 1.25rem; font-size: 0.875rem; line-height: 1.625; color: var(--muted-fg); }
.socials { margin-top: 1.5rem; display: flex; gap: 0.75rem; }
.socials a { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 9999px; border: 1px solid color-mix(in oklab, var(--gold) 25%, transparent); color: var(--gold); transition: all 0.15s; }
.socials a:hover { border-color: var(--gold); background: color-mix(in oklab, var(--gold) 10%, transparent); }
.foot h2 { font-size: 0.75rem; line-height: 1rem; font-weight: 700; letter-spacing: 0.24em; color: var(--gold); text-transform: uppercase; }
.foot ul { margin-top: 1.25rem; display: flex; flex-direction: column; gap: 0.75rem; font-size: 0.875rem; line-height: 1.25rem; }
.foot ul a { color: var(--muted-fg); }
.foot ul a:hover { color: var(--fg); }
.foot ul li.t { color: var(--muted-fg); }
.foot .hours { margin-top: 1.25rem; gap: 0.5rem; }
.foot .hours div { gap: 0.75rem; }
.foot .hours dd { font-weight: 400; }
.foot .fine { margin-top: 1.25rem; font-size: 0.75rem; line-height: 1.625; color: var(--muted-fg); }
.copy { border-top: 1px solid color-mix(in oklab, var(--gold) 10%, transparent); padding: 1.5rem 1rem; text-align: center; font-size: 0.75rem; line-height: 1rem; color: var(--muted-fg); }
@media (min-width: 640px) { .copy { padding-inline: 1.5rem; } }

/* ---------- whatsapp fab ---------- */
.fab {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 40; display: grid; place-items: center;
  width: 3.5rem; height: 3.5rem; border-radius: 9999px; background: var(--gold); color: var(--on-gold);
  box-shadow: var(--shadow-glow); transition: transform 0.15s;
}
.fab:hover { transform: scale(1.05); }
@media (min-width: 1024px) { .fab { display: none; } }

/* =========================================================
   INSTITUTE PAGE
   ========================================================= */
.inst-page { min-height: 100vh; background: var(--bg); padding-bottom: 4rem; }
@media (min-width: 640px) { .inst-page { padding-bottom: 0; } }
.inst-head { position: fixed; inset-inline: 0; top: 0; z-index: 50; border-bottom: 1px solid color-mix(in oklab, var(--gold) 15%, transparent);
  background: color-mix(in oklab, var(--bg) 85%, transparent); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
.inst-head-in { display: flex; height: 5rem; align-items: center; justify-content: space-between; max-width: 80rem; margin-inline: auto; padding-inline: 1rem; }
@media (min-width: 640px) { .inst-head-in { padding-inline: 1.5rem; } }
.inst-head .logo { display: flex; align-items: center; gap: 0.75rem; }
.inst-head .logo img { width: 2.75rem; height: 2.75rem; border-radius: 9999px; }
.inst-head .logo .display { display: block; font-size: 1.125rem; line-height: 1.75rem; }
.inst-head .logo small { display: block; font-size: 10px; line-height: 1rem; font-weight: 700; letter-spacing: 0.16em; color: var(--gold); text-transform: uppercase; }
.inst-head .cta { display: none; }
@media (min-width: 640px) { .inst-head .cta { display: inline-flex; } }

.i-hero { position: relative; isolation: isolate; display: flex; min-height: 92vh; min-height: 92svh; align-items: center; overflow: hidden; padding-top: 5rem; }
.i-hero-img { position: absolute; inset: 0; z-index: -20; width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1.04); animation: i-zoom 18s linear infinite alternate; }
@keyframes i-zoom { from { transform: scale(1.04); } to { transform: scale(1.12); } }
.i-hero-shade { position: absolute; inset: 0; z-index: -10;
  background: linear-gradient(to right, var(--bg), color-mix(in oklab, var(--bg) 90%, transparent), color-mix(in oklab, var(--bg) 45%, transparent)); }
.i-hero .blueprint { z-index: -10; opacity: 0.35; }
.i-hero-in { width: 100%; max-width: 80rem; margin-inline: auto; padding: 5rem 1rem; }
@media (min-width: 640px) { .i-hero-in { padding-inline: 1.5rem; } }
.i-hero-box { max-width: 64rem; }
.i-hero .top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.i-hero .top .eyebrow { font-weight: 700; letter-spacing: 0.25em; }
.i-hero .pill { font-size: 10px; letter-spacing: 0.14em; }
.i-hero h1 { margin-top: 1.75rem; font-size: clamp(3.2rem, 10vw, 7.5rem); text-wrap: balance; }
.i-hero .sub { margin-top: 1.75rem; max-width: 42rem; font-size: 1rem; line-height: 1.625; color: var(--muted-fg); }
@media (min-width: 640px) { .i-hero .sub { font-size: 1.25rem; line-height: 1.75rem; } }
.i-hero .btns { margin-top: 2.25rem; display: flex; flex-direction: column; gap: 0.75rem; }
@media (min-width: 640px) { .i-hero .btns { flex-direction: row; } }
.i-tiles { margin-top: 3rem; display: grid; max-width: 56rem; gap: 0.75rem; }
@media (min-width: 640px) { .i-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.i-tiles .tile { min-height: 5rem; border-radius: var(--r-lg); }
.i-tiles .tile > span:last-child { font-weight: 700; }

.who-grid { display: grid; align-items: center; gap: 3rem; max-width: 80rem; margin-inline: auto; padding-inline: 1rem; }
@media (min-width: 640px) { .who-grid { padding-inline: 1.5rem; } }
@media (min-width: 1024px) { .who-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.who-img { position: relative; overflow: hidden; border-radius: var(--r-lg); border: 1px solid color-mix(in oklab, var(--gold) 20%, transparent); }
.who-img img { aspect-ratio: 4 / 5; width: 100%; object-fit: cover; }
.who-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in oklab, var(--bg) 70%, transparent), transparent, transparent); }
.facts { margin-top: 2.25rem; display: flex; flex-direction: column; gap: 1.25rem; }
.facts li { display: flex; gap: 1rem; border-bottom: 1px solid color-mix(in oklab, var(--gold) 15%, transparent); padding-bottom: 1.25rem; line-height: 1.625; }
.facts .ic { margin-top: 0.125rem; width: 1.25rem; height: 1.25rem; color: var(--gold); }

.course .blueprint { opacity: 0.3; }
.course .wrap { position: relative; }
.lead { margin-top: 1.5rem; max-width: 42rem; line-height: 1.625; color: var(--muted-fg); }
.col3 { margin-top: 3rem; display: grid; gap: 1.25rem; }
@media (min-width: 1024px) { .col3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.col3 article { height: 100%; border-radius: var(--r-lg); padding: 1.75rem; }
.col3 article > .ic { width: 2rem; height: 2rem; color: var(--gold); }
.col3 h3 { margin-top: 1.5rem; font-size: 1.875rem; }
.col3 ul { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.col3 li { display: flex; gap: 0.75rem; font-size: 0.875rem; line-height: 1.625; color: var(--muted-fg); }
.col3 li .ic { margin-top: 0.125rem; width: 1rem; height: 1rem; color: var(--gold); }
.stack { margin-top: 2.5rem; border-radius: var(--r-lg); border: 1px solid color-mix(in oklab, var(--gold) 55%, transparent); background: color-mix(in oklab, var(--gold) 5%, transparent); padding: 1.5rem; }
@media (min-width: 640px) { .stack { padding: 2.25rem; } }
.stack .k { font-size: 0.75rem; line-height: 1rem; font-weight: 700; letter-spacing: 0.22em; color: var(--gold); text-transform: uppercase; }
.stack .rows { margin-top: 1.5rem; }
.stack .row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.25rem; padding-block: 0.75rem; font-size: 0.875rem; line-height: 1.25rem; }
.stack .row + .row { border-top: 1px solid color-mix(in oklab, var(--gold) 15%, transparent); }
.stack .row span { color: var(--muted-fg); }
.stack .row strong { flex-shrink: 0; color: var(--gold); font-weight: 700; }
.stack .total { margin-top: 1.5rem; display: flex; align-items: flex-end; justify-content: space-between; border-top: 1px solid color-mix(in oklab, var(--gold) 40%, transparent); padding-top: 1.5rem; }
.stack .total .l { font-size: 1.5rem; }
.stack .total .v { font-size: 2.25rem; color: var(--gold); }
.stack .dep { margin-top: 1.25rem; text-align: center; font-size: 0.875rem; line-height: 1.25rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }

.seat { background: var(--gold); color: var(--on-gold); padding-block: 5rem; }
@media (min-width: 640px) { .seat { padding-block: 6rem; } }
.seat-in { max-width: 64rem; margin-inline: auto; padding-inline: 1rem; text-align: center; }
@media (min-width: 640px) { .seat-in { padding-inline: 1.5rem; } }
.seat .k { font-size: 0.75rem; line-height: 1rem; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; }
.seat h2 { margin-top: 1rem; font-size: 3rem; }
@media (min-width: 640px) { .seat h2 { font-size: 4.5rem; } }
.seat .p1 { max-width: 42rem; margin: 1.5rem auto 0; font-weight: 600; }
.seat .p2 { max-width: 48rem; margin: 1.75rem auto 0; font-size: 0.75rem; line-height: 1rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.seat .p3 { max-width: 42rem; margin: 1.25rem auto 0; font-size: 0.875rem; line-height: 1.25rem; }
.seat .cta { margin-top: 2rem; }

.calc-grid { margin-top: 3rem; display: grid; gap: 1.5rem; }
@media (min-width: 1024px) { .calc-grid { grid-template-columns: 1fr 1.05fr; } }
.controls { border-radius: var(--r-lg); padding: 1.5rem; }
@media (min-width: 640px) { .controls { padding: 2rem; } }
.ctl + .ctl { margin-top: 2rem; }
.ctl .hd { margin-bottom: 1rem; display: flex; justify-content: space-between; gap: 1rem; }
.ctl label { font-size: 0.875rem; line-height: 1.25rem; font-weight: 700; }
.ctl output { font-weight: 700; color: var(--gold); }
.outs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.out { display: flex; min-height: 9rem; flex-direction: column; justify-content: flex-end; border-radius: var(--r-lg); padding: 1.25rem; }
.out span { font-size: 0.75rem; line-height: 1.625; color: var(--muted-fg); }
.out strong { margin-top: 0.5rem; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.01em; line-height: 0.92; font-weight: 400; font-size: 1.875rem; color: var(--gold); }
@media (min-width: 640px) { .out strong { font-size: 2.25rem; } }
.bench { margin-top: 2.5rem; overflow: hidden; border-radius: var(--r-lg); border: 1px solid color-mix(in oklab, var(--gold) 20%, transparent); }
.bench .hd { background: color-mix(in oklab, var(--gold) 10%, transparent); padding: 1rem 1.25rem; font-size: 0.75rem; line-height: 1rem; font-weight: 700; letter-spacing: 0.2em; color: var(--gold); text-transform: uppercase; }
.bench .sc { overflow-x: auto; }
.bench table { width: 100%; min-width: 520px; border-collapse: collapse; text-align: left; font-size: 0.875rem; line-height: 1.25rem; }
.bench th { padding: 1rem; font-weight: 600; color: var(--muted-fg); border-bottom: 1px solid color-mix(in oklab, var(--gold) 15%, transparent); }
.bench td { padding: 1rem; border-bottom: 1px solid color-mix(in oklab, var(--gold) 10%, transparent); }
.bench tr:last-child td { border-bottom: 0; }
.bench td:nth-child(1) { font-weight: 700; }
.bench td:nth-child(2) { font-weight: 700; color: var(--gold); }
.center-cta { margin-top: 2.25rem; text-align: center; }

/* range sliders */
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 1.5rem; background: transparent; cursor: pointer; display: block; margin: 0; }
input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 9999px; background: linear-gradient(to right, var(--gold) var(--pct, 0%), var(--muted) var(--pct, 0%)); }
input[type="range"]::-moz-range-track { height: 6px; border-radius: 9999px; background: var(--muted); }
input[type="range"]::-moz-range-progress { height: 6px; border-radius: 9999px; background: var(--gold); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 1rem; height: 1rem; margin-top: -5px; border-radius: 9999px; border: 1px solid var(--gold); background: var(--bg); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); transition: box-shadow 0.15s; }
input[type="range"]::-moz-range-thumb { width: 1rem; height: 1rem; border-radius: 9999px; border: 1px solid var(--gold); background: var(--bg); }
input[type="range"]:hover::-webkit-slider-thumb, input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px color-mix(in oklab, var(--gold) 40%, transparent); }

.proof .wrap { }
.rating-chip { margin-top: 2.5rem; display: flex; width: fit-content; align-items: center; gap: 0.75rem; border-radius: var(--r-lg); border: 1px solid color-mix(in oklab, var(--gold) 25%, transparent); background: color-mix(in oklab, var(--gold) 5%, transparent); padding: 0.75rem 1.25rem; }
.rating-chip span:last-child { font-size: 0.875rem; line-height: 1.25rem; font-weight: 700; }
.rating-chip .stars { gap: 0; }
.proof-grid { margin-top: 2rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 190px; gap: 0.75rem; }
@media (min-width: 640px) { .proof-grid { grid-auto-rows: 250px; } }
@media (min-width: 1024px) { .proof-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.proof-grid > div { height: 100%; }
.proof-grid > div.tall { grid-row: span 2 / span 2; }
.proof-grid img { width: 100%; height: 100%; border-radius: var(--r-lg); border: 1px solid color-mix(in oklab, var(--gold) 15%, transparent); object-fit: cover; }
.results { margin-top: 6rem; }
.results-grid { margin-top: 2.25rem; display: grid; gap: 1rem; }
@media (min-width: 768px) { .results-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.results-grid .glass-card { display: flex; min-height: 10rem; align-items: flex-end; border-radius: var(--r-lg); padding: 1.5rem; }
.results-grid p { font-size: 0.875rem; line-height: 1.625; color: var(--muted-fg); }

.fit-grid { margin-top: 3rem; display: grid; gap: 1.25rem; }
@media (min-width: 768px) { .fit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fit-grid .glass-card { height: 100%; border-radius: var(--r-lg); padding: 1.75rem; }
@media (min-width: 640px) { .fit-grid .glass-card { padding: 2.25rem; } }
.fit-grid h3 { font-size: 1.875rem; }
.fit-grid ul { margin-top: 1.75rem; display: flex; flex-direction: column; gap: 1.25rem; }
.fit-grid li { display: flex; gap: 0.75rem; font-size: 0.875rem; line-height: 1.625; color: var(--muted-fg); }
.fit-grid li .ic { margin-top: 0.125rem; width: 1.25rem; height: 1.25rem; }
.fit-note { margin-top: 2rem; text-align: center; font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; }

.apply .blueprint { opacity: 0.25; }
.apply-in { position: relative; max-width: 48rem; margin-inline: auto; padding-inline: 1rem; }
@media (min-width: 640px) { .apply-in { padding-inline: 1.5rem; } }
.apply-form-wrap { margin-top: 2.5rem; }
.form { border-radius: var(--r-lg); padding: 1.5rem; }
@media (min-width: 640px) { .form { padding: 2.25rem; } }
.f-grid { display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .f-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.form label.f, .form legend { font-size: 0.875rem; line-height: 1.25rem; font-weight: 700; }
.form label.f { display: block; }
.fi {
  display: block; width: 100%; height: 3rem; margin-top: 0.5rem; border-radius: var(--r-lg);
  border: 1px solid color-mix(in oklab, var(--gold) 20%, transparent);
  background: color-mix(in oklab, var(--bg) 60%, transparent);
  padding: 0.25rem 1rem; font-size: 1rem; line-height: 1.5rem; font-weight: 400; color: var(--fg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); outline: none; transition: box-shadow 0.15s, border-color 0.15s;
}
.fi:focus-visible { border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in oklab, var(--gold) 50%, transparent); }
@media (min-width: 768px) { .fi { font-size: 0.875rem; line-height: 1.25rem; } }
textarea.fi { height: auto; min-height: 7rem; padding: 1rem; resize: vertical; }
.fi::placeholder { color: var(--muted-fg); }
.form fieldset { margin: 1.75rem 0 0; border: 0; padding: 0; min-width: 0; }
.form label.f.block7, .form .block7 { margin-top: 1.75rem; }
.opts { margin-top: 0.75rem; display: grid; gap: 0.75rem; }
@media (min-width: 640px) { .opts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.opt { display: flex; cursor: pointer; align-items: center; gap: 0.75rem; border-radius: var(--r-lg); border: 1px solid color-mix(in oklab, var(--gold) 20%, transparent); background: color-mix(in oklab, var(--bg) 40%, transparent); padding: 0.75rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 400; }
.opt input { -webkit-appearance: none; appearance: none; flex-shrink: 0; width: 1rem; height: 1rem; margin: 0; border-radius: 9999px; border: 1px solid var(--gold); background: transparent; display: grid; place-items: center; cursor: pointer; }
.opt input::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 9999px; background: var(--gold); transform: scale(0); transition: transform 0.12s; }
.opt input:checked::before { transform: scale(1); }
.opt input:focus-visible { box-shadow: 0 0 0 3px color-mix(in oklab, var(--gold) 50%, transparent); outline: none; }
.opt-note { font-weight: 400; color: var(--muted-fg); }
.f-error { margin-top: 1.25rem; font-size: 0.875rem; line-height: 1.25rem; color: var(--destructive); }
.f-error[hidden] { display: none; }
.fi[aria-invalid="true"] { border-color: var(--destructive); }
.submit {
  margin-top: 1.75rem; width: 100%; height: 3.5rem; border-radius: 9999px; background: var(--gold); color: var(--on-gold);
  font-size: 0.875rem; line-height: 1.25rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; box-shadow: var(--shadow-glow); position: relative; overflow: hidden;
  transition: background 0.2s;
}
.submit::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent); transform: translateX(-120%) skewX(-18deg); pointer-events: none; }
.submit:hover { background: color-mix(in oklab, var(--gold) 90%, transparent); }
.submit:hover::after { animation: shine-sweep 0.9s ease-out; }
.form .fine { margin-top: 1.5rem; font-size: 0.75rem; line-height: 1.625; color: var(--muted-fg); }
.success { border-radius: var(--r-lg); border: 1px solid color-mix(in oklab, var(--gold) 40%, transparent); background: color-mix(in oklab, var(--gold) 10%, transparent); padding: 2rem; text-align: center; }
.success[hidden] { display: none; }
.success .ic { margin-inline: auto; width: 2.5rem; height: 2.5rem; color: var(--gold); }
.success h3 { margin-top: 1.25rem; font-size: 1.875rem; }
.success p { margin-top: 0.75rem; color: var(--muted-fg); }
.success p.wa { margin-top: 1rem; font-size: 0.875rem; }
.success p.wa a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }

.final { position: relative; overflow: hidden; background: var(--bg); padding-block: 6rem; text-align: center; }
@media (min-width: 640px) { .final { padding-block: 8rem; } }
.final > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.2; }
.final .shade { position: absolute; inset: 0; background: color-mix(in oklab, var(--bg) 75%, transparent); }
.final-in { position: relative; max-width: 64rem; margin-inline: auto; padding-inline: 1rem; }
@media (min-width: 640px) { .final-in { padding-inline: 1.5rem; } }
.final .k { font-size: 0.75rem; line-height: 1rem; font-weight: 700; letter-spacing: 0.22em; color: var(--gold); text-transform: uppercase; }
.final h2 { margin-top: 1.25rem; font-size: 3rem; }
@media (min-width: 640px) { .final h2 { font-size: 4.5rem; } }
.final p.t { max-width: 36rem; margin: 1.5rem auto 0; color: var(--muted-fg); }
.final .btns { margin-top: 2.25rem; display: flex; flex-direction: column; justify-content: center; gap: 0.75rem; }
@media (min-width: 640px) { .final .btns { flex-direction: row; } }

.sticky-apply { position: fixed; inset-inline: 0; bottom: 0; z-index: 50; border-top: 1px solid color-mix(in oklab, var(--gold) 25%, transparent);
  background: color-mix(in oklab, var(--bg) 95%, transparent); padding: 0.75rem; -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
@media (min-width: 640px) { .sticky-apply { display: none; } }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .hero-media img, .i-hero-img { animation: none; transform: none; }
  .hero-media { transform: none; }
}