/* ============================================================
   Dr. Aran Castro A J — Editorial Design System
   Fraunces + Geist, cream paper, pink accent
   ============================================================ */

:root{
  --navy: #0F2A47;
  --navy-2: #08182B;
  --teal: #1B8A8A;
  --teal-2: #12706F;
  --pink: #D94B7A;
  --pink-2: #B9335F;
  --off-white: #FAF7F2;

  --paper: var(--off-white);
  --paper-2: #F1ECE2;
  --ink: var(--navy);
  --ink-2: #2A3A52;
  --muted: #6C7689;
  --rule: #0F2A4722;
  --rule-2: #0F2A4714;
  --accent: var(--pink);
  --accent-2: var(--pink-2);
  --accent-soft: #F7DCE6;
  --ok: var(--teal);
  --warn: #B8881E;
  --map-ink: #0F2A4733;

  --serif: "Fraunces", "Instrument Serif", Georgia, serif;
  --serif-it: "Instrument Serif", "Fraunces", Georgia, serif;
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, Helvetica, Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --pad: clamp(20px, 4vw, 48px);
  --maxw: 1240px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; scroll-behavior:smooth; }
body{
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01","cv11";
}
a{ color:inherit; }
img{ display:block; max-width:100%; }

/* utilities */
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); }
.mono{ font-family:var(--mono); font-weight:500; letter-spacing: 0.02em; text-transform:uppercase; font-size:11px; }
.serif{ font-family:var(--serif); }
.serif-it{ font-family:var(--serif-it); font-style:italic; }
.rule{ height:1px; background:var(--rule); border:0; }

/* contour background */
.contour-bg{
  position:absolute; inset:0; pointer-events:none; opacity:.35;
  background-image: radial-gradient(1200px 500px at 85% 25%, var(--accent-soft) 0%, transparent 60%);
  mix-blend-mode:multiply;
}
.contour-lines{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }

/* announcement */
.announce{
  background: var(--ink); color: var(--paper);
  font-family: var(--mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase;
  padding: 10px var(--pad);
  display:flex; align-items:center; gap:18px; justify-content:space-between;
  border-bottom: 1px solid #ffffff10;
}
.announce-left{ display:flex; align-items:center; gap:14px; min-width:0; }
.announce-dot{ width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px color-mix(in oklab, var(--accent) 30%, transparent); flex:none; }
.announce-text{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.announce-text strong{ color:#fff; font-weight:600; }
.announce-cta{ color:var(--paper); border-bottom:1px solid #ffffff44; padding-bottom:2px; text-decoration:none; white-space:nowrap; }
.announce-cta:hover{ border-color:#fff; }

/* nav */
.nav{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  background: color-mix(in oklab, var(--paper) 82%, transparent);
  border-bottom:1px solid var(--rule);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px var(--pad);
  max-width:var(--maxw); margin:0 auto;
  position: relative;
}
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; }
.brand-mark{
  width:34px; height:34px; border-radius:50%;
  background: var(--ink); color:var(--paper);
  font-family:var(--serif); font-weight:600; font-size:15px;
  display:grid; place-items:center; letter-spacing:0;
}
.brand-text{ display:flex; flex-direction:column; line-height:1.1; }
.brand-text .name{ font-family:var(--serif); font-weight:600; font-size:16px; }
.brand-text .sub{ font-family:var(--mono); font-size:10px; letter-spacing:.08em; color:var(--muted); text-transform:uppercase; }
.nav-links{ display:flex; gap:26px; align-items:center; list-style:none; padding:0; margin:0; }
.nav-links a{ text-decoration:none; font-size:14px; color:var(--ink-2); }
.nav-links a:hover{ color:var(--accent); }
.nav-links a.active{ color:var(--accent); }
.nav-cta{
  background: var(--accent); color:#fff !important;
  padding: 9px 16px; border-radius:999px; font-size:13px !important;
  display:inline-flex; align-items:center; gap:8px;
  transition: background .2s;
}
.nav-cta:hover{ background: var(--accent-2); }
.nav-toggle{ display:none; background:none; border:0; cursor:pointer; padding:8px; flex-direction:column; gap:5px; }
.nav-toggle span{ display:block; width:22px; height:2px; background:var(--ink); border-radius:2px; }

@media (max-width:880px){
  .nav-toggle{ display:flex; }
  .nav-links{
    position:absolute; top:100%; left:0; right:0;
    background:var(--paper); border-bottom:1px solid var(--rule);
    flex-direction:column; gap:0; padding:12px var(--pad);
    display:none;
  }
  .nav-links.open{ display:flex; }
  .nav-links li{ width:100%; padding:10px 0; border-bottom:1px solid var(--rule-2); }
  .nav-links li:last-child{ border-bottom:0; padding-top:14px; }
  .nav-cta{ justify-content:center; }
}

/* page header (sub-page hero) */
.page-hd{
  position:relative; overflow:hidden;
  padding: clamp(48px, 7vw, 96px) 0 clamp(32px, 5vw, 64px);
}
.page-hd .crumb{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted);
  margin-bottom: 24px;
}
.page-hd .crumb a{ color:var(--muted); text-decoration:none; transition: color .2s; }
.page-hd .crumb a:hover{ color:var(--accent); }
.page-hd .crumb span{ opacity:.55; }
.page-hd h1{
  font-family: var(--serif);
  font-weight: 350;
  font-size: clamp(40px, 6.5vw, 80px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
  color: var(--ink);
  font-variation-settings: "opsz" 120, "SOFT" 50;
  max-width: 22ch;
}
.page-hd h1 em{
  font-family: var(--serif-it);
  font-style: italic;
  color: var(--accent);
  font-weight: 400;
}
.page-hd .kicker{
  font-size: 18px; line-height: 1.55;
  color: var(--ink-2);
  max-width: 62ch;
  margin: 0;
}
.page-hd .hd-meta{
  display:flex; flex-wrap:wrap; gap: 10px 36px;
  margin-top: 28px; padding-top: 22px;
  border-top: 1px solid var(--rule);
  font-family: var(--mono); font-size: 11.5px; letter-spacing:.12em; text-transform:uppercase;
  color: var(--muted);
}
.page-hd .hd-meta > span{
  display:inline-flex; align-items:baseline; gap: 12px;
  position:relative;
}
.page-hd .hd-meta > span + span::before{
  content:""; position:absolute; left:-20px; top:50%; width:4px; height:4px;
  background: var(--accent); border-radius:50%; transform:translateY(-50%);
}
.page-hd .hd-meta > span b{
  font-family: var(--serif); font-weight: 500; font-style: italic;
  font-size: 19px; letter-spacing: 0; text-transform:none; color: var(--ink);
}

/* hero (homepage) */
.hero{
  position:relative; overflow:hidden;
  padding: clamp(32px, 6vw, 72px) 0 clamp(32px, 5vw, 60px);
}
.hero-inner{
  display:grid; grid-template-columns: 1.15fr .85fr; gap: clamp(24px, 5vw, 64px);
  align-items:end;
  position:relative; z-index:1;
}
@media (max-width:980px){ .hero-inner{ grid-template-columns:1fr; } }

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

.hero h1{
  font-family: var(--serif);
  font-weight: 350;
  font-size: clamp(40px, 7vw, 92px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 22px;
  color: var(--ink);
  font-variation-settings: "opsz" 120, "SOFT" 50;
}
.hero h1 em{ font-family: var(--serif-it); font-style: italic; color: var(--accent); font-weight: 400; }
.hero h1 .gloss{ display:block; font-family:var(--serif-it); font-style:italic; font-weight:300; line-height: 1.15; margin-top: 6px; }

.hero-sub{ font-size: 18px; line-height:1.55; color: var(--ink-2); max-width: 58ch; margin: 0 0 30px; }
.hero-ctas{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-bottom:34px; }

/* buttons */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--sans); font-size:14px; font-weight:500;
  padding: 13px 20px; border-radius:999px;
  text-decoration:none; border:1px solid transparent;
  transition: transform .15s, background .2s, border-color .2s, color .2s;
  cursor:pointer;
}
.btn:hover{ transform: translateY(-1px); }
.btn-primary{ background: var(--ink); color:var(--paper); }
.btn-primary:hover{ background: var(--accent); }
.btn-accent{ background: var(--accent); color:#fff; }
.btn-accent:hover{ background: var(--accent-2); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--rule); }
.btn-ghost:hover{ border-color: var(--ink); }
.btn svg{ width:14px; height:14px; }

.hero-trust{ display:flex; gap: 28px; align-items:center; flex-wrap:wrap; padding: 18px 0 0; border-top:1px solid var(--rule); }
.trust-item{ display:flex; align-items:center; gap:10px; font-size:13px; color:var(--muted); }
.trust-item b{ color:var(--ink); font-family:var(--serif); font-weight:500; font-size:15px; }

/* hero photo card (homepage) */
.hero-card{
  position:relative;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 18px;
  padding: 14px;
  display:flex; flex-direction:column; gap:14px;
  box-shadow: 0 1px 0 #ffffff30 inset, 0 30px 60px -30px #13182140;
}
.photo{
  position:relative; aspect-ratio: 4/5;
  background: linear-gradient(135deg, var(--accent-soft), var(--paper-2));
  border-radius: 12px; overflow:hidden;
  display:grid; place-items:center;
}
.photo img{ width:100%; height:100%; object-fit:cover; display:block; }

.hero-meta{ display:grid; grid-template-columns: 1fr 1fr; gap:0; border-top:1px solid var(--rule); padding-top:12px; }
.hero-meta > div{ padding: 4px 8px; }
.hero-meta > div + div{ border-left:1px solid var(--rule); }
.hero-meta .k{ font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; color:var(--muted); text-transform:uppercase; }
.hero-meta .v{ font-family:var(--serif); font-size:15px; color:var(--ink); margin-top:2px; }

.hero-affils{ display:flex; gap:18px; padding: 10px 4px 2px; flex-wrap:wrap; border-top:1px dashed var(--rule); }
.affil{ display:flex; gap:8px; align-items:center; font-size:12px; color:var(--ink-2); text-decoration:none; }
.affil .dot{ width:6px; height:6px; border-radius:50%; background:var(--accent); }
.affil b{ font-weight:500; color:var(--ink); }
.affil span{ color:var(--muted); }

/* seats strip */
.seats{
  margin-top: clamp(24px, 4vw, 40px);
  background: var(--ink); color: var(--paper);
  border-radius: 18px;
  padding: clamp(18px, 2.5vw, 26px);
  display:grid; grid-template-columns: 1.2fr 2fr auto; gap: clamp(18px, 3vw, 40px); align-items:center;
  position:relative; overflow:hidden;
}
@media (max-width: 820px){ .seats{ grid-template-columns:1fr; gap:16px; } }
.seats::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(500px 140px at 90% 0%, color-mix(in oklab, var(--accent) 30%, transparent), transparent 70%);
}
.seats-head{ position:relative; }
.seats-head .tag{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent); margin-bottom:8px;
}
.seats-head .tag::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 30%, transparent); }
.seats-head h3{ font-family:var(--serif); font-size: clamp(22px, 2.4vw, 28px); font-weight:500; margin:0; color:#fff; line-height:1.15; letter-spacing:-.01em; }
.seats-head p{ font-size:13px; color:#ffffffcc; margin: 6px 0 0; }

.seats-list{ display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; position:relative; }
@media (max-width: 620px){ .seats-list{ grid-template-columns:1fr; } }
.seat-city{ background: #ffffff0a; border:1px solid #ffffff14; border-radius: 12px; padding: 14px 14px 12px; }
.seat-city .city{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px; }
.seat-city .name{ font-family:var(--serif); font-size:17px; color:#fff; }
.seat-city .left{ font-family:var(--mono); font-size:10px; color:#ffffffaa; letter-spacing:.06em; }
.bar{ height:5px; background:#ffffff1a; border-radius:999px; overflow:hidden; }
.bar > span{ display:block; height:100%; background:var(--accent); border-radius:999px; }
.seat-city .foot{ margin-top:8px; font-family:var(--mono); font-size:10px; color:#ffffffaa; letter-spacing:.04em; display:flex; justify-content:space-between; }
.seat-city .foot .hot{ color:var(--accent); }
.seats-cta{ position:relative; }
.seats-cta .btn-accent{ padding:14px 22px; }

/* form grid (homepage reg) */
.form-section{ padding: clamp(56px, 8vw, 110px) 0; position:relative; }
.form-grid{ display:grid; grid-template-columns: 1fr 1.3fr; gap: clamp(24px, 5vw, 72px); align-items:start; }
@media (max-width: 960px){ .form-grid{ grid-template-columns:1fr; } }
.form-copy h2{ font-family:var(--serif); font-weight:400; font-size: clamp(32px, 4vw, 48px); letter-spacing:-.015em; margin: 14px 0 14px; line-height:1.05; }
.form-copy h2 em{ font-family:var(--serif-it); color:var(--accent); font-weight:500; }
.form-copy p{ color:var(--ink-2); line-height:1.55; font-size:15.5px; margin: 0 0 18px; max-width:44ch; }
.form-copy ul.benefits{ list-style:none; padding:0; margin: 22px 0; display:flex; flex-direction:column; gap:10px; }
.form-copy ul.benefits li{ display:flex; gap:12px; font-size:14px; color:var(--ink-2); }
.form-copy ul.benefits li::before{
  content:""; width:16px; height:16px; flex:none; margin-top:3px;
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center/70% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center/70% no-repeat;
  border-radius:50%;
}
.form-copy .quote{ border-left: 2px solid var(--accent); padding: 2px 0 2px 14px; margin-top: 22px; font-family:var(--serif-it); font-size:17px; line-height:1.45; color:var(--ink); }
.form-copy .quote cite{ display:block; font-style:normal; font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-top:8px; }

.form-card{
  background: #fff; border-radius: 22px;
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid var(--rule);
  box-shadow: 0 40px 80px -40px #13182130, 0 1px 0 #ffffff inset;
  position:relative;
}
.form-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
.form-head h3{ font-family:var(--serif); font-weight:500; font-size:20px; margin:0; color:var(--ink); }
.steps{ display:flex; gap:6px; }
.steps .step{ width:26px; height:4px; border-radius:999px; background:var(--rule); }
.steps .step.on{ background:var(--accent); }
.steps .step.done{ background:var(--ink); }

.field-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width: 520px){ .field-grid{ grid-template-columns:1fr; } }
.field{ display:flex; flex-direction:column; gap:6px; }
.field.full{ grid-column:1 / -1; }
.field label{ font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; color:var(--muted); text-transform:uppercase; }
.field input, .field select, .field textarea{
  font-family:var(--sans); font-size:14.5px;
  background:var(--paper); color:var(--ink);
  border:1px solid var(--rule); border-radius:10px;
  padding: 12px 14px; transition:border-color .15s, box-shadow .15s;
  width:100%;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--accent);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 20%, transparent);
}
.chip-row{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  display:inline-flex; align-items:center; gap:8px;
  background: var(--paper); border:1px solid var(--rule);
  padding: 8px 12px; border-radius:999px; font-size:13px; cursor:pointer;
  transition: all .15s;
}
.chip:hover{ border-color: var(--ink); }
.chip.active{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.chip .count{ font-family:var(--mono); font-size:10px; opacity:.7; }
.chip.active .count{ opacity:.9; color: var(--accent-soft); }
.terms{ display:flex; gap:10px; font-size:12.5px; color:var(--muted); margin-top:6px; align-items:flex-start; }
.terms input{ margin-top:2px; accent-color: var(--accent); }
.terms a{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
.form-actions{ display:flex; justify-content:space-between; align-items:center; margin-top:18px; gap:12px; flex-wrap:wrap; }
.form-actions .btn{ flex:1; justify-content:center; padding: 14px 20px; }
.reassure{ font-size:12px; color:var(--muted); display:flex; gap:8px; align-items:center; }
.reassure svg{ width:13px; height:13px; }

.step-panel{ display:none; animation: fade .22s ease both; }
.step-panel.on{ display:block; }
@keyframes fade{ from{ opacity:0; transform: translateY(6px);} to{ opacity:1; transform:none; } }
.success{ text-align:center; padding: 18px 8px; }
.success svg{ width:48px; height:48px; color: var(--ok); margin-bottom:12px; }
.success h3{ font-family:var(--serif); font-weight:500; font-size:24px; margin: 0 0 8px; }
.success p{ color: var(--muted); font-size:14px; margin: 0 0 16px; }

/* contact form (simple) */
.form{ display:flex; flex-direction:column; gap:16px; }
.form .f-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:700px){ .form .f-row{ grid-template-columns:1fr; } }
.form label{
  display:flex; flex-direction:column; gap:8px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing:.12em;
  text-transform:uppercase; color: var(--muted);
}
.form input, .form select, .form textarea{
  font-family: var(--sans); font-size: 15px; color: var(--ink);
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: 10px; padding: 14px 14px;
  transition: border-color .2s, box-shadow .2s, background .2s;
  letter-spacing: normal; text-transform:none;
}
.form textarea{ resize: vertical; min-height: 140px; line-height:1.55; }
.form input:focus, .form select:focus, .form textarea:focus{
  outline:none; border-color: var(--ink);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 22%, transparent);
  background: #fff;
}
.form input::placeholder, .form textarea::placeholder{ color: color-mix(in oklab, var(--ink) 38%, transparent); }
.form select{ appearance:none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%; background-size: 6px 6px, 6px 6px; background-repeat:no-repeat; padding-right:40px; }
.form .f-actions{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-top:6px; }

/* section base */
section.band{ padding: clamp(60px, 9vw, 120px) 0; }
.section-head{ display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:42px; flex-wrap:wrap; }
.section-head h2{
  font-family:var(--serif); font-weight:400; font-size: clamp(32px, 4.6vw, 56px);
  margin:8px 0 0; letter-spacing:-.015em; line-height:1.02; max-width: 20ch;
}
.section-head h2 em{ font-family:var(--serif-it); color:var(--accent); font-weight:500; }
.section-head .side{ max-width: 38ch; font-size:14px; color:var(--ink-2); line-height:1.55; }

/* proof band */
.proof{ background: var(--paper-2); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.proof-inner{ display:grid; grid-template-columns: 1fr 2fr; gap: clamp(24px, 5vw, 60px); padding: clamp(40px, 6vw, 72px) 0; align-items:center; }
@media (max-width:880px){ .proof-inner{ grid-template-columns:1fr; } }
.proof-rating{ display:flex; align-items:center; gap:16px; }
.proof-rating .num{ font-family:var(--serif); font-size:72px; font-weight:400; line-height:1; letter-spacing:-.02em; }
.proof-rating .stars{ color: var(--accent); font-size:14px; letter-spacing:2px; }
.proof-rating .of{ font-family:var(--mono); font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; margin-top:6px; }
.proof-quotes{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
@media (max-width: 620px){ .proof-quotes{ grid-template-columns:1fr; } }
.qcard{ background: var(--paper); border:1px solid var(--rule); border-radius: 16px; padding: 20px; }
.qcard .mark{ font-family:var(--serif); font-size:44px; line-height:.6; color:var(--accent); margin-bottom:4px; }
.qcard p{ font-size:14px; line-height:1.55; color:var(--ink-2); margin:0 0 14px; }
.qcard .who{ display:flex; justify-content:space-between; align-items:center; font-size:12px; color:var(--muted); }
.qcard .who b{ color:var(--ink); font-family:var(--serif); font-weight:500; font-size:13.5px; }

/* services */
.services{ display:grid; grid-template-columns: repeat(3, 1fr); gap:18px; }
@media (max-width: 900px){ .services{ grid-template-columns:1fr; } }
.svc{
  position:relative;
  border:1px solid var(--rule); border-radius:18px;
  padding: 24px; background: var(--paper);
  display:flex; flex-direction:column; gap:14px; min-height: 280px;
  transition: border-color .2s, transform .2s, box-shadow .2s;
  text-decoration:none; color:inherit;
}
.svc:hover{ transform: translateY(-3px); border-color: var(--ink); box-shadow: 0 30px 60px -30px #13182128; }
.svc .num{ font-family:var(--mono); font-size:10.5px; color:var(--muted); letter-spacing:.1em; }
.svc h3{ font-family:var(--serif); font-weight:500; font-size:26px; margin:0; letter-spacing:-.01em; }
.svc p{ font-size:14px; line-height:1.55; color:var(--ink-2); margin:0; }
.svc .tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; }
.svc .tag{ font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; padding:4px 9px; border:1px solid var(--rule); border-radius:999px; color:var(--muted); }
.svc .go{ position:absolute; top:20px; right:20px; width:34px; height:34px; border-radius:50%; background:var(--ink); color:var(--paper); display:grid; place-items:center; transform: rotate(-30deg); transition: transform .25s; }
.svc:hover .go{ transform: rotate(0deg); background: var(--accent); }

/* process */
.process{ display:grid; grid-template-columns: repeat(4,1fr); gap:0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }
@media (max-width: 880px){ .process{ grid-template-columns: 1fr 1fr; } }
.process .step-item{ padding: 26px 22px; border-right:1px solid var(--rule); }
.process .step-item:last-child{ border-right:0; }
@media (max-width: 880px){ .process .step-item:nth-child(2n){ border-right:0; } }
.process .k{ font-family:var(--mono); font-size:10.5px; color:var(--accent); letter-spacing:.1em; }
.process h4{ font-family:var(--serif); font-weight:500; font-size:20px; margin: 8px 0; letter-spacing:-.005em; }
.process p{ font-size:13.5px; color:var(--ink-2); line-height:1.5; margin:0; }

/* stats */
.stats{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
@media (max-width: 820px){ .stats{ grid-template-columns: 1fr 1fr; } }
.stat{ padding: 26px 22px; border-right:1px solid var(--rule); border-top:1px solid var(--rule); }
.stat:last-child{ border-right:0; }
@media (max-width: 820px){ .stat:nth-child(2n){ border-right:0; } }
.stat .n{ font-family:var(--serif); font-size: clamp(44px, 5vw, 64px); font-weight:400; line-height:1; letter-spacing:-.02em; }
.stat .n sup{ font-size:.4em; font-family:var(--mono); font-weight:500; color:var(--accent); vertical-align:super; margin-left:4px; }
.stat .lbl{ font-size:13px; color:var(--ink-2); margin-top:10px; max-width:26ch; }

/* FAQ */
.faq{ display:flex; flex-direction:column; border-top:1px solid var(--rule); }
details.faq-item{ border-bottom:1px solid var(--rule); padding: 22px 0; }
details.faq-item summary{
  list-style:none; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; gap:20px;
  font-family:var(--serif); font-size: clamp(18px, 2vw, 22px); font-weight:500;
  letter-spacing:-.005em;
}
details.faq-item summary::-webkit-details-marker{ display:none; }
details.faq-item .plus{
  width:28px; height:28px; border:1px solid var(--rule); border-radius:50%;
  display:grid; place-items:center; flex:none;
  transition: background .2s, transform .2s, color .2s;
}
details.faq-item[open] .plus{ background:var(--ink); color:var(--paper); transform: rotate(45deg); }
details.faq-item p{ margin: 12px 0 0; font-size:15px; line-height:1.6; color:var(--ink-2); max-width:72ch; }

/* closing */
.closing{
  background: var(--ink); color:var(--paper);
  border-radius: 22px;
  padding: clamp(36px, 6vw, 84px);
  margin: 0 auto;
  position:relative; overflow:hidden;
}
.closing::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(800px 300px at 90% 10%, color-mix(in oklab, var(--accent) 30%, transparent), transparent 60%),
    radial-gradient(500px 300px at 10% 110%, color-mix(in oklab, var(--accent) 25%, transparent), transparent 60%);
  pointer-events:none;
}
.closing-inner{ position:relative; display:grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items:center; }
@media (max-width: 820px){ .closing-inner{ grid-template-columns:1fr; } }
.closing h2{ font-family:var(--serif); font-weight:350; font-size: clamp(38px, 5vw, 68px); line-height:1; letter-spacing:-.02em; margin: 0 0 14px; color:#fff; }
.closing h2 em{ font-family:var(--serif-it); color: var(--accent); font-weight:400; }
.closing p{ font-size:16px; line-height:1.55; color:#ffffffcc; margin:0 0 22px; max-width:46ch; }
.closing .ctas{ display:flex; flex-wrap:wrap; gap:10px; }
.closing .btn-primary{ background:#fff; color:var(--ink); }
.closing .btn-primary:hover{ background:var(--accent); color:#fff; }
.closing .btn-ghost{ color:#fff; border-color:#ffffff44; }
.closing .btn-ghost:hover{ border-color:#fff; }
.closing-card{ background:#ffffff0a; border:1px solid #ffffff1a; padding: 22px; border-radius: 14px; font-size:14px; color:#ffffffcc; line-height:1.6; }
.closing-card .r{ display:flex; justify-content:space-between; padding: 6px 0; border-bottom: 1px dashed #ffffff22; gap:10px; }
.closing-card .r:last-child{ border-bottom:0; }
.closing-card .r b{ color:#fff; font-family:var(--serif); font-weight:500; text-align:right; }

/* contact page override: light closing-inner */
[data-page="contact"] .closing-inner{ grid-template-columns: 1.1fr 0.9fr; align-items:start; }
@media (max-width: 900px){ [data-page="contact"] .closing-inner{ grid-template-columns:1fr; } }

/* content cards: books, projects, events, toolkits, publications */
.grid-2{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
@media (max-width: 820px){ .grid-2{ grid-template-columns:1fr; } }
.grid-3{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px){ .grid-3{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px){ .grid-3{ grid-template-columns: 1fr; } }

.card{
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 18px;
  padding: 24px;
  display:flex; flex-direction:column; gap:12px;
  transition: border-color .2s, transform .2s, box-shadow .2s;
  text-decoration:none; color:inherit;
  position:relative;
}
.card:hover{ transform: translateY(-3px); border-color: var(--ink); box-shadow: 0 30px 60px -30px #13182128; }
.card-img{ aspect-ratio: 16/10; border-radius: 12px; overflow:hidden; background: var(--paper-2); margin: -24px -24px 0; }
.card-img + *{ margin-top: 4px; }
.card-img img{ width:100%; height:100%; object-fit:cover; }
.card .num{ font-family:var(--mono); font-size:10.5px; color:var(--muted); letter-spacing:.1em; text-transform:uppercase; }
.card h3{ font-family:var(--serif); font-weight:500; font-size:22px; margin:0; letter-spacing:-.01em; line-height:1.2; }
.card p{ font-size:14px; line-height:1.55; color:var(--ink-2); margin:0; }
.card-meta{ display:flex; flex-wrap:wrap; gap:6px; }
.card-meta .tag{ font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; padding:4px 9px; border:1px solid var(--rule); border-radius:999px; color:var(--muted); }

/* book card */
.book{
  display: grid; grid-template-columns: 160px 1fr; gap: 20px;
  padding: 20px; border: 1px solid var(--rule); border-radius: 18px;
  background: var(--paper);
}
@media (max-width: 620px){ .book{ grid-template-columns: 1fr; } }
.book-cover{ aspect-ratio: 2/3; border-radius: 8px; overflow:hidden; background: var(--paper-2); position: relative; }
.book-cover img{ width:100%; height:100%; object-fit:cover; }
.book-cover .badge{
  position:absolute; top:8px; right:8px;
  background: var(--accent); color:#fff;
  font-family: var(--mono); font-size: 10px; letter-spacing:.08em;
  padding: 4px 9px; border-radius: 999px;
}
.book-body h3{ font-family:var(--serif); font-weight:500; font-size:22px; margin:0 0 6px; line-height:1.2; }
.book-body .author{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color: var(--muted); margin-bottom:10px; }
.book-body p{ font-size:14px; line-height:1.55; color:var(--ink-2); margin:0 0 14px; }
.book-body .book-actions{ display:flex; gap:10px; flex-wrap:wrap; }

/* events list */
.event-row{
  display:grid; grid-template-columns: 120px 1fr auto; gap: 24px;
  padding: 24px 0; border-bottom: 1px solid var(--rule);
  align-items:center;
}
@media (max-width: 700px){ .event-row{ grid-template-columns: 1fr; gap:10px; } }
.event-date{ font-family: var(--serif); font-weight: 400; font-size: 18px; color: var(--ink); }
.event-date .year{ font-family: var(--mono); font-size: 11px; letter-spacing:.08em; color: var(--muted); text-transform:uppercase; display:block; margin-top:4px; }
.event-body h3{ font-family:var(--serif); font-weight:500; font-size:20px; margin:0 0 6px; line-height:1.25; }
.event-body p{ font-size:13.5px; line-height:1.55; color: var(--ink-2); margin:0; }
.event-body .where{ font-family: var(--mono); font-size: 11px; letter-spacing:.08em; text-transform:uppercase; color: var(--muted); margin-top:6px; }

/* WhatsApp float */
.whatsapp-float{
  position:fixed; bottom:28px; right:28px; z-index:48;
  width:54px; height:54px; border-radius:50%;
  background:#25D366; color:#fff;
  display:grid; place-items:center;
  box-shadow: 0 12px 30px -10px rgba(37,211,102,0.5);
  text-decoration:none;
  transition: transform .2s;
}
.whatsapp-float:hover{ transform: scale(1.08); }

/* scroll-to-top */
.scroll-top{
  position:fixed; bottom:92px; right:28px; z-index:47;
  width:44px; height:44px; border-radius:50%;
  background:var(--ink); color:var(--paper);
  border:0; cursor:pointer; display:none;
  place-items:center;
  box-shadow: 0 10px 24px -8px rgba(15,42,71,0.4);
  transition: background .2s;
}
.scroll-top.visible{ display:grid; }
.scroll-top:hover{ background: var(--accent); }

/* sticky mobile CTA */
.mobile-cta{
  display:none;
  position:fixed; bottom: 14px; left:14px; right:74px; z-index:40;
  background: var(--ink); color:var(--paper);
  border-radius: 999px; padding: 10px 10px 10px 18px;
  justify-content:space-between; align-items:center; gap:10px;
  box-shadow: 0 20px 40px -20px #13182180;
  text-decoration:none;
  font-size:14px;
}
.mobile-cta .btn-inline{ background:var(--accent); color:#fff; padding: 9px 16px; border-radius:999px; font-size:13px; }
@media (max-width: 720px){ .mobile-cta{ display:flex; } body{ padding-bottom:70px; } }

/* footer */
footer{ padding: 56px 0 28px; border-top:1px solid var(--rule); background: var(--paper); }
.foot-grid{ display:grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 36px; }
@media (max-width: 880px){ .foot-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px){ .foot-grid{ grid-template-columns: 1fr; } }
.foot-grid h5{ font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin: 0 0 14px; }
.foot-grid ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; font-size:14px; }
.foot-grid a{ color:var(--ink-2); text-decoration:none; }
.foot-grid a:hover{ color:var(--accent); }
.foot-bottom{ display:flex; justify-content:space-between; margin-top:40px; padding-top:22px; border-top:1px solid var(--rule); font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); flex-wrap:wrap; gap:14px; }
.foot-bottom a{ color:var(--ink-2); text-decoration:none; margin-left:14px; }
.foot-bottom a:hover{ color:var(--accent); }

/* reveal on scroll */
.js-ready [data-reveal]{ opacity:0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.js-ready [data-reveal].in{ opacity:1; transform: none; }
@media (prefers-reduced-motion: reduce){
  .js-ready [data-reveal]{ opacity:1; transform:none; transition:none; }
  *{ animation: none !important; transition: none !important; }
}

/* keyframes + ambient anims */
@keyframes fadeUp { from { opacity:0; transform: translateY(18px);} to { opacity:1; transform:none;} }
@keyframes pulse-dot { 0%,100%{ box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 55%, transparent);} 70%{ box-shadow: 0 0 0 10px color-mix(in oklab, var(--accent) 0%, transparent);} }
@keyframes sheen { 0%{ background-position: -150% 0;} 60%,100%{ background-position: 250% 0;} }
@keyframes contour-drift { 0%{ transform: translate3d(0,0,0);} 50%{ transform: translate3d(-12px, -6px, 0);} 100%{ transform: translate3d(0,0,0);} }
@keyframes grow-bar { from { transform: scaleX(0);} to { transform: scaleX(1);} }
@keyframes rule-grow { from { width:0;} to { width: 22px;} }
@keyframes glow-sweep { 0%,100% { opacity:.5;} 50%{ opacity:1;} }
@keyframes breathe { 0%,100%{ transform: scale(1);} 50%{ transform: scale(1.015);} }
@keyframes closing-shift { 0%,100%{ background-position: 90% 10%, 10% 110%;} 50%{ background-position: 60% 30%, 40% 90%;} }

.eyebrow::before{ animation: rule-grow .6s .1s both cubic-bezier(.2,.7,.2,1); }
.contour-lines{ animation: contour-drift 18s ease-in-out infinite; }
.announce-dot{ animation: pulse-dot 2.4s ease-out infinite; }
.bar > span{ transform-origin: left center; transform: scaleX(0); }
[data-reveal].in .bar > span, .seats [data-reveal].in .bar > span{ animation: grow-bar 1.1s .2s both cubic-bezier(.2,.7,.2,1); }

.btn-accent, .btn-primary{ position:relative; overflow:hidden; isolation:isolate; }
.btn-accent::after, .btn-primary::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background: linear-gradient(100deg, transparent 35%, #ffffff35 50%, transparent 65%);
  background-size: 250% 100%; background-position: -150% 0;
  animation: sheen 4.2s ease-in-out 1.2s infinite;
  pointer-events:none;
}

details.faq-item p{ max-height:0; overflow:hidden; opacity:0; transition: max-height .45s ease, opacity .35s ease, margin-top .3s ease; margin-top:0 !important; }
details.faq-item[open] p{ max-height: 620px; opacity:1; margin-top:12px !important; }
details.faq-item .plus{ transition: background .3s, transform .35s cubic-bezier(.2,.7,.2,1), color .3s; }

.stat .n{ transition: color .3s; }
.stat:hover .n{ color: var(--accent); }
.seats::before{ animation: glow-sweep 5.5s ease-in-out infinite; }
.hero-card .photo img{ animation: breathe 7s ease-in-out infinite; transform-origin:center; }

.chip{ transition: all .2s cubic-bezier(.2,.7,.2,1); }
.chip:active{ transform: scale(.96); }
.closing::before{ background-size: 100% 100%, 100% 100%; animation: closing-shift 12s ease-in-out infinite; }

.nav-links > li > a:not(.nav-cta){ position:relative; }
.nav-links > li > a:not(.nav-cta)::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:1px; background: var(--accent);
  transform: scaleX(0); transform-origin: right center; transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.nav-links > li > a:not(.nav-cta):hover::after, .nav-links > li > a.active::after{ transform: scaleX(1); transform-origin: left center; }
@media (max-width:880px){ .nav-links > li > a:not(.nav-cta)::after{ display:none; } }