/* ==========================================================================
   Tinnitus Relief Australia
   Design system: "Nothing in this page has a hard edge."
   Palette navy / blue / magenta. Source Serif 4 + Figtree.
   ========================================================================== */

/* Fonts are served from our own domain rather than Google Fonts. One less
   third-party request on a health site, and headings stop shifting while an
   external stylesheet loads. */
@font-face{
  font-family:"Source Serif 4"; font-style:normal; font-weight:200 900;
  font-display:swap; src:url("../fonts/source-serif-4-var.woff2") format("woff2");
}
@font-face{
  font-family:"Figtree"; font-style:normal; font-weight:300 900;
  font-display:swap; src:url("../fonts/figtree-var.woff2") format("woff2");
}
@font-face{
  font-family:"Figtree"; font-style:italic; font-weight:300 900;
  font-display:swap; src:url("../fonts/figtree-var-italic.woff2") format("woff2");
}

:root{
  /* Core palette */
  --navy:        #182E56;
  --navy-deep:   #0E1C34;
  --navy-soft:   #24406F;
  --blue:        #427BFB;
  --blue-deep:   #2E5FD4;
  --sky:         #2AB5FF;
  --sky-pale:    #D5F0FF;
  --magenta:     #D240F7;
  /* accessible text variants of the two brand accents */
  --violet-ink:  #9A15BA;
  --blue-ink:    #2555C8;
  --magenta-deep:#A21BC2;
  --blush:       #F8E2FF;

  /* Surfaces */
  --paper:       #FAFBFF;
  --mist:        #E4EDF9;
  --ink:         #16294B;
  --ink-soft:    #4E5F80;
  --white:       #FFFFFF;

  /* Type */
  --display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --body:    "Figtree", ui-sans-serif, system-ui, -apple-system, sans-serif;

  --step--1: clamp(0.86rem, 0.83rem + 0.15vw, 0.95rem);
  --step-0:  clamp(1.02rem, 0.98rem + 0.22vw, 1.16rem);
  --step-1:  clamp(1.22rem, 1.12rem + 0.5vw, 1.5rem);
  --step-2:  clamp(1.5rem, 1.3rem + 1vw, 2.1rem);
  --step-3:  clamp(1.95rem, 1.6rem + 1.7vw, 3rem);
  --step-4:  clamp(2.5rem, 1.9rem + 2.9vw, 4.4rem);
  --step-5:  clamp(3rem, 2.1rem + 4.2vw, 5.8rem);

  /* Shape */
  --r-sm: 14px;
  --r-md: 24px;
  --r-lg: 34px;
  --r-xl: 48px;
  --shadow-soft: 0 24px 60px -30px rgba(24,46,86,.30);
  --shadow-lift: 0 34px 80px -34px rgba(24,46,86,.42);

  --wrap: 1180px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
}

/* --------------------------------------------------------------- reset -- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:var(--step-0);
  line-height:1.65;
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,svg,video{max-width:100%; display:block}
a{color:inherit}
button{font:inherit}

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:500;
  line-height:1.07;
  letter-spacing:-.015em;
  margin:0 0 .5em;
  text-wrap:balance;
}
h1{font-size:var(--step-5)}
h2{font-size:var(--step-4)}
h3{font-size:var(--step-2)}
h4{font-size:var(--step-1); line-height:1.2}
p{margin:0 0 1.1em; text-wrap:pretty}
p:last-child{margin-bottom:0}

.em{
  font-style:normal;
  color:var(--magenta);
}

/* ------------------------------------------------------------- layout -- */
.wrap{width:min(100% - (var(--gutter) * 2), var(--wrap)); margin-inline:auto}
.wrap-narrow{width:min(100% - (var(--gutter) * 2), 780px); margin-inline:auto}

.band{position:relative; padding:clamp(4rem,9vw,7.5rem) 0}
.band--tight{padding:clamp(2.5rem,5vw,4rem) 0}
.band--to-footer{padding-bottom:clamp(2.5rem,4vw,3.5rem)}
.band--paper{background:var(--paper)}
.band--mist{background:var(--mist)}
.band--sky{background:#D9E9FA}
.band--navy{
  background:radial-gradient(120% 90% at 12% 0%, #24406F 0%, var(--navy) 45%, var(--navy-deep) 100%);
  color:#E4EDF9;
}
.band--navy h2,.band--navy h3,.band--navy h4{color:#fff}
.band--navy p{color:#B9C6E0}

.eyebrow{
  font-family:var(--body);
  font-size:var(--step--1);
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--violet-ink);
  margin:0 0 1rem;
  display:flex; align-items:center; gap:.7rem;
}
.eyebrow::before{
  content:""; width:34px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--magenta),transparent);
}
.band--navy .eyebrow{color:var(--sky)}
.band--navy .eyebrow::before{background:linear-gradient(90deg,var(--sky),transparent)}

.lede{font-size:var(--step-1); color:var(--ink-soft); line-height:1.55; max-width:62ch}
.band--navy .lede{color:#B0C1DC}

.grid{display:grid; gap:clamp(1.4rem,3vw,2.4rem)}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.split{display:grid; gap:clamp(2rem,5vw,4.5rem); align-items:center; grid-template-columns:1fr}
.split--top{align-items:flex-start}
@media(min-width:900px){
  .split{grid-template-columns:1.05fr .95fr}
  .split--top > *:first-child{position:sticky; top:110px}
  .split--flip > *:first-child{order:2}
}

/* --------------------------------------------------------- atmosphere -- */
/* Soft blurred light so section edges never read as a line */
.glow{position:absolute; border-radius:50%; filter:blur(90px); opacity:.5; pointer-events:none; z-index:0}
.glow--blue{background:radial-gradient(circle,#7FC9FF,transparent 70%)}
.glow--magenta{background:radial-gradient(circle,#EDA6FC,transparent 70%)}
.glow--a{width:min(60vw,620px); aspect-ratio:1; top:2%; right:-2%}
.glow--b{width:min(52vw,520px); aspect-ratio:1; bottom:2%; left:-2%}
.band > .wrap,.band > .wrap-narrow{position:relative; z-index:1}

/* Wave seams: every section boundary is a curve, never a rule */
.seam{display:block; width:100%; height:clamp(64px,8.5vw,130px); line-height:0; position:relative}
.seam svg{width:100%; height:100%; display:block}
.seam--flip svg{transform:scaleY(-1)}
.seam .seam-back{opacity:.3}
.seam--footer{height:var(--seam-h)}
.seam--footer .seam-back{opacity:.3}

/* ------------------------------------------------------------ buttons -- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.95em 1.9em; border-radius:999px; border:0;
  font-weight:600; font-size:var(--step-0); text-decoration:none; cursor:pointer;
  transition:transform .25s cubic-bezier(.2,.8,.3,1), box-shadow .25s, background .25s;
  will-change:transform;
}
.btn:hover{transform:translateY(-3px)}
.btn:focus-visible{outline:3px solid var(--magenta); outline-offset:3px}
.btn--primary{
  color:#fff;
  background:linear-gradient(115deg,var(--magenta) 0%, #DE6BF9 55%, var(--magenta-deep) 100%);
  box-shadow:0 16px 34px -14px rgba(210,64,247,.65);
}
.btn--primary:hover{box-shadow:0 22px 44px -14px rgba(210,64,247,.75)}
.btn--blue{
  color:#fff;
  background:linear-gradient(115deg,var(--blue) 0%, #6B9BFF 55%, var(--blue-deep) 100%);
  box-shadow:0 16px 34px -14px rgba(66,123,251,.6);
}
.btn--ghost{
  color:var(--navy); background:rgba(255,255,255,.7);
  box-shadow:inset 0 0 0 1.5px rgba(66,123,251,.28), 0 10px 26px -18px rgba(24,46,86,.5);
  backdrop-filter:blur(6px);
}
.band--navy .btn--ghost,
.hero .btn--ghost,
.site-footer .btn--ghost,
.cta-panel .btn--ghost{color:#fff; background:rgba(255,255,255,.09); box-shadow:inset 0 0 0 1.5px rgba(42,181,255,.42)}
.band--navy .btn--ghost:hover,
.hero .btn--ghost:hover,
.site-footer .btn--ghost:hover,
.cta-panel .btn--ghost:hover{background:rgba(255,255,255,.16)}
.btn-row{display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2rem}

.textlink{
  font-weight:600; color:var(--blue-ink); text-decoration:none;
  display:inline-flex; align-items:center; gap:.4rem;
}
.textlink::after{content:"→"; transition:transform .25s}
.textlink:hover::after{transform:translateX(5px)}
.band--navy .textlink{color:var(--sky)}

/* ------------------------------------------------------------- header -- */
/* No shape on the header. A wave never read at this aspect ratio, so the bar
   simply dissolves: solid where the nav sits, fading to nothing beneath it.
   There is no edge to look wrong. */
.site-header{
  position:sticky; top:0; z-index:60; isolation:isolate;
  padding:.7rem 0 .55rem;
  background:var(--paper);
}
.site-header::after{
  content:""; position:absolute; left:0; right:0; top:100%;
  height:clamp(18px,2.2vw,34px);
  background:linear-gradient(180deg, var(--paper) 0%, rgba(250,251,255,.86) 45%, rgba(250,251,255,0) 100%);
  pointer-events:none;
}
.header-inner{display:flex; align-items:center; gap:clamp(.7rem,1.8vw,1.6rem)}
/* Jamie asked for the mark to sit hard into the corner, so the lockup
   breaks out of the content gutter on wide screens. */
@media(min-width:1100px){
  .site-header .wrap{max-width:none; padding-inline:clamp(1.4rem,3vw,2.6rem)}
}
.brand{display:flex; align-items:center; gap:.7rem; text-decoration:none; font-weight:700; color:var(--navy); flex:0 0 auto}
.brand-mark{width:72px; flex:0 0 auto; display:block}
.brand-mark svg{width:72px; height:50px; display:block}
.brand-text{display:flex; flex-direction:column; line-height:1.05}
.brand-text{gap:3px}
.brand-text b{
  font-size:1.18rem;
  font-family:var(--display);
  font-weight:600; font-size:1.02rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--navy); line-height:1;
}
.brand-text > span{
  display:flex; align-items:center; gap:6px;
  font-size:.56rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--navy); font-weight:600; line-height:1;
}
.brand-text > span i{flex:1; height:1px; background:currentColor; opacity:.55; min-width:10px}
.brand-text--light b,.brand-text--light > span{color:#fff}
.brand-text--light > span{color:#93A8C8}

.nav{margin-left:auto; display:flex; align-items:center; gap:.1rem; flex-wrap:nowrap}
.nav a{
  text-decoration:none; font-size:.92rem; font-weight:500; color:var(--ink);
  padding:.55rem .7rem; border-radius:999px; transition:background .2s, color .2s;
  white-space:nowrap;
}
.nav a:hover{background:rgba(66,123,251,.09); color:var(--blue-deep)}
.nav a[aria-current="page"]{color:var(--violet-ink); font-weight:700}

/* dropdown groups */
.nav-item{position:relative; display:flex; align-items:center}
.nav-item > a::after{
  content:""; width:0; height:0; margin-left:.34rem;
  border:4px solid transparent; border-top-color:currentColor; opacity:.55;
  transform:translateY(2px);
}
.subnav{
  position:absolute; top:100%; left:-.4rem; min-width:246px; z-index:70;
  display:flex; flex-direction:column; gap:.1rem;
  background:#fff; border-radius:var(--r-md); padding:.5rem; margin-top:.35rem;
  box-shadow:0 30px 70px -28px rgba(24,46,86,.5);
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .22s ease, transform .22s cubic-bezier(.2,.8,.3,1), visibility .22s;
}
.subnav::before{content:""; position:absolute; inset:-.5rem 0 100% 0}
.nav-item:hover .subnav,.nav-item:focus-within .subnav{opacity:1; visibility:visible; transform:none}
.subnav a{font-size:.92rem; padding:.6rem .8rem; border-radius:var(--r-sm)}
.subnav a small{display:block; font-size:.76rem; color:var(--ink-soft); font-weight:400; margin-top:.1rem}
.header-cta{display:flex; align-items:center; gap:.7rem; flex:0 0 auto}
.header-cta .btn{white-space:nowrap}
.header-phone{
  display:inline-flex; align-items:center; gap:.4rem; text-decoration:none;
  font-weight:600; color:var(--navy); font-size:.95rem; white-space:nowrap;
}
.header-phone:hover{color:var(--magenta)}

.nav-toggle{
  display:none; margin-left:auto; width:46px; height:46px; border-radius:50%;
  background:rgba(66,123,251,.1); border:0; cursor:pointer; position:relative;
}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{
  content:""; position:absolute; left:50%; width:20px; height:2px; border-radius:2px;
  background:var(--navy); transform:translateX(-50%); transition:.3s;
}
.nav-toggle span{top:50%; margin-top:-1px}
.nav-toggle span::before{top:-6px; left:0; transform:none}
.nav-toggle span::after{top:6px; left:0; transform:none}
.nav-toggle[aria-expanded="true"] span{background:transparent}
.nav-toggle[aria-expanded="true"] span::before{transform:rotate(45deg); top:0}
.nav-toggle[aria-expanded="true"] span::after{transform:rotate(-45deg); top:0}

@media(max-width:1200px){
  .nav-toggle{display:block}
  .header-cta .header-phone{display:none}
  .nav{
    position:absolute; top:calc(100% + 2.2rem); left:var(--gutter); right:var(--gutter); bottom:auto;
    flex-direction:column; align-items:stretch; gap:.1rem;
    background:#FAFBFF;
    padding:.8rem; border-radius:var(--r-lg);
    box-shadow:0 34px 80px -32px rgba(24,46,86,.55);
    opacity:0; visibility:hidden; transform:translateY(-12px) scale(.985);
    transition:opacity .28s ease, transform .28s cubic-bezier(.2,.8,.3,1), visibility .28s;
    max-height:calc(100vh - 130px); overflow-y:auto;
  }
  .nav.is-open{opacity:1; visibility:visible; transform:none}
  .nav a{padding:.85rem 1rem; font-size:1.02rem}
  .nav-item{display:block}
  .nav-item > a::after{display:none}
  .subnav{
    position:static; opacity:1; visibility:visible; transform:none;
    box-shadow:none; background:transparent; padding:0 0 .5rem .6rem;
    margin:0; min-width:0; border-left:2px solid var(--sky-pale); margin-left:1rem;
  }
  .subnav a{font-size:.94rem; padding:.55rem .9rem; color:var(--ink-soft)}
  .subnav a small{display:none}
  .header-cta{margin-left:.2rem}
  .header-cta .btn{font-size:.86rem !important; padding:.62em 1em !important}
  .header-inner{gap:.5rem}
  .brand-mark{width:56px}
  .brand-mark svg{width:56px; height:39px}
  .brand-text b{font-size:.92rem}
  .brand-text > span{font-size:.5rem; letter-spacing:.28em}
}

/* --------------------------------------------------- testimonial ticker -- */
/* Text-only scrolling quotes: top, middle and bottom of every page */
.ticker{
  position:relative; overflow:hidden; background-clip:padding-box; padding:clamp(1.9rem,3.2vw,2.8rem) 0;
  --speed:66s;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.ticker--light{background:linear-gradient(180deg,#FAFBFF 0%,#E4F1FE 50%,#FAFBFF 100%)}
.ticker--blush{background:linear-gradient(180deg,#FAFBFF 0%,#F9E9FC 50%,#FAFBFF 100%)}
.ticker--mist{background:linear-gradient(180deg,#E4EDF9 0%,#E0EEFC 50%,#E4EDF9 100%)}
.ticker--navy{background:linear-gradient(180deg,#0E1C34 0%,#1E3A66 50%,#0E1C34 100%); color:#D2E2F5}
.ticker-track{display:flex; width:max-content; animation:ticker var(--speed) linear infinite}
.ticker:hover .ticker-track,.ticker:focus-within .ticker-track{animation-play-state:paused}
.ticker--rev .ticker-track{animation-direction:reverse}
.ticker--lead{padding:clamp(3rem,5vw,4.6rem) 0}
.ticker--lead .ticker-item{font-size:clamp(1.6rem,3vw,2.5rem); padding:0 4rem; gap:1.3rem}
.ticker--lead .ticker-item::after{width:30px; height:30px; margin-left:2rem}
.ticker--lead .ticker-item cite{font-size:.6em}
.ticker-item{
  display:inline-flex; align-items:baseline; gap:1rem; padding:0 3rem;
  white-space:nowrap; font-size:clamp(1.2rem,2vw,1.6rem);
}
.ticker-item q{
  font-family:var(--display);
  font-style:normal; font-weight:400; quotes:"“" "”";
  color:var(--navy);
}
.ticker--navy .ticker-item q{color:#E9EFFA}
.ticker-item cite{
  font-style:normal; font-weight:700; font-size:.74em; letter-spacing:.09em;
  color:var(--violet-ink); text-transform:uppercase;
}
.ticker--navy .ticker-item cite{color:#E9A2FB}
.ticker-item::after{
  /* TRA's official mark between testimonials */
  content:""; margin-left:1.6rem; width:32px; height:26px; align-self:center; opacity:.9;
  background:url("/img/logo-mark.png") center/contain no-repeat;
}
@keyframes ticker{from{transform:translate3d(0,0,0)} to{transform:translate3d(-50%,0,0)}}

/* --------------------------------------------------------------- hero -- */
/* Every header carries a photograph. The scrim is layered over it in the same
   navy so the image reads as depth rather than as a picture in a box. */
.hero{
  position:relative;
  /* The photograph and its navy scrim are set inline per page (see build.py).
     They are declared together so the relative image path resolves against the
     document rather than this stylesheet. */
  background-color:var(--navy-deep);
  background-size:cover, cover;
  background-position:center, center var(--hero-y, 20%);
  background-repeat:no-repeat, no-repeat;
  color:#E9EFFA;
  --cap-h:clamp(34px,3.8vw,58px);
  /* Jamie wants the buttons visible without scrolling, so the hero is capped
     against the viewport instead of growing with its content. */
  display:flex; flex-direction:column; justify-content:center;
  padding:
    calc(var(--cap-h) + clamp(.4rem,1vw,.9rem)) 0
    calc(var(--cap-h) + clamp(.8rem,1.6vw,1.4rem));
}
.hero::after{
  content:""; position:absolute; inset:auto 0 0 0; height:45%;
  background:linear-gradient(180deg,transparent,rgba(11,23,44,.55));
  pointer-events:none; z-index:1;
}
/* Caps sit over the photograph and paint the page colour above and below the
   curve, so the image itself is what the wave is cut out of. */
.hero-cap{
  position:absolute; left:0; right:0; z-index:3; line-height:0;
  height:var(--cap-h); pointer-events:none;
}
.hero-cap svg{width:100%; height:100%; display:block; overflow:visible}
.hero-cap--top{top:-2px}
.hero-cap--bottom{bottom:-2px}
.hero--compact{padding:clamp(3rem,6vw,4.5rem) 0 clamp(3.5rem,7vw,5.5rem)}
.hero h1{color:#fff; max-width:20ch; font-size:clamp(2.1rem,4.2vw,3.3rem); line-height:1.06}
.hero .lede{color:#B0C1DC; margin-top:1rem; max-width:54ch; font-size:clamp(1rem,1.3vw,1.1rem)}
.hero-inner{position:relative; z-index:2; display:grid; gap:3rem; grid-template-columns:1fr}
@media(min-width:960px){.hero-inner{grid-template-columns:1.45fr .55fr; align-items:center}}
.hero .eyebrow{color:var(--sky)}
.hero .eyebrow::before{background:linear-gradient(90deg,var(--sky),transparent)}

/* Signature: the calming waveform. Amplitude settles as it scrolls. */
.waveform{position:relative; width:100%; aspect-ratio:1/.9; display:grid; place-items:center; min-height:320px}
.waveform svg{width:100%; height:100%; overflow:visible}
.waveform-ring{
  position:absolute; inset:14% 4%; border-radius:50%;
  background:radial-gradient(circle at 50% 50%, rgba(66,123,251,.42), transparent 62%);
  filter:blur(28px);
}
.wave-line{fill:none; stroke-linecap:round}
.hero-stats{
  display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.6rem;
  padding-top:0; position:relative;
}

/* The stats sit over the photograph, so each gets its own soft panel rather
   than relying on whatever happens to be behind it. */
.hero-stat{
  background:rgba(11,23,44,.52); backdrop-filter:blur(8px);
  border-radius:var(--r-md); padding:1.1rem 1.3rem;
  box-shadow:inset 0 0 0 1px rgba(42,181,255,.18);
}
.hero-stat b{
  display:block; font-family:var(--display);
  font-size:clamp(1.8rem,3.4vw,2.5rem); font-weight:500; color:#fff; line-height:1;
}
.hero-stat span{display:block; font-size:.82rem; color:#C9D8F0; margin-top:.5rem; max-width:22ch; line-height:1.4}

/* --------------------------------------------------------------- cards -- */
.card{
  background:var(--white); border-radius:var(--r-lg); padding:clamp(1.6rem,3vw,2.3rem);
  box-shadow:var(--shadow-soft); position:relative; overflow:hidden;
  transition:transform .35s cubic-bezier(.2,.8,.3,1), box-shadow .35s;
}
.card:hover{transform:translateY(-6px); box-shadow:var(--shadow-lift)}
.card h3{font-size:var(--step-1); margin-bottom:.6rem}
.card p{color:var(--ink-soft); font-size:.98rem}
.card--tint{background:linear-gradient(160deg,#fff 0%, #F3F8FF 100%)}
.card--navy{background:linear-gradient(160deg,#1F3760,#182E56); color:#D0E1F5}
.card--navy h3{color:#fff}
.card--navy p{color:#A8BAD6}
.card-icon{
  width:56px; height:56px; border-radius:20px; display:grid; place-items:center;
  margin-bottom:1.2rem; background:linear-gradient(150deg,var(--sky-pale),#F4E3FA);
  color:var(--blue-deep);
}
.card-icon svg{width:32px; height:22px}
.card--navy .card-icon{background:linear-gradient(150deg, rgba(42,181,255,.18), rgba(210,64,247,.18)); color:var(--sky)}

/* Step flow: a continuous line, not separate boxes */
.flow{position:relative; display:grid; gap:clamp(1.2rem,2.5vw,1.8rem)}
.flow::before{
  content:""; position:absolute; left:27px; top:38px; bottom:38px; width:2px;
  background:linear-gradient(180deg,var(--sky),var(--magenta)); opacity:.45; border-radius:2px;
}
@media(min-width:820px){.flow::before{left:31px}}
.flow-step{
  display:grid; grid-template-columns:auto 1fr; gap:clamp(1rem,2.5vw,1.8rem);
  align-items:start; position:relative; z-index:1;
}
.flow-num{
  width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--display); font-size:1.2rem; font-weight:600; color:#fff;
  background:linear-gradient(150deg,var(--blue),var(--navy-soft));
  box-shadow:0 14px 30px -16px rgba(66,123,251,.9);
  flex:0 0 auto;
}
.flow-step:nth-child(even) .flow-num{background:linear-gradient(150deg,#DE6BF9,var(--magenta-deep)); box-shadow:0 14px 30px -16px rgba(210,64,247,.9)}
.flow-body h3{margin-bottom:.4rem}
.flow-body p{color:var(--ink-soft); margin-bottom:0}

/* Outcome pills */
.pill-grid{display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.pill{
  background:rgba(255,255,255,.72); backdrop-filter:blur(8px);
  border-radius:var(--r-md); padding:1.35rem 1.5rem;
  box-shadow:0 14px 40px -28px rgba(24,46,86,.55);
}
.pill h4{margin-bottom:.35rem; color:var(--navy)}
.pill p{font-size:.94rem; color:var(--ink-soft); margin:0}
.band--navy .pill{background:rgba(255,255,255,.06)}
.band--navy .pill h4{color:#fff}
.band--navy .pill p{color:#A8BAD6}

/* Stat trio */
.stats{display:grid; gap:clamp(1rem,3vw,2rem); grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); text-align:center}
.stat b{
  display:block; font-family:var(--display);
  font-size:clamp(2.6rem,6vw,4.2rem); font-weight:500; line-height:1;
  background:linear-gradient(135deg,var(--blue),var(--magenta));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stat span{display:block; margin-top:.65rem; color:var(--ink-soft); font-size:.96rem; line-height:1.45}
.band--navy .stat b{background:linear-gradient(135deg,var(--sky),#E9A2FB); -webkit-background-clip:text; background-clip:text}
.band--navy .stat span{color:#A8BAD6}

/* Team */
.people{display:grid; gap:clamp(1.2rem,2.6vw,2rem); grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.person{text-align:center}
.person-photo{
  width:100%; aspect-ratio:1; border-radius:50%; overflow:hidden; margin-bottom:1.1rem;
  background:linear-gradient(150deg,var(--sky-pale),#F4E3FA);
  box-shadow:0 22px 50px -28px rgba(24,46,86,.6);
  display:grid; place-items:center;
}
.person-photo img{width:100%; height:100%; object-fit:cover}
.person-photo span{font-family:var(--display); font-size:2.4rem; color:var(--blue-deep); opacity:.55}
.person h4{margin-bottom:.15rem; font-size:1.1rem}
.person p{font-size:.88rem; color:var(--ink-soft); margin:0; line-height:1.45}

/* Logo strip */
.logos{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:clamp(1.5rem,5vw,3.5rem)}
.logos span{
  font-family:var(--display); font-size:clamp(1.05rem,2vw,1.4rem); font-weight:600;
  color:var(--navy); opacity:.62; letter-spacing:-.01em;
}

/* FAQ */
.faq{display:grid; gap:.9rem}
/* Jamie asked for FAQs in two columns. Masonry-ish via column layout so the
   accordions keep their natural heights rather than stretching to match. */
@media(min-width:900px){
  .faq{display:block; column-count:2; column-gap:1.1rem}
  .faq details{break-inside:avoid; margin-bottom:1.1rem; display:inline-block; width:100%}
}
.faq details{
  background:var(--white); border-radius:var(--r-md); padding:0;
  box-shadow:0 16px 44px -34px rgba(24,46,86,.6); overflow:hidden;
}
.faq summary{
  list-style:none; cursor:pointer; padding:1.3rem clamp(1.2rem,3vw,1.8rem);
  font-weight:600; font-size:var(--step-0); color:var(--navy);
  display:flex; align-items:center; justify-content:space-between; gap:1.2rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:""; flex:0 0 auto; width:26px; height:26px; border-radius:50%;
  background:var(--sky-pale) url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20520%20364%27%3E%3Cpath%20d%3D%22M52%2056%20H196%20C236%2056%20260%2086%20260%20130%20V336%22%20fill%3D%22none%22%20stroke%3D%22%232E5FD4%22%20stroke-width%3D%2230%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M468%2056%20H324%20C284%2056%20260%2086%20260%20130%20V336%22%20fill%3D%22none%22%20stroke%3D%22%232E5FD4%22%20stroke-width%3D%2230%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M96%20112%20H190%20A34%2034%200%200%201%20224%20146%20V286%22%20fill%3D%22none%22%20stroke%3D%22%232E5FD4%22%20stroke-width%3D%2230%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M424%20112%20H330%20A34%2034%200%200%200%20296%20146%20V286%22%20fill%3D%22none%22%20stroke%3D%22%232E5FD4%22%20stroke-width%3D%2230%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2252%22%20cy%3D%2256%22%20r%3D%2221%22%20fill%3D%22%232E5FD4%22%2F%3E%3Ccircle%20cx%3D%22468%22%20cy%3D%2256%22%20r%3D%2221%22%20fill%3D%22%232E5FD4%22%2F%3E%3Ccircle%20cx%3D%2296%22%20cy%3D%22112%22%20r%3D%2221%22%20fill%3D%22%232E5FD4%22%2F%3E%3Ccircle%20cx%3D%22424%22%20cy%3D%22112%22%20r%3D%2221%22%20fill%3D%22%232E5FD4%22%2F%3E%3Ccircle%20cx%3D%22260%22%20cy%3D%22336%22%20r%3D%2221%22%20fill%3D%22%232E5FD4%22%2F%3E%3Ccircle%20cx%3D%22224%22%20cy%3D%22286%22%20r%3D%2221%22%20fill%3D%22%232E5FD4%22%2F%3E%3Ccircle%20cx%3D%22296%22%20cy%3D%22286%22%20r%3D%2221%22%20fill%3D%22%232E5FD4%22%2F%3E%3C%2Fsvg%3E") center/16px no-repeat;
  transition:transform .3s;
}
.faq details[open] summary::after{transform:rotate(180deg)}
.faq details[open] summary{color:var(--violet-ink)}
.faq-body{padding:0 clamp(1.2rem,3vw,1.8rem) 1.5rem; color:var(--ink-soft)}

/* Quote feature */
.quote-feature{
  background:linear-gradient(150deg,#fff,#FBF1FE);
  border-radius:var(--r-xl); padding:clamp(2rem,5vw,3.5rem);
  box-shadow:var(--shadow-soft); position:relative;
}
.quote-feature blockquote{
  margin:0; font-family:var(--display);
  font-size:var(--step-2); line-height:1.28; color:var(--navy); font-style:normal;
}
.quote-feature footer{margin-top:1.4rem; font-weight:700; color:var(--violet-ink); font-size:.95rem; letter-spacing:.04em; text-transform:uppercase}

/* Story cards */
.story{
  background:var(--white); border-radius:var(--r-lg); padding:clamp(1.6rem,3vw,2.2rem);
  box-shadow:var(--shadow-soft); display:flex; flex-direction:column; gap:1rem;
  break-inside:avoid; margin-bottom:clamp(1.2rem,3vw,1.8rem);
}
.story blockquote{margin:0; color:var(--ink); font-size:1.02rem; line-height:1.6}
.story footer{font-weight:700; color:var(--violet-ink); font-size:.86rem; letter-spacing:.06em; text-transform:uppercase}
.story-mason{columns:1; column-gap:clamp(1.2rem,3vw,1.8rem)}
@media(min-width:760px){.story-mason{columns:2}}
@media(min-width:1080px){.story-mason{columns:3}}

/* Event cards */
.event{
  background:linear-gradient(155deg,#fff,#F2F8FF); border-radius:var(--r-lg);
  padding:clamp(1.6rem,3vw,2.3rem); box-shadow:var(--shadow-soft);
}
.event-date{
  display:inline-flex; align-items:center; gap:.5rem; font-weight:700; font-size:.82rem;
  letter-spacing:.1em; text-transform:uppercase; color:#fff; padding:.5em 1.1em;
  border-radius:999px; background:linear-gradient(120deg,var(--blue),var(--navy-soft)); margin-bottom:1.1rem;
}
.event--magenta .event-date{background:linear-gradient(120deg,#DE6BF9,var(--magenta-deep))}
.event dl{display:grid; gap:.55rem; margin:1.2rem 0 0; font-size:.95rem}
.event dl > div{display:flex; gap:.6rem}
.event dt{font-weight:700; color:var(--navy); min-width:82px}
.event dd{margin:0; color:var(--ink-soft)}

/* Comparison table without hard rules */
.compare{display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.compare-col{background:var(--white); border-radius:var(--r-lg); padding:1.8rem; box-shadow:var(--shadow-soft)}
.compare-col h4{color:var(--navy)}
.compare-col ul{margin:1rem 0 0; padding:0; list-style:none; display:grid; gap:.7rem}
.compare-col li{position:relative; padding-left:1.7rem; font-size:.95rem; color:var(--ink-soft)}
.compare-col li{padding-left:2rem}
.compare-col li::before{
  content:""; position:absolute; left:0; top:.18em; width:22px; height:22px; border-radius:50%;
  background:var(--sky-pale) url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20520%20364%27%3E%3Cpath%20d%3D%22M52%2056%20H196%20C236%2056%20260%2086%20260%20130%20V336%22%20fill%3D%22none%22%20stroke%3D%22%232E5FD4%22%20stroke-width%3D%2230%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M468%2056%20H324%20C284%2056%20260%2086%20260%20130%20V336%22%20fill%3D%22none%22%20stroke%3D%22%232E5FD4%22%20stroke-width%3D%2230%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M96%20112%20H190%20A34%2034%200%200%201%20224%20146%20V286%22%20fill%3D%22none%22%20stroke%3D%22%232E5FD4%22%20stroke-width%3D%2230%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M424%20112%20H330%20A34%2034%200%200%200%20296%20146%20V286%22%20fill%3D%22none%22%20stroke%3D%22%232E5FD4%22%20stroke-width%3D%2230%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2252%22%20cy%3D%2256%22%20r%3D%2221%22%20fill%3D%22%232E5FD4%22%2F%3E%3Ccircle%20cx%3D%22468%22%20cy%3D%2256%22%20r%3D%2221%22%20fill%3D%22%232E5FD4%22%2F%3E%3Ccircle%20cx%3D%2296%22%20cy%3D%22112%22%20r%3D%2221%22%20fill%3D%22%232E5FD4%22%2F%3E%3Ccircle%20cx%3D%22424%22%20cy%3D%22112%22%20r%3D%2221%22%20fill%3D%22%232E5FD4%22%2F%3E%3Ccircle%20cx%3D%22260%22%20cy%3D%22336%22%20r%3D%2221%22%20fill%3D%22%232E5FD4%22%2F%3E%3Ccircle%20cx%3D%22224%22%20cy%3D%22286%22%20r%3D%2221%22%20fill%3D%22%232E5FD4%22%2F%3E%3Ccircle%20cx%3D%22296%22%20cy%3D%22286%22%20r%3D%2221%22%20fill%3D%22%232E5FD4%22%2F%3E%3C%2Fsvg%3E") center/16px no-repeat;
}

/* Tick list */
.ticks{list-style:none; margin:1.5rem 0 0; padding:0; display:grid; gap:.85rem}
.ticks li{position:relative; padding-left:2.3rem; color:var(--ink-soft)}
.ticks li::before{
  content:""; position:absolute; left:0; top:.2em; width:26px; height:26px; border-radius:50%;
  background:var(--blush) url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20520%20364%27%3E%3Cpath%20d%3D%22M52%2056%20H196%20C236%2056%20260%2086%20260%20130%20V336%22%20fill%3D%22none%22%20stroke%3D%22%23A21BC2%22%20stroke-width%3D%2230%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M468%2056%20H324%20C284%2056%20260%2086%20260%20130%20V336%22%20fill%3D%22none%22%20stroke%3D%22%23A21BC2%22%20stroke-width%3D%2230%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M96%20112%20H190%20A34%2034%200%200%201%20224%20146%20V286%22%20fill%3D%22none%22%20stroke%3D%22%23A21BC2%22%20stroke-width%3D%2230%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M424%20112%20H330%20A34%2034%200%200%200%20296%20146%20V286%22%20fill%3D%22none%22%20stroke%3D%22%23A21BC2%22%20stroke-width%3D%2230%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2252%22%20cy%3D%2256%22%20r%3D%2221%22%20fill%3D%22%23A21BC2%22%2F%3E%3Ccircle%20cx%3D%22468%22%20cy%3D%2256%22%20r%3D%2221%22%20fill%3D%22%23A21BC2%22%2F%3E%3Ccircle%20cx%3D%2296%22%20cy%3D%22112%22%20r%3D%2221%22%20fill%3D%22%23A21BC2%22%2F%3E%3Ccircle%20cx%3D%22424%22%20cy%3D%22112%22%20r%3D%2221%22%20fill%3D%22%23A21BC2%22%2F%3E%3Ccircle%20cx%3D%22260%22%20cy%3D%22336%22%20r%3D%2221%22%20fill%3D%22%23A21BC2%22%2F%3E%3Ccircle%20cx%3D%22224%22%20cy%3D%22286%22%20r%3D%2221%22%20fill%3D%22%23A21BC2%22%2F%3E%3Ccircle%20cx%3D%22296%22%20cy%3D%22286%22%20r%3D%2221%22%20fill%3D%22%23A21BC2%22%2F%3E%3C%2Fsvg%3E") center/17px no-repeat;
}
.band--navy .ticks li{color:#B0C1DC}
.band--navy .ticks li::before{background-color:rgba(255,255,255,.12)}

/* CTA band */
.cta-panel{
  position:relative; overflow:hidden; border-radius:var(--r-xl);
  padding:clamp(2.4rem,6vw,4.5rem);
  background:radial-gradient(120% 130% at 85% 10%, #33569C 0%, #1F3760 45%, var(--navy-deep) 100%);
  color:#E4EDF9; text-align:center;
}
.cta-panel h2{color:#fff; max-width:20ch; margin-inline:auto}
.cta-panel p{color:#B0C1DC; max-width:56ch; margin-inline:auto}
.cta-panel .btn-row{justify-content:center}

/* Forms */
.form-card{background:var(--white); border-radius:var(--r-xl); padding:clamp(1.8rem,4vw,2.8rem); box-shadow:var(--shadow-lift)}
.field{display:grid; gap:.4rem; margin-bottom:1.1rem}
.field label{font-weight:600; font-size:.92rem; color:var(--navy)}
.field input,.field select,.field textarea{
  font:inherit; font-size:1rem; padding:.85rem 1.1rem; border-radius:var(--r-sm);
  border:0; background:var(--mist); color:var(--ink); width:100%;
  box-shadow:inset 0 0 0 1.5px transparent; transition:box-shadow .2s, background .2s;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; background:#fff; box-shadow:inset 0 0 0 2px var(--blue);
}
.field textarea{min-height:130px; resize:vertical}
.form-note{font-size:.86rem; color:#41527A; margin-top:1rem}

/* Contact detail rows */
.contact-list{list-style:none; margin:2rem 0 0; padding:0; display:grid; gap:1.4rem}
.contact-list li{display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:start}
.contact-ico{
  width:44px; height:44px; border-radius:16px; display:grid; place-items:center; flex:0 0 auto;
  background:rgba(255,255,255,.1); color:var(--sky);
}
.contact-ico svg{width:20px; height:20px}
.contact-ico--mark svg{width:24px; height:24px}
.contact-list b{display:block; color:#fff; font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:.2rem}
.contact-list a{color:#D2E2F5; text-decoration:none; font-size:1.05rem}
.contact-list a:hover{color:#E9A2FB}

/* ------------------------------------------------------------- footer -- */
.site-footer{
  background:var(--navy-deep);
  color:#93A8C8; padding:0 0 2rem; position:relative;
}
.footer-body{padding-top:clamp(3rem,6vw,4.5rem)}
.footer-lead{
  display:grid; gap:clamp(1.5rem,4vw,3rem); align-items:center;
  grid-template-columns:1fr; padding-bottom:clamp(2.2rem,4vw,3rem);
  margin-bottom:clamp(2.2rem,4vw,3rem);
  background:linear-gradient(90deg,rgba(42,181,255,.28),rgba(210,64,247,.18),transparent);
  background-size:100% 1px; background-repeat:no-repeat; background-position:bottom;
}
@media(min-width:820px){.footer-lead{grid-template-columns:1.3fr auto}}
.footer-lead h2{
  color:#fff; font-size:clamp(1.6rem,3vw,2.4rem); margin:0; max-width:20ch;
}
.footer-lead .eyebrow{color:var(--sky)}
.footer-lead .eyebrow::before{background:linear-gradient(90deg,var(--sky),transparent)}
.footer-lead-actions{display:flex; flex-wrap:wrap; gap:.8rem}
.footer-grid{display:grid; gap:2.5rem 2rem; grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.footer-brand p{max-width:30ch; font-size:.94rem; margin-top:1.1rem}
.site-footer h5{
  font-family:var(--body); font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
  color:#fff; margin:0 0 1.1rem; font-weight:700;
}
.site-footer ul{list-style:none; margin:0; padding:0; display:grid; gap:.7rem}
.site-footer li span{display:block; font-size:.86rem; color:#7F95B8; margin-top:.15rem}
.site-footer a{color:#93A8C8; text-decoration:none; font-size:.95rem}
.site-footer a.btn{color:#fff; font-size:var(--step-0)}
.site-footer li{font-size:.95rem; line-height:1.5}
.site-footer a:hover{color:#E9A2FB}
.footer-base{
  margin-top:3rem; padding-top:1.6rem; font-size:.84rem; color:#93A8C8;
  display:flex; flex-wrap:wrap; gap:1rem 2rem; justify-content:space-between;
  background:linear-gradient(90deg,rgba(42,181,255,.22),transparent);
  background-size:100% 1px; background-repeat:no-repeat; background-position:top;
}
.disclaimer{font-size:.78rem; color:#8096B8; margin-top:clamp(2.4rem,4vw,3.4rem); max-width:92ch; line-height:1.7}
.socials{display:flex; gap:.6rem; margin-top:1.4rem}
.socials a{
  width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.07); transition:background .25s, transform .25s;
}
.socials a:hover{background:var(--magenta); transform:translateY(-3px)}
.socials svg{width:17px; height:17px; fill:#D2E2F5}

/* Skip link */
.skip{position:absolute; left:-9999px; top:0; background:var(--violet-ink); color:#fff; padding:.8rem 1.4rem; border-radius:0 0 var(--r-sm) 0; z-index:100}
.skip:focus{left:0}

/* ---------------------------------------------------------- animation -- */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .8s cubic-bezier(.2,.8,.3,1), transform .8s cubic-bezier(.2,.8,.3,1)}
.reveal.is-in{opacity:1; transform:none}
.reveal.d1{transition-delay:.09s} .reveal.d2{transition-delay:.18s} .reveal.d3{transition-delay:.27s}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important}
  .reveal{opacity:1; transform:none}
  .ticker-track{animation:none; transform:none}
  .ticker{-webkit-mask-image:none; mask-image:none; overflow-x:auto}
}

/* ------------------------------------------------------------- utils -- */
.center{text-align:center}
.center .eyebrow{justify-content:center}
.center .lede{margin-inline:auto}
.mt-0{margin-top:0}
.mt-2{margin-top:2rem}
.mb-3{margin-bottom:clamp(2rem,4vw,3rem)}
.max-60{max-width:60ch}


/* ---------------------------------------------------------- hub cards -- */
.hub-grid{display:grid; gap:clamp(1.4rem,3vw,2rem); grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.article{
  display:flex; flex-direction:column; background:var(--white);
  border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-soft);
  text-decoration:none; color:inherit;
  transition:transform .35s cubic-bezier(.2,.8,.3,1), box-shadow .35s;
}
.article:hover{transform:translateY(-6px); box-shadow:var(--shadow-lift)}
.article-img{
  aspect-ratio:16/10; overflow:hidden; position:relative;
  background:linear-gradient(150deg,var(--sky-pale),#F4E3FA);
}
.article-img img{width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.8,.3,1)}
.article:hover .article-img img{transform:scale(1.05)}
.article-body{padding:clamp(1.3rem,2.5vw,1.7rem); display:flex; flex-direction:column; gap:.7rem; flex:1}
.article h3{font-size:var(--step-1); margin:0}
.article p{color:var(--ink-soft); font-size:.95rem; margin:0}
.article time{font-size:.8rem; color:#41527A; letter-spacing:.04em}
.article .textlink{margin-top:auto; padding-top:.4rem}
.tags{display:flex; flex-wrap:wrap; gap:.4rem}
.tag{
  font-size:.7rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  padding:.38em .85em; border-radius:999px; background:var(--sky-pale); color:var(--blue-ink);
}
.tag--pink{background:var(--blush); color:var(--violet-ink)}
.article--wide{grid-column:1 / -1}
@media(min-width:900px){
  .article--wide{flex-direction:row}
  .article--wide .article-img{flex:0 0 46%; aspect-ratio:auto}
  .article--wide .article-body{padding:clamp(1.8rem,3.5vw,2.8rem); justify-content:center}
}

/* Category filter chips */
.chips{display:flex; flex-wrap:wrap; gap:.55rem; margin-bottom:clamp(2rem,4vw,3rem)}
.chip{
  font-size:.88rem; font-weight:600; padding:.55em 1.15em; border-radius:999px;
  background:rgba(255,255,255,.8); color:var(--navy); text-decoration:none;
  box-shadow:inset 0 0 0 1.5px rgba(66,123,251,.2); transition:.22s;
}
.chip:hover{background:var(--blue); color:#fff; box-shadow:none}
.chip--on{background:linear-gradient(115deg,var(--magenta),#DE6BF9); color:#fff; box-shadow:none}

/* Video frame */
.video-frame{
  position:relative; border-radius:var(--r-xl); overflow:hidden;
  box-shadow:var(--shadow-lift); background:var(--navy-deep); aspect-ratio:16/9;
}
.video-frame iframe,.video-frame video{position:absolute; inset:0; width:100%; height:100%; border:0; display:block}
.video-frame video{object-fit:cover; background:var(--navy-deep)}

/* Referral form: two column fields */
.field-row{display:grid; gap:0 1rem; grid-template-columns:1fr}
@media(min-width:620px){.field-row{grid-template-columns:1fr 1fr}}
.fieldset{border:0; padding:0; margin:0 0 1.8rem}
.fieldset legend{
  font-family:var(--body); font-size:.76rem; font-weight:700; letter-spacing:.15em;
  text-transform:uppercase; color:var(--magenta); padding:0; margin-bottom:1rem;
}
.check{display:flex; align-items:flex-start; gap:.7rem; margin-bottom:.7rem; font-size:.95rem; color:var(--ink-soft)}
.check input{width:20px; height:20px; flex:0 0 auto; margin-top:.15rem; accent-color:var(--magenta)}

/* ======================================================================
   IN-PAGE MEDIA
   Images inside the body, not only the headers. Every frame is soft
   cornered and every full bleed band is closed with a wave, so an image
   never introduces the hard rectangle the rest of the system avoids.
   ====================================================================== */
.media{
  position:relative; border-radius:var(--r-xl); overflow:hidden;
  box-shadow:var(--shadow-lift); background:var(--mist);
}
.media img{width:100%; height:100%; object-fit:cover; display:block}
.media--wide{aspect-ratio:11/8}
.media--group{aspect-ratio:3/2}
.media--tall{aspect-ratio:3/4}
.media--square{aspect-ratio:1/1}
.media--short{aspect-ratio:16/9}
/* a whisper of brand colour over every photo so the palette carries through */
.media::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(150deg, rgba(66,123,251,.10), transparent 45%, rgba(210,64,247,.12));
  mix-blend-mode:multiply;
}

/* Two images offset against each other, for split sections that need weight */
.media-duo{position:relative; padding-bottom:clamp(2.5rem,6vw,4.5rem); padding-right:clamp(2rem,5vw,3.5rem)}
.media-duo .media--tall{width:100%}
.media-duo .media--square{
  position:absolute; right:0; bottom:0; width:46%;
  border-radius:var(--r-lg); box-shadow:0 30px 70px -26px rgba(24,46,86,.55);
  outline:10px solid var(--paper); outline-offset:-1px;
}
.band--mist .media-duo .media--square{outline-color:var(--mist)}
.band--sky .media-duo .media--square{outline-color:#D9E9FA}

/* A stat or quote that floats over the corner of an image */
.media-badge{
  position:absolute; left:clamp(-1rem,-2vw,-2rem); bottom:clamp(1.2rem,3vw,2rem);
  background:rgba(251,252,255,.94); backdrop-filter:blur(10px);
  border-radius:var(--r-md); padding:1.1rem 1.5rem;
  box-shadow:0 26px 60px -26px rgba(24,46,86,.6); max-width:270px; z-index:2;
}
.media-badge b{
  display:block; font-family:var(--display);
  font-size:2rem; line-height:1; color:var(--violet-deep, #A21BC2);
  background:linear-gradient(135deg,var(--blue),var(--magenta));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.media-badge span{display:block; margin-top:.4rem; font-size:.88rem; color:#41527A; line-height:1.4}
.media-wrap{position:relative}

/* Full bleed feature band: a photograph used as a breather between
   text sections, closed top and bottom by the same wave as everything else */
.feature{
  position:relative; overflow:hidden;
  min-height:clamp(340px,42vw,520px);
  display:grid; place-items:center;
  background-size:cover; background-position:center;
  padding:clamp(3.5rem,8vw,6rem) 0;
}
.feature::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(105deg, rgba(11,23,44,.90) 0%, rgba(20,40,76,.68) 45%, rgba(28,52,94,.34) 100%);
}
.feature .wrap{position:relative; z-index:2}
.feature blockquote{
  margin:0; max-width:22ch;
  font-family:var(--display);
  font-style:normal; font-size:var(--step-3); line-height:1.2; color:#fff;
}
.feature cite{
  display:block; margin-top:1.4rem; font-style:normal; font-weight:600;
  font-size:.9rem; letter-spacing:.1em; text-transform:uppercase; color:var(--sky);
}
.feature p{color:#C9D8F0; max-width:52ch; margin-top:1.2rem}

/* Cards that lead with an image */
.card--media{padding:0; display:flex; flex-direction:column}
.card--media .card-media{aspect-ratio:16/10; overflow:hidden; position:relative}
.card--media .card-media img{width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.8,.3,1)}
.card--media:hover .card-media img{transform:scale(1.05)}
.card--media .card-body{padding:clamp(1.5rem,3vw,2.1rem); display:flex; flex-direction:column; gap:.7rem; flex:1}
.card--media .card-icon{
  position:absolute; left:clamp(1rem,2.5vw,1.5rem); bottom:clamp(-1.6rem,-3vw,-2rem);
  margin:0; z-index:2; background:rgba(251,252,255,.94); backdrop-filter:blur(8px);
  box-shadow:0 18px 40px -20px rgba(24,46,86,.7);
}
.card--media .card-body{padding-top:clamp(2.4rem,4.5vw,3rem)}

/* Event cards that lead with an image */
.event--media{padding:0; overflow:hidden}
.event--media .event-photo{aspect-ratio:16/9; overflow:hidden}
.event--media .event-photo img{width:100%; height:100%; object-fit:cover}
.event--media .event-body{padding:clamp(1.6rem,3vw,2.3rem)}

/* Portrait rail: three narrow images that break up long text pages */
.media-rail{display:grid; gap:clamp(.8rem,2vw,1.4rem); grid-template-columns:repeat(3,1fr)}
.media-rail .media{aspect-ratio:3/4; border-radius:var(--r-lg)}
.media-rail .media:nth-child(2){margin-top:clamp(1.5rem,4vw,3rem)}
.media-rail .media:nth-child(3){margin-top:clamp(-1rem,-2vw,-2rem)}
@media(max-width:640px){
  .media-rail{grid-template-columns:1fr 1fr}
  .media-rail .media:nth-child(3){display:none}
}


/* ---------------------------------------------- contrast on navy cards -- */
/* A navy card can sit inside a light band, so it needs the same text
   treatment the navy band gets. Without this the tick lists and inline links
   render dark on dark. */
.card--navy .ticks li{color:#B0C1DC}
.card--navy .ticks li::before{
  background:rgba(255,255,255,.12) url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%239CC4FF%27%20stroke-width%3D%273%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M20%206L9%2017l-5-5%27%2F%3E%3C%2Fsvg%3E") center/12px no-repeat;
}
.card--navy .textlink{color:var(--sky)}
.card--navy .eyebrow{color:var(--sky)}
.card--navy .eyebrow::before{background:linear-gradient(90deg,var(--sky),transparent)}
.card--navy a{color:#fff}
.card--navy .lede{color:#B0C1DC}

/* -------------------------------------- light cards inside dark bands -- */
/* The navy band sets white headings and pale body text. A light card sitting
   inside it inherited both, so headings rendered white on near white and the
   FAQ answers rendered pale grey on white. */
.band--navy .card--tint h3,
.band--navy .card--tint h4,
.band--navy .faq summary{color:var(--navy)}
.band--navy .card--tint p,
.band--navy .faq-body,
.band--navy .faq-body p{color:var(--ink-soft)}
.band--navy .card--tint .textlink,
.band--navy .faq-body .textlink{color:var(--blue-ink)}
.band--navy .card--tint .eyebrow{color:var(--violet-ink)}
.band--navy .card--tint .eyebrow::before{background:linear-gradient(90deg,var(--violet-ink),transparent)}

/* --------------------------------------------- embedded referral form -- */
/* The GP referral form lives in JotForm, because it needs file upload for the
   audiogram, ENT report and signed D904. Embedded rather than linked so the
   referrer never leaves the page. */
.form-card--embed{padding:clamp(.6rem,1.4vw,1rem); overflow:hidden}
.form-card--embed iframe{
  display:block; border-radius:var(--r-md); background:#fff;
  /* width, height and border come from the JotForm embed code itself, and the
     handler resizes the frame as the form grows. Nothing here overrides it. */
}

/* ------------------------------------------------------- team page ----- */
.team-group + .team-group{margin-top:clamp(3rem,6vw,4.5rem)}
.team-group-label{
  font-family:var(--body); font-size:.8rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--violet-ink);
  margin:0 0 1.6rem;
}
.team-grid{display:grid; gap:clamp(1.2rem,2.6vw,2rem); grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.person-card{
  background:var(--white); border-radius:var(--r-lg);
  padding:clamp(1.6rem,3vw,2.2rem);
  box-shadow:var(--shadow-soft);
  display:flex; flex-direction:column; gap:1.1rem;
}
.person-photo--lg{width:104px; height:104px; font-size:1.5rem}
.person-photo--lg img{width:100%; height:100%; object-fit:cover}
.person-card h3{margin:0 0 .3rem; font-size:1.25rem}
.person-role{margin:0; color:var(--ink-soft); font-size:.92rem; line-height:1.5}
.person-detail{font-size:.85rem; color:#5B6F92}
.person-quote{
  margin:1rem 0 0; padding-left:1.1rem; border-left:2px solid var(--sky);
  font-family:var(--display);
  font-style:normal; font-size:1.02rem; line-height:1.5; color:var(--navy);
}
.person-bio{margin-top:1rem}
.person-bio summary{
  cursor:pointer; list-style:none; font-weight:600; font-size:.92rem;
  color:var(--blue-ink);
}
.person-bio summary::-webkit-details-marker{display:none}
.person-bio summary::after{content:" \2192"}
.person-bio[open] summary::after{content:" \2191"}
.person-bio-body{margin-top:.9rem; display:grid; gap:.9rem}
.person-bio-body p{font-size:.95rem; line-height:1.65; color:var(--ink-soft); margin:0}

/* ---------------------------------------------------- policy pages ----- */
.legal{display:grid; gap:clamp(1.8rem,3.5vw,2.6rem)}
.legal-section h2{
  font-family:var(--body); font-size:1.05rem; font-weight:700;
  letter-spacing:.02em; color:var(--navy); margin:0 0 .8rem;
}
.legal-section p{font-size:.98rem; line-height:1.75; color:var(--ink-soft); margin:0 0 .9rem}
.legal-section p:last-child{margin-bottom:0}
.legal-list{margin:0 0 .9rem; padding-left:1.4rem; display:grid; gap:.5rem}
.legal-list li{font-size:.98rem; line-height:1.7; color:var(--ink-soft)}

/* -------------------------------------------------- article pages ------ */
.article-back{font-size:.9rem; margin:0 0 1.6rem}
.article-head .tag-row{display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.1rem}
.article-head h1{font-size:clamp(2.1rem,4.6vw,3.3rem); margin:0 0 1rem}
.article-meta{font-size:.9rem; color:#41527A; margin:1.2rem 0 0}
.article-body{max-width:66ch}
.article-body h2{
  font-size:clamp(1.35rem,2.6vw,1.75rem); margin:2.6rem 0 .9rem;
}
.article-body h2:first-child{margin-top:0}
.article-body p{font-size:1.06rem; line-height:1.78; color:var(--ink-soft); margin:0 0 1.15rem}
.article-body strong{color:var(--navy); font-weight:650}
.article-body .ticks{margin:1.2rem 0 1.6rem}
.article-cta{
  margin-top:clamp(2.5rem,5vw,3.5rem); padding:clamp(1.8rem,3.5vw,2.6rem);
  border-radius:var(--r-lg);
  background:linear-gradient(140deg,var(--sky-pale),var(--blush));
}
.article-cta h3{margin:0 0 .6rem}
.article-cta p{color:var(--ink-soft); margin:0 0 1.4rem; max-width:52ch}
.article-nav{
  display:grid; gap:1rem; margin-top:clamp(2.5rem,5vw,3.5rem);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.article-nav-link{
  display:block; padding:1.2rem 1.4rem; border-radius:var(--r-md);
  background:var(--white); box-shadow:var(--shadow-soft); text-decoration:none;
  transition:transform .25s, box-shadow .25s;
}
.article-nav-link:hover{transform:translateY(-3px); box-shadow:var(--shadow-lift)}
.article-nav-link span{
  display:block; font-size:.72rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--violet-ink); margin-bottom:.4rem;
}
.article-nav-link strong{display:block; color:var(--navy); font-weight:600; line-height:1.4}
.article-nav-link--next{text-align:right}

/* ------------------------------------------- embedded HubSpot form ----- */
/* HubSpot renders its own markup, so this only nudges it toward the site's
   type and spacing rather than trying to restyle it wholesale. */
.form-card--hubspot{padding:clamp(1.6rem,3vw,2.4rem)}
.form-card--hubspot .hs-form-frame{min-height:420px}
.form-card--hubspot form{font-family:var(--body) !important}
.form-card--hubspot label{
  font-size:.9rem !important; font-weight:600 !important; color:var(--navy) !important;
  margin-bottom:.4rem !important; display:block;
}
.form-card--hubspot input[type=text],
.form-card--hubspot input[type=email],
.form-card--hubspot input[type=tel],
.form-card--hubspot select,
.form-card--hubspot textarea{
  font:inherit !important; font-size:1rem !important;
  padding:.85rem 1.1rem !important; border-radius:var(--r-sm) !important;
  border:0 !important; background:var(--mist) !important; color:var(--ink) !important;
  width:100% !important; box-sizing:border-box;
}
.form-card--hubspot input:focus-visible,
.form-card--hubspot select:focus-visible,
.form-card--hubspot textarea:focus-visible{
  outline:2px solid var(--blue); outline-offset:2px;
}
.form-card--hubspot .hs-button,
.form-card--hubspot input[type=submit]{
  font:inherit !important; font-weight:600 !important; font-size:1rem !important;
  border:0 !important; cursor:pointer; width:100% !important;
  padding:.95em 1.6em !important; border-radius:999px !important;
  color:#fff !important;
  background:linear-gradient(120deg,var(--magenta),var(--magenta-deep)) !important;
  box-shadow:0 16px 34px -18px rgba(210,64,247,.9) !important;
}
.form-card--hubspot .hs-error-msg,
.form-card--hubspot .hs-error-msgs label{color:#A21BC2 !important; font-size:.85rem !important}
.form-card--hubspot .form-note{margin-top:1rem}

/* ------------------------------------------- hero on short screens ----- */
/* Laptops around 720 to 860px tall are the common case, and Jamie wants the
   buttons visible without scrolling. Below 880px the hero tightens rather
   than letting the stats push the call to action off screen. */
@media(max-height:880px){
  .hero{--cap-h:clamp(34px,4vw,58px)}
  .hero h1{font-size:clamp(2rem,4vw,3rem)}
  .hero .lede{max-width:52ch; font-size:1rem; margin-top:.8rem}
  .hero .btn-row{margin-top:1rem}
  .hero-stats{margin-top:1.1rem; gap:.7rem}
  .hero-stat{padding:.75rem .9rem}
  .hero-stat b{font-size:1.5rem}
  .hero-stat span{font-size:.78rem}
}
@media(max-height:760px){
  .hero{--cap-h:clamp(30px,3.4vw,48px)}
  .hero h1{font-size:clamp(1.8rem,3.2vw,2.35rem)}
  .hero .lede{max-width:50ch; font-size:.95rem; margin-top:.65rem}
  .hero .btn-row{margin-top:.85rem}
  .hero-stats{display:none}
}

/* ------------------------------------------- treatments we deliver ----- */
/* Jamie wants each treatment clickable through to its own page, and the gap
   underneath the strip closed up. */
.logos--linked a{
  color:var(--navy); text-decoration:none; font-weight:600;
  transition:color .2s, transform .2s; display:inline-block;
}
.logos--linked a:hover{color:var(--violet-ink); transform:translateY(-2px)}
.logos--linked a:focus-visible{outline:2px solid var(--blue); outline-offset:4px; border-radius:4px}
.band--tight + .band{padding-top:clamp(2.2rem,4vw,3.4rem)}

/* anchored treatment cards must clear the sticky header */
[id="trt"],[id="cbt"],[id="sound"],[id="sleep"],[id="counselling"],[id="telehealth"]{
  scroll-margin-top:clamp(5rem,9vw,7rem);
}

/* Jamie on the About hero: "that colour can be better, I don't like that
   colour." A softer sky to violet blend rather than flat magenta. */
.em--soft{
  background:linear-gradient(100deg,#7FD4FF,#C58BFF 60%,#E3A8FF);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ------------------------------------------------ tighter headers ------ */
/* Jamie: tighten the headers. The top ticker drops back to a slim strip, and
   the stat panels stop wrapping onto a second row on inner pages. */
.ticker:not(.ticker--lead){padding:clamp(.9rem,1.6vw,1.3rem) 0}
.ticker:not(.ticker--lead) .ticker-item{font-size:clamp(1rem,1.5vw,1.2rem)}
.hero-stats{flex-wrap:nowrap}
.hero-stat{flex:0 1 auto}
@media(max-width:900px){.hero-stats{flex-wrap:wrap}}

/* ----------------------------------------------- official logo files --- */
/* TRA's own artwork. Sized by height so the lockup scales cleanly, and
   generous enough that Jamie's "make it more present" is met. */
.brand--official{display:block; line-height:0; flex:0 0 auto}
.site-header .brand--official img{height:clamp(46px,4.4vw,62px); width:auto; display:block}
.site-footer .brand--official img{height:clamp(52px,5vw,68px); width:auto; display:block}
@media(max-width:1200px){.site-header .brand--official img{height:44px}}
@media(max-width:600px){.site-header .brand--official img{height:38px}}

/* ------------------------------------------------ clinic carousel ------ */
/* Photos keep their natural shape: a fixed height strip that scrolls
   sideways and snaps, so portrait and landscape shots sit side by side
   without anyone being cropped out. Works by swipe, trackpad and keyboard. */
.cc{position:relative}
.cc-track{
  display:flex; gap:clamp(.8rem,1.6vw,1.2rem);
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  padding-bottom:.6rem; scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.cc-track::-webkit-scrollbar{display:none}
.cc-track:focus-visible{outline:2px solid var(--blue); outline-offset:6px; border-radius:var(--r-md)}
.cc-slide{margin:0; flex:0 0 auto; scroll-snap-align:start}
.cc-slide img{
  display:block; height:clamp(300px,34vw,460px); width:auto;
  border-radius:var(--r-lg); box-shadow:0 22px 50px -34px rgba(24,46,86,.6);
}
.cc-slide figcaption{
  margin-top:.8rem; font-size:.88rem; color:var(--ink-soft); max-width:30ch;
}
.cc-controls{display:flex; gap:.6rem; justify-content:flex-end; margin-top:1rem}
.cc-btn{
  width:48px; height:48px; border-radius:50%; border:0; cursor:pointer;
  background:var(--white); color:var(--navy); font-size:1.2rem;
  box-shadow:0 12px 30px -18px rgba(24,46,86,.6);
  transition:transform .2s, background .2s;
}
.cc-btn:hover{transform:translateY(-2px); background:var(--mist)}
.cc-btn:focus-visible{outline:2px solid var(--blue); outline-offset:3px}
@media(prefers-reduced-motion:reduce){.cc-track{scroll-behavior:auto}}

/* ---------------------------------------- tighter headers, round two --- */
/* Stats sit in the right column beside the copy rather than under it, so
   the hero only needs to be as tall as the headline block. */
.hero-side{display:flex; flex-direction:column; gap:1rem; justify-content:center}
.hero-side:empty{display:none}
@media(min-width:960px){
  .hero-inner{grid-template-columns:1.35fr .65fr; gap:clamp(2rem,4vw,3.5rem)}
  .hero-inner--stats .hero-stats{
    display:grid; grid-template-columns:1fr; gap:.7rem; margin-top:0;
    justify-self:end; width:min(100%,280px);
  }
  .hero-inner--stats .hero-stat{padding:.85rem 1.1rem}
  .hero-inner--stats .hero-stat b{font-size:1.7rem}
}
/* smaller cap, less air above and below the copy */
.hero{--cap-h:clamp(28px,3vw,46px)}
.hero{padding-top:calc(var(--cap-h) + clamp(.2rem,.8vw,.7rem)) !important;
      padding-bottom:calc(var(--cap-h) + clamp(.5rem,1.2vw,1rem)) !important}
.hero .eyebrow{margin-bottom:.6rem}
.hero h1{font-size:clamp(2rem,3.8vw,3rem)}
.hero .lede{margin-top:.8rem; font-size:clamp(.98rem,1.2vw,1.06rem)}
.hero .btn-row{margin-top:1.1rem}

/* homepage: three stats on one compact line under the buttons */
.hero-inner--wave .hero-stats{display:flex; flex-wrap:nowrap; gap:.6rem; margin-top:1.2rem}
.hero-inner--wave .hero-stat{padding:.65rem .85rem; flex:1 1 0; min-width:0}
.hero-inner--wave .hero-stat b{font-size:1.35rem}
.hero-inner--wave .hero-stat span{font-size:.74rem; line-height:1.3}
@media(max-width:700px){.hero-inner--wave .hero-stats{flex-wrap:wrap}.hero-inner--wave .hero-stat{flex:1 1 40%}}

/* the homepage keeps a larger headline than the inner pages */
.hero-inner--wave h1{font-size:clamp(2.4rem,4.6vw,3.6rem)}
.hero .lede{max-width:52ch}

/* mobile: stats become one compact row of three rather than a tall stack */
@media(max-width:959px){
  .hero .hero-stats{
    display:grid !important; grid-template-columns:repeat(3,1fr); gap:.45rem;
    margin-top:1rem; width:100%; flex-wrap:nowrap;
  }
  .hero .hero-stat{padding:.55rem .6rem; min-width:0}
  .hero .hero-stat b{font-size:1.12rem; line-height:1.1}
  .hero .hero-stat span{font-size:.66rem; line-height:1.28; margin-top:.2rem}
  .hero-side{gap:0}
}

/* the homepage waveform is decorative; on a phone it stacks under the copy
   and adds 300px to the header, so it only shows where there is room beside */
@media(max-width:959px){ .hero-inner--wave .hero-side{display:none} }

/* ------------------------------------------------ team grid, rebuilt --- */
/* Four across on desktop, cards the same size, nothing stretching to match a
   taller neighbour. An opened bio grows only its own card. */
.team-grid{
  display:grid; gap:clamp(1rem,2vw,1.5rem); align-items:start;
  grid-template-columns:repeat(4,minmax(0,1fr));
}
@media(max-width:1100px){.team-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.team-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:440px){.team-grid{grid-template-columns:1fr}}
.person-card{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:0; padding:clamp(1.4rem,2.4vw,1.8rem) clamp(1rem,1.8vw,1.4rem);
}
.person-photo--lg{width:clamp(112px,11vw,148px); height:clamp(112px,11vw,148px); font-size:1.8rem; margin-bottom:1rem}
.person-card h3{margin:0 0 .35rem; font-size:1.12rem; line-height:1.25}
.person-role{margin:0; font-size:.88rem; line-height:1.45; color:var(--ink-soft)}
.person-detail{margin:.3rem 0 0; font-size:.78rem; line-height:1.4; color:#5B6F92}
.person-bio{margin-top:1rem; width:100%}
.person-bio summary{justify-content:center; display:flex}
.person-bio-body{margin-top:1rem; text-align:left}
.person-quote{margin:0 0 1rem; font-size:.96rem}
.team-group + .team-group{margin-top:clamp(2.4rem,4.5vw,3.4rem)}
.team-group-label{margin-bottom:1.2rem}
/* decorative glows must never widen the page */


/* three across suits groups of three and five; rows stretch so bottoms align,
   and Read bio sits on the same line in every card */
.team-grid{grid-template-columns:repeat(3,minmax(0,1fr)); align-items:stretch; max-width:1040px; margin-inline:auto}
@media(max-width:860px){.team-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:340px){.team-grid{grid-template-columns:1fr}}
.person-card .person-bio{margin-top:auto; padding-top:1rem}
.person-card .person-bio[open]{grid-row:span 1}
.team-group{max-width:1040px; margin-inline:auto}

/* when a bio is open, stop stretching that row so only the opened card grows */
.team-grid:has(.person-bio[open]){align-items:start}

@media(max-width:600px){
  .team-grid{gap:.7rem}
  .person-card{padding:1.1rem .7rem}
  .person-photo--lg{width:92px; height:92px; font-size:1.4rem; margin-bottom:.7rem}
  .person-card h3{font-size:.98rem}
  .person-role{font-size:.8rem}
  .person-detail{font-size:.72rem}
}

/* ======================================================================
   Jamie's round: logo hard left, bigger nav, no italic serif anywhere
   ====================================================================== */

/* header spans the full window so the logo sits in the corner */
.site-header .wrap.header-inner{
  width:100%; max-width:none; margin:0;
  padding-inline:clamp(1rem,2.4vw,2.2rem);
}
.site-header .brand--official img{height:clamp(52px,5vw,74px)}
.nav{margin-left:auto}
.nav a{font-size:clamp(.98rem,1.05vw,1.08rem); font-weight:600; padding:.6rem .8rem}
.header-phone, .site-header .phone{font-size:clamp(1rem,1.1vw,1.12rem)}
@media(max-width:1200px){
  .site-header .brand--official img{height:48px}
  .nav a{font-size:.95rem; padding:.5rem .6rem}
}

/* The "funky F" was the Fraunces typeface itself: it draws the lowercase f
   with a descender below the baseline in every axis combination, so no
   setting could fix it. Display type is now Source Serif 4, which draws a
   conventional f. Emphasis keeps its colour but stays upright. */
.em, h1 em, h2 em, .hero h1 .em,
.ticker-item, .ticker-item q, .quote, .quote-feature blockquote,
.person-quote, .article-body em, blockquote{
  font-style:normal !important;
}

/* ------------------------------------------ treatments we deliver ------ */
/* Every treatment is a button. The two device programs carry their own
   marks so they read as branded treatments at a glance. */
.tx-buttons{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.7rem;
  margin-top:1.4rem;
}
.tx-btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:56px; padding:.7rem 1.3rem; border-radius:999px;
  background:#fff; color:var(--navy); text-decoration:none;
  font-weight:600; font-size:.98rem; line-height:1.2; text-align:center;
  box-shadow:0 10px 28px -18px rgba(24,46,86,.55), inset 0 0 0 1px rgba(66,123,251,.16);
  transition:transform .2s, box-shadow .2s, color .2s;
}
.tx-btn:hover{
  transform:translateY(-2px); color:var(--violet-ink);
  box-shadow:0 16px 34px -18px rgba(24,46,86,.6), inset 0 0 0 1px rgba(210,64,247,.35);
}
.tx-btn:focus-visible{outline:2px solid var(--blue); outline-offset:3px}
.tx-btn--logo{padding:.5rem 1.5rem}
.tx-btn--logo img{height:34px; width:auto; display:block}
/* stand in until the official Lenire mark arrives */
.lenire-word{
  font-family:var(--body); font-weight:700; font-size:1.35rem;
  letter-spacing:.02em; color:#1E3A63; text-transform:lowercase;
}
@media(max-width:600px){
  .tx-btn{min-height:48px; font-size:.88rem; padding:.55rem 1rem}
  .tx-btn--logo img{height:28px}
}

.device-logo{display:block; height:40px; width:auto; margin-bottom:1rem}
.device-logo--word{
  height:auto; font-family:var(--body); font-weight:700; font-size:1.8rem;
  letter-spacing:.02em; color:#fff; text-transform:lowercase; line-height:1;
}

/* quote on the card: set in the body font so it stays upright and clean */
.person-card .person-quote{
  margin:1rem 0 0; padding:0; border:0; text-align:center;
  font-family:var(--body); font-size:.92rem; line-height:1.55;
  color:var(--navy); font-weight:500;
}
.person-card .person-quote::before{
  content:""; display:block; width:28px; height:2px; margin:0 auto .8rem;
  background:linear-gradient(90deg,var(--sky),var(--violet)); border-radius:2px;
}

/* clip stray glows without creating a scroll container, so the header stays sticky */
body{overflow-x:clip !important}

/* the official mark as an image: sized to match the vector it replaced */
.card-icon img.tra-mark{width:32px; height:auto; display:block}
img.tra-mark{height:auto; display:inline-block; vertical-align:middle}