/* ==========================================================================
   Bagnell Brain Center — ADHD landing page (Pinecrest)
   style.css: tokens, reset, type, buttons, shared components, motion.
   Section layouts live in sections.css.

   Every size here is the 1600px Figma frame's own number, so the CSS can be
   checked against the design directly. Between 1200px and 1600px the page is
   that frame scaled with CSS zoom (see .page), so nothing re-wraps.
   ========================================================================== */

/* ---- Fonts: self-hosted (latin), so the page never falls back to Georgia /
   Segoe UI when Google Fonts is blocked or slow. Inter, Manrope and Playfair
   are variable fonts: one file covers every weight used. ------------------ */
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('/assets/fonts/playfair-display.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/poppins-400.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/poppins-500.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/poppins-600.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/assets/fonts/inter.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('/assets/fonts/manrope.woff2') format('woff2'); }

:root {
  --ink:       #323232;   /* running text and most headings */
  --navy:       #0a192a;   /* FAQ questions, names, city */
  --teal-deep:  #183c40;   /* approach heading, step numbers, slider arrows */
  --teal:       #264d5e;   /* labels, hours, notes, directions */
  --slate:      #6e8185;   /* "since 1989." */
  --bio:        #3b5e6f;   /* team bios */
  --lavender:   #f4f1fa;   /* cards and the plan band */
  --line:       #e9e9e9;
  --white:      #fff;

  --grad-btn:   linear-gradient(90deg, #316991 0%, #0e81b0 46%, #56bee4 100%);
  --grad-icon:  linear-gradient(180deg, #7ba3d7 0%, #c17ac6 100%);
  --grad-role:  linear-gradient(180deg, #8b9ad2 0%, #b582c8 100%);

  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans:  'Poppins', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --inter: 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --manrope: 'Manrope', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;   /* the self-pay note */

  --container: 1476px;
  --gutter: 62px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- Reset ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 24px;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg, video, iframe { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
:focus-visible { outline: 2px solid #0e81b0; outline-offset: 3px; }

/* Desktop below the design width: the whole page is the 1600 frame scaled
   down, so columns and line breaks stay exactly the Figma's. The head script
   sets --z precisely (viewport / 1600); these steps cover a page without JS. */
.page { zoom: var(--z, 1); }
@media (min-width: 1200px) and (max-width: 1279px) { :root { --z: 0.75; } }
@media (min-width: 1280px) and (max-width: 1365px) { :root { --z: 0.8; } }
@media (min-width: 1366px) and (max-width: 1439px) { :root { --z: 0.853; } }
@media (min-width: 1440px) and (max-width: 1535px) { :root { --z: 0.9; } }
@media (min-width: 1536px) and (max-width: 1599px) { :root { --z: 0.96; } }

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* section heading used across the page */
.h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 50px;
  line-height: 54px;
  letter-spacing: -0.031em;   /* the Figma tracks every Playfair heading in tight */
  color: var(--ink);
}

/* anchor targets clear the top of the viewport a little */
[id] { scroll-margin-top: 24px; }

/* ---- Buttons ---------------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 56px;
  padding: 0 32px;
  border-radius: 9px;
  background: var(--grad-btn);
  background-size: 140% 100%;
  background-position: 0 0;
  color: var(--white);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 9px 20px rgba(28, 64, 92, 0.18);
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), background-position 0.6s var(--ease-out);
}
.btn__arrow {
  width: 16px; height: 16px; flex: none;
  padding: 2px;
  transition: transform 0.35s var(--ease-out);
}
/* a sheen sweeps across on hover */
.btn::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.7s var(--ease-out);
  z-index: -1;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 15px 28px rgba(28, 64, 92, 0.26); background-position: 100% 0; }
.btn:hover::after { transform: translateX(120%); }
.btn:hover .btn__arrow { transform: translateX(4px); }
.btn:active { transform: translateY(0); }

/* phone link: gradient handset disc + number */
.call {
  display: inline-flex;
  align-items: center;
  gap: 17px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 24.4px;
  letter-spacing: -0.06em;
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
}
.call__icon {
  width: 57px; height: 58px; flex: none;
  transition: transform 0.4s var(--ease-out);
}
.call:hover .call__icon { transform: rotate(-12deg) scale(1.06); }
.call:hover .call__num { color: #0e81b0; }
.call__num { transition: color 0.25s; }

.actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 38px;
}

/* ---- Consultation form card (used twice) --------------------------------- */
.form-card {
  position: relative;
  width: 100%;
  max-width: 588px;
  padding: 51.7px 40px 51px;
  border-radius: 27px;
  isolation: isolate;
}
/* The Figma export carries the card and its drop shadow together; the
   shadow reaches 40px out at the sides, 24px above and 56px below. */
.form-card::before {
  content: '';
  position: absolute;
  top: -24px; left: -40px; right: -40px; bottom: -56px;
  background: url('/assets/images/form-card-bg.webp') center / 100% 100% no-repeat;
  z-index: -1;
  pointer-events: none;
}
.form-card__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 29px;
  line-height: 37.8px;
  text-align: center;
  color: var(--ink);
}
.form-card__sub {
  margin-top: 9.3px;
  font-size: 13.97px;
  line-height: 21px;
  text-align: center;
  color: var(--ink);
}
.form-card__fields {
  display: grid;
  gap: 17.2px;
  margin-top: 23.3px;
}
.field { position: relative; display: block; }
.field input,
.field select,
.field textarea {
  display: block;
  width: 100%;
  height: 47.8px;
  padding: 0 16.7px;
  border: 1px solid #e3eaf1;
  border-radius: 6.7px;
  background: var(--white);
  font-family: var(--sans);
  font-size: 13.53px;
  color: var(--ink);
  outline: none;
  transition: border-color 0.25s, box-shadow 0.25s;
  -webkit-appearance: none;
  appearance: none;
}
.field textarea { height: 173.3px; padding: 11px 44px 14px 16.7px; resize: none; line-height: 21px; }
.field select { padding-right: 44px; cursor: pointer; }
.field select:invalid { color: #727f82; }
.field select option { color: var(--ink); }
.field--select::after,
.field--area::after {
  content: '';
  position: absolute;
  right: 14.4px; top: 50%;
  width: 15.6px; height: 15.6px;
  margin-top: -7.8px;
  background: url('/assets/icons/chevron-down.svg') center / contain no-repeat;
  pointer-events: none;
}
.field--area::after { top: 11px; margin-top: 0; }
.field input::placeholder,
.field textarea::placeholder { color: #727f82; opacity: 1; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: #0e81b0;
  box-shadow: 0 0 0 3px rgba(14, 129, 176, 0.15);
}
.form-card__submit {
  display: flex;
  justify-content: center;
  margin-top: 26.7px;
}
.form-card__submit .btn { height: 55.6px; padding: 0 33.3px; }
.form-status {
  margin-top: 13px;
  font-size: 13.97px;
  line-height: 20px;
  text-align: center;
  min-height: 0;
}
.form-status:empty { display: none; }
.form-status.is-error { color: #b42318; }
.form-status.is-ok { color: #157347; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- Cursor ring (fine pointers only; built by main.js) ----------------- */
.cursor-ring {
  position: fixed;
  top: 0; left: 0;
  width: 34px; height: 34px;
  border: 1.5px solid rgba(14, 129, 176, 0.7);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.3s, width 0.3s var(--ease-out), height 0.3s var(--ease-out),
              border-radius 0.3s var(--ease-out), border-color 0.3s, background-color 0.3s;
  will-change: transform;
}
.cursor-ring.is-awake { opacity: 1; }
.cursor-ring.is-hot { width: 52px; height: 52px; border-color: rgba(193, 122, 198, 0.8); background: rgba(193, 122, 198, 0.08); }
.cursor-ring.is-magnet { border-radius: 12px; border-color: rgba(86, 190, 228, 0.9); }
.cursor-ring.is-down { background: rgba(14, 129, 176, 0.12); }
.cursor-pop {
  position: fixed; top: 0; left: 0;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1.5px solid rgba(193, 122, 198, 0.6);
  pointer-events: none;
  z-index: 9998;
  animation: cursor-pop 0.5s var(--ease-out) forwards;
}
@keyframes cursor-pop { to { opacity: 0; } }

/* ---- Scroll reveal (classes added by main.js) ------------------------------ */
.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---- Responsive tokens ----------------------------------------------------- */
@media (max-width: 1199px) { :root { --gutter: 40px; } }
@media (max-width: 767px)  { :root { --gutter: 20px; } }
@media (max-width: 380px)  { :root { --gutter: 16px; } }

@media (max-width: 1199px) {
  body { font-size: 15px; line-height: 23px; }
  .h2 { font-size: 42px; line-height: 48px; }
}
@media (max-width: 767px) {
  body { font-size: 14.5px; line-height: 22px; }
  .h2 { font-size: 32px; line-height: 39px; }
  .btn { height: 50px; padding: 0 24px; font-size: 14.5px; }
  .call { font-size: 19px; }
  .call__icon { width: 50px; height: 51px; }
  .form-card { padding: 34px 20px 36px; }
  .form-card::before { left: -24px; right: -24px; }
  .form-card__title { font-size: 24px; line-height: 31px; }
  .field input, .field select, .field textarea { font-size: 14px; }
}