/* Kichwa Connect — replacement visual world, 2026-09-05.
   Verified brand greens carried over from the live site; everything else new.
   It replaced the "Matatu Livery" world entirely; main.css is retired and the
   old pages are kept in backup/_pre-redesign/. */
:root{
  --ink:#0C1512; --ink-soft:#495B53; --ink-faint:#5A6B63;
  --paper:#FFFFFF; --paper-2:#F4F7F5; --paper-3:#E9EFEB;
  --brand:#117F4A; --brand-bright:#3BA86E; --brand-deep:#0B5F36; --brand-wash:#E8F4ED;
  --night:#08120D; --night-2:#0F1F17; --night-3:#17301F;
  --warning:#a82a1a; --warning-wash:#FBECEA;
  --flag-red:#BB0000; /* seasonal stripe only, never a component colour */
  --line:#DCE5E0; --line-night:rgba(235,246,240,.14);
  /* text tints for the night ground, promoted from scattered literals */
  --on-night:#B9CBC2; --on-night-strong:#CFE0D7; --on-night-accent:#9FD8BA;
  --on-night-soft:#8FA79C; --on-night-faint:#7F958B; --on-brand:#F0F9F4;
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-pill:99px;
  --sh-1:0 1px 2px rgba(12,21,18,.06), 0 2px 8px rgba(12,21,18,.05);
  --sh-2:0 2px 4px rgba(12,21,18,.06), 0 10px 24px rgba(12,21,18,.09);
  --sh-3:0 12px 40px rgba(8,18,13,.28);
  --font:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-cond:"Barlow Condensed","Barlow",sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --wrap:1180px;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--paper);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font);font-weight:800;line-height:1.12;letter-spacing:-.02em;margin:0}
h1{font-size:clamp(2.2rem,4.6vw,3.5rem)}
h2{font-size:clamp(1.7rem,3.2vw,2.4rem)}
h3{font-size:1.15rem;letter-spacing:-.01em}
p{margin:0}
img{max-width:100%;display:block}
a{color:inherit}
ul{margin:0;padding:0;list-style:none}
::selection{background:var(--brand-bright);color:var(--night)}
html{caret-color:var(--brand)}
:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:4px}
.night :focus-visible,.hero :focus-visible,.cta-band :focus-visible,.site-foot :focus-visible{outline-color:var(--brand-bright)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
/* On a wide monitor a 1180px column leaves more than half the screen empty,
   which reads as the page failing to fill the display. Widen the column on
   large screens only; prose stays readable because .lede is capped at 62ch
   and .article-body at 70ch regardless of how wide the wrap gets. */
@media(min-width:1500px){:root{--wrap:1400px}}
@media(min-width:2000px){:root{--wrap:1600px}}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:12px;top:-64px;z-index:100;background:var(--ink);color:var(--paper);font-weight:700;padding:.8rem 1.1rem;border-radius:var(--r-md);text-decoration:none}
.skip-link:focus{top:12px}
main:focus,main:focus-visible{outline:0}
.table-wrap:focus-visible{outline-offset:-3px}
.lede{color:var(--ink-soft);font-size:1.05rem;max-width:62ch}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:48px;padding:.75rem 1.35rem;
  border-radius:var(--r-sm);font-weight:700;font-size:1rem;text-decoration:none;border:1.5px solid transparent;cursor:pointer;font-family:inherit;
  transition:background .16s var(--ease),border-color .16s var(--ease),color .16s var(--ease),transform .12s var(--ease),box-shadow .16s var(--ease)}
.btn svg{width:19px;height:19px;flex:none}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--brand);color:var(--paper);box-shadow:var(--sh-1)}
.btn-primary:hover{background:var(--brand-deep)}
.btn-light{background:var(--paper);color:var(--ink);border-color:var(--line)}
.btn-light:hover{border-color:var(--brand);color:var(--brand-deep)}
.btn-ghost{background:transparent;color:var(--paper);border-color:rgba(235,246,240,.38)}
.btn-ghost:hover{border-color:var(--paper);background:rgba(255,255,255,.08)}
.btn-sm{min-height:44px;padding:.55rem 1rem;font-size:0.95rem}
.btn-block{width:100%}

/* ---------- Header ---------- */
.site-head{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.head-bar{position:relative;display:flex;align-items:center;gap:1.4rem;padding:.7rem 0}
.brandmark{display:flex;align-items:center;gap:.6rem;text-decoration:none;flex:none}
.brandmark img{width:38px;height:38px;border-radius:50%}
.brandmark .wm{font-family:var(--font-cond);font-weight:800;text-transform:uppercase;letter-spacing:.04em;line-height:1.05;font-size:1.15rem}
.brandmark .wm span{display:block;color:var(--brand-deep);font-size:0.8rem;letter-spacing:.19em}
.mainnav{display:flex;align-items:center;gap:1.45rem;margin-left:auto}
.mainnav a{text-decoration:none;font-weight:600;font-size:0.95rem;color:var(--ink-soft);padding:.35rem 0;border-bottom:2px solid transparent;transition:color .14s var(--ease),border-color .14s var(--ease)}
.mainnav a:hover,.mainnav a[aria-current="page"]{color:var(--brand-deep);border-color:var(--brand)}
.head-cta{flex:none}
.navtoggle{display:none;width:46px;height:46px;align-items:center;justify-content:center;background:transparent;border:1.5px solid var(--line);border-radius:var(--r-sm);color:var(--ink);cursor:pointer;margin-left:auto;transition:border-color .14s var(--ease),color .14s var(--ease)}
.navtoggle:hover{border-color:var(--brand);color:var(--brand-deep)}
.navtoggle svg{width:22px;height:22px}
@media(max-width:1000px){
  .mainnav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--paper);border-bottom:1px solid var(--line);box-shadow:var(--sh-2);padding:.3rem 0;margin:0}
  .mainnav.open{display:flex}
  .mainnav a{padding:.95rem 24px;border-bottom:1px solid var(--line)}
  .mainnav a:last-child{border-bottom:0}
  .navtoggle{display:flex}
  .head-cta{display:none}
}

/* ---------- Seasonal: October, Mashujaa Day (20 Oct) ----------
   Additive and date-gated: a script in <head> adds .oct to <html> only while the
   visitor's month is October, so it switches itself off on 1 November with no
   redeploy. It is a thin flag-band (black / red / green, white between) on the top
   of the header and footer. It never touches the brand tokens or the logo, and the
   red lives only in this decorative band, so it cannot be mistaken for --warning. */
.oct .site-head::before,.oct .site-foot::before{content:"";display:block;height:6px;
  background:linear-gradient(to bottom,var(--night) 0 26%,#fff 26% 34%,var(--flag-red) 34% 66%,#fff 66% 74%,var(--brand) 74% 100%)}
.oct .site-foot{position:relative}
.oct .site-foot::before{position:absolute;top:0;left:0;right:0}

/* ---------- Hero ---------- */
.hero{background:var(--night);color:var(--paper);position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 78% 12%, rgba(59,168,110,.20), transparent 58%)}
.hero .wrap{position:relative;z-index:1;padding-top:3.4rem;padding-bottom:3.4rem}
.hero .wrap.hero-split{display:grid;grid-template-columns:1.08fr .92fr;gap:2.6rem;align-items:center}
.hero h1{color:var(--paper);margin:.9rem 0 .5rem}
.hero h1 em{font-style:normal;color:var(--brand-bright)}
.hero .lede{color:var(--on-night)}
/* The hero headline is back (2026-09-16), so the lede is a lede again. If the
   headline is ever removed the lede must be re-promoted, or the hero's left
   column tops out at 1.05rem and the neon panel outweighs the message. */
.hero-split .lede{margin-top:.7rem}
.hero-tag{font-family:var(--font-cond);text-transform:uppercase;letter-spacing:.12em;
  font-weight:800;font-size:1.05rem;color:var(--brand-bright);margin:.45rem 0 0}
.pill-row{display:flex;flex-wrap:wrap;gap:.5rem 1.2rem;margin:.7rem 0 1rem;font-weight:600;color:var(--on-night-strong);font-size:0.95rem}
.pill-row span{display:flex;align-items:center;gap:.45rem}
.pill-row span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--brand-bright)}
.hero-cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.5rem}
.assure{display:flex;flex-wrap:wrap;gap:.7rem 1.7rem;margin-top:1.7rem;padding-top:1.4rem;border-top:1px solid var(--line-night);font-size:0.95rem;color:var(--on-night)}
.assure div{display:flex;align-items:center;gap:.5rem}
.assure svg{width:17px;height:17px;color:var(--brand-bright);flex:none}
.hero-visual{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--night-2);border:1px solid var(--line-night);min-height:360px;display:flex;align-items:center;justify-content:center;padding:1.6rem}
.hero-visual.has-photo{padding:0;min-height:420px;display:block}
.hero-visual.has-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.hero-note{position:absolute;left:1rem;right:1rem;bottom:1rem;background:var(--brand);border-radius:var(--r-md);padding:.85rem 1rem;display:flex;gap:.7rem;align-items:center;box-shadow:var(--sh-3)}
.hero-note svg{width:22px;height:22px;flex:none;color:var(--paper)}
.hero-note b{display:block;font-size:0.95rem;color:var(--paper)}
.hero-note span{font-size:0.95rem;color:var(--on-brand)}
@media(max-width:900px){.hero .wrap.hero-split{grid-template-columns:1fr;gap:1.8rem}.hero-visual{min-height:280px}.hero-visual.has-photo{min-height:340px}}

/* ---------- Need router ----------
   Visitors arrive with a problem, not a service name. Each card states the
   problem in the visitor's own words and routes to the page that solves it.
   Every destination is a real page; never add a row without one. */
.route-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media(max-width:1000px){.route-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.route-grid{grid-template-columns:1fr}}
.route-card{display:flex;align-items:center;gap:.9rem;text-decoration:none;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:1rem 1.1rem;box-shadow:var(--sh-1);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease),transform .2s var(--ease)}
.route-card:hover{border-color:var(--brand-bright);box-shadow:var(--sh-2);transform:translateY(-3px)}
.route-ico{flex:none;width:42px;height:42px;border-radius:50%;background:var(--brand-wash);
  display:flex;align-items:center;justify-content:center}
.route-ico svg{width:20px;height:20px;color:var(--brand-deep)}
.route-card .need{display:block;font-weight:700;color:var(--ink);font-size:1rem;line-height:1.25}
.route-card .act{display:flex;align-items:center;gap:.3rem;margin-top:.15rem;
  font-size:0.95rem;font-weight:700;color:var(--brand-deep)}
.route-card .act svg{width:14px;height:14px;transition:transform .2s var(--ease)}
.route-card:hover .act svg{transform:translateX(3px)}

/* ---------- Sections ---------- */
.sec{padding:4rem 0}
.sec-tint{background:var(--paper-2)}
.sec-night{background:var(--night);color:var(--paper)}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;margin-bottom:2rem;flex-wrap:wrap}
.sec-head h1{font-size:clamp(1.7rem,3.2vw,2.4rem)}
.sec-head h1 em,.sec-head h2 em{font-style:normal;color:var(--brand)}
.sec-head p{color:var(--ink-soft);margin-top:.4rem}
.link-more{text-decoration:none;font-weight:700;color:var(--brand-deep);display:inline-flex;align-items:center;gap:.4rem;transition:gap .16s var(--ease)}
.link-more:hover{gap:.7rem}

/* ---------- Service cards ---------- */
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
@media(max-width:1000px){.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.grid-4{grid-template-columns:1fr}}
.svc{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease)}
.svc:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:var(--brand-bright)}
.svc-art{position:relative;aspect-ratio:16/10;background:var(--night-2);overflow:hidden}
.svc-art img{width:100%;height:100%;object-fit:cover}
.svc-art.drawn{display:flex;align-items:center;justify-content:center;background:linear-gradient(150deg,var(--night-2),var(--night-3))}
.svc-art.drawn svg{width:54%;height:54%;color:var(--brand-bright);opacity:.94}
.svc-icon{position:absolute;left:1rem;bottom:-22px;width:44px;height:44px;border-radius:50%;background:var(--paper);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;box-shadow:var(--sh-1)}
.svc-icon svg{width:22px;height:22px;color:var(--brand)}
.svc-body{padding:2.1rem 1.2rem 1.3rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.svc-body h2{font-size:1.15rem;letter-spacing:-.01em;line-height:1.2}
.svc-body p{color:var(--ink-soft);font-size:0.95rem}
.svc-body .btn{margin-top:auto;align-self:stretch}

/* ---------- Kichwa Care ---------- */
.care{display:grid;grid-template-columns:.85fr 2.15fr;gap:2rem;align-items:start}
@media(max-width:960px){.care{grid-template-columns:1fr}}
.care-intro h2{margin-bottom:.5rem}
.care-intro .tag{color:var(--brand-deep);font-weight:700;margin-bottom:.5rem}
.care-intro p{color:var(--ink-soft);margin-bottom:1.3rem}
.care-tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
@media(max-width:820px){.care-tiers{grid-template-columns:1fr}}
.tier{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.3rem;display:flex;flex-direction:column;gap:.85rem;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.tier:hover{border-color:var(--brand-bright);box-shadow:var(--sh-2)}
.tier-top{display:flex;align-items:center;gap:.6rem}
.tier-top svg{width:24px;height:24px;color:var(--brand);flex:none}
.tier ul{display:flex;flex-direction:column;gap:.42rem;font-size:0.95rem;color:var(--ink-soft)}
.tier li{display:flex;gap:.5rem;align-items:flex-start}
.tier li svg{width:16px;height:16px;color:var(--brand-bright);flex:none;margin-top:.28rem}
.tier .price{margin-top:auto;padding-top:.9rem;border-top:1px solid var(--line);font-size:0.95rem;color:var(--ink-faint)}
.tier .price b{color:var(--ink);font-size:1.15rem;font-weight:800}

/* ---------- Panels row (prices + tracker) ---------- */
.panels{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;align-items:start}
@media(max-width:1000px){.panels{grid-template-columns:1fr 1fr}.panel-track{grid-column:1/-1}}
@media(max-width:700px){.panels{grid-template-columns:minmax(0,1fr)}}
/* Two-up variant of .panels for pages that pair a price panel with one
   supporting panel, rather than the home page's three-across trio. */
.panels-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem;align-items:start}
@media(max-width:700px){.panels-2{grid-template-columns:minmax(0,1fr)}}
.panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.3rem;display:flex;flex-direction:column;gap:.9rem}
.panel-head{display:flex;align-items:center;gap:.6rem}
.panel-head svg{width:22px;height:22px;color:var(--brand);flex:none}
.rate{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding:.55rem 0;border-bottom:1px dashed var(--line);font-size:0.95rem}
.rate:last-of-type{border-bottom:0}
.rate .who{display:flex;align-items:center;gap:.55rem;color:var(--ink);min-width:0}
.rate .who svg{width:17px;height:17px;color:var(--brand-bright);flex:none}
.rate .amt{font-weight:700;white-space:nowrap}
.rate .amt i{font-style:normal;font-weight:600;color:var(--ink-faint);font-size:.85em}
.fineprint{font-size:0.8rem;color:var(--ink-faint)}
.chips{display:flex;flex-wrap:wrap;gap:.45rem}
.chip{display:inline-flex;align-items:center;gap:.35rem;font-size:0.8rem;font-weight:600;color:var(--brand-deep);background:var(--brand-wash);border-radius:var(--r-pill);padding:.3rem .7rem}
.chip svg{width:14px;height:14px}
.panel-track{background:var(--night);border-color:var(--night-3);color:var(--paper)}
.panel-track .panel-head svg{color:var(--brand-bright)}
.panel-track h3{color:var(--paper)}
.panel-track p{color:var(--on-night);font-size:0.95rem}
.track-form{display:flex;gap:.6rem;flex-wrap:wrap}
.track-form input{flex:1 1 12rem;min-height:48px;padding:.7rem .9rem;border-radius:var(--r-sm);border:1.5px solid var(--line-night);
  background:var(--night-2);color:var(--paper);font-family:inherit;font-size:0.95rem}
.track-form input::placeholder{color:var(--on-night-faint)}
.track-form input:focus-visible{border-color:var(--brand-bright)}
.track-steps{display:flex;align-items:flex-start;justify-content:space-between;gap:.3rem;margin-top:.4rem;position:relative}
.track-steps::before{content:"";position:absolute;left:11px;right:11px;top:11px;height:2px;background:var(--night-3)}
.track-steps div{position:relative;display:flex;flex-direction:column;align-items:center;gap:.4rem;flex:1;text-align:center}
.track-steps .dot{width:22px;height:22px;border-radius:50%;border:2px solid var(--night-3);background:var(--night);display:flex;align-items:center;justify-content:center}
.track-steps div:first-child .dot{border-color:var(--brand-bright)}
.track-steps small{font-size:0.7rem;color:var(--on-night-soft);letter-spacing:.02em;line-height:1.25}
@media(max-width:480px){.track-steps{flex-wrap:wrap;row-gap:.9rem}.track-steps div{flex:1 1 22%;min-width:0}.track-steps::before{display:none}}

/* ---------- Placeholder (truth device, carried over) ---------- */
.placeholder{border:2px dashed rgba(12,21,18,.24);border-radius:var(--r-lg);padding:1.3rem;background:var(--paper-2)}
.placeholder-tag{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--font-cond);font-size:0.7rem;text-transform:uppercase;
  letter-spacing:.1em;font-weight:800;color:var(--warning);background:var(--warning-wash);border-radius:var(--r-pill);padding:.3rem .75rem;margin-bottom:.9rem}
.placeholder-tag svg{width:15px;height:15px}
.quote-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
@media(max-width:820px){.quote-grid{grid-template-columns:1fr}}
.quote{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);padding:1.1rem}
.quote p{color:var(--ink-soft);font-size:0.95rem;margin-bottom:.7rem}
.quote b{font-size:0.95rem}
.quote span{display:block;font-size:0.8rem;color:var(--ink-faint)}

/* ---------- Trust row ---------- */
.trust{display:grid;grid-template-columns:repeat(5,1fr);gap:1.2rem}
@media(max-width:980px){.trust{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.trust{grid-template-columns:1fr}}
.trust div{display:flex;gap:.75rem;align-items:flex-start}
.trust .ic{width:40px;height:40px;border-radius:50%;background:var(--brand-wash);display:flex;align-items:center;justify-content:center;flex:none}
.trust .ic svg{width:20px;height:20px;color:var(--brand)}
.trust b{display:block;font-size:0.95rem}
.trust span{font-size:0.85rem;color:var(--ink-soft)}

/* ---------- CTA band ---------- */
.cta-band{background:var(--night-2);color:var(--paper);padding:2.2rem 0}
.cta-band .wrap{display:flex;align-items:center;gap:1.6rem;flex-wrap:wrap;justify-content:space-between}
.cta-band h2{font-size:1.5rem}
.cta-band p{color:var(--on-night)}
.cta-meta{display:flex;gap:1.8rem;flex-wrap:wrap}
.cta-meta div{display:flex;gap:.6rem;align-items:flex-start;font-size:0.95rem;color:var(--on-night)}
.cta-meta svg{width:18px;height:18px;color:var(--brand-bright);flex:none;margin-top:.15rem}
.cta-meta b{display:block;color:var(--paper)}

/* ---------- Footer ---------- */
.site-foot{background:var(--night);color:var(--on-night);padding:3rem 0 1.5rem}
.foot-grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr) 1.1fr;gap:2rem}
@media(max-width:980px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot-grid{grid-template-columns:1fr}}
.site-foot h3{font-family:var(--font-cond);text-transform:uppercase;letter-spacing:.12em;font-size:0.8rem;color:var(--paper);margin-bottom:.8rem}
.site-foot a{text-decoration:none;transition:color .14s var(--ease)}
.site-foot a:hover{color:var(--brand-bright)}
.site-foot li{margin-bottom:.45rem;font-size:0.95rem}
.foot-brand .brandmark .wm{color:var(--paper)}
/* --brand-deep is the text-safe green on white; on the night footer it drops
   to 2.45:1, so the footer wordmark takes the bright green instead. */
.foot-brand .brandmark .wm span{color:var(--brand-bright)}
.foot-brand p{margin-top:.8rem;font-size:0.95rem;max-width:26ch}
.foot-contact li{display:flex;gap:.55rem;align-items:flex-start}
.foot-contact svg{width:16px;height:16px;color:var(--brand-bright);flex:none;margin-top:.28rem}
.site-foot h3+h3,.foot-contact .foot-social{margin-top:0}
.foot-heading-2{margin-top:1.2rem}
.foot-social{display:flex;flex-wrap:wrap;gap:.5rem}
.foot-social a{width:38px;height:38px;border-radius:50%;border:1px solid var(--line-night);display:flex;align-items:center;justify-content:center;
  transition:border-color .16s var(--ease),color .16s var(--ease)}
.foot-social a:hover{border-color:var(--brand-bright);color:var(--brand-bright)}
.foot-social svg{width:18px;height:18px}
.foot-base{margin-top:2.2rem;padding-top:1.2rem;border-top:1px solid var(--line-night);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:0.85rem;color:var(--on-night-soft)}
.foot-base a{color:inherit;margin-left:.6rem;text-decoration:underline;text-underline-offset:3px}
.foot-base a:hover{color:var(--brand-bright)}

/* ---------- Motion ---------- */
@keyframes kc-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes kc-stamp{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
/* One authored moment, and .hero-split exists only on the home page. Scoped
   loosely these fired on every inner page's .hero h1 and on the shop and wifi
   .hero-cta, giving the site a second page-load entrance it never wanted. */
.hero-split h1{animation:kc-rise .5s var(--ease) .04s both}
.hero-split .hero-tag{animation:kc-rise .45s var(--ease) .1s both}
.hero-split .pill-row{animation:kc-rise .45s var(--ease) .16s both}
.hero-split .lede{animation:kc-rise .45s var(--ease) .22s both}
.hero-split .hero-cta{animation:kc-rise .45s var(--ease) .3s both}
.hero-split .assure{animation:kc-rise .45s var(--ease) .38s both}
.hero-split .hero-visual{animation:kc-stamp .55s var(--ease) .1s both}
.js .reveal{opacity:0}
.js .reveal.in{animation:kc-rise .5s var(--ease) both}
@media(prefers-reduced-motion:reduce){
  .hero h1,.hero .lede,.hero .pill-row,.hero-cta,.assure,.hero-visual,
  .hero-split h1,.hero-split .hero-tag,
  .hero-split .lede,.hero-split .pill-row,.hero-split .hero-cta,
  .hero-split .assure,.hero-split .hero-visual{animation:none}
  .js .reveal{opacity:1}
  .js .reveal.in{animation:none}
  .svc:hover,.btn:active{transform:none}
}

/* ---------- Inner pages ----------
   The remaining pages keep their semantic class names from the previous world;
   these rules re-render them in this one rather than churn 11 files of markup. */
.section{padding:4rem 0}
.section.on-cream{background:var(--paper-2)}
.hero-sub{color:var(--on-night);font-size:1.05rem;max-width:62ch;margin-top:.7rem}
.section-head{max-width:680px;margin-bottom:2rem}
.section-head h2{margin-bottom:.4rem}
.section-head p{color:var(--ink-soft)}
.on-cream .section-head h2{color:var(--ink)}

/* Article pages */
.breadcrumb{font-family:var(--font-cond);text-transform:uppercase;letter-spacing:.1em;font-size:0.8rem;color:var(--brand-bright);margin-bottom:.7rem}
.breadcrumb a{text-decoration:none}
.breadcrumb a:hover{color:var(--paper)}
.article-hero{background:var(--night);color:var(--paper);padding:3.2rem 0 2.6rem;background-size:cover;background-position:center;position:relative}
.article-hero.has-photo{background-image:linear-gradient(180deg,rgba(8,18,13,.82),rgba(8,18,13,.95)),var(--article-photo)}
.article-hero h1{color:var(--paper);font-size:clamp(1.9rem,4vw,2.9rem);margin:.3rem 0 .7rem}
.article-hero .meta{font-family:var(--font-cond);text-transform:uppercase;letter-spacing:.09em;font-size:0.85rem;color:var(--on-night-accent)}
/* 24px side padding matches .wrap, so text never touches a phone's screen edge; the 70ch measure is kept */
.article-body{max-width:calc(70ch + 48px);margin:0 auto;padding:3rem 24px;font-size:1.05rem;color:var(--ink-soft)}
.article-body h2{color:var(--ink);font-size:1.5rem;margin:2.2rem 0 .7rem}
.article-body h3{color:var(--ink);margin:1.7rem 0 .5rem}
.article-body p{margin-bottom:1.1rem}
.article-body ul{list-style:disc;padding-left:1.3rem;margin-bottom:1.2rem}
.article-body li{margin-bottom:.5rem}
.article-body strong{color:var(--ink)}
.article-cta{background:var(--brand-wash);border:1px solid var(--line);border-radius:var(--r-md);padding:1.4rem;margin-top:2.2rem}
.article-cta h3{color:var(--ink);margin-bottom:.4rem}
.article-cta p{margin-bottom:1rem}

/* Blog index + 404 cards */
.post-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.4rem}
.post-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;
  text-decoration:none;color:var(--ink);transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease)}
.post-card:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:var(--brand-bright)}
.post-card .post-tag{background:var(--brand-wash);color:var(--brand-deep);font-family:var(--font-cond);font-size:0.7rem;
  text-transform:uppercase;letter-spacing:.1em;font-weight:800;padding:.5rem 1rem}
.post-card .post-body{padding:1.1rem 1.2rem 1.3rem;display:flex;flex-direction:column;gap:.55rem;flex:1}
.post-card h2,.post-card h3{font-size:1.15rem;letter-spacing:-.01em}
.post-card p{color:var(--ink-soft);font-size:0.95rem}
.post-card .read-more{margin-top:auto;font-weight:700;font-size:0.95rem;color:var(--brand-deep)}

/* Contact board (about / wifi / community) */
.contact-board{background:var(--night);color:var(--paper);border-radius:var(--r-lg);padding:2rem 1.8rem;box-shadow:var(--sh-3)}
.contact-board h2{color:var(--paper);margin-bottom:.5rem}
.contact-board p{color:var(--on-night);max-width:56ch}
.contact-ctas{display:flex;flex-wrap:wrap;gap:.7rem;margin:1.3rem 0 1.1rem}
.contact-meta{display:flex;flex-wrap:wrap;gap:.6rem 1.8rem;font-size:0.95rem;color:var(--on-night);padding-top:1.1rem;border-top:1px solid var(--line-night)}
.contact-meta a{color:var(--paper);text-decoration:none;font-weight:600;transition:color .14s var(--ease)}
.contact-meta a:hover{color:var(--brand-bright)}
.contact-meta svg{width:17px;height:17px;color:var(--brand-bright);flex:none}
.contact-meta>*{display:flex;align-items:center;gap:.5rem}

/* Why band */
.why{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.6rem}
.why-item h3{color:var(--ink);margin-bottom:.35rem;display:flex;align-items:center;gap:.5rem}
.why-item h3 svg{width:20px;height:20px;color:var(--brand);flex:none}
.why-item p{color:var(--ink-soft);font-size:0.95rem}

/* Photo panel */
.content-photo{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-2);border:1px solid var(--line)}
.content-photo img{width:100%;height:100%;object-fit:cover}
/* Wide photo band under a page intro: 3:2 on phones, 2:1 from 700px, framed on the overalls */
.section.photo-band{padding:2.6rem 0}
.photo-band .content-photo{aspect-ratio:3/2}
.photo-band .content-photo img{object-position:50% 26%}
.photo-band .content-photo.on-sign img{object-position:50% 42%}  /* frame the sign, not the wall above it */
@media(min-width:700px){.photo-band .content-photo{aspect-ratio:2/1}}
/* .narrow: a centred 820px frame at the photo's own 3:2, for shots whose background has soft-focus passers-by */
.photo-band.narrow .content-photo{max-width:820px;margin:0 auto;aspect-ratio:3/2}
.photo-band.narrow .content-photo img{object-position:50% 30%}
.photo-band + .section:not(.on-cream){padding-top:0}   /* a band already carries its own bottom space */

/* Community */
.teaser-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.3rem}
.story-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.2rem}
.story-card .who{font-weight:700;font-size:0.95rem;color:var(--ink)}
.event-row{display:flex;gap:1rem;align-items:flex-start;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.1rem;margin-bottom:.9rem}
.event-date{flex:none;width:62px;text-align:center;background:var(--brand-wash);border-radius:var(--r-md);padding:.6rem .3rem;color:var(--brand-deep)}
.event-date .d{display:block;font-size:1.3rem;font-weight:800;line-height:1}
.event-date .m{display:block;font-family:var(--font-cond);font-size:0.7rem;text-transform:uppercase;letter-spacing:.09em;font-weight:700;margin-top:.2rem}
.event-info h3{color:var(--ink);margin-bottom:.25rem}
.event-info p{color:var(--ink-soft);font-size:0.95rem}
.partner-row{display:flex;flex-wrap:wrap;gap:.7rem}
.partner-chip{display:flex;align-items:center;gap:.6rem;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-pill);padding:.5rem .95rem}
.partner-chip .mark{width:28px;height:28px;border-radius:50%;background:var(--brand-wash);color:var(--brand-deep);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:0.85rem;flex:none}
.partner-chip .name{font-weight:700;font-size:0.95rem;color:var(--ink)}
.tradein-panel{display:grid;grid-template-columns:1.4fr 1fr;gap:1.6rem;align-items:center;background:var(--night);color:var(--paper);
  border-radius:var(--r-lg);padding:1.9rem;box-shadow:var(--sh-3)}
.tradein-panel h2{color:var(--paper);margin-bottom:.6rem}
.tradein-panel p{color:var(--on-night)}
.tradein-panel ul{display:flex;flex-direction:column;gap:.5rem;margin-top:1rem;font-size:0.95rem;color:var(--on-night)}
.tradein-panel li{display:flex;gap:.55rem;align-items:flex-start}
.tradein-panel li svg{width:16px;height:16px;flex:none;color:var(--brand-bright);margin-top:.28rem}
.tradein-visual{background:var(--night-2);border:1px solid var(--line-night);border-radius:var(--r-md);padding:1.4rem;text-align:center;color:var(--on-night-accent);font-family:var(--font-cond);text-transform:uppercase;letter-spacing:.1em;font-weight:700}
@media(max-width:760px){.tradein-panel{grid-template-columns:1fr}}

/* Route line (wifi services) — light cards in this world */
.route-line{position:relative}
.route-line::before{content:"";position:absolute;left:19px;top:8px;bottom:8px;width:3px;border-radius:3px;
  background:repeating-linear-gradient(var(--brand-bright) 0 12px, transparent 12px 20px)}
.stop{position:relative;padding-left:60px;margin-bottom:1.3rem}
.stop:last-child{margin-bottom:0}
.stop-badge{position:absolute;left:0;top:2px;width:40px;height:40px;border-radius:50%;background:var(--brand);color:var(--paper);
  font-weight:800;display:flex;align-items:center;justify-content:center;font-size:1.05rem;box-shadow:0 0 0 5px var(--paper-2),var(--sh-1)}
.stop-panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.4rem;display:flex;flex-direction:column;gap:.7rem}
.stop.flagship .stop-panel{border-color:var(--brand-bright);box-shadow:var(--sh-2)}
.stop.flagship .stop-badge{background:var(--brand-deep)}
.stop-top{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.stop-top .icon-tile{width:44px;height:44px;border-radius:var(--r-md);background:var(--brand-wash);display:flex;align-items:center;justify-content:center;flex:none}
.stop-top .icon-tile svg{width:24px;height:24px;color:var(--brand)}
.stop h3{color:var(--ink);font-size:1.3rem}
.stop p.desc{color:var(--ink-soft);font-size:0.95rem}
.stop ul{display:flex;flex-direction:column;gap:.4rem;font-size:0.95rem;color:var(--ink-soft)}
.stop ul li{display:flex;gap:.55rem;align-items:flex-start}
.stop ul li svg{width:16px;height:16px;color:var(--brand-bright);flex:none;margin-top:.28rem}
.stop-cta{align-self:flex-start;margin-top:.2rem}
.route-strip-mini{display:flex;flex-wrap:wrap;gap:.5rem 1.2rem;margin-top:1rem;font-weight:600;color:var(--on-night-strong);font-size:0.95rem}
.route-strip-mini span{display:flex;align-items:center;gap:.45rem}
.route-strip-mini .dot{width:6px;height:6px;border-radius:50%;background:var(--brand-bright);flex:none}
@media(max-width:600px){.route-line::before{left:15px}.stop{padding-left:48px}.stop-badge{width:32px;height:32px;font-size:0.95rem}}

/* ---------- Quick Access vouchers ----------
   Hotspot passes sold by time or data. Priced in single shillings, so the
   number is the loudest thing in the card and the terms sit quietly under it. */
.voucher-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
@media(max-width:900px){.voucher-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.voucher-grid{grid-template-columns:1fr}}
.voucher{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:1.1rem 1.15rem;display:flex;flex-direction:column;gap:.35rem;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease),transform .2s var(--ease)}
.voucher:hover{border-color:var(--brand-bright);box-shadow:var(--sh-2);transform:translateY(-3px)}
.voucher .vname{font-family:var(--font-cond);text-transform:uppercase;letter-spacing:.1em;
  font-size:0.8rem;font-weight:800;color:var(--brand-deep)}
.voucher .vprice{font-weight:800;font-size:1.5rem;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink)}
.voucher .vprice small{font-size:0.8rem;font-weight:700;color:var(--ink-faint);letter-spacing:0}
.voucher .vterms{font-size:0.85rem;color:var(--ink-soft);margin-top:auto;padding-top:.5rem}
.voucher.featured{border-color:var(--brand);box-shadow:var(--sh-1)}
.voucher .vflag{position:absolute;top:-9px;right:1rem;background:var(--brand);color:var(--paper);
  font-family:var(--font-cond);text-transform:uppercase;letter-spacing:.09em;font-size:0.7rem;font-weight:800;
  padding:.2rem .6rem;border-radius:var(--r-pill)}

/* ---------- Shop ----------
   The catalogue is priced stock, so it reuses the rate row rather than
   inventing a card: name left, price right, hairline between. */
.shop-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.6rem 2.4rem}
@media(max-width:760px){.shop-grid{grid-template-columns:1fr}}
.shop-group{break-inside:avoid}
.shop-group h3{color:var(--ink);padding-bottom:.5rem;margin-bottom:.2rem;border-bottom:2px solid var(--brand)}
.shop-group .rate .who{font-weight:500}

/* ---------- Analytics consent ---------- */
.consent{position:fixed;left:16px;right:16px;bottom:16px;z-index:80;max-width:440px;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--sh-3);padding:1rem 1.1rem;display:flex;flex-direction:column;gap:.8rem}
.consent p{font-size:0.95rem;color:var(--ink-soft)}
.consent a{color:var(--brand-deep);font-weight:600}
.consent-actions{display:flex;gap:.6rem;flex-wrap:wrap}
.consent-actions .btn{flex:1 1 130px}
@media(min-width:700px){.consent{right:auto;left:24px;bottom:24px}}
@media print{.consent{display:none}}
.foot-base .link-btn{background:none;border:0;padding:0;margin-left:.6rem;font:inherit;color:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.foot-base .link-btn:hover{color:var(--brand-bright)}
/* Touch targets: on phones, tablets and any coarse pointer every footer link and
   the social circles are at least 44px tall (WCAG 2.5.5 / Apple HIG). */
@media(max-width:980px),(pointer:coarse){
  .site-foot li{margin-bottom:0}
  .site-foot li a{display:inline-flex;align-items:center;min-height:44px}
  .site-foot .brandmark{min-height:44px}
  .foot-social{gap:.25rem}
  .foot-social a{width:44px;height:44px}
  .foot-base>span:first-child{display:flex;flex-wrap:wrap;align-items:center;column-gap:.2rem}
  .foot-base a,.foot-base .link-btn{display:inline-flex;align-items:center;min-height:44px;margin-left:0;padding:0 .4rem}
}

/* ---------- Application form (careers) ---------- */
.apply-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.4rem;box-shadow:var(--sh-1);max-width:820px;margin:0 auto}
.apply-form{display:grid;grid-template-columns:1fr 1fr;gap:1rem 1.1rem}
.apply-form .full{grid-column:1/-1}
@media(max-width:700px){.apply-form{grid-template-columns:1fr}}
.field label{display:block;font-weight:700;font-size:0.95rem;color:var(--ink);margin-bottom:.35rem}
.field input,.field select,.field textarea{width:100%;min-height:48px;padding:.7rem .9rem;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper);color:var(--ink);font:inherit}
.field textarea{min-height:130px;resize:vertical}
.field input[type=file]{padding:.6rem .7rem}
.field [aria-invalid="true"]{border-color:var(--warning)}
.hint{font-size:0.85rem;color:var(--ink-faint);margin-top:.3rem}
.consent-check{display:flex;gap:.7rem;align-items:flex-start;font-size:0.95rem;color:var(--ink-soft)}
.consent-check input{width:20px;height:20px;min-height:0;margin-top:.2rem;flex:none}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status{border-radius:var(--r-md);padding:.8rem 1rem;font-weight:600;font-size:0.95rem}
.form-status.ok{background:var(--brand-wash);color:var(--brand-deep)}
.form-status.err{background:var(--warning-wash);color:var(--warning)}
.care-compare tbody th{text-transform:none;letter-spacing:0;font-size:1rem;color:var(--ink);background:transparent}
.care-terms{max-width:70ch}
.care-terms h3{margin:1.3rem 0 .3rem}
.form-status .btn{display:flex;width:fit-content;margin-top:.8rem}
.check-group{border:0;padding:0;margin:0;min-width:0}
.check-group legend{font-weight:700;font-size:0.95rem;color:var(--ink);margin-bottom:.5rem;padding:0}
.check-group .consent-check{margin-bottom:.55rem;color:var(--ink)}

/* ---------- Careers: roles, openings, FAQ ---------- */
.role-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem}
.role{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.2rem 1.3rem;display:flex;flex-direction:column;gap:.5rem}
.role p{color:var(--ink-soft);font-size:0.95rem}
.role .link-more{margin-top:auto;font-size:0.95rem}
.jobs{display:grid;gap:1rem}
.job{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.2rem 1.3rem;display:flex;flex-direction:column;gap:.7rem}
.job-meta{display:flex;flex-wrap:wrap;gap:.5rem}
.job ul{display:flex;flex-direction:column;gap:.35rem;font-size:0.95rem;color:var(--ink-soft)}
.job li{display:flex;gap:.5rem;align-items:flex-start}
.job li svg{width:16px;height:16px;flex:none;color:var(--brand-bright);margin-top:.28rem}
.job-empty{background:var(--paper);border:1px dashed var(--line);border-radius:var(--r-lg);padding:1.3rem;color:var(--ink-soft)}
.faq details{border-bottom:1px solid var(--line);padding:1rem 0}
.faq summary{cursor:pointer;font-weight:700;color:var(--ink);list-style:none;display:flex;justify-content:space-between;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:800;color:var(--brand-deep);transition:transform .2s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{margin-top:.6rem;color:var(--ink-soft)}

/* ---------- Article tables (cookie policy) ---------- */
.article-body .table-wrap,.care-compare .table-wrap{overflow-x:auto;margin:0 0 1.4rem;border:1px solid var(--line);border-radius:var(--r-md);background:var(--paper)}
.article-body table,.care-compare table{width:100%;min-width:640px;border-collapse:collapse;font-size:0.95rem}
.article-body a{overflow-wrap:anywhere}
.article-body th,.article-body td,.care-compare th,.care-compare td{text-align:left;vertical-align:top;padding:.7rem .85rem;border-bottom:1px solid var(--line)}
.article-body tbody tr:last-child td,.care-compare tbody tr:last-child td{border-bottom:0}
.article-body th,.care-compare th{color:var(--ink);font-weight:800;font-size:0.85rem;text-transform:uppercase;letter-spacing:.06em}
.article-body td code,.care-compare td code{font-family:inherit;font-weight:700;font-size:0.95rem;color:var(--ink);white-space:nowrap}

/* ---------- Kichwa Journal ---------- */
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.6rem}
.chip{display:inline-flex;align-items:center;min-height:44px;padding:.4rem 1rem;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--paper);color:var(--ink-soft);text-decoration:none;font-weight:600;font-size:0.95rem}
.chip:hover{border-color:var(--brand);color:var(--brand-deep)}
.chip[aria-current="page"]{background:var(--brand-deep);border-color:var(--brand-deep);color:var(--paper)}
.post-feature{overflow:hidden}
.post-feature .post-photo{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.post-feature h3{font-size:1.5rem}
.post-feature .post-tag{align-self:flex-start;border-radius:var(--r-pill)}
@media(min-width:760px){.post-feature{flex-direction:row}.post-feature .post-photo{width:46%;aspect-ratio:auto;min-height:260px}.post-feature .post-body{padding:1.6rem;justify-content:center}}
.journal-search{margin-top:1.3rem;max-width:460px}
.journal-search input{width:100%;min-height:48px;padding:.7rem .9rem;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper);color:var(--ink);font:inherit}
.journal-search .hint{color:var(--on-night-soft)}
.quick-answer{background:var(--brand-wash);border-radius:var(--r-md);padding:1rem 1.15rem;margin:0 0 1.6rem}
.quick-answer b{display:block;font-family:var(--font-cond);text-transform:uppercase;letter-spacing:.09em;font-size:0.85rem;color:var(--brand-deep);margin-bottom:.2rem}
.quick-answer p{margin:0;color:var(--ink)}
.share-row{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin:1.8rem 0 1.4rem}
.share-row span:first-child{font-weight:700;color:var(--ink);margin-right:.3rem}
.share-row a{display:inline-flex;align-items:center;min-height:44px;padding:.4rem 1rem;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--paper);color:var(--ink-soft);text-decoration:none;font-weight:600;font-size:0.95rem}
.share-row a:hover{border-color:var(--brand);color:var(--brand-deep)}
.post-card .draft-tag{background:var(--warning-wash);color:var(--warning)}
.draft-banner{background:var(--warning-wash);color:var(--warning);text-align:center;padding:.6rem 1rem;font-weight:700}

/* ---------- About: story and team ---------- */
.story{max-width:70ch}
.story h3{margin:1.6rem 0 .3rem}
.story p{margin-top:.5rem}
.team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.person{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.1rem 1.2rem}
.person h3{font-size:1.15rem}
.person p{color:var(--ink-soft);font-size:0.95rem;margin-top:.15rem}
.route-card .desc{display:block;color:var(--ink-soft);font-size:0.95rem;margin:.15rem 0 .3rem}