/* =========================================================
   Fonts, served from this site rather than from Google.
   Variable WOFF2, subsetted to Latin. Licences alongside
   the files in /assets/fonts/.
   ========================================================= */
@font-face{
  font-family:"Cormorant Garamond";
  src:url("/assets/fonts/cormorant-garamond-var.woff2") format("woff2-variations"),
      url("/assets/fonts/cormorant-garamond-var.woff2") format("woff2");
  font-weight:300 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Cormorant Garamond";
  src:url("/assets/fonts/cormorant-garamond-italic-var.woff2") format("woff2-variations"),
      url("/assets/fonts/cormorant-garamond-italic-var.woff2") format("woff2");
  font-weight:300 700; font-style:italic; font-display:swap;
}
@font-face{
  font-family:"Jost";
  src:url("/assets/fonts/jost-var.woff2") format("woff2-variations"),
      url("/assets/fonts/jost-var.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
}

/* =========================================================
   Inner Truth Counselling — Design System
   Aligned to the Uncommon Wisdom / maitreyabuddha.com brand
   Typefaces: Cormorant Garamond (display) · Jost (body/UI)
   ========================================================= */

:root{
  /* --- Ink & ground (mother-brand midnight indigo) --- */
  --ink:            #10152F;
  --ink-2:          #1A2145;
  --ink-3:          #29315C;
  --ink-soft:       #3D466F;

  /* --- Star gold (mother-brand accent) --- */
  --gold:           #C8A35C;
  --gold-deep:      #A8813C;
  --gold-light:     #E7D2A2;
  --gold-wash:      rgba(200,163,92,.12);

  /* --- Teal: taken from the Uncommon Wisdom 2026 strategy deck
         (--teal #7FB0A8 / --teal-ink #2F6F63) --- */
  --green:          #2F6F63;   /* the deck's teal-ink                   */
  --green-deep:     #1D4941;   /* darkened for full-width bands         */
  --green-bright:   #7FB0A8;   /* the deck's light teal, for highlights */
  --green-light:    #DBEAE6;   /* pale wash, for callouts               */

  /* --- Deep indigo support tone --- */
  --violet:         #2E3566;
  --violet-deep:    #191F45;
  --violet-light:   #E6E3EF;

  /* --- Linen: the light ground --- */
  --linen:          #FBF8F2;
  --linen-2:        #F4EDE1;
  --linen-3:        #EAE0CE;

  /* --- Text --- */
  --text:           #1B1F33;
  --text-muted:     #5C627A;
  --text-on-dark:   #EFEAE0;
  --text-on-dark-m: rgba(239,234,224,.72);

  /* --- System --- */
  --rule:           rgba(27,31,51,.12);
  --rule-dark:      rgba(231,210,162,.20);
  --focus:          #7CA6FF;

  /* --- Type --- */
  --display: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --body:    "Jost", "Futura", "Avenir Next", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* --- Scale & rhythm --- */
  --wrap: 1180px;
  --wrap-narrow: 760px;
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --section-y: clamp(4rem, 9vw, 7.5rem);
  --radius: 3px;
  --radius-lg: 6px;
  --shadow-sm: 0 1px 2px rgba(16,21,47,.05), 0 8px 24px -16px rgba(16,21,47,.28);
  --shadow-md: 0 2px 4px rgba(16,21,47,.06), 0 24px 48px -28px rgba(16,21,47,.35);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------------------------------------------------------
   Reset & base
   --------------------------------------------------------- */
*,*::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:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}
body{
  margin:0;
  background:var(--linen);
  color:var(--text);
  font-family:var(--body);
  font-size:clamp(1rem, .96rem + .18vw, 1.0625rem);
  font-weight:300;
  line-height:1.72;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,video{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }
:focus-visible{ outline:2px solid var(--focus); outline-offset:3px; border-radius:2px; }
::selection{ background:var(--gold-light); color:var(--ink); }

/* ---------------------------------------------------------
   Typography
   --------------------------------------------------------- */
h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:400;
  line-height:1.1;
  letter-spacing:-.012em;
  margin:0 0 .5em;
  color:var(--ink);
}
h1{ font-size:clamp(2.6rem, 1.7rem + 3.9vw, 4.6rem); }
h2{ font-size:clamp(2rem, 1.4rem + 2.5vw, 3.25rem); }
h3{ font-size:clamp(1.4rem, 1.2rem + .8vw, 1.85rem); line-height:1.22; }
h4{ font-size:1.125rem; font-family:var(--body); font-weight:500; letter-spacing:.01em; line-height:1.4; }
h1 em, h2 em, h3 em{ font-style:italic; color:var(--gold-deep); }
p{ margin:0 0 1.15em; }
p:last-child{ margin-bottom:0; }
strong{ font-weight:500; }

.eyebrow{
  font-family:var(--body);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--gold-deep);
  margin:0 0 1.1rem;
  display:flex;
  align-items:center;
  gap:.7rem;
}
.eyebrow::before{ content:"✦"; font-size:.7em; letter-spacing:0; opacity:.85; }
.eyebrow--center{ justify-content:center; }
.eyebrow--dark{ color:var(--gold-light); }

.lede{
  font-size:clamp(1.075rem, 1rem + .38vw, 1.3rem);
  line-height:1.68;
  color:var(--text-muted);
  font-weight:300;
}
.lede--dark{ color:var(--text-on-dark-m); }
.measure{ max-width:62ch; }
.measure-tight{ max-width:52ch; }
.center{ text-align:center; }
.center .eyebrow{ justify-content:center; }
.center .measure, .center .measure-tight{ margin-inline:auto; }

/* ---------------------------------------------------------
   Layout primitives
   --------------------------------------------------------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }
.wrap-narrow{ width:100%; max-width:var(--wrap-narrow); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:var(--section-y); position:relative; }
.section--tight{ padding-block:clamp(2.75rem,6vw,4.5rem); }
.section--linen{ background:var(--linen-2); }
.section--ink{ background:#10152F; background:var(--ink,#10152F); color:var(--text-on-dark,#EFEAE0); }
.section--ink h1,.section--ink h2,.section--ink h3{ color:var(--linen); }
.section--ink h2 em,.section--ink h3 em{ color:var(--gold-light); }
.section--deep{ background:#1D4941; background:var(--green-deep,#1D4941); color:var(--text-on-dark,#EFEAE0); }
.section--deep .lede{ color:var(--text-on-dark-m); }
.section--deep h2,.section--deep h3{ color:var(--linen); }
.section--deep h2 em{ color:var(--gold-light); }

.section-head{ margin-bottom:clamp(2.5rem,5vw,3.75rem); }
.grid{ display:grid; gap:clamp(1.25rem,2.6vw,2rem); }
.grid-2{ grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr)); }
.grid-3{ grid-template-columns:repeat(auto-fit,minmax(min(100%,18.5rem),1fr)); }
.grid-4{ grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr)); }
.stack-lg{ display:grid; gap:clamp(2rem,5vw,4rem); }

/* Signature: the gold thread — a hairline that stitches the page together */
.thread{
  border:0; height:1px; margin:0;
  background:linear-gradient(90deg,transparent,var(--gold) 18%,var(--gold) 82%,transparent);
  opacity:.42;
}
.thread--dark{ background:linear-gradient(90deg,transparent,var(--gold-light) 18%,var(--gold-light) 82%,transparent); opacity:.3; }
.mark{ color:var(--gold); font-size:.85rem; letter-spacing:.4em; display:block; }

/* ---------------------------------------------------------
   Buttons
   --------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.95rem 1.85rem;
  font-family:var(--body); font-size:.82rem; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase;
  border-radius:var(--radius); border:1px solid transparent;
  cursor:pointer; transition:all .3s var(--ease);
  text-align:center;
}
.btn--primary{ background:var(--gold); color:var(--ink); border-color:var(--gold); }
.btn--primary:hover{ background:var(--gold-deep); border-color:var(--gold-deep); color:#fff; transform:translateY(-1px); }
.btn--outline{ background:transparent; color:var(--ink); border-color:rgba(27,31,51,.28); }
.btn--outline:hover{ border-color:var(--ink); background:var(--ink); color:var(--linen); }
.btn--ghost{ background:transparent; color:var(--linen); border-color:rgba(239,234,224,.42); }
.btn--ghost:hover{ background:var(--linen); color:var(--ink); border-color:var(--linen); }
.btn--deep{ background:var(--green); border-color:var(--green); color:#fff; }
.btn--deep:hover{ background:var(--green-deep); border-color:var(--green-deep); }
.btn--sm{ padding:.6rem 1.15rem; font-size:.72rem; letter-spacing:.11em; }
.btn--full{ width:100%; }
.btn-row{ display:flex; flex-wrap:wrap; gap:.85rem; }
.btn-row--center{ justify-content:center; }

.link-arrow{
  display:inline-flex; align-items:center; gap:.45rem;
  font-size:.8rem; font-weight:500; letter-spacing:.11em; text-transform:uppercase;
  color:var(--gold-deep); border-bottom:1px solid var(--gold-wash);
  padding-bottom:.2rem; transition:all .25s var(--ease);
}
.link-arrow:hover{ border-bottom-color:var(--gold-deep); gap:.75rem; }
.link-arrow--dark{ color:var(--gold-light); }
.link-arrow--dark:hover{ border-bottom-color:var(--gold-light); }

/* ---------------------------------------------------------
   Skip link + crisis bar
   --------------------------------------------------------- */
.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:var(--linen); padding:.8rem 1.4rem; font-size:.85rem;
}
.skip:focus{ left:.5rem; top:.5rem; }

.crisisbar{
  background:var(--ink); color:var(--text-on-dark-m);
  font-size:.78rem; letter-spacing:.045em; text-align:center;
  padding:.6rem var(--gutter);
  border-bottom:1px solid var(--rule-dark);
}
.crisisbar a{ color:var(--gold-light); border-bottom:1px solid rgba(231,210,162,.35); }
.crisisbar a:hover{ border-bottom-color:var(--gold-light); }

/* ---------------------------------------------------------
   Header / nav
   --------------------------------------------------------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(251,248,242,.94);
  backdrop-filter:saturate(150%) blur(12px);
  border-bottom:1px solid var(--rule);
}
.nav{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; min-height:74px; }
.brand{ display:flex; align-items:baseline; gap:.6rem; flex:none; }
.brand__name{ font-family:var(--display); font-size:1.5rem; line-height:1; color:var(--ink); letter-spacing:.005em; }
.brand__name em{ font-style:italic; color:var(--gold-deep); }
.brand__sub{ font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; color:var(--text-muted); }

.nav__links{ display:flex; align-items:center; gap:.35rem; list-style:none; margin:0; padding:0; }
.nav__links > li{ position:relative; }
.nav__links a, .nav__toggle-sub{
  display:inline-flex; align-items:center; gap:.35rem; white-space:nowrap;
  padding:.55rem .6rem; font-size:.82rem; font-weight:400; letter-spacing:.055em;
  color:var(--text); background:none; border:0; cursor:pointer; border-radius:var(--radius);
  transition:color .2s var(--ease);
}
.nav__links a:hover, .nav__toggle-sub:hover{ color:var(--gold-deep); }
.nav__links a[aria-current="page"]{ color:var(--gold-deep); }
.nav__toggle-sub::after{ content:"⌄"; font-size:.85em; opacity:.6; transform:translateY(-2px); }

.submenu{
  position:absolute; top:calc(100% + .2rem); left:0; min-width:15rem;
  background:var(--linen); border:1px solid var(--rule); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md); padding:.5rem; list-style:none; margin:0;
  opacity:0; visibility:hidden; transform:translateY(-6px); transition:all .22s var(--ease);
}
.submenu.is-open{ opacity:1; visibility:visible; transform:translateY(0); }
@media (hover: hover) and (pointer: fine){
  .nav__links li:hover > .submenu, .submenu:focus-within{ opacity:1; visibility:visible; transform:translateY(0); }
}
.submenu a{ display:block; padding:.5rem .75rem; font-size:.82rem; }
.submenu a:hover{ background:var(--linen-2); }

.nav__cta{ display:flex; align-items:center; gap:.6rem; flex:none; }
.nav__burger{
  display:none; width:44px; height:44px; align-items:center; justify-content:center;
  background:none; border:1px solid var(--rule); border-radius:var(--radius); cursor:pointer;
}
.nav__burger span{ display:block; width:19px; height:1.5px; background:var(--ink); position:relative; }
.nav__burger span::before,.nav__burger span::after{ content:""; position:absolute; left:0; width:19px; height:1.5px; background:var(--ink); }
.nav__burger span::before{ top:-6px; } .nav__burger span::after{ top:6px; }

@media (hover: none), (pointer: coarse){
  .nav__links li:hover > .submenu{ opacity:1; visibility:visible; }
  .nav__toggle-sub{ -webkit-tap-highlight-color:transparent; }
}

@media (max-width:1120px){
  .nav__burger{ display:inline-flex; }
  /* A sticky header taller than the screen pins at the top and its lower
     half becomes unreachable. While the menu is open the header scrolls
     with the page instead. */
  body.nav-open .site-header{ position:static; }
  body.nav-open{ overflow:visible; }
  /* The menu sits in the page flow instead of floating above it with its own
     scrollbar. The page scrolls, so nothing can fall below a cut-off that a
     nested scroll container fails to reach. */
  .nav{ flex-wrap:wrap; }
  .nav__links{
    display:none; position:static; order:3;
    flex:1 0 100%; flex-direction:column; align-items:stretch; gap:0;
    background:var(--linen);
    border-top:1px solid var(--rule); border-bottom:0;
    padding:.5rem 0 1.25rem; margin-top:.25rem;
    box-shadow:none; max-height:none; overflow:visible;
  }
  .nav__links > li{ border-bottom:1px solid var(--rule); }
  .nav__links > li:last-child{ border-bottom:0; }
  .nav__links.is-open{ display:flex; }
  .nav__links a, .nav__toggle-sub{ padding:.9rem .25rem; width:100%; font-size:1rem; white-space:normal; min-height:48px; touch-action:manipulation; }
  .submenu{
    position:static; opacity:1; visibility:visible; transform:none;
    box-shadow:none; border:0; border-left:2px solid var(--gold-wash);
    border-radius:0; min-width:0; width:100%;
    margin:.15rem 0 .75rem .1rem; padding:.25rem 0 .25rem .9rem;
    display:none;
  }
  .submenu.is-open{ display:block; }
  .submenu a{ padding:.6rem .25rem; font-size:.92rem; }
  .submenu a:hover{ background:none; color:var(--gold-deep); }
  /* Chevron turns when the section is open, so the state is obvious */
  .nav__toggle-sub{ justify-content:space-between; }
  .nav__toggle-sub::after{ transition:transform .2s var(--ease); }
  .nav__toggle-sub[aria-expanded="true"]::after{ transform:translateY(-2px) rotate(180deg); }
  .nav__toggle-sub[aria-expanded="true"]{ color:var(--gold-deep); }
}
@media (max-width:560px){
  .nav__cta .btn:not(.nav__burger){ display:none; }
  /* Stack the lockup rather than dropping "Counselling" — the word is
     doing real work, telling people what this arm of the brand is. */
  .brand{ flex-direction:column; align-items:flex-start; gap:.1rem; }
  .brand__name{ font-size:1.35rem; }
  .brand__sub{ font-size:.55rem; letter-spacing:.2em; }
}
@media (max-width:340px){
  .brand__name{ font-size:1.2rem; }
  .brand__sub{ font-size:.5rem; letter-spacing:.16em; }
}

/* ---------------------------------------------------------
   Hero
   --------------------------------------------------------- */
.hero{
  position:relative; overflow:hidden; background:#10152F;
  background:
    radial-gradient(130% 95% at 80% 6%, rgba(200,163,92,.20), transparent 58%),
    radial-gradient(95% 85% at 2% 98%, rgba(58,110,98,.34), transparent 62%),
    linear-gradient(168deg, var(--ink) 0%, #171E44 55%, #10152F 100%);
  color:var(--text-on-dark);
  padding-block:clamp(4rem,10vw,8rem);
}
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 22%, rgba(231,210,162,.55), transparent),
    radial-gradient(1.1px 1.1px at 78% 14%, rgba(231,210,162,.45), transparent),
    radial-gradient(1.2px 1.2px at 62% 74%, rgba(231,210,162,.35), transparent),
    radial-gradient(1px 1px at 32% 86%, rgba(231,210,162,.4), transparent),
    radial-gradient(1.3px 1.3px at 90% 58%, rgba(231,210,162,.3), transparent);
}
.hero > *{ position:relative; z-index:1; }
.hero h1{ color:var(--linen); max-width:16ch; }
.hero h1 em{ color:var(--gold-light); }
.hero__grid{ display:grid; grid-template-columns:1fr 1.12fr; gap:clamp(2rem,4vw,3.25rem); align-items:center; }
@media (max-width:900px){ .hero__grid{ grid-template-columns:1fr; } }
.hero__lede{ max-width:46ch; }
.hero__meta{
  display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; margin-top:2.25rem;
  font-size:.75rem; letter-spacing:.15em; text-transform:uppercase; color:var(--text-on-dark-m);
}
.hero__meta span{ display:inline-flex; align-items:center; gap:.45rem; }
.hero__meta span::before{ content:"✦"; color:var(--gold); font-size:.7em; }

.hero__figure{
  margin:0; position:relative;
  border-radius:var(--radius-lg);
  overflow:hidden;
  border:1px solid rgba(231,210,162,.22);
  box-shadow:0 40px 70px -34px rgba(0,0,0,.75);
}
.hero__figure img{ display:block; width:100%; height:auto; }
/* A hairline of gold along the top edge, tying it to the brand rules */
.hero__figure::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  border-radius:inherit;
  box-shadow:inset 0 1px 0 rgba(231,210,162,.22);
}
.hero__aside{
  margin:1.5rem 0 0; font-size:.9rem; color:var(--text-on-dark-m);
}
.hero__aside a{
  color:var(--gold-light); border-bottom:1px solid rgba(231,210,162,.3);
  padding-bottom:.1rem; transition:border-color .25s var(--ease);
}
.hero__aside a:hover{ border-bottom-color:var(--gold-light); }

.hero-card{
  background:rgba(251,248,242,.055);
  border:1px solid var(--rule-dark);
  border-radius:var(--radius-lg);
  padding:clamp(1.5rem,3vw,2.25rem);
  backdrop-filter:blur(4px);
}
.hero-card h3{ color:var(--linen); font-size:1.5rem; }
.hero-card ol{ margin:1.25rem 0 1.75rem; padding:0; list-style:none; counter-reset:step; display:grid; gap:1rem; }
.hero-card li{ counter-increment:step; display:grid; grid-template-columns:auto 1fr; gap:.9rem; align-items:start; font-size:.94rem; color:var(--text-on-dark-m); }
.hero-card li::before{
  content:counter(step,decimal-leading-zero);
  font-family:var(--display); font-size:.95rem; color:var(--gold);
  border:1px solid rgba(200,163,92,.4); border-radius:50%;
  width:2rem; height:2rem; display:grid; place-items:center;
}

/* Page hero (interior) */
.pagehead{
  background:#10152F;
  background:linear-gradient(165deg,var(--ink,#10152F) 0%,var(--ink-2,#1A2145) 100%);
  color:var(--text-on-dark); padding-block:clamp(3.25rem,7vw,5.5rem);
  border-bottom:1px solid var(--rule-dark);
}
.pagehead h1{ color:var(--linen); font-size:clamp(2.25rem,1.6rem + 2.8vw, 3.9rem); }
.pagehead h1 em{ color:var(--gold-light); }
.breadcrumb{ font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--text-on-dark-m); margin-bottom:1.1rem; }
.breadcrumb a:hover{ color:var(--gold-light); }
.breadcrumb span{ opacity:.45; margin:0 .5rem; }

/* Full-bleed brand banner. Sits directly under a .pagehead, so it needs
   no wrap and no caption — the line is set into the photograph itself. */
.brandband{
  position:relative; margin:0;
  background:var(--ink);
  border-bottom:1px solid var(--rule-dark);
}
.brandband img{
  display:block; width:100%; height:auto;
  aspect-ratio:3 / 2;              /* phones: the frame uncropped */
  object-fit:cover; object-position:center 38%;
}
@media (min-width:700px){  .brandband img{ aspect-ratio:16 / 9; } }
@media (min-width:1100px){ .brandband img{ aspect-ratio:2.2 / 1; } }
/* Gold hairlines top and bottom, the same rule used on the hero figure */
.brandband::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(231,210,162,.22), inset 0 -1px 0 rgba(231,210,162,.14);
}
/* Light variant, for photographs set on a pale ground rather than a dark one.
   The gold hairline would disappear against them, so the rule goes to ink. */
.brandband--light{ background:var(--linen-2); border-bottom-color:var(--rule); }
.brandband--light::after{
  box-shadow:inset 0 1px 0 rgba(27,31,51,.10), inset 0 -1px 0 rgba(27,31,51,.08);
}

/* ---------------------------------------------------------
   Cards
   --------------------------------------------------------- */
.card{
  background:#fff; border:1px solid var(--rule); border-radius:var(--radius-lg);
  padding:clamp(1.5rem,2.6vw,2.1rem);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
  display:flex; flex-direction:column;
}
.card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--gold); }
.card__num{
  font-family:var(--display); font-size:1.05rem; color:var(--gold-deep);
  letter-spacing:.06em; display:block; margin-bottom:.9rem;
}
.card h3{ margin-bottom:.6rem; }
.card p{ color:var(--text-muted); font-size:.96rem; }
.card .link-arrow{ margin-top:auto; padding-top:1.35rem; align-self:flex-start; }
.card--flat{ background:transparent; border:0; padding:0; }
.card--flat:hover{ transform:none; box-shadow:none; }
.card--dark{ background:rgba(251,248,242,.05); border-color:var(--rule-dark); }
.card--dark h3{ color:var(--linen); }
.card--dark p{ color:var(--text-on-dark-m); }
.card--dark:hover{ border-color:var(--gold); }

.pillar{ display:grid; gap:.85rem; }
.pillar__mark{ font-size:1.35rem; color:var(--gold-deep); line-height:1; }
.pillar h3{ font-size:1.35rem; margin:0; }
.pillar p{ color:var(--text-muted); font-size:.96rem; margin:0; }
.section--ink .pillar p{ color:var(--text-on-dark-m); }
.section--ink .pillar__mark{ color:var(--gold); }

/* ---------------------------------------------------------
   Therapist directory + filters
   --------------------------------------------------------- */
.finder{
  background:#fff; border:1px solid var(--rule); border-radius:var(--radius-lg);
  padding:clamp(1.25rem,2.5vw,1.85rem); box-shadow:var(--shadow-sm);
  margin-bottom:2.5rem;
}
.finder__row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr)); gap:1rem 1.25rem; }
.field{ display:grid; gap:.4rem; }
.field label{ font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--text-muted); font-weight:500; }
select,input[type="text"],input[type="email"],input[type="tel"],textarea{
  width:100%; font-family:var(--body); font-size:.95rem; font-weight:300; color:var(--text);
  background:var(--linen); border:1px solid var(--rule); border-radius:var(--radius);
  padding:.7rem .85rem; transition:border-color .2s var(--ease), background .2s var(--ease);
}
select:focus,input:focus,textarea:focus{ background:#fff; border-color:var(--gold); outline:none; box-shadow:0 0 0 3px var(--gold-wash); }
textarea{ min-height:9rem; resize:vertical; line-height:1.6; }
.finder__foot{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem;
  margin-top:1.25rem; padding-top:1.15rem; border-top:1px solid var(--rule);
}
.result-count{ font-size:.85rem; color:var(--text-muted); }
.result-count b{ color:var(--ink); font-weight:500; }
.btn-text{ background:none; border:0; cursor:pointer; font-size:.78rem; letter-spacing:.11em; text-transform:uppercase; color:var(--gold-deep); border-bottom:1px solid var(--gold-wash); padding:0 0 .2rem; }
.btn-text:hover{ border-bottom-color:var(--gold-deep); }

.people{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,17.5rem),1fr)); gap:clamp(1.25rem,2.4vw,1.75rem); }
.person{
  background:#fff; border:1px solid var(--rule); border-radius:var(--radius-lg);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.person:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--gold); }
.person__portrait{
  aspect-ratio:4/3; display:grid; place-items:center;
  background:linear-gradient(150deg,#1D2450,#2E3566);
  color:var(--gold-light); font-family:var(--display); font-size:2.6rem; letter-spacing:.04em;
  position:relative;
}
.person__portrait::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(70% 70% at 30% 20%, rgba(200,163,92,.22), transparent 65%);
}
.person__body{ padding:1.35rem 1.4rem 1.5rem; display:flex; flex-direction:column; flex:1; gap:.55rem; }
.person__name{ font-family:var(--display); font-size:1.45rem; line-height:1.15; color:var(--ink); margin:0; }
.person__cred{ font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-deep); }
.person__blurb{ font-size:.93rem; color:var(--text-muted); margin:.3rem 0 0; }
.tags{ display:flex; flex-wrap:wrap; gap:.35rem; margin:.65rem 0 0; padding:0; list-style:none; }
.tag{
  font-size:.7rem; letter-spacing:.06em; padding:.24rem .6rem;
  background:var(--linen-2); border:1px solid var(--rule); border-radius:100px; color:var(--text-muted);
}
.tag--violet{ background:var(--green-light); border-color:transparent; color:var(--green-deep); }
.tag--gold{ background:var(--gold-wash); border-color:transparent; color:var(--gold-deep); }
.person__foot{ margin-top:auto; padding-top:1.15rem; display:flex; gap:.6rem; flex-wrap:wrap; }
.empty{
  grid-column:1/-1; text-align:center; padding:3.5rem 1.5rem;
  border:1px dashed var(--rule); border-radius:var(--radius-lg); color:var(--text-muted);
}
.empty h3{ margin-bottom:.4rem; }
[hidden]{ display:none !important; }

/* ---------------------------------------------------------
   Matching quiz
   --------------------------------------------------------- */
.quiz{ background:#fff; border:1px solid var(--rule); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); overflow:hidden; }
.quiz__progress{ height:3px; background:var(--linen-3); }
.quiz__bar{ height:100%; width:0; background:var(--gold); transition:width .45s var(--ease); }
.quiz__step{ padding:clamp(1.75rem,4vw,3rem); }
.quiz__count{ font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--text-muted); margin-bottom:.9rem; }
.quiz h2{ font-size:clamp(1.6rem,1.3rem + 1.2vw,2.3rem); margin-bottom:1.5rem; }
.opts{ display:grid; gap:.7rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr)); }
.opt{
  text-align:left; background:var(--linen); border:1px solid var(--rule); border-radius:var(--radius);
  padding:1rem 1.15rem; cursor:pointer; transition:all .25s var(--ease); font-size:.95rem; font-weight:300;
}
.opt:hover{ border-color:var(--gold); background:#fff; transform:translateY(-1px); }
.opt.is-selected{ border-color:var(--gold); background:var(--gold-wash); }
.opt b{ display:block; font-weight:500; font-size:1rem; margin-bottom:.15rem; color:var(--ink); }
.opt span{ color:var(--text-muted); font-size:.87rem; line-height:1.5; }
.quiz__nav{ display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-top:1.85rem; padding-top:1.35rem; border-top:1px solid var(--rule); }

/* ---------------------------------------------------------
   Steps / process
   --------------------------------------------------------- */
.steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr)); gap:clamp(1.5rem,3vw,2.5rem); counter-reset:s; }
.step{ counter-increment:s; position:relative; padding-top:2.6rem; }
.step::before{
  content:counter(s,decimal-leading-zero);
  position:absolute; top:0; left:0;
  font-family:var(--display); font-size:1.4rem; color:var(--gold-deep);
}
.step::after{ content:""; position:absolute; top:1.4rem; left:0; width:2.75rem; height:1px; background:var(--gold); opacity:.45; }
.step h3{ font-size:1.3rem; }
.step p{ color:var(--text-muted); font-size:.96rem; margin:0; }
.section--ink .step p{ color:var(--text-on-dark-m); }
.section--ink .step::before{ color:var(--gold); }

/* ---------------------------------------------------------
   Quote / testimonials
   --------------------------------------------------------- */
.quote{ text-align:center; }
.quote blockquote{
  margin:0 auto; max-width:34ch;
  font-family:var(--display); font-size:clamp(1.6rem,1.2rem + 2vw,2.7rem);
  line-height:1.24; font-style:italic; color:var(--linen);
}
.quote cite{ display:block; margin-top:1.75rem; font-family:var(--body); font-style:normal; font-size:.76rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-light); }

.testimonials{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr)); gap:clamp(1.25rem,2.5vw,1.85rem); }
.testimonial{ background:#fff; border:1px solid var(--rule); border-radius:var(--radius-lg); padding:clamp(1.5rem,2.6vw,2rem); display:flex; flex-direction:column; }
.testimonial__stars{ color:var(--gold); letter-spacing:.2em; font-size:.8rem; margin-bottom:1rem; }
.testimonial p{ font-family:var(--display); font-size:1.18rem; line-height:1.5; font-style:italic; color:var(--ink); }
.testimonial cite{ margin-top:auto; padding-top:1.25rem; font-style:normal; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--text-muted); }

/* ---------------------------------------------------------
   Fee table
   --------------------------------------------------------- */
.fees{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr)); gap:clamp(1.25rem,2.5vw,1.75rem); }
.fee{ background:#fff; border:1px solid var(--rule); border-radius:var(--radius-lg); padding:clamp(1.5rem,2.6vw,2.1rem); display:flex; flex-direction:column; position:relative; }
.fee--feature{ border-color:var(--gold); box-shadow:var(--shadow-md); }
.fee__flag{ position:absolute; top:-.7rem; left:clamp(1.5rem,2.6vw,2.1rem); background:var(--gold); color:var(--ink); font-size:.65rem; letter-spacing:.16em; text-transform:uppercase; padding:.25rem .7rem; border-radius:2px; font-weight:500; }
.fee__len{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--text-muted); }
.fee h3{ margin:.6rem 0 .5rem; font-size:1.45rem; }
.fee__price{ font-family:var(--display); font-size:2.6rem; color:var(--ink); line-height:1; margin:.6rem 0 .3rem; }
.fee__price small{ font-family:var(--body); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); display:block; margin-top:.5rem; }
.fee ul{ list-style:none; margin:1.25rem 0 1.75rem; padding:0; display:grid; gap:.6rem; font-size:.93rem; color:var(--text-muted); }
.fee li{ display:grid; grid-template-columns:auto 1fr; gap:.6rem; }
.fee li::before{ content:"✦"; color:var(--gold); font-size:.7em; line-height:1.9; }
.fee .btn{ margin-top:auto; }

/* ---------------------------------------------------------
   Accordion (FAQ)
   --------------------------------------------------------- */
.accordion{ border-top:1px solid var(--rule); }
.accordion details{ border-bottom:1px solid var(--rule); }
.accordion summary{
  cursor:pointer; list-style:none; padding:1.35rem 2.5rem 1.35rem 0; position:relative;
  font-family:var(--display); font-size:clamp(1.15rem,1.05rem + .4vw,1.4rem); color:var(--ink);
  transition:color .2s var(--ease);
}
.accordion summary::-webkit-details-marker{ display:none; }
.accordion summary:hover{ color:var(--gold-deep); }
.accordion summary::after{
  content:"+"; position:absolute; right:.35rem; top:50%; transform:translateY(-50%);
  font-size:1.4rem; color:var(--gold-deep); font-family:var(--body); font-weight:300; transition:transform .25s var(--ease);
}
.accordion details[open] summary::after{ content:"−"; }
.accordion__body{ padding:0 2.5rem 1.6rem 0; color:var(--text-muted); font-size:.98rem; }
.accordion__body p:last-child{ margin-bottom:0; }

/* ---------------------------------------------------------
   Prose (legal / long-form)
   --------------------------------------------------------- */
.prose h2{ font-size:clamp(1.6rem,1.35rem + 1vw,2.2rem); margin-top:2.75rem; }
.prose h3{ font-size:1.25rem; margin-top:2rem; }
.prose ul,.prose ol{ padding-left:1.2rem; margin:0 0 1.15em; color:var(--text-muted); }
.prose li{ margin-bottom:.5rem; }
.prose a{ color:var(--gold-deep); border-bottom:1px solid var(--gold-wash); }
.prose a:hover{ border-bottom-color:var(--gold-deep); }
.prose > p{ color:var(--text-muted); }

.callout{
  background:var(--green-light); border-left:3px solid var(--green);
  border-radius:0 var(--radius) var(--radius) 0; padding:1.35rem 1.6rem; margin:2rem 0;
}
.callout p{ color:var(--green-deep); margin:0; font-size:.96rem; }
.callout strong{ color:var(--green-deep); }
.callout--gold{ background:var(--gold-wash); border-left-color:var(--gold-deep); }
.callout--gold p{ color:#6E5320; }

/* ---------------------------------------------------------
   Split feature
   --------------------------------------------------------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
@media (max-width:860px){ .split{ grid-template-columns:1fr; } }
.split__panel{
  aspect-ratio:5/4; border-radius:var(--radius-lg); position:relative; overflow:hidden;
  background:linear-gradient(150deg,var(--ink-2) 0%,var(--green-deep) 100%);
  display:grid; place-items:center;
}
.split__panel::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(1.5px 1.5px at 20% 30%, rgba(231,210,162,.6), transparent),
    radial-gradient(1.2px 1.2px at 70% 22%, rgba(231,210,162,.5), transparent),
    radial-gradient(1.4px 1.4px at 55% 70%, rgba(231,210,162,.45), transparent),
    radial-gradient(1.1px 1.1px at 82% 78%, rgba(231,210,162,.4), transparent);
}
.split__panel span{ font-family:var(--display); font-size:clamp(2rem,1.4rem + 2.6vw,3.4rem); font-style:italic; color:var(--gold-light); text-align:center; padding:2rem; line-height:1.25; position:relative; z-index:1; max-width:18ch; }

/* Stat strip */
.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr)); gap:clamp(1.5rem,3vw,2.5rem); text-align:center; }
.stat__n{ font-family:var(--display); font-size:clamp(2.4rem,1.9rem + 2vw,3.5rem); line-height:1; color:var(--gold-light); }
.stat__l{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--text-on-dark-m); margin-top:.7rem; }

/* ---------------------------------------------------------
   Forms
   --------------------------------------------------------- */
.form{ display:grid; gap:1.25rem; }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; }
@media (max-width:640px){ .form__row{ grid-template-columns:1fr; } }
.form__note{ font-size:.82rem; color:var(--text-muted); }
.hp{ position:absolute; left:-9999px; }

/* ---------------------------------------------------------
   Footer
   --------------------------------------------------------- */
.site-footer{ background:var(--ink); color:var(--text-on-dark-m); padding-block:clamp(3.25rem,6vw,5rem) 2rem; }
.footer__grid{ display:grid; grid-template-columns:1.5fr repeat(4,1fr); gap:clamp(1.75rem,3vw,2.5rem); }
@media (max-width:1040px){ .footer__grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:760px){ .footer__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footer__grid{ grid-template-columns:1fr; } }
.site-footer h4{ color:var(--gold-light); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; margin:0 0 1.1rem; font-weight:500; }
.site-footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.site-footer a{ font-size:.92rem; }
.site-footer a:hover{ color:var(--gold-light); }
.footer__brand .brand__name{ color:var(--linen); font-size:1.75rem; }
.footer__brand p{ font-size:.94rem; margin-top:1rem; max-width:34ch; }
.footer__legal{
  margin-top:clamp(2.5rem,5vw,3.5rem); padding-top:1.75rem; border-top:1px solid var(--rule-dark);
  display:flex; flex-wrap:wrap; gap:.6rem 1.5rem; justify-content:space-between; align-items:center;
  font-size:.78rem;
}
.footer__legal ul{ display:flex; flex-wrap:wrap; gap:.5rem 1.25rem; }
.footer__parent{ font-size:.78rem; }
.footer__parent a{ color:var(--gold-light); border-bottom:1px solid rgba(231,210,162,.3); }

/* ---------------------------------------------------------
   Reveal on scroll
   --------------------------------------------------------- */
.reveal{ opacity:0; transform:translateY(14px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; } }

@media print{
  .site-header,.crisisbar,.site-footer,.finder,.btn{ display:none !important; }
  body{ background:#fff; color:#000; }
}

/* --- Team photos (optional; initials panel used when absent) --- */
.person__photo{ aspect-ratio:4/3; width:100%; object-fit:cover; }
.person--lead{ grid-column:span 2; }
@media (max-width:760px){ .person--lead{ grid-column:auto; } }


/* ---------------------------------------------------------
   Homepage green
   A slightly softer, cooler green than the one used on
   interior pages — the same family, one shade over.
   --------------------------------------------------------- */
body.page-home{
  --green:       #3A8477;
  --green-deep:  #245A50;
  --green-light: #E1EFEB;
}
body.page-home .split__panel{
  background:linear-gradient(150deg,#1E2550 0%,#245A50 60%,#3F8A7D 100%);
}

/* Green bands: eyebrow, thread and mark tuned for the darker ground */
.section--deep .eyebrow{ color:var(--gold-light); }
.section--deep .mark{ color:var(--gold-light); }
.section--deep .card{ background:rgba(251,248,242,.06); border-color:var(--rule-dark); }
.section--deep .card h3{ color:var(--linen); }
.section--deep .card p{ color:var(--text-on-dark-m); }

/* --- Placeholder counsellor profiles ------------------------------
   Visibly marked so an example is never mistaken for a real person.
   Delete both rules once every profile on the team is genuine.       */
.person--placeholder{ border-style:dashed; }
.tag--placeholder{
  background:var(--gold-wash); border-color:transparent;
  color:var(--gold-deep); font-weight:500;
}

/* =========================================================
   Credentials strip
   ========================================================= */
.creds{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));
  gap:clamp(1.25rem,2.5vw,2rem);
  border-block:1px solid var(--rule); padding-block:clamp(1.75rem,3vw,2.5rem);
}
.creds li{ display:grid; gap:.3rem; text-align:center; }
.creds__mark{ color:var(--gold-deep); font-size:.8rem; }
.creds strong{
  font-family:var(--display); font-size:1.2rem; font-weight:400;
  color:var(--ink); line-height:1.2;
}
.creds span:not(.creds__mark){ font-size:.8rem; color:var(--text-muted); line-height:1.45; }
.creds__note{ margin-top:1.5rem; font-size:.82rem; color:var(--text-muted); max-width:62ch; margin-inline:auto; }

/* =========================================================
   Newsletter
   ========================================================= */
.newsletter{
  display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center;
  margin-top:1.75rem;
}
.newsletter input[type="email"]{ flex:1 1 16rem; max-width:22rem; background:#fff; }
.newsletter .btn{ flex:0 0 auto; }
.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;
}

/* Split panel used the other way round on the home differentiator */
.split__panel[style*="order:0"]{ aspect-ratio:auto; min-height:22rem; width:100%; }

/* =========================================================
   Jane App booking — province chooser
   ========================================================= */
.jane-grid{
  display:grid; gap:.85rem;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr));
}
.jane{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  background:#fff; border:1px solid var(--rule); border-radius:var(--radius-lg);
  padding:1.1rem 1.35rem;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.jane:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:var(--gold); }
.jane__name{ font-family:var(--display); font-size:1.2rem; color:var(--ink); line-height:1.2; }
.jane__go{
  font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gold-deep); white-space:nowrap;
}
.jane:hover .jane__go{ color:var(--ink); }

/* =========================================================
   Sticky booking bar — small screens only
   ========================================================= */
.stickybar{ display:none; }
@media (max-width:1120px){
  .stickybar{
    display:flex; gap:.6rem; justify-content:center; align-items:center;
    position:sticky; bottom:0; z-index:90;
    padding:.7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom));
    background:rgba(251,248,242,.96);
    backdrop-filter:saturate(150%) blur(12px);
    border-top:1px solid var(--rule);
    box-shadow:0 -10px 30px -18px rgba(16,21,47,.4);
  }
  .stickybar .btn{ flex:1 1 auto; max-width:15rem; }
  .site-footer{ padding-bottom:1rem; }
}
@media print{ .stickybar{ display:none !important; } }

/* Second nav action, hidden where the bar gets tight */
@media (max-width:1320px){ .nav__cta-alt{ display:none; } }

/* =========================================================
   Cookie consent
   ========================================================= */
.consent{
  position:fixed; left:0; right:0; bottom:0; z-index:120;
  background:var(--ink); color:var(--text-on-dark-m);
  border-top:1px solid var(--rule-dark);
  box-shadow:0 -20px 50px -25px rgba(0,0,0,.7);
  transform:translateY(100%); transition:transform .32s var(--ease);
  padding-bottom:env(safe-area-inset-bottom);
}
.consent.is-in{ transform:none; }
.consent__inner{
  max-width:var(--wrap); margin-inline:auto;
  padding:1.15rem var(--gutter);
  display:flex; flex-wrap:wrap; align-items:center; gap:1rem 2rem;
  justify-content:space-between;
}
.consent__text{ flex:1 1 30rem; }
.consent__text p{ margin:0; font-size:.88rem; line-height:1.6; }
.consent__text strong{ color:var(--linen); font-weight:500; }
.consent__text a{ color:var(--gold-light); border-bottom:1px solid rgba(231,210,162,.35); }
.consent__actions{ display:flex; gap:.6rem; flex:0 0 auto; }
.consent__actions .btn--outline{ color:var(--linen); border-color:rgba(239,234,224,.42); }
.consent__actions .btn--outline:hover{ background:var(--linen); color:var(--ink); }
@media (max-width:1120px){
  .consent{ bottom:0; }
  .consent__actions{ width:100%; }
  .consent__actions .btn{ flex:1 1 auto; }
  .stickybar{ bottom:0; }
}

/* Buttons that need to read as links */
.linklike, .footer__cookie{
  background:none; border:0; padding:0; cursor:pointer;
  font:inherit; color:var(--gold-deep);
  border-bottom:1px solid var(--gold-wash);
}
.linklike:hover{ border-bottom-color:var(--gold-deep); }
.footer__cookie{ color:inherit; font-size:.78rem; border-bottom-color:transparent; }
.footer__cookie:hover{ color:var(--gold-light); }

/* Grouping label inside a dropdown */
@media (min-width:1121px){ .submenu--wide{ min-width:17.5rem; } }
.submenu__head{
  font-size:.66rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--text-muted); padding:.85rem .75rem .35rem;
  border-top:1px solid var(--rule); margin-top:.35rem;
}
@media (max-width:1120px){
  .submenu__head{ padding-left:.25rem; border-top:0; }
}
/* Country tiles sitting on the dark band */
.section--deep .jane{
  background:rgba(251,248,242,.07); border-color:var(--rule-dark);
}
.section--deep .jane:hover{ background:rgba(251,248,242,.12); border-color:var(--gold); }
.section--deep .jane__name{ color:var(--linen); }
.section--deep .jane__go{ color:var(--gold-light); }
.section--deep .jane:hover .jane__go{ color:var(--linen); }
/* Hero meta link */
.hero__meta a{ color:inherit; border-bottom:1px solid rgba(231,210,162,.4); padding-bottom:.1rem; }
.hero__meta a:hover{ color:var(--gold-light); border-bottom-color:var(--gold-light); }

/* Dense tile grid for long lists of states and countries */
.jane-grid--dense{ grid-template-columns:repeat(auto-fill,minmax(min(100%,12.5rem),1fr)); gap:.6rem; }
.jane--sm{ padding:.8rem 1rem; }
.jane--sm .jane__name{ font-size:1.02rem; }
.jane--sm .jane__go{ font-size:.85rem; letter-spacing:0; }

/* Long lists of states and countries: two columns on phones, so 51 items
   is a glance rather than a scroll. The arrow goes to make room for names. */
@media (max-width:620px){
  .jane-grid--dense{ grid-template-columns:repeat(2,1fr); gap:.5rem; }
  .jane--sm{ padding:.7rem .75rem; }
  .jane--sm .jane__name{ font-size:.9rem; line-height:1.25; }
  .jane--sm .jane__go{ display:none; }
}
@media (max-width:360px){
  .jane-grid--dense{ grid-template-columns:1fr; }
  .jane--sm .jane__go{ display:inline; }
}