/* =============================================================================
   MalaysianRecord — app.css
   Modelled on listing.my: friendly Malaysian business directory.
   Deep indigo, pill buttons, rounded soft-shadow cards, real photography,
   hand-drawn accents, stat counters. Outfit + Montserrat. Light.
   ============================================================================= */

:root{
  --indigo:#392FA2;
  --indigo-deep:#1B1464;
  --violet:#5433FF;
  --violet-bright:#3232FF;
  --ink:#171522;
  --text:#454356;
  --muted:#7b7990;
  --line:#E7E5F2;
  --paper:#FFFFFF;
  --lav:#F5F4FC;
  --lav-2:#EEECFA;
  --footer:#141221;
  --gold:#F5B301;
  --coral:#F5623D;         /* warm secondary — the MalaysianRecord mark */
  --coral-soft:#FFEDE8;
  --teal:#0F766E;
  --teal-wash:#E9F4F2;
  --amber:#9a6a12; --amber-wash:#FCF3E1;
  --red:#a02f28; --red-wash:#FBEEEC;

  --disp:"Bricolage Grotesque", -apple-system, system-ui, "Segoe UI", sans-serif;
  --body:"Montserrat", -apple-system, system-ui, "Segoe UI", sans-serif;
  --hand:"Caveat", cursive;

  --r-rec:4px 18px 18px 18px;   /* the "filed record" corner — one squared */

  --t-hero:clamp(2.3rem, 1.1rem + 4.6vw, 4rem);
  --t-h2:clamp(1.7rem, 1.1rem + 2.2vw, 2.6rem);
  --t-h3:clamp(1.1rem, 1rem + .5vw, 1.35rem);

  --s-4:1rem; --s-5:1.5rem; --s-6:2rem; --s-7:3rem; --s-8:4rem;
  --s-band:clamp(3.5rem, 2rem + 6vw, 6.5rem);

  --r-card:16px;
  --r-sm:10px;
  --r-pill:999px;
  --sh-card:0 12px 34px -12px rgba(27,20,100,.16), 0 4px 12px -6px rgba(27,20,100,.08);
  --sh-soft:0 8px 24px -10px rgba(27,20,100,.14);
  --sh-pill:0 10px 24px -8px rgba(57,47,162,.4);
  --wrap:1200px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--paper);color:var(--text);
  font-family:var(--body);font-size:1rem;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
strong,b{font-weight:700;color:var(--ink)}
:focus-visible{outline:3px solid var(--violet);outline-offset:2px}
::selection{background:var(--indigo);color:#fff}

h1,h2,h3,h4{font-family:var(--disp);font-weight:700;color:var(--ink);margin:0;line-height:1.12;letter-spacing:-.02em;text-wrap:balance}
h2{font-size:var(--t-h2)}
h3{font-size:var(--t-h3);font-weight:600}
p{margin:0 0 1em}

.mr-wrap{max-width:var(--wrap);margin:0 auto;padding-inline:clamp(1.1rem,4vw,2rem)}
.mr-band{padding:var(--s-band) 0}
.mr-band--lav{background:var(--lav)}
.mr-center{text-align:center}
.mr-lead{font-size:1.05rem;color:var(--text);max-width:56ch}
.mr-center .mr-lead{margin-inline:auto}

.mr-eyebrow{font-family:var(--disp);font-weight:700;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--coral);display:inline-flex;align-items:center;gap:.5rem;margin-bottom:.6rem}
.mr-eyebrow::before{content:"";width:1.6rem;height:2px;background:var(--coral);border-radius:2px}
.mr-h-scribble{position:relative;display:inline-block}
.mr-h-scribble::after{
  content:"";display:block;height:12px;width:2.6em;max-width:100%;margin-top:.28rem;
  background:no-repeat left center/contain;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='16' viewBox='0 0 200 16'%3E%3Cpath d='M5 10c30-6 92-7 142-4 18 1 40 2 51 6-14 2-33 1-51 1-50 0-112 1-142-4z' fill='%23F5623D'/%3E%3C/svg%3E");
}
.mr-center .mr-h-scribble::after{margin-inline:auto;background-position:center}
.mr-hero .mr-h-scribble::after,.mr-cta .mr-h-scribble::after{filter:brightness(1.12)}

.mr-btn{
  --bg:var(--indigo);--fg:#fff;--bd:transparent;
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--disp);font-weight:600;font-size:.9375rem;
  padding:.9rem 1.6rem;min-height:48px;
  background:var(--bg);color:var(--fg);border:2px solid var(--bd);border-radius:var(--r-pill);
  cursor:pointer;box-shadow:var(--sh-pill);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.mr-btn:hover{transform:translateY(-2px);box-shadow:0 16px 32px -8px rgba(57,47,162,.5)}
.mr-btn--deep{--bg:var(--indigo-deep)}
.mr-btn--white{--bg:#fff;--fg:var(--indigo-deep);box-shadow:var(--sh-soft)}
.mr-btn--teal{--bg:var(--teal)}
.mr-btn--ghost{--bg:transparent;--fg:var(--indigo);--bd:var(--indigo);box-shadow:none}
.mr-btn--ghost:hover{--bg:var(--indigo);--fg:#fff}
.mr-btn svg{width:18px;height:18px}
.mr-link{color:var(--violet);font-weight:600;font-family:var(--disp);display:inline-flex;align-items:center;gap:.35rem}
.mr-link:hover{color:var(--coral)}

/* header */
.mr-head{background:#fff;position:sticky;top:0;z-index:60;box-shadow:0 1px 0 var(--line)}
.mr-head__in{display:flex;align-items:center;gap:2rem;padding-block:1rem;position:relative}
.mr-word{font-family:var(--disp);font-weight:800;letter-spacing:-.03em;color:var(--ink);text-transform:uppercase;display:inline-flex;align-items:center;gap:.55rem}
.mr-word__mark{width:2.75rem;height:2.75rem;flex:none;display:block}
.mr-word__text{font-size:1.15rem;line-height:1}
.mr-head__nav{margin-left:auto;display:flex;align-items:center;gap:clamp(1rem,2.4vw,2rem)}
.mr-head__nav .mr-nav__list{display:flex;gap:clamp(1rem,2.4vw,2rem);list-style:none;margin:0;padding:0}
.mr-head__nav a{font-family:var(--disp);font-weight:600;font-size:.9375rem;color:var(--ink)}
.mr-head__nav a:hover{color:var(--indigo)}
.mr-head__menu{display:none;background:none;border:0;cursor:pointer;color:var(--ink);padding:.5rem;min-width:44px;min-height:44px;align-items:center;justify-content:center}
.mr-head__menu-close{display:none}
.mr-head__menu[aria-expanded="true"] .mr-head__menu-open{display:none}
.mr-head__menu[aria-expanded="true"] .mr-head__menu-close{display:block}
@media (max-width:960px){
  .mr-head__nav{position:absolute;left:0;right:0;top:100%;background:#fff;flex-direction:column;align-items:stretch;gap:0;padding:0;box-shadow:var(--sh-soft);display:none}
  .mr-head__nav.is-open{display:flex}
  .mr-head__nav .mr-nav__list{flex-direction:column;gap:0}
  .mr-head__nav .mr-nav__list li{border-top:1px solid var(--line)}
  .mr-head__nav a{display:block;padding:.9rem 1.5rem}
  .mr-head__nav .mr-btn{margin:1rem 1.5rem}
  .mr-head__menu{display:inline-flex;margin-left:auto}
}

/* hero */
.mr-hero{position:relative;color:#fff;text-align:center;overflow:hidden}
.mr-hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mr-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,14,28,.66) 0%,rgba(20,15,60,.78) 60%,rgba(27,20,100,.86) 100%)}
.mr-hero__in{position:relative;z-index:1;padding-block:clamp(3.5rem,6vw,6rem) clamp(4.5rem,7vw,7rem)}
.mr-hero h1{color:#fff;font-size:var(--t-hero);font-weight:800;max-width:20ch;margin:0 auto .9rem}
.mr-hero__sub{color:rgba(255,255,255,.9);font-size:1.05rem;max-width:62ch;margin:0 auto 2rem}

.mr-hsearch{display:flex;align-items:stretch;background:#fff;border-radius:var(--r-pill);box-shadow:0 22px 50px -16px rgba(0,0,0,.4);max-width:900px;margin:0 auto;padding:.4rem;position:relative}
.mr-hsearch__f{flex:1;display:flex;align-items:center;gap:.6rem;padding:.55rem 1.1rem;min-width:0}
.mr-hsearch__f + .mr-hsearch__f{border-left:1px solid var(--line)}
.mr-hsearch__f svg{width:16px;height:16px;color:var(--violet);flex:none}
.mr-hsearch__f input,.mr-hsearch__f select{border:0;background:none;font-family:var(--body);font-size:.9375rem;color:var(--ink);width:100%;outline:none;appearance:none}
.mr-hsearch__f input::placeholder{color:var(--muted)}
/* direct child only — the dropdown triggers inside the fields are buttons too,
   and this filled pill is meant for the submit button alone */
.mr-hsearch > button{border:0;background:var(--indigo);color:#fff;font-family:var(--disp);font-weight:600;font-size:.9375rem;border-radius:var(--r-pill);padding:0 1.7rem;display:flex;align-items:center;gap:.5rem;cursor:pointer;flex:none}
.mr-hsearch > button:hover{background:var(--indigo-deep)}
@media (max-width:760px){
  .mr-hsearch{flex-direction:column;border-radius:var(--r-card);padding:.6rem}
  .mr-hsearch__f{padding:.8rem 1rem}
  .mr-hsearch__f + .mr-hsearch__f{border-left:0;border-top:1px solid var(--line)}
  .mr-hsearch > button{padding:.9rem;border-radius:var(--r-sm);justify-content:center;margin-top:.4rem}
}
.mr-typeahead__results{position:absolute;left:0;right:0;top:calc(100% + .4rem);background:#fff;border-radius:var(--r-card);box-shadow:var(--sh-card);overflow:hidden;text-align:left;z-index:20}
.mr-typeahead__results a{display:flex;gap:.7rem;align-items:center;padding:.75rem 1.1rem;color:var(--ink);font-size:.9375rem}
.mr-typeahead__results a:hover{background:var(--lav)}
.mr-typeahead__results .t{font-family:var(--disp);font-size:.6875rem;text-transform:uppercase;letter-spacing:.05em;color:var(--violet);flex:none}

/* what we do */
.mr-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,5rem);align-items:center}
.mr-split__media{position:relative}
.mr-split__media img{width:100%;border-radius:var(--r-card);box-shadow:var(--sh-card)}
.mr-split__badge{position:absolute;left:-1.2rem;top:34%;background:#fff;border-radius:var(--r-sm);box-shadow:var(--sh-card);padding:.9rem .7rem;font-family:var(--disp);font-weight:700;text-align:center}
.mr-split__badge b{font-size:1.5rem;color:var(--indigo);display:block;line-height:1}
.mr-split__badge span{font-size:.7rem;color:var(--muted)}
.mr-stats{display:flex;gap:clamp(2rem,5vw,3.5rem);margin-top:2rem}
.mr-stat b{font-family:var(--disp);font-weight:700;font-size:clamp(2.2rem,1.4rem + 2.4vw,3.2rem);color:var(--ink);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;display:block}
.mr-stat span{font-family:var(--body);font-size:.9375rem;color:var(--muted)}
@media (max-width:820px){.mr-split{grid-template-columns:1fr}.mr-split__badge{left:.6rem}}

/* top featured */
.mr-featured{display:grid;grid-template-columns:repeat(6,1fr);gap:1.1rem}
.mr-feat{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-rec);padding:1.25rem 1rem;text-align:center;box-shadow:var(--sh-soft);transition:transform .18s ease,box-shadow .18s ease;overflow:hidden}
.mr-feat::before{content:"";position:absolute;left:0;top:0;width:16px;height:16px;background:var(--coral);clip-path:polygon(0 0,100% 0,0 100%)}
.mr-feat:hover{transform:translateY(-4px);box-shadow:var(--sh-card)}
.mr-feat__logo{height:56px;display:flex;align-items:center;justify-content:center;margin-bottom:.9rem}
.mr-feat__logo img{max-height:56px;width:auto;object-fit:contain}
.mr-feat__logo span{font-family:var(--disp);font-weight:800;font-size:1.6rem;color:var(--indigo-deep)}
.mr-feat h3{font-size:.9375rem;font-weight:700;margin:0 0 .4rem}
.mr-feat p{font-family:var(--body);font-size:.75rem;color:var(--muted);margin:.15rem 0;display:flex;align-items:center;justify-content:center;gap:.3rem}
.mr-feat p svg{width:12px;height:12px;color:var(--violet);flex:none}
@media (max-width:1000px){.mr-featured{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.mr-featured{grid-template-columns:repeat(2,1fr)}}

/* directory list */
.mr-band--dir{background:var(--lav);background-image:repeating-linear-gradient(135deg,rgba(83,51,255,.028) 0 1px,transparent 1px 9px)}
.mr-dirlist{display:grid;gap:1.25rem;max-width:1040px;margin:0 auto}
.mr-dcard{position:relative;display:grid;grid-template-columns:180px 1fr;gap:1.75rem;align-items:center;background:#fff;border-radius:var(--r-rec);box-shadow:var(--sh-card);padding:1.4rem;transition:transform .16s ease;overflow:hidden}
.mr-dcard::before{content:"";position:absolute;left:0;top:0;width:20px;height:20px;background:var(--coral);clip-path:polygon(0 0,100% 0,0 100%)}
.mr-dcard:hover{transform:translateY(-3px)}
.mr-dcard__logo{aspect-ratio:1;border:1px solid var(--line);border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;padding:1.1rem;overflow:hidden}
.mr-dcard__logo img{max-width:100%;max-height:100%;object-fit:contain}
.mr-dcard__logo span{font-family:var(--disp);font-weight:800;font-size:2.2rem;color:var(--indigo-deep)}
.mr-dcard h3{font-size:1.15rem;font-weight:700;margin:0 0 .5rem}
.mr-dcard h3 a:hover{color:var(--indigo)}
.mr-dcard__row{display:flex;align-items:flex-start;gap:.55rem;font-size:.9rem;color:var(--text);margin:.25rem 0}
.mr-dcard__row svg{width:15px;height:15px;color:var(--violet);flex:none;margin-top:.12rem}
.mr-dcard__foot{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-top:.7rem}
.mr-dtag{font-family:var(--disp);font-size:.75rem;font-weight:600;color:var(--indigo-deep);background:var(--lav-2);border-radius:var(--r-pill);padding:.25rem .8rem}
.mr-dcard__rating{display:inline-flex;align-items:center;gap:.3rem;font-family:var(--disp);font-weight:700;font-size:.8125rem;color:var(--ink)}
.mr-dcard__rating svg{width:13px;height:13px;color:var(--gold)}
@media (max-width:640px){.mr-dcard{grid-template-columns:1fr}.mr-dcard__logo{max-width:130px}}

/* why choose */
.mr-why{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,6vw,5rem);align-items:center}
.mr-cluster{position:relative;min-height:440px}
.mr-cluster img{position:absolute;border-radius:var(--r-card);box-shadow:var(--sh-card);object-fit:cover}
.mr-cluster img:nth-of-type(1){width:58%;left:0;top:5%;aspect-ratio:3/4;z-index:2}
.mr-cluster img:nth-of-type(2){width:47%;right:0;top:0;aspect-ratio:4/3}
.mr-cluster img:nth-of-type(3){width:47%;right:5%;bottom:2%;aspect-ratio:4/3;z-index:3}
.mr-cluster__blob{position:absolute;left:-7%;top:-9%;width:44%;aspect-ratio:1;background:var(--coral);border-radius:46% 54% 60% 40% / 42% 58% 42% 58%;z-index:0;opacity:.9}
.mr-cluster__hand{position:absolute;left:6%;bottom:5%;font-family:var(--hand);font-size:2.6rem;color:#fff;z-index:4;text-shadow:0 2px 12px rgba(0,0,0,.35);transform:rotate(-6deg)}
.mr-why__body p strong{color:var(--indigo-deep)}
@media (max-width:820px){.mr-why{grid-template-columns:1fr}.mr-cluster{min-height:340px}}

/* benefits */
.mr-benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem 2.5rem}
.mr-benefit{display:grid;grid-template-columns:auto 1fr;gap:.9rem}
.mr-benefit__i{width:30px;height:30px;border-radius:var(--r-pill);background:var(--coral-soft);display:grid;place-items:center;flex:none}
.mr-benefit__i svg{width:15px;height:15px;color:var(--coral)}
.mr-benefit h3{font-size:1.05rem;font-weight:700;margin:.1rem 0 .3rem}
.mr-benefit p{font-family:var(--body);font-size:.9375rem;color:var(--muted);margin:0}
@media (max-width:900px){.mr-benefits{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.mr-benefits{grid-template-columns:1fr}}

/* testimonial */
.mr-testi{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,6vw,4.5rem);align-items:center}
.mr-testi__media{position:relative}
.mr-testi__media img{width:100%;border-radius:var(--r-card);box-shadow:var(--sh-card)}
.mr-testi__chip{position:absolute;left:-1rem;bottom:-1rem;background:#fff;border-radius:var(--r-sm);box-shadow:var(--sh-card);padding:.8rem 1rem;text-align:center;font-family:var(--disp)}
.mr-testi__chip b{display:block;font-size:1.4rem;color:var(--ink);font-weight:800}
.mr-testi__chip span{font-size:.75rem;color:var(--muted)}
.mr-testi__body{position:relative}
.mr-testi__body::before{content:"\201D";position:absolute;right:0;top:-3.5rem;font-family:var(--disp);font-size:9rem;color:var(--lav-2);line-height:1;z-index:0}
.mr-testi__body > *{position:relative}
.mr-stars{color:var(--gold);letter-spacing:.15em;margin-bottom:.75rem;font-size:1.05rem}
.mr-testi__q{font-family:var(--disp);font-weight:500;font-size:clamp(1.1rem,1rem + .6vw,1.4rem);color:var(--ink);line-height:1.45;margin:0 0 1rem}
.mr-testi__who b{font-family:var(--disp);color:var(--ink);display:block;border-top:2px solid var(--coral);padding-top:.5rem;width:max-content;max-width:100%}
.mr-testi__who span{font-size:.875rem;color:var(--muted)}
@media (max-width:820px){.mr-testi{grid-template-columns:1fr}}

/* cta */
.mr-cta{position:relative;color:#fff;overflow:hidden}
.mr-cta__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mr-cta::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(16,14,28,.9) 0%,rgba(20,15,60,.78) 55%,rgba(27,20,100,.45) 100%)}
.mr-cta__in{position:relative;z-index:1;padding:var(--s-band) 0;max-width:640px}
.mr-cta h2{color:#fff}
.mr-cta p{color:rgba(255,255,255,.88)}

/* blog */
.mr-blogs{display:grid;grid-template-columns:repeat(3,1fr);gap:1.75rem}
.mr-blog{background:#fff;border:1px solid var(--line);border-radius:var(--r-rec);overflow:hidden;box-shadow:var(--sh-soft);transition:transform .16s ease,box-shadow .16s ease}
.mr-blog:hover{transform:translateY(-4px);box-shadow:var(--sh-card)}
.mr-blog__img{position:relative;aspect-ratio:16/10;background:var(--lav-2)}
.mr-blog__img img{width:100%;height:100%;object-fit:cover}
.mr-blog__date{position:absolute;right:0;top:1rem;background:var(--indigo-deep);color:#fff;font-family:var(--disp);font-weight:600;font-size:.8125rem;padding:.35rem .8rem .35rem 1rem;clip-path:polygon(12px 0,100% 0,100% 100%,12px 100%,0 50%)}
.mr-blog__body{padding:1.25rem}
.mr-blog__cat{font-family:var(--disp);font-size:.75rem;font-weight:600;color:var(--coral);background:var(--coral-soft);border-radius:var(--r-pill);padding:.22rem .7rem}
.mr-blog h3{font-size:1.1rem;font-weight:700;margin:.7rem 0 .4rem}
.mr-blog p{font-family:var(--body);font-size:.875rem;color:var(--muted);margin:0}
@media (max-width:900px){.mr-blogs{grid-template-columns:1fr}}

/* faq */
.mr-faq{max-width:900px;margin:0 auto;display:grid;gap:1rem}
.mr-faq details{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--sh-soft);overflow:hidden}
.mr-faq summary{font-family:var(--disp);font-weight:600;font-size:1.0625rem;color:var(--ink);cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:1.15rem 1.4rem}
.mr-faq summary::-webkit-details-marker{display:none}
.mr-faq summary::after{content:"";width:11px;height:11px;border-right:2.5px solid var(--indigo);border-bottom:2.5px solid var(--indigo);transform:rotate(45deg);transition:transform .2s;flex:none}
.mr-faq details[open] summary{color:var(--indigo)}
.mr-faq details[open] summary::after{transform:rotate(-135deg)}
.mr-faq .a{font-family:var(--body);font-size:.9375rem;color:var(--text);padding:0 1.4rem 1.3rem}

/* footer */
.mr-foot{background:var(--footer);color:rgba(255,255,255,.72);padding:var(--s-8) 0 var(--s-6)}
.mr-foot__cols{display:grid;grid-template-columns:1.4fr 1fr 1.2fr;gap:3rem}
.mr-foot .mr-word{color:#fff;margin-bottom:1rem}
/* the 44ch measure is for the blurb inside the columns — scoped there so it
   cannot also constrain .mr-foot__fine, whose border-top is meant to span
   the whole footer */
.mr-foot__cols p{font-size:.9375rem;max-width:44ch;line-height:1.7}
.mr-foot h4{font-family:var(--disp);font-weight:700;color:#fff;font-size:1.1rem;margin:0 0 1.1rem}
.mr-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.mr-foot a{font-size:.9375rem;color:rgba(255,255,255,.72)}
.mr-foot a:hover{color:#fff}
.mr-foot__fine{margin-top:var(--s-6);padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.1);font-size:.8125rem;text-align:center}
@media (max-width:820px){.mr-foot__cols{grid-template-columns:1fr}}

/* =========================================================================
   INNER PAGES
   ========================================================================= */
.mr-page{padding-block:clamp(2.5rem,5vw,4rem)}
.mr-crumb{font-family:var(--disp);font-size:.8125rem;font-weight:600;color:var(--muted);margin-bottom:1rem}
.mr-crumb a:hover{color:var(--indigo)}

.mr-rec-head{background:var(--lav);border-bottom:1px solid var(--line)}
.mr-rec-head__in{display:grid;grid-template-columns:1fr auto;gap:2.5rem;padding:2.25rem 0;align-items:start}
.mr-rec-id{display:grid;grid-template-columns:auto 1fr;gap:1.5rem;align-items:start}
.mr-rec-well{width:96px;height:96px;background:#fff;border:1px solid var(--line);border-radius:var(--r-rec);display:grid;place-items:center;overflow:hidden;box-shadow:var(--sh-soft)}
.mr-rec-well img{width:100%;height:100%;object-fit:contain;padding:.7rem}
.mr-rec-well span{font-family:var(--disp);font-weight:800;font-size:2.2rem;color:var(--indigo-deep)}
.mr-rec-id h1{font-family:var(--disp);font-size:clamp(1.7rem,1.2rem + 2vw,2.6rem);font-weight:800;letter-spacing:-.025em;margin:0 0 .4rem}
.mr-rec-id__meta{font-family:var(--body);font-size:.9375rem;color:var(--muted);margin:0 0 .7rem}
.mr-rec-id__marks{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.8rem}
.mr-rec-id__lede{font-size:1rem;color:var(--text);max-width:52ch;margin:0}
.mr-rec-rail{display:grid;gap:.7rem}
.mr-rec-rail .mr-btn{width:100%;justify-content:center}
.mr-rec-rail__meta{font-family:var(--body);font-size:.8125rem;color:var(--muted);display:grid;gap:.3rem;padding-top:.6rem;border-top:1px solid var(--line)}

.mr-mark{display:inline-flex;align-items:center;gap:.35rem;font-family:var(--disp);font-weight:600;font-size:.75rem;letter-spacing:.03em;text-transform:uppercase;padding:.3rem .7rem;border-radius:var(--r-pill);background:var(--lav-2);color:var(--indigo-deep)}
.mr-mark svg{width:12px;height:12px}
.mr-mark--verified{background:var(--teal-wash);color:var(--teal)}
.mr-mark--expired{background:var(--amber-wash);color:var(--amber)}
.mr-mark--suspended{background:var(--red-wash);color:var(--red)}
.mr-mark--listed{background:var(--lav-2);color:var(--muted)}

.mr-rec-body{display:grid;grid-template-columns:1fr 300px;gap:clamp(2rem,5vw,4rem);padding:2.5rem 0}
.mr-rec-main section{padding:1.75rem 0;border-top:1px solid var(--line)}
.mr-rec-main section:first-child{border-top:0}
.mr-rec-main h2{font-family:var(--disp);font-size:1.4rem;font-weight:700;margin:0 0 1rem}
.mr-rd{font-family:var(--body);font-size:1rem;line-height:1.72;color:var(--text)}
.mr-rd p{max-width:64ch}
.mr-panel{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--sh-soft)}

.mr-snapgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}
.mr-snapgrid > div{background:#fff;padding:1rem 1.15rem}
.mr-snapgrid .k{font-family:var(--disp);font-size:.6875rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.mr-snapgrid .v{font-family:var(--body);font-weight:600;font-size:.9375rem;color:var(--ink);margin-top:.2rem}
@media (max-width:820px){.mr-snapgrid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.mr-snapgrid{grid-template-columns:1fr}}

.mr-table{width:100%;border-collapse:collapse;font-family:var(--body);font-size:.9375rem}
.mr-table td{padding:.7rem .9rem;border-bottom:1px solid var(--line);vertical-align:top}
.mr-table tr:last-child td{border-bottom:0}
.mr-table td:first-child{color:var(--muted);width:34%}
.mr-scroll{overflow-x:auto}
.mr-taglist{list-style:none;margin:1rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.mr-taglist li{font-family:var(--disp);font-weight:600;font-size:.8125rem;color:var(--indigo-deep);background:var(--lav-2);border-radius:var(--r-pill);padding:.3rem .9rem}
.mr-absent,.mr-empty{font-family:var(--body);font-style:italic;color:var(--muted);background:var(--lav);border-radius:var(--r-sm);padding:.9rem 1.1rem}
.mr-na{font-style:italic;color:var(--muted)}
.mr-notice{font-family:var(--body);font-size:.875rem;color:var(--muted);background:var(--lav);border-radius:var(--r-sm);padding:.9rem 1.1rem;margin:1rem 0}

.mr-subnav{position:sticky;top:var(--head-h,90px);z-index:20;background:#fff;box-shadow:0 1px 0 var(--line);margin-top:1.5rem}
.mr-subnav ul{display:flex;gap:.25rem;list-style:none;margin:0;padding:0;overflow-x:auto;scrollbar-width:none}
.mr-subnav ul::-webkit-scrollbar{display:none}
.mr-subnav a{font-family:var(--disp);font-weight:600;font-size:.8125rem;color:var(--muted);padding:.9rem .8rem;white-space:nowrap;border-bottom:3px solid transparent}
.mr-subnav a:hover,.mr-subnav a.is-active{color:var(--indigo);border-color:var(--indigo)}
.mr-subnav select{display:none;width:100%;font-family:var(--disp);padding:.8rem;border:0}
@media (max-width:720px){.mr-subnav ul{display:none}.mr-subnav select{display:block}}

.mr-ps{display:grid;gap:1.25rem;margin-top:1rem}
.mr-ps__item{display:grid;grid-template-columns:170px 1fr;gap:1.25rem;padding-bottom:1.25rem;border-bottom:1px solid var(--line)}
.mr-ps__item:last-child{border-bottom:0}
.mr-ps__item img{width:170px;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-sm)}
@media (max-width:560px){.mr-ps__item{grid-template-columns:1fr}}
.mr-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin-top:1rem}
.mr-gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-sm)}
.mr-gallery figcaption{font-family:var(--body);font-size:.75rem;color:var(--muted);margin-top:.3rem}
@media (max-width:600px){.mr-gallery{grid-template-columns:repeat(2,1fr)}}
.mr-timeline > div{display:grid;grid-template-columns:5rem minmax(0,1fr);gap:1rem;padding:.9rem 0;border-bottom:1px solid var(--line)}
.mr-timeline__b{min-width:0}
.mr-timeline__y{font-family:var(--disp);font-weight:700;color:var(--indigo)}
.mr-timeline__b p{font-family:var(--body);font-size:.9375rem;margin:0}
.mr-timeline__b .src{font-family:var(--body);font-size:.75rem;color:var(--muted);margin-top:.2rem}
.mr-people{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem;margin-top:1rem}
.mr-person{display:grid;grid-template-columns:64px 1fr;gap:1rem}
.mr-person img{width:64px;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-sm)}
.mr-person h3{font-size:1rem;margin:0 0 .2rem}
.mr-person p{font-family:var(--body);font-size:.875rem;margin:0}
@media (max-width:600px){.mr-people{grid-template-columns:1fr}}
.mr-sources{list-style:none;margin:1rem 0 0;padding:0;font-family:var(--body);font-size:.9375rem}
.mr-sources li{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:.6rem 0;border-bottom:1px solid var(--line)}
.mr-sources .d{font-family:var(--body);font-size:.75rem;color:var(--muted)}
.mr-history{list-style:none;margin:1rem 0 0;padding:0;font-family:var(--body);font-size:.875rem}
.mr-history li{padding:.3rem 0}
.mr-history time{font-size:.75rem;color:var(--muted);margin-right:.7rem}

.mr-rec-aside .mr-panel{padding:1.25rem}
.mr-comp__pct{font-family:var(--disp);font-weight:800;font-size:2.4rem;color:var(--indigo-deep);line-height:1}
.mr-comp__meter{height:8px;border-radius:var(--r-pill);background:var(--lav-2);margin:.7rem 0;overflow:hidden}
.mr-comp__meter span{display:block;height:100%;background:var(--indigo);border-radius:var(--r-pill)}
.mr-comp__note{font-family:var(--body);font-size:.75rem;color:var(--muted);margin:0}
.mr-comp__list{list-style:none;margin:1rem 0 0;padding:1rem 0 0;border-top:1px solid var(--line);font-family:var(--body);font-size:.8125rem;display:grid;gap:.45rem}
.mr-comp__list li{color:var(--muted);display:flex;gap:.5rem}
.mr-comp__list li::before{content:"○";color:var(--line)}
.mr-comp__list li.has{color:var(--text)}
.mr-comp__list li.has::before{content:"●";color:var(--indigo)}
@media (max-width:920px){.mr-rec-head__in,.mr-rec-body{grid-template-columns:1fr}.mr-rec-rail{max-width:340px}}

.mr-correction{background:var(--lav);border-radius:var(--r-card);padding:1.5rem;margin-top:1.5rem}
.mr-verify-note{font-family:var(--body);font-size:.9375rem;background:var(--lav);border-radius:var(--r-sm);padding:1rem 1.15rem}
.mr-verify-note--yes{background:var(--teal-wash);color:var(--teal)}

/* verification record */
.mr-vr{max-width:820px;margin:0 auto}
.mr-vr__doc{background:#fff;border:1px solid var(--teal-wash);border-top:4px solid var(--teal);border-radius:var(--r-card);box-shadow:var(--sh-card);overflow:hidden}
.mr-vr__head{display:flex;align-items:center;gap:1rem;padding:1.4rem 1.6rem;background:var(--teal-wash)}
.mr-vr__head svg{width:26px;height:26px;color:var(--teal);flex:none}
.mr-vr__cn{font-family:var(--disp);font-weight:800;font-size:1.35rem;color:var(--ink)}
.mr-vr__id{font-family:var(--body);font-size:.8125rem;color:var(--teal);margin-top:.15rem}
.mr-vr__sp{flex:1}
.mr-vr__band{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line)}
.mr-vr__band > div{padding:1.1rem 1.4rem;border-right:1px solid var(--line)}
.mr-vr__band > div:last-child{border-right:0}
.mr-vr__band .k{font-family:var(--disp);font-size:.625rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.mr-vr__band .v{font-family:var(--body);font-weight:600;font-size:.9375rem;color:var(--ink);margin-top:.2rem}
.mr-vr__scope{padding:1.4rem 1.6rem}
.mr-vr__scope h3{font-family:var(--disp);font-size:1.1rem;margin:0 0 .5rem}
.mr-vr__sr{display:flex;align-items:center;gap:.7rem;padding:.5rem 0;font-family:var(--body);font-size:.9375rem}
.mr-vr__sr svg{width:16px;height:16px;color:var(--teal);flex:none}
.mr-vr__sr--out{color:var(--muted)}
.mr-vr__sr--out span:first-child{width:16px;height:16px;border:1px solid var(--line);border-radius:4px;flex:none}
.mr-vr__limit{font-family:var(--body);font-size:.9375rem;color:var(--muted);background:var(--lav);border-radius:var(--r-sm);padding:1.1rem 1.3rem;margin:1.5rem 0}

/* pill search (inner pages / directory) */
.mr-search{display:flex;max-width:600px;background:#fff;border:1px solid var(--line);border-radius:var(--r-pill);box-shadow:var(--sh-soft);padding:.35rem;margin:1.25rem 0}
.mr-search input{flex:1;border:0;background:none;font-family:var(--body);font-size:.9375rem;padding:.7rem 1.1rem;outline:none}
.mr-search button{border:0;background:var(--indigo);color:#fff;font-family:var(--disp);font-weight:600;border-radius:var(--r-pill);padding:0 1.4rem;cursor:pointer}

.mr-stories{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.mr-story{display:flex;flex-direction:column}
.mr-story img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--r-card);margin-bottom:.8rem}
.mr-story__k{font-family:var(--disp);font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--indigo-deep);margin-bottom:.3rem}
.mr-story h3{font-size:1.15rem;margin:0 0 .35rem}
.mr-story p{font-family:var(--body);font-size:.875rem;color:var(--muted);margin:0}
@media (max-width:820px){.mr-stories{grid-template-columns:1fr}}

/* forms */
.mr-form{max-width:600px;font-family:var(--body)}
.mr-form label{display:block;font-family:var(--disp);font-weight:600;font-size:.8125rem;margin:0 0 1rem}
.mr-form input,.mr-form textarea,.mr-form select{width:100%;font-family:var(--body);font-size:.9375rem;margin-top:.35rem;padding:.7rem .8rem;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff}
.mr-form input:focus,.mr-form textarea:focus{outline:2px solid var(--violet);outline-offset:-1px}
.mr-form__grid{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
.mr-form__consent{font-family:var(--body);font-weight:400;font-size:.8125rem;display:flex;gap:.5rem;align-items:flex-start}
.mr-form__consent input{width:auto;margin-top:.2rem}
.mr-req{color:var(--red)}
.mr-hp{position:absolute;left:-9999px}
.mr-form__err{background:var(--red-wash);color:var(--red);border-radius:var(--r-sm);padding:.7rem .9rem;font-size:.8125rem;margin-bottom:1rem}
.mr-form--done p{background:var(--teal-wash);color:var(--teal);border-radius:var(--r-sm);padding:1rem}
.mr-form__title{font-family:var(--disp);margin:0 0 .3rem}
.mr-form__intro{font-size:.9375rem;color:var(--muted);margin:0 0 1.25rem}
@media (max-width:560px){.mr-form__grid{grid-template-columns:1fr}}

.mr-prose{font-family:var(--body);font-size:1.05rem;line-height:1.75;max-width:66ch}
.mr-prose h2{font-family:var(--disp);font-size:1.5rem;margin:1.6em 0 .5em}
.mr-prose h3{font-size:1.15rem;margin:1.4em 0 .4em}
.mr-prose a{color:var(--violet);border-bottom:1px solid var(--violet)}
.mr-prose blockquote{margin:1.5em 0;padding-left:1.2rem;border-left:3px solid var(--indigo);font-style:italic;color:var(--ink)}

/* compat aliases for not-yet-rebuilt templates */
.mr-lede{font-family:var(--body);font-size:1.05rem;color:var(--text);max-width:56ch}
.mr-kicker{font-family:var(--disp);font-weight:700;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--violet)}
.mr-shead{margin-bottom:1.5rem}
.mr-shead h2{font-family:var(--disp)}
.mr-band--panel{background:#fff}
.mr-band--navy{background:var(--indigo-deep);color:#fff}
.mr-band--navy h1,.mr-band--navy h2,.mr-band--navy h3{color:#fff}
.mr-band--navy .mr-eyebrow{color:#8c7dff}
.mr-band--navy p{color:rgba(255,255,255,.88)}
.mr-btn--outline{--bg:transparent;--fg:var(--indigo);--bd:var(--indigo);box-shadow:none}
.mr-btn--outline:hover{--bg:var(--indigo);--fg:#fff}
.mr-btn--link,.mr-btn--text{border:0;box-shadow:none;background:none;color:var(--violet);font-family:var(--disp);font-weight:600;padding:.4rem 0;min-height:0;text-transform:none}
.mr-btn--solid{--bg:var(--indigo)}
.mr-searchbig{display:flex;max-width:600px;background:#fff;border:1px solid var(--line);border-radius:var(--r-pill);box-shadow:var(--sh-soft);padding:.35rem;margin:1.25rem 0}
.mr-searchbig input{flex:1;border:0;background:none;font-family:var(--body);padding:.7rem 1.1rem;outline:none}
.mr-story-card{display:flex;flex-direction:column}
.mr-story-card img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--r-card);margin-bottom:.8rem}
.mr-story-card__body{padding:0}
.mr-story-card__k{font-family:var(--disp);font-size:.6875rem;font-weight:600;text-transform:uppercase;color:var(--indigo-deep);display:block;margin-bottom:.3rem}
.mr-story-card h3{font-size:1.15rem;margin:0 0 .35rem}
.mr-story-card p{font-family:var(--body);font-size:.875rem;color:var(--muted);margin:0;max-width:none}
.mr-cells{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.mr-cell{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:1.5rem;box-shadow:var(--sh-soft);text-decoration:none;display:block}
.mr-cell__num{font-family:var(--disp);font-weight:800;font-size:1.6rem;color:var(--indigo);display:block;margin-bottom:.5rem}
.mr-cell h3{font-size:1.05rem;margin:0 0 .3rem}
.mr-cell p{font-family:var(--body);font-size:.875rem;color:var(--muted);margin:0;max-width:none}
.mr-steps{display:grid;grid-template-columns:repeat(var(--n,4),1fr);gap:1.25rem}
.mr-steps > div,.mr-step{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:1.25rem;box-shadow:var(--sh-soft)}
.mr-steps__k,.mr-step__k{font-family:var(--disp);font-weight:700;font-size:.75rem;text-transform:uppercase;color:var(--violet)}
.mr-steps h3,.mr-step h3{font-size:1rem;margin:.4rem 0 .3rem}
.mr-steps p,.mr-step p{font-family:var(--body);font-size:.875rem;color:var(--muted);margin:0}
@media (max-width:820px){.mr-steps{grid-template-columns:1fr}}
.mr-dl{font-family:var(--body)}
.mr-dl > div{display:grid;grid-template-columns:1fr auto;gap:1rem;padding:.6rem 0;border-bottom:1px solid var(--line)}
.mr-dl .lead{display:none}
.mr-dl dt{color:var(--muted)}
.mr-dl dd{margin:0;font-weight:600;color:var(--ink)}
.mr-spec{background:#fff;border-radius:var(--r-card);box-shadow:var(--sh-card);overflow:hidden}
.mr-spec__tab{font-family:var(--disp);font-size:.625rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--indigo-deep);background:var(--lav);padding:.6rem 1rem}
.mr-spec__body{padding:1.25rem}
.mr-spec__name{font-family:var(--disp);font-weight:800;font-size:1.4rem;color:var(--ink);margin-bottom:.6rem}
.mr-spec__vbar{margin:1rem -1.25rem -1.25rem;padding:.8rem 1.25rem;background:var(--indigo-deep);color:#fff;font-family:var(--disp);font-weight:600;font-size:.8125rem;display:flex;justify-content:space-between}
.mr-spec__vbar b{color:#7bdcb5}
.mr-roman{font-family:var(--disp);font-weight:800;font-size:1.5rem;color:var(--indigo);display:block;margin-bottom:.5rem}
.mr-hero__ctas{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1.5rem}
.mr-rec-id__well{width:96px;height:96px;background:#fff;border:1px solid var(--line);border-radius:var(--r-card);display:grid;place-items:center;overflow:hidden}
.mr-chapter{margin-bottom:1.5rem}
.mr-chapter__num{font-family:var(--disp);font-weight:800;color:var(--indigo);font-size:1.5rem}
.mr-chapter__kicker{font-family:var(--disp);font-weight:700;font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;color:var(--violet);display:block;margin-bottom:.3rem}
.mr-cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.mr-cols3 p{font-family:var(--body);font-size:.9375rem}
.mr-vr__card{background:#fff;border-radius:var(--r-card);box-shadow:var(--sh-card);overflow:hidden;border-top:4px solid var(--teal)}
.mr-vr__head .mr-vr__cn{font-family:var(--disp)}
.mr-rechistory{list-style:none;margin:1rem 0 0;padding:0;font-family:var(--body);font-size:.875rem}
.mr-rechistory time{font-size:.75rem;color:var(--muted);margin-right:.7rem}
.mr-dir__toolbar{display:flex;justify-content:space-between;font-family:var(--body);font-size:.875rem;color:var(--muted);margin-bottom:1rem}
.mr-dir__alpha{display:flex;flex-wrap:wrap;gap:.25rem;font-family:var(--disp);font-weight:600;margin:1rem 0}
.mr-dir__alpha a{padding:.35rem .6rem;border-radius:var(--r-sm)}
.mr-dir__alpha a[aria-current]{background:var(--indigo);color:#fff}
.mr-dir__filters h3{font-family:var(--disp);font-size:.75rem;text-transform:uppercase;color:var(--muted);margin:1rem 0 .5rem}
/* .mr-dir__row / __well / __name / __meta / __desc / __rt — see DIRECTORY ROWS section below */

.sr-only,.screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}
.mr-i{flex:none;vertical-align:-.14em}

@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important}}
.mr-label{font-family:var(--disp);font-weight:700;font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.mr-mono{font-family:var(--body)}

/* directory archive layout (was missing) */
.mr-dir-hero{background:var(--lav);padding:clamp(2rem,4vw,3.5rem) 0}
.mr-dir{display:grid;grid-template-columns:240px 1fr;gap:2.5rem;padding:2.5rem 0;align-items:start}
.mr-dir__filters{position:sticky;top:calc(var(--head-h,90px) + 1rem);background:#fff;border:1px solid var(--line);border-radius:var(--r-rec);box-shadow:var(--sh-soft);padding:1.4rem;font-family:var(--body);font-size:.875rem}
.mr-dir__filters fieldset{border:0!important;margin:0 0 1.25rem;padding:0}
.mr-dir__filters legend{font-family:var(--disp);font-weight:700;font-size:.75rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin:0 0 .5rem;padding:0}
.mr-dir__filters label{display:flex;gap:.5rem;align-items:baseline;padding:.22rem 0;line-height:1.4}
.mr-dir__filters select{width:100%;font-family:var(--body);padding:.5rem;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff}
.mr-alpha{display:flex;flex-wrap:wrap;gap:.25rem;font-family:var(--disp);font-weight:600;font-size:.8125rem;margin:1rem 0}
.mr-alpha a{width:2rem;height:2rem;display:grid;place-items:center;border-radius:var(--r-sm);color:var(--ink)}
.mr-alpha a:hover{background:var(--lav-2)}
.mr-alpha a[aria-current]{background:var(--indigo);color:#fff}
.mr-alpha .off{color:var(--line);pointer-events:none}
.mr-dir__bar{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--body);font-size:.875rem;color:var(--muted);margin-bottom:1.25rem;flex-wrap:wrap;gap:.5rem}
.mr-dir__bar a[aria-current]{color:var(--indigo);font-weight:600}
.mr-pag{padding:2rem 0}
.mr-pag .nav-links{display:flex;gap:.4rem;font-family:var(--disp);font-weight:600;flex-wrap:wrap}
.mr-pag .page-numbers{padding:.5rem .85rem;border-radius:var(--r-sm);border:1px solid var(--line)}
.mr-pag .page-numbers.current{background:var(--indigo);color:#fff;border-color:var(--indigo)}
@media (max-width:900px){.mr-dir{grid-template-columns:1fr}.mr-dir__filters{position:static}}

/* =========================================================================
   DIRECTORY ROWS + INNER-PAGE COMPONENTS (listing.my design, row layout)
   ========================================================================= */
.mr-dir__row{display:grid;grid-template-columns:76px 1fr minmax(140px,auto);gap:1.5rem;padding:1.6rem 0;border-bottom:1px solid var(--line);align-items:start}
.mr-dir__row:first-of-type{border-top:1px solid var(--line)}
.mr-dir__well{width:76px;height:76px;border:1px solid var(--line);border-radius:var(--r-rec);display:grid;place-items:center;overflow:hidden;background:#fff;transition:box-shadow .16s}
.mr-dir__well:hover{box-shadow:var(--sh-soft)}
.mr-dir__well img{max-width:100%;max-height:100%;object-fit:contain;padding:.5rem}
.mr-dir__well span{font-family:var(--disp);font-weight:800;font-size:1.6rem;color:var(--indigo-deep)}
.mr-dir__name{font-family:var(--disp);font-weight:700;font-size:1.2rem;letter-spacing:-.015em;margin:0}
.mr-dir__name a:hover{color:var(--indigo)}
.mr-dir__meta{font-family:var(--body);font-size:.8125rem;color:var(--muted);margin:.25rem 0 .45rem;display:flex;align-items:center;gap:.35rem;flex-wrap:wrap}
.mr-dir__meta svg{color:var(--gold)}
.mr-dir__desc{font-family:var(--body);font-size:.9rem;color:var(--text);margin:0;max-width:64ch;line-height:1.55}
.mr-dir__rt{text-align:right;display:grid;gap:.55rem;justify-items:end;font-family:var(--body);font-size:.75rem;color:var(--muted)}
.mr-dir__rt .mr-link{font-size:.8125rem}
.mr-dir__n{display:none}
@media (max-width:720px){
  .mr-dir__row{grid-template-columns:56px 1fr}
  .mr-dir__well{width:56px;height:56px}
  .mr-dir__rt{grid-column:1/-1;text-align:left;justify-items:start;flex-direction:row;display:flex;flex-wrap:wrap;gap:.75rem 1rem;align-items:center}
}

/* page header (stories / people / industry / policy / search) */
.mr-phead{background:var(--lav);padding:clamp(2.25rem,4vw,3.75rem) 0}
.mr-phead h1{font-family:var(--disp);font-size:clamp(1.9rem,1.3rem + 2.4vw,3rem);font-weight:800;letter-spacing:-.025em}
.mr-phead .mr-lead{margin-top:.6rem;max-width:60ch}
/* first section after the page header shouldn't double the vertical air */
.mr-phead + .mr-band{padding-top:clamp(2rem,3.5vw,3.25rem)}
/* lavender-on-lavender: the header and the next band read as one zone */
.mr-phead + .mr-band--lav{padding-top:clamp(1.25rem,2.5vw,2rem);margin-top:0}

/* featured / lead article (stories home, industry) */
.mr-lead-card{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(1.5rem,4vw,3rem);align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--r-rec);box-shadow:var(--sh-card);overflow:hidden;position:relative}
.mr-lead-card::before{content:"";position:absolute;left:0;top:0;width:20px;height:20px;background:var(--coral);clip-path:polygon(0 0,100% 0,0 100%);z-index:1}
.mr-lead-card img{width:100%;height:100%;min-height:280px;object-fit:cover}
.mr-lead-card__body{padding:clamp(1.5rem,3vw,2.5rem) clamp(1.5rem,3vw,2.5rem) clamp(1.5rem,3vw,2.5rem) 0}
@media (max-width:760px){.mr-lead-card{grid-template-columns:1fr}.mr-lead-card__body{padding:1.5rem}}

/* category / industry tiles */
.mr-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.1rem}
.mr-tile{background:#fff;border:1px solid var(--line);border-radius:var(--r-rec);padding:1.4rem;box-shadow:var(--sh-soft);transition:transform .16s,box-shadow .16s;display:block;position:relative;overflow:hidden}
.mr-tile::before{content:"";position:absolute;left:0;top:0;width:14px;height:14px;background:var(--coral);clip-path:polygon(0 0,100% 0,0 100%)}
.mr-tile:hover{transform:translateY(-3px);box-shadow:var(--sh-card)}
.mr-tile h3{font-family:var(--disp);font-size:1.05rem;font-weight:700;margin:0 0 .35rem}
.mr-tile p{font-family:var(--body);font-size:.8125rem;color:var(--muted);margin:0}

/* people directory */
.mr-pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1.25rem}
.mr-pcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-rec);box-shadow:var(--sh-soft);overflow:hidden;transition:transform .16s}
.mr-pcard:hover{transform:translateY(-3px);box-shadow:var(--sh-card)}
.mr-pcard img{width:100%;aspect-ratio:4/5;object-fit:cover}
.mr-pcard__ph{width:100%;aspect-ratio:4/5;background:var(--lav-2);display:grid;place-items:center;font-family:var(--disp);font-weight:800;font-size:2rem;color:var(--indigo-deep)}
.mr-pcard__body{padding:1rem}
.mr-pcard h3{font-family:var(--disp);font-size:1.05rem;font-weight:700;margin:0 0 .2rem}
.mr-pcard p{font-family:var(--body);font-size:.8125rem;color:var(--muted);margin:0}

/* story article */
.mr-article{max-width:760px;margin:0 auto;padding-block:clamp(2rem,4vw,3.5rem)}
.mr-article__cat{font-family:var(--disp);font-weight:700;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--coral)}
.mr-article h1{font-family:var(--disp);font-size:clamp(1.9rem,1.3rem + 2.6vw,3rem);font-weight:800;letter-spacing:-.02em;margin:.5rem 0 .75rem}
.mr-article__deck{font-family:var(--body);font-size:1.15rem;color:var(--text);line-height:1.5;margin:0 0 1.25rem}
.mr-article__byline{font-family:var(--body);font-size:.8125rem;color:var(--muted);padding:.9rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:1.5rem}
.mr-article__hero{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-rec);margin-bottom:1.5rem}
.mr-article .mr-prose{max-width:none}

/* generic content page / policy */
.mr-doc{display:grid;grid-template-columns:230px 1fr;gap:3rem;align-items:start;padding-block:clamp(2rem,4vw,3.5rem)}
.mr-doc__nav{position:sticky;top:calc(var(--head-h,90px) + 1rem);font-family:var(--body);font-size:.875rem}
.mr-doc__nav p{font-family:var(--disp);font-weight:700;font-size:.6875rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 .75rem}
.mr-doc__nav ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.mr-doc__nav a{color:var(--muted)}
.mr-doc__nav a[aria-current]{color:var(--indigo);font-weight:600}
.mr-doc__nav a:hover{color:var(--indigo)}
@media (max-width:820px){.mr-doc{grid-template-columns:1fr}.mr-doc__nav{position:static}}

/* search results */
.mr-sgroup{margin-top:2rem}
.mr-sgroup h2{font-family:var(--disp);font-size:1.1rem;font-weight:700;padding-bottom:.6rem;border-bottom:2px solid var(--coral);display:inline-block;margin-bottom:.5rem}
.mr-srow{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 0;border-bottom:1px solid var(--line)}
.mr-srow h3{font-family:var(--disp);font-size:1.05rem;font-weight:700;margin:0}
.mr-srow h3 a:hover{color:var(--indigo)}
.mr-srow .k{font-family:var(--body);font-size:.75rem;color:var(--muted)}

/* 404 */
.mr-404{text-align:center;padding-block:clamp(3rem,8vw,7rem)}
.mr-404__code{font-family:var(--disp);font-weight:800;font-size:clamp(3rem,8vw,6rem);color:var(--coral);line-height:1;letter-spacing:-.04em}
.mr-404 h1{font-family:var(--disp);font-size:clamp(1.6rem,3vw,2.4rem);margin:.5rem 0 .75rem}

.mr-btn--link,.mr-btn--text{display:inline-flex;align-items:center;gap:.35rem}

/* =========================================================================
   MOBILE FIXES
   Grid and flex children default to min-width:auto, so they refuse to
   shrink below their content's intrinsic width and punch out of the
   viewport on small screens. That was the cause of the horizontal scroll
   on the Company Record (44px at 320px), the homepage testimonial and
   the directory search field.
   ========================================================================= */
.mr-rec-body > *,
.mr-rec-head__in > *,
.mr-rec-id > *,
.mr-testi > *,
.mr-dir > *,
.mr-doc > *,
.mr-split > *,
.mr-why > *,
.mr-lead-card > *{min-width:0}

.mr-search input,
.mr-searchbig input,
.mr-hsearch__f input,
.mr-hsearch__f select{min-width:0}
.mr-search,.mr-searchbig{max-width:100%}

@media (max-width:640px){
  /* the decorative blob is positioned outside its container on purpose;
     at narrow widths that bleed reaches past the viewport edge */
  .mr-cluster{overflow:hidden}

  /* controls (not inline prose links) need a real touch target */
  .mr-dir__alpha a,.mr-alpha a{min-width:2.5rem;min-height:2.5rem;display:inline-flex;align-items:center;justify-content:center}
  .mr-dir__filters label{padding:.5rem 0}
  .mr-dir__filters button,.mr-dir__filters .mr-btn--text,.mr-dir__filters a{min-height:2.75rem;display:inline-flex;align-items:center}
  .mr-pag .page-numbers{min-width:2.75rem;min-height:2.75rem;display:inline-flex;align-items:center;justify-content:center}
  .mr-dir__bar a{min-height:2.75rem;display:inline-flex;align-items:center}
  /* the directory row's own links are the primary action on the most
     used browse page — they were 21-23px, under the 24px minimum */
  .mr-dir__name a,.mr-dir__rt .mr-link{display:inline-flex;align-items:center;min-height:2.75rem}
  /* standalone link lists (footer columns, policy sidebar) are not
     inline prose links, so the 24px WCAG minimum does apply to them */
  .mr-foot ul{gap:.25rem}
  .mr-foot a{min-height:2.75rem;display:inline-flex;align-items:center}
  .mr-doc__nav a{min-height:2.75rem;display:inline-flex;align-items:center}

  /* the search pill gets cramped before it wraps */
  .mr-search button,.mr-searchbig button{padding:0 1rem}
}

/* the open mobile drawer shouldn't scroll the page behind it */
body.mr-nav-open{overflow:hidden}
@media (min-width:961px){body.mr-nav-open{overflow:visible}}

/* Long unbreakable tokens — in practice source URLs — were forcing their
   container wider than the viewport (a 41-character URL rendered 250px
   wide inside a 189px timeline column, giving the Company Record 44px of
   horizontal scroll on a 320px screen). `anywhere` rather than
   `break-word` because it also lowers the min-content width, which is
   what lets the grid track actually shrink. */
.mr-timeline__b .src,
.mr-sources li,
.mr-sources span,
.mr-rec-rail__meta{overflow-wrap:anywhere}

/* Site-wide safety net: no single long token should ever be able to push
   the page sideways again. */
body{overflow-wrap:break-word}

/* =========================================================================
   SELECTS
   Every dropdown on the site was rendering as a raw browser control: the
   Company Record's "On this page" jump menu had border:0 and no styling at
   all, and the homepage hero selects had appearance:none with no
   replacement arrow, so they read as plain text with no affordance.
   One component, three contexts.

   The closed control is fully ours. The open option list is drawn by the
   OS: option colours below land on Windows/Linux Chrome and Firefox, while
   macOS/iOS deliberately render their own picker. color-scheme:light stops
   that native list going dark on a dark-mode OS against this light site.
   ========================================================================= */
.mr-form select,
.mr-dir__filters select,
.mr-subnav select,
.mr-hsearch__f select{
  appearance:none;-webkit-appearance:none;
  color-scheme:light;
  font-family:var(--body);
  font-size:.9375rem;
  color:var(--ink);
  cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23392FA2' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right .8rem center;
  background-size:1.05rem 1.05rem;
  padding-right:2.5rem;
}
.mr-form select option,
.mr-dir__filters select option,
.mr-subnav select option,
.mr-hsearch__f select option{background:var(--paper);color:var(--ink)}
.mr-form select:disabled,
.mr-dir__filters select:disabled{color:var(--muted);cursor:not-allowed;opacity:.7}

/* boxed field — directory filters and every form */
.mr-form select,
.mr-dir__filters select{
  background-color:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  padding-top:.7rem;padding-bottom:.7rem;padding-left:.85rem;
  min-height:2.75rem;
  transition:border-color .16s ease, box-shadow .16s ease;
}
.mr-form select:hover,
.mr-dir__filters select:hover{border-color:var(--indigo)}

/* inside the hero's white search pill — borderless, but it still needs to
   look like something you can open */
.mr-hsearch__f select{
  background-color:transparent;
  border:0;
  padding-left:0;
  min-height:2.5rem;
}

/* the Company Record's mobile "On this page" jump menu */
.mr-subnav select{
  background-color:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  font-family:var(--disp);
  font-weight:600;
  padding:.8rem .85rem;
  padding-right:2.5rem;
  min-height:2.75rem;
  margin:.6rem 0;
}
.mr-subnav select:hover{border-color:var(--indigo)}

/* Checkboxes sit right beside the filter select and were equally raw.
   accent-color recolours the native control to brand indigo without
   giving up any of its built-in keyboard/screen-reader behaviour — a
   full appearance:none rebuild would trade real accessibility for looks. */
.mr-dir__filters input[type="checkbox"],
.mr-form input[type="checkbox"],
.mr-form input[type="radio"],
.mr-form__consent input[type="checkbox"]{
  accent-color:var(--indigo);
  width:1.05rem;height:1.05rem;
  flex:none;
  cursor:pointer;
}
.mr-dir__filters label{align-items:center;cursor:pointer}
.mr-dir__filters label:hover{color:var(--indigo)}

/* =========================================================================
   DESIGNED DROPDOWN  (pairs with assets/js/select.js)

   The SELECTS block above styles the closed control, which is all CSS can
   reach — the open option list belongs to the OS, which is why the hero's
   location and industry menus still dropped a raw system popup with the
   system accent colour. select.js replaces that list with markup we own;
   everything below draws it.

   The native <select> stays in the DOM as the form's real field and is only
   hidden once its replacement exists, so a no-JS visitor keeps a working
   control and never sees these styles at all.
   ========================================================================= */
.mr-sel{position:relative;min-width:0}
.mr-sel__native{
  /* not display:none — a hidden-but-present field keeps form semantics and
     validation intact; it is simply nowhere on screen */
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  border:0;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;
}

.mr-sel__btn{
  display:flex;align-items:center;gap:.5rem;width:100%;
  font-family:var(--body);font-size:.9375rem;line-height:1.3;
  color:var(--ink);text-align:left;cursor:pointer;
  background:transparent;border:0;padding:0;
  /* the chevron, matching the one the closed native control used */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23392FA2' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .1rem center;background-size:1.05rem;
  padding-right:1.9rem;
  transition:color .16s ease;
}
.mr-sel__val{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
/* the untouched "Any location" / "Any industry" default reads as a
   placeholder, not as a value the user picked */
.mr-sel.is-any .mr-sel__val{color:var(--muted)}
.mr-sel__btn:hover{color:var(--indigo)}
.mr-sel.is-open .mr-sel__btn{color:var(--indigo)}
.mr-sel.is-open .mr-sel__btn,
.mr-sel__btn:focus-visible{outline:none}
.mr-sel__btn:focus-visible{color:var(--indigo);text-decoration:underline;text-underline-offset:4px}

.mr-sel__list{
  /* fixed, not absolute: .mr-hero has overflow:hidden for its background
     image, which clipped an absolutely-positioned list to the hero's bottom
     edge — the menu was cut off after two options. select.js sets left/top/
     width from the field's own box and keeps them in step on scroll. */
  position:fixed;z-index:200;
  max-height:min(19rem,52vh);overflow-y:auto;overscroll-behavior:contain;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  /* one squared corner — the same "filed record" cue the cards use */
  border-top-left-radius:2px;
  box-shadow:0 2px 4px rgba(23,21,34,.04), 0 24px 48px -18px rgba(27,20,100,.32);
  padding:.4rem;
  animation:mr-sel-in .13s ease-out both;
}
.mr-sel.is-up .mr-sel__list{border-top-left-radius:var(--r-card);border-bottom-left-radius:2px}
@keyframes mr-sel-in{from{opacity:0;transform:translateY(-.3rem)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.mr-sel__list{animation:none}}

.mr-sel__opt{
  padding:.55rem .7rem;border-radius:var(--r-sm);
  font-family:var(--body);font-size:.9063rem;color:var(--ink);
  cursor:pointer;position:relative;
  display:flex;align-items:center;gap:.5rem;
}
/* the reset option sits slightly apart from the real values */
.mr-sel__opt.is-any{color:var(--muted)}
.mr-sel__opt.is-any + .mr-sel__opt{margin-top:.25rem}
.mr-sel__opt.is-any::after{
  content:"";position:absolute;left:.7rem;right:.7rem;bottom:-.15rem;
  border-bottom:1px solid var(--line);
}
.mr-sel__opt.is-active{background:var(--indigo);color:#fff}
.mr-sel__opt.is-active.is-any{color:rgba(255,255,255,.8)}
.mr-sel__opt[aria-selected="true"]{font-weight:600}
/* a coral tick marks the current value — the mark's secondary, used to mean
   "this is the one on file" rather than as decoration */
.mr-sel__opt[aria-selected="true"]::before{
  content:"";flex:none;width:.85rem;height:.85rem;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
  color:var(--coral);
}
.mr-sel__opt[aria-selected="true"].is-active::before{color:#fff}
.mr-sel__opt[aria-disabled="true"]{color:var(--muted);cursor:not-allowed;opacity:.6}
.mr-sel__opt[aria-disabled="true"].is-active{background:transparent;color:var(--muted)}

/* --- per-context placement ---------------------------------------------- */

/* hero pill: borderless trigger, list widened to the field's padding box */
.mr-hsearch__f .mr-sel{flex:1}
.mr-hsearch__f .mr-sel__btn{min-height:2.5rem}

/* boxed contexts reproduce the bordered field the native control had, since
   the trigger is now a button rather than the styled <select> */
.mr-form .mr-sel__btn,
.mr-dir__filters .mr-sel__btn,
.mr-subnav .mr-sel__btn{
  background-color:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  padding:.7rem .85rem;padding-right:2.5rem;
  min-height:2.75rem;
  background-position:right .8rem center;
  transition:border-color .16s ease, box-shadow .16s ease;
}
.mr-form .mr-sel__btn:hover,
.mr-dir__filters .mr-sel__btn:hover,
.mr-subnav .mr-sel__btn:hover{border-color:var(--indigo)}
.mr-form .mr-sel.is-open .mr-sel__btn,
.mr-dir__filters .mr-sel.is-open .mr-sel__btn,
.mr-subnav .mr-sel.is-open .mr-sel__btn{border-color:var(--indigo);box-shadow:0 0 0 3px rgba(57,47,162,.12)}
.mr-form .mr-sel{margin-top:.35rem}
.mr-subnav .mr-sel__btn{font-family:var(--disp);font-weight:600}

/* The sub-nav's jump menu is mobile-only. That used to be `display` on the
   <select>; the wrapper now owns it, or the button would show on desktop
   where the control is meant to be hidden. */
.mr-subnav .mr-sel{display:none}
@media (max-width:720px){
  .mr-subnav .mr-sel{display:block;width:100%}
}

@media (max-width:720px){
  .mr-sel__opt{padding:.7rem .75rem}
}

/* =========================================================================
   BACK TO TOP + SEARCH FILTER CHIPS
   ========================================================================= */

/* A real anchor to #mr-top, so it works with JS off; app.js only decides when
   it appears. Sits clear of the safe-area inset on phones with a home bar. */
.mr-top{
  position:fixed;z-index:90;
  right:clamp(1rem,3vw,2rem);
  bottom:calc(clamp(1rem,3vw,2rem) + env(safe-area-inset-bottom,0px));
  width:2.9rem;height:2.9rem;
  display:grid;place-items:center;
  background:var(--indigo);color:#fff;
  border-radius:var(--r-pill);
  /* one squared corner, the same "filed record" cue as the cards */
  border-bottom-right-radius:3px;
  box-shadow:0 10px 24px -8px rgba(27,20,100,.55);
  transition:background .16s ease, transform .16s ease, box-shadow .16s ease;
}
.mr-top svg{width:18px;height:18px}
.mr-top:hover{background:var(--indigo-deep);transform:translateY(-2px);box-shadow:0 16px 30px -10px rgba(27,20,100,.6)}
.mr-top:active{transform:translateY(0)}
.mr-top:focus-visible{outline:2px solid var(--coral);outline-offset:3px}
/* [hidden] loses to the display:grid above without this */
.mr-top[hidden]{display:none}
@media (max-width:720px){
  .mr-top{width:2.6rem;height:2.6rem}
  .mr-top svg{width:16px;height:16px}
}

/* Active location / industry filters on a search results page. */
.mr-schips{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin:.9rem 0 0}
/* .mr-phead sits on --lav, a light band — these have to read as dark ink on
   light, not the white-on-dark treatment used inside the hero. */
.mr-schip{
  font-family:var(--body);font-size:.75rem;font-weight:600;
  padding:.3rem .7rem;border-radius:var(--r-pill);
  background:#fff;color:var(--indigo);
  border:1px solid var(--line);
}
.mr-schip--clear{
  background:none;border-style:dashed;border-color:var(--muted);
  color:var(--muted);font-weight:500;text-decoration:none;
}
.mr-schip--clear:hover{background:#fff;color:var(--indigo);border-color:var(--indigo)}
.mr-sgroup__note{
  font-family:var(--body);font-size:.75rem;color:var(--muted);
  margin:-.35rem 0 .75rem;
}

/* =========================================================================
   PAGE GUTTER — one rule, one axis each

   .mr-wrap owns the horizontal gutter and every layout class that shares the
   element owns only the vertical rhythm (padding-inline vs padding-block).
   They used to collide: .mr-article, .mr-doc, .mr-hero__in and .mr-head__in
   each set `padding: <vertical> 0` on an element that also carried .mr-wrap,
   and being later in the file they won — zeroing the gutter. On desktop the
   max-width hid it; below that width the text, the hero and the verification
   specimen card all ran edge to edge.

   Keep the split. If a component needs vertical padding on a .mr-wrap
   element, use padding-block, never the shorthand.
   ========================================================================= */

/* Long-form bodies get a slightly wider gutter on phones — 66ch of prose
   pinned to a 17px edge reads as cramped even once it stops touching. */
@media (max-width:560px){
  .mr-article,
  .mr-doc{padding-inline:1.25rem}
}

/* The "Company Record" card inside a Business Story. Was inline-styled as a
   rigid flex row, which on a phone left the middle column ~96px wide — the
   label broke across two lines mid-phrase and crowded the link. Stacks below
   560px so each part gets a full line. */
.mr-storyco{
  padding:1.1rem 1.25rem;margin:0 0 1.5rem;
  display:flex;align-items:center;gap:1rem;
}
.mr-storyco__logo{width:48px;height:48px;flex:none}
.mr-storyco__id{flex:1;min-width:0}
.mr-storyco__name{
  font-family:var(--disp);font-weight:700;font-size:1.05rem;
  overflow-wrap:anywhere;
}
.mr-storyco__link{flex:none;white-space:nowrap}
@media (max-width:560px){
  .mr-storyco{
    display:grid;
    grid-template-columns:48px minmax(0,1fr);
    gap:.5rem .85rem;
    align-items:center;
  }
  /* the link drops to its own row, spanning under both columns */
  .mr-storyco__link{grid-column:1 / -1;justify-self:start;margin-top:.15rem}
}

/* Hero video — layered over the poster image, which keeps the first paint and
   stays visible underneath if the video never loads, is refused autoplay, or
   is skipped for reduced motion / narrow screens / save-data. */
.mr-hero__vid{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;
  opacity:0;transition:opacity .6s ease;
  pointer-events:none;
}
.mr-hero__vid.is-ready{opacity:1}
@media (prefers-reduced-motion:reduce){
  .mr-hero__vid{display:none}
}

/* =========================================================================
   MOTION  (pairs with assets/js/motion.js)

   Scroll reveals are driven by GSAP and need no CSS — motion.js never hides
   anything that is already on screen, so there is nothing to pre-declare and
   nothing that can be left stuck invisible.

   The hero is the single exception: it animates on load, so its three pieces
   must be hidden before first paint or they would flash in first. That is
   gated on `html.mr-anim`, which inc/assets.php adds only when motion is
   welcome and removes again after 2.5s if the script never runs.
   ========================================================================= */
.mr-anim .mr-hero h1,
.mr-anim .mr-hero__sub,
.mr-anim .mr-hsearch{visibility:hidden}

@media (prefers-reduced-motion:reduce){
  /* belt and braces — the class should never be present here anyway */
  .mr-anim .mr-hero h1,
  .mr-anim .mr-hero__sub,
  .mr-anim .mr-hsearch{visibility:visible}
}

/* --- hover / focus: CSS, not GSAP -------------------------------------
   These react to the pointer and need no sequencing or scroll position, so
   a transition is both lighter and more reliable than a tween. */

/* cards lift a little and deepen their shadow */
.mr-tile,
.mr-blog,
.mr-cocard,
.mr-story-card,
.mr-panel{
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
a:hover > .mr-tile,
a:hover > .mr-blog,
.mr-tile:hover,
.mr-blog:hover,
.mr-cocard:hover,
.mr-story-card:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 34px -18px rgba(27,20,100,.42);
}

/* an underline that draws in rather than snapping on */
.mr-link{
  position:relative;
  text-decoration:none;
}
.mr-link::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:1.5px;
  background:currentColor;
  transform:scaleX(0);transform-origin:left center;
  transition:transform .24s ease;
}
.mr-link:hover::after,
.mr-link:focus-visible::after{transform:scaleX(1)}
/* the arrow nudges with it */
.mr-link svg{transition:transform .24s ease}
.mr-link:hover svg{transform:translateX(3px)}

/* the wordmark responds just enough to feel alive */
.mr-word{transition:transform .22s ease}
.mr-word:hover{transform:scale(1.02)}

/* buttons acknowledge the press */
.mr-btn{transition:transform .14s ease, background-color .18s ease, box-shadow .18s ease}
.mr-btn:active{transform:translateY(1px)}

@media (prefers-reduced-motion:reduce){
  .mr-tile,.mr-blog,.mr-cocard,.mr-story-card,.mr-panel,
  .mr-link::after,.mr-link svg,.mr-word,.mr-btn{transition:none}
  a:hover > .mr-tile,a:hover > .mr-blog,
  .mr-tile:hover,.mr-blog:hover,.mr-cocard:hover,.mr-story-card:hover,
  .mr-word:hover,.mr-btn:active{transform:none}
}

/* Verification steps (/verified/). Six items on the shared .mr-tiles grid
   (auto-fit, minmax 220px) resolved to four columns at desktop width, so the
   last two sat alone in a stranded row. A real sequence of six reads best as
   two even rows, so this is an explicit 3-up that steps down to 2 and 1.
   Marked up as <ol> because the order carries meaning. */
.mr-steps{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;
  counter-reset:none;
}
.mr-step{display:flex;flex-direction:column;gap:.3rem;cursor:default}
/* the number is wayfinding, not the point — the step's name is */
.mr-step__n{
  font-family:var(--disp);font-weight:700;font-size:.6875rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
}
.mr-step__name{
  font-family:var(--disp);font-weight:800;font-size:1.15rem;
  color:var(--ink);margin:0;
}
.mr-step__what{
  font-family:var(--body);font-size:.875rem;line-height:1.55;
  color:var(--text);margin:.15rem 0 0;
}
@media (max-width:860px){
  .mr-steps{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .mr-steps{grid-template-columns:1fr}
}