/* Katakata site-wide refinements (Nov 2026).
   Loaded last on every page. Same colours, same font, same content:
   only readability, spacing, alignment and consistency. */

/* ---------- Readability: no tiny text ---------- */
.eyebrow{font-size:.875rem;letter-spacing:.12em;line-height:1.5}
.who{font-size:.875rem}
.st,.tag{font-size:.84rem;padding:.25rem .75rem}
.price-note,.src,.hint,.privacy{font-size:.95rem}
figcaption{font-size:.95rem}
dt,th{font-size:.9rem}
.req,.sig-tag,.cu-d{font-size:.875rem}
.muted{color:#3f4459}
.bg-blue .muted{color:rgba(255,255,255,.88)}
.pill,.opt{font-size:.95rem}
@media (max-width:480px){.pill{font-size:.9rem;padding:.5rem .85rem}}
p,li{text-wrap:pretty}
h1,h2,h3{text-wrap:balance}

/* ---------- Buttons: one consistent style ---------- */
.btn{font-size:1.02rem;letter-spacing:.005em}
.btn.ghost-dark{border-width:2px}
.btn.ghost{border-width:2px;border-color:#fff}
@media (max-width:480px){
  .actions{flex-direction:column;align-items:stretch;gap:.75rem}
  .actions .btn{justify-content:center;width:100%}
}

/* ---------- Section rhythm ---------- */
section{padding:clamp(3.75rem,8vw,6.5rem) 0}
.head{margin-bottom:clamp(2rem,4vw,3rem)}
.head h2{margin-bottom:0}

/* ---------- Cards ---------- */
.card{border-radius:var(--r);box-shadow:0 1px 0 var(--line),0 16px 36px -28px rgba(16,20,42,.45)}
.card h3{line-height:1.2}

/* ---------- Testimonials and quotes (all pages) ---------- */
blockquote p{line-height:1.5}

/* ---------- Partner logos (all pages) ---------- */
.logos{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem}
.logos li{flex:0 1 calc(20% - .8rem);min-width:150px;min-height:128px;padding:1.2rem 1.4rem;border-color:rgba(16,20,42,.1)}
.logos img{max-height:58px;max-width:88%;object-fit:contain}
.logos img.logo-tall{max-height:86px}
@media (max-width:560px){.logos li{flex:1 1 calc(50% - .5rem);min-width:0;max-width:calc(50% - .5rem);min-height:112px}}

/* ---------- Footer: deeper royal blue so it reads as its own band ---------- */
footer.site{background:var(--blue-ink)}
footer.site h2{font-size:.95rem}
footer.site p,footer.site li{font-size:1rem}
footer.site .base{font-size:.95rem;color:rgba(255,255,255,.85)}
footer.site a{text-underline-offset:.22em}
html.contrast footer.site{background:#000}

/* ---------- Keyboard focus visible on every background ---------- */
.bg-blue :focus-visible,.hero :focus-visible,header.site :focus-visible,footer.site :focus-visible{outline-color:#fff;box-shadow:0 0 0 6px var(--ink)}

/* =========================================================
   HOMEPAGE
   ========================================================= */

/* Opening */
.hero .lede{line-height:1.65}
@media (min-width:861px){.hero .actions{gap:1rem}}

/* Find what you need */
.routes5 .tile{padding:1.75rem 1.6rem;border:1px solid rgba(16,20,42,.06)}
.routes5 .tile h3{font-size:1.3rem;line-height:1.2}
.routes5 .tile .num{text-transform:uppercase;letter-spacing:.1em;font-size:.84rem;font-family:"Atkinson Hyperlegible",sans-serif;font-weight:700}
.routes5 .tile:focus-visible{outline-offset:3px}

/* BSL welcome: a featured block */
.bsl-welcome{padding:clamp(3.75rem,8vw,6.5rem) 0}
.bsl-grid{grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:clamp(2rem,6vw,5rem)}
.bsl-welcome .yt{max-width:380px;border:5px solid var(--yellow);box-shadow:0 30px 60px -32px rgba(16,20,42,.55)}
.bsl-text h2{font-size:clamp(2rem,4vw,3rem);line-height:1.08}
.bsl-text p{font-size:1.08rem}
.bsl-text #bsl-note{font-size:1rem;border-left:4px solid var(--blue);padding:.2rem 0 .2rem 1rem;margin-top:1.25rem}
@media (max-width:760px){.bsl-grid{grid-template-columns:1fr}.bsl-welcome .yt{max-width:320px}}

/* What grows here: impact dashboard */
.dash{display:grid;gap:clamp(1.75rem,3vw,2.5rem)}
.dash-group{margin:0}
.dash-label{display:flex;align-items:center;gap:.75rem;font-family:"Atkinson Hyperlegible",sans-serif;font-size:.95rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);margin:0 0 1rem}
.dash-label::after{content:"";flex:1;height:2px;background:rgba(16,20,42,.18)}
.dash-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
@media (max-width:1000px){.dash-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:360px){.dash-grid{grid-template-columns:1fr}}
.kpi{background:#fff;color:var(--ink);border-radius:20px;padding:1.5rem 1.4rem 1.3rem;display:flex;flex-direction:column;min-width:0;box-shadow:0 1px 0 rgba(16,20,42,.06),0 14px 30px -20px rgba(16,20,42,.45)}
.kpi p{margin:0;max-width:none}
.kpi-num{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:clamp(2.6rem,4.4vw,3.4rem);line-height:1;letter-spacing:-.04em;color:var(--blue)}
.kpi-bar{height:8px;border-radius:999px;background:var(--cream);margin:1rem 0 1rem;overflow:hidden}
.kpi-bar span{display:block;height:100%;border-radius:inherit;background:var(--blue)}
.kpi-what{font-weight:700;font-size:1.06rem;line-height:1.35;margin-bottom:1rem!important}
.kpi-who{margin-top:auto!important;padding-top:.8rem;border-top:1px solid rgba(16,20,42,.15);font-size:.95rem;line-height:1.45;color:#2b3045}
.kpi-feature{background:var(--blue-ink);color:#fff;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:.5rem clamp(1.5rem,4vw,3rem);padding:clamp(1.5rem,3vw,2.2rem) clamp(1.5rem,3vw,2.5rem)}
.kpi-feature .kpi-num{color:#fff;font-size:clamp(3.2rem,6vw,4.6rem)}
.kpi-feature .kpi-what{font-size:clamp(1.2rem,2vw,1.45rem);margin-bottom:.4rem!important}
.kpi-feature .kpi-who{border:0;padding:0;color:#fff;font-size:1rem}
.kpi-feature .kpi-bar{grid-column:1/-1;background:rgba(255,255,255,.22);margin:.6rem 0 0}
.kpi-feature .kpi-bar span{background:var(--yellow)}
@media (max-width:560px){.kpi-feature{grid-template-columns:1fr}.kpi-feature .kpi-bar{margin-top:.2rem}}
.dash-more{margin-top:clamp(2rem,4vw,2.75rem)!important}
html.contrast .kpi{border:2px solid #000}
html.contrast .kpi-feature{background:#000}
html.contrast .kpi-bar span{background:#000}
html.contrast .kpi-feature .kpi-bar span{background:#ffe500}

/* Stories */
.voices{gap:1.25rem}
.stat small{font-size:.9rem;color:rgba(255,255,255,.85)}