/* Hypnosis for Pain — design system
   Brand: deep plum (from Eugene's brand photography), warm sand, calm teal.
   Committed light theme. All colors explicit. */

:root{
  --ink:#17161B;
  --ink-soft:#443F4A;
  --muted:#6A6470;
  /* Deep teal carries the brand; the rainbow mark supplies the colour, so the
     palette stays quiet and lets it do the talking. */
  --accent:#1F5F5B;
  --accent-700:#164543;
  --accent-300:#7FB3AF;
  --accent-050:#E9F2F1;
  --gold:#B0801F;
  --gold-050:#FBF3E2;
  --sand:#F3EFE9;
  --sand-deep:#E5DED3;
  --cream:#FCFAF7;
  --white:#FFFFFF;
  --line:#E2DBD2;

  /* aliases so the shared components keep working */
  --plum:var(--accent);
  --plum-700:var(--accent-700);
  --plum-300:var(--accent-300);
  --plum-050:var(--accent-050);

  --wrap:1140px;
  --wrap-narrow:720px;
  --r-sm:8px; --r-md:14px; --r-lg:22px; --r-xl:32px;
  --shadow-sm:0 1px 2px rgba(23,22,27,.06),0 2px 8px rgba(23,22,27,.05);
  --shadow-md:0 4px 12px rgba(23,22,27,.07),0 14px 34px rgba(23,22,27,.08);
  --shadow-lg:0 10px 24px rgba(23,22,27,.09),0 30px 70px rgba(23,22,27,.12);

  --serif:"Fraunces","Iowan Old Style",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--plum);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--plum-700)}
:focus-visible{outline:3px solid var(--plum);outline-offset:3px;border-radius:4px}

h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.15;letter-spacing:-.015em;margin:0 0 .5em;color:var(--ink)}
h1{font-size:clamp(2.1rem,5.2vw,3.5rem);letter-spacing:-.025em}
h2{font-size:clamp(1.65rem,3.4vw,2.4rem)}
h3{font-size:clamp(1.2rem,2.1vw,1.45rem)}
h4{font-size:1.05rem;font-family:var(--sans);font-weight:700;letter-spacing:-.005em}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}
strong{font-weight:650;color:var(--ink)}

.wrap{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto}
.wrap-narrow{width:min(100% - 2.5rem,var(--wrap-narrow));margin-inline:auto}
.section{padding:clamp(3.5rem,7vw,6rem) 0}
.section--tight{padding:clamp(2.5rem,4.5vw,3.75rem) 0}
.section--sand{background:var(--sand)}
.section--plum{background:var(--plum-700);color:#F6E9EF}
.section--plum h2,.section--plum h3{color:#fff}
.section--plum p{color:#EBD8E1}
.lede{font-size:clamp(1.1rem,1.9vw,1.3rem);line-height:1.6;color:var(--ink-soft)}
.eyebrow{
  font-size:.76rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--plum);margin:0 0 .9rem;display:block
}
.section--plum .eyebrow{color:var(--plum-300)}
.center{text-align:center}
.measure{max-width:66ch}
.measure-center{max-width:66ch;margin-inline:auto}

/* ---------- Skip link ---------- */
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--plum);color:#fff;padding:.8rem 1.2rem;border-radius:0 0 var(--r-sm) 0;font-weight:600
}
.skip:focus{left:0}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:100;background:rgba(253,251,248,.92);
  backdrop-filter:saturate(1.6) blur(12px);border-bottom:1px solid var(--line)
}
.header-inner{display:flex;align-items:center;gap:1.5rem;min-height:70px}
.brand{display:flex;align-items:center;gap:.6rem;font-family:var(--serif);font-weight:600;
  font-size:1.06rem;color:var(--ink);text-decoration:none;letter-spacing:-.01em;flex:none}
.brand:hover{color:var(--plum)}
.brand-mark{width:34px;height:34px;flex:none;overflow:hidden}
.brand-sub{display:block;font-family:var(--sans);font-size:.66rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:1px}
.nav{margin-left:auto;display:flex;align-items:center;gap:.25rem}
.nav a:not(.btn){
  font-size:.92rem;font-weight:550;color:var(--ink-soft);text-decoration:none;
  padding:.5rem .7rem;border-radius:var(--r-sm);white-space:nowrap
}
.nav a:not(.btn):hover{background:var(--plum-050);color:var(--plum-700)}
.nav a:not(.btn)[aria-current="page"]{color:var(--plum);font-weight:650}
.nav .btn--primary,.nav .btn--primary:hover{color:#fff}
.nav-cta{margin-left:.5rem}
.nav-toggle{
  display:none;margin-left:auto;background:none;border:1px solid var(--line);
  border-radius:var(--r-sm);padding:.5rem .7rem;cursor:pointer;color:var(--ink);
  font:inherit;font-size:.85rem;font-weight:600;align-items:center;gap:.45rem
}
/* Dropdown */
.has-sub{position:relative}
.has-sub>button{
  font:inherit;font-size:.92rem;font-weight:550;color:var(--ink-soft);background:none;border:0;
  padding:.5rem .7rem;border-radius:var(--r-sm);cursor:pointer;display:flex;align-items:center;gap:.3rem
}
.has-sub>button:hover{background:var(--plum-050);color:var(--plum-700)}
.has-sub>button svg{transition:transform .18s ease}
.has-sub[data-open="true"]>button svg{transform:rotate(180deg)}
.subnav{
  position:absolute;top:calc(100% + .4rem);left:0;min-width:270px;background:var(--white);
  border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-md);
  padding:.45rem;display:none;flex-direction:column;gap:1px
}
.has-sub[data-open="true"] .subnav{display:flex}
/* Bridges the gap between the button and the panel so the pointer never leaves
   .has-sub on its way down — without it, mouseleave closes the menu mid-travel
   and the condition links are unreachable. Desktop only: on mobile .subnav is
   static and this strip would sit on top of the first link. */
@media (min-width:981px){
  .has-sub[data-open="true"]::after{content:"";position:absolute;top:100%;left:0;right:0;height:.55rem}
}
.subnav a{padding:.6rem .75rem;font-size:.9rem;border-radius:var(--r-sm)}

@media (max-width:980px){
  .nav-toggle{display:inline-flex}
  .nav{
    display:none;position:absolute;top:100%;left:0;right:0;background:var(--white);
    border-bottom:1px solid var(--line);box-shadow:var(--shadow-md);
    flex-direction:column;align-items:stretch;gap:2px;padding:.75rem 1.25rem 1.25rem;
    max-height:calc(100vh - 70px);overflow-y:auto
  }
  .nav[data-open="true"]{display:flex}
  .nav a:not(.btn){padding:.7rem .6rem;font-size:1rem}
  .has-sub>button{width:100%;justify-content:space-between;font-size:1rem;padding:.7rem .6rem}
  .subnav{position:static;box-shadow:none;border:0;border-left:2px solid var(--line);
    border-radius:0;margin:0 0 .4rem .6rem;padding:0 0 0 .5rem;min-width:0}
  .nav-cta{margin:.6rem 0 0}
  .btn--nav{width:100%;justify-content:center}
}

/* Very narrow screens: keep the header on one line */
@media (max-width:400px){
  .wrap{width:min(100% - 1.75rem,var(--wrap))}
  .header-inner{gap:.6rem;min-height:62px}
  .brand{font-size:.95rem;gap:.45rem}
  .brand-mark{width:29px;height:29px}
  .brand-sub{font-size:.58rem;letter-spacing:.08em}
  .nav-toggle{padding:.45rem .55rem}
}
@media (max-width:340px){
  .nav-toggle-label{display:none}
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--sans);font-weight:650;font-size:1rem;line-height:1;
  padding:1rem 1.6rem;border-radius:999px;text-decoration:none;border:1.5px solid transparent;
  cursor:pointer;transition:transform .14s ease,box-shadow .18s ease,background .18s ease
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn--primary{background:var(--plum);color:#fff;box-shadow:var(--shadow-sm)}
.btn--primary:hover{background:var(--plum-700);color:#fff;box-shadow:var(--shadow-md)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn--ghost:hover{background:var(--white);border-color:var(--plum-300);color:var(--plum-700)}
.btn--light{background:#fff;color:var(--plum-700)}
.btn--light:hover{background:#F7EDF2;color:var(--plum-700)}
.btn--outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.btn--outline-light:hover{background:rgba(255,255,255,.1);color:#fff}
.btn--nav{padding:.65rem 1.15rem;font-size:.9rem}
.btn--sm{padding:.75rem 1.25rem;font-size:.92rem}
.btn-row{display:flex;flex-wrap:wrap;gap:.85rem;align-items:center}
.btn-note{font-size:.86rem;color:var(--muted);margin:.9rem 0 0}
.section--plum .btn-note{color:#D9BFCD}

/* ---------- Hero ---------- */
.hero{position:relative;background:var(--plum-700);color:#fff;overflow:hidden}
.hero-media{position:absolute;inset:0}
.hero-media picture{display:block;width:100%;height:100%}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,rgba(35,12,24,.93) 0%,rgba(52,18,35,.85) 38%,rgba(60,22,40,.55) 68%,rgba(60,22,40,.35) 100%)
}
.hero-inner{position:relative;padding:clamp(4rem,9vw,7.5rem) 0 clamp(3.5rem,7vw,6rem);max-width:750px}
.hero h1{color:#fff;margin-bottom:.45em}
.hero .lede{color:#F0DFE7;font-size:clamp(1.12rem,2vw,1.35rem)}
.hero .eyebrow{color:var(--plum-300)}
.hero .btn-row{margin-top:1.6rem}
.hero-byline{
  display:flex;align-items:center;gap:.85rem;margin-top:1.9rem;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
  border-radius:999px;padding:.5rem 1.15rem .5rem .5rem;width:fit-content;max-width:100%
}
.hero-byline img{
  width:52px;height:52px;border-radius:50%;object-fit:cover;object-position:center 22%;
  border:2px solid rgba(255,255,255,.55);flex:none
}
.hero-byline span{font-size:.87rem;line-height:1.35;color:#EBD8E1}
.hero-byline strong{display:block;color:#fff;font-weight:650;font-size:.97rem}
@media (max-width:400px){
  .hero-byline{gap:.65rem;padding:.45rem .9rem .45rem .45rem}
  .hero-byline img{width:44px;height:44px}
  .hero-byline span{font-size:.79rem}
}

/* Portrait photography sits taller than the 4:3 stock crops */
.split-media img.portrait{aspect-ratio:3/4;object-position:center 12%}
@media (max-width:860px){
  .split-media img.portrait{aspect-ratio:4/3;object-position:center 18%}
}
.hero-trust{
  display:flex;flex-wrap:wrap;gap:.5rem .65rem;margin-top:2.25rem;padding-top:1.5rem;
  border-top:1px solid rgba(255,255,255,.18)
}
.hero-trust li{
  list-style:none;font-size:.83rem;font-weight:550;color:#EBD8E1;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);
  padding:.4rem .8rem;border-radius:999px
}
/* On tall narrow viewports a full-bleed photo behind text either kills the text or
   disappears under the scrim. Give the photograph its own band at the top instead,
   fading into solid plum, and set the copy on the solid ground below it. */
@media (max-width:760px){
  .hero{background:var(--plum-700)}
  .hero-media{inset:0 0 auto 0;height:clamp(210px,34vh,300px)}
  .hero-media img{object-position:center 28%}
  .hero-media::after{
    background:linear-gradient(180deg,rgba(30,10,20,.14) 0%,rgba(40,14,26,.30) 46%,
      rgba(52,18,33,.72) 78%,rgba(92,31,58,.97) 94%,var(--plum-700) 100%)
  }
    /* clears the photo band; must sit after .hero-inner's padding shorthand */
  .hero-inner{padding-top:calc(clamp(210px,34vh,300px) + 1.75rem)}
}
/* Page hero (interior) */
.page-hero{background:var(--sand);border-bottom:1px solid var(--line);padding:clamp(2.5rem,5vw,4rem) 0 clamp(2.25rem,4vw,3.25rem)}
.page-hero h1{margin-bottom:.35em}
.page-hero .lede{max-width:64ch}

/* ---------- Breadcrumbs ---------- */
.crumbs{font-size:.83rem;color:var(--muted);margin:0 0 1.4rem;display:flex;flex-wrap:wrap;gap:.4rem;padding:0;list-style:none}
.crumbs li{display:flex;gap:.4rem;align-items:center}
.crumbs li+li::before{content:"›";color:var(--plum-300)}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--plum);text-decoration:underline}
.crumbs [aria-current]{color:var(--ink-soft);font-weight:550}

/* ---------- Grids & cards ---------- */
.grid{display:grid;gap:1.5rem}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:1.75rem;box-shadow:var(--shadow-sm);display:flex;flex-direction:column
}
.card h3{margin-bottom:.4em}
.card p{color:var(--ink-soft);font-size:.97rem}
.card-link{
  margin-top:auto;padding-top:1.1rem;font-weight:650;font-size:.93rem;
  text-decoration:none;display:inline-flex;align-items:center;gap:.35rem
}
.card-link::after{content:"→";transition:transform .16s ease}
a.card:hover .card-link::after,.card-link:hover::after{transform:translateX(3px)}
a.card{text-decoration:none;color:inherit;transition:transform .16s ease,box-shadow .2s ease,border-color .2s ease}
a.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--plum-300)}
.card-media{
  margin:-1.75rem -1.75rem 1.35rem;border-radius:var(--r-lg) var(--r-lg) 0 0;overflow:hidden;
  aspect-ratio:4/3;background:var(--sand-deep)
}
.card-media img{width:100%;height:100%;object-fit:cover}
.card-icon{
  width:44px;height:44px;border-radius:12px;background:var(--plum-050);color:var(--plum);
  display:grid;place-items:center;margin-bottom:1.1rem;flex:none
}
.card--flat{background:var(--sand);border-color:transparent;box-shadow:none}
.section--sand .card{background:var(--white)}

/* ---------- Split (text + image) ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.split--reverse .split-media{order:2}
.split-media img{border-radius:var(--r-lg);box-shadow:var(--shadow-md);width:100%;aspect-ratio:4/3;object-fit:cover}
@media (max-width:860px){
  .split{grid-template-columns:1fr;gap:2rem}
  .split--reverse .split-media{order:0}
}

/* ---------- Steps ---------- */
.steps{list-style:none;counter-reset:s;margin:0;padding:0;display:grid;gap:1.1rem}
.steps li{
  counter-increment:s;position:relative;padding:1.4rem 1.5rem 1.4rem 4.4rem;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-md)
}
.steps li::before{
  content:counter(s);position:absolute;left:1.35rem;top:1.35rem;
  width:34px;height:34px;border-radius:50%;background:var(--plum);color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:.95rem;font-family:var(--sans)
}
.steps h3{font-size:1.08rem;font-family:var(--sans);font-weight:700;margin-bottom:.25em}
.steps p{font-size:.96rem;color:var(--ink-soft)}

/* ---------- Checklist ---------- */
.check{list-style:none;margin:0;padding:0;display:grid;gap:.8rem}
.check li{position:relative;padding-left:1.95rem;color:var(--ink-soft)}
.check li::before{
  content:"";position:absolute;left:0;top:.44em;width:1.1rem;height:1.1rem;border-radius:50%;
  background:var(--teal-050) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%232F6D69' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") center/.8rem no-repeat
}
.section--plum .check li{color:#EBD8E1}
.section--plum .check li::before{background-color:rgba(255,255,255,.14)}

/* ---------- Stats ---------- */
.stat{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.6rem;text-align:center}
.stat-num{font-family:var(--serif);font-size:clamp(1.9rem,4vw,2.6rem);font-weight:600;color:var(--plum);line-height:1;display:block;letter-spacing:-.02em}
.stat-label{font-size:.9rem;color:var(--ink-soft);margin:.65rem 0 0;display:block}

/* ---------- Quotes ---------- */
.quote{
  background:var(--white);border:1px solid var(--line);border-left:4px solid var(--plum-300);
  border-radius:var(--r-md);padding:1.6rem 1.75rem;box-shadow:var(--shadow-sm)
}
.quote p{font-family:var(--serif);font-size:1.06rem;line-height:1.55;color:var(--ink);font-style:italic}
.quote footer{margin-top:.9rem;font-size:.85rem;font-weight:650;color:var(--muted);font-style:normal}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:.7rem}
.faq details{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);
  padding:0;overflow:hidden
}
.faq details[open]{border-color:var(--plum-300);box-shadow:var(--shadow-sm)}
.faq summary{
  cursor:pointer;list-style:none;padding:1.15rem 3rem 1.15rem 1.4rem;position:relative;
  font-weight:650;font-size:1.02rem;color:var(--ink)
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:1.35rem;top:1.45rem;width:14px;height:14px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%237C2D4F' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .18s ease
}
.faq details[open] summary::after{transform:rotate(180deg)}
.faq .faq-body{padding:0 1.4rem 1.35rem;color:var(--ink-soft);font-size:.98rem}
.faq .faq-body>*:first-child{margin-top:0}

/* ---------- Pricing ---------- */
.price-card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:2rem;box-shadow:var(--shadow-sm);display:flex;flex-direction:column
}
.price-card--feature{border:2px solid var(--plum);box-shadow:var(--shadow-md);position:relative}
.price-tag{font-family:var(--serif);font-size:2.5rem;font-weight:600;color:var(--plum);line-height:1;letter-spacing:-.02em}
.price-unit{font-family:var(--sans);font-size:.92rem;font-weight:550;color:var(--muted);margin-left:.35rem}
.price-badge{
  position:absolute;top:-.8rem;left:2rem;background:var(--plum);color:#fff;
  font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:.35rem .8rem;border-radius:999px
}

/* ---------- Callout / disclaimer ---------- */
.callout{
  background:var(--teal-050);border:1px solid #C9E0DD;border-left:4px solid var(--teal);
  border-radius:var(--r-md);padding:1.35rem 1.6rem;font-size:.96rem;color:#204F4C
}
.callout h3{font-size:1rem;font-family:var(--sans);font-weight:700;color:#1B4441;margin-bottom:.4em}
.callout a{color:#1B4441}
.disclaimer{
  background:var(--sand);border:1px solid var(--line);border-radius:var(--r-md);
  padding:1.35rem 1.6rem;font-size:.9rem;color:var(--muted);line-height:1.6
}
.disclaimer strong{color:var(--ink-soft)}

/* ---------- Prose ---------- */
.prose h2{margin-top:2.6em}
.prose h2:first-child{margin-top:0}
.prose h3{margin-top:1.9em}
.prose ul,.prose ol{padding-left:1.3rem;color:var(--ink-soft);margin:0 0 1.15em}
.prose li{margin-bottom:.5em}
.prose li::marker{color:var(--plum-300)}

/* ---------- CTA band ---------- */
.cta-band{background:var(--plum-700);color:#fff;position:relative;overflow:hidden}
.cta-band::before{
  content:"";position:absolute;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(185,118,146,.28),transparent 68%);
  top:-230px;right:-140px;pointer-events:none
}
.cta-band .wrap{position:relative}
.cta-inner{padding:clamp(3rem,6vw,4.75rem) 0;max-width:640px}
.cta-band h2{color:#fff}
.cta-band p{color:#EBD8E1}

/* ---------- Footer ---------- */
.site-footer{background:#17161B;color:#BCAFB6;padding:clamp(3rem,5vw,4rem) 0 2rem;font-size:.92rem}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2.5rem;margin-bottom:2.75rem}
@media (max-width:820px){.footer-grid{grid-template-columns:1fr 1fr;gap:2rem}}
@media (max-width:480px){.footer-grid{grid-template-columns:1fr}}
.site-footer h4{color:#fff;font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;margin-bottom:1.05rem;font-weight:700}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.site-footer a{color:#BCAFB6;text-decoration:none}
.site-footer a:hover{color:#fff;text-decoration:underline}
.footer-brand{font-family:var(--serif);font-size:1.15rem;color:#fff;margin-bottom:.7rem;display:flex;align-items:center;gap:.6rem}
.footer-brand .brand-mark{width:34px;height:34px;flex:none;overflow:hidden}
.footer-bottom{
  border-top:1px solid #302C36;padding-top:1.75rem;display:flex;flex-wrap:wrap;
  gap:1rem;justify-content:space-between;font-size:.84rem;color:#8C7F86
}
.footer-legal{max-width:70ch;font-size:.84rem;line-height:1.6;color:#8C7F86;margin:0 0 1.75rem}
.footer-crisis{color:#D8C9D1}
.footer-crisis strong{color:#fff}
.social{display:flex;gap:.6rem;margin-top:1.1rem}
.social a{
  width:36px;height:36px;border-radius:50%;background:#282430;display:grid;place-items:center;color:#BCAFB6
}
.social a:hover{background:var(--plum);color:#fff}

/* ---------- Utilities ---------- */
.mt-0{margin-top:0}.mt-1{margin-top:.75rem}.mt-2{margin-top:1.5rem}.mt-3{margin-top:2.25rem}.mt-4{margin-top:3rem}
.mb-2{margin-bottom:1.5rem}.mb-3{margin-bottom:2.25rem}
.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0
}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:.95rem;min-width:520px}
th,td{text-align:left;padding:.85rem 1rem;border-bottom:1px solid var(--line)}
th{font-weight:700;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}

/* ---------- Two-door entry cards ----------
   The homepage deliberately forks. These need to read as equal-weight choices,
   not a primary and a secondary. */
.door-grid{gap:1.75rem}
a.card.door{padding:0;overflow:hidden}
a.card.door .card-media{margin:0;border-radius:0;aspect-ratio:3/2}
a.card.door .eyebrow{margin:1.5rem 1.75rem .5rem;font-size:.72rem}
a.card.door h3{margin:0 1.75rem .5em;font-size:1.35rem}
a.card.door p{margin:0 1.75rem;color:var(--ink-soft)}
a.card.door .card-link{margin:1.15rem 1.75rem 1.75rem;padding-top:0}
a.card.door:hover{border-color:var(--accent);transform:translateY(-4px)}
@media (max-width:560px){
  a.card.door .eyebrow{margin:1.25rem 1.25rem .45rem}
  a.card.door h3{margin:0 1.25rem .5em;font-size:1.2rem}
  a.card.door p{margin:0 1.25rem}
  a.card.door .card-link{margin:1rem 1.25rem 1.25rem}
}
/* Services hub reuses .door without imagery */
a.card.door:not(:has(.card-media)) .eyebrow{margin-top:1.75rem}

/* ---------- Sidebar columns ----------
   .split centres its two columns, which is right when both are similar heights
   (text beside a portrait). It is wrong when a short sidebar card sits beside a
   long article: the card floats to the vertical middle with dead space above it.
   Where the media column holds a card, top-align it and let it follow the read. */
@media (min-width:861px){
  .split:has(.split-media > .card){align-items:start}
  .split:has(.split-media > .card) .split-media{position:sticky;top:90px}
}

/* ---------- YouTube facade ----------
   A self-hosted thumbnail that swaps in the iframe on click. Nothing is
   requested from Google — no thumbnail, no cookie, no script — until the
   visitor actually chooses to watch. Also keeps these pages fast. */
.yt{margin:2rem 0}
.yt-frame{
  position:relative;aspect-ratio:16/9;border-radius:var(--r-md);overflow:hidden;
  background:var(--ink);box-shadow:var(--shadow-md)
}
.yt-frame img{width:100%;height:100%;object-fit:cover;display:block}
.yt-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt-btn{
  position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;cursor:pointer;
  background:rgba(15,14,18,.28);display:grid;place-items:center;transition:background .2s ease
}
.yt-btn:hover{background:rgba(15,14,18,.14)}
.yt-play{
  width:72px;height:50px;border-radius:12px;background:rgba(20,18,24,.82);
  display:grid;place-items:center;transition:background .2s ease,transform .2s ease
}
.yt-btn:hover .yt-play{background:#CC0000;transform:scale(1.06)}
.yt-play svg{width:26px;height:26px;fill:#fff;margin-left:3px}
.yt-cap{
  margin:.75rem 0 0;font-size:.88rem;color:var(--muted);display:flex;gap:.5rem;
  align-items:baseline;flex-wrap:wrap
}
.yt-cap a{color:var(--muted)}

/* Video grid */
.video-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;
  text-decoration:none;color:inherit;transition:transform .16s ease,box-shadow .2s ease,border-color .2s ease}
.video-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--accent-300)}
.video-card .thumb{position:relative;aspect-ratio:16/9;background:var(--sand-deep)}
.video-card .thumb img{width:100%;height:100%;object-fit:cover}
.video-card .thumb::after{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:52px;height:36px;border-radius:9px;background:rgba(20,18,24,.78);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
  background-size:20px;background-repeat:no-repeat;background-position:center
}
.video-card:hover .thumb::after{background-color:#CC0000}
.video-card h3{font-family:var(--sans);font-size:1rem;font-weight:650;line-height:1.35;
  margin:1rem 1.15rem .4rem}
.video-card p{margin:0 1.15rem;font-size:.88rem;color:var(--muted)}
.video-card .vc-date{margin:.6rem 1.15rem 1.15rem;font-size:.8rem;color:var(--muted)}