/* ==========================================================================
   AOM — The Art of Medicine · Shared styles
   Scope: tokens, reset, base typography, layout wrappers,
   header/nav, footer, buttons, shared helpers.
   Page-specific styles live in each page's own CSS file.
   ========================================================================== */

:root{
  /* Brand — AOM Brandbook */
  --purple:#5B07E7;
  --purple-2:#7A42F2;
  --purple-100:#F0E9FE;
  --purple-200:#DCCBFB;
  --ink:#050608;
  --grey-700:#4A4A52;
  --grey-400:#9C9BA3;
  --grey-300:#CDCCD2;
  --grey-200:#E6E5EA;
  --grey-100:#F5F5F5;
  --paper:#F5F5F5;
  --white:#FFFFFF;

  /* Type */
  --font-sans:"Mona Sans",system-ui,sans-serif;
  --font-mono:"Roboto Mono",monospace;

  /* Motion */
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);

  /* Layout */
  --container:1824px;
  --gutter:clamp(1.25rem,4vw,3rem);
  --radius-card:16px;
  --radius-pill:999px;
  --header-h:76px;
  --frame-gap:clamp(.6rem,1.6vw,1.1rem);
}

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

body{
  font-family:var(--font-sans);
  font-weight:400;
  font-size:1rem;
  line-height:1.55;
  color:var(--ink);
  background:var(--grey-200);
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;font-family:var(--font-mono);font-weight:400;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{list-style:none}

h1,h2,h3,h4{font-weight:500;letter-spacing:-.022em;line-height:1.06;text-wrap:balance}

/* ---------- Layout wrappers ----------
   The page canvas is grey; utility bar/header/footer stay full-bleed
   chrome, and every content section floats on the grey as its own
   inset, rounded panel. */
.page-wrapper{min-height:100vh;display:flex;flex-direction:column;overflow-x:clip}
.main-wrapper{flex:1 0 auto;display:flex;flex-direction:column;gap:var(--frame-gap);padding-bottom:var(--frame-gap)}
.main-wrapper > section{
  --section-inset:var(--frame-gap); /* how far the section already sits in from the viewport edge */
  margin-left:var(--frame-gap);
  margin-right:var(--frame-gap);
  border-radius:var(--radius-card);
  overflow:hidden;
}
/* Inside a framed section the container gives back the frame gap, so its
   content lines up with the header, footer and full-bleed sections at the
   same gutter instead of sitting frame-gap further in. Full-bleed sections
   set --section-inset:0 and get the plain gutter. */
.main-wrapper > section .container{
  max-width:calc(var(--container) + 2*var(--gutter) - 2*var(--section-inset,0px));
  padding-left:calc(var(--gutter) - var(--section-inset,0px));
  padding-right:calc(var(--gutter) - var(--section-inset,0px));
}
@media (max-width:640px){
  /* on a phone the frame gap is most of the gutter; a coloured box needs
     its full breathing room inside, alignment with the header be damned */
  .main-wrapper > section .container{padding-left:var(--gutter);padding-right:var(--gutter)}
  /* form submits go full width where thumbs live */
  .pd-form .btn,.ct-form .btn,.patients-refill-form .btn,.contact-form .btn,.gs-form .btn{align-self:stretch;width:100%}
}
.container{
  width:100%;
  max-width:calc(var(--container) + 2*var(--gutter));
  margin-left:auto;
  margin-right:auto;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}

/* ---------- Helpers ---------- */
.overline{
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  display:inline-block;
  color:var(--purple);
}
.section-note{
  font-family:var(--font-mono);
  font-size:.8rem;
  letter-spacing:.02em;
  color:var(--grey-700);
}

/* ---------- Buttons ----------
   Hover is a colour sweep (design v2): a fill (::before) scales in from the
   left edge across the button and the label flips to the fill's contrast
   colour. Each variant sets its fill via --btn-sweep (purple by default,
   ink over the white button, white over the ghost one). */
.btn{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.7rem 1.3rem;
  border-radius:var(--radius-pill);
  font-family:var(--font-mono);
  font-weight:400;
  font-size:.84rem;
  line-height:1;
  --btn-sweep:var(--purple);
  --btn-hover-color:var(--white);
  transition:color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);
}
.btn::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:var(--btn-sweep);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .45s var(--ease);
}
.btn:active{transform:scale(.98);transition:transform .1s ease-out}
.btn-label{display:block;line-height:1.2;margin:-.1em 0}
@media (hover:hover) and (pointer:fine){
  .btn:hover{color:var(--btn-hover-color)}
  .btn:hover::before{transform:scaleX(1)}
}
@media (prefers-reduced-motion:reduce){
  .btn::before{transition:none}
}
.btn-primary,.btn-dark{background:var(--ink);color:var(--white)}
.btn-outline{border:1.5px solid var(--ink);color:var(--ink)}
.btn-light{background:var(--white);color:var(--ink);--btn-sweep:var(--ink)}
.btn-ghost-light{border:1.5px solid rgba(255,255,255,.55);color:var(--white);--btn-sweep:var(--white);--btn-hover-color:var(--ink)}
.btn-lg{padding:.85rem 1.6rem;font-size:.88rem}
@media (pointer:coarse){
  .btn{min-height:44px} /* fingers, not cursors */
}

/* ---------- Specialties: masonry (design v2) — shared by the home, Patients and Providers ----------
   Three CSS columns with mixed tile ratios; tiles flow top to bottom, then
   across. Each tile: the photo (zooms on hover), a bottom gradient under the
   label, and a frosted arrow chip top-right whose purple fill sweeps in from
   the left on hover — the same sweep the buttons use. The closing tile is
   solid ink and sweeps purple as a whole. */
.specialties{padding:6rem 0}
.specialties-head{display:flex;align-items:flex-end;justify-content:space-between;gap:3rem;flex-wrap:wrap;margin-bottom:3rem}
.specialties-title{font-size:clamp(1.8rem,3.2vw,2.6rem);max-width:22ch}
/* A masonry that ends on a straight line. Instead of CSS columns (whose
   bottoms stagger) the tiles sit on an explicit grid: one row unit equals a
   quarter of a tile's width, tiles span 3, 4 or 5 units (≈4:3, 1:1, 4:5) and
   every column is placed by hand so its spans add up to the same total —
   12 units in four columns, 16 in three. Client note: four columns on a
   desktop so the section stops asking for extra scrolling. Two columns on
   tablets are plain squares; one column on phones. */
.specialties-grid{
  --sp-cols:4;
  --sp-unit:calc((min(100vw - 2 * var(--gutter), var(--container)) - (var(--sp-cols) - 1) * 1rem) / (var(--sp-cols) * 4));
  display:grid;
  grid-template-columns:repeat(var(--sp-cols),minmax(0,1fr));
  grid-auto-rows:var(--sp-unit);
  gap:1rem;
}
.specialties-grid > :nth-child(1){grid-area:1/1/5/2}
.specialties-grid > :nth-child(2){grid-area:5/1/10/2}
.specialties-grid > :nth-child(3){grid-area:10/1/13/2}
.specialties-grid > :nth-child(4){grid-area:1/2/6/3}
.specialties-grid > :nth-child(5){grid-area:6/2/9/3}
.specialties-grid > :nth-child(6){grid-area:9/2/13/3}
.specialties-grid > :nth-child(7){grid-area:1/3/4/4}
.specialties-grid > :nth-child(8){grid-area:4/3/8/4}
.specialties-grid > :nth-child(9){grid-area:8/3/13/4}
.specialties-grid > :nth-child(10){grid-area:1/4/5/5}
.specialties-grid > :nth-child(11){grid-area:5/4/8/5}
.specialties-grid > :nth-child(12){grid-area:8/4/13/5}
@media (max-width:1200px){
  .specialties-grid{--sp-cols:3}
  .specialties-grid > :nth-child(1){grid-area:1/1/5/2}
  .specialties-grid > :nth-child(2){grid-area:5/1/10/2}
  .specialties-grid > :nth-child(3){grid-area:10/1/14/2}
  .specialties-grid > :nth-child(4){grid-area:14/1/17/2}
  .specialties-grid > :nth-child(5){grid-area:1/2/4/3}
  .specialties-grid > :nth-child(6){grid-area:4/2/8/3}
  .specialties-grid > :nth-child(7){grid-area:8/2/13/3}
  .specialties-grid > :nth-child(8){grid-area:13/2/17/3}
  .specialties-grid > :nth-child(9){grid-area:1/3/6/4}
  .specialties-grid > :nth-child(10){grid-area:6/3/10/4}
  .specialties-grid > :nth-child(11){grid-area:10/3/13/4}
  .specialties-grid > :nth-child(12){grid-area:13/3/17/4}
}
.specialty-tile{
  position:relative;
  display:block;
  border-radius:var(--radius-card);
  overflow:hidden;
  transform:translateZ(0); /* keeps the rounded clip while the photo scales (Safari) */
}
.specialty-tile img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .6s var(--ease);
}
.specialty-tile::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(5,6,8,.72),rgba(5,6,8,0) 55%);
  pointer-events:none;
}
.specialty-name{
  position:absolute;
  left:1.4rem;
  right:1.4rem;
  bottom:1.3rem;
  z-index:1;
  color:var(--white);
  font-size:clamp(1.35rem,1.85vw,1.9rem);
  font-weight:500;
  letter-spacing:-.02em;
  line-height:1.2;
}
.specialty-arrow{
  position:absolute;
  top:1.5rem;
  right:1.5rem;
  z-index:1;
  isolation:isolate;
  width:48px;
  height:48px;
  border-radius:50%;
  overflow:hidden;
  background:rgba(255,255,255,.2);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  color:var(--white);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1rem;
}
.specialty-arrow::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:var(--purple);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .45s var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .specialty-tile:hover img{transform:scale(1.06)}
  .specialty-tile:hover .specialty-arrow::before{transform:scaleX(1)}
}
.specialty-tile--more{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1.1rem;
  text-align:center;
  background:var(--ink);
  isolation:isolate;
}
.specialty-tile--more::after{content:none}
.specialty-tile--more::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:var(--purple);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .45s var(--ease);
}
.specialty-tile--more .specialty-arrow{position:static;background:rgba(255,255,255,.12);-webkit-backdrop-filter:none;backdrop-filter:none}
.specialty-tile--more .specialty-arrow::before{content:none}
.specialty-tile--more .specialty-name{position:static;max-width:14ch}
@media (hover:hover) and (pointer:fine){
  .specialty-tile--more:hover::before{transform:scaleX(1)}
}
@media (prefers-reduced-motion:reduce){
  .specialty-tile img,.specialty-arrow::before,.specialty-tile--more::before{transition:none}
}
@media (max-width:900px){
  /* tablets: two even squares per row; phones: one 4:3 tile per row */
  .specialties-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto}
  .specialties-grid > :nth-child(n){grid-area:auto} /* same specificity as the placements above, so it wins */
  .specialty-tile{aspect-ratio:1/1}
}
@media (max-width:560px){
  .specialties-grid{grid-template-columns:1fr}
  .specialty-tile{aspect-ratio:4/3}
}

.specialty-tile{transition:transform .2s var(--ease)}
.specialty-tile:active{transform:scale(.985);transition:transform .1s ease-out}

/* ---------- Accordion (FAQ) — shared by Education and Clinical Trials ---------- */
.accordion-item{border-top:1px solid var(--grey-300)}
.accordion-item:last-child{border-bottom:1px solid var(--grey-300)}
.accordion-trigger{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  text-align:left;
  padding:1.4rem 0;
  font-family:var(--font-sans); /* questions read as copy, not as UI labels */
  font-size:1.08rem;
  font-weight:500;
  letter-spacing:-.01em;
  color:var(--grey-700);
  transition:color .25s var(--ease);
}
.accordion-trigger:hover,
.accordion-item.is-open .accordion-trigger{color:var(--ink)}
.accordion-trigger:focus-visible{outline:2px solid var(--purple);outline-offset:4px;border-radius:4px}
/* Plus → minus: the vertical bar turns onto the horizontal one. The icon
   also answers the press (a quick scale-down), the row itself is too wide
   to scale without looking odd. All motion here shares the .25s panel beat. */
.accordion-icon{
  position:relative;
  flex:none;
  width:14px;
  height:14px;
  transition:transform .12s ease-out;
}
.accordion-trigger:active .accordion-icon{transform:scale(.85)}
.accordion-icon::before,
.accordion-icon::after{
  content:"";
  position:absolute;
  inset:0;
  margin:auto;
  background:currentColor;
  transition:transform .25s var(--ease);
}
.accordion-icon::before{width:14px;height:2px}
.accordion-icon::after{width:2px;height:14px}
.accordion-item.is-open .accordion-icon::after{transform:rotate(90deg)}
/* The answer unfolds: a grid row from 0fr to 1fr (so the height animates
   to whatever the content needs), the copy fading and settling down 4px.
   Closed panels are visibility:hidden — the transition delays that until
   the fold has finished — so links inside are unreachable by keyboard. */
.accordion-panel{
  display:grid;
  grid-template-rows:0fr;
  opacity:0;
  visibility:hidden;
  color:var(--grey-700);
  font-size:.95rem;
  transition:grid-template-rows .25s var(--ease),opacity .18s var(--ease),visibility 0s .25s;
}
.accordion-panel-inner{
  min-height:0;
  overflow:hidden;
  padding:0 2.5rem 0 0;
  transform:translateY(-4px);
  transition:transform .25s var(--ease);
}
.accordion-panel-inner > :last-child{padding-bottom:1.5rem}
.accordion-panel a{color:var(--purple);text-decoration:underline}
.accordion-item.is-open .accordion-panel{
  grid-template-rows:1fr;
  opacity:1;
  visibility:visible;
  transition:grid-template-rows .25s var(--ease),opacity .25s var(--ease) .05s,visibility 0s;
}
.accordion-item.is-open .accordion-panel-inner{transform:none}
@media (prefers-reduced-motion:reduce){
  .accordion-panel{transition:opacity .2s var(--ease),visibility 0s}
  .accordion-item.is-open .accordion-panel{transition:opacity .2s var(--ease),visibility 0s}
  .accordion-panel-inner,.accordion-icon,.accordion-icon::before,.accordion-icon::after{transition:none}
}

/* ---------- Utility bar ----------
   Same canvas as the page; a hairline under it (and one before the search)
   does the separating instead of a colour fill. Two groups balance the
   row against the header below (logo | menu | CTA): contact links at the
   left, aligned with the logo, and account links + product search at the
   right, over the CTA. The search field and its results are positioned
   off .nav-search-wrap inside .utility-search, so the row must not clip
   (the link strips own the mobile horizontal scroll instead). */
.utility-bar{
  position:relative;
  color:var(--ink);
  border-bottom:1px solid var(--grey-300);
}
.utility-bar.is-searching{z-index:70} /* above the sticky header, so the results panel paints over the nav */
.utility-bar-inner{
  display:flex;
  align-items:stretch;
  justify-content:space-between;
  gap:1.5rem;
  min-height:38px;
}
.utility-links{
  display:flex;
  align-items:center;
  gap:1.5rem;
  min-width:0;
  overflow-x:auto;
  scrollbar-width:none;
}
.utility-links::-webkit-scrollbar{display:none}
.utility-link{
  flex:none;
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--grey-700);
  white-space:nowrap;
  transition:color .2s var(--ease);
}
.utility-link:hover{color:var(--ink)}
.utility-end{display:flex;align-items:stretch;gap:1.5rem;min-width:0}
/* While searching the field runs over the row, so the links step back. */
.utility-links{transition:opacity .2s var(--ease)}
.utility-bar.is-searching .utility-links{opacity:0;pointer-events:none}
@media (max-width:640px){
  .utility-links--account{display:none} /* contact + search only on phones */
  .utility-bar-inner{min-height:44px} /* the search trigger fills the row: a full-height touch target */
}
.utility-search{
  position:relative;
  display:flex;
  align-items:center;
  flex:none;
  padding-left:1.25rem;
  border-left:1px solid var(--grey-300);
}

/* ---------- Header / nav ----------
   Sits on the same grey canvas as the page body — the logo and nav
   links float on it directly, the link group in its own white pill.
   .is-dark (toggled by main.js as dark sections scroll past) swaps the
   header to ink so a dark section is never seen through a black logo. */
.site-header{
  position:sticky;
  top:0;
  z-index:60;
  background:transparent;
  transition:background-color .35s var(--ease);
}
.site-header.is-dark .nav-brand-mark{filter:invert(1)}
.nav-inner{
  position:relative;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:1rem;
  height:var(--header-h);
  padding:0 var(--gutter);
}
/* Three zones — logo | menu | CTA — on a 1fr auto 1fr grid so the menu
   pill sits on the true centre of the header whatever the logo and the
   button measure. On mobile the menu leaves the flow (fixed sheet), the
   middle track collapses and the two 1fr tracks keep logo and toggle at
   the edges. */
.nav-left{grid-column:1;display:flex;align-items:center;gap:1rem;justify-self:start}
.nav-inner > .nav-menu{grid-column:2}
.nav-right{grid-column:3;display:flex;align-items:center;gap:1.5rem;justify-self:end}
/* Brand: at the top of the page the full logo — the AOM mark with the
   "The Art of Medicine" wordmark under it, laid out in the proportions of
   the brand file (269×114: mark at x7.5 w253.8 h71.1, wordmark at y89.8),
   50px tall. Once the page scrolls (.site-header.is-scrolled, main.js) the
   mark itself shrinks to the 92px compact size and settles on the header's
   centre line while the wordmark fades up and out — a morph, not a swap, so
   the eye follows one shape. Transforms and opacity only: the 118×50 box is
   fixed, so the search button beside it never moves. */
.nav-brand{position:relative;display:block;width:118px;height:50px;color:var(--ink)}
.nav-brand-mark,
.nav-brand-word{position:absolute;left:0;display:block;height:auto;color:var(--ink);transition:filter .3s var(--ease)}
.nav-brand-mark{
  top:0;
  left:3.3px;                 /* 7.5/114 × 50 */
  width:111.3px;              /* 253.8/114 × 50, so the mark is 31.2px tall */
  transform-origin:left center;
  transition:transform .5s var(--ease),filter .3s var(--ease);
}
.nav-brand-word{
  top:39.4px;                 /* 89.8/114 × 50 */
  width:118px;
  transition:opacity .28s var(--ease),transform .28s var(--ease),filter .3s var(--ease);
}
/* Scrolled: 92px ÷ 111.3px = .8266; the 31.2px mark becomes 25.8px, and
   moving it 9.4px down puts its centre (15.6px) on the box's centre (25px). */
.site-header.is-scrolled .nav-brand-mark{transform:translateY(9.4px) scale(.8266)}
.site-header.is-scrolled .nav-brand-word{opacity:0;transform:translateY(-6px);transition:opacity .2s var(--ease),transform .2s var(--ease),filter .3s var(--ease)}
.site-header.is-dark .nav-brand-word{filter:invert(1)}
@media (prefers-reduced-motion:reduce){
  .nav-brand-mark,.nav-brand-word{transition:filter .3s var(--ease)}
}
.nav-brand-name{
  font-family:var(--font-mono);
  font-size:.66rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  line-height:1.35;
  color:var(--grey-700);
}
/* Compact pill: sized so its height (~42px) matches the Get Started
   button beside it — it used to be ~50px, visibly heavier than the CTA —
   and so a full menu leaves room for the search pill down to ~1150px. */
.nav-menu{
  display:flex;
  align-items:center;
  gap:.1rem;
  background:var(--white);
  border-radius:var(--radius-pill);
  padding:.18rem;
}
.nav-item{position:relative}
.nav-link{
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  padding:.33rem .75rem;
  border-radius:var(--radius-pill);
  font-family:var(--font-mono);
  font-size:.8rem;
  font-weight:400;
  color:var(--ink);
  transition:background .2s var(--ease),color .2s var(--ease);
}
.nav-link:hover{background:var(--grey-100);color:var(--ink)}
/* The caret is a 9px box showing two edges, turned 45deg so the corner points
   down; translateY comes FIRST so the optical nudge stays vertical whatever
   the angle (after the rotate it would slide along the turned axis). Open:
   half a turn, corner up, nudged the other way; ease-in-out, it moves on screen. */
.nav-caret{width:9px;height:9px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .35s var(--ease-in-out)}
.nav-item:hover .nav-caret,
.nav-item:focus-within .nav-caret{transform:translateY(2px) rotate(225deg)}   /* points up while the panel is open */
.nav-dropdown{
  position:absolute;
  top:calc(100% + .4rem);
  left:0;
  width:max-content;          /* as wide as its longest title, never narrower than the pill */
  min-width:100%;
  background:var(--white);
  border:1px solid var(--grey-200);
  border-radius:14px;
  box-shadow:0 18px 40px rgba(5,6,8,.10);
  padding:.45rem;
  opacity:0;
  visibility:hidden;
  transform-origin:top left;
  transform:translateY(6px) scale(.98);
  /* This is the EXIT transition (state we return to): fast. */
  transition:opacity .12s var(--ease),transform .12s var(--ease),visibility 0s .12s;
}
/* Bridge over the .4rem gap between the pill and the panel, so the cursor
   crossing it never drops the hover (which made the panel flicker). */
.nav-dropdown::before{content:"";position:absolute;left:0;right:0;top:-.6rem;height:.6rem}
.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown{
  opacity:1;visibility:visible;transform:none;
  /* ENTER: a touch slower than exit, scaling out from the trigger corner. */
  transition:opacity .18s var(--ease),transform .18s var(--ease),visibility 0s;
}
.nav-dropdown-link{
  display:block;
  padding:.55rem .9rem;
  border-radius:10px;
  font-family:var(--font-mono);
  font-size:.84rem;
  transition:background .2s var(--ease),color .2s var(--ease);
}
.nav-dropdown-link:hover{background:var(--grey-100);color:var(--ink)}
.nav-actions{display:flex;align-items:center;gap:.75rem}

@media (prefers-reduced-motion:reduce){
  .nav-dropdown{transform:none;transition:opacity .15s var(--ease),visibility 0s .15s}
  .nav-item:hover .nav-dropdown,.nav-item:focus-within .nav-dropdown{transition:opacity .15s var(--ease),visibility 0s}
  .nav-caret{transition:none}
}

/* Mobile nav */
.nav-toggle{display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-width:44px;min-height:44px;padding:.6rem;margin-right:-.6rem;z-index:70}
.nav-toggle-bar{width:22px;height:2px;background:var(--ink);transition:transform .24s var(--ease),opacity .24s var(--ease)}
.nav-menu-cta{display:none}

.nav-menu-extra,.nav-menu-search{display:none}
@media (max-width:1080px){
  .utility-bar{display:none} /* its links and search move into the sheet below */
  .nav-toggle{display:flex}
  /* Open sheet: header pinned and opaque so it can neither scroll away nor
     show the page through it; main keeps its height so nothing jumps. */
  .site-header.menu-open{position:fixed;top:0;left:0;right:0;background:var(--grey-200)}
  .site-header.menu-open + .main-wrapper{padding-top:var(--header-h)}
  .site-header.menu-open .nav-brand-mark{filter:none}
  .site-header.menu-open .nav-brand-word{filter:none}
  /* Full-screen sheet below the header. Longhand offsets (not `inset` +
     var()) and an explicit height keep WebKit happy; --menu-top is set from
     JS to the header's real bottom edge, which sits lower than --header-h
     while the utility bar is still on screen. */
  .nav-menu{
    position:fixed;
    top:var(--menu-top,var(--header-h));
    left:0;
    right:0;
    height:calc(100vh - var(--menu-top,var(--header-h)));
    height:calc(100dvh - var(--menu-top,var(--header-h)));
    flex-direction:column;
    align-items:stretch;
    gap:0;
    background:var(--white);
    border-radius:0;
    box-shadow:none;
    padding:.5rem var(--gutter) 2rem;
    display:flex;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    -ms-overflow-style:none;
    opacity:0;
    visibility:hidden;
    transform:translateY(-10px);
    /* EXIT (the state we return to): quick, .2s. ENTER below is .35s. */
    transition:opacity .2s var(--ease),transform .2s var(--ease),visibility 0s .2s;
  }
  .nav-menu::-webkit-scrollbar{display:none;width:0;height:0}
  .nav-menu.is-open{opacity:1;visibility:visible;transform:none;transition:opacity .35s var(--ease),transform .35s var(--ease),visibility 0s}
  /* The sheet's rows settle in one after another (40ms apart) as it opens;
     they leave together with the sheet. Decorative only: taps land at once. */
  .nav-menu > *{opacity:0;transform:translateY(8px);transition:opacity .2s var(--ease),transform .2s var(--ease)}
  .nav-menu.is-open > *{opacity:1;transform:none;transition:opacity .3s var(--ease),transform .4s var(--ease)}
  .nav-menu.is-open > :nth-child(2){transition-delay:.04s}
  .nav-menu.is-open > :nth-child(3){transition-delay:.08s}
  .nav-menu.is-open > :nth-child(4){transition-delay:.12s}
  .nav-menu.is-open > :nth-child(5){transition-delay:.16s}
  .nav-menu.is-open > :nth-child(6){transition-delay:.2s}
  .nav-menu.is-open > :nth-child(7){transition-delay:.24s}
  .nav-menu.is-open > :nth-child(n+8){transition-delay:.28s}
  .nav-item{border-bottom:1px solid var(--grey-200)}
  .nav-link{
    width:100%;
    justify-content:space-between;
    padding:1.15rem .1rem;
    border-radius:0;
    font-size:1.25rem;
    font-weight:400;
    letter-spacing:0;
  }
  .nav-link:hover{background:none;color:var(--ink)}
  .nav-link:active{opacity:.55;transition:opacity .1s ease-out}
  .nav-item:hover .nav-caret{transform:translateY(-2px) rotate(45deg)}   /* on the sheet only an open item flips it */
  .nav-item.is-open .nav-caret{transform:translateY(2px) rotate(225deg)}
  /* Sub-items fold open to their real height (main.js measures it and sets
     the inline height), so closing starts moving at once — a fixed max-height
     used to spend its first stretch on nothing. Links settle in behind. */
  .nav-dropdown{
    position:static;
    width:auto;
    min-width:0;
    opacity:1;
    visibility:visible;
    transform:none;
    border:0;
    box-shadow:none;
    padding:0;
    height:0;
    overflow:hidden;
    transition:height .3s var(--ease);
  }
  .nav-dropdown::before{content:none}
  .nav-dropdown-link{padding:.75rem .1rem .75rem 1rem;font-size:1.05rem;opacity:0;transform:translateY(-4px);transition:opacity .15s var(--ease),transform .2s var(--ease)}
  .nav-item.is-open .nav-dropdown-link{opacity:1;transform:none;transition:opacity .25s var(--ease) .06s,transform .3s var(--ease)}
  .nav-actions .btn{display:none}
  /* Utility links + search, in the utility bar's own voice, after the items */
  .nav-menu-extra{display:block;margin-top:.6rem} /* the last item's own rule separates them: no second line */
  .nav-menu-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 1.5rem}
  .nav-menu-link{
    display:flex;
    align-items:center;
    min-height:44px;
    font-family:var(--font-mono);
    font-size:.76rem;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--grey-700);
  }
  .nav-menu-link:hover{color:var(--ink)}
  .nav-menu-search{display:block;margin:.6rem 0 1.2rem} /* first thing in the sheet, above Products */
  .nav-menu-search-field{
    display:flex;
    align-items:center;
    gap:.75rem;
    min-height:48px;
    padding:0 1.1rem;
    border:1px solid var(--grey-300);
    border-radius:var(--radius-pill);
    color:var(--grey-700);
    transition:border-color .2s var(--ease);
  }
  .nav-menu-search-field:focus-within{border-color:var(--ink);color:var(--ink)}
  .nav-menu-search-field svg{width:18px;height:18px;flex:none}
  .nav-menu-search-input{
    flex:1;
    min-width:0;
    border:0;
    background:none;
    font:inherit;
    font-size:1rem;
    color:var(--ink);
    caret-color:var(--purple);
    -webkit-appearance:none;
    appearance:none;
  }
  .nav-menu-search-input:focus{outline:none}
  .nav-menu-search-input::placeholder{color:var(--grey-400)}
  .nav-menu-search-input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
  /* results render inside the sheet, in flow, not as a floating panel */
  .nav-menu .nav-search-results{position:static;width:auto;max-height:none;margin-top:1rem;padding:0;background:none;box-shadow:none;border-radius:0;z-index:auto}
  .nav-menu-cta{display:flex;justify-content:center;width:100%;margin-top:1.8rem;padding:1rem 1.4rem;font-size:1.25rem;font-weight:400;letter-spacing:0} /* same voice as the items */
  .nav-toggle.is-open .nav-toggle-bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle.is-open .nav-toggle-bar:nth-child(2){opacity:0}
  .nav-toggle.is-open .nav-toggle-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  @media (prefers-reduced-motion:reduce){
    .nav-menu,.nav-menu > *,.nav-dropdown-link{transform:none}
    .nav-menu{transition:opacity .2s var(--ease),visibility 0s .2s}
    .nav-menu.is-open{transition:opacity .2s var(--ease),visibility 0s}
    .nav-menu.is-open > *{transition-delay:0s}
    .nav-dropdown{transition:height .2s var(--ease)}
  }
}

/* ---------- Nav search ----------
   Lives in the utility bar, at the right, like Strive's top-bar search:
   the trigger is a mono "Search" label with a lens that crossfades to a
   close X in place, so it never changes size. Clicking it opens a plain
   inline field — no fill, no shadow; the bar's own hairlines frame it —
   growing LEFTWARDS from the trigger over the quick links, which fade out
   (anchored right on the zero-width .nav-search-wrap, so the trigger is
   its fixed edge). The results panel drops under the bar as a card from
   the same right edge.
   width is used instead of flex-grow: flex-grow is listed as animatable
   but transitions unreliably in practice. The pill's expanded width is
   a fixed target, capped in JS ([data-search-root] in main.js) against
   the room to the left of the trigger so it never runs into the links. */
.nav-search-trigger{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  flex:none;
  height:100%;
  padding:0;
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--grey-700);
  transition:color .2s var(--ease);
}
.nav-search-trigger:hover{color:var(--ink)}
.nav-search-trigger:active,.nav-toggle:active{transform:scale(.96);transition:transform .1s ease-out}
.nav-search-icon{position:relative;width:16px;height:16px;flex:none}
.nav-search-trigger svg{
  position:absolute;
  top:50%;
  left:50%;
  width:16px;
  height:16px;
  transform:translate(-50%,-50%);
  transition:opacity .2s var(--ease);
}
.nav-search-icon-close{opacity:0}
.utility-bar.is-searching .nav-search-trigger{color:var(--ink)}
.utility-bar.is-searching .nav-search-icon-open{opacity:0}
.utility-bar.is-searching .nav-search-icon-close{opacity:1}
/* The wrap takes zero space in the row — the trigger sits exactly where
   it would without it — and the pill and results panel inside are
   positioned off it instead of occupying flex space themselves, so the
   pill floats over the quick links as it grows rather than pushing them. */
.nav-search-wrap{
  position:relative;
  flex:none;
  width:0;
  height:100%;
}
/* --search-inset: the pill and panel end just short of the hairline before
   the trigger (its padding + border + a little air), so "Search" and the
   separator stay untouched while the pill grows over the quick links. */
.nav-search-wrap{--search-inset:calc(1.25rem + 1px + .6rem)}
.nav-search-bar{
  position:absolute;
  top:50%;
  right:var(--search-inset);
  transform:translateY(-50%);
  display:flex;
  flex:none;
  width:0;
  min-width:0;
  align-items:center;
  overflow:hidden;
  padding:.4rem 0;
  opacity:0;
  transition:width .3s var(--ease),opacity .2s var(--ease);
}
.utility-bar.is-searching .nav-search-bar{opacity:1}
.nav-search-input{
  flex:1;
  min-width:0;
  border:0;
  background:none;
  font:inherit;
  font-size:.92rem;
  color:var(--ink);
  caret-color:var(--purple);
}
.nav-search-input:focus{outline:none}
.nav-search-input::placeholder{color:var(--grey-400)}
.nav-search-results{
  position:absolute;
  top:100%;
  right:var(--search-inset);
  z-index:40;
  width:min(800px,80vw);
  margin-top:var(--frame-gap);
  max-height:70vh;
  overflow-y:auto;
  background:var(--white);
  border-radius:var(--radius-card);
  box-shadow:0 24px 48px rgba(5,6,8,.16);
  padding:1.2rem;
}
.nav-search-results[hidden]{display:none}
/* Stacked mode — set from JS when there isn't a usable ~200px to the left
   of the trigger (the quick links fill the row on narrower screens, and
   always on phones). The pill must never run over the links, so instead
   of growing beside them, pill and results both drop under the bar,
   gutter to gutter, positioned off .utility-bar itself — the wrap and
   .utility-search give up their positioning so the bar is the context.
   Width is owned by left/right here, so JS clears its inline widths. */
.utility-bar.is-stacked .nav-search-wrap,
.utility-bar.is-stacked .utility-search{position:static}
.utility-bar.is-stacked .nav-search-bar,
.utility-bar.is-stacked .nav-search-results{
  position:absolute;
  left:var(--gutter);
  right:var(--gutter);
  width:auto;
  transform:none;
}
/* Off the bar the field floats over the header, so here it needs a
   surface: it becomes the top row of the results card (white, shared
   corners, hairline between), a single card once results are in. */
.utility-bar.is-stacked .nav-search-bar{
  top:calc(100% + .5rem);
  z-index:41;
  height:2.8rem;
  padding:0 1.1rem;
  background:var(--white);
  border-radius:var(--radius-card) var(--radius-card) 0 0;
  border-bottom:1px solid var(--grey-200);
}
.utility-bar.is-stacked .nav-search-bar:has(+ .nav-search-results[hidden]){border-radius:var(--radius-card);border-bottom-color:transparent}
.utility-bar.is-stacked .nav-search-results{
  top:calc(100% + .5rem + 2.8rem);
  margin-top:0;
  border-radius:0 0 var(--radius-card) var(--radius-card);
}
/* Column count follows the panel width, capped at 4: the min column is
   the larger of 145px and a quarter of the row (minus its share of the
   1rem gap), so a wide stacked panel still stops at 4, while 145px takes
   over on narrow panels ⇒ 3 around 560px, 2 around 400px. */
.nav-search-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(max(145px,calc(25% - .75rem)),1fr));
  gap:1rem;
}
.nav-search-result{
  display:block;
  border-radius:12px;
  transition:transform .2s var(--ease);
}
@media (hover:hover) and (pointer:fine){.nav-search-result:hover{transform:translateY(-3px)}}
.nav-search-result:active{transform:scale(.985);transition:transform .1s ease-out}
.nav-search-result-media{
  aspect-ratio:1;
  background:var(--grey-100);
  border-radius:12px;
  overflow:hidden;
  margin-bottom:.7rem;
}
.nav-search-result-media img{display:block;width:100%;height:100%;object-fit:cover}
.nav-search-tag{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:.62rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--purple);
  background:var(--purple-100);
  padding:.25rem .6rem;
  border-radius:var(--radius-pill);
  margin-bottom:.5rem;
}
.nav-search-result-name{display:block;font-size:.92rem;font-weight:550;color:var(--ink)}
.nav-search-result-meta{display:block;margin-top:.2rem;font-size:.78rem;color:var(--grey-700)}
.nav-search-empty{padding:1.5rem;text-align:center;color:var(--grey-400);font-size:.9rem}
@media (max-width:640px){
  .nav-search-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- Footer ----------
   Layout modeled on strivepharmacy.com's footer: brand + newsletter first,
   then four audience-based link columns, a big wordmark, and a slim
   bottom bar. Background matches the page canvas (not a dark card) so it
   reads as a continuation of the page, same as the header/utility bar. */
.site-footer{background:var(--grey-200);color:var(--ink);flex-shrink:0}
.footer-top{
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr 1fr 1fr;
  gap:3rem;
  padding:4.5rem var(--gutter) 3.5rem;
}
.footer-brand-mark{width:96px;height:auto}
.footer-newsletter-title{
  margin-top:1.8rem;
  font-size:1.3rem;
  font-weight:500;
  letter-spacing:-.01em;
  max-width:18ch;
}
.footer-newsletter-form{position:relative;margin-top:1.5rem;max-width:300px}
.footer-newsletter-input{
  width:100%;
  font:inherit;
  font-size:.9rem;
  padding:.85rem 3.2rem .85rem 1.1rem;
  border:1.5px solid rgba(5,6,8,.18);
  border-radius:var(--radius-pill);
  background:transparent;
  color:var(--ink);
  transition:border-color .25s var(--ease);
}
.footer-newsletter-input::placeholder{color:var(--grey-400)}
.footer-newsletter-input:focus{outline:none;border-color:var(--ink)}
/* The submit is a button like any other: the same colour sweep as .btn (an
   ink fill scales in from the left over the purple, .45s), the same press. */
.footer-newsletter-submit{
  position:absolute;
  right:6px;
  top:50%;
  transform:translateY(-50%);
  width:40px;
  height:40px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  isolation:isolate;
  background:var(--purple);
  color:var(--white);
  transition:transform .3s var(--ease);
}
.footer-newsletter-submit::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:var(--ink);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .45s var(--ease);
}
.footer-newsletter-submit svg{width:15px;height:15px;transition:transform .45s var(--ease)}
.footer-newsletter-submit:active{transform:translateY(-50%) scale(.94);transition:transform .1s ease-out}
@media (hover:hover) and (pointer:fine){
  .footer-newsletter-submit:hover::before{transform:scaleX(1)}
  .footer-newsletter-submit:hover svg{transform:translateX(2px)}   /* the arrow leans into the send */
}
@media (prefers-reduced-motion:reduce){
  .footer-newsletter-submit::before,.footer-newsletter-submit svg{transition:none}
}
.footer-newsletter-success{display:none;margin-top:1.5rem;font-size:.9rem;color:var(--grey-700);max-width:300px}
.footer-seal{margin-top:1.8rem;display:inline-block}
.footer-heading{font-weight:400;
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--grey-400);
  margin-bottom:1.1rem;
}
.footer-links{display:flex;flex-direction:column;gap:.55rem}
.footer-link{font-family:var(--font-mono);font-size:.84rem;color:var(--grey-700);transition:color .2s var(--ease)}
.footer-link:hover{color:var(--ink)}

.footer-wordmark{padding:2rem var(--gutter)}
.footer-wordmark-img{display:block;width:100%;height:auto}

.footer-bottom{
  padding:1.4rem var(--gutter) 2rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem 2rem;
  flex-wrap:wrap;
}
.footer-legal{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1.4rem}
.footer-copy{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.05em;color:var(--grey-400)}
.footer-legal-link{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.05em;color:var(--grey-400);transition:color .2s var(--ease)}
.footer-legal-link:hover{color:var(--ink)}
.footer-tagline-right{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.05em;color:var(--grey-400)}
.footer-social{display:flex;gap:.6rem}
.footer-social-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border:1px solid rgba(5,6,8,.18);
  border-radius:50%;
  color:var(--grey-700);
  transition:border-color .25s var(--ease),color .25s var(--ease),background .25s var(--ease);
}
.footer-social-link:hover{border-color:var(--grey-700);background:var(--grey-700);color:var(--white)}
.footer-social-icon{width:16px;height:16px;display:block}

@media (max-width:900px){
  .footer-top{grid-template-columns:1fr 1fr;gap:2.5rem;padding:3.5rem var(--gutter) 2.5rem}
  .footer-brand{grid-column:1/-1}
}
@media (max-width:560px){
  .footer-top{grid-template-columns:1fr}
  .footer-brand{grid-column:auto}
}

/* ---------- Scroll reveal (progressive enhancement, no page transitions) ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
}

/* ---------- Skip link (ADA) ---------- */
.skip-link{
  position:absolute;
  top:-100px;
  left:1rem;
  z-index:100;
  background:var(--ink);
  color:var(--white);
  padding:.7rem 1.2rem;
  border-radius:0 0 10px 10px;
  transition:top .2s var(--ease);
}
.skip-link:focus{top:0}