:root{
  /* Brand blue. #3AA0FF is only 2.74:1 on white, so it is a FILL colour only -
     never text on a light background. The two darker steps carry text. */
  --brand:#3AA0FF;            /* chips, dots, borders, graphics            */
  --brand-text:#006ED5;       /* 5.0:1 on white - links, small text        */
  --brand-deep:#0053A1;       /* 7.6:1 on white - kickers, numerals        */
  --brand-tint:#EAF4FF;

  /* Legacy names kept so existing rules resolve; remapped to the cool palette. */
  --teal-light:#3AA0FF; --teal-deep:#006ED5;
  --violet-light:#7C8CF8; --violet-deep:#3730A3;
  --logo-blue:#0053A1; --logo-cyan:#3AA0FF;

  --cream:#FFFFFF; --paper:#FFFFFF; --tint:#F1F7FD;
  --ink:#0F172A; --ink-soft:#475569; --hairline:#E2E8F0;
  --red:#C8333E;
  --amber:#8A5D18; --amber-bg:#FFF4E0;
  /* The logo scales with the viewport: at a fixed 120px it collides with the nav
     on narrower laptops, since the bar does not collapse to a burger until 900px.
     --header-h must stay in step, because every hero pulls itself up by exactly
     that amount to sit under the transparent bar. It is the logo plus the 10px
     bar padding, top and bottom, plus the 1px border. */
  --logo-h:clamp(84px, 8.5vw, 120px);
  --header-h:calc(var(--logo-h) + 21px);
  --arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13.5 6l6 6-6 6'/%3E%3C/svg%3E");
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--cream); color:var(--ink); font-family:'Manrope',sans-serif; line-height:1.6; -webkit-font-smoothing:antialiased;}
h1,h2,h3{font-family:'Manrope',sans-serif; font-weight:700; letter-spacing:-0.022em;}
a{color:inherit; text-decoration:none;}
.wrap{max-width:1120px; margin:0 auto; padding:0 32px;}
::selection{background:var(--teal-deep); color:#fff;}

/* ---------- Utility strip above the nav ----------
   The nav bar is already carrying a 295px logo, seven links and a button, so
   contact details and social icons go in their own band rather than into it.
   Deliberately not sticky: the nav below is, and stacking both would take a
   permanent bite out of the viewport. This scrolls away instead.
   It sits above .topbar in normal flow, so the heroes' -var(--header-h) pull
   still lines them up under the nav and needs no adjustment. */
.utility-bar{background:var(--brand-deep); color:#fff; font-size:12.5px;}
.utility-bar .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:8px; padding-bottom:8px;}
.utility-contact{display:flex; align-items:center; gap:22px; flex-wrap:wrap;}
.utility-contact a{display:inline-flex; align-items:center; gap:7px; color:#fff; font-weight:600;}
.utility-contact a:hover{text-decoration:underline;}
.utility-contact svg{width:14px; height:14px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round;}
.utility-social{display:flex; align-items:center; gap:8px;}
/* filled discs rather than bare glyphs: a thin white icon on this blue is easy
   to miss at 16px */
.utility-social a{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:50%; color:#fff;
  background:rgba(255,255,255,0.18);
  transition:background .15s ease, color .15s ease, transform .15s ease;
}
.utility-social a:hover{background:#fff; color:var(--brand-deep); transform:translateY(-1px);}
.utility-social svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2;}
/* the bar is the only dark surface at the top of the page, so the usual dark
   focus ring would disappear into it */
.utility-bar a:focus-visible{outline:2.5px solid #fff; outline-offset:2px;}

/* A phone has roughly 296px of usable width here and the full bar wants about
   650px, so it wrapped to three rows of dark band above the logo - and the bar
   is not sticky, so that cost is paid on first paint and then scrolls away.
   The toll free line and the social links stay; the main office number and the
   address go, both of which are in the footer of every page. */
@media (max-width:760px){
  .utility-bar .wrap{justify-content:center; gap:10px 18px; flex-wrap:wrap;}
  .utility-contact{gap:18px; justify-content:center;}
  .utility-contact a[href^="mailto:"]{display:none;}
  .utility-contact a[href="tel:7278260958"]{display:none;}
}

.topbar{
  background:transparent; border-bottom:1px solid transparent;
  position:sticky; top:0; z-index:30;
  transition:background .22s ease, border-color .22s ease, box-shadow .22s ease;
}
/* solid once scrolled, and whenever the mobile panel is open, so nav stays legible */
.topbar.is-stuck, .topbar.nav-open{
  background:var(--paper); border-bottom-color:var(--hairline);
  box-shadow:0 1px 14px rgba(15,23,42,0.06);
}
/* without JS the bar can never solidify, so keep it solid from the start */
html.no-js .topbar{background:var(--paper); border-bottom-color:var(--hairline);}
.topbar .wrap{display:flex; align-items:center; justify-content:space-between; padding-top:10px; padding-bottom:10px;}
.logo-mark img{height:var(--logo-h); width:auto; display:block;}
nav{display:flex; align-items:center; gap:26px; font-size:13.5px; font-weight:600;}
nav > a{position:relative; padding-bottom:4px; color:var(--ink-soft); transition:color .15s ease;}
nav > a:hover{color:var(--ink);}
nav > a.current{color:var(--teal-deep);}
nav > a.current::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--teal-deep); border-radius:2px;}
nav a.nav-btn{background:var(--ink); color:var(--cream); padding:10px 18px; border-radius:7px; transition:background .15s ease;}
nav a.nav-btn:hover{background:var(--teal-deep);}
.has-dropdown{position:relative; display:flex; align-items:center; gap:4px;}
.has-dropdown > a{color:var(--ink-soft); padding-bottom:4px; transition:color .15s ease;}
.has-dropdown > a:hover{color:var(--ink);}
.has-dropdown > a.current{color:var(--teal-deep);}
.dropdown{
  display:none; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  background:var(--paper); border:1px solid var(--hairline); border-radius:10px;
  box-shadow:0 12px 28px rgba(15,23,42,0.12); padding:8px; min-width:250px; margin-top:14px;
}
/* invisible bridge across the margin so hover survives the trip to the menu */
.dropdown::before{
  content:""; position:absolute; left:0; right:0; top:-16px; height:16px;
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown,
.dropdown-toggle[aria-expanded="true"] + .dropdown{display:block;}
.dropdown a{display:block; padding:10px 14px; border-radius:7px; font-size:13px; font-weight:600; color:var(--ink-soft);}
.dropdown a:hover{background:rgba(58,160,255,0.1); color:var(--ink);}

/* submenu caret button — keyboard and touch accessible */
.dropdown-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  background:none; border:0; padding:2px; margin:0 0 4px; cursor:pointer;
  color:var(--ink-soft); border-radius:5px; line-height:0;
}
.dropdown-toggle:hover{color:var(--ink);}
.dropdown-toggle svg{width:13px; height:13px; transition:transform .18s ease;}
.dropdown-toggle[aria-expanded="true"] svg{transform:rotate(180deg);}

/* hamburger — hidden on desktop, shown under 900px */
.nav-toggle{
  display:none; background:none; border:1.5px solid var(--hairline); border-radius:8px;
  padding:9px 10px; cursor:pointer; color:var(--ink); line-height:0;
}
.nav-toggle:hover{border-color:var(--ink-soft);}
.nav-toggle svg{width:22px; height:22px; display:block;}
.nav-toggle .icon-close{display:none;}
.nav-toggle[aria-expanded="true"] .icon-open{display:none;}
.nav-toggle[aria-expanded="true"] .icon-close{display:block;}

/* visible keyboard focus everywhere */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible{
  outline:2.5px solid var(--teal-deep); outline-offset:3px; border-radius:3px;
}

/* skip link — offscreen until focused */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--ink); color:var(--cream); padding:12px 20px;
  border-radius:0 0 8px 0; font-weight:700; font-size:14px;
}
.skip-link:focus{left:0;}

.page-hero{
  position:relative; margin-top:calc(var(--header-h) * -1); padding:calc(72px + var(--header-h)) 0 56px;
  background:
    radial-gradient(circle at 1px 1px, rgba(15,23,42,0.06) 1px, transparent 0) 0 0/22px 22px,
    radial-gradient(circle at 88% 12%, rgba(0,110,213,0.14), transparent 55%),
    radial-gradient(circle at 8% 92%, rgba(99,102,241,0.12), transparent 50%),
    linear-gradient(180deg, #F5FAFF, var(--cream));
}
.eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:800; letter-spacing:0.16em; text-transform:uppercase; color:var(--brand-text); margin-bottom:20px;}
.eyebrow::before{content:""; width:16px; height:1.5px; background:var(--brand-text);}
.page-hero h1{font-size:44px; line-height:1.1; letter-spacing:-0.015em; margin-bottom:20px; max-width:700px; text-wrap:balance;}
.page-hero p.lede{font-size:18px; color:var(--ink-soft); max-width:620px;}

/* ---------- Split hero: copy + graphic (services, dental) ---------- */
.hero{
  position:relative; margin-top:calc(var(--header-h) * -1); padding:calc(64px + var(--header-h)) 0 56px;
  background:
    radial-gradient(circle at 88% 12%, rgba(0,110,213,0.12), transparent 55%),
    radial-gradient(circle at 8% 92%, rgba(99,102,241,0.10), transparent 50%),
    linear-gradient(180deg, #F5FAFF, var(--cream));
}
.hero .hero-inner{display:grid; grid-template-columns:1.05fr 0.95fr; gap:48px; align-items:center;}
.hero .hero-inner > *{min-width:0;}
.hero h1{font-size:44px; line-height:1.1; letter-spacing:-0.015em; margin-bottom:20px; text-wrap:balance;}
.hero p.lede{font-size:18px; color:var(--ink-soft);}
.hero-cta{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:28px;}
.network, .tooth-graphic{display:flex; justify-content:center;}
.network svg{width:100%; max-width:480px; height:auto;}
.tooth-graphic svg{width:100%; max-width:300px; height:auto;}
.tooth-graphic img{width:100%; max-width:460px; height:auto;}
.network img{width:100%; max-width:480px; height:auto;}

@media (max-width:900px){
  .hero{padding:calc(40px + var(--header-h)) 0 40px;}
  .hero .hero-inner{grid-template-columns:1fr; gap:30px;}
  .hero h1{font-size:32px;}
  .network img{max-width:400px;}
  .tooth-graphic img{max-width:380px;}
}
@media (max-width:560px){
  .hero h1{font-size:27px;}
  .hero p.lede{font-size:16px;}
  .hero-cta{flex-direction:column; align-items:stretch; gap:12px;}
  .hero-cta .btn-text{align-self:center; width:auto; margin-top:4px;}
}

.btn-primary{background:var(--ink); color:var(--cream); font-weight:700; font-size:14px; padding:14px 24px; border-radius:8px; display:inline-block; transition:transform .15s ease, background .15s ease;}
.btn-primary:hover{background:var(--teal-deep); transform:translateY(-1px);}
.btn-outline{background:#fff; border:1.5px solid var(--ink); color:var(--ink); font-weight:700; font-size:14px; padding:12.5px 24px; border-radius:8px; display:inline-block; transition:transform .15s ease, background .15s ease, border-color .15s ease;}
.btn-outline:hover{background:var(--cream); transform:translateY(-1px);}
.btn-text{font-weight:700; font-size:14px; color:var(--ink); border-bottom:1.5px solid var(--ink); padding-bottom:2px;}

.section{padding:76px 0;}
.section-head{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:44px; flex-wrap:wrap;}
.section-head .kicker{font-size:12px; font-weight:800; letter-spacing:0.14em; text-transform:uppercase; color:var(--teal-deep); margin-bottom:12px; display:block;}
.section-head h2{font-size:30px; max-width:520px;}
.section-head .sub{font-size:14.5px; color:var(--ink-soft); max-width:320px;}

/* separate panels rather than one hairline-divided slab */
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
/* Occupies its grid cell and draws nothing. visibility rather than display,
   because display:none would remove it from the grid and defeat the point. */
.card-filler{visibility:hidden; border:0; box-shadow:none; background:none; padding:0;}
.card{
  background:var(--paper); border:1px solid var(--hairline); border-radius:14px;
  padding:30px 28px 32px; display:flex; flex-direction:column; gap:12px;
  box-shadow:0 1px 2px rgba(15,23,42,0.04);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 30px rgba(15,23,42,0.09);
  border-color:rgba(15,23,42,0.14);
}
.card .icon{width:42px; height:42px; border-radius:10px; display:flex; align-items:center; justify-content:center;}
.card .icon svg{width:20px; height:20px; fill:none; stroke-width:1.6;}
.card:nth-child(3n+1) .icon{background:rgba(58,160,255,0.12);}
.card:nth-child(3n+2) .icon{background:rgba(0,110,213,0.12);}
.card:nth-child(3n+3) .icon{background:rgba(99,102,241,0.12);}
.card:nth-child(3n+1) .icon svg{stroke:var(--teal-deep);}
.card:nth-child(3n+2) .icon svg{stroke:var(--logo-blue);}
.card:nth-child(3n+3) .icon svg{stroke:var(--violet-deep);}
.card h3{font-size:16.5px; font-weight:600;}
/* status tag for a service that has not opened yet */
.card-note{
  display:inline-block; vertical-align:middle; margin-left:8px;
  padding:3px 9px; border-radius:999px;
  background:var(--brand-tint); color:var(--brand-deep);
  font-size:10.5px; font-weight:800; letter-spacing:0.05em;
  text-transform:uppercase; white-space:nowrap;
}
.card p{font-size:13.5px; color:var(--ink-soft);}
.card .card-link{margin-top:auto; padding-top:6px; font-size:12.5px; font-weight:700; color:var(--teal-deep);}

/* ---------- Card edge: blue border that completes on hover ----------
   A conic gradient starting at the bottom-left corner and sweeping clockwise:
   0-25% is the left edge, 25-50% the top edge. At rest the blue runs from
   --edge-start to --edge, so it begins partway up the left side and stops
   short along the top. Hover pulls the start back to 0 and the end to 100%,
   and the blue closes round the right and bottom.
   Both are registered below so they can be transitioned; without @property a
   percentage custom property jumps rather than animating.

   Applied to the bordered, rounded card components. Deliberately not to
   .stat-card or .step-card, which are cells in a hairline-gap grid and own no
   border to trace, nor to .map-card and .video-card, whose embedded frame is
   the thing the eye goes to, nor to .dl-card, whose own page preview is the
   thing that should carry the card.

   Also not to .info-item-card. A conic gradient is measured in angles from the
   centre, so on a wide, short strip the left edge subtends barely 20 degrees:
   the left-and-top reading collapses into a dash floating along the top, and it
   lands somewhere different on every card width. The effect only reads on boxes
   that are roughly portrait or square. */
@property --edge{
  syntax:'<percentage>';
  inherits:false;
  initial-value:42%;
}
@property --edge-start{
  syntax:'<percentage>';
  inherits:false;
  initial-value:15%;
}
.card,
.res-card,
.panel-card{position:relative;}

.card::before,
.res-card::before,
.panel-card::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  padding:1.6px; pointer-events:none; z-index:3;
  --edge:42%; --edge-start:15%;
  background:conic-gradient(from 225deg,
    rgba(58,160,255,0) 0 var(--edge-start),
    var(--brand) var(--edge-start) var(--edge),
    rgba(58,160,255,0) var(--edge) 100%);
  /* paint the padding ring only: fill minus content box leaves the border */
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  transition:--edge .6s cubic-bezier(.4, 0, .2, 1),
             --edge-start .6s cubic-bezier(.4, 0, .2, 1);
}
.card:hover::before,       .card:focus-within::before,
.res-card:hover::before,   .res-card:focus-within::before,
.panel-card:hover::before, .panel-card:focus-within::before{--edge:100%; --edge-start:0%;}

/* Whole card is the hit area. The Learn more anchor stretches over the card
   rather than the card getting its own handler, so there is still exactly one
   link per card: one tab stop, one thing for a screen reader to announce, and
   middle-click and open-in-new-tab keep working.
   ::before, not ::after - .arrow-link already owns ::after for the arrow glyph,
   and its explicit width and height would override the inset stretch.
   Each of these cards holds exactly one link, which is what makes the pattern
   safe: stretching a card that held two would make the second unreachable. */
.svc-cards .card > .card-link::before,
.res-card > a::before,
.dl-card a::before,
.action-card .ac-cta > a::before,
.story-card .story-body > a::before{
  content:""; position:absolute; inset:0; z-index:2;
}
/* The stretched pseudo resolves against the nearest positioned ancestor, so
   the anchor itself must stay unpositioned and untransformed - a transform on
   the anchor would make it the containing block and snap the overlay back down
   to the button. .btn-primary and .btn-outline lift 1px on hover, and hovering
   the overlay counts as hovering the anchor, so inside these cards that lift
   would fire card-wide, collapse the overlay, unhover, and flicker. The card
   already lifts as a whole, so drop the button's own lift here. */
.action-card .ac-cta > a:hover{transform:none;}

@media (prefers-reduced-motion:reduce){
  .card::before,
  .res-card::before,
  .panel-card::before{transition:none;}
}

/* ---------- Delivery band: how care reaches people ---------- */
.delivery{background:var(--paper); border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); padding:34px 0;}
.delivery .wrap{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
.delivery-item{display:flex; align-items:center; gap:16px; min-width:0;}
.icon-circle{
  width:46px; height:46px; flex-shrink:0; border-radius:50%;
  background:rgba(58,160,255,0.12); display:flex; align-items:center; justify-content:center;
}
.icon-circle svg{width:22px; height:22px; fill:none; stroke:var(--brand-text);}
.delivery-item h4{font-family:'Manrope',sans-serif; font-size:15px; font-weight:700; letter-spacing:-0.01em;}
.delivery-item p{font-size:13.5px; color:var(--ink-soft); line-height:1.5;}

/* ---------- Support services: heading beside a numbered list ---------- */
.support{background:var(--tint); padding:76px 0;}
.support-inner{display:grid; grid-template-columns:0.85fr 1.15fr; gap:56px; align-items:start;}
.support-inner > *{min-width:0;}
.support h2{font-size:30px; margin-bottom:14px;}
.support-inner p{font-size:14.5px; color:var(--ink-soft); max-width:380px;}
.tag-list{display:flex; flex-direction:column; gap:1px; background:var(--hairline); border:1px solid var(--hairline); border-radius:14px; overflow:hidden;}
.tag-row{display:flex; align-items:baseline; gap:18px; background:var(--paper); padding:22px 24px;}
.tag-row .num{font-size:12px; font-weight:800; letter-spacing:0.08em; color:var(--brand-deep); flex-shrink:0;}
.tag-row .label{display:block; font-family:'Manrope',sans-serif; font-size:15.5px; font-weight:700; letter-spacing:-0.01em;}
.tag-row .desc{display:block; font-size:13.5px; color:var(--ink-soft); line-height:1.55; margin-top:3px;}

@media (max-width:900px){
  .delivery .wrap{grid-template-columns:1fr; gap:20px;}
  .support{padding:52px 0;}
  .support-inner{grid-template-columns:1fr; gap:28px;}
  .support h2{font-size:25px;}
}

.locations{background:linear-gradient(135deg, var(--brand-tint), #F1F7FD); padding:76px 0;}
.loc-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:20px;}
.svg-sprite{position:absolute; width:0; height:0; overflow:hidden;}

/* Location card with a live map on top. Replaced the old .loc-card, which was
   clickable edge to edge via a stretched overlay - over an iframe that overlay
   would swallow every drag and zoom, so the Directions link carries the click
   on its own now. Bordered rather than shadowed, to hold its own against the
   tinted band this grid sits on. */
/* Column, so the body can stretch and the footer of every card in a row can be
   pinned to the same line regardless of how much sits above it. */
.map-card{
  background:var(--paper); border:1px solid var(--hairline);
  border-radius:14px; overflow:hidden;
  display:flex; flex-direction:column;
}
/* A fixed height rather than an aspect ratio - maps of one height read as a
   row, and the frame is a viewport onto the map, not an image whose
   proportions matter. */
.map-frame{display:block; width:100%; height:190px; border:0; background:var(--tint);}
.map-body{padding:18px 20px 20px; display:flex; flex-direction:column; flex:1;}
.map-body p{margin:0; font-size:13.5px; color:var(--ink-soft); line-height:1.55;}

/* Four things in a fixed order, each a different weight, so the eye can jump
   straight to the one it wants: where it is, what it is, what to dial, what to
   know before dialling. Before this they were six lines of the same grey. */
.map-body h4{font-size:17px; line-height:1.28;}
/* Site designation - Main Office, Testing Location - reading on the same line
   as the place name. Brand blue against the near-black heading, so the two
   parts separate on colour and the label needs no punctuation to divide it;
   the dash is there for anyone reading the heading aloud or without colour. */
.map-body h4 .desig{color:var(--brand-text);}
.map-body h4 .desig::before{content:" - "; color:var(--ink-soft); font-weight:600;}
/* Qualifies the designation - who hosts the site. Sits directly under it,
   quiet, so it reads as a footnote to the label rather than competing. */
.map-body .host-note{font-size:12px; color:var(--ink-soft); margin-top:3px;}
.map-body .addr{margin-top:11px;}
/* The number is what a person acts on, so it carries the most weight after the
   place name. It was previously inside the address paragraph, inheriting the
   same small grey as the street. */
.map-body .tel{
  align-self:flex-start; margin-top:7px;
  font-size:15.5px; font-weight:700; color:var(--teal-deep); letter-spacing:-0.01em;
}
.map-body .tel:hover{text-decoration:underline;}
/* margin-top:auto drops this block to the foot of the card, so the rule above
   it lands on the same line across the whole row however many lines each card
   carries above. Eight cards repeating one sentence needs to be findable, not
   shouted, hence the smallest type on the card. */
.map-body .visit-note{
  margin-top:auto; padding-top:13px; border-top:1px solid var(--hairline);
  font-size:12px; line-height:1.5;
}
/* display stays inline-flex, as .arrow-link sets it - the arrow glyph is a
   ::after that needs the flex box to sit on the text baseline. align-self keeps
   the flex box the width of its own text rather than the whole column, so the
   underline on hover does not run the width of the card. */
.map-body .arrow-link{align-self:flex-start; margin-top:12px; font-size:12.5px; font-weight:700; color:var(--ink);}
.map-body .arrow-link:hover{text-decoration:underline;}

.mission{background:var(--tint); padding:76px 0;}
.mission-inner{max-width:760px; margin:0 auto; text-align:center;}
.mission .kicker{display:block; font-size:12px; font-weight:800; letter-spacing:0.14em; text-transform:uppercase; color:var(--brand-text); margin-bottom:18px;}
.mission blockquote{font-family:'Manrope',sans-serif; font-weight:600; letter-spacing:-0.015em; font-size:23px; line-height:1.55; color:var(--ink); quotes:none;}
.mission blockquote::before,
.mission blockquote::after{content:none;}
.mission .rule{width:44px; height:3px; border-radius:3px; background:linear-gradient(90deg, var(--brand), var(--brand-deep)); margin:26px auto 0;}

.text-block{padding:56px 0; border-top:1px solid var(--hairline);}
.text-block .cols{display:grid; grid-template-columns:0.7fr 1.3fr; gap:56px;}
.text-block h2{font-size:26px;}
.text-block p{font-size:15.5px; color:var(--ink-soft); max-width:640px;}
.text-block ul{list-style:none; display:flex; flex-direction:column; gap:14px;}
.text-block li{font-size:14.5px; color:var(--ink-soft); padding-left:22px; position:relative;}
.text-block li::before{content:""; position:absolute; left:0; top:8px; width:8px; height:8px; border-radius:50%; background:var(--teal-light);}

/* ---------- Partner logo marquee ---------- */
.partners{background:var(--tint); overflow:hidden;}
.partners .section-head{margin-bottom:36px;}

/* the two tracks sit side by side and move as one; shifting by a full track
   width puts the copy exactly where the original started, so the loop is seamless */
.marquee{
  display:flex; overflow:hidden;
  mask-image:linear-gradient(90deg, transparent, #000 90px, #000 calc(100% - 90px), transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 90px, #000 calc(100% - 90px), transparent);
}
.marquee-track{
  display:flex; align-items:center; gap:72px; padding-right:72px;
  list-style:none; margin:0; flex-shrink:0;
  animation:marquee-scroll 46s linear infinite;
}
.marquee-track li{display:flex; align-items:center;}
/* Shown in full colour on purpose: greyscaling washes the lighter marks out
   almost completely - the yellow Recovery Epicenter coin all but disappears. */
.marquee-track img{
  height:62px; width:auto; display:block; max-width:none;
  opacity:0.88; transition:opacity .25s ease;
}
.marquee-track img:hover{opacity:1;}

@keyframes marquee-scroll{
  from{transform:translateX(0);}
  to{transform:translateX(-100%);}
}

@media (max-width:560px){
  .marquee-track{gap:48px; padding-right:48px;}
  .marquee-track img{height:48px;}
}

/* no motion: drop the animation and let the strip be swiped or scrolled instead */
@media (prefers-reduced-motion:reduce){
  .marquee{overflow-x:auto; mask-image:none; -webkit-mask-image:none;}
  .marquee-track{animation:none;}
  .marquee-track[aria-hidden="true"]{display:none;}
  .marquee-track img{filter:none; opacity:1;}
}

.area-strip{background:linear-gradient(120deg, #003B77, var(--brand-text)); color:#fff; padding:34px 0;}
.area-strip .wrap{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;}
.area-strip p{font-size:15px;}
.area-strip strong{font-family:'Manrope',sans-serif; font-weight:700; font-size:18px; letter-spacing:-0.015em;}
.area-strip .contact{font-size:14px;}
/* white panel so the call to action reads against the gradient band */
.area-strip .contact a{
  display:inline-block; background:#fff; color:var(--ink);
  font-weight:700; font-size:14px; padding:13px 24px; border-radius:8px;
  box-shadow:0 2px 10px rgba(15,23,42,0.14);
  transition:transform .15s ease, box-shadow .15s ease;
}
.area-strip .contact a:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(15,23,42,0.20);
}
.area-strip .contact a:focus-visible{outline-color:#fff;}

.shell-body{padding:80px 0 96px;}
.status-chip{display:inline-flex; align-items:center; gap:8px; background:var(--amber-bg); color:var(--amber); font-size:12.5px; font-weight:800; padding:8px 14px; border-radius:999px; margin-bottom:26px;}
.status-chip .dot{width:7px; height:7px; border-radius:50%; background:var(--amber);}
.placeholder-note{display:flex; gap:14px; align-items:flex-start; background:var(--paper); border:1px solid var(--hairline); border-left:3px solid var(--amber); border-radius:10px; padding:20px 22px; max-width:640px; margin-top:28px;}
.placeholder-note svg{flex-shrink:0; width:18px; height:18px; stroke:var(--amber); margin-top:2px;}
.placeholder-note p{font-size:13.5px; color:var(--ink-soft); line-height:1.65;}
.placeholder-note strong{color:var(--ink); font-weight:700;}
.need-list{margin-top:24px; display:flex; flex-direction:column; gap:10px; max-width:640px;}
.need-list li{list-style:none; font-size:13.5px; color:var(--ink-soft); padding-left:20px; position:relative;}
.need-list li::before{content:""; position:absolute; left:0; top:7px; width:7px; height:7px; border-radius:2px; background:var(--violet-light);}

footer{background:var(--ink); color:rgba(255,255,255,0.72); padding:48px 0 36px;}
footer .wrap{display:flex; flex-direction:column; gap:16px;}
footer .notice{font-size:12.5px; line-height:1.75; max-width:760px;}
footer .taglines{font-size:12.5px; display:flex; gap:20px; flex-wrap:wrap; color:rgba(255,255,255,0.55);}
footer .bottom{display:flex; justify-content:space-between; font-size:12px; color:rgba(255,255,255,0.66); border-top:1px solid rgba(255,255,255,0.15); padding-top:18px; margin-top:8px; flex-wrap:wrap; gap:8px;}
footer .copyright-mark{display:flex; align-items:center; gap:10px;}
/* the lockup carries small type under the wordmark, so it needs a little more
   height than the old icon-only mark did before it turns to mush */
footer .copyright-mark img{height:48px; width:auto; display:block; opacity:0.95;}

/* ---------- Footer contact and social ---------- */
.footer-contact{
  display:flex; align-items:center; justify-content:space-between; gap:18px 28px;
  flex-wrap:wrap; padding-top:20px; margin-top:4px;
  border-top:1px solid rgba(255,255,255,0.15);
}
.footer-reach{display:flex; align-items:center; gap:26px; flex-wrap:wrap;}
.footer-reach a{
  display:inline-flex; align-items:center; gap:8px;
  color:#fff; font-size:13.5px; font-weight:600;
}
.footer-reach a:hover{text-decoration:underline;}
.footer-reach svg{width:15px; height:15px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round;}
.footer-social{display:flex; align-items:center; gap:10px;}
.footer-social a{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%; color:#fff;
  background:rgba(255,255,255,0.12);
  transition:background .15s ease, color .15s ease, transform .15s ease;
}
.footer-social a:hover{background:#fff; color:var(--ink); transform:translateY(-2px);}
.footer-social svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2;}

/* The Facebook mark is drawn from x=9 to x=17.2 inside a 24-wide viewBox, so
   its own centre sits about 1.1 units right of the box centre. Flex centres the
   box, not the ink, which leaves the f visibly off to the right of its disc -
   most obvious on a phone, where the discs are the only round things on screen.
   The shift is a percentage of the icon's own width so it holds at both the
   15px utility size and the 17px footer size. */
.utility-social a[href*="facebook"] svg,
.footer-social a[href*="facebook"] svg{transform:translateX(-4.6%);}
/* the dark focus ring is invisible against the footer */
footer a:focus-visible{outline:2.5px solid #fff; outline-offset:2px;}

@media (max-width:560px){
  /* Narrow enough that the reach column and the icon row sat side by side with
     the discs floating against a two-line block. Give each its own row. */
  .footer-contact{flex-direction:column; align-items:stretch; gap:20px; padding-top:22px;}
  .footer-reach{flex-direction:column; align-items:flex-start; gap:14px;}
  .footer-social{gap:12px;}
}

@media (prefers-reduced-motion:reduce){
  .utility-social a:hover, .footer-social a:hover{transform:none;}
}

@media (max-width:900px){
  .nav-toggle{display:block;}

  /* nav becomes a full-width panel dropping out of the topbar */
  nav{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--paper); border-bottom:1px solid var(--hairline);
    box-shadow:0 14px 28px rgba(15,23,42,0.12);
    padding:8px 0 16px; font-size:15px;
    max-height:calc(100vh - var(--header-h)); overflow-y:auto;
  }
  nav.open{display:flex;}
  nav > a{padding:14px 32px; border-bottom:1px solid var(--hairline);}
  nav > a.current::after{display:none;}
  nav > a.current{background:rgba(58,160,255,0.08);}
  nav a.nav-btn{margin:14px 32px 0; text-align:center; padding:14px 18px;}

  /* submenu opens inline instead of floating */
  .has-dropdown{
    flex-direction:row; justify-content:space-between; flex-wrap:wrap;
    border-bottom:1px solid var(--hairline); gap:0;
  }
  .has-dropdown > a{flex:1; padding:14px 8px 14px 32px;}
  .dropdown-toggle{padding:14px 32px 14px 8px;}
  .dropdown-toggle svg{width:16px; height:16px;}
  .dropdown{
    position:static; transform:none; width:100%; margin:0;
    border:0; border-radius:0; box-shadow:none; padding:0 0 8px;
    background:rgba(15,23,42,0.03);
  }
  /* on touch the caret button is the only opener — hover must not fire */
  .has-dropdown:hover .dropdown{display:none;}
  .dropdown-toggle[aria-expanded="true"] + .dropdown{display:block;}
  .dropdown::before{display:none;}
  .dropdown a{padding:12px 32px 12px 46px; font-size:14px;}

  .topbar .wrap{position:relative;}
  .page-hero h1{font-size:32px;}
  .grid3{grid-template-columns:1fr;}
  .loc-grid{grid-template-columns:1fr;}
  .text-block .cols{grid-template-columns:1fr;}
  .area-strip .wrap{flex-direction:column; align-items:flex-start;}
}

/* no-JS fallback: never leave users stranded without navigation */
@media (max-width:900px){
  html.no-js nav{display:flex; position:static; box-shadow:none; max-height:none;}
  html.no-js .nav-toggle{display:none;}
  html.no-js .dropdown{display:block;}
}

/* ---------- Long-form content (Resources / HIV Basics) ---------- */
.prose{padding:56px 0; border-top:1px solid var(--hairline);}
.prose .cols{display:block;}
.prose h2{font-size:24px; margin-bottom:14px;}
.prose h3{font-size:17px; margin:20px 0 8px;}
.prose p{font-size:15px; color:var(--ink-soft); max-width:680px; margin-bottom:14px;}
.prose ul{margin:8px 0 14px 0; padding-left:0; list-style:none;}
.prose li{font-size:14.5px; color:var(--ink-soft); padding-left:20px; position:relative; margin-bottom:8px;}
.prose li::before{content:""; position:absolute; left:0; top:8px; width:7px; height:7px; border-radius:50%; background:var(--teal-light);}

.accordion{border:1px solid var(--hairline); border-radius:12px; overflow:hidden; background:var(--paper);}
.accordion details{border-bottom:1px solid var(--hairline);}
.accordion details:last-child{border-bottom:none;}
.accordion summary{cursor:pointer; list-style:none; padding:20px 24px; font-weight:700; font-size:15px; display:flex; justify-content:space-between; align-items:center; gap:12px;}
.accordion summary::-webkit-details-marker{display:none;}
.accordion summary::after{content:"+"; font-size:20px; color:var(--teal-deep); font-weight:400; flex-shrink:0;}
.accordion details[open] summary::after{content:"\2212";}
.accordion .panel{padding:0 24px 22px; font-size:14.5px; color:var(--ink-soft);}
.accordion .panel p{margin-bottom:10px;}
.accordion .panel ul{list-style:none; margin:8px 0;}
.accordion .panel li{padding-left:18px; position:relative; margin-bottom:6px;}
.accordion .panel li::before{content:""; position:absolute; left:0; top:8px; width:6px; height:6px; border-radius:50%; background:var(--violet-light);}

/* ---------- Download / resource cards ----------
   Each card leads with a render of the document's own first page, so a visitor
   can tell the flyers apart before downloading. Tracks are capped rather than
   1fr: a page with a single download would otherwise stretch one card the full
   width of the wrap. */
.dl-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 232px)); gap:20px;}
.dl-card{
  position:relative; background:var(--paper); border:1px solid var(--hairline);
  border-radius:12px; overflow:hidden; display:flex; flex-direction:column;
  box-shadow:0 1px 2px rgba(15,23,42,0.04);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.dl-card:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 30px rgba(15,23,42,0.10);
  border-color:rgba(15,23,42,0.14);
}
/* fixed ratio so pages of different sizes line up; anchored to the top because
   the title of a flyer is at the top of the sheet */
.dl-thumb{aspect-ratio:4 / 5; background:var(--tint); border-bottom:1px solid var(--hairline);}
.dl-thumb img{width:100%; height:100%; object-fit:cover; object-position:50% 0%; display:block;}
.dl-body{padding:16px 18px 18px; display:flex; flex-direction:column; gap:6px; flex:1;}
.dl-card h3, .dl-card h4{font-size:14.5px; line-height:1.35;}
.dl-card a{font-size:12.5px; font-weight:700; color:var(--teal-deep); margin-top:auto;}
.dl-meta{font-weight:600; color:var(--ink-soft);}

@media (prefers-reduced-motion:reduce){
  .dl-card{transition:none;}
  .dl-card:hover{transform:none;}
}

/* ---------- Why-get-tested cards ---------- */
.reason-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.reason-card{background:var(--paper); border-radius:12px; padding:24px; border-top:3px solid var(--teal-light);}
.reason-card:nth-child(2){border-top-color:var(--logo-blue);}
.reason-card:nth-child(3){border-top-color:var(--violet-light);}
.reason-card h4{font-size:15px; margin-bottom:8px;}
.reason-card p{font-size:13.5px; color:var(--ink-soft);}

/* ---------- Form ---------- */
.form-card{background:var(--paper); border:1px solid var(--hairline); border-radius:16px; padding:36px; max-width:600px;}

.form-row{margin-bottom:18px;}
.form-row label{display:block; font-size:13px; font-weight:700; margin-bottom:6px;}
.form-row input, .form-row select, .form-row textarea{
  width:100%; padding:12px 14px; border:1px solid var(--hairline); border-radius:8px;
  font-family:'Manrope',sans-serif; font-size:14px; background:#fff; color:var(--ink);
}
.form-row textarea{resize:vertical; min-height:90px;}
.form-grid-2{display:grid; grid-template-columns:1fr 1fr; gap:16px;}

/* ---------- Info card row (services sub-pages) ---------- */
.info-row{display:grid; grid-template-columns:repeat(2,1fr); gap:20px;}
/* centred so the 38px tile reads level with one or two lines of copy, matching
   .dl-card; short screens go back to top-aligned, where the text wraps further */
.info-item-card{background:var(--paper); border:1px solid var(--hairline); border-radius:12px; padding:24px; display:flex; gap:16px; align-items:center;}
.info-item-card .ic{width:38px; height:38px; border-radius:9px; background:rgba(99,102,241,0.12); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.info-item-card .ic svg{width:18px; height:18px; stroke:var(--violet-deep); fill:none; stroke-width:1.6;}
.info-item-card p{font-size:14px; color:var(--ink-soft);}

@media (max-width:900px){
  .dl-grid{grid-template-columns:1fr;}
  .reason-grid{grid-template-columns:1fr;}
  .form-grid-2{grid-template-columns:1fr;}
  .info-row{grid-template-columns:1fr;}
}

/* ---------- Stat cards ---------- */
.stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--hairline); border:1px solid var(--hairline); border-radius:14px; overflow:hidden;}
.stat-card{background:var(--paper); padding:28px 22px; display:flex; flex-direction:column;}
.stat-card .num{font-family:'Manrope',sans-serif; font-size:32px; font-weight:800; line-height:1; letter-spacing:-0.03em;}
.stat-card:nth-child(4n+1) .num{color:var(--teal-deep);}
.stat-card:nth-child(4n+2) .num{color:var(--logo-blue);}
.stat-card:nth-child(4n+3) .num{color:var(--violet-deep);}
.stat-card:nth-child(4n+4) .num{color:var(--teal-deep);}
.stat-card .label{font-size:12.5px; color:var(--ink-soft); margin-top:8px; line-height:1.5;}
.stat-card .src{font-size:11.5px; color:#64748B; margin-top:auto; padding-top:12px; align-self:flex-start; text-align:left; width:100%;}

/* ---------- External resource links ---------- */
.res-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.res-card{background:var(--paper); border:1px solid var(--hairline); border-radius:12px; padding:24px; display:flex; flex-direction:column; gap:10px;}
.res-card .org{font-size:11.5px; font-weight:800; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink);}
.res-card h4{font-size:15.5px;}
.res-card p{font-size:13px; color:var(--ink-soft); flex-grow:1;}
.res-card a{font-size:12.5px; font-weight:700; color:var(--teal-deep);}

@media (max-width:900px){
  .stat-grid{grid-template-columns:1fr 1fr;}
  .res-grid{grid-template-columns:1fr;}
}

/* ---------- Info strip: location and phone under a hero ---------- */
.info-strip{background:var(--paper); border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); padding:34px 0;}
.info-strip .wrap{display:grid; grid-template-columns:repeat(2,1fr); gap:28px;}
.info-item{display:flex; align-items:flex-start; gap:16px; min-width:0;}
.info-item h4{font-family:'Manrope',sans-serif; font-size:15px; font-weight:700; letter-spacing:-0.01em;}
.info-item p{font-size:13.5px; color:var(--ink-soft); line-height:1.5;}
/* the Google pin is a filled, multi-colour mark, so it drops the tint and stroke */
.icon-circle.is-pin{background:rgba(66,133,244,0.10);}
.icon-circle.is-pin svg{width:24px; height:24px; stroke:none;}
.info-item .info-link{margin-top:8px; font-size:12.5px; font-weight:700; color:var(--ink);}
.info-item .info-link:hover{text-decoration:underline;}

/* ---------- Closing call to action ---------- */
.cta{background:linear-gradient(135deg, var(--brand-tint), #F1F7FD); padding:72px 0; text-align:center;}
.cta h2{font-size:29px; max-width:620px; margin:0 auto 12px; text-wrap:balance;}
.cta > .wrap > p{font-size:15.5px; color:var(--ink-soft); max-width:560px; margin:0 auto;}
.cta-buttons{display:flex; justify-content:center; gap:14px; flex-wrap:wrap; margin-top:28px;}

@media (max-width:900px){
  .info-strip .wrap{grid-template-columns:1fr; gap:20px;}
  .cta{padding:52px 0;}
  .cta h2{font-size:25px;}
}

/* ---------- Small phones ---------- */
@media (max-width:560px){
  .wrap{padding:0 20px;}
  nav > a{padding-left:20px; padding-right:20px;}
  nav a.nav-btn{margin-left:20px; margin-right:20px;}
  .has-dropdown > a{padding-left:20px;}
  .dropdown-toggle{padding-right:20px;}
  .dropdown a{padding-left:34px; padding-right:20px;}

  /* must keep the header offset or the hero rides up under the transparent bar */
  .page-hero{padding:calc(48px + var(--header-h)) 0 40px;}
  .page-hero h1{font-size:27px;}
  .page-hero p.lede{font-size:16px;}
  .section{padding:52px 0;}

  /* stacked CTAs instead of a squeezed row */
  .page-hero .cta-row{flex-direction:column; align-items:stretch; gap:12px;}
  .page-hero .cta-row > a{text-align:center;}
  .btn-primary, .btn-outline{display:block; width:100%;}
  .btn-text{display:inline-block; align-self:center; width:auto; margin-top:4px;}

  .stat-grid{grid-template-columns:1fr;}
  .info-item-card{align-items:flex-start;}

  /* Footer on a phone: one column, each block clearly separated. The mark and
     the copyright line keep sharing a row - they read as one unit - but the
     line is allowed to wrap beside it rather than under it. */
  footer{padding:38px 0 30px;}
  footer .wrap{gap:20px;}
  footer .taglines{flex-direction:column; gap:10px;}
  footer .bottom{flex-direction:column; align-items:flex-start; gap:14px; padding-top:20px;}
  footer .copyright-mark{align-items:flex-start; gap:12px;}
  footer .copyright-mark img{height:42px;}
  footer .copyright-mark span{line-height:1.55;}
}

/* long phone numbers / addresses must never force a sideways scroll */
body{overflow-x:hidden;}
.card, .prose, .form-card{overflow-wrap:break-word;}

/* comfortable tap targets on touch devices (WCAG 2.5.8) */
@media (pointer:coarse){
  nav a, .dropdown a, .btn-primary, .btn-outline, .btn-text{min-height:44px;}
  .nav-toggle, .dropdown-toggle{min-width:44px; min-height:44px;}
}

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

/* ---------- Form notices & disabled state ---------- */
/* Built from the same parts as the cards around it - hairline border, 12px
   radius, kicker-style label - so it reads as part of the page rather than a
   tinted alert dropped on top of it. The red is carried by the label and dot. */
.form-notice{
  background:var(--paper); border:1px solid var(--hairline); border-radius:12px;
  padding:20px 22px; margin-bottom:26px;
  font-size:14px; color:var(--ink-soft); line-height:1.6;
  box-shadow:0 1px 2px rgba(15,23,42,0.04);
}
.form-notice strong{
  display:flex; align-items:center; gap:8px; margin-bottom:8px;
  font-size:11.5px; font-weight:800; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--red);
}
.form-notice strong::before{
  content:""; width:7px; height:7px; border-radius:50%;
  background:var(--red); flex-shrink:0;
}
.form-notice a{color:#A32832; font-weight:700; text-decoration:underline;}
.field-help{font-size:12.5px; color:var(--ink-soft); margin-top:6px; line-height:1.5;}

/* Honeypot. Off-screen rather than display:none - a bot reading the stylesheet
   skips hidden fields, and a field it skips catches nobody. Kept out of the tab
   order and off the accessibility tree by the markup. */
.hp-field{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}

/* Submission result, announced in place. Sits above the button so the eye
   lands on it on the way back from pressing Submit. */
.form-status{
  margin:0 0 18px; padding:14px 16px; border-radius:10px;
  font-size:13.5px; line-height:1.6; border:1px solid transparent;
}
.form-status.is-pending{color:var(--ink-soft); background:rgba(15,23,42,0.04); border-color:var(--hairline);}
.form-status.is-ok{color:#0B5D33; background:rgba(16,122,72,0.08); border-color:rgba(16,122,72,0.25);}
.form-status.is-error{color:#A32832; background:rgba(200,51,62,0.07); border-color:rgba(200,51,62,0.28);}
.form-row input:disabled, .form-row select:disabled, .form-row textarea:disabled,
.btn-primary:disabled{
  opacity:0.55; cursor:not-allowed; background:rgba(15,23,42,0.03);
}
.btn-primary:disabled:hover{background:var(--ink); transform:none;}

/* ---------- Two-column split that collapses on small screens ---------- */
.split-2{display:grid; grid-template-columns:1fr 1fr;}
@media (max-width:900px){
  .split-2{grid-template-columns:1fr;}
}

/* four cards should not leave a dead cell in a three-column grid */
.grid3.four-up{grid-template-columns:repeat(2,1fr);}
@media (max-width:900px){
  .grid3.four-up{grid-template-columns:1fr;}
}

/* ---------- Steps, crisis banner, split panels ----------
   (was inline on behavioral-health.html and medical-services.html) */
/* ---------- Steps / process ---------- */
.step-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--hairline); border:1px solid var(--hairline); border-radius:14px; overflow:hidden;}
.step-card{background:var(--paper); padding:28px 24px 32px;}
.step-card .step-num{font-family:'Manrope',sans-serif; font-size:13px; font-weight:800; color:#fff; width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-bottom:14px;}
.step-card:nth-child(4n+1) .step-num{background:var(--teal-deep);}
.step-card:nth-child(4n+2) .step-num{background:var(--logo-blue);}
.step-card:nth-child(4n+3) .step-num{background:var(--violet-deep);}
.step-card:nth-child(4n+4) .step-num{background:var(--brand-deep);}
.step-card h3{font-size:15.5px; margin-bottom:8px;}
.step-card p{font-size:13.5px; color:var(--ink-soft);}

/* ---------- Crisis banner ---------- */
.crisis-band{background:#FEF3F3; border-top:1px solid #F8D7DA; border-bottom:1px solid #F8D7DA; padding:26px 0;}
.crisis-band .wrap{display:flex; gap:18px; align-items:flex-start; flex-wrap:wrap;}
.crisis-band .ic{width:38px; height:38px; border-radius:9px; background:rgba(200,51,62,0.12); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.crisis-band .ic svg{width:19px; height:19px; stroke:var(--red); fill:none; stroke-width:1.7;}
.crisis-band h3{font-size:17px; margin-bottom:6px; color:var(--red);}
.crisis-band p{font-size:14px; color:var(--ink-soft); max-width:760px;}
.crisis-band a{color:var(--red); font-weight:700;}

/* ---------- Two column feature ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start;}
.panel-card{background:var(--paper); border:1px solid var(--hairline); border-radius:14px; padding:32px;}
.panel-card h3{font-size:19px; margin-bottom:12px;}
.panel-card p{font-size:14.5px; color:var(--ink-soft); margin-bottom:12px;}
.panel-card ul{list-style:none;}
.panel-card li{font-size:14px; color:var(--ink-soft); padding-left:20px; position:relative; margin-bottom:8px;}
.panel-card li::before{content:""; position:absolute; left:0; top:8px; width:7px; height:7px; border-radius:50%; background:var(--teal-light);}

.checklist{list-style:none; margin-top:6px;}
.checklist li{font-size:14px; color:var(--ink-soft); padding-left:22px; position:relative; margin-bottom:10px;}
/* the same small dot the other lists on the site use */
.checklist li::before{content:""; position:absolute; left:2px; top:9px; width:7px; height:7px; border-radius:50%; background:var(--teal-light);}

.consent-row{display:flex; gap:10px; align-items:flex-start; margin-bottom:18px;}
.consent-row input{width:16px; height:16px; margin-top:3px; flex-shrink:0;}
.consent-row label{font-size:13px; font-weight:500; color:var(--ink-soft); line-height:1.6;}
.form-note{font-size:12.5px; color:var(--ink-soft); margin-top:-8px; margin-bottom:18px;}
fieldset{border:none;}
.chk-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px 20px; margin-top:4px;}
.chk-grid label{display:flex; gap:9px; align-items:center; font-size:13.5px; font-weight:500; color:var(--ink-soft);}
.chk-grid input{width:15px; height:15px;}

@media (max-width:900px){
  .step-grid{grid-template-columns:1fr;}
  .split{grid-template-columns:1fr;}
  .chk-grid{grid-template-columns:1fr;}
}

/* ---------- Call-to-action pair (Donate / Volunteer) ---------- */
.action-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
.action-card{
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--paper); border:1px solid var(--hairline); border-radius:18px;
  display:flex; flex-direction:column;
  box-shadow:0 1px 2px rgba(15,23,42,0.04);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
/* photo band: the two images are different shapes, so a fixed height with
   object-fit keeps both cards level regardless of the source ratio */
.ac-media{height:200px; overflow:hidden; flex-shrink:0;}
.ac-media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s cubic-bezier(.4, 0, .2, 1);
}
.action-card:hover .ac-media img{transform:scale(1.045);}
.ac-body{padding:32px 36px 34px; display:flex; flex-direction:column; flex:1;}
.action-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 38px rgba(15,23,42,0.11);
  border-color:rgba(15,23,42,0.14);
}
/* soft accent wash bleeding down from the top corner */
.action-card::before{
  content:""; position:absolute; z-index:-1; inset:0; pointer-events:none;
}
.action-card.accent-teal::before{
  background:radial-gradient(115% 62% at 10% 0%, rgba(58,160,255,0.22), rgba(58,160,255,0) 72%);
}
.action-card.accent-violet::before{
  background:radial-gradient(115% 62% at 10% 0%, rgba(99,102,241,0.20), rgba(99,102,241,0) 72%);
}
.action-card .kicker{
  font-size:12px; font-weight:800; letter-spacing:0.14em;
  text-transform:uppercase; display:block; margin-bottom:10px;
}
/* deeper teal: the standard token only reaches 4.1:1 over the accent wash */
.action-card.accent-teal .kicker{color:#00468C;}
.action-card.accent-violet .kicker{color:var(--violet-deep);}
.action-card h2{font-size:25px; margin-bottom:12px; letter-spacing:-0.022em;}
.action-card p{color:var(--ink-soft); font-size:14.5px; margin-bottom:28px;}
/* buttons line up across both cards regardless of copy length */
.action-card .ac-cta{margin-top:auto;}

@media (max-width:900px){
  .action-grid{grid-template-columns:1fr; gap:18px;}
  .ac-body{padding:28px 26px 30px;}
  .ac-media{height:170px;}
}
@media (prefers-reduced-motion:reduce){
  .action-card:hover .ac-media img{transform:none;}
}
@media (max-width:560px){
  .action-card h2{font-size:22px;}
  .action-card .ac-cta .btn-primary,
  .action-card .ac-cta .btn-outline{display:block; width:100%; text-align:center;}
}

/* note sitting directly beneath a section heading rather than off to the side */
.section-head .sub.sub-under{max-width:560px; margin-top:10px;}

/* ---------- Page hero with a photo beside the copy ---------- */
.hero-media .wrap{display:grid; grid-template-columns:1.05fr 0.95fr; gap:48px; align-items:center;}
.hero-media .hero-copy{min-width:0;}
.hero-media h1, .hero-media p.lede{max-width:none;}
.hero-media-img{
  width:100%; height:auto; max-height:340px; object-fit:cover;
  border-radius:16px; display:block;
  box-shadow:0 1px 2px rgba(15,23,42,0.06);
}
@media (max-width:900px){
  .hero-media .wrap{grid-template-columns:1fr; gap:28px;}
  .hero-media-img{max-height:230px;}
}

/* ---------- Section intro with a photo alongside ---------- */
/* The photo takes the narrower column. Its source is only 640px wide, so a
   half-width slot would stretch it past 1:1 on anything but a small screen. */
.media-split{display:grid; grid-template-columns:1.3fr 0.7fr; gap:44px; align-items:center; margin-bottom:44px;}
.media-split > *{min-width:0;}
/* the heading already carries the gap below via .media-split */
.media-split .section-head{margin-bottom:0;}
.media-split .section-head h2{max-width:none;}
.media-split .section-head .sub.sub-under{max-width:none;}
.media-split-img{
  width:100%; height:100%; max-height:270px; object-fit:cover;
  border-radius:14px; display:block;
  box-shadow:0 1px 2px rgba(15,23,42,0.06);
}
@media (max-width:900px){
  .media-split{grid-template-columns:1fr; gap:26px; margin-bottom:32px;}
  .media-split-img{max-height:210px;}
}


/* ---------- Homepage hero intro ----------
   Opaque panel over the hero holding an oversized wordmark. It is visible by
   default so it is already painted on the first frame; site.js animates it away
   and deletes it. Anything that stops the script leaves the curtain up, so both
   escape hatches below matter: no JS hides it outright, and so does a
   reduced-motion preference. */
.hero-intro{
  position:absolute; inset:0; z-index:6;
  display:flex; align-items:center; justify-content:center;
  background:var(--paper);
  pointer-events:none;
}
.hero-intro-logo{width:min(620px, 62vw); height:auto; display:block;}
/* the stacked mobile hero is tall, so a 62vw mark looks lost in it */
@media (max-width:560px){
  .hero-intro-logo{width:74vw;}
}
html.no-js .hero-intro{display:none;}
@media (prefers-reduced-motion:reduce){
  .hero-intro{display:none;}
}

/* ---------- Homepage hero photo ---------- */
.hero-photo{position:relative; overflow:hidden; min-height:min(600px, 42vw);}
.hero-photo .wrap{display:flex; align-items:center;}
/* no position:relative here - the photo anchors to the section so it bleeds full-width */
/* copy is capped so it never runs under the people on the right */
.hero-photo .hero-copy{position:relative; z-index:2; max-width:min(470px, 42%);}
/* White scrim between photo and copy. The hero is already white on the left, so
   this is invisible there; it only does work where subjects creep under the text
   at narrower widths. Keeps the copy legible without darkening the photo. */
.hero-photo::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg,
    #fff 0%, #fff 33%, rgba(255,255,255,0.92) 42%,
    rgba(255,255,255,0.45) 48%, rgba(255,255,255,0) 54%);
}
.hero-photo h1, .hero-photo p.lede{max-width:none;}
.hero-photo picture{display:contents;}
.hero-photo-img{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; max-width:none;
  /* anchored to the top so the faces survive the vertical crop */
  object-fit:cover; object-position:50% 0%;
  pointer-events:none; user-select:none;
}

@media (max-width:900px){
  /* stacked: no photo behind the text, so no contrast risk */
  /* the desktop wrap is a flex row; stack it or the photo sits beside the copy */
  .hero-photo{overflow:hidden; min-height:0;}
  .hero-photo::before{display:none;}
  .hero-photo .wrap{flex-direction:column; align-items:stretch; padding:0;}
  /* keep comfortable inner spacing for the copy when the wrap padding is removed */
  .hero-photo .hero-copy{max-width:none; padding:0 24px;}
  .hero-photo-img{
    position:static; height:auto; width:100%; max-width:100%;
    margin-top:30px; display:block; object-fit:contain;
  }
}


/* ---------- Link arrow ----------
   A masked SVG rather than a "->" character: it inherits the link colour via
   currentColor, stays optically aligned with the text, and can animate. */
.arrow-link{display:inline-flex; align-items:center; gap:0.5em;}
.arrow-link::after{
  content:""; flex:0 0 auto; width:0.95em; height:0.95em;
  background-color:currentColor;
  -webkit-mask:var(--arrow) no-repeat center; -webkit-mask-size:contain;
  mask:var(--arrow) no-repeat center; mask-size:contain;
  transition:transform .18s ease;
}
.arrow-link:hover::after, .arrow-link:focus-visible::after{transform:translateX(4px);}
@media (prefers-reduced-motion:reduce){
  .arrow-link::after{transition:none;}
  .arrow-link:hover::after{transform:none;}
}
/* card links push the arrow to the bottom of the card, so keep them on one line */
.card .card-link{white-space:nowrap;}

/* ---------- Story cards (image over text) ---------- */
.story-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
.story-card{
  position:relative;
  background:var(--paper); border:1px solid var(--hairline); border-radius:16px;
  overflow:hidden; display:flex; flex-direction:column;
  box-shadow:0 1px 2px rgba(15,23,42,0.04);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.story-card:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 30px rgba(15,23,42,0.09);
  border-color:rgba(15,23,42,0.14);
}
/* <picture> is a flex item: without this it stretches to fill the leftover
   space in whichever card has less text, making that image taller. */
.story-card picture{display:block; flex:0 0 auto;}
/* fixed ratio keeps both cards aligned regardless of source dimensions */
/* height:auto is required - the HTML height attribute is a presentational
   hint, and aspect-ratio is ignored while height resolves to anything else. */
.story-card img{width:100%; height:auto; aspect-ratio:3 / 2; object-fit:cover; display:block;}
.story-body{padding:24px 26px 26px; display:flex; flex-direction:column; flex:1;}
.story-body p{font-size:14.5px; color:var(--ink-soft); margin-bottom:18px;}
/* pins Read more to the bottom so it lines up across cards of unequal copy */
.story-body .btn-text{margin-top:auto; align-self:flex-start;}

@media (max-width:900px){
  .story-grid{grid-template-columns:1fr; gap:20px;}
}

/* ---------- About hero: copy + facts card ---------- */
.about-hero .wrap{display:grid; grid-template-columns:1.12fr 0.88fr; gap:56px; align-items:center;}
.about-hero .hero-copy{min-width:0;}
.about-hero h1, .about-hero p.lede{max-width:none;}

.glance{
  background:var(--paper); border:1px solid var(--hairline); border-radius:18px;
  padding:30px 32px 32px; box-shadow:0 1px 2px rgba(15,23,42,0.04);
}
.glance-title{
  display:block; font-size:12px; font-weight:800; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--brand-text); margin-bottom:8px;
}
.glance-item{padding:18px 0 0; margin-top:18px; border-top:1px solid var(--hairline);}
.glance-item:first-of-type{border-top:0; margin-top:0;}
.glance-num{
  display:block; font-size:30px; font-weight:800; line-height:1.1;
  letter-spacing:-0.03em; color:var(--brand-deep);
}
.glance-label{display:block; font-size:13.5px; color:var(--ink-soft); margin-top:5px;}

/* ---------- Mission quote as a card ---------- */
.mission-inner{
  position:relative; background:var(--paper); border:1px solid var(--hairline);
  border-radius:20px; padding:52px 56px 48px; max-width:820px; margin:0 auto;
  text-align:center; box-shadow:0 1px 2px rgba(15,23,42,0.04);
}
.mission-inner::before{content:none;}

@media (max-width:900px){
  .about-hero .wrap{grid-template-columns:1fr; gap:34px;}
  .mission-inner{padding:40px 26px 34px;}
  .mission-inner::before{content:none;}
}

/* ---------- Intake page ---------- */
.facts-strip{
  list-style:none; display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--hairline); border:1px solid var(--hairline);
  border-radius:14px; overflow:hidden;
}
.facts-strip li{
  background:var(--paper); padding:20px 22px;
  font-size:13.5px; color:var(--ink-soft); line-height:1.5;
}
.facts-strip strong{
  display:block; font-size:14.5px; font-weight:700;
  color:var(--ink); margin-bottom:4px;
}

.intake-split{display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start;}
.intake-panel{
  background:var(--paper); border:1px solid var(--hairline); border-radius:16px;
  padding:32px 34px 34px; box-shadow:0 1px 2px rgba(15,23,42,0.04);
}
/* the working path gets the brand accent; the pending one stays neutral */
.intake-panel-live{border-color:rgba(58,160,255,0.45); box-shadow:0 6px 22px rgba(58,160,255,0.10);}
.intake-panel h3{font-size:19px; margin-bottom:10px;}
.intake-panel > p{font-size:14.5px; color:var(--ink-soft); margin-bottom:18px;}
.intake-panel .form-notice{margin-bottom:22px;}

.intake-options{list-style:none; counter-reset:step; margin:0 0 20px;}
.intake-options li{
  counter-increment:step; position:relative;
  padding:0 0 20px 42px; margin-bottom:20px;
  border-bottom:1px solid var(--hairline);
}
.intake-options li:last-child{border-bottom:0; margin-bottom:0; padding-bottom:0;}
.intake-options li::before{
  content:counter(step); position:absolute; left:0; top:1px;
  width:28px; height:28px; border-radius:50%;
  background:var(--brand-deep); color:#fff;
  font-size:13px; font-weight:800; line-height:28px; text-align:center;
}
.intake-options strong{display:block; font-size:15.5px; margin-bottom:4px;}
.intake-options p{font-size:13.5px; color:var(--ink-soft); margin-bottom:12px;}

@media (max-width:900px){
  .facts-strip{grid-template-columns:1fr 1fr;}
  .intake-split{grid-template-columns:1fr;}
}
@media (max-width:560px){
  .facts-strip{grid-template-columns:1fr;}
  .intake-panel{padding:26px 24px 28px;}
}

/* ---------- Click-to-load video ---------- */
.video-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
.video-card h3{font-size:16.5px; font-weight:600; margin-top:14px;}
/* embedded player; a fixed ratio keeps the grid from reflowing as it loads */
.video-frame{
  width:100%; aspect-ratio:16 / 9; border:0;
  border-radius:14px; display:block; background:var(--ink);
}
.video-grid-3{grid-template-columns:repeat(3,1fr);}
@media (max-width:900px){ .video-grid, .video-grid-3{grid-template-columns:1fr;} }

/* ---------- Narcan hero ---------- */
.narcan-hero .wrap{display:grid; grid-template-columns:1.1fr 0.9fr; gap:48px; align-items:center;}
.narcan-hero .hero-copy{min-width:0;}
.narcan-hero h1, .narcan-hero p.lede{max-width:none;}
.narcan-shot{width:100%; height:auto; max-width:420px; margin-left:auto; display:block;}
.dl-meta{font-weight:600; color:var(--ink-soft);}
.video-grid-single{grid-template-columns:minmax(0,720px);}
@media (max-width:900px){
  .narcan-hero .wrap{grid-template-columns:1fr; gap:30px;}
  .narcan-shot{max-width:320px; margin:0;}
}
.video-src{font-size:12.5px; color:var(--ink-soft); margin-top:4px;}

/* two-column checklist for longer criteria lists */
.checklist-2col{columns:2; column-gap:44px;}
.checklist-2col li{break-inside:avoid;}
@media (max-width:760px){ .checklist-2col{columns:1;} }

/* "All Services" sits above the individual services, divided from them */
.dropdown-sep{display:block; height:1px; margin:6px 8px; background:var(--hairline);}
.dropdown a[aria-current="page"]{color:var(--brand-text); background:rgba(58,160,255,0.10);}
@media (max-width:900px){ .dropdown-sep{margin:6px 32px;} }