/* ==========================================================================
   African Shops Near Me — visual identity v5
   Zimbabwe. The cultural language is NDEBELE wall painting and beadwork:
   large flat colour fields, precise triangles, stepped blocks and chevron
   courses, every shape held by the same heavy black contour. The header band
   and the footer register are built from the same five-motif vocabulary, so
   the top and bottom of every page read as one painted house.
   (v4 used woven strip motifs — that is kente, i.e. West African. Removed.)
   Static only: no keyframe rules, no animation property, hover transitions only.
   One border token (--bd), one shadow token (--sh), both used everywhere.
   ========================================================================== */

:root{
  /* Zimbabwe flag */
  --zw-green:#009739;
  --zw-gold:#FFD200;
  --zw-red:#D40000;
  --zw-black:#0B0A08;

  /* surfaces */
  --cream:#FBF6E9;
  --sand:#F3E7CC;
  --card:#FFFDF8;
  --forest:#0E3B22;
  --forest-2:#0A2A18;
  --foot:#151A11;

  /* text — ratio measured against the surface it actually sits on */
  --ink:#191712;        /* 16.60:1 cream · 14.72:1 sand · 16.86:1 card */
  --forest-ink:#0E3B22; /* 11.65:1 cream · 10.33:1 sand · 11.83:1 card */
  --green-ink:#006B2B;  /*  6.20:1 cream ·  5.50:1 sand ·  6.30:1 card */
  --red-ink:#A30000;    /*  7.61:1 cream ·  6.75:1 sand ·  7.73:1 card */
  --gold-ink:#6E5200;   /*  6.78:1 cream ·  6.01:1 sand ·  6.89:1 card */
  --muted:#57503F;      /*  7.42:1 cream ·  6.58:1 sand ·  7.54:1 card */
  --on-forest:#FBF6E9;  /* 11.65:1 on --forest */
  --on-forest-mut:#CFE2D2; /* 9.12:1 on --forest */
  --nav-link:#FFF6DC;   /* 19.0:1 on --forest/black nav */
  --foot-mut:#DCD5C2;   /* 11.36:1 on --foot */

  /* the two structural tokens */
  --bd:2px;
  --bdc:#191712;
  --bdc-soft:#8C7B57;    /* internal rules: 4.05:1 on card, 3.35:1 on cream */
  --sh:none;

  --frieze:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='96' viewBox='0 0 720 96'%3E %3Crect width='720' height='96' fill='%230B0A08'/%3E %3Crect x='6' y='6' width='90' height='84' fill='%23FBF6E9'/%3E %3Cpath d='M51 18 L81 62 L21 62 Z' fill='%23FFD200' stroke='%230B0A08' stroke-width='6'/%3E %3Crect x='24' y='70' width='54' height='12' fill='%23D40000' stroke='%230B0A08' stroke-width='4'/%3E %3Crect x='102' y='6' width='150' height='84' fill='%23009739'/%3E %3Cpath d='M177 12 L243 48 L177 84 L111 48 Z' fill='%23FFD200' stroke='%230B0A08' stroke-width='6'/%3E %3Cpath d='M177 30 L207 48 L177 66 L147 48 Z' fill='%23D40000' stroke='%230B0A08' stroke-width='4'/%3E %3Crect x='258' y='6' width='120' height='84' fill='%23FFD200'/%3E %3Cpath d='M262 66 L288 32 L314 66 L340 32 L366 66' fill='none' stroke='%230B0A08' stroke-width='9' stroke-linejoin='miter'/%3E %3Crect x='384' y='6' width='168' height='84' fill='%23D40000'/%3E %3Cpath d='M402 78 L402 48 L438 48 L438 34 L474 34 L474 20 L510 20 L510 78 Z' fill='%23FBF6E9' stroke='%230B0A08' stroke-width='6'/%3E %3Crect x='558' y='6' width='156' height='84' fill='%23FBF6E9'/%3E %3Cpath d='M566 80 L588 26 L610 80 Z' fill='%23009739' stroke='%230B0A08' stroke-width='5'/%3E %3Cpath d='M610 80 L632 26 L654 80 Z' fill='%23FFD200' stroke='%230B0A08' stroke-width='5'/%3E %3Cpath d='M654 80 L676 26 L698 80 Z' fill='%23D40000' stroke='%230B0A08' stroke-width='5'/%3E %3C/svg%3E");
  --blade:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='340' viewBox='0 0 340 340'%3E %3Cpath d='M170 18 L308 272 L32 272 Z' fill='%23FBF6E9' stroke='%230B0A08' stroke-width='12'/%3E %3Cpath d='M170 92 L256 250 L84 250 Z' fill='%23FFD200' stroke='%230B0A08' stroke-width='10'/%3E %3Cpath d='M170 164 L212 250 L128 250 Z' fill='%23D40000' stroke='%230B0A08' stroke-width='8'/%3E %3Crect x='0' y='288' width='340' height='46' fill='%230B0A08'/%3E %3Crect x='12' y='296' width='56' height='30' fill='%23009739'/%3E %3Crect x='80' y='296' width='56' height='30' fill='%23FFD200'/%3E %3Crect x='148' y='296' width='56' height='30' fill='%23FBF6E9'/%3E %3Crect x='216' y='296' width='56' height='30' fill='%23D40000'/%3E %3Crect x='284' y='296' width='44' height='30' fill='%23009739'/%3E %3C/svg%3E");
  --divider:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920' height='56' viewBox='0 0 1920 56'%3E %3Crect width='1920' height='56' fill='%230B0A08'/%3E %3Crect x='0' y='0' width='372' height='56' fill='%230E3B22'/%3E %3Cpath d='M64 46 L134 10 L204 46 Z' fill='%23FFD200' stroke='%230B0A08' stroke-width='6'/%3E %3Crect x='236' y='32' width='108' height='14' fill='%23D40000' stroke='%230B0A08' stroke-width='5'/%3E %3Crect x='380' y='0' width='420' height='56' fill='%23FBF6E9'/%3E %3Cpath d='M424 46 L424 30 L470 30 L470 16 L516 16 L516 30 L562 30 L562 46 Z' fill='%23D40000' stroke='%230B0A08' stroke-width='6'/%3E %3Cpath d='M600 46 L600 34 L646 34 L646 22 L692 22 L692 34 L738 34 L738 46 Z' fill='%23009739' stroke='%230B0A08' stroke-width='6'/%3E %3Crect x='808' y='0' width='392' height='56' fill='%23FFD200'/%3E %3Cpath d='M1004 8 L1076 28 L1004 48 L932 28 Z' fill='%230B0A08'/%3E %3Cpath d='M1004 20 L1044 28 L1004 36 L964 28 Z' fill='%23FFD200'/%3E %3Crect x='1208' y='0' width='712' height='56' fill='%23009739'/%3E %3Cpath d='M1330 8 L1400 28 L1330 48 L1260 28 Z' fill='%23FBF6E9' stroke='%230B0A08' stroke-width='6'/%3E %3Cpath d='M1540 46 L1540 30 L1600 30 L1600 16 L1660 16 L1660 30 L1720 30 L1720 46 Z' fill='%23FBF6E9' stroke='%230B0A08' stroke-width='6'/%3E %3Cpath d='M1782 46 L1822 10 L1862 46 Z' fill='%23FFD200' stroke='%230B0A08' stroke-width='6'/%3E %3C/svg%3E");
  --mural:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='120' viewBox='0 0 480 120'%3E %3Crect width='480' height='120' fill='%230B0A08'/%3E %3Crect x='6' y='6' width='120' height='108' fill='%23FBF6E9'/%3E %3Cpath d='M36 96 L66 34 L96 96 Z' fill='%23009739' stroke='%230B0A08' stroke-width='6'/%3E %3Cpath d='M76 96 L96 56 L116 96 Z' fill='%23D40000' stroke='%230B0A08' stroke-width='5'/%3E %3Crect x='132' y='6' width='156' height='108' fill='%23009739'/%3E %3Cpath d='M150 96 L150 62 L186 62 L186 46 L222 46 L222 30 L258 30 L258 96 Z' fill='%23FBF6E9' stroke='%230B0A08' stroke-width='6'/%3E %3Crect x='294' y='6' width='96' height='108' fill='%23FFD200'/%3E %3Cpath d='M302 80 L320 44 L338 80 L356 44 L374 80' fill='none' stroke='%230B0A08' stroke-width='9' stroke-linejoin='miter'/%3E %3Cpath d='M302 100 L320 64 L338 100 L356 64 L374 100' fill='none' stroke='%23D40000' stroke-width='7' stroke-linejoin='miter'/%3E %3Crect x='396' y='6' width='78' height='108' fill='%23FBF6E9'/%3E %3Cpath d='M435 22 L474 60 L435 98 L396 60 Z' fill='%23D40000' stroke='%230B0A08' stroke-width='6'/%3E %3Cpath d='M435 46 L452 60 L435 74 L418 60 Z' fill='%23FFD200' stroke='%230B0A08' stroke-width='4'/%3E %3C/svg%3E");
  --arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E %3Cpath d='M4 2 L15 9 L4 16 Z' fill='%23FFD200' stroke='%230B0A08' stroke-width='2'/%3E %3C/svg%3E");
}

*{box-sizing:border-box;margin:0;padding:0}

body{
  font:16px/1.7 -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
}
a{color:var(--green-ink);text-underline-offset:2px}
img{max-width:100%;height:auto}
:focus-visible{outline:3px solid var(--zw-red);outline-offset:2px}
.container{max-width:1080px;margin:0 auto;padding:0 22px}

/* ==========================================================================
   HEADER
   Tier 1: the painted band — five Ndebele panels, asymmetric in width,
   every shape cut with a heavy black contour. 96px tall, 720px repeat.
   Tier 2: flat forest ground; the wordmark sits directly on it, no box.
   Tier 3: nav as a separate black band with a gold edge.
   ========================================================================== */
.topbar{
  position:relative;
  background:var(--forest);
  border-bottom:6px solid var(--zw-black);
}
.topbar::before{
  content:"";display:block;height:96px;
  background-image:var(--frieze);
  background-repeat:repeat-x;
  background-position:left top;
  background-size:720px 96px;
  border-bottom:4px solid var(--zw-black);
}
.topbar .container{
  display:flex;align-items:center;justify-content:space-between;
  gap:26px;padding-top:24px;padding-bottom:24px;flex-wrap:wrap;
}

/* wordmark: set on the band, aligned on the same optical centre as the nav */
.brand{
  position:relative;
  display:flex;flex-direction:column;justify-content:center;
  padding:2px 0 2px 18px;
  text-decoration:none;color:var(--on-forest);
  line-height:1;
}
.brand::before{
  content:"";position:absolute;left:0;top:50%;
  width:11px;height:46px;margin-top:-23px;
  background:linear-gradient(180deg,
    var(--zw-green) 0 25%,var(--zw-gold) 0 50%,
    var(--zw-red) 0 75%,var(--zw-black) 0);
  border:var(--bd) solid var(--zw-black);
}
.brand .word{
  font-size:29px;font-weight:800;letter-spacing:-.8px;
  line-height:1.05;color:var(--on-forest);
}
.brand .word em{font-style:normal;color:var(--zw-gold)}
.brand .tag{
  font-size:12px;line-height:1.45;color:var(--on-forest-mut);
  letter-spacing:.11em;text-transform:uppercase;
  margin-top:10px;
}

/* nav: one black band, single gold edge, red only on the active link */
.nav{
  display:flex;align-items:stretch;
  background:var(--zw-black);
  border-top:4px solid var(--zw-gold);
}
.nav a{
  display:flex;align-items:center;
  color:var(--nav-link);text-decoration:none;
  font-size:14.5px;font-weight:700;letter-spacing:.005em;
  padding:13px 16px;
  border-left:1px solid #6B6152;  /* 3.26:1 on nav black */
  transition:background-color .12s linear,color .12s linear;
}
.nav a:first-child{border-left:0}
.nav a:last-child{
  color:var(--zw-black);background:var(--zw-gold);
  padding-left:18px;padding-right:18px;
}
.nav a:hover,.nav a:focus{
  background:var(--zw-gold);color:var(--zw-black);border-left-color:var(--zw-gold);
}

/* ==========================================================================
   HERO — flat forest ground. No vignette, no gradient. One crisp Ndebele
   blade (concentric triangles + block course) anchored right, plus a hard
   black base rule.
   ========================================================================== */
.hero{
  position:relative;overflow:hidden;
  background:var(--forest);
  color:var(--on-forest);
  padding:58px 0 62px;
  border-bottom:6px solid var(--zw-black);
}
.hero::before{
  content:"";position:absolute;right:42px;bottom:14px;
  width:300px;height:300px;
  background-image:var(--blade);
  background-repeat:no-repeat;
  background-size:300px 300px;
  pointer-events:none;
}
.hero .container{position:relative;z-index:1}
.hero h1{
  font-size:44px;line-height:1.06;letter-spacing:-1.4px;
  margin-bottom:18px;max-width:620px;color:#fff;
}
.hero h1::after{
  content:"";display:block;width:132px;height:9px;margin-top:22px;
  background:linear-gradient(90deg,
    var(--zw-green) 0 33.333%,var(--zw-gold) 0 66.666%,var(--zw-red) 0);
}
.hero p{font-size:17.5px;line-height:1.7;color:var(--on-forest-mut);max-width:540px;margin-bottom:26px}
.eyebrow{
  display:inline-block;
  font-size:12px;letter-spacing:.13em;text-transform:uppercase;
  font-weight:800;color:var(--gold-ink);
  border-left:5px solid var(--zw-red);
  padding-left:11px;margin-bottom:12px;
}
.hero .eyebrow{color:var(--zw-gold);font-size:12px}
.hero .eyebrow + h1{margin-top:4px}

.cta,.hero .cta{
  display:inline-block;
  background:var(--zw-gold);color:var(--zw-black);
  text-decoration:none;font-weight:800;font-size:15px;
  padding:14px 28px;
  border:var(--bd) solid var(--zw-black);
  transition:background-color .12s linear;
}
.cta:hover,.cta:focus{background:#FFE45C;color:var(--zw-black)}
.hero .cta{color:var(--zw-black)}

/* ==========================================================================
   SECTIONS — flat grounds. Dividers are a painted wall course: solid colour
   fields edge to edge with black joints, one 1920px period, never tiled small.
   ========================================================================== */
section{padding:48px 0;position:relative}
section + section{padding-top:64px}
/* the painted course is a lintel: it appears once, at the head of each sand
   section, instead of chopping every boundary on the page */
section.band{padding-top:116px;background:var(--sand)}
section.band::before{
  content:"";position:absolute;left:0;right:0;top:0;height:56px;
  background-image:var(--divider);
  background-repeat:repeat-x;
  background-position:left top;
  background-size:1920px 56px;
}

h2{
  font-size:29px;line-height:1.2;letter-spacing:-.7px;
  margin-bottom:24px;color:var(--forest-ink);
  padding-bottom:14px;
  border-bottom:var(--bd) solid var(--bdc);
  text-wrap:balance;
}
h1,h3{text-wrap:balance}
p,li{text-wrap:pretty}
h3{font-size:18.5px;line-height:1.3;margin-bottom:8px;color:var(--forest-ink);letter-spacing:-.2px}
.lead{font-size:17px;line-height:1.75;color:var(--ink);max-width:66ch;margin-bottom:16px}
.lead:last-child{margin-bottom:0}

/* ==========================================================================
   TILES — 2px contour, no shadow, hard hover
   ========================================================================== */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:24px}
.tile{
  position:relative;display:block;
  background:var(--card);
  border:var(--bd) solid var(--bdc);
  padding:22px 48px 22px 22px;
  text-decoration:none;color:var(--ink);
  transition:background-color .12s linear,border-color .12s linear;
}
.tile:hover,.tile:focus{background:var(--sand);border-color:var(--forest-ink)}
/* link marker drawn in the same triangle language as the bands */
.tile::before{
  content:"";position:absolute;top:16px;right:14px;
  width:18px;height:18px;
  background-image:var(--arrow);
  background-repeat:no-repeat;background-size:18px 18px;
}
.tile strong{display:block;font-size:17px;line-height:1.35;margin-bottom:8px;letter-spacing:-.1px}
.tile span{display:block;font-size:14.5px;line-height:1.6;color:var(--ink)}
.tile span > span{display:block;font-size:13px;line-height:1.5;color:var(--gold-ink);font-weight:700;margin-bottom:2px}
.meta{color:var(--muted);font-size:14px;line-height:1.6}

/* ==========================================================================
   CARDS + FAQ — same 2px contour, same zero shadow
   ========================================================================== */
.card{
  background:var(--card);
  border:var(--bd) solid var(--bdc);
  padding:24px 26px;
  margin-bottom:18px;
}
.card h3{margin-bottom:8px}
.card p{font-size:16.5px;line-height:1.75;max-width:64ch}
.card p + p{margin-top:12px}
.card:last-child{margin-bottom:0}
.card a{font-weight:600}

.faq{
  background:var(--card);
  border:var(--bd) solid var(--bdc);
  padding:4px 28px;
}
.faq details{border-top:var(--bd) solid var(--bdc-soft);padding:16px 0 16px}
.faq details:first-child{border-top:0}
.faq summary{
  font-weight:700;font-size:16.5px;line-height:1.45;
  color:var(--forest-ink);cursor:pointer;
  list-style:none;position:relative;padding-right:34px;
  transition:color .12s linear;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--red-ink)}
.faq summary::after{
  content:"";position:absolute;right:2px;top:.42em;
  width:10px;height:10px;
  border-right:3px solid var(--forest-ink);
  border-bottom:3px solid var(--forest-ink);
  transform:rotate(45deg);
}
.faq details[open] summary::after{transform:rotate(-135deg);top:.66em}
.faq details[open] summary{color:var(--red-ink)}
.faq details[open] summary::after{border-color:var(--red-ink)}
.faq p{margin-top:12px;font-size:16px;line-height:1.75;max-width:68ch}

/* numbered steps — three painted panels side by side, heavy black joints,
   number badge above the text; the button closes the band */
.steps{
  list-style:none;counter-reset:step;
  display:grid;grid-template-columns:repeat(3,1fr);
  margin:26px 0 30px;
  border-top:var(--bd) solid var(--bdc);
  border-bottom:var(--bd) solid var(--bdc);
}
/* where the step band follows a heading, the band supplies the rule —
   never two rules 24px apart */
.container:has(> .steps) > h2{border-bottom:0;padding-bottom:0;margin-bottom:0}
.steps li{
  counter-increment:step;
  position:relative;
  padding:26px 30px 28px 0;
  border-right:var(--bd) solid var(--bdc);
  font-size:16.5px;line-height:1.7;
}
.steps li:not(:first-child){padding-left:30px}
.steps li:last-child{border-right:0;padding-right:0}
.steps li::before{
  content:counter(step);
  display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;margin-bottom:16px;
  background:var(--zw-gold);border:var(--bd) solid var(--zw-black);
  font-size:16px;font-weight:800;line-height:1;color:var(--zw-black);
}

/* checklist — triangle markers, no row rules (they read as a form) */
.checklist{list-style:none;margin-top:6px}
.checklist li{
  position:relative;padding:9px 0 9px 32px;
  font-size:16.5px;line-height:1.6;
}
.checklist li::before{
  content:"";position:absolute;left:2px;top:.52em;
  width:14px;height:14px;
  background-image:var(--arrow);
  background-repeat:no-repeat;background-size:14px 14px;
}

/* ==========================================================================
   FOOTER — the same painted register as the header band, larger scale.
   Body copy is 15px/1.8, links 15px with real spacing.
   ========================================================================== */
footer{
  position:relative;
  margin-top:64px;
  background:var(--foot);
  color:var(--foot-mut);
  font-size:16px;line-height:1.85;
  border-top:6px solid var(--zw-black);
}
footer::before{
  content:"";display:block;height:120px;
  background-image:var(--mural);
  background-repeat:repeat-x;
  background-position:left top;
  background-size:480px 120px;
  border-bottom:6px solid var(--zw-gold);
}
footer .container{padding-top:42px;padding-bottom:32px}
footer .cols{
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:34px;margin-bottom:30px;
}
footer strong{
  display:block;color:#fff;font-size:16px;line-height:1.4;
  margin-bottom:12px;letter-spacing:.01em;
}
footer .cols > div:first-child strong{
  font-size:18px;letter-spacing:-.2px;position:relative;padding-left:26px;
}
footer .cols > div:first-child strong::before{
  content:"";position:absolute;left:0;top:1px;width:10px;height:22px;
  background:linear-gradient(180deg,
    var(--zw-green) 0 25%,var(--zw-gold) 0 50%,
    var(--zw-red) 0 75%,#000 0);
}
footer a{
  color:var(--foot-mut);text-decoration:none;
  border-bottom:1px solid rgba(220,213,194,.42);
  line-height:2.05;
  transition:color .12s linear,border-color .12s linear;
}
footer a:hover,footer a:focus{color:var(--zw-gold);border-bottom-color:var(--zw-gold)}
footer .foot-rule{
  border-top:var(--bd) solid rgba(220,213,194,.28);
  padding-top:18px;font-size:15.5px;line-height:1.9;
}

/* ==========================================================================
   Small screens
   ========================================================================== */
@media(max-width:1120px){
  .hero::before{width:250px;height:250px;margin-top:-125px;background-size:250px 250px;right:20px}
}
@media(max-width:1000px){
  .hero::before{display:none}
  .hero h1{max-width:100%}
}
@media(max-width:980px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:1fr}
  .steps li{
    display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:18px;
    align-items:start;
    padding:22px 0 24px;border-right:0;border-bottom:var(--bd) solid var(--bdc);
  }
  .steps li:last-child{border-bottom:0;padding-bottom:4px}
  .steps li:not(:first-child){padding-left:0}
  .steps li::before{margin-bottom:0;margin-top:2px}
}
@media(max-width:880px){
  .brand .word{font-size:23px}
  .brand::before{height:42px;margin-top:-21px}
  .nav a{font-size:13px;padding:11px 11px}
  .brand .tag{font-size:11px;margin-top:9px}
}
@media(max-width:760px){
  .grid{grid-template-columns:1fr}
  h2{font-size:25px}
  .hero h1{font-size:35px;letter-spacing:-1px}
  .hero{padding:44px 0 58px}
  footer::before{height:110px;background-size:440px 110px}
  footer{margin-top:52px}
  footer .cols{grid-template-columns:1fr 1fr;gap:26px}
}
@media(max-width:640px){
  .container{padding:0 20px}
  .topbar::before{height:64px;background-size:480px 64px}
  .topbar .container{flex-direction:column;align-items:stretch;gap:18px;padding-top:20px;padding-bottom:22px}
  .brand{align-self:flex-start;padding-left:20px}
  .nav{width:100%;flex-wrap:wrap;border-bottom-width:3px}
  .nav a{flex:1 0 33.333%;justify-content:center;border-left:0;border-top:1px solid #2B2620;padding:12px 6px}
  .nav a:nth-child(-n+3){border-top:0}
  .hero{padding:38px 0 50px}
  .hero h1{font-size:30px;letter-spacing:-.8px}
  .hero p{font-size:16.5px}
  .eyebrow{font-size:11px}
  section{padding:38px 0}
  section + section{padding-top:56px}
  section.band{padding-top:96px}
  section.band::before{height:40px;background-size:1370px 40px}
  .cta,.hero .cta{display:block;text-align:center;padding:15px 18px}
  .steps li{padding:18px 0 20px;font-size:16px}
  .tile{padding:18px}
  .card{padding:20px 18px}
  .faq{padding:2px 18px}
  .faq summary{padding-right:30px}
  .steps li::before{width:32px;height:32px;margin-bottom:0;margin-top:3px}
  footer::before{height:90px;background-size:360px 90px}
  footer{font-size:15.5px}
  footer .cols{grid-template-columns:1fr;gap:22px}
  footer .container{padding-top:30px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}