/* ============================================================================
   THE NURSE BRIDGE — SHARED CINEMATIC DESIGN SYSTEM
   ----------------------------------------------------------------------------
   ONE stylesheet, ONE look. Extracted from index.html + nurses.html so every
   page shares the same dark-cinematic, physician-led, education-only language.

   Dark cinematic (#080a0e) · warm gold (#e0b877) · serif display (Iowan/
   Palatino) · mono labels · film grain · scroll reveals · glass cards.

   USAGE (new / sweep pages):
     <link rel="stylesheet" href="/css/site.css">      <-- link this LAST
   It is fully self-contained (resets, tokens, base type, nav, footer, buttons,
   cards, sections, reveals, grain). If /styles.css is also linked, put
   site.css AFTER it so the cinematic layer wins.

   The canonical nav + footer HTML lives in /css/_partials.html — paste those
   blocks verbatim so every page carries an identical header and footer.

   Motion: reveals are JS-optional. Without JS every .reveal is fully visible.
   With the tiny IntersectionObserver from _partials.html they fade up on scroll.
   GSAP (/vendor/gsap.min.js + ScrollTrigger) is optional polish, not required.
   ============================================================================ */

/* ---------------------------------------------------------------- TOKENS -- */
:root{
  /* surfaces */
  --ink:#080a0e;                     /* page base — dark cinematic */
  --ink-2:#0b0f16;                   /* raised ink */
  --ink-3:#10151d;                   /* panels on ink */
  --glass:rgba(14,18,26,.55);        /* frosted panel fill */
  --glass-2:rgba(9,12,18,.62);       /* denser glass (grid cells) */
  --glass-line:rgba(224,184,119,.16);/* gold hairline on glass */
  --hairline:rgba(224,184,119,.12);  /* soft divider */
  --hairline-cool:rgba(255,255,255,.08);

  /* brand gold */
  --gold:#e0b877;
  --gold-bright:#f4d59a;
  --gold-deep:#b98f4e;
  --gold-dim:#9a7a48;

  /* text */
  --text:#e8edf4;
  --text-soft:#cfd6e0;
  --muted:#8a94a3;
  --heading:#fdf7ec;                 /* warm near-white for serif headings */

  /* accents */
  --good:#7aa88a;
  --danger:#c76a5a;
  --teal-glow:#4f8a86;

  /* type */
  --font-display:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif;
  --font-mono:"Cascadia Code","Cascadia Mono",Consolas,"Courier New",monospace;
  --font-body:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  /* geometry */
  --radius:10px;
  --radius-sm:6px;
  --max-width:1120px;
  --nav-h:66px;

  /* section rhythm */
  --sec-pad:120px;
  --sec-pad-sm:88px;
}

/* --------------------------------------------------------------- RESET -- */
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--ink);
  color:var(--text-soft);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block;}
::selection{background:rgba(224,184,119,.28); color:#fff;}

a{color:var(--gold); text-decoration:none;}
a:hover{color:var(--gold-bright); text-decoration:underline;}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--gold); outline-offset:2px;
}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:400;
  color:var(--heading);
  letter-spacing:-.01em;
  line-height:1.1;
  margin:0 0 .5em;
}
h1{font-size:clamp(2.4rem,7vw,5.4rem); line-height:1.02;}
h2{font-size:clamp(1.8rem,4.4vw,3.1rem);}
h3{font-size:1.25rem;}
p{margin:0 0 1em;}
p.lede{color:var(--text-soft); font-size:clamp(1.02rem,1.5vw,1.24rem); line-height:1.6;}
strong,b{color:var(--text);}
.muted{color:var(--muted);}

/* ---------------------------------------------------------- LAYOUT WRAP -- */
.container,.cine-wrap{
  max-width:var(--max-width);
  margin:0 auto;
  padding:0 24px;
}
.container-narrow{max-width:760px; margin:0 auto; padding:0 24px;}

/* section rhythm — matches index/nurses cadence */
.section,.cine-sec{position:relative; z-index:5; padding:var(--sec-pad) 0;}
.section-tight{padding:64px 0;}
@media(max-width:760px){
  .section,.cine-sec{padding:var(--sec-pad-sm) 0;}
}

/* keep real content above any fixed cinematic backdrop */
main{position:relative; z-index:5;}

/* ------------------------------------------------------------- EYEBROWS -- */
/* .tag = the gold mono kicker with a leading rule (index/nurses canonical) */
.tag{
  font-family:var(--font-mono);
  text-transform:uppercase;
  letter-spacing:.28em;
  font-size:.66rem;
  color:var(--gold);
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.tag::before{content:""; width:26px; height:1px; background:var(--gold-deep); display:inline-block;}
/* .eyebrow = simple block kicker (no rule) */
.eyebrow{
  font-family:var(--font-mono);
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:.7rem;
  color:var(--gold);
  display:block;
  margin:0 0 .8em;
}

/* --------------------------------------------------------------- NAV -- */
/* Transparent over the hero, solidifies on scroll via .solid (JS toggles it).
   Paste the canonical markup from _partials.html. */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:80;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .4s ease, border-color .4s ease, backdrop-filter .4s ease;
}
.site-header.solid{
  background:rgba(6,8,12,.82);
  border-bottom-color:var(--glass-line);
  backdrop-filter:saturate(140%) blur(10px);
}
/* opaque-from-top variant for interior pages with no hero image */
.site-header.static-nav{
  position:sticky;
  background:rgba(6,8,12,.9);
  border-bottom-color:var(--glass-line);
  backdrop-filter:saturate(140%) blur(10px);
}
.nav-bar{
  max-width:var(--max-width);
  margin:0 auto;
  padding:14px 24px;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
}
.brand{
  font-family:var(--font-display);
  font-size:1.15rem;
  color:var(--text);
  display:flex; align-items:baseline; gap:8px;
  white-space:nowrap;
}
.brand:hover{text-decoration:none; color:var(--text);}
.brand .mark{color:var(--gold);}
.nav-links{
  display:flex; align-items:center; gap:22px; flex-wrap:wrap;
  font-size:.92rem;
}
.nav-links a{color:var(--muted);}
.nav-links a:hover{color:var(--text); text-decoration:none;}
.nav-links a.current{color:var(--gold);}
.nav-cta{display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.nav-toggle{display:none;}
@media(max-width:860px){
  .nav-links{display:none; width:100%; order:3;}
  .nav-links.open{
    display:flex; flex-direction:column; align-items:flex-start; gap:14px;
    padding-top:12px; margin-top:10px; border-top:1px solid var(--glass-line);
  }
  .nav-toggle{
    display:inline-flex;
    background:none; border:1px solid var(--glass-line); color:var(--text);
    border-radius:var(--radius-sm); padding:6px 12px;
    font-family:var(--font-mono); font-size:.8rem; cursor:pointer;
  }
}

/* ------------------------------------------------------------- BUTTONS -- */
.btn{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 22px;
  border-radius:var(--radius-sm);
  font-size:.94rem; font-family:var(--font-body); line-height:1.2;
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:transform .18s ease, background .3s ease, border-color .3s ease, box-shadow .3s ease, color .3s ease;
}
.btn:hover{text-decoration:none;}

/* primary — gradient gold with a shimmer sweep on hover */
.btn-gold{
  background:linear-gradient(180deg,var(--gold-bright),var(--gold));
  color:#1a1206; font-weight:600; border-color:var(--gold);
  box-shadow:0 10px 40px -12px rgba(224,184,119,.6);
}
.btn-gold:hover{background:linear-gradient(180deg,#ffe6bd,var(--gold-bright)); color:#1a1206;}
.btn-gold::after{
  content:""; position:absolute; top:0; bottom:0; left:-60%; width:45%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg); pointer-events:none;
}
.btn-gold:hover::after{animation:nb-shimmer 1.1s ease;}
@keyframes nb-shimmer{from{left:-60%;} to{left:130%;}}

/* frosted / glass secondary */
.btn-glass{
  background:rgba(255,255,255,.04);
  border:1px solid var(--glass-line);
  color:#e7ebf1; backdrop-filter:blur(4px);
}
.btn-glass:hover{border-color:var(--gold); color:var(--gold-bright);}

/* outline + ghost */
.btn-outline{background:transparent; color:var(--text); border-color:var(--glass-line);}
.btn-outline:hover{border-color:var(--gold); color:var(--gold-bright); box-shadow:0 8px 30px -14px rgba(224,184,119,.5);}
.btn-ghost{background:transparent; color:var(--muted); border-color:transparent; padding:12px 14px;}
.btn-ghost:hover{color:var(--text);}

.btn-block{width:100%;}
.btn-sm{padding:8px 14px; font-size:.85rem;}

/* ---------------------------------------------------------- GLASS CARDS -- */
.glass{
  background:var(--glass);
  border:1px solid var(--glass-line);
  border-radius:var(--radius);
  backdrop-filter:blur(9px) saturate(130%);
  box-shadow:0 30px 80px -40px rgba(0,0,0,.9);
}
.card{
  background:var(--glass);
  border:1px solid var(--glass-line);
  border-radius:var(--radius);
  padding:26px;
  backdrop-filter:blur(8px);
}
.card h3{margin-bottom:10px; color:var(--heading);}
.card p{color:var(--text-soft); margin-bottom:0;}

/* door = clickable card with mono label + gold cta (index/style convention) */
.door{
  display:flex; flex-direction:column; gap:14px;
  background:var(--glass); border:1px solid var(--glass-line);
  border-radius:var(--radius); padding:28px 24px;
  transition:border-color .2s ease, transform .2s ease, box-shadow .3s ease;
}
.door:hover{border-color:var(--gold-dim); transform:translateY(-3px); text-decoration:none; box-shadow:0 30px 60px -40px rgba(0,0,0,.9);}
.door .door-icon{font-family:var(--font-mono); color:var(--gold); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;}
.door h3{color:var(--heading);}
.door p{color:var(--muted); margin-bottom:0; flex-grow:1;}
.door .door-cta{color:var(--gold); font-family:var(--font-mono); font-size:.82rem;}

/* generic responsive grid */
.grid{display:grid; gap:18px;}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));}

/* stat / numbers grid — hairline-separated cells with mono index (index.html) */
.num-grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1px; background:var(--glass-line);
  border:1px solid var(--glass-line); border-radius:12px; overflow:hidden;
}
.num-cell{
  background:var(--glass-2); backdrop-filter:blur(8px);
  padding:38px 26px; min-height:230px;
  display:flex; flex-direction:column; justify-content:flex-end;
  position:relative; overflow:hidden;
}
.num-cell[data-idx]::before{
  content:attr(data-idx); position:absolute; top:18px; right:20px;
  font-family:var(--font-mono); font-size:.66rem; color:var(--gold-deep);
  letter-spacing:.1em; opacity:.7;
}
.num-figure{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(2.1rem,3vw,3.2rem); line-height:1; letter-spacing:-.015em; white-space:nowrap;
  background:linear-gradient(180deg,#fbeed3,var(--gold) 70%,var(--gold-deep));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
}
.num-figure.long{font-size:clamp(1.8rem,2.5vw,2.7rem);}
.num-label{margin-top:16px; color:var(--text-soft); font-size:.94rem; line-height:1.45;}
.num-cite{margin-top:10px; font-family:var(--font-mono); font-size:.64rem; letter-spacing:.06em; color:var(--muted); opacity:.8;}
@media(max-width:860px){.num-grid{grid-template-columns:repeat(2,1fr);} .num-cell{min-height:200px; padding:30px 22px;}}
@media(max-width:460px){.num-grid{grid-template-columns:1fr;}}

/* pull-quote — serif, gold, left rule (index/nurses) */
.pull{
  font-family:var(--font-display);
  font-size:clamp(1.3rem,2.6vw,2rem); line-height:1.3;
  color:var(--gold-bright); margin-top:30px;
  padding-left:22px; border-left:2px solid var(--gold-deep);
}

/* ------------------------------------------------------- HERO GRADIENT -- */
/* gradient serif headline; wrap each animated line in .hl > span (index) or
   .l > span (nurses). .grad-gold paints any inline run with the gold gradient. */
.grad-gold,.hl > span{
  background:linear-gradient(180deg,#fdf5e6 0%,var(--gold) 62%,var(--gold-deep) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 2px 40px rgba(224,184,119,.12);
}
.hl{display:block; overflow:hidden;}
.hl.dim > span{
  background:linear-gradient(180deg,#eef1f6 0%,#aab3c1 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ------------------------------------------------------ SCROLL REVEALS -- */
/* JS-optional. Content is visible by default. A page that arms reveals adds
   `reveal-armed` to <html>; the observer then adds `.in` when each element
   scrolls into view. See _partials.html for the 14-line observer. */
.reveal,.reveal-slow{will-change:transform,opacity;}
html.reveal-armed .reveal{opacity:0; transform:translateY(30px);}
html.reveal-armed .reveal-slow{opacity:0; transform:translateY(46px);}
/* the .in state must out-specify the armed hidden rule above (html.reveal-armed
   .reveal == 0,2,1), so scope the visible state under html.reveal-armed too
   (0,3,1). Without this the observer adds .in but the element stays hidden. */
html.reveal-armed .reveal.in,
html.reveal-armed .reveal-slow.in,
.reveal.in,.reveal-slow.in{
  opacity:1; transform:none;
  transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
}
html.reveal-armed .reveal-slow.in,
.reveal-slow.in{transition-duration:1.25s;}
/* GSAP path: index/nurses add `gsap-ready` and drive tweens directly */
html.gsap-ready .reveal{opacity:0; transform:translateY(30px);}
html.gsap-ready .reveal-slow{opacity:0; transform:translateY(46px);}

/* ---------------------------------------------------- CINEMATIC BACKDROP */
/* Optional fixed atmosphere layers. Drop these divs right after <body>:
     <div class="cine-plate" style="background-image:url('/img/nb-hero.png')"></div>
     <div class="sky-scrim"></div><div class="vignette"></div><div class="grain"></div>
*/
.cine-plate{
  position:fixed; inset:0; z-index:0;
  background-position:center 42%; background-size:cover; background-repeat:no-repeat;
  opacity:.55; transform:scale(1.06);
}
.sky-scrim{
  position:fixed; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(180deg,rgba(8,10,14,.72) 0%,rgba(8,10,14,0) 26%,rgba(8,10,14,0) 62%,rgba(8,10,14,.86) 100%);
}
.vignette{
  position:fixed; inset:0; z-index:3; pointer-events:none; mix-blend-mode:multiply;
  background:radial-gradient(120% 90% at 50% 42%,rgba(8,10,14,0) 42%,rgba(8,10,14,.55) 82%,rgba(8,10,14,.9) 100%);
}
/* film grain — the signature texture across every page */
.grain{
  position:fixed; inset:-120px; z-index:4; pointer-events:none;
  opacity:.06; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.86' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:nb-grain .5s steps(3) infinite;
}
@keyframes nb-grain{
  0%{transform:translate(0,0)} 33%{transform:translate(-6%,4%)} 66%{transform:translate(5%,-5%)} 100%{transform:translate(-3%,2%)}
}

/* thin top scroll-progress rail (optional; JS sets width of > i) */
.scroll-rail{position:fixed; top:0; left:0; height:2px; width:100%; z-index:90; background:transparent; pointer-events:none;}
.scroll-rail > i{display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--gold-deep),var(--gold-bright)); box-shadow:0 0 12px rgba(224,184,119,.7);}

/* --------------------------------------------------------------- FORMS -- */
label{
  display:block; font-family:var(--font-mono); font-size:.78rem;
  text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:6px;
}
input,select,textarea{
  width:100%; background:var(--ink-3); border:1px solid var(--glass-line); color:var(--text);
  border-radius:var(--radius-sm); padding:11px 12px; font-size:.96rem;
  font-family:var(--font-body); margin-bottom:18px;
}
input:focus,select:focus,textarea:focus{border-color:var(--gold-dim); outline:none;}
textarea{resize:vertical; min-height:100px;}

/* -------------------------------------------------------------- TABLES -- */
table.compare{width:100%; border-collapse:collapse; font-size:.92rem;}
table.compare th,table.compare td{text-align:left; padding:12px 14px; border-bottom:1px solid var(--glass-line); vertical-align:top;}
table.compare th{font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:400;}
table.compare tr:last-child td{border-bottom:none;}
.table-scroll{overflow-x:auto;}

/* --------------------------------------------------------------- BADGES -- */
.badge{
  display:inline-block; font-family:var(--font-mono); font-size:.68rem;
  text-transform:uppercase; letter-spacing:.08em; padding:3px 8px;
  border-radius:3px; border:1px solid var(--glass-line); color:var(--muted);
}
.badge-gold{color:var(--gold); border-color:var(--gold-dim);}

/* ----------------------------------------------------------- CTA BANNER -- */
.cta-banner{
  background:var(--glass); border:1px solid var(--glass-line);
  border-radius:var(--radius); padding:48px 40px; text-align:center;
  backdrop-filter:blur(8px);
}
.cta-banner h2{margin-bottom:10px;}
.cta-banner p{color:var(--text-soft);}
.cta-banner .btn{margin-top:12px;}

/* -------------------------------------------------------------- FOOTER -- */
/* Sits on solid ink beneath all backdrop layers. */
.site-footer{
  position:relative; z-index:6;
  background:var(--ink); border-top:1px solid var(--glass-line);
  padding:48px 0 64px; color:var(--muted); font-size:.85rem;
}
.footer-grid{display:flex; flex-wrap:wrap; gap:32px; justify-content:space-between; margin-bottom:28px;}
.footer-col h4{font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); margin-bottom:12px;}
.footer-col a{display:block; color:var(--muted); margin-bottom:8px; font-size:.88rem;}
.footer-col a:hover{color:var(--gold); text-decoration:none;}
.disclaimer{border-top:1px solid var(--glass-line); padding-top:20px; font-size:.78rem; line-height:1.6; color:var(--muted);}
.disclaimer strong{color:var(--text);}

/* ------------------------------------------------------------ UTILITIES -- */
.stack{display:flex; flex-direction:column; gap:10px;}
.row{display:flex; gap:12px; flex-wrap:wrap; align-items:center;}
.center{text-align:center;}
.mt-0{margin-top:0;} .mb-0{margin-bottom:0;}
.hero-cta{display:flex; gap:16px; flex-wrap:wrap; margin-top:38px;}
hr.rule{border:none; border-top:1px solid var(--glass-line); margin:32px 0;}
.fr-note{font-style:italic; color:var(--muted); font-size:.9rem;}

/* ---------------------------------------------- INTERIOR PAGE HERO -- */
/* Cinematic hero for content pages: optional image plate + grain fade.
   Usage:
     <section class="page-hero"><div class="ph-bg" style="background-image:url('/img/x.png')"></div>
       <div class="container-narrow"><span class="tag">…</span><h1>…</h1><p class="lede">…</p></div></section> */
.page-hero{position:relative; overflow:hidden; padding:84px 0 76px;}
.page-hero .ph-bg{position:absolute; inset:0; z-index:0; background-size:cover; background-position:center; opacity:.34; transform:scale(1.04);
  animation:ph-drift 26s ease-in-out infinite alternate;}
@keyframes ph-drift{from{transform:scale(1.04)} to{transform:scale(1.13)}}
.page-hero .ph-bg::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(8,10,14,.58) 0%,rgba(8,10,14,.72) 52%,rgba(8,10,14,.92) 82%,var(--ink) 100%);}
.page-hero .ph-side{position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(90deg,rgba(8,10,14,.72) 0%,rgba(8,10,14,.15) 46%,rgba(8,10,14,0) 74%);}
.page-hero > .container,.page-hero > .container-narrow,.page-hero > .cine-wrap{position:relative; z-index:2;}
.page-hero .tag{margin-bottom:20px;}
.page-hero h1{margin:0 0 .35em;}
.page-hero .lede{max-width:640px;}
/* plain interior hero, no image */
.page-hero.flat{padding:72px 0 56px;}

/* section heading cluster */
.sec-head{max-width:680px; margin-bottom:44px;}
.sec-head h2{margin:14px 0 .4em;}
.sec-head p{color:var(--text-soft);}

/* feature / step list with mono index */
.steps{display:grid; gap:1px; background:var(--glass-line); border:1px solid var(--glass-line); border-radius:var(--radius); overflow:hidden;}
.step{background:var(--glass-2); backdrop-filter:blur(8px); padding:28px 26px; position:relative;}
.step .step-n{font-family:var(--font-mono); font-size:.66rem; letter-spacing:.14em; color:var(--gold-deep); text-transform:uppercase;}
.step h3{margin:12px 0 8px; color:var(--heading);}
.step p{color:var(--text-soft); margin:0;}

/* simple gold-ruled feature list */
.flist{list-style:none; margin:0; padding:0;}
.flist li{position:relative; padding:14px 0 14px 26px; border-bottom:1px solid var(--glass-line); color:var(--text-soft);}
.flist li:last-child{border-bottom:none;}
.flist li::before{content:""; position:absolute; left:0; top:22px; width:12px; height:1px; background:var(--gold);}
.flist li strong{color:var(--text);}

/* --------------------------------------------------- REDUCED MOTION -- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .grain,.page-hero .ph-bg{animation:none !important;}
  html.reveal-armed .reveal,
  html.reveal-armed .reveal-slow{opacity:1 !important; transform:none !important;}
  .btn-gold:hover::after{animation:none;}
}