/* ═══════════════════════════════════════════════════════════
   base.css — Global styles used on EVERY page.
   Resets, variables, typography, nav, buttons, footer,
   animation utilities, generic section layouts.
   ═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINT STANDARD  (source of truth, 2026-07-07)
   CSS variables cannot be used inside @media, so these are the
   fixed pixel values. Use THESE for any new responsive rule:

     phone    : max-width: 767px      (767 and below  = phone)
     tablet   : the 768px..899px band (min-width:768 / max-width:899)
     desktop  : min-width: 900px      (900 and up     = desktop)

   Quick guide:
     - phone-only collapse   ->  @media (max-width: 767px)
     - "tablet & down"       ->  @media (max-width: 899px)
     - "tablet & up"         ->  @media (min-width: 768px)
     - desktop-only          ->  @media (min-width: 900px)

   Known intentional exceptions (do NOT "normalize" these):
     - A few grid sections use max-width:768 (1px looser) on purpose,
       so a 768px tablet still collapses instead of cramming columns.
       That 1px is fine, leave it.
     - Component one-offs (380/440/480/520/560/600/680/960/980/1024/
       1099/1100 etc.) are tuned for a single element, not page-layout
       lines. Do not snap them to this standard.
     - A handful of mid-values (820/840/860/861/769) are real per-section
       layout choices; changing them shifts how tablets look, so only
       touch them one at a time with a browser check.

   Class-name prefix legend: _dev/docs/css-naming-legend.md
   ═══════════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#FFFFFF;--surface:#FFFFFF;--surface2:#FFFFFF;
  --magenta:#CE00B8;
  --accent:#CE00B8;
  --btn-gradient:linear-gradient(120deg,#CE00B8 0%,#7B2FBE 100%);   /* magenta to purple brand gradient */
  --grad-text:linear-gradient(110deg,#7B2FBE 0%,#CE00B8 50%,#F06FD6 100%);   /* visible brand gradient for accent WORDS (Apply, RESULTS): purple to magenta to pink */
  /* Two-part CTA (ink label + iridescent arrow chip, swapping on hover).
     --btn-silk recreates the technology section's silk gradient as a sharp
     CSS gradient (no image, crisp at button scale). */
  --btn-silk-ink:#241F2E;                                   /* dark text/arrow on the pale silk */
  /* Silk gradient for the two-part CTA (and the practitioners flag ticker + silk
     bands that reuse this token). WARMED to the brand magenta family 2026-06-25
     (Eddie): the old version leaned cool blue-lavender and felt off-brand, so the
     blue mid-stops were swapped for soft magenta/orchid lavenders. Same silky,
     premium feel, now reads as "us." Keep it pale: dark ink text sits on top. */
  --btn-silk:linear-gradient(115deg,#E9BEE6 0%,#E2ADE0 22%,#D7A2E2 45%,#CB9CE6 62%,#D9ABEC 82%,#F3D4EF 100%);
  /* Shape masks for the two-part CTA (taken 1:1 from the reference button):
     the label's curved right "fin" and the arrow chip's interlocking blob. */
  --ep-mask-corner:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2018%2048%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%200h5.63c7.808%200%2013.536%207.337%2011.642%2014.91l-6.09%2024.359A11.527%2011.527%200%200%201%200%2048V0Z%27%2F%3E%3C%2Fsvg%3E");
  /* Same fin, mirrored horizontally — used for a LEFT fin (wizard nav, so the back chip interlocks like the forward chip). */
  --ep-mask-corner-left:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2018%2048%27%20preserveAspectRatio%3D%27none%27%3E%3Cg%20transform%3D%27translate(18%200)%20scale(-1%201)%27%3E%3Cpath%20d%3D%27M0%200h5.63c7.808%200%2013.536%207.337%2011.642%2014.91l-6.09%2024.359A11.527%2011.527%200%200%201%200%2048V0Z%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --ep-mask-blob:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2051%2048%27%3E%3Cpath%20d%3D%27M6.728%209.09A12%2012%200%200%201%2018.369%200H39c6.627%200%2012%205.373%2012%2012v24c0%206.627-5.373%2012-12%2012H12.37C4.561%2048-1.167%2040.663.727%2033.09l6-24Z%27%2F%3E%3C%2Fsvg%3E");
  --text:#1A1A2E;--text2:#374151;--muted:#6B7280;
  --border:rgba(206,0,184,0.1);--border2:rgba(206,0,184,0.28);
  --ink:#242424;                 /* site-wide dark surface — warm charcoal, not pure black
                                    (apply section, footer, community band, confirmation, ticker) */
  --t:0.3s ease;
  /* ── Corner radius ──────────────────────────────────────────────
     ONE standard for the media/card tier — photos, videos, content
     cards — so rounding is consistent across every page. Matches the
     subtle 6px already used on the video frames. Buttons, pills,
     avatars and the nav menu keep their own (intentional) shapes. */
  --radius: 6px;
  /* ── Motion system (June 2026): one easing + a small set of durations so the
     whole site animates consistently. --ease is the calm, premium curve. ── */
  --ease:cubic-bezier(.2,.7,.2,1);
  --dur-reveal:.7s;              /* scroll-in reveals */
  --dur-hover:.2s;              /* buttons / links / micro-interactions */

  /* ─── Font families ──────────────────────────────────────────
     Inter (open, modern) for body/UI/prose; Inter Tight for the
     display headings. Tokens kept so role-based tuning still works. */
  --font-display: 'Inter Tight', sans-serif;        /* headings, display */
  --font-body:    'Inter', sans-serif;              /* UI: nav, buttons, eyebrows, meta, labels */
  --font-prose:   'Inter', sans-serif;              /* reading paragraphs */
  --font-accent:  'Inter', sans-serif;              /* quotemarks & pull-quotes */

  /* ─── Type scale ─────────────────────────────────────────────
     Change a value here → every selector that uses it updates.
     Pick the closest tier when adding new styles.            */
  --text-xs:    0.72rem;                                          /* eyebrows, uppercase labels */
  --text-sm:    0.78rem;                                          /* captions, meta */
  --text-base:  0.83rem;                                          /* buttons, small UI, footer */
  --text-md:    0.9rem;                                           /* card body, mobile labels */
  --text-lg:    1rem;                                             /* body prose, subtitles */
  --text-xl:    1.05rem;                                          /* lead paragraphs, hero subtitle */
  --text-2xl:   1.15rem;                                          /* subheadings, logo */
  --text-nav:   clamp(0.95rem, 1.25vw, 1.15rem);                  /* nav links (fluid) */
  --text-h1:    clamp(2.4rem, calc(0.2rem + 4vw), 3rem);          /* hero headline — the largest heading on the page */
  --text-h2:    clamp(2.15rem, calc(0.25rem + 3.9vw), 3.4rem);    /* section titles — a touch larger for a bolder, more modern feel */

  /* ─── Canonical body copy ────────────────────────────────────
     One source of truth for section body paragraphs so they can
     never drift apart again. 17px / 1.65, solid color.        */
  --body-size:        clamp(1rem, 0.93rem + 0.3vw, 1.0625rem);  /* refined, not oversized */
  --body-line:        1.58;
  --body-color:       #6B7280;   /* slate-grey body copy; clears WCAG AA 4.5:1 on white (was #71797E = 4.43:1) */
  --body-weight:      400;               /* Inter Tight regular — solid at text sizes */

  /* ─── Buttons ────────────────────────────────────────────────
     Section CTAs share one minimum height for a consistent rhythm and
     identical box size across sections. --cta-width is a FIXED width so
     every section button is exactly the same size, regardless of label length. */
  --cta-width:        300px;
  --cta-min-height:   58px;

  /* ─── Section rhythm ─────────────────────────────────────────
     One source of truth for the vertical gap around the magenta
     section dividers, so the distance from one section's end to
     the next section's eyebrow is identical site-wide. Every white
     section uses these — change here, every gap updates together.
       --sec-pt = gap BELOW a divider (divider → next eyebrow)
       --sec-pb = gap ABOVE a divider (content → divider)        */
  --sec-pt: clamp(84px, 10vw, 132px);
  --sec-pb: clamp(60px, 8vw, 96px);
}

html{scroll-behavior:smooth}

/* Lenis smooth-scroll (desktop only; class added by the library at runtime).
   When Lenis is active it drives the scroll itself, so native smooth-behavior
   must be off, and [data-lenis-prevent] regions (carousels) keep their own. */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}

/* ── Section divider — a thin magenta hairline that sits in the gap between
   two (white) sections. Contained to the content column (same max-width +
   side padding as .container) so it aligns with the section text edges, with
   identical treatment on desktop and mobile. (See index.php.) */
.section-divider{
  max-width:1240px;          /* match .container — the content column */
  margin:0 auto;
  padding:0 clamp(28px,3vw,32px);   /* match .container side padding → insets on narrow screens */
  position:relative;z-index:2;
}
.section-divider::before{
  content:'';
  display:block;
  width:100%;height:1px;
  background:rgba(206,0,184,0.30);
}

html{background:#fff}   /* light backstop behind the (now white) hero — no dark sliver can show */
body{background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:var(--text-lg);line-height:1.55;overflow-x:hidden}

h1,h2,h3,h4{font-family:var(--font-display);font-weight:500;line-height:1.12;letter-spacing:-0.02em;color:var(--text)}

p{color:var(--body-color);font-family:var(--font-prose);font-weight:var(--body-weight);letter-spacing:-0.012em;text-wrap:pretty}

a{color:inherit;text-decoration:none}

.container{max-width:1240px;margin:0 auto;padding:0 clamp(28px,3vw,32px)}   /* unified content width (matches cases/outcomes/footer) */

/* ─────────────────────────────────────────────────────────────
   SHARED HEADING STANDARD — the single source of truth for every
   major heading (hero + all four section titles + testimonials).
   Change size/weight/tracking HERE and all of them update at once.
   Each heading also keeps its own class for section-specific bits
   like color, margin, and max-width.
   ───────────────────────────────────────────────────────────── */
.section-heading{
  font-family:var(--font-display);
  font-weight:600;
  font-size:var(--text-h2);
  line-height:1.06;
  letter-spacing:-0.025em;
  text-wrap:balance;
  margin:0;
}

/* One-line section headings on desktop (≥861px): drop the mobile <br> breaks,
   keep to a single line, and shrink the type just enough that the longest
   heading ("Patient outcomes across multiple disciplines.") fits. Mobile keeps
   its breaks + larger size below this width. */
@media (min-width:861px){
  .section-heading{ font-size:clamp(1.95rem, 3.7vw, 2.8rem); white-space:nowrap; }
  .section-heading br{ display:none; }
}

section{padding:5.5rem 0}

.fade-in{opacity:0;transform:translateY(22px);transition:opacity var(--dur-reveal) var(--ease),transform var(--dur-reveal) var(--ease)}

.fade-in.visible{opacity:1;transform:none}
/* Reveals are instant for reduced-motion users (content never hidden waiting). */
@media(prefers-reduced-motion:reduce){
  .fade-in{opacity:1;transform:none;transition:none}
}

/* NAV */

/* Menu open: the pill becomes the TOP of one continuous rounded card. Solid
   white, square bottom corners so it joins the drawer flush below, a hair gray
   divider where they meet, and no drop shadow (the drawer carries one shadow
   for the whole card). */
#navbar.menu-open.menu-open{   /* doubled class so the solid white beats #navbar.scrolled (Eddie: white when expanded) */
  background:#fff;
  border-radius:18px 18px 0 0;
  border-bottom-color:rgba(26,26,46,0.12);   /* the hairline divider above the menu */
  box-shadow:none;
}

/* Floating glassy "pill": detached from the edges, fully rounded, translucent
   with a backdrop blur so it reads over both light pages and the dark home hero.
   Sized so its bottom lands at ~68px — where the mobile drawer begins. */
#navbar{
  position:fixed;top:calc(12px + env(safe-area-inset-top));left:0;right:0;margin:0 auto;z-index:100;
  width:calc(100% - 28px);max-width:1180px;
  background:rgba(255,255,255,0.55);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  backdrop-filter:blur(20px) saturate(180%);
  border:1px solid rgba(26,26,46,0.08);
  border-radius:18px;                       /* rounded, not a full pill (n8n-ish) */
  box-shadow:0 12px 36px -16px rgba(26,26,46,0.34);
  transition:background var(--t),box-shadow var(--t),border-color var(--t),border-radius var(--t),transform .35s ease;
}
#navbar.scrolled{background:rgba(255,255,255,0.7)}

.nav-wrap{
  margin:0;
  padding:0 clamp(20px,2.4vw,30px);   /* roomy ends inside the rounded pill */
  height:54px;
  display:grid;
  grid-template-columns:auto 1fr auto;   /* logo · nav · hamburger */
  align-items:center;
  gap:16px;
}

.nav-logo{justify-self:start;display:flex;align-items:center;flex-shrink:0}
/* Two-logo swap default (must live in base.css so it applies on pages that DON'T
   load home.css — e.g. coming-soon — otherwise both logos render). Home flips
   these while the nav is transparent over the hero (see home.css). */
.nav-logo-over{display:none}
.nav-logo-solid{display:block}

.logo-mark{width:42px;height:42px}

/* Desktop horizontal nav (.nav-ctr / .nav-link / .nav-socials / .nav-apply)
   removed — all navigation now lives in the single hamburger drawer
   (.mob-menu), used on every screen size. */

.ham{
  display:flex;
  grid-column:3;justify-self:end;
  background:none;border:none;cursor:pointer;
  padding:0;
  height:44px;
  flex-direction:row;align-items:center;
  gap:10px;
}
.ham-icon{
  display:flex;flex-direction:column;
  align-items:flex-start;justify-content:center;
  gap:5px;
}
.ham-line{
  display:block;
  height:2px;
  background:linear-gradient(90deg,#CE00B8 0%,#7B2FBE 100%);
  border-radius:4px;
  transition:transform .25s ease, opacity .25s ease, width .25s ease;
}
.ham-line:nth-child(1){ width:22px; }   /* top + bottom equal (full), middle shorter → "E" */
.ham-line:nth-child(2){ width:15px; }
.ham-line:nth-child(3){ width:22px; }
.ham.open .ham-icon .ham-line{width:18px}
.ham.open .ham-icon .ham-line:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.ham.open .ham-icon .ham-line:nth-child(2){opacity:0}
.ham.open .ham-icon .ham-line:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.ham-dot{display:none}

/* ── Desktop inline nav (≥1024px) ──────────────────────────────────────
   logo (left) · page-centered links. Below 1024px these hide and the
   hamburger drawer takes over. Default link color is for the solid nav
   (scrolled / inner pages); home.css flips it white over the hero photo. */
.desk-nav{display:none}
@media(min-width:1024px){
  .ham{display:none}
  .nav-wrap{grid-template-columns:1fr auto 1fr}   /* logo | centered links | empty → links sit at the page centre */
  .desk-nav{
    display:flex;grid-column:2;align-items:center;
    gap:clamp(16px,2vw,30px);
  }
  .desk-nav a{
    font-family:var(--font-body);font-size:0.82rem;font-weight:500;letter-spacing:.01em;
    color:#1A1A2E;text-decoration:none;white-space:nowrap;
    transition:color .2s ease,opacity .2s ease;
  }
  .desk-nav a:hover{color:var(--accent)}
  .desk-nav a[aria-current="page"]{color:var(--accent)}
}





























/* Mobile menu — single flat list, centered socials */

.mob-menu{
  display:flex;flex-direction:column;align-items:stretch;
  /* Inset white panel (n8n style): the bottom half of one card with the navbar —
     it butts flush against the pill's bottom edge (no gap; the pill's bottom
     border is the hair divider) and rounds only its bottom corners. Rolls down
     like a blind (clip-path). position:fixed so it never adds page scroll height. */
  position:fixed;top:calc(66px + env(safe-area-inset-top));left:14px;right:14px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:99;
  background:#fff;                       /* solid white */
  border-radius:0 0 18px 18px;           /* top is square — it joins the navbar above */
  box-shadow:0 24px 60px -20px rgba(26,26,46,0.42);
  padding:6px 0 0;
  overflow-y:auto;
  pointer-events:none;visibility:hidden;
  clip-path:inset(0 0 100% 0);           /* rolled up out of sight */
  transition:clip-path .55s cubic-bezier(0.22,0.61,0.36,1),
             visibility 0s linear .55s;
}
.mob-menu.open{
  pointer-events:all;visibility:visible;
  clip-path:inset(0 0 0 0);              /* unrolls top → bottom to fill the screen */
  transition:clip-path .55s cubic-bezier(0.22,0.61,0.36,1),
             visibility 0s;
}
/* Phones: the drawer spans the full screen width (not a side curtain). */
@media (max-width:767px){
  /* (The drop-down panel sets its own width/border — see .mob-menu above.) */

  /* Phones only: larger logo + hamburger for a more tappable, balanced bar.
     Overrides the inline height:26px on the logo images. */
  .nav-logo-img{ height:33px !important; }
  .ham{ height:48px; gap:12px; }
  .ham-icon{ gap:6px; }
  .ham-line{ height:2px; }
  .ham-line:nth-child(1){ width:28px; }   /* top + bottom equal, middle shorter → "E" */
  .ham-line:nth-child(2){ width:19px; }
  .ham-line:nth-child(3){ width:28px; }
  .ham.open .ham-icon .ham-line{ width:23px; }
  .ham.open .ham-icon .ham-line:nth-child(1){ transform:translateY(8px) rotate(45deg); }
  .ham.open .ham-icon .ham-line:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

  /* Nav links a touch smaller in the drawer. Uses .mob-nav descendant so it
     out-specifies the base .mob-nav-item rule that appears later in the file. */
  .mob-nav .mob-nav-item{ font-size:16.5px; padding:15px 0; }
}

/* Menu items: rest slightly raised + transparent; when the panel drops they
   settle in a gentle top-to-bottom waterfall just after it lands. */
.mob-nav-item, .mob-foot{
  opacity:0;
  transform:translateY(8px);
  transition:opacity .4s ease, transform .4s cubic-bezier(0.22,0.61,0.36,1);
}
.mob-menu.open .mob-nav-item,
.mob-menu.open .mob-foot{
  opacity:1;
  transform:translateY(0);
}
.mob-menu.open .mob-nav-item:nth-child(1){transition-delay:.18s}
.mob-menu.open .mob-nav-item:nth-child(2){transition-delay:.23s}
.mob-menu.open .mob-nav-item:nth-child(3){transition-delay:.28s}
.mob-menu.open .mob-nav-item:nth-child(4){transition-delay:.33s}
.mob-menu.open .mob-nav-item:nth-child(5){transition-delay:.38s}
.mob-menu.open .mob-nav-item:nth-child(6){transition-delay:.43s}
.mob-menu.open .mob-foot{transition-delay:.48s}

/* Respect reduced-motion: no slide, just an instant reveal. */
@media (prefers-reduced-motion: reduce){
  .mob-menu, .mob-menu.open,
  .mob-nav-item, .mob-foot,
  .mob-menu.open .mob-nav-item,
  .mob-menu.open .mob-foot{
    transition:opacity .2s ease, visibility 0s;
    transform:none;
  }
  .mob-menu{clip-path:inset(0 0 100% 0)}
  .mob-menu.open{clip-path:inset(0 0 0 0)}
  .mob-nav-item,.mob-foot{opacity:1}
}

/* "Request a demo" button moved to the TOP of the drawer (Eddie 2026-07-08),
   above the nav links. flex-column stretches the button to the FULL content width
   (same as it had in the old bottom .mob-foot). The ::after is a 1px divider inset
   24px on each side, matching the hairlines under the nav items below. */
.mob-top-cta{position:relative;display:flex;flex-direction:column;padding:16px 24px 18px}
.mob-top-cta::after{content:'';position:absolute;left:24px;right:24px;bottom:0;height:1px;background:rgba(24,27,32,0.07)}
.mob-nav{display:flex;flex-direction:column;padding:10px 24px 0}
.mob-nav-item{
  display:flex;align-items:center;gap:14px;
  padding:18px 0;
  border-bottom:1px solid rgba(24,27,32,0.07);
  font-family:var(--font-display);
  font-size:21px;font-weight:300;letter-spacing:-0.01em;line-height:1.05;
  color:var(--text);text-decoration:none;
}
.mob-nav-ico{
  width:22px;height:22px;flex-shrink:0;
  color:var(--muted);
  transition:color .2s ease;
}
.mob-nav-item:hover .mob-nav-ico{color:var(--accent);}
.mob-nav-label{flex:1 1 auto;}
.mob-nav-item::after{
  content:'→';font-family:var(--font-body);
  font-size:16px;color:var(--muted);margin-left:auto;
  transition:transform .2s ease,color .2s ease;
}
.mob-nav-item:hover::after{transform:translateX(4px);color:var(--text)}

/* Active page in the mobile menu — magenta left bar + accent label/icon,
   matching the desktop underline's use of the site accent.             */
.mob-nav-item[aria-current="page"],
.mob-nav-item.is-active{
  color:var(--accent);
  box-shadow:inset 3px 0 0 var(--accent);
  padding-left:14px;
}
.mob-nav-item[aria-current="page"] .mob-nav-ico,
.mob-nav-item.is-active .mob-nav-ico{color:var(--accent)}









@media(hover:hover){
}










@media(hover:hover){
}

/* footer holds the socials, pinned to the bottom */
.mob-foot{margin-top:auto;padding:24px 24px 34px;display:flex;flex-direction:column;gap:22px}

/* Apply — brand-gradient rectangle pinned to the bottom of the drawer, just
   above the socials (matches the homepage "Apply for access" button). */
.mob-cta{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:17px 22px;
  background:var(--btn-gradient);
  color:#fff;text-decoration:none;
  font-family:var(--font-body);
  font-size:12px;font-weight:500;letter-spacing:0.20em;text-transform:uppercase;
  transition:opacity .2s ease,transform .2s ease;
}
.mob-cta:hover{opacity:0.92;transform:translateY(-1px)}

/* Kill the default (blue) focus ring that flashed when the menu auto-moves focus
   to its first item on open (js/site.js focuses it for keyboard users). Tap users
   see nothing; keyboard users still get a branded ring via :focus-visible only.
   (Eddie 2026-07-08) */
.mob-menu:focus{outline:none}
.mob-cta:focus, .mob-nav-item:focus{outline:none}
.mob-cta:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.mob-nav-item:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}

/* HAIRLINE DIVIDER — echoes hero glow-line accent */



/* SOCIALS — centered, softer color, consistent 20px icon set */

.mob-socials{
  display:flex;align-items:center;justify-content:center;
  gap:1.6rem;
  margin-top:0;padding:24px 0 0;
  border-top:1px solid rgba(24,27,32,0.07);
}
.mob-social-link{
  width:36px;height:36px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  color:#000;
  transition:background .2s, transform .15s ease;
}
.mob-social-link:hover{background:rgba(0,0,0,0.06)}
.mob-social-link svg{width:18px;height:18px;display:block}
/* "Follow" label + social icons, bracketed by top/bottom bars (like the footer). */
.mob-follow-block{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:9px 0;
  border-top:1px solid rgba(24,27,32,0.10);
  border-bottom:1px solid rgba(24,27,32,0.10);
}
/* Socials sit inline next to the "Follow" label inside the block, so drop the
   stacked-layout border + top padding that was pushing the icons onto a second
   line and drawing a half-width hairline above them. */
.mob-follow-block .mob-socials{
  border-top:0;padding-top:0;
}
.mob-follow-label{
  font-family:var(--font-body);font-size:11px;font-weight:600;
  letter-spacing:0.18em;text-transform:uppercase;color:#000;
  flex:none;white-space:nowrap;
}

/* Desktop ≥1100px: slightly wider curtain panel. The slide behaviour
   itself is shared with mobile (see .mob-menu base rule). */
@media(min-width:1100px){
  .mob-menu{ width:min(440px,42vw); }
}

/* ── Site footer ──────────────────────────────────────────────────────
   Magenta top rule, brand + tagline + socials, two link columns, and a
   bottom bar (copyright + legal). Links mirror the drawer nav. */
/* ── Footer — original layout, dark background. Desktop unchanged except socials moved
   under the nav links ("Find a provider"). Mobile: brand left, rest centered. ── */
.site-footer{
  position:relative;
  background:#08070c;   /* near-black — matches the site's dark "see-it-work" sections (Eddie 2026-06-22) */
  padding:clamp(40px,6vw,64px) 0 clamp(24px,3vw,32px);
  font-family:var(--font-body);
}
/* Brand gradient bar across the very top: magenta to purple (--btn-gradient), the
   same family as the logo, the mission line, and the "Apply" word (Eddie 2026-06-25). */
.site-footer::before{
  content:'';position:absolute;left:0;right:0;top:0;height:4px;
  background:linear-gradient(90deg,#CE00B8 0%,#7B2FBE 100%);
}
.footer-inner{max-width:1240px;margin:0 auto;padding:0 clamp(28px,3vw,32px)}
.footer-top{
  display:flex;align-items:flex-start;justify-content:space-between;
  flex-wrap:wrap;gap:clamp(24px,4vw,48px);
}
.footer-brand{max-width:420px}
.footer-logo{display:inline-flex;margin-bottom:18px}
.footer-logo img{height:26px;width:auto;display:block}
.footer-heading{
  margin:0;font-family:var(--font-display);
  font-size:clamp(1.05rem,1.5vw,1.3rem);font-weight:500;line-height:1.3;
  letter-spacing:-0.01em;color:rgba(255,255,255,0.92);max-width:22ch;
}
/* Gradient word on the dark footer: white → magenta → pink (same as the hero). */
.grad-word{
  background:linear-gradient(96deg, #fff 0%, #fff 22%, #CE00B8 66%, #F06FD6 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.footer-nav{display:flex;flex-direction:column;align-items:flex-end;gap:20px}
.footer-links{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:clamp(18px,2.4vw,34px)}
.footer-link{
  color:rgba(255,255,255,0.72);text-decoration:none;font-size:var(--text-md);
  transition:color .2s ease;
}
.footer-link:hover{color:#fff}
.footer-socials{display:flex;align-items:center;gap:20px}
.footer-follow{display:none}   /* "Follow" label — mobile footer only (see media query) */
.footer-social{
  color:rgba(255,255,255,0.6);display:inline-flex;
  transition:color .2s ease,transform .15s ease;
}
.footer-social:hover{color:var(--accent);transform:translateY(-1px)}
.footer-social svg{width:20px;height:20px;display:block}
.footer-fda{
  max-width:760px;margin:clamp(36px,5vw,52px) auto 0;
  font-size:12.5px;line-height:1.7;color:rgba(255,255,255,0.62);   /* 0.62 clears WCAG 4.5:1 (was 0.42 ≈ 3.9:1) */
  text-align:center;text-wrap:pretty;
}
.footer-bottom{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-top:clamp(28px,3.5vw,40px);
  padding-top:clamp(20px,2.5vw,28px);
  border-top:1px solid rgba(255,255,255,0.1);
}
.footer-copy{color:rgba(255,255,255,0.62);font-size:var(--text-sm);margin:0}
.footer-legal{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px}
.footer-legal .footer-link{font-size:var(--text-xs);color:rgba(255,255,255,0.62);white-space:nowrap}
.footer-legal .footer-link:hover{color:rgba(255,255,255,0.85)}

/* Skip-to-content link (WCAG 2.4.1) — off-screen until keyboard-focused. */
.skip-link{
  position:fixed;left:12px;top:-60px;z-index:100000;
  background:#fff;color:#1A1A2E;
  padding:10px 18px;border-radius:6px;
  font-family:var(--font-body);font-size:14px;font-weight:600;text-decoration:none;
  box-shadow:0 6px 20px rgba(0,0,0,.18);
  transition:top .15s ease;
}
.skip-link:focus{top:12px;outline:2px solid var(--accent);outline-offset:2px}
@media(max-width:768px){
  .footer-top{flex-direction:column;align-items:stretch;gap:22px;text-align:left}
  .footer-brand{width:100%;max-width:none}
  .footer-heading{max-width:24ch}
  .footer-nav{align-items:stretch;gap:20px;width:100%}
  /* Vertical link list — left-aligned, a › chevron + a divider per row (screenshot 4). */
  .footer-links{flex-direction:column;align-items:stretch;gap:0;width:100%}
  .footer-links .footer-link{
    display:flex;align-items:center;justify-content:space-between;
    font-size:1rem;padding:15px 0;
    border-bottom:1px solid rgba(255,255,255,0.12);
  }
  .footer-links .footer-link::after{content:'\203A';font-size:20px;line-height:1;color:rgba(255,255,255,0.5)}
  /* "Follow" label on the left, social icons grouped to the right. */
  .footer-socials{justify-content:flex-start;gap:20px}
  .footer-follow{display:inline-flex;align-items:center;margin-right:auto;font-family:var(--font-body);font-size:11px;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:rgba(255,255,255,0.6)}
  .footer-social svg{width:22px;height:22px}
  .footer-bottom{flex-direction:column-reverse;align-items:flex-start;gap:14px}
  .footer-legal{justify-content:flex-start;gap:8px 16px}
}

/* WHAT IS */

#what-is{padding:0;position:relative;overflow:hidden;background:#0D0D1A;border-top:1px solid rgba(206,0,184,0.18);border-bottom:1px solid rgba(206,0,184,0.18)}

#what-is canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}

.what-is-inner{position:relative;z-index:2;max-width:680px;margin:0 auto;text-align:center;padding:7rem 1.5rem}

.what-is-inner .label{color:#CE00B8}

.what-is-inner .section-title{color:#F5F5F5;font-size:clamp(2rem,4vw,3rem)}

.what-is-inner p{color:#9CA3AF;margin-bottom:1rem;max-width:52ch;margin-left:auto;margin-right:auto}

.what-is-inner p:last-of-type{margin-bottom:0}

.col-text p{margin-bottom:1rem}

.col-text p:last-of-type{margin-bottom:0}

/* OUTCOMES */

#outcomes{background:var(--surface)}

.out-header{text-align:center;max-width:640px;margin:0 auto 3.5rem}

.out-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}

@media(max-width:768px){
  .out-grid{grid-template-columns:1fr}
}

.out-card{padding:2rem 1.75rem;border-radius:var(--radius);background:var(--bg);border:1px solid var(--border);position:relative;overflow:hidden;transition:border-color 0.25s,transform 0.25s}

.out-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--accent);opacity:0;transition:opacity 0.25s}

.out-card:hover{border-color:var(--border2);transform:translateY(-5px)}

.out-card:hover::before{opacity:1}

.out-icon{font-size:1.8rem;margin-bottom:1rem;line-height:1}

.out-card h3{font-size:var(--text-2xl);margin-bottom:0.65rem}

.out-card p{font-size:var(--text-md);line-height:1.65}

/* TESTIMONIALS */

#testimonials{padding:5.5rem 0}

.t-header{text-align:center}

.simon-q{text-align:center;max-width:660px;margin:2.5rem auto 4rem;padding:2rem 2.5rem;border:1px solid var(--border2);border-radius:var(--radius);background:rgba(206,0,184,0.04);position:relative}

.simon-q::before{content:'\201C';position:absolute;top:-1.5rem;left:50%;transform:translateX(-50%);font-size:6rem;line-height:1;font-family:var(--font-accent);color:var(--accent);opacity:0.2;pointer-events:none}

.simon-q blockquote{font-family:var(--font-accent);font-weight:500;font-size:clamp(1.1rem,2.2vw,1.45rem);color:var(--text);line-height:1.4;letter-spacing:-0.01em;margin-bottom:1rem}

.simon-q cite{font-family:var(--font-body);font-size:var(--text-xs);letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);font-style:normal}

.t-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}

@media(max-width:768px){
  .t-grid{grid-template-columns:1fr}
}

.t-card{padding:2rem;border-radius:var(--radius);background:var(--surface);border:1px solid var(--border);display:flex;flex-direction:column}

.t-quote{font-family:var(--font-accent);font-weight:400;font-size:var(--text-lg);line-height:1.6;letter-spacing:-0.005em;color:var(--text2);flex:1;margin-bottom:1.5rem}

.t-foot{display:flex;align-items:center;gap:0.85rem}

.t-avatar{width:46px;height:46px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;font-family:var(--font-body);font-weight:400;font-size:var(--text-base);color:#fff;flex-shrink:0}

.t-meta strong{display:block;font-family:var(--font-body);font-size:var(--text-md);font-weight:400;color:var(--text)}

.t-meta span{font-family:var(--font-body);font-size:var(--text-sm);color:var(--muted)}

/* COMMUNITY */

#community{background:linear-gradient(160deg,rgba(206,0,184,0.08) 0%,rgba(206,0,184,0.03) 100%);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}

.comm-header{text-align:center;max-width:660px;margin:0 auto 3.5rem}

.comm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-bottom:3.5rem}

@media(max-width:768px){
  .comm-grid{grid-template-columns:1fr}
}

.comm-card{text-align:center;padding:2rem 1.5rem;border-radius:var(--radius);background:var(--surface);border:1px solid var(--border);transition:border-color 0.25s}

.comm-card:hover{border-color:var(--border2)}

.comm-icon{font-size:2rem;margin-bottom:1rem;display:block}

.comm-card h3{font-size:var(--text-xl);margin-bottom:0.6rem}

.comm-card p{font-size:var(--text-md);line-height:1.65;color:var(--muted)}

.comm-pull{border-left:3px solid var(--accent);padding:1rem 1.5rem;max-width:620px;margin:0 auto;font-size:var(--text-lg);color:var(--muted);background:rgba(206,0,184,0.05);border-radius:0 10px 10px 0}

/* PROCESS */

#process{background:var(--surface)}

.proc-header{text-align:center;max-width:640px;margin:0 auto 3.5rem}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;position:relative;margin-bottom:3rem}

@media(max-width:768px){
  .steps{grid-template-columns:1fr 1fr}
}

@media(max-width:480px){
  .steps{grid-template-columns:1fr}
}

.steps::before{content:'';position:absolute;top:26px;left:calc(12.5% + 26px);right:calc(12.5% + 26px);height:1px;background:var(--accent);opacity:0.3}

@media(max-width:768px){
  .steps::before{display:none}
}

.step{text-align:center;padding:1.5rem 1rem}

.step-num{width:52px;height:52px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;font-family:var(--font-body);font-weight:400;font-size:var(--text-2xl);color:#fff;margin:0 auto 1.1rem;box-shadow:0 4px 20px rgba(206,0,184,0.32)}

.step h3{font-size:var(--text-lg);margin-bottom:0.5rem}

.step p{font-size:var(--text-base);line-height:1.6;color:var(--muted)}

.proc-note{margin-top:0.85rem;font-family:var(--font-body);font-size:var(--text-sm);color:var(--muted)}

/* FIND PROVIDER */

#find-provider{text-align:center;padding:4.5rem 0}

.find-inner{max-width:480px;margin:0 auto}

.find-inner p{margin:1rem 0 2rem;color:var(--muted)}

/* BOTTOM CTA */

#cta-strip{padding:5.5rem 0;background:var(--accent);text-align:center}

#cta-strip h2{font-size:var(--text-h2);color:#fff;margin-bottom:0.8rem}

#cta-strip p{color:rgba(255,255,255,0.75);margin-bottom:2.25rem;max-width:50ch;margin-left:auto;margin-right:auto}

/* FOOTER */

footer{background:#08070c;padding:4.5rem 0 2rem}

.foot-grid{display:grid;grid-template-columns:2fr 1fr;gap:3rem;margin-bottom:3rem}

@media(max-width:768px){
  .foot-grid{grid-template-columns:1fr;gap:2rem}
}

.foot-brand{max-width:280px}

.foot-brand p{font-family:var(--font-body);font-size:var(--text-base);color:#6B7280;margin-top:1rem;line-height:1.6}

.socials{display:flex;gap:0.75rem;margin-top:1.5rem}

.soc{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,0.05);display:flex;align-items:center;justify-content:center;color:#6B7280;transition:background 0.2s,color 0.2s}

.soc:hover{background:var(--accent);color:#fff}

.foot-col h4{font-family:var(--font-body);font-size:var(--text-xs);letter-spacing:0.14em;text-transform:uppercase;color:#4B5563;margin-bottom:1rem}

.foot-col a,.foot-col p{display:block;font-family:var(--font-body);font-size:var(--text-base);color:#6B7280;margin-bottom:0.5rem;transition:color 0.2s}

.foot-col a:hover{color:#D1D5DB}

.foot-bar{border-top:1px solid rgba(255,255,255,0.06);padding-top:1.5rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}

.foot-bar span,.foot-bar a{font-family:var(--font-body);font-size:var(--text-xs);color:#374151}

.foot-bar a:hover{color:#6B7280}

.foot-legal{display:flex;gap:1.5rem}

/* MENU BACKDROP — dark translucent overlay behind the drawer on all devices */

#mob-backdrop{
  position:fixed;inset:0;background:rgba(8,7,16,0.52);z-index:98;
  opacity:0;pointer-events:none;
  transition:opacity 0.3s ease;
}

#mob-backdrop.active{opacity:1}

@media(max-width:768px){
  section,#testimonials,#find-provider,#cta-strip{padding:3.5rem 0}
  .what-is-inner{padding:4.5rem 1.5rem}
  .simon-q{padding:1.5rem 1.5rem;margin:1.5rem auto 2.5rem}
}

@media(max-width:480px){
  section,#testimonials,#find-provider,#cta-strip{padding:2.75rem 0}
}

/* --- HARDWARE ANIMATION (used elsewhere) --- */

/* ═══════════════════════════════════════════════════════════
   Coming-soon page (.page-coming-soon) — coming-soon.php.
   White theme + site fonts; eyebrow matches the homepage sections.
   Layout: title-block + countdown on top, hairline, then body +
   back-to-home below. Stacks on phones.
   ═══════════════════════════════════════════════════════════ */
.cs{
  min-height:100svh;
  display:flex;align-items:center;
  background:#fff;
  /* clear the fixed navbar (~68px) with breathing room */
  padding:clamp(120px,16vh,180px) clamp(20px,5vw,64px) clamp(60px,9vh,110px);
}
.cs-inner{width:100%;max-width:1160px;margin:0 auto}

.cs-head{
  display:grid;grid-template-columns:1fr auto;
  align-items:center;gap:clamp(2rem,5vw,4rem);
}
.cs-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-body);font-size:11px;font-weight:500;
  letter-spacing:0.22em;text-transform:uppercase;color:var(--accent);
}
.cs-eyebrow::before{content:'';width:24px;height:1px;background:var(--accent);flex:none}
.cs-title{
  margin:18px 0 0;color:var(--text);
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(2.1rem,1.2rem + 3.4vw,3.9rem);
  line-height:1.08;letter-spacing:-0.02em;
}
.cs-plus{font-size:0.58em;vertical-align:super;font-weight:500}

.cs-countdown{display:flex;gap:clamp(1.1rem,2.4vw,2.4rem)}
.cs-unit{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.cs-num{
  font-family:var(--font-display);font-weight:300;
  font-size:clamp(2.2rem,1.6rem + 2.2vw,3.5rem);line-height:1;
  color:var(--text);font-variant-numeric:tabular-nums;letter-spacing:-0.01em;
}
.cs-lbl{
  font-family:var(--font-body);font-size:11px;font-weight:500;
  letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);
}

.cs-divider{height:1px;background:rgba(22,20,15,0.14);margin:clamp(2.2rem,4vw,3.2rem) 0}

.cs-foot{
  display:grid;grid-template-columns:1fr auto;align-items:center;
  gap:clamp(1.6rem,4vw,3rem);
}
.cs-body{
  margin:0;max-width:46ch;color:var(--text2);
  font-family:var(--font-prose);font-size:var(--text-lg);line-height:1.6;
}
.cs-back{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  padding:1rem 2rem;min-height:var(--cta-min-height);box-sizing:border-box;
  border:1px solid rgba(22,20,15,0.18);border-radius:2px;
  font-family:var(--font-body);font-size:0.72rem;font-weight:500;
  letter-spacing:0.22em;text-transform:uppercase;color:var(--text);
  transition:border-color .25s,background .25s,color .25s;white-space:nowrap;
}
.cs-back:hover{border-color:var(--accent);background:rgba(206,0,184,0.04)}
.cs-back svg{width:14px;height:14px;color:var(--accent);transition:transform .25s}
.cs-back:hover svg{transform:translateX(-3px)}

/* Phones: stack title → countdown → divider → body → full-width button */
@media(max-width:768px){
  .cs-head{grid-template-columns:1fr;align-items:start;gap:clamp(1.8rem,6vw,2.4rem)}
  .cs-countdown{gap:clamp(1rem,5vw,1.6rem)}
  .cs-num{font-size:clamp(1.8rem,1.2rem + 3vw,2.6rem)}
  .cs-foot{grid-template-columns:1fr;gap:1.8rem;align-items:start}
  .cs-back{width:100%}
}

/* ── Floating practitioner prompt (site-wide) ──────────────────────────
   Looks like a support widget (icon-only mark, bottom-right) but opens a
   card that routes to the For-practitioners funnel. Toggle JS in footer.php. */
.ep-fab{
  position:fixed;right:clamp(24px,3.5vw,44px);bottom:calc(clamp(28px,4vw,48px) + env(safe-area-inset-bottom));z-index:90;
  display:flex;flex-direction:column;align-items:flex-end;gap:14px;
  font-family:var(--font-body);
  /* Hidden until the tech section's eyebrow scrolls up past the navbar — the
     footer.php observer adds .ep-fab-show. Premium slow fade-up. */
  opacity:0;visibility:hidden;transform:translateY(14px);pointer-events:none;
  transition:opacity .55s ease,transform .6s cubic-bezier(.2,.7,.2,1),visibility .55s;
}
/* NOTE: the container stays pointer-events:none even when shown. Its box is huge
   (it reserves layout space for the hidden .ep-fab-card popover — visibility:hidden
   still takes space), so making the CONTAINER catch touches put a giant invisible
   hit-area over the page that swallowed carousel swipes anywhere near the bottom
   half of the screen. Only the visible toggle (and the open card) take pointer
   events; the empty container area is click-through. */
.ep-fab.ep-fab-show{opacity:1;visibility:visible;transform:none}
.ep-fab-toggle{
  pointer-events:auto;
  width:60px;height:60px;border-radius:50%;border:none;background:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 30px -6px rgba(26,20,46,.34),0 3px 10px rgba(26,20,46,.14);
  transition:transform .2s ease,box-shadow .2s ease;
}
/* Same hover as the site CTA buttons: a tiny lift, no growing glow. */
.ep-fab-toggle:hover{transform:translateY(-1px)}
.ep-fab-ico{width:34px;height:34px;display:block}
.ep-fab-x{width:24px;height:24px;display:none;color:var(--text)}
.ep-fab.is-open .ep-fab-ico{display:none}
.ep-fab.is-open .ep-fab-x{display:block}
/* Bottom dock: the round toggle plus an always-on "Book a Demo" pill to its left
   (Eddie's sketch). The .ep-fab container stays pointer-events:none (the swipe
   lesson, see above), so only the interactive bits opt back in. */
.ep-fab-dock{display:flex;align-items:center;pointer-events:none}
.ep-fab-label{
  pointer-events:auto;cursor:pointer;
  border:none;
  background:#fff;                         /* white tab (Eddie) */
  color:var(--accent);                     /* fallback; the word itself uses the gradient below */
  font-family:var(--font-body);font-size:.82rem;font-weight:600;letter-spacing:.01em;
  line-height:1;white-space:nowrap;
  padding:10px 44px 10px 22px;            /* a bit wider strip; extra right padding so the coin can tuck over it */
  margin-right:-28px;                     /* slides the band's right edge UNDER the logo coin (Option 2) */
  border-radius:999px;
  box-shadow:0 8px 22px -8px rgba(26,20,46,.28),0 2px 7px rgba(26,20,46,.12);
  transition:transform .2s ease,box-shadow .2s ease,opacity .18s ease,visibility .18s;
}
.ep-fab-label:hover{transform:translateY(-1px)}
/* The word "Apply" uses the magenta-to-purple brand gradient (same as the logo and
   the mission heading rule, var(--btn-gradient)). */
.ep-fab-label span{
  background:var(--grad-text);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.ep-fab-toggle{position:relative;z-index:1}   /* logo coin sits ON TOP of the tucked-under band */
/* When the card is open the band steps aside, so the card + X read cleanly. */
.ep-fab.is-open .ep-fab-label{opacity:0;transform:scale(.92);pointer-events:none;visibility:hidden}
.ep-fab-card{
  width:min(330px,calc(100vw - 36px));
  background:#fff;border-radius:18px;border:1px solid rgba(26,20,46,.06);
  box-shadow:0 18px 50px -12px rgba(26,20,46,.34),0 6px 18px rgba(26,20,46,.12);
  padding:22px 22px 24px;
  opacity:0;visibility:hidden;transform:translateY(12px) scale(.96);transform-origin:bottom right;
  pointer-events:none;
  transition:opacity .22s ease,transform .24s cubic-bezier(.2,.7,.2,1),visibility .22s;
}
.ep-fab.is-open .ep-fab-card{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.ep-fab-eyebrow{display:inline-block;margin:0 0 10px;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.ep-fab-title{margin:0 0 8px;font-family:var(--font-display);font-size:1.32rem;font-weight:600;line-height:1.2;letter-spacing:-0.01em;color:var(--text)}
.ep-fab-text{margin:0 0 18px;font-size:.92rem;line-height:1.5;color:var(--text2);text-align:left}
/* The panel CTA is a plain .ep-cta2 silk button, identical to every other button
   on the site. The old full-width gradient rectangle + magenta glow-on-hover were
   removed so it matches the rest (gentle brighten + lift comes from .ep-cta2). */

/* Subtle, premium left-right drift on every CTA arrow — ambient, never shouty.
   The continuous animation owns `transform`, so it gently overrides the per-button
   hover nudge; that's intentional. Skipped for prefers-reduced-motion. */
@keyframes ctaArrowDrift{ 0%,100%{transform:translateX(0)} 50%{transform:translateX(3px)} }
@media(prefers-reduced-motion:no-preference){
  .ep-fab-cta svg,
  .tm-cta svg{
    animation:ctaArrowDrift 2.4s ease-in-out infinite;
  }
}
/* Hide while the mobile menu drawer is open so it can't poke through. */
body:has(#navbar.menu-open) .ep-fab{opacity:0;pointer-events:none;visibility:hidden}
@media(prefers-reduced-motion:reduce){
  .ep-fab-toggle,.ep-fab-card,.ep-fab-cta{transition:none}
}

/* ═════════════════════════════════════════════════════════════
   SITE CTA BUTTON  ·  .ep-cta2   (the one button used everywhere)
   Two-part shape lifted 1:1 from the reference: a label with a curved
   right "fin" + an interlocking blob arrow chip, filled by ONE continuous
   silk gradient (a single fill element behind everything, carved into the
   shape by composite masks — so the gradient flows seamlessly across the
   whole button at ANY width). Pale silk → dark text/arrow.

   Markup:
     <a class="ep-cta2" href="…">
       <span class="ep-cta2-fill" aria-hidden="true"></span>
       <span class="ep-cta2-text">Label</span>
       <span class="ep-cta2-arrow"><svg>→</svg></span>
     </a>
   Uniform size everywhere via --ep-w / --ep-h; full-width on phones.
   ───────────────────────────────────────────────────────────── */
/* `a/button` prefix + reset wins over the legacy per-button rules in home.css
   (.tm-cta/.mm-cta/… still ride along on the element for their layout margins). */
a.ep-cta2,button.ep-cta2{
  /* Dimensions copied 1:1 from integratedbio.com's .u-btn--1 (our shape's origin):
     48px tall, 51px arrow chip, 18px fin, width hugs the label (fit-content) at
     EVERY breakpoint — same as theirs (no mobile full-width override). */
  --ep-w:auto; --ep-h:44px;  /* slimmer — Inter + the shadow made 48px read taller than their flat button */
  --ep-chip:51px;            /* arrow chip width — was 53px */
  --ep-fin:18px;            /* label fin width (matches their .label_corner) */
  --ep-gap:2px;             /* gap between fin and chip — nearly touching */
  position:relative;display:inline-flex;align-items:center;justify-content:flex-start;
  width:var(--ep-w);max-width:100%;height:var(--ep-h);min-height:0;box-sizing:border-box;
  padding:0;gap:0;border:0;box-shadow:none;background:transparent;
  text-decoration:none;vertical-align:top;cursor:pointer;
  /* Text matched to integratedbio's button label: fluid 12px→14px (same formula
     they use, consistent on all devices), line-height 1, uppercase. Their text is
     LIGHT (Roboto Mono 400) + airy — our bold 600 read "fat", so we go to 500 with
     a little tracking to mimic the airy monospace feel. We keep OUR font family. */
  /* Lighter + a touch smaller so Inter reads at the same VISUAL size as their
     monospace (Inter has a bigger x-height, so matching px looked too big/bold). */
  font-family:var(--font-body);font-weight:400;
  font-size:clamp(0.6875rem, calc(0.6875rem + 0.002 * (100vw - 27.5rem)), 0.8125rem);
  letter-spacing:0.05em;line-height:1;text-transform:uppercase;color:#fff;   /* white label + arrow (Eddie) */
}
a.ep-cta2:hover,button.ep-cta2:hover{opacity:1}   /* cancel legacy .92 hover dim */
.ep-cta2[hidden]{display:none}                    /* respect the hidden attr (wizard submit) */
/* The single continuous-silk fill, carved to the two-part shape by 3 mask
   layers: blob chip (right), curved fin (just left of the gap), label body. */
.ep-cta2 .ep-cta2-fill{
  position:absolute;inset:0;z-index:0;
  /* smooth gradient using the silk photo's actual colours (no streaky image) */
  background:var(--btn-silk);
  border-radius:12px 0 0 12px;                       /* label's left corners — matches their 12px */
  -webkit-mask:
    var(--ep-mask-blob)   no-repeat right center / var(--ep-chip) 100%,
    var(--ep-mask-corner) no-repeat right calc(var(--ep-chip) + var(--ep-gap)) center / var(--ep-fin) 100%,
    linear-gradient(#000,#000) no-repeat left center / calc(100% - var(--ep-chip) - var(--ep-gap) - var(--ep-fin)) 100%;
          mask:
    var(--ep-mask-blob)   no-repeat right center / var(--ep-chip) 100%,
    var(--ep-mask-corner) no-repeat right calc(var(--ep-chip) + var(--ep-gap)) center / var(--ep-fin) 100%,
    linear-gradient(#000,#000) no-repeat left center / calc(100% - var(--ep-chip) - var(--ep-gap) - var(--ep-fin)) 100%;
  /* drop-shadow follows the masked shape (box-shadow would not) — lifts the
     button off ANY background, incl. the silk-gradient technology band. */
  filter:drop-shadow(0 2px 6px rgba(40,15,70,.10));   /* subtle — was a chunky 5/12 shadow that added visual bulk */
  transition:filter .3s ease,transform .3s ease;
}
/* Label text — sits over the label body, clear of the chip. Black letters,
   no shadow/glow — plain text (Eddie). Arrow stays white via the button color. */
.ep-cta2 .ep-cta2-text{
  position:relative;z-index:1;flex:1 1 auto;
  padding-left:20px;padding-right:calc(var(--ep-chip) + var(--ep-gap) + 8px);   /* 20px left matches their label */
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  color:#000;text-shadow:none;
}
/* Arrow glyph — centred over the blob chip */
.ep-cta2 .ep-cta2-arrow{
  position:absolute;z-index:1;right:0;top:0;width:var(--ep-chip);height:100%;
  display:flex;align-items:center;justify-content:center;color:inherit;
}
/* Arrow gently drifts right-and-back, always — a little life (paused on hover
   so the hover nudge reads). */
.ep-cta2 .ep-cta2-arrow svg{width:17px;height:17px;color:inherit;
  filter:drop-shadow(0 1px 5px rgba(40,15,70,.35));   /* keep the white arrow legible */
  animation:epArrowDrift 1.9s ease-in-out infinite}
/* Bigger, more eye-catching travel (Eddie): out, a tiny snap back, then return. */
@keyframes epArrowDrift{0%,100%{transform:translateX(0)}45%{transform:translateX(6px)}60%{transform:translateX(4px)}}
/* Hover — gentle lift + brightness; arrow holds a forward nudge */
.ep-cta2:hover .ep-cta2-fill{filter:brightness(1.04) saturate(1.05) drop-shadow(0 8px 18px rgba(40,15,70,.22));transform:translateY(-1px)}
.ep-cta2:hover .ep-cta2-arrow{transform:translateY(-1px)}
.ep-cta2:hover .ep-cta2-arrow svg{animation:none;transform:translateX(5px);transition:transform .3s ease}
@media(prefers-reduced-motion:reduce){
  .ep-cta2 .ep-cta2-fill{transition:none}
  .ep-cta2 .ep-cta2-arrow svg{animation:none}
  .ep-cta2:hover .ep-cta2-fill,.ep-cta2:hover .ep-cta2-arrow{transform:none}
}
/* Light / frosted variant — for sections whose background IS the silk gradient
   (e.g. the technology closing band), where a silk fill would blend in.
   White fill keeps the dark text/arrow; the drop-shadow still separates it. */
.ep-cta2.ep-cta2--light .ep-cta2-fill{background:#FFFFFF}
.ep-cta2.ep-cta2--light{color:var(--btn-silk-ink)}   /* dark text/arrow on the white fill */
.ep-cta2.ep-cta2--light .ep-cta2-text{text-shadow:none}
.ep-cta2.ep-cta2--light .ep-cta2-arrow svg{filter:none}
/* Back variant: the shape of the form's back button (a clean rounded rectangle)
   in the homepage button colours (white fill + dark label, like the "Request a
   demo" pill), with a left arrow. Drops the forward-only fin/chip carving. */
.ep-cta2.ep-cta2--back{justify-content:center;gap:9px;padding:0 22px;height:46px}
.ep-cta2.ep-cta2--back .ep-cta2-fill{
  background:#fff;border-radius:12px;box-sizing:border-box;
  -webkit-mask:none;mask:none;
  border:1px solid rgba(26,26,46,.12);
  filter:drop-shadow(0 4px 12px rgba(26,26,46,.08));
}
.ep-cta2.ep-cta2--back .ep-cta2-text{flex:0 0 auto;padding:0;color:var(--text)}
.ep-cta2.ep-cta2--back .ep-cta2-arrow{position:static;order:-1;width:auto;height:auto;color:var(--text)}
.ep-cta2.ep-cta2--back .ep-cta2-arrow svg{width:18px;height:18px;animation:none;filter:none}
.ep-cta2.ep-cta2--back:hover .ep-cta2-fill{border-color:rgba(26,26,46,.24)}
.ep-cta2.ep-cta2--back:hover .ep-cta2-arrow svg{transform:translateX(-3px)}
/* Reversed variant: the standard silk ep-cta2, mirrored so the arrow chip sits
   on the LEFT and it reads as a "back" button. We flip the whole button, then
   un-flip the label so the text still reads left to right. Same silk fill, same
   size, same shape as every other ep-cta2, just pointing the other way. Give it
   a forward-pointing arrow in the markup; the flip turns it into a left arrow. */
.ep-cta2.ep-cta2--rev{transform:scaleX(-1)}
.ep-cta2.ep-cta2--rev .ep-cta2-text{transform:scaleX(-1);text-align:center;padding:0 0 0 calc(var(--ep-chip) + var(--ep-gap))}

/* Content buttons hug their label at every width (Eddie: less wide, left-aligned —
   was full-width on phones). The FAB popover button stays full-width inside its card. */
.ep-fab-card a.ep-cta2,.ep-fab-card button.ep-cta2{ --ep-w:100%; }

/* ─────────────────────────────────────────────────────────────
   SITE EYEBROW  ·  .ep-eyebrow   (the one eyebrow used everywhere)
   A small transparent "chip": 1px outline + a tiny accent swatch + uppercase
   mono label. The swatch is a ::before, so no per-element markup is needed.
   Triple-class specificity so it overrides every legacy per-section eyebrow
   rule (.tp-eyebrow / .mm-eyebrow / …) regardless of stylesheet order; those
   classes keep their own margins/alignment. --dark for dark-background bands.
   ───────────────────────────────────────────────────────────── */
.ep-eyebrow.ep-eyebrow.ep-eyebrow{
  display:inline-flex;align-items:center;gap:5px;width:auto;max-width:max-content;
  margin:0;                                /* zero any legacy per-section eyebrow margin → gap stays uniform */
  padding:5px 9px 5px 8px;                 /* ~25% smaller chip (Eddie) */
  background:transparent;border:1px solid rgba(26,26,46,.2);border-radius:5px;
  font-family:var(--font-body);            /* our own typeface, not the borrowed mono */
  font-size:8px;font-weight:600;line-height:1;letter-spacing:.15em;text-transform:uppercase;
  color:#1A1A2E;white-space:nowrap;-webkit-text-fill-color:currentColor;
}
.ep-eyebrow.ep-eyebrow.ep-eyebrow::before{
  content:'';display:block;width:7px;height:7px;flex:none;
  border-radius:2px;background:var(--btn-gradient);margin:0;
}
.ep-eyebrow.ep-eyebrow.ep-eyebrow::after{display:none}   /* kill the legacy trailing line */
/* Dark-background bands (e.g. technology results / science): light outline + text */
.ep-eyebrow--dark.ep-eyebrow.ep-eyebrow{color:#F3EAF7;border-color:rgba(255,255,255,.3)}



/* ── Scroll-scrubbed word reveal (site.js · [data-rtext]) ──────────────
   Words are split into .rt-w spans and their opacity is driven by scroll.
   Until JS sets per-word values, .rt-on holds them at the dim base so the
   reveal never flashes full-bright first. No transition — opacity tracks the
   scroll position directly. inline-block so opacity is reliable on the gradient
   word unit without affecting line-wrapping. */
.rt-word{display:inline-block;white-space:nowrap}   /* keeps a word whole; wrapping happens only between words */
.rt-w{display:inline-block}                          /* one letter (or a styled inline unit like the gradient word) */
.rt-on .rt-w{opacity:.2;filter:blur(1.5px)}          /* rest: light grey + a whisper of blur → resolves to solid */


/* ── Shared vertical-video component (home tech-teaser + technology "See it work") ──
   A 3:4 poster thumbnail at rest; clicking opens a fullscreen 9:16 lightbox so a
   vertical clip plays full-size without dominating the page inline. Behaviour:
   the shared [data-video-lightbox] controller in js/site.js. */
.ep-vthumb{position:relative;width:min(100%,440px);aspect-ratio:3/4;max-height:86vh;
  border-radius:var(--radius);overflow:hidden;background:#15121c;
  box-shadow:0 30px 80px rgba(0,0,0,.55);
  border:0;padding:0;margin:0;cursor:pointer;display:block;-webkit-tap-highlight-color:transparent}
.ep-vthumb-cover{position:absolute;inset:0;
  background:radial-gradient(ellipse at 32% 26%,rgba(206,0,184,.30),transparent 55%),
    radial-gradient(ellipse at 72% 74%,rgba(123,47,190,.34),transparent 55%),
    linear-gradient(150deg,#1a0f2e 0%,#0a0512 100%)}
.ep-vthumb-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;border:0}
.ep-vthumb-badge{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  display:inline-flex;align-items:center;gap:10px;padding:12px 22px 12px 17px;
  border-radius:100px;background:rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border:1.5px solid rgba(255,255,255,.55);transition:background .25s ease}
.ep-vthumb:hover .ep-vthumb-badge{background:rgba(255,255,255,.26)}
.ep-vthumb-badge svg{width:15px;height:15px;fill:#fff}
.ep-vthumb-badge span{font-family:var(--font-body);font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:#fff}
.ep-vthumb:focus{outline:none}
.ep-vthumb:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Fullscreen 9:16 lightbox: mounted on <body> by the JS, shown via .is-open. The
   frame's width is bound by the height cap so the clip never letterboxes. */
.ep-vlb{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;
  padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom));
  opacity:0;transition:opacity .22s ease}
.ep-vlb.is-open{opacity:1}
.ep-vlb[hidden]{display:none}
.ep-vlb-backdrop{position:absolute;inset:0;background:rgba(8,4,18,.86);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.ep-vlb-dialog{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;
  transform:scale(.985);transition:transform .22s ease}
.ep-vlb.is-open .ep-vlb-dialog{transform:none}
.ep-vlb-frame{position:relative;width:min(92vw,calc(92vh * 9 / 16));aspect-ratio:9/16;max-height:92vh;
  background:#000;border-radius:var(--radius);overflow:hidden;box-shadow:0 24px 70px -12px rgba(0,0,0,.6)}
/* Landscape opt-in: a trigger with data-video-aspect="16/9" adds .ep-vlb--wide so the
   frame is 16:9, bound by width instead of height (used by the technology "See it work"
   clip). Default stays 9:16, so the home tech-teaser is unaffected. */
.ep-vlb--wide .ep-vlb-frame{width:min(92vw,calc(92vh * 16 / 9));aspect-ratio:16/9}
.ep-vlb-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.ep-vlb-close{position:absolute;top:max(14px,env(safe-area-inset-top));right:16px;z-index:2;
  display:grid;place-items:center;width:42px;height:42px;padding:0;border:0;border-radius:50%;cursor:pointer;color:#fff;
  background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:background .2s ease,transform .2s ease}
.ep-vlb-close:hover{background:rgba(255,255,255,.26);transform:scale(1.06)}
.ep-vlb-close svg{width:20px;height:20px}
@media(prefers-reduced-motion:reduce){.ep-vlb,.ep-vlb-dialog{transition:none}}