/* =========================================================================
   Mind Matters Global — shared design system
   -------------------------------------------------------------------------
   One type pairing (Fraunces / Inter), one icon family (assets/icons.svg),
   one spacing scale. Sections are meant to be composed from the layout
   variants below rather than repeating a single centred card grid.
   ========================================================================= */

/* ---------------------------------------------------------------- tokens */
:root{
  /* ink */
  --ink:#242c18;            /* headings */
  --ink-2:#4b5340;          /* body copy */
  --ink-3:#7d8372;          /* meta, captions */

  /* brand greens */
  --sage:#6f7b5c;
  --sage-deep:#4c5638;
  --sage-dark:#3a4229;
  --sage-soft:#e6ebdc;
  --sage-line:#cfd8c0;

  /* brand violet */
  --iris:#7d719f;
  --iris-deep:#5f5581;
  --iris-soft:#ebe6f5;
  --iris-line:#d9d1ec;

  /* warm accent, reserved for crisis + urgency */
  --clay:#b06a4a;
  --clay-deep:#8f5236;
  --clay-soft:#f7ebe2;
  --clay-line:#e6cdb9;

  /* surfaces */
  --paper:#ffffff;
  --page:#faf7f1;           /* warm off-white — the default page ground */
  --shell:#f3efe6;          /* sand band */
  --mist:#efebf6;           /* lavender band */
  --line:#e6e0d4;
  --line-soft:#efeade;

  /* type scale — fluid, with a clear step between every level */
  --t-display:clamp(2.6rem, 1.6rem + 4.4vw, 5rem);
  --t-h1:clamp(2.1rem, 1.5rem + 2.6vw, 3.4rem);
  --t-h2:clamp(1.65rem, 1.35rem + 1.4vw, 2.35rem);
  --t-h3:clamp(1.15rem, 1.06rem + .42vw, 1.4rem);
  --t-h4:1.02rem;
  --t-lead:clamp(1.06rem, 1rem + .34vw, 1.24rem);
  --t-body:1rem;
  --t-small:.9rem;
  --t-micro:.78rem;

  /* spacing scale */
  --s-1:.375rem; --s-2:.625rem; --s-3:1rem;  --s-4:1.5rem;
  --s-5:2rem;    --s-6:3rem;    --s-7:4.5rem; --s-8:6.5rem; --s-9:9rem;

  /* section rhythm — deliberately larger than the inline scale. Sections are
     the joints of the page, so the gap between two of them should read as a
     pause, not as another paragraph break. */
  --bay:clamp(4.25rem, 7.5vw, 8rem);
  --bay-lg:clamp(5.5rem, 10vw, 11rem);
  --bay-sm:clamp(3rem, 5vw, 5rem);

  /* measure */
  --measure:64ch;
  --measure-tight:52ch;

  --radius:20px;
  --radius-sm:12px;
  --radius-xs:8px;

  --shadow-sm:0 1px 2px rgba(58,66,41,.05), 0 10px 24px -18px rgba(58,66,41,.28);
  --shadow:0 1px 2px rgba(58,66,41,.05), 0 26px 50px -34px rgba(58,66,41,.38);

  --maxw:1160px;
  --maxw-text:800px;
  --nav-h:76px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
html,body{margin:0;padding:0;}
body{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:var(--t-body);
  line-height:1.65;
  color:var(--ink-2);
  background:var(--page);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  min-height:100vh;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;}
img{display:block;height:auto;}

/* ------------------------------------------------------------ typography */
h1,h2,h3,h4,h5{
  font-family:'Fraunces','Iowan Old Style',Georgia,serif;
  font-variation-settings:'SOFT' 20,'WONK' 0;
  color:var(--ink);
  font-weight:600;
  line-height:1.12;
  letter-spacing:-.015em;
  margin:0 0 var(--s-3);
  text-wrap:balance;
}
h1{font-size:var(--t-h1);}
h2{font-size:var(--t-h2);}
h3{font-size:var(--t-h3);line-height:1.25;letter-spacing:-.008em;}
h4{font-size:var(--t-h4);line-height:1.35;letter-spacing:0;}
p{margin:0 0 var(--s-3);max-width:var(--measure);}
strong,b{color:var(--ink);font-weight:650;}

.display{
  font-family:'Fraunces','Iowan Old Style',Georgia,serif;
  font-size:var(--t-display);
  font-weight:600;
  line-height:.99;
  letter-spacing:-.03em;
  color:var(--ink);
  margin:0 0 var(--s-4);
  text-wrap:balance;
}
.display em{font-style:italic;font-variation-settings:'SOFT' 60,'WONK' 1;color:var(--sage-deep);}

/* Larger type needs a shorter line to stay readable, so the lead measure is
   set in its own characters rather than inheriting the body measure. */
.lead{
  font-size:var(--t-lead);
  line-height:1.6;
  color:var(--ink-2);
  max-width:54ch;
}
.muted{color:var(--ink-3);font-size:var(--t-small);}
.small{font-size:var(--t-small);}
.tight{max-width:var(--measure-tight);}

/* The section marker: a hairline drawn right across the column, with the
   section number at the left and, where it helps, a word at the right. One
   label component for the whole site — a second one only invites drift. A
   hairline the width of the column separates two ideas better than a box
   around either of them, and gives the page a spine to follow down the
   scroll. */
.railhead{
  display:flex;align-items:baseline;gap:var(--s-3);
  /* It is a <p>, so it would otherwise inherit the 64ch body measure and stop
     short of the column it heads — at small type that lands ~380px in from the
     right edge, which reads as a broken rule rather than a spine. */
  max-width:none;
  padding-bottom:var(--s-3);margin-bottom:var(--s-6);
  border-bottom:1px solid var(--line);
  font-size:var(--t-micro);font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--sage-deep);
}
.railhead__n{font-family:'Fraunces',Georgia,serif;font-weight:600;color:var(--ink-3);letter-spacing:.14em;}
.railhead__end{margin-left:auto;color:var(--ink-3);font-weight:600;letter-spacing:.14em;
               text-align:right;}
.band-sage .railhead{border-bottom-color:rgba(255,255,255,.2);color:#c3cdad;}
.band-sage .railhead__n,.band-sage .railhead__end{color:#9aa585;}
/* On a phone there is no room for both ends of the rule; the label wins. */
@media(max-width:560px){
  .railhead{margin-bottom:var(--s-5);}
  .railhead__end{display:none;}
}

.eyebrow{
  display:inline-flex;align-items:center;gap:.5em;
  font-size:var(--t-micro);font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sage-deep);
  margin:0 0 var(--s-3);
}
.eyebrow .ico{width:16px;height:16px;}
.eyebrow--pill{
  background:var(--sage-soft);border-radius:99px;padding:.45em 1em;letter-spacing:.12em;
}
.eyebrow--iris{color:var(--iris-deep);}
.eyebrow--iris.eyebrow--pill{background:var(--iris-soft);}

a{color:var(--sage-deep);text-underline-offset:.22em;text-decoration-thickness:1px;
  text-decoration-color:color-mix(in srgb,var(--sage-deep) 35%,transparent);}
a:hover{text-decoration-color:currentColor;}

/* ------------------------------------------------------------------ icons */
.ico{width:1.25em;height:1.25em;flex:none;display:inline-block;vertical-align:-.22em;
     fill:none;stroke:currentColor;}
.ico-badge{
  width:52px;height:52px;flex:none;border-radius:15px;
  display:grid;place-items:center;
  background:var(--sage-soft);color:var(--sage-deep);
}
.ico-badge .ico{width:26px;height:26px;}
.ico-badge--iris{background:var(--iris-soft);color:var(--iris-deep);}
.ico-badge--clay{background:var(--clay-soft);color:var(--clay-deep);}
.ico-badge--sm{width:40px;height:40px;border-radius:12px;}
.ico-badge--sm .ico{width:21px;height:21px;}

/* --------------------------------------------------------------- layout */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(1.25rem,4vw,2.5rem);}
.wrap-text{width:100%;max-width:var(--maxw-text);margin-inline:auto;padding-inline:clamp(1.25rem,4vw,2.5rem);}

.section{padding-block:var(--bay);}
.section-sm{padding-block:var(--bay-sm);}
.section-lg{padding-block:var(--bay-lg);}

/* colour bands — used sparingly to break the page into chapters */
.band-sand{background:var(--shell);}
.band-mist{background:var(--mist);}
.band-sage{background:var(--sage-dark);color:#dfe4d4;}
.band-sage h1,.band-sage h2,.band-sage h3,.band-sage h4,.band-sage strong{color:#fbfaf6;}
.band-sage p{color:#cdd4bf;}
.band-sage a{color:#e8ecdd;}
.band-sage .eyebrow{color:#b9c3a5;}

/* a soft rule built from the four-circle mark in the logo */
.clover-rule{display:flex;gap:7px;align-items:center;justify-content:center;padding-block:var(--s-5);}
.clover-rule span{width:7px;height:7px;border-radius:50%;background:var(--sage-line);}
.clover-rule span:nth-child(2){background:var(--iris-line);}
.clover-rule span:nth-child(3){background:var(--sage-line);}

/* --- split: a sticky/left title column beside a wider content column --- */
.split{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(2rem,5vw,5rem);align-items:start;}
.split--even{grid-template-columns:repeat(2,minmax(0,1fr));}
.split--wide-left{grid-template-columns:minmax(0,7fr) minmax(0,5fr);}
.split__aside{position:sticky;top:calc(var(--nav-h) + 1.5rem);}
@media(max-width:860px){
  .split,.split--even,.split--wide-left{grid-template-columns:1fr;gap:var(--s-4);}
  .split__aside{position:static;}
}

/* --- section-head: a big heading on the left, a short lead on the right ---
   The heading gets the width it needs to stay large; the lead sits in a narrow
   column beside it and stops at a comfortable measure. Nothing is centred. */
.section-head{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(1.5rem,4vw,4rem);align-items:end;
  margin-bottom:clamp(2.5rem,5vw,4.5rem);
}
.section-head > :last-child{margin-bottom:0;}
.section-head h2,.section-head .display{margin-bottom:0;}
.section-head p{margin:0;max-width:46ch;}
.section-head--top{align-items:start;}
@media(max-width:820px){
  .section-head{grid-template-columns:1fr;gap:var(--s-4);align-items:start;}
}

/* --- meta-bar: an outlined strip of facts, divided by slashes. Reads as a
   stamp on the page rather than another row of badges. --- */
.meta-bar{
  display:inline-flex;flex-wrap:wrap;align-items:center;
  border:1px solid var(--line);border-radius:99px;
  padding:.55rem 1.15rem;margin:0;
  font-size:var(--t-micro);font-weight:650;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);background:color-mix(in srgb,var(--paper) 65%,transparent);
}
.meta-bar > span{display:inline-flex;align-items:center;gap:.45em;padding:.2rem 0;}
/* The slash trails the item it follows rather than leading the next one. When
   the strip wraps, a line then ends on a slash instead of starting with one,
   which is how a run-on list is set in print. */
.meta-bar > span:not(:last-child)::after{
  content:"/";margin:0 .8em 0 .95em;color:var(--line);font-weight:400;letter-spacing:0;
}
.meta-bar .ico{width:14px;height:14px;color:var(--sage);}
/* Once the strip is stacked there is nothing to divide, so the slashes go. */
@media(max-width:560px){
  .meta-bar{display:flex;flex-direction:column;align-items:flex-start;
            border-radius:var(--radius-sm);padding:.8rem 1.1rem;line-height:1.5;}
  .meta-bar > span:not(:last-child)::after{content:none;}
}

/* --- figures: large serif numbers side by side, split by hairlines --- */
.figures{display:flex;flex-wrap:wrap;gap:0;margin:0;padding:0;list-style:none;}
.figures > li{padding:0 clamp(1.25rem,3vw,2.5rem);border-left:1px solid var(--line);}
.figures > li:first-child{padding-left:0;border-left:0;}
.figures b{
  display:block;font-family:'Fraunces',Georgia,serif;font-weight:600;
  font-size:clamp(1.9rem,3.4vw,2.7rem);line-height:1;letter-spacing:-.02em;color:var(--ink);
}
.figures span{display:block;margin-top:.55rem;font-size:var(--t-micro);
              letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);}
@media(max-width:560px){
  .figures > li{flex:1 1 45%;padding:0 0 0 var(--s-4);margin-bottom:var(--s-4);}
  .figures > li:nth-child(odd){padding-left:0;border-left:0;}
}

/* --- roadline: the dotted path from the logo mark, laid flat as a route
   through the site. Ruler ticks give it a measured, made-for-this feel. --- */
.roadline{
  --road-gap:clamp(1rem,2.5vw,2rem);
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--road-gap);
}
.roadline > li{position:relative;padding-top:4.6rem;}
/* the ruler: a repeating tick that runs on through the gap to the next stop */
.roadline > li::before{
  content:"";position:absolute;left:0;right:calc(-1 * var(--road-gap));top:2.6rem;height:9px;
  background:repeating-linear-gradient(to right,var(--line) 0 1px,transparent 1px 9px);
}
.roadline > li:last-child::before{right:auto;width:9px;}
.roadline__dot{
  position:absolute;left:0;top:2.55rem;width:11px;height:11px;border-radius:50%;
  background:var(--sage-deep);box-shadow:0 0 0 4px var(--page);
}
.roadline__n{
  position:absolute;left:0;top:0;line-height:1;
  font-size:var(--t-micro);font-weight:700;letter-spacing:.18em;color:var(--ink-3);
}
.roadline h4{margin:0 0 .4em;}
.roadline p{margin:0;font-size:.92rem;color:var(--ink-2);max-width:30ch;}
.band-sand .roadline__dot{box-shadow:0 0 0 4px var(--shell);}
.band-mist .roadline__dot{box-shadow:0 0 0 4px var(--mist);}
@media(max-width:860px){
  .roadline{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--s-6);}
  .roadline > li:nth-child(2n)::before{right:auto;width:9px;}
}
@media(max-width:540px){
  /* on a phone the route runs down the page instead of across it */
  .roadline{grid-template-columns:1fr;row-gap:0;}
  .roadline > li{padding:0 0 var(--s-5) var(--s-5);}
  .roadline > li::before,
  .roadline > li:nth-child(2n)::before{
    left:5px;right:auto;top:.4rem;bottom:0;height:auto;width:9px;
    background:repeating-linear-gradient(to bottom,var(--line) 0 1px,transparent 1px 9px);
  }
  .roadline > li:last-child::before{bottom:auto;height:9px;}
  .roadline__dot{top:.35rem;}
  .roadline__n{position:static;display:block;margin-bottom:.5em;}
  .roadline p{max-width:none;}
}

/* --- bigline: one oversized line, used once a page at most. Named for the
   shape, not the content — the check-in already owns .statement. --- */
.bigline{
  font-family:'Fraunces','Iowan Old Style',Georgia,serif;
  font-size:clamp(1.75rem,1rem + 3.1vw, 3.35rem);
  font-weight:400;line-height:1.14;letter-spacing:-.022em;
  color:var(--ink);max-width:22ch;margin:0;text-wrap:balance;
}
.bigline em{font-style:italic;font-variation-settings:'SOFT' 60,'WONK' 1;color:var(--sage-deep);}
.band-sage .bigline{color:#fbfaf6;}
.band-sage .bigline em{color:#cbd6b0;}

/* --- flow: plain stacked prose with generous rhythm --- */
.flow > * + *{margin-top:var(--s-3);}
.flow > * + h2,.flow > * + h3{margin-top:var(--s-5);}

/* --- grids --- */
.grid{display:grid;gap:clamp(1rem,2.2vw,1.6rem);}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr));}
@media(max-width:900px){.grid-3,.grid-4{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:600px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}}

.stack{display:flex;flex-direction:column;gap:var(--s-3);}
.row{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center;}

/* ------------------------------------------------------------------- nav */
.topbar{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb,var(--page) 88%,transparent);
  backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid var(--line);
}
.nav{max-width:var(--maxw);margin-inline:auto;padding:.85rem clamp(1.25rem,4vw,2.5rem);
     display:flex;align-items:center;gap:var(--s-4);min-height:var(--nav-h);}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;}
.brand .logo{width:40px;height:40px;flex:none;}
.brand-name{
  font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:1.06rem;
  line-height:1.05;color:var(--ink);letter-spacing:-.01em;
}
.brand-name small{
  display:block;font-family:'Inter',sans-serif;font-size:.62rem;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:var(--sage-deep);margin-top:.28em;
}
.nav-links{display:flex;align-items:center;gap:.15rem;margin-left:auto;}
.nav-links a{
  font-size:.9rem;font-weight:550;color:var(--ink-2);text-decoration:none;
  padding:.55rem .85rem;border-radius:99px;transition:background .15s,color .15s;
  white-space:nowrap;
}
.nav-links a:hover{background:var(--shell);color:var(--ink);}
.nav-links a.active{background:var(--sage-deep);color:#fff;}
.nav-toggle{
  display:none;margin-left:auto;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:12px;border:1px solid var(--line);
  background:var(--paper);color:var(--ink);cursor:pointer;
}
.nav-toggle .ico{width:22px;height:22px;}
@media(max-width:820px){
  .nav{flex-wrap:wrap;gap:var(--s-2);min-height:0;}
  .nav-toggle{display:inline-flex;}
  .nav-links{
    width:100%;margin-left:0;flex-direction:column;align-items:stretch;gap:2px;
    padding:.35rem 0 .6rem;display:none;
  }
  .nav-links.open{display:flex;}
  .nav-links a{padding:.8rem .9rem;border-radius:10px;font-size:1rem;}
}

/* --------------------------------------------------------------- buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-family:inherit;font-size:.95rem;font-weight:600;line-height:1.2;
  padding:.9rem 1.5rem;border-radius:99px;border:1.5px solid transparent;
  min-height:48px;cursor:pointer;text-decoration:none;
  transition:transform .13s ease,background .16s,box-shadow .16s,border-color .16s,color .16s;
}
.btn .ico{width:1.15em;height:1.15em;}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:translateY(0);}
.btn:focus-visible{outline:2px solid var(--iris);outline-offset:3px;}
.btn-primary{background:var(--sage-deep);color:#fff;box-shadow:0 12px 26px -18px rgba(58,66,41,.9);}
.btn-primary:hover{background:var(--sage-dark);}
.btn-ghost{background:transparent;border-color:var(--sage-line);color:var(--sage-deep);}
.btn-ghost:hover{background:var(--sage-soft);border-color:var(--sage);}
.btn-light{background:var(--paper);border-color:var(--line);color:var(--ink);}
.btn-light:hover{background:var(--shell);}
.btn-clay{background:var(--clay-deep);color:#fff;}
.btn-sm{padding:.6rem 1.1rem;min-height:40px;font-size:.86rem;}
.btn-block{width:100%;}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none;}

.textlink{
  display:inline-flex;align-items:center;gap:.45em;font-weight:600;font-size:.92rem;
  color:var(--sage-deep);text-decoration:none;
}
.textlink .ico{width:1.05em;height:1.05em;transition:transform .16s;}
.textlink:hover .ico{transform:translateX(3px);}
/* A text link that stands on its own line is a real call to action, so on a
   phone it gets a thumb-sized target. Links inside a sentence are left alone —
   padding there would break the line. */
@media(max-width:820px){
  a.textlink{min-height:44px;}
}

/* ----------------------------------------------------------------- cards */
.card{
  background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--radius);
  padding:clamp(1.4rem,2.6vw,2rem);box-shadow:var(--shadow-sm);
}
.card--flat{box-shadow:none;background:transparent;border-color:var(--line);}
.card > :last-child{margin-bottom:0;}

/* an action card, used for the two primary tools */
.action-card{
  display:flex;flex-direction:column;gap:var(--s-3);
  background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--radius);
  padding:clamp(1.5rem,3vw,2.25rem);box-shadow:var(--shadow-sm);
  text-decoration:none;color:inherit;position:relative;overflow:hidden;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s;
}
.action-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--sage-line);}
.action-card h3{margin:0;}
.action-card p{margin:0;font-size:.95rem;color:var(--ink-2);max-width:46ch;}
.action-card .textlink{margin-top:auto;padding-top:var(--s-2);}
.action-card__num{
  position:absolute;top:1rem;right:1.4rem;
  font-family:'Fraunces',Georgia,serif;font-size:3.4rem;line-height:1;
  color:var(--sage-soft);pointer-events:none;
}

/* a quiet feature row: icon + text, no box */
.feature{display:flex;gap:var(--s-3);align-items:flex-start;}
.feature h4{margin:0 0 .3em;}
.feature p{margin:0;font-size:.93rem;color:var(--ink-2);max-width:44ch;}

/* stats */
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--s-5);}
.stat{border-top:2px solid var(--sage-line);padding-top:var(--s-3);}
.stat__n{font-family:'Fraunces',Georgia,serif;font-size:clamp(2.1rem,4vw,3rem);
         line-height:1;color:var(--ink);font-weight:600;letter-spacing:-.02em;display:block;}
.stat__l{margin:.6rem 0 0;font-size:.9rem;color:var(--ink-2);max-width:30ch;}
.band-sage .stat{border-top-color:rgba(255,255,255,.28);}
.band-sage .stat__n{color:#fbfaf6;}

/* pull quote */
.pullquote{
  border-left:3px solid var(--iris);padding-left:clamp(1rem,3vw,2rem);
  max-width:34ch;
}
.pullquote p{
  font-family:'Fraunces',Georgia,serif;font-style:italic;font-size:clamp(1.2rem,2.2vw,1.6rem);
  line-height:1.4;color:var(--ink);margin:0 0 var(--s-2);
}
.pullquote cite{font-style:normal;font-size:.85rem;color:var(--ink-3);letter-spacing:.02em;}

/* notice / callout */
.callout{
  border-radius:var(--radius-sm);padding:var(--s-4);
  display:flex;gap:var(--s-3);align-items:flex-start;
  background:var(--iris-soft);border:1px solid var(--iris-line);
}
.callout p{margin:0;font-size:.94rem;}
.callout p + p{margin-top:.5rem;}
.callout .ico{width:22px;height:22px;color:var(--iris-deep);margin-top:.15rem;}
.callout--sand{background:var(--shell);border-color:var(--line);}
.callout--sand .ico{color:var(--sage-deep);}

/* crisis banner — the one place the warm accent is used */
.crisis-banner{
  background:var(--clay-soft);border:1px solid var(--clay-line);border-radius:var(--radius);
  padding:clamp(1.25rem,2.5vw,1.75rem);
  display:flex;gap:var(--s-3);align-items:flex-start;
}
.crisis-banner .ico-badge{background:#fff;color:var(--clay-deep);}
.crisis-banner h3{color:var(--clay-deep);margin:0 0 .35rem;font-size:1.1rem;}
.crisis-banner p{margin:0;font-size:.95rem;max-width:70ch;}
.crisis-banner a{color:var(--clay-deep);font-weight:650;}

/* --------------------------------------------------------------- footer */
.site-foot{background:var(--shell);border-top:1px solid var(--line);padding-block:var(--s-6);margin-top:auto;}
/* Brand block on the left, the one link column pinned to the right edge. */
.site-foot .foot-grid{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:var(--s-5);align-items:start;
}
.site-foot p{font-size:.9rem;color:var(--ink-3);max-width:38ch;}
.foot-col h4{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
             color:var(--ink-3);font-family:'Inter',sans-serif;font-weight:700;margin:0 0 var(--s-2);}
.foot-col a{display:block;font-size:.92rem;color:var(--ink-2);text-decoration:none;padding:.28rem 0;}
.foot-col a:hover{color:var(--ink);text-decoration:underline;}
.foot-base{
  margin-top:var(--s-5);padding-top:var(--s-4);border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:var(--s-3);justify-content:space-between;align-items:center;
  font-size:.82rem;color:var(--ink-3);
}
@media(max-width:700px){
  .site-foot .foot-grid{grid-template-columns:1fr;gap:var(--s-4);}
  .foot-col a{padding:.6rem 0;}          /* comfortable to tap on a phone */
}

/* inline crisis numbers get a little more to aim at without breaking the line */
.crisis-banner a[href^="tel"],.crisis-banner a[href^="sms"],
.crisisline a[href^="tel"],.crisisline a[href^="sms"]{
  display:inline-block;padding:.15em .4em;margin:0 -.15em;border-radius:6px;
  background:rgba(255,255,255,.7);text-decoration:none;font-weight:700;
}
/* stacked call-to-action rows go full width on a phone, so every action is
   the same easy-to-hit size */
@media(max-width:560px){
  .hero__cta .btn,.tk-actions .btn,.result-actions .btn,.split .btn{width:100%;}
  .ck-nav{gap:.6rem;}
  .ck-nav .btn{flex:1 1 auto;}
}

/* --------------------------------------------------------------- motion */
.rise{animation:rise .55s cubic-bezier(.2,.7,.2,1) both;}
@keyframes rise{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1);}
.reveal.in{opacity:1;transform:none;}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important;}
  .reveal{opacity:1;transform:none;}
}

/* ------------------------------------------------------------ utilities */
.hidden{display:none!important;}
.visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip-to{
  position:absolute;left:-9999px;top:0;z-index:100;background:var(--sage-deep);color:#fff;
  padding:.75rem 1.25rem;border-radius:0 0 10px 0;font-weight:600;
}
.skip-to:focus{left:0;}
.mt-0{margin-top:0;} .mb-0{margin-bottom:0;}
.mt-4{margin-top:var(--s-4);} .mt-5{margin-top:var(--s-5);} .mt-6{margin-top:var(--s-6);}