/* ============================================================
   FNC TOKENS — blueprint §05 slots filled with the FNC brand
   Mirror these in Elementor Site Settings as Global Colors/Fonts
   (build step 4); CSS custom properties keep everything synced.
   ============================================================ */

:root{
  /* --- 05.1 Color roles (10 slots) --- */
  --c-surface:        #FCFAF4;  /* 1 Surface/Base (ivory) */
  --c-surface-alt:    #F6F1E7;  /* 2 Surface/Alt (parchment) */
  --c-ink:            #14212D;  /* 3 Ink/Dark surface */
  --c-ink-deep:       #0C161F;
  --c-heading:        #14212D;  /* 4 Text/Heading */
  --c-body:           #22303C;  /* 5 Text/Body ramp */
  --c-body-2:         #5F6A73;
  --c-body-3:         #8A949C;
  --c-accent:         #B8882A;  /* 6 Accent/Interactive (gold) */
  --g-accent:         linear-gradient(120deg,#B8882A,#D4A94E); /* 7 signature gradient — CTAs only */
  --c-muted:          #C9C2B4;  /* 8 Muted support */
  --hairline:         rgba(20,33,45,.12);
  --hairline-d:       rgba(246,241,231,.18); /* 30%-white on dark */
  /* 9 Category accent set — one hue per service category */
  --cat-cancer:       #3C5878;  /* steel blue  */
  --cat-autism:       #2E5E5A;  /* teal        */
  --cat-stem:         #4A3550;  /* plum        */
  --cat-parkinsons:   #9C5637;  /* rust        */
  --cat-longevity:    #55603A;  /* olive       */
  /* 10 Overlay grammar */
  --ov-fade:          linear-gradient(180deg,transparent 30%,rgba(12,22,31,.82) 100%);
  --ov-menu:          rgba(12,22,31,.8);
  --ov-frost:         rgba(246,241,231,.72);

  /* --- Fluid sizing: --unit ≈ 1px @1920, capped above 2560 (blueprint §01) --- */
  --unit: clamp(0.6px, 0.052vw, 1.333px);
  --wrap-max: 2560px;
  --gutter: 10vw;             /* side gutters desktop */
  --sec-pad: 8.333vw;         /* section vertical rhythm */

  /* --- Type scale @1920 in units (§05 Typography) --- */
  --font-display: 'Cormorant Garamond', Garamond, Georgia, serif;
  --font-body:    'Lato', 'Segoe UI', system-ui, sans-serif;
  --fs-display:   calc(94  * var(--unit));
  --fs-h2:        calc(60  * var(--unit));
  --fs-h3:        calc(40  * var(--unit));
  --fs-card:      calc(22  * var(--unit));
  --fs-body:      calc(18  * var(--unit));
  --fs-eyebrow:   calc(13  * var(--unit));

  /* --- Shape (§05) --- */
  --r-feature: calc(28 * var(--unit));
  --r-card:    calc(20 * var(--unit));
  --r-field:   calc(16 * var(--unit));
  --r-pill:    999px;

  /* --- Motion --- */
  --ease: cubic-bezier(.5,.1,.15,1);
  --t-hover: .6s;
}
@media (max-width:1024px){ :root{ --gutter:5vw; } }

/* Base */
html{ scroll-behavior:smooth; }
body.fnc{
  background:var(--c-surface); color:var(--c-body);
  font-family:var(--font-body); font-size:var(--fs-body); line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.fnc h1,.fnc h2,.fnc h3,.fnc h4{
  font-family:var(--font-display); font-weight:500; color:var(--c-heading);
  line-height:.98; letter-spacing:-0.01em; text-wrap:balance; margin:0;
}
.fnc h1{ font-size:var(--fs-display); }
.fnc h2{ font-size:var(--fs-h2); }
.fnc h3{ font-size:var(--fs-h3); }

/* Wrapper + rhythm */
.fnc-wrap{ max-width:var(--wrap-max); margin-inline:auto; padding-inline:var(--gutter); }
.fnc-sec{ padding-block:var(--sec-pad); position:relative; }
.fnc-sec--alt{ background:var(--c-surface-alt); border-top:1px solid var(--hairline); }
.fnc-sec--dark{ background:linear-gradient(180deg,#1A2A3A,var(--c-ink-deep)); color:var(--c-surface-alt); }
.fnc-sec--dark h1,.fnc-sec--dark h2,.fnc-sec--dark h3{ color:var(--c-surface-alt); }

/* Eyebrow */
.fnc-eyebrow{
  font:700 var(--fs-eyebrow)/1 var(--font-body);
  letter-spacing:.28em; text-transform:uppercase; color:var(--c-accent);
  margin:0 0 calc(16*var(--unit));
}

/* --- Buttons (§05: three variants) --- */
.fnc-btn{
  display:inline-flex; align-items:center; gap:.6em;
  font:700 13px/1 var(--font-body); letter-spacing:.08em; text-transform:uppercase;
  border-radius:var(--r-pill); padding:calc(17*var(--unit)) calc(30*var(--unit));
  cursor:pointer; border:0; transition:all var(--t-hover) var(--ease); text-decoration:none;
}
.fnc-btn--solid{ background:var(--g-accent); color:var(--c-ink-deep); }
.fnc-btn--solid:hover{ filter:brightness(1.07); }
.fnc-btn--ink{ background:var(--c-ink); color:var(--c-surface-alt); }
.fnc-btn--line{
  color:var(--c-ink); background:
    linear-gradient(var(--c-surface),var(--c-surface)) padding-box,
    linear-gradient(120deg,#B8882A,#2E5E5A) border-box;
  border:1px solid transparent;
}
.fnc-btn--glass{
  background:rgba(252,250,244,.14); color:#FCFAF4;
  border:1px solid rgba(252,250,244,.45);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.fnc-btn--glass:hover{ background:rgba(252,250,244,.24); }

/* Hairline + glass helpers */
.fnc-hairline{ border-color:var(--hairline)!important; }
.fnc-glass{
  background:rgba(252,250,244,.08); border:1px solid var(--hairline-d);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  border-radius:var(--r-card);
}

/* Reduced motion (blueprint step 23 — the original has none) */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .fnc *{ animation:none!important; transition-duration:.01ms!important; }
}