/* Solution Malaysia — Direction A design system
   Yellow / black classified directory. Archivo + IBM Plex Mono.
   Flat, 2px black rules, zero radius, no shadow. Light only. */

@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-display:swap;src:url('../fonts/archivo-var.woff2') format('woff2-variations');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/ibm-plex-mono-400.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/ibm-plex-mono-500.woff2') format('woff2');}

:root{
  color-scheme: light;

  --yellow:#FFCB05; --yellow-2:#E5B400; --yellow-soft:#FFF3C4;
  --black:#111111; --ink:#1C1C1C; --ink-2:#3D3D3D; --ink-3:#63625E;
  --white:#FFFFFF; --grey:#F1F1EF; --grey-2:#E1E1DD; --grey-3:#CFCFCA;
  --green:#0F7B3F; --red:#A81F16; --blue:#12507A;

  --font-body:"Archivo"; --font-mono:"IBM Plex Mono"; --font-fallback:"Helvetica Neue";

  --fs-mono:11px; --fs-xs:12px; --fs-sm:13px; --fs-base:15px; --fs-md:17px;
  --fs-lg:21px; --fs-xl:26px; --fs-2xl:32px; --fs-3xl:40px;
  --lh-tight:1.1; --lh-snug:1.3; --lh-body:1.5;
  --ls-mono:0.08em; --ls-caps:0.06em; --ls-tight:-0.02em;

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:28px; --sp-7:40px; --sp-8:56px;
  --bw:1px; --bw-2:2px; --bw-3:3px;
  --wrap:1340px; --tap:44px; --field-h:52px; --side:308px;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--grey-2); color:var(--ink);
  font-family:var(--font-body),var(--font-fallback),sans-serif;
  font-synthesis:none;
}
img{max-width:100%;height:auto;}
button{font:inherit;color:inherit;cursor:pointer;background:transparent;border:0;}
input,select,textarea{font:inherit;color:inherit;}
a{color:var(--blue);text-decoration:none;}
a:hover{color:var(--black);text-decoration:underline;}
:focus-visible{outline:var(--bw-3) solid var(--black);outline-offset:2px;}

.site{display:flex;flex-direction:column;min-height:100vh;background:var(--grey);}
.site h1,.site h2,.site h3{margin:0;font-weight:800;letter-spacing:var(--ls-tight);line-height:var(--lh-tight);}
.site h1{font-size:var(--fs-2xl);}
.site h2{font-size:var(--fs-lg);}
.site h3{font-size:var(--fs-md);}
.site h4{margin:0;font-size:var(--fs-base);font-weight:700;line-height:var(--lh-snug);}
.site p{margin:0;font-size:var(--fs-base);line-height:var(--lh-body);color:var(--ink-2);}
.site .lead{font-size:var(--fs-md);}
.site .small{font-size:var(--fs-sm);}
.mono{font-family:var(--font-mono),monospace;font-size:var(--fs-mono);letter-spacing:var(--ls-mono);text-transform:uppercase;color:var(--ink-3);}
.caps{font-size:var(--fs-xs);font-weight:700;letter-spacing:var(--ls-caps);text-transform:uppercase;}
.dim{color:var(--ink-3);}

.skip-link{position:absolute;left:0;top:0;transform:translateY(-120%);background:var(--black);color:var(--white);padding:var(--sp-3) var(--sp-4);z-index:99;}
.skip-link:focus{transform:translateY(0);}

/* ---- chrome ---- */
.utility{background:var(--black);}
.utility-inner{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:var(--sp-4);width:100%;max-width:var(--wrap);margin:0 auto;padding:var(--sp-2) var(--sp-5);flex-wrap:wrap;}
.utility-links{display:flex;flex-direction:row;gap:var(--sp-4);flex-wrap:wrap;}
.utility-link{font-family:var(--font-mono),monospace;font-size:var(--fs-mono);letter-spacing:var(--ls-mono);text-transform:uppercase;color:var(--white);}
.utility-link:hover{color:var(--yellow);text-decoration:none;}

.masthead{background:var(--yellow);border-bottom:var(--bw-3) solid var(--black);}
.masthead-inner{display:flex;flex-direction:row;align-items:center;gap:var(--sp-6);width:100%;max-width:var(--wrap);margin:0 auto;padding:var(--sp-4) var(--sp-5);flex-wrap:wrap;}
.logo{display:flex;flex-direction:row;align-items:center;gap:var(--sp-3);flex:0 0 auto;min-width:0;}
.logo:hover{text-decoration:none;}
.logo-mark{display:flex;align-items:center;justify-content:center;width:var(--sp-8);height:var(--sp-8);flex:0 0 auto;background:var(--black);}
.logo-mark svg{width:66%;height:66%;display:block;}
.logo-text{display:flex;flex-direction:column;min-width:0;}
.logo-name{font-size:var(--fs-lg);font-weight:800;letter-spacing:var(--ls-tight);color:var(--black);}
.logo-tag{font-family:var(--font-mono),monospace;font-size:var(--fs-mono);letter-spacing:var(--ls-mono);text-transform:uppercase;color:var(--ink-2);}
.mast-cta{display:flex;flex-direction:row;gap:var(--sp-2);margin-left:auto;flex-wrap:wrap;}

.searchbar{background:var(--black);}
.searchbar-inner{display:flex;flex-direction:row;align-items:stretch;gap:var(--bw-2);width:100%;max-width:var(--wrap);margin:0 auto;padding:var(--sp-4) var(--sp-5);flex-wrap:wrap;}
.searchfield{display:flex;flex-direction:column;justify-content:center;gap:var(--sp-1);flex:1 1 240px;min-width:0;padding:var(--sp-2) var(--sp-4);background:var(--white);border:var(--bw-2) solid var(--black);}
.searchfield-label{font-family:var(--font-mono),monospace;font-size:var(--fs-mono);letter-spacing:var(--ls-mono);text-transform:uppercase;color:var(--ink-3);}
.searchfield input,.searchfield select{border:0;padding:0;font-size:var(--fs-md);font-weight:700;color:var(--black);background:transparent;width:100%;}
.searchfield input::placeholder{color:var(--ink-3);font-weight:400;}

.btn-go{display:flex;align-items:center;justify-content:center;flex:0 0 auto;min-height:var(--field-h);padding:0 var(--sp-7);background:var(--yellow);border:var(--bw-2) solid var(--yellow);color:var(--black);font-size:var(--fs-md);font-weight:800;letter-spacing:var(--ls-caps);text-transform:uppercase;white-space:nowrap;}
.btn-go:hover{background:var(--white);color:var(--black);text-decoration:none;}
.btn-black{display:flex;align-items:center;justify-content:center;min-height:var(--tap);padding:0 var(--sp-4);background:var(--black);color:var(--white);font-size:var(--fs-xs);font-weight:700;letter-spacing:var(--ls-caps);text-transform:uppercase;white-space:nowrap;}
.btn-black:hover{background:var(--ink-2);color:var(--white);text-decoration:none;}
.btn-outline{display:flex;align-items:center;justify-content:center;min-height:var(--tap);padding:0 var(--sp-4);background:var(--white);border:var(--bw-2) solid var(--black);color:var(--black);font-size:var(--fs-xs);font-weight:700;letter-spacing:var(--ls-caps);text-transform:uppercase;white-space:nowrap;}
.btn-outline:hover{background:var(--yellow);color:var(--black);text-decoration:none;}
.btn-call{display:flex;align-items:center;justify-content:center;min-height:var(--tap);padding:0 var(--sp-4);background:var(--green);color:var(--white);font-size:var(--fs-xs);font-weight:700;letter-spacing:var(--ls-caps);text-transform:uppercase;white-space:nowrap;}
.btn-call:hover{background:var(--black);color:var(--white);text-decoration:none;}
.btn-row{display:flex;flex-direction:row;gap:var(--sp-2);flex-wrap:wrap;}

.pagenav{background:var(--white);border-bottom:var(--bw-2) solid var(--black);}
.pagenav-inner{display:flex;flex-direction:row;align-items:stretch;width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--sp-5);flex-wrap:wrap;}
.pagelink{display:flex;align-items:center;min-height:var(--tap);padding:0 var(--sp-5);border-right:var(--bw) solid var(--grey-3);font-size:var(--fs-xs);font-weight:700;letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--ink);white-space:nowrap;}
.pagelink:hover{background:var(--yellow-soft);color:var(--black);text-decoration:none;}
.pagelink-on{background:var(--black);color:var(--yellow);}

.catbar{background:var(--grey);border-bottom:var(--bw) solid var(--grey-3);}
.catbar-inner{display:flex;flex-direction:row;align-items:stretch;width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--sp-5);flex-wrap:wrap;}
.catlink{display:flex;align-items:center;min-height:var(--sp-8);padding:0 var(--sp-4);border-right:var(--bw) solid var(--grey-3);font-size:var(--fs-sm);font-weight:600;color:var(--ink-2);white-space:nowrap;}
.catlink:hover{background:var(--yellow-soft);color:var(--black);text-decoration:none;}
.catlink-on{color:var(--black);font-weight:700;}

/* ---- body layout ---- */
.body{display:flex;flex-direction:row;gap:var(--sp-5);width:100%;max-width:var(--wrap);margin:0 auto;padding:var(--sp-5) var(--sp-5) var(--sp-8);align-items:flex-start;min-width:0;}
.main{display:flex;flex-direction:column;gap:var(--sp-5);flex:1 1 auto;min-width:0;}
.side{display:flex;flex-direction:column;gap:var(--sp-4);flex:0 0 var(--side);min-width:0;}
.body-wide .main{flex:1 1 100%;}
.crumbs{display:flex;flex-direction:row;gap:var(--sp-2);flex-wrap:wrap;font-family:var(--font-mono),monospace;font-size:var(--fs-mono);letter-spacing:var(--ls-mono);text-transform:uppercase;color:var(--ink-3);}
.crumbs a{color:var(--ink-3);}
.crumbs a:hover{color:var(--black);}

/* ---- panel ---- */
.panel{display:flex;flex-direction:column;background:var(--white);border:var(--bw-2) solid var(--black);min-width:0;}
.panel-head{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:var(--sp-4);padding:var(--sp-3) var(--sp-4);background:var(--black);flex-wrap:wrap;}
.panel-head h1,.panel-head h2,.panel-head h3{color:var(--white);}
.panel-head-yellow{background:var(--yellow);border-bottom:var(--bw-2) solid var(--black);}
.panel-head-yellow h1,.panel-head-yellow h2,.panel-head-yellow h3{color:var(--black);}
.panel-body{display:flex;flex-direction:column;gap:var(--sp-4);padding:var(--sp-4);min-width:0;}
.panel-body-flush{padding:0;gap:0;}
.count{font-family:var(--font-mono),monospace;font-size:var(--fs-mono);letter-spacing:var(--ls-mono);text-transform:uppercase;color:var(--white);}
.count-dark{color:var(--ink-2);}

/* ---- listing ---- */
.listing{display:flex;flex-direction:row;gap:var(--sp-4);padding:var(--sp-4);border-bottom:var(--bw) solid var(--grey-2);min-width:0;}
.listing:last-child{border-bottom:0;}
.listing:hover{background:var(--yellow-soft);}
.listing-rank{flex:0 0 auto;font-family:var(--font-mono),monospace;font-size:var(--fs-md);color:var(--ink-3);}
.listing-main{display:flex;flex-direction:column;gap:var(--sp-2);flex:1 1 auto;min-width:0;}
.listing-title-row{display:flex;flex-direction:row;align-items:center;gap:var(--sp-2);flex-wrap:wrap;}
.listing-name{font-size:var(--fs-md);font-weight:800;color:var(--black);}
.listing-meta{display:flex;flex-direction:row;gap:var(--sp-4);flex-wrap:wrap;font-size:var(--fs-sm);color:var(--ink-2);}
.listing-side{display:flex;flex-direction:column;align-items:flex-end;gap:var(--sp-2);flex:0 0 auto;}

.pill{display:flex;align-items:center;padding:var(--sp-1) var(--sp-2);background:var(--grey);font-size:var(--fs-xs);font-weight:600;color:var(--ink-2);white-space:nowrap;}
.pill-elite{background:var(--black);color:var(--yellow);font-weight:700;letter-spacing:var(--ls-caps);text-transform:uppercase;}
.pill-open{background:var(--green);color:var(--white);}
.pill-claim{background:var(--yellow);color:var(--black);}
.rating{display:flex;flex-direction:row;align-items:baseline;gap:var(--sp-2);}
.rating-score{font-size:var(--fs-lg);font-weight:800;color:var(--black);}
.rating-of{font-family:var(--font-mono),monospace;font-size:var(--fs-mono);color:var(--ink-3);}
.phone{font-family:var(--font-mono),monospace;font-size:var(--fs-sm);font-weight:500;letter-spacing:var(--ls-mono);color:var(--black);}

/* ---- cell grid ---- */
.cellgrid{display:flex;flex-direction:row;flex-wrap:wrap;}
.cell{display:flex;flex-direction:column;gap:var(--sp-2);flex:1 1 220px;min-width:0;padding:var(--sp-4);border-right:var(--bw) solid var(--grey-2);border-bottom:var(--bw) solid var(--grey-2);}
.cell:hover{background:var(--yellow-soft);}
.cell-name{font-size:var(--fs-base);font-weight:700;color:var(--black);}
.cell-wide{flex:1 1 300px;}

/* ---- table ---- */
.table-wrap{display:flex;flex-direction:column;overflow-x:auto;min-width:0;max-width:100%;}
.tbl{width:100%;border-collapse:collapse;}
.tbl th{padding:var(--sp-3) var(--sp-4);text-align:left;background:var(--grey);font-family:var(--font-mono),monospace;font-size:var(--fs-mono);font-weight:500;letter-spacing:var(--ls-mono);text-transform:uppercase;color:var(--ink-2);border-bottom:var(--bw-2) solid var(--black);white-space:nowrap;}
.tbl td{padding:var(--sp-3) var(--sp-4);text-align:left;font-size:var(--fs-sm);color:var(--ink-2);border-bottom:var(--bw) solid var(--grey-2);vertical-align:top;}
.tbl tr:hover td{background:var(--yellow-soft);}
.tbl-name{font-size:var(--fs-base);font-weight:700;color:var(--black);white-space:nowrap;}
.tbl-num{font-family:var(--font-mono),monospace;font-variant-numeric:tabular-nums;font-size:var(--fs-sm);color:var(--black);white-space:nowrap;}
.tbl-mono{font-family:var(--font-mono),monospace;font-size:var(--fs-mono);letter-spacing:var(--ls-mono);text-transform:uppercase;color:var(--ink-3);white-space:nowrap;}

/* ---- key/value + lists ---- */
.kv{display:flex;flex-direction:row;align-items:baseline;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-2) 0;border-bottom:var(--bw) solid var(--grey-2);}
.kv:last-child{border-bottom:0;}
.kv-key{font-family:var(--font-mono),monospace;font-size:var(--fs-mono);letter-spacing:var(--ls-mono);text-transform:uppercase;color:var(--ink-3);}
.kv-val{font-size:var(--fs-sm);font-weight:700;color:var(--black);text-align:right;}
.list{display:flex;flex-direction:column;gap:var(--sp-3);}
.li{display:flex;flex-direction:row;align-items:flex-start;gap:var(--sp-3);min-width:0;}
.li-mark{width:var(--sp-2);height:var(--sp-2);flex:0 0 auto;margin-top:var(--sp-2);background:var(--black);}
.li-mark-yellow{background:var(--yellow-2);}
.li-text{font-size:var(--fs-sm);line-height:var(--lh-body);color:var(--ink-2);min-width:0;}

.filter-row{display:flex;flex-direction:row;align-items:center;gap:var(--sp-3);min-height:var(--tap);}
.check{width:var(--sp-4);height:var(--sp-4);flex:0 0 auto;border:var(--bw-2) solid var(--black);background:var(--white);}
.check-on{background:var(--black);}
.filter-label{font-size:var(--fs-sm);color:var(--ink);}
.filter-count{margin-left:auto;font-family:var(--font-mono),monospace;font-size:var(--fs-mono);color:var(--ink-3);}

.adslot{display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-4);background:var(--white);border:var(--bw-2) dashed var(--ink-3);min-width:0;}
.adslot-flag{font-family:var(--font-mono),monospace;font-size:var(--fs-mono);letter-spacing:var(--ls-mono);text-transform:uppercase;color:var(--red);}
.alpha{display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--bw-2);}
.alpha-key{display:flex;align-items:center;justify-content:center;min-width:var(--tap);min-height:var(--tap);background:var(--white);border:var(--bw) solid var(--black);font-family:var(--font-mono),monospace;font-size:var(--fs-sm);color:var(--black);}
.alpha-key:hover{background:var(--yellow);text-decoration:none;}
.seal-note{display:flex;flex-direction:row;align-items:center;gap:var(--sp-3);padding:var(--sp-3);background:var(--black);}
.seal-mark{display:flex;align-items:center;justify-content:center;flex:0 0 auto;min-width:var(--sp-8);min-height:var(--sp-8);padding:var(--sp-2);background:var(--yellow);color:var(--black);font-family:var(--font-mono),monospace;font-size:var(--fs-mono);font-weight:500;letter-spacing:var(--ls-mono);text-align:center;text-transform:uppercase;white-space:nowrap;}
.seal-note-text{font-family:var(--font-mono),monospace;font-size:var(--fs-mono);letter-spacing:var(--ls-mono);text-transform:uppercase;color:var(--ink-3);}
.seal-block{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-3);padding:var(--sp-4);background:var(--black);}
.seal-block .seal-note-text{color:var(--yellow);}
.elite-seal{display:block;flex:0 0 auto;}

/* ---- filter sidebar ---- */
.filter-check{width:var(--sp-4);height:var(--sp-4);flex:0 0 auto;margin:0;accent-color:var(--black);}
.filter-row-off{opacity:.45;}
.filter-row-off .filter-label{text-decoration:line-through;}

/* ---- forms ---- */
.form-flag{display:flex;flex-direction:row;align-items:center;gap:var(--sp-2);align-self:flex-start;padding:var(--sp-2) var(--sp-3);background:var(--grey);border:var(--bw) dashed var(--ink-3);font-family:var(--font-mono),monospace;font-size:var(--fs-mono);letter-spacing:var(--ls-mono);text-transform:uppercase;color:var(--ink-2);}
.form-flag-mark{width:var(--sp-2);height:var(--sp-2);flex:0 0 auto;background:var(--red);}
.form-row{display:flex;flex-direction:row;gap:var(--sp-4);min-width:0;}
.field{display:flex;flex-direction:column;gap:var(--sp-1);flex:1 1 200px;min-width:0;}
.field-label{font-family:var(--font-mono),monospace;font-size:var(--fs-mono);letter-spacing:var(--ls-mono);text-transform:uppercase;color:var(--ink-3);}
.field-box,.field input,.field select,.field textarea{display:flex;align-items:center;min-height:var(--field-h);padding:0 var(--sp-4);background:var(--grey);border:var(--bw-2) solid var(--black);font-size:var(--fs-base);color:var(--black);width:100%;}
.field textarea{align-items:flex-start;padding-top:var(--sp-3);min-height:calc(var(--field-h) * 2);line-height:var(--lh-body);}
.field-box{color:var(--ink-3);}
.field-box-value{color:var(--black);font-weight:600;}
.field-area{min-height:calc(var(--field-h) * 2);align-items:flex-start;padding-top:var(--sp-3);}
.caret{width:var(--sp-2);height:var(--sp-2);flex:0 0 auto;border-right:var(--bw-2) solid var(--black);border-bottom:var(--bw-2) solid var(--black);transform:rotate(45deg);}
.check-line{display:flex;flex-direction:row;align-items:flex-start;gap:var(--sp-3);}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.form-note{padding:var(--sp-3) var(--sp-4);background:var(--yellow-soft);border:var(--bw-2) solid var(--black);font-size:var(--fs-sm);}
.form-note-bad{background:#fdecea;}
.correction{display:flex;flex-direction:column;gap:var(--sp-3);}
.correction>summary{list-style:none;align-self:flex-start;}
.correction>summary::-webkit-details-marker{display:none;}
.correction[open]>summary{background:var(--ink-2);color:var(--white);}
.correction .panel-body{padding:0;gap:var(--sp-3);}
.correction .field textarea{min-height:var(--field-h);}

/* ---- empty state ---- */
.empty{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-7) var(--sp-4);align-items:flex-start;}
.empty h3{font-size:var(--fs-md);}
.empty .mono{color:var(--ink-3);}

/* ---- strip + footer ---- */
.strip{background:var(--black);}
.strip-inner{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:var(--sp-6);width:100%;max-width:var(--wrap);margin:0 auto;padding:var(--sp-7) var(--sp-5);flex-wrap:wrap;}
.strip-copy{display:flex;flex-direction:column;gap:var(--sp-3);flex:1 1 440px;min-width:0;}
.strip-copy h2{color:var(--white);}
.strip-copy p{color:var(--grey-2);}

.foot{background:var(--white);border-top:var(--bw-3) solid var(--black);}
.foot-inner{display:flex;flex-direction:row;gap:var(--sp-6);width:100%;max-width:var(--wrap);margin:0 auto;padding:var(--sp-6) var(--sp-5);flex-wrap:wrap;}
.foot-col{display:flex;flex-direction:column;gap:var(--sp-2);flex:1 1 170px;min-width:0;}
.foot-h{font-size:var(--fs-xs);font-weight:800;letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--black);}
.foot-link{font-size:var(--fs-sm);color:var(--ink-2);}
.foot-link:hover{color:var(--black);}
.foot-bar{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:var(--sp-4);width:100%;max-width:var(--wrap);margin:0 auto;padding:var(--sp-4) var(--sp-5);background:var(--yellow);border-top:var(--bw-2) solid var(--black);flex-wrap:wrap;}
.foot-bar .mono{color:var(--ink);}

/* ---- editorial content (guides, pages) ---- */
.prose{font-size:var(--fs-base);line-height:var(--lh-body);color:var(--ink-2);}
.prose > * + *{margin-top:var(--sp-4);}
.prose h2{font-size:var(--fs-lg);color:var(--black);margin-top:var(--sp-6);}
.prose h3{font-size:var(--fs-md);color:var(--black);margin-top:var(--sp-5);}
.prose ul,.prose ol{padding-left:var(--sp-5);}
.prose li{margin-top:var(--sp-2);}
.prose a{text-decoration:underline;}
.prose strong{color:var(--black);}
.prose table{width:100%;border-collapse:collapse;}
.prose th,.prose td{padding:var(--sp-3) var(--sp-4);border-bottom:var(--bw) solid var(--grey-2);text-align:left;font-size:var(--fs-sm);}

/* ---- responsive ---- */
@media (max-width:1080px){
  :root{--wrap:100%;--fs-3xl:32px;--fs-2xl:27px;}
  .body{flex-direction:column;align-items:stretch;}
  .main,.side{width:100%;}
  .side{flex:1 1 auto;}
}

@media (max-width:760px){
  /* The three chrome strips scroll sideways as one row instead of
     wrapping into ragged blocks with dividers hanging in space. */
  .utility-inner,.pagenav-inner,.catbar-inner{
    flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .utility-inner::-webkit-scrollbar,
  .pagenav-inner::-webkit-scrollbar,
  .catbar-inner::-webkit-scrollbar{display:none;}
  .utility-inner{justify-content:flex-start;gap:0;}
  .utility-links{flex-wrap:nowrap;}
  .utility-link,.pagelink,.catlink{flex:0 0 auto;white-space:nowrap;}
  /* the business links duplicate the masthead CTAs and the primary nav */
  .utility-inner .utility-links + .utility-links{display:none;}

  .utility,.pagenav,.catbar{position:relative;}
  .utility::after,.pagenav::after,.catbar::after{
    content:"";position:absolute;top:0;right:0;bottom:0;width:36px;pointer-events:none;
  }
  .utility::after{background:linear-gradient(90deg,transparent,var(--black));}
  .pagenav::after{background:linear-gradient(90deg,transparent,var(--white));}
  .catbar::after{background:linear-gradient(90deg,transparent,var(--grey));}
}

@media (max-width:640px){
  :root{--fs-2xl:23px;--fs-xl:20px;--fs-lg:18px;--sp-8:40px;--sp-7:28px;}

  .utility-link{font-size:var(--fs-mono);}
  .utility-inner{padding:var(--sp-2) var(--sp-4);}

  .masthead-inner{gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);}
  .logo-mark{width:var(--sp-7);height:var(--sp-7);}
  .logo-name{font-size:var(--fs-md);}
  .mast-cta{margin-left:0;width:100%;}
  .mast-cta .btn-black,.mast-cta .btn-outline{flex:1 1 auto;}

  /* Buttons: trim the wide tracking-heavy padding so long labels fit a
     narrow panel without overflowing. */
  .btn-go{padding:0 var(--sp-4);font-size:var(--fs-base);}
  .btn-row .btn-go,.btn-row .btn-black,.btn-row .btn-outline,.btn-row .btn-call{flex:1 1 auto;}

  /* Finder: two live fields + button on one wrap; the disabled hint
     field is dropped (it does nothing on any screen). */
  .searchbar-inner{flex-wrap:wrap;gap:var(--sp-2);padding:var(--sp-3) var(--sp-4);}
  .searchfield{flex:1 1 100%;padding:var(--sp-2) var(--sp-3);}
  .searchfield-filter{display:none;}
  .searchfield input,.searchfield select{font-size:var(--fs-base);}
  .searchfield-where{flex:1 1 52%;}
  .searchbar-inner .btn-go{flex:1 1 40%;min-height:var(--tap);padding:0 var(--sp-3);}

  .pagenav-inner,.catbar-inner{padding:0;}
  .pagelink{padding:0 var(--sp-4);font-size:var(--fs-xs);}
  .catlink{padding:0 var(--sp-4);}

  .body{padding:var(--sp-4) var(--sp-4) var(--sp-7);gap:var(--sp-4);}
  .panel-body{padding:var(--sp-3);gap:var(--sp-3);}
  .panel-head{padding:var(--sp-3) var(--sp-4);}

  .kv{flex-direction:column;align-items:flex-start;gap:2px;}
  .kv-val{text-align:left;}

  .listing{
    display:grid;grid-template-columns:auto 1fr;
    grid-template-areas:"rank main" "side side";
    gap:var(--sp-2) var(--sp-3);padding:var(--sp-3);
  }
  .listing-rank{grid-area:rank;font-size:var(--fs-sm);line-height:1.6;}
  .listing-main{grid-area:main;min-width:0;}
  .listing-side{grid-area:side;flex-direction:row;align-items:center;justify-content:space-between;gap:var(--sp-3);}
  .listing-side .btn-row{width:auto;}

  /* Real two-up grid — not one full-width block per cell. */
  .cellgrid{display:grid;grid-template-columns:1fr 1fr;}
  .cell{flex:none;width:auto;}
  .cell:nth-child(2n){border-right:0;}
  .cell-wide{grid-column:1 / -1;border-right:0;}

  /* Forms: fields size to their content (they were stretching to the
     200px flex-basis inside the stacked column). */
  .form-row{flex-direction:column;gap:var(--sp-3);}
  .field{flex:0 0 auto;}
  .field input,.field select,.field-box{min-height:var(--tap);}
  .field textarea{min-height:calc(var(--tap) * 2);}

  /* Data tables become stacked records with mono column labels. Gated on
     .js (set in <head>); without it the horizontal-scroll fallback stays. */
  .js .table-wrap{overflow-x:visible;}
  .js .tbl,.js .tbl tbody,.js .tbl tr,.js .tbl td{display:block;width:auto;}
  .js .tbl thead{display:none;}
  .js .tbl tr{padding:var(--sp-3) var(--sp-4);border-bottom:var(--bw-2) solid var(--grey-2);}
  .js .tbl tr:last-child{border-bottom:0;}
  .js .tbl tr:hover td{background:transparent;}
  /* default: label above the value, both left — never ragged */
  .js .tbl td{padding:var(--sp-1) 0;border:0;text-align:left;white-space:normal;}
  .js .tbl td::before{
    content:attr(data-label);display:block;margin-bottom:1px;
    font-family:var(--font-mono),monospace;font-size:var(--fs-mono);
    letter-spacing:var(--ls-mono);text-transform:uppercase;color:var(--ink-3);
  }
  .js .tbl td:not([data-label])::before,
  .js .tbl td[data-label=""]::before{display:none;}
  /* compact one-liners (numbers, mono tags): label left, value right */
  .js .tbl td.tbl-num,.js .tbl td.tbl-mono{
    display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-4);
  }
  .js .tbl td.tbl-num::before,.js .tbl td.tbl-mono::before{margin-bottom:0;}
  /* first cell is the record's name — a heading, no label */
  .js .tbl td.tbl-name{font-size:var(--fs-md);margin-bottom:var(--sp-1);}
  .js .tbl td.tbl-name::before{display:none;}

  .strip-inner{padding:var(--sp-6) var(--sp-4);}
  .strip .btn-row{width:100%;}
  .strip .btn-go,.strip .btn-outline{flex:1 1 100%;}
  .foot-inner{gap:var(--sp-5);padding:var(--sp-5) var(--sp-4);}
  .foot-col{flex:1 1 100%;}
  .foot-bar{padding:var(--sp-3) var(--sp-4);gap:var(--sp-2);}
}

@media (max-width:359px){
  .cellgrid{grid-template-columns:1fr;}
  .cell{border-right:0;}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:0.001ms !important;transition-duration:0.001ms !important;}
}
