/* pages.css: the inner pages (book, testimonials, contact).
   Same tokens as the home page; Type A throughout (Inter Tight headings,
   Inter body). Loaded after scrollcraft.css. */
:root {
  --sc-canvas: #12172A;
  --sc-surface: #1A2140;
  --sc-ink: #F3EEE4;
  --sc-ink-soft: #AEB6C6;
  --sc-accent: #FAB142;
  --sc-accent-ink: #0C1D2E;
  --sc-font-display: "Inter Tight", "Inter", system-ui, -apple-system, sans-serif;
  --sc-font-text: "Inter", system-ui, -apple-system, sans-serif;
  --sc-r-sm: 4px; --sc-r-md: 6px; --sc-r-lg: 10px;
  --navy-deep: #0C1D2E;
  --green: #3E8B53;
  --paper: #F4F0E8;
  --paper-2: #EAE4D8;
  --paper-ink: #12172A;
  --paper-soft: #525C6E;
  --paper-accent: #A0640C;
  --paper-green: #2F6E42;
}
html, body { background: var(--navy-deep); }
body { color: var(--sc-ink); }
.paper {
  --sc-canvas: var(--paper); --sc-surface: var(--paper-2);
  --sc-ink: var(--paper-ink); --sc-ink-soft: var(--paper-soft);
  --sc-accent: var(--paper-accent); --sc-accent-ink: var(--paper);
  background: var(--paper); color: var(--paper-ink);
}
a { color: inherit; }
:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; }

/* ------------------------------------------------------------ type -- */
.h1, .h2, .h3 { font-family: var(--sc-font-display); font-weight: 600; margin: 0; text-wrap: balance; }
.h1 { font-size: clamp(2.6rem, 1.6rem + 4.2vw, 5rem); line-height: 1; letter-spacing: -0.035em; }
.h2 { font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3rem); line-height: 1.04; letter-spacing: -0.03em; }
.h3 { font-size: var(--sc-t-xl); line-height: 1.12; letter-spacing: -0.02em; }
.h1 em, .h2 em { font-style: normal; color: var(--sc-accent); }
.kick { margin: 0 0 var(--sc-4); font-family: var(--sc-font-text); font-size: var(--sc-t-xs); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--sc-accent); }
.paper .kick { color: var(--paper-green); }
.lede { margin: var(--sc-5) 0 0; font-size: var(--sc-t-lg); line-height: 1.5; color: var(--sc-ink-soft); max-width: 46ch; text-wrap: pretty; }
.body { color: var(--sc-ink-soft); line-height: 1.65; max-width: 62ch; text-wrap: pretty; }

/* ---------------------------------------------------------- buttons -- */
.cta { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--sc-font-text); font-weight: 600; font-size: var(--sc-t-sm);
  color: var(--sc-accent-ink); background: var(--sc-accent); padding: 0.85rem 1.3rem; border-radius: var(--sc-r-sm); text-decoration: none;
  border: 1px solid transparent; box-shadow: var(--sc-e1); white-space: nowrap; transition: transform 140ms var(--sc-ease-out), box-shadow 140ms; }
.cta:hover { transform: translateY(-1px); box-shadow: var(--sc-e2); }
.cta--ghost { background: transparent; color: var(--sc-ink); border-color: color-mix(in oklab, var(--sc-ink) 45%, transparent); box-shadow: none; }
.cta--ghost:hover { background: color-mix(in oklab, var(--sc-ink) 8%, transparent); box-shadow: none; }
.ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* ----------------------------------------------------------- header -- */
.site-head { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: color-mix(in oklab, var(--navy-deep) 92%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--sc-hairline); }
.site-head__in { display: flex; align-items: center; gap: 1rem clamp(1rem, 3vw, 2.5rem); padding: 0.9rem var(--sc-gutter); max-width: 88rem; margin: 0 auto; }
.brand { display: flex; align-items: center; gap: 0.65rem; text-decoration: none; font-family: var(--sc-font-text); font-weight: 600; font-size: var(--sc-t-sm); letter-spacing: 0.06em; color: var(--sc-ink); margin-right: auto; }
.brand img { width: 2.3rem; height: 2.3rem; }
.brand i { font-style: normal; color: var(--sc-accent); }
.nav { display: flex; gap: clamp(1rem, 2vw, 1.8rem); }
.nav a { font-family: var(--sc-font-text); font-weight: 600; font-size: var(--sc-t-sm); text-decoration: none; color: var(--sc-ink-soft); padding: 0.35rem 0; border-bottom: 2px solid transparent; transition: color 140ms, border-color 140ms; }
.nav a:hover { color: var(--sc-ink); }
.nav a[aria-current="page"] { color: var(--sc-ink); border-bottom-color: var(--sc-accent); }
@media (max-width: 760px) {
  .site-head__in { flex-wrap: wrap; padding-block: 0.7rem; }
  .brand span { display: grid; font-size: 0.7rem; line-height: 1.2; letter-spacing: 0.08em; }
}
@media (max-width: 480px) {
  .brand span { display: none; }
  .site-head .cta { padding: 0.65rem 0.95rem; }
  .nav { order: 3; width: 100%; justify-content: space-between; gap: 0.5rem; }
}

/* ------------------------------------------------------------ hero -- */
.page-hero { padding-block: clamp(3.5rem, 11vh, 7.5rem) clamp(2.5rem, 7vh, 4.5rem); position: relative; overflow: clip; }
.page-hero::before { content: ""; position: absolute; width: 60vw; height: 60vw; max-width: 760px; max-height: 760px; right: -14vw; top: -22vw; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, color-mix(in oklab, var(--sc-accent) 16%, transparent), transparent 62%); }
.page-hero > * { position: relative; }
.jump { margin-top: var(--sc-6); display: flex; flex-wrap: wrap; gap: 0.5rem; }
.jump a { font-family: var(--sc-font-text); font-size: var(--sc-t-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none;
  padding: 0.5rem 0.85rem; border-radius: 999px; border: 1px solid var(--sc-hairline-strong); color: var(--sc-ink); transition: border-color 140ms, color 140ms; }
.jump a:hover { border-color: var(--sc-accent); color: var(--sc-accent); }

.section { padding-block: clamp(3.5rem, 9vh, 6.5rem); }
.panel { background: #fff; color: var(--paper-ink); border: 1px solid color-mix(in oklab, var(--paper-ink) 12%, transparent); border-radius: var(--sc-r-lg); box-shadow: var(--sc-e2); }

/* ------------------------------------------------------------ cards -- */
.cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: clamp(0.9rem, 2vw, 1.5rem); }
.card { position: relative; height: 100%; box-sizing: border-box; display: grid; align-content: start; gap: 0.55rem; padding: clamp(1.3rem, 2.2vw, 1.9rem);
  background: linear-gradient(158deg, #1B2244, #10152A); border: 1px solid var(--sc-hairline-strong); border-radius: var(--sc-r-lg); text-decoration: none; color: var(--sc-ink);
  box-shadow: var(--sc-e1); transition: transform 180ms var(--sc-ease-out), border-color 180ms; }
a.card:hover { transform: translateY(-3px); border-color: color-mix(in oklab, var(--sc-accent) 60%, transparent); }
.card__k { font-family: var(--sc-font-text); font-size: var(--sc-t-xs); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--sc-ink-soft); }
.card__t { font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-xl); line-height: 1.12; letter-spacing: -0.02em; }
.card__d { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.55; margin: 0; }
.card__go { margin-top: 0.6rem; font-family: var(--sc-font-text); font-weight: 600; font-size: var(--sc-t-sm); color: var(--sc-accent); }
.card--lead { background: linear-gradient(158deg, color-mix(in oklab, var(--sc-accent) 22%, #1B2244), #10152A); border-color: color-mix(in oklab, var(--sc-accent) 55%, transparent); }
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.2rem 0 0; padding: 0; list-style: none; }
.chips li { font-family: var(--sc-font-text); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.3rem 0.6rem; border-radius: 999px; border: 1px solid var(--sc-hairline-strong); }

/* ----------------------------------------------------------- footer -- */
.foot { display: grid; grid-template-columns: 1fr auto; gap: 1rem 2.5rem; align-items: start; border-top: 1px solid var(--sc-hairline); padding-block: var(--sc-6); font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
.foot img { height: 1.9rem; width: auto; opacity: 0.9; display: block; margin-bottom: 0.6rem; }
.foot p { margin: 0; line-height: 1.8; }
.foot a { color: var(--sc-ink); text-decoration: none; }
.foot a:hover { color: var(--sc-accent); }
.foot__mark { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.7rem; font-family: var(--sc-font-text); font-weight: 600; font-size: var(--sc-t-sm); letter-spacing: 0.06em; color: var(--sc-ink); }
.foot .foot__mark img { width: 2.2rem; height: 2.2rem; margin: 0; opacity: 1; }
.foot__mark i { font-style: normal; color: var(--sc-accent); }
.foot__h { display: block; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sc-ink); margin-bottom: 0.4rem; }
.foot__contact { text-align: right; }
.foot__legal { grid-column: 1 / -1; padding-top: var(--sc-4); border-top: 1px solid var(--sc-hairline); opacity: 0.8; }
@media (max-width: 760px) { .foot { grid-template-columns: 1fr; } .foot__contact { text-align: left; } }

@media (prefers-reduced-motion: reduce) { .cta, .card { transition: none; } a.card:hover, .cta:hover { transform: none; } }

/* Book page: prices at a glance (V44) */
.prices { width: 100%; margin: 0.6rem 0 0; border-collapse: collapse; font-family: var(--sc-font-text); font-size: 0.92rem; font-variant-numeric: tabular-nums; }
.prices caption { text-align: left; padding-bottom: 0.5rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-accent); }
.prices th, .prices td { padding: 0.6rem 0.5rem 0.6rem 0; border-bottom: 1px solid var(--sc-hairline-strong); text-align: left; vertical-align: top; }
.prices thead th { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sc-ink-soft); }
.prices tbody th { font-weight: 600; color: var(--sc-ink); }
.prices tbody th span { display: block; font-weight: 400; font-size: 0.8rem; color: var(--sc-ink-soft); }
.prices td { white-space: nowrap; }
.prices__note { margin-top: 0.8rem; }