/* ============================================================
   Brie Wieselman — site design system
   Direction A · Apothecary Editorial + Reverse Age Method nod
   ------------------------------------------------------------
   ACCENT SWAP: the brand-nod accent is one variable, --accent.
   Persimmon #d4570f = the RAM tie-in (default).
   To revert to the quieter camel, set --accent:#a8804e and
   --accent-deep:#7d5d34 below. Nothing else needs to change.
   ============================================================ */

:root {
  --bg:        #faf8f3;   /* ivory base            */
  --bg-deep:   #efe7db;   /* RAM "Muted" section bg */
  --ink:       #16110d;
  --ink-2:     #3a2f24;
  --muted:     #857764;
  --rule:      rgba(22,17,13,0.16);
  --rule-soft: rgba(22,17,13,0.08);
  --accent:    #d4570f;   /* RAM Persimmon  — the nod */
  --accent-deep:#b34509;
  --clay:      #c8a37a;   /* warm tan, used on dark sections */
  --paper:     #fffdf6;
  --black:     #0e0a07;

  --serif: "Newsreader", "Source Serif 4", Georgia, serif;
  --sans:  "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  --pad: clamp(20px, 5vw, 64px);   /* horizontal page gutter */
  --maxw: 1360px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
:where(section[id], [id="book"], [id="inquire"], [id="presskit"], [id="insights"], [id="begin"]) { scroll-margin-top: 88px; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

/* ---------- layout helpers ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
.section { padding-top: clamp(64px, 9vw, 120px); padding-bottom: clamp(64px, 9vw, 120px); }
.section--tight { padding-top: clamp(44px, 6vw, 72px); padding-bottom: clamp(44px, 6vw, 72px); }
.section--deep { background: var(--bg-deep); border-top: 1px solid var(--rule); }
.section--ruled { border-top: 1px solid var(--rule); }
.section--dark { background: var(--ink); color: var(--paper); }
.section--black { background: var(--black); color: var(--paper); }

/* ---------- type ---------- */
.eyebrow {
  font-family: var(--mono); font-size: clamp(10px, 1vw, 11px);
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); margin: 0;
}
.eyebrow--light { color: rgba(250,246,238,0.66); }
.serif { font-family: var(--serif); font-weight: 400; }
.h-hero { font-family: var(--serif); font-weight: 400; font-size: clamp(2.9rem, 7vw, 6.3rem); line-height: 0.98; letter-spacing: -0.03em; margin: 0; text-wrap: balance; }
.h-1 { font-family: var(--serif); font-weight: 400; font-size: clamp(2.6rem, 6vw, 5.4rem); line-height: 0.98; letter-spacing: -0.03em; margin: 0; text-wrap: balance; }
.h-2 { font-family: var(--serif); font-weight: 400; font-size: clamp(2.1rem, 4.6vw, 3.6rem); line-height: 1.02; letter-spacing: -0.025em; margin: 0; text-wrap: balance; }
.h-3 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.45rem, 2.6vw, 2rem); line-height: 1.08; letter-spacing: -0.015em; margin: 0; }
.h-4 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.25rem, 1.9vw, 1.5rem); line-height: 1.12; letter-spacing: -0.01em; margin: 0; }
.accent { color: var(--accent); font-style: italic; }
.section--dark .accent, .section--black .accent { color: var(--clay); }
.lede { font-size: clamp(1.05rem, 1.5vw, 1.28rem); line-height: 1.55; color: var(--ink-2); margin: 0; }
.body { font-size: 1rem; line-height: 1.62; color: var(--ink-2); margin: 0; }
.label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin: 0; }
.label--accent { color: var(--accent); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: 14px; font-weight: 500; padding: 14px 24px; border-radius: 999px; text-decoration: none; border: 1px solid transparent; transition: transform .15s ease, background .2s ease, color .2s ease; white-space: nowrap; }
.btn:hover { transform: translateY(-1px); }
.btn--solid { background: var(--ink); color: var(--paper); }
.btn--solid:hover { background: var(--accent); }
.btn--outline { border-color: var(--ink); color: var(--ink); }
.btn--outline:hover { background: var(--ink); color: var(--paper); }
.btn--light { background: var(--paper); color: var(--ink); }
.btn--ghost-light { border-color: rgba(250,246,238,0.4); color: var(--paper); }
.btn--ghost-light:hover { background: rgba(250,246,238,0.1); }
.btn--link { text-decoration: underline; text-underline-offset: 4px; padding: 14px 4px; }

/* ---------- header / nav ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(250,248,243,0.86); backdrop-filter: blur(10px); border-bottom: 1px solid var(--rule); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 16px; padding-bottom: 16px; }
.brand { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 7px; text-decoration: none; flex-shrink: 0; line-height: 1; }
.brand img { height: clamp(46px, 5.5vw, 60px); width: auto; }
.brand__tag { font-family: var(--mono); font-size: clamp(8px, 0.9vw, 9.5px); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.nav-links { display: flex; align-items: center; gap: clamp(16px, 2vw, 34px); }
.nav-links a:not(.btn) { font-family: var(--sans); font-size: 15.5px; font-weight: 500; color: var(--ink); text-decoration: none; white-space: nowrap; }
.nav-links a:not(.btn):hover { color: var(--accent); }
.nav-links a.is-current { color: var(--ink); border-bottom: 1.5px solid var(--accent); padding-bottom: 2px; }
.nav-toggle { display: none; background: none; border: 0; padding: 8px; cursor: pointer; margin-left: 8px; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--ink); margin: 5px 0; transition: .2s; }

/* ---------- footer ---------- */
.site-footer { background: var(--black); color: var(--paper); padding-top: clamp(56px, 8vw, 88px); padding-bottom: 36px; }
.footer-grid { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: clamp(28px, 4vw, 48px); margin-bottom: clamp(48px, 7vw, 88px); }
.footer-brand .brand-lockup { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.footer-brand .brand-lockup img { height: 40px; width: auto; filter: brightness(0) invert(1); }
.footer-tag { font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--clay); }
.footer-blurb { font-size: 13.5px; line-height: 1.55; color: rgba(250,246,238,0.7); margin: 20px 0 0; max-width: 320px; }
.social-row { display: flex; gap: 18px; align-items: center; margin-top: 24px; }
.social-row a { color: rgba(250,246,238,0.6); display: inline-flex; transition: color .15s ease, transform .15s ease; }
.social-row a:hover { color: var(--accent); transform: translateY(-2px); }
.social-row svg { width: 19px; height: 19px; display: block; fill: currentColor; }
.footer-col h4 { font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--clay); margin: 0 0 18px; font-weight: 400; }
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; }
.footer-col a { font-size: 13.5px; color: rgba(250,246,238,0.82); text-decoration: none; }
.footer-col a:hover { color: var(--paper); }
.footer-base { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; padding-top: 28px; border-top: 1px solid rgba(250,246,238,0.14); font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(250,246,238,0.5); }

/* ---------- photo slots ---------- */
.photo { position: relative; overflow: hidden; border-radius: 4px; background: var(--bg-deep); }
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo--placeholder { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 220px; background: linear-gradient(135deg, var(--bg-deep), #e3d8c5); }
.photo--placeholder span { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); padding: 16px; }
.photo--dark { background: #241b13; }
/* App screenshot in a phone frame (RAM product imagery) */
.photo--phone { display: flex; align-items: flex-end; justify-content: center; margin: 0; }
.phone-mock { width: min(72%, 290px); border: 8px solid #100b08; border-radius: 36px; overflow: hidden; box-shadow: 0 30px 70px rgba(0,0,0,0.5); background: #100b08; position: relative; }
.phone-mock img { width: 100%; display: block; border-radius: 28px; }
.phone-mock video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 28px; display: block; }
.photo-caption { position: absolute; left: 16px; right: 16px; bottom: 14px; display: flex; justify-content: space-between; gap: 12px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: #fff; mix-blend-mode: difference; }

/* ---------- cards / grids ---------- */
.grid { display: grid; gap: clamp(18px, 2.2vw, 24px); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.card { background: var(--paper); border: 1px solid var(--rule); border-radius: 6px; padding: clamp(22px, 2.5vw, 32px); }
.card--deep { background: var(--bg-deep); }
.split { display: grid; gap: clamp(36px, 5vw, 80px); align-items: start; }
.split--hero { grid-template-columns: 1.25fr 1fr; align-items: center; }
.split--7030 { grid-template-columns: 1fr 1.6fr; }
.split--3070 { grid-template-columns: 1.6fr 1fr; }
.split--even { grid-template-columns: 1fr 1fr; }

/* numbered / list rows */
.num { font-family: var(--serif); font-style: italic; color: var(--accent); line-height: 1; letter-spacing: -0.02em; font-size: clamp(2.4rem, 4vw, 3.5rem); }
.rows { border-top: 1px solid var(--ink); }
.row { border-bottom: 1px solid var(--rule); }
/* Speaking — "past stages" index: clean top-aligned rhythm */
.row--stage { align-items: start !important; }
.row--stage > .label { padding-top: 6px; font-size: 11px; line-height: 1.4; }
.row--stage > .label--accent { padding-top: 6px; font-size: 12px; }
.row--stage > .h-4 { font-size: 1.32rem; line-height: 1.24; letter-spacing: -0.01em; }
.row--stage > .body { padding-top: 3px; line-height: 1.52; }
.stat-num { font-family: var(--serif); font-size: clamp(1.6rem, 2.4vw, 1.9rem); line-height: 1; letter-spacing: -0.02em; color: var(--ink); }
.stat-label { font-size: 13.5px; color: var(--ink-2); margin-top: 8px; line-height: 1.45; }

/* ---------- form fields ---------- */
.field { display: block; }
.field > span { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.field input, .field select, .field textarea { width: 100%; font-family: var(--sans); font-size: 15px; color: var(--ink); background: var(--paper); border: 1px solid var(--rule); border-radius: 6px; padding: 13px 16px; }
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); }

/* ---------- Flodesk embed overrides ----------
   Scoped to the inline newsletter form so it inherits the site's type + colors.
   (Flodesk injects into the light DOM; stylesheet !important beats its inline
   styles. If Flodesk ever switches a form to shadow DOM, style it in Flodesk.) */
#fd-form-6a18b0cccff3ddaf614885c9 { max-width: 540px; margin: 0 auto; }
#fd-form-6a18b0cccff3ddaf614885c9 input,
#fd-form-6a18b0cccff3ddaf614885c9 input[type="email"],
#fd-form-6a18b0cccff3ddaf614885c9 input[type="text"] {
  font-family: var(--sans) !important;
  font-size: 15px !important;
  color: var(--ink) !important;
  background: var(--paper) !important;
  border: 1px solid var(--rule) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}
#fd-form-6a18b0cccff3ddaf614885c9 input:focus { border-color: var(--accent) !important; outline: none !important; }
#fd-form-6a18b0cccff3ddaf614885c9 button,
#fd-form-6a18b0cccff3ddaf614885c9 [type="submit"] {
  font-family: var(--sans) !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  color: var(--paper) !important;
  background: var(--ink) !important;
  border: 0 !important;
  border-radius: 999px !important;
  transition: background .2s ease !important;
}
#fd-form-6a18b0cccff3ddaf614885c9 button:hover,
#fd-form-6a18b0cccff3ddaf614885c9 [type="submit"]:hover { background: var(--accent) !important; }
#fd-form-6a18b0cccff3ddaf614885c9 h1,
#fd-form-6a18b0cccff3ddaf614885c9 h2,
#fd-form-6a18b0cccff3ddaf614885c9 h3 { font-family: var(--serif) !important; font-weight: 400 !important; color: var(--ink) !important; }
#fd-form-6a18b0cccff3ddaf614885c9 p,
#fd-form-6a18b0cccff3ddaf614885c9 label,
#fd-form-6a18b0cccff3ddaf614885c9 span { font-family: var(--sans) !important; color: var(--ink-2) !important; }
/* Hide the unconfigured "What are you interested in hearing about?" preference block */
#fd-form-6a18b0cccff3ddaf614885c9 .ff-6a18b0cccff3ddaf614885c9__preference { display: none !important; }

/* ---------- Practice Better booking widget ---------- */
.better-inline-booking-widget { position: relative; overflow: hidden; }
.better-inline-booking-widget iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  /* backdrop-filter on the header traps fixed children in its box — drop it on
     mobile so the nav panel can fill the viewport. Solid bg keeps the bar legible. */
  .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: #faf8f3; z-index: 60; }
  .nav-toggle { display: block; position: relative; z-index: 62; }
  .nav-links { position: fixed; top: 0; right: 0; bottom: 0; left: auto; width: min(320px, 84vw); flex-direction: column; align-items: flex-start; gap: 4px; background: #faf8f3; z-index: 61; border-left: 1px solid var(--rule); padding: 96px 32px 32px; transform: translateX(100%); -webkit-transform: translateX(100%); transition: transform .26s cubic-bezier(.2,.7,.3,1); box-shadow: -20px 0 60px rgba(0,0,0,0.18); overflow-y: auto; }
  body.nav-open-lock::before { content: ""; position: fixed; inset: 0; background: rgba(14,10,7,0.45); z-index: 55; }
  .nav-links.open { transform: translateX(0); -webkit-transform: translateX(0); }
  .nav-links a:not(.btn) { font-size: 18px; padding: 12px 0; font-family: var(--serif); }
  .nav-links a.is-current { border-bottom: 0; color: var(--accent); }
  .nav-links .btn { margin-top: 16px; }
  .nav-open-lock { overflow: hidden; }
  .split--hero, .split--7030, .split--3070, .split--even { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .hero-stats { max-width: none !important; }
}
@media (max-width: 600px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-base { flex-direction: column; align-items: flex-start; gap: 10px; }
  .brand__tag { display: none; }
  .brand img { height: 46px; }
}

/* rows that use multi-column internal layout — let pages set via inline grid; collapse here */
@media (max-width: 720px) {
  .row--offer { grid-template-columns: 1fr !important; gap: 16px !important; }
  .row--stage { grid-template-columns: 1fr !important; gap: 6px !important; padding: 18px 0 !important; }
  .row--timeline { grid-template-columns: 1fr !important; gap: 8px !important; }
}