/* ============================================================
   Build Journal — trades-directory + calculators + guides
   Inter, teal #4a9aba, yellow #ffcc00. (Built Properly look.)
   ============================================================ */
:root{
  --teal:#4a9aba;
  --teal-dark:#3d8aa8;
  --yellow:#ffcc00;
  --yellow-dark:#e6b800;
  --ink:#2d2d2d;
  --body:#444444;
  --muted:#666666;
  --line:#e3e8eb;
  --line-strong:#cdd6db;
  --bg:#ffffff;
  --bg-tint:#f3f8fa;
  --bg-dark:#243239;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --maxw:1200px;
  --gut:20px;
  --radius:10px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--body);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:var(--teal-dark);text-decoration:none}
a:hover{text-decoration:none}
h1,h2,h3{font-family:var(--sans);color:var(--ink);margin:0}
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.skip-link{position:absolute;left:8px;top:-48px;z-index:200;background:var(--teal);color:#fff;font-weight:700;padding:10px 16px;border-radius:0 0 8px 8px}
.skip-link:focus{top:0}
:focus-visible{outline:3px solid var(--teal);outline-offset:2px}

/* ============ HEADER ============ */
.site-header{position:sticky;top:0;z-index:50;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.07)}
.topbar{border-bottom:1px solid var(--line)}
.topbar-inner{position:relative;display:flex;align-items:center;justify-content:space-between;min-height:80px;gap:16px}
.topbar-left,.topbar-right{display:inline-flex;align-items:center;gap:7px;color:var(--body);font-size:13.5px;font-weight:500}
.topbar-left:hover,.topbar-right:hover{color:var(--teal)}
.brand-block{position:absolute;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center}
.brand{display:inline-flex;align-items:center;gap:3px;line-height:1}
.brand .brand-1{font-size:30px;font-weight:900;letter-spacing:.04em;color:var(--teal)}
.brand .brand-2{font-size:30px;font-weight:500;letter-spacing:.04em;color:var(--ink)}
.brand-thumb{margin-left:6px;animation:thumb 2.6s ease-in-out infinite}
@keyframes thumb{0%,88%,100%{transform:none}92%{transform:rotate(-12deg) translateY(-2px)}}
.brand-strap{margin-top:5px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:center}

.mainnav{background:var(--teal)}
.nav-toggle{position:absolute;opacity:0;pointer-events:none}
.mainnav-inner{display:flex;align-items:center;justify-content:center;gap:2px;min-height:48px}
.nav-home{display:inline-flex;align-items:center;justify-content:center;padding:12px 14px;color:#fff}
.nav-home:hover{background:rgba(255,255,255,.12)}
.nav-links{display:flex;align-items:center;gap:2px}
.nav-links a{color:#fff;font-weight:600;font-size:14.5px;padding:14px 16px;transition:background .12s ease}
.nav-links a:hover{background:rgba(255,255,255,.14)}
.nav-links .nav-cta{background:var(--yellow);color:var(--ink);font-weight:800;border-radius:6px;margin-left:8px;padding:9px 18px}
.nav-links .nav-cta:hover{background:var(--yellow-dark)}
.nav-home.active,.nav-links a.active:not(.nav-cta){background:rgba(255,255,255,.12);box-shadow:inset 0 -3px 0 var(--yellow)}
.nav-burger{display:none;align-items:center;gap:9px;height:48px;padding:0 6px;cursor:pointer;color:#fff;-webkit-tap-highlight-color:transparent}
.nav-burger-bars{display:flex;flex-direction:column;justify-content:center;gap:5px;width:24px;height:24px}
.nav-burger-bars span{display:block;width:24px;height:2.5px;background:#fff;border-radius:2px;transition:transform .18s ease,opacity .18s ease}
.nav-burger-label{font-weight:700;font-size:15px;color:#fff}

/* ============ HERO ============ */
.hero{position:relative;background:linear-gradient(135deg,rgba(74,154,186,.86),rgba(45,72,86,.93)),url("/img/hero-construction.webp") center 38%/cover no-repeat;color:#fff;padding:58px 0 62px;overflow:hidden}
.hero-credit{position:absolute;right:12px;bottom:7px;z-index:2;margin:0;font-size:11px;color:rgba(255,255,255,.66)}
.hero-credit a{color:rgba(255,255,255,.82);text-decoration:underline}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 90% at 85% 0%,rgba(255,255,255,.12),transparent 60%);pointer-events:none}
.hero-inner{position:relative;z-index:1;max-width:840px;margin:0 auto;text-align:center}
.hero-title{font-size:clamp(28px,4.2vw,44px);font-weight:800;line-height:1.12;color:#fff;letter-spacing:-.01em}
.hero-sub{font-size:18px;color:rgba(255,255,255,.92);margin:14px auto 26px;max-width:620px}
.hero-search{display:flex;gap:10px;background:#fff;border-radius:12px;padding:10px;box-shadow:0 16px 40px rgba(0,0,0,.2);flex-wrap:wrap}
.hs-field{flex:1 1 220px;display:flex;align-items:center;gap:9px;padding:0 14px;background:var(--bg-tint);border:1px solid transparent;border-radius:8px;color:var(--muted);min-width:0;transition:border-color .12s ease,background .12s ease}
.hs-field:focus-within{border-color:var(--teal);background:#fff}
.hs-field input{flex:1;min-width:0;border:0;background:none;padding:14px 0;font-family:var(--sans);font-size:16px;color:var(--ink)}
.hs-field input:focus{outline:none}
.hero-search button{flex:0 0 auto;min-height:50px;background:var(--yellow);color:var(--ink);font-weight:800;font-size:16px;border:0;border-radius:8px;padding:0 30px;cursor:pointer;transition:background .12s ease}
.hero-search button:hover{background:var(--yellow-dark)}
.hero-foot{margin:18px 0 0;font-size:15px}
.hero-foot a{color:#fff;font-weight:700;border-bottom:2px solid var(--yellow);padding-bottom:1px}

/* ============ SECTIONS ============ */
.section{padding:42px 0 8px}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:14px;border-bottom:2px solid var(--teal);padding-bottom:9px;margin-bottom:22px}
.sh-left{display:flex;align-items:center;gap:9px;color:var(--teal)}
.section-head h2{font-size:21px;font-weight:800;color:var(--teal)}
.sh-all{font-size:14px;font-weight:700;color:var(--teal)}
.sh-all:hover{text-decoration:underline}

/* category tiles */
.tile-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:11px;text-align:center;padding:24px 14px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);color:var(--ink);transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease}
.tile:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.08);border-color:var(--teal)}
.tile-ico{display:flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:50%;background:var(--bg-tint);color:var(--teal)}
.tile-txt{display:flex;flex-direction:column;align-items:center;gap:3px}
.tile-name{font-size:14.5px;font-weight:700;line-height:1.25}
.tile-sub{font-size:12.5px;font-weight:600;color:#667085;line-height:1.2}

/* card grids */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;padding-bottom:10px}
.calc-grid{grid-template-columns:repeat(3,1fr)}
.card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:transform .12s ease,box-shadow .12s ease;min-width:0}
.card:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(0,0,0,.09)}
.card-title{font-weight:700;font-size:17px;line-height:1.25;color:var(--ink)}
.card-dek{font-size:14px;color:var(--muted);line-height:1.5;margin-top:7px}

/* calculator cards */
.calc-card{padding:22px;align-items:flex-start}
.calc-card .card-link{margin-top:auto;padding-top:14px;font-weight:800;font-size:13.5px;color:var(--teal);text-transform:uppercase;letter-spacing:.03em}
.calc-card:hover .card-link{color:var(--teal-dark)}

/* post (guide) cards */
.post-card .card-media{aspect-ratio:16/10;background:var(--bg-tint);overflow:hidden}
.post-card .thumb-img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.post-card:hover .thumb-img{transform:scale(1.04)}
.card-ph{display:block;width:100%;height:100%;background:linear-gradient(135deg,#e7eef1,#d3dee3)}
.post-card .card-body{display:flex;flex-direction:column;padding:16px 18px 20px}
.card-cat{font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--teal);margin-bottom:6px}

/* ============ TRUST ============ */
.trust{background:var(--bg-tint);margin-top:46px;padding:40px 0}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.trust-item{text-align:center}
.trust-item svg{color:var(--teal);margin:0 auto 10px}
.trust-item h3{font-size:16px;font-weight:800;color:var(--ink);margin-bottom:6px}
.trust-item p{font-size:14px;color:var(--muted);line-height:1.5;margin:0}

/* ============ NEWSLETTER ============ */
.newsletter{background:var(--bg-dark);color:#fff;margin-top:46px}
.newsletter-inner{display:grid;grid-template-columns:1.4fr 1fr;gap:30px;align-items:center;padding:36px var(--gut)}
.newsletter-title{font-size:clamp(22px,3vw,30px);font-weight:800;color:#fff}
.newsletter-blurb{margin:9px 0 0;color:rgba(255,255,255,.82);font-size:15.5px;max-width:52ch}
.newsletter-form{display:flex;gap:10px;flex-wrap:wrap}
.newsletter-form input{flex:1 1 220px;min-width:0;padding:14px 15px;border:0;border-radius:8px;font-family:var(--sans);font-size:16px}
.newsletter-form button{flex:0 0 auto;background:var(--yellow);color:var(--ink);font-weight:800;border:0;border-radius:8px;padding:14px 28px;cursor:pointer;font-size:15px}
.newsletter-form button:hover{background:var(--yellow-dark)}

/* ============ FOOTER ============ */
.site-footer{background:var(--bg-dark);color:#aeb9c0;padding:48px 0 26px;font-size:14.5px}
.footer-top{display:grid;grid-template-columns:minmax(230px,1.25fr) 3.4fr;gap:36px;padding-bottom:30px;border-bottom:1px solid rgba(255,255,255,.1)}
.footer-brand .brand--footer{display:inline-flex;align-items:center;gap:2px}
.footer-brand .brand--footer .brand-1{color:var(--teal);font-size:26px;font-weight:900;letter-spacing:.03em}
.footer-brand .brand--footer .brand-2--light{color:#fff;font-size:26px;font-weight:500;letter-spacing:.03em}
.footer-brand p{margin:14px 0 0;color:#8b97a0;max-width:34ch;line-height:1.55}
.footer-contact{font-size:13.5px}
.footer-contact a{color:var(--teal);font-weight:600}
.footer-contact a:hover{color:#fff}
.footer-links{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:26px}
.footer-col h3{font-size:12.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:#fff;margin:0 0 14px}
.footer-col ul{list-style:none;margin:0;padding:0}
.footer-col li{margin:0 0 10px}
.footer-col a{color:#aeb9c0;line-height:1.4}
.footer-col a:hover{color:#fff;text-decoration:underline}
.footer-bar{font-size:12.5px;color:#7f8b93}
.footer-bar-inner{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;padding-top:20px}

/* ============ ARTICLE / HUB (inherit base classes used by article.html/hub.html) ============ */
.article{max-width:820px;margin:0 auto;padding:14px var(--gut) 48px}
.article-head{padding:8px 0 14px}
.breadcrumb{font-size:13px;color:var(--muted)}
.breadcrumb a{color:var(--muted)}
/* Directory pages (roundup/index/profile/search) carry their own breadcrumb as the
   first element; give the whole block room to breathe below the sticky nav. */
.dir-page{padding-top:32px}
@media(max-width:600px){.dir-page{padding-top:20px}}
/* In-body guide photo with credit (real Creative Commons imagery). */
.guide-figure{margin:30px 0}
.guide-figure img{display:block;width:100%;height:auto;border-radius:10px;border:1px solid var(--line)}
.guide-figure figcaption{margin-top:9px;font-size:14.5px;color:var(--muted);line-height:1.5}
.guide-credit{display:block;margin-top:3px;font-size:12px;color:#9aa3ab}
.guide-credit a{color:#7d868e;text-decoration:underline}
/* Shared search autocomplete dropdown (dir-autocomplete.js), appended to body. */
.bjac{position:fixed;z-index:9999;margin:0;padding:6px;list-style:none;background:#fff;border:1px solid #dce8ee;border-radius:10px;box-shadow:0 12px 30px rgba(20,50,70,.18);max-height:300px;overflow:auto;font-family:'Inter',-apple-system,Segoe UI,Roboto,sans-serif}
.bjac[hidden]{display:none}
.bjac li{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:7px;font-size:14.5px;color:#243740;line-height:1.2;cursor:pointer}
.bjac li:hover,.bjac li.is-active{background:#eef6f9;color:#1f5d75}
.bjac-ic{flex:0 0 auto;display:flex;color:#4a9aba}
/* Home feature band: real photo + value copy. */
.feature{display:grid;grid-template-columns:1.05fr 1fr;gap:38px;align-items:center;margin:30px auto}
.feature-media{margin:0}
.feature-media img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--line)}
.feature-media figcaption{margin-top:8px;font-size:12px;color:#9aa3ab}
.feature-media figcaption a{color:#7d868e;text-decoration:underline}
.feature-copy h2{font-size:clamp(22px,2.6vw,30px);line-height:1.18;margin:0 0 .5em;color:var(--ink)}
.feature-copy>p{color:var(--body);font-size:16.5px;line-height:1.6;margin:0 0 1.1em}
.feature-points{list-style:none;padding:0;margin:0 0 1.4em;display:grid;gap:12px}
.feature-points li{position:relative;padding-left:26px;font-size:15.5px;line-height:1.5;color:var(--body)}
.feature-points li::before{content:"";position:absolute;left:3px;top:7px;width:9px;height:9px;border-radius:50%;background:var(--teal)}
.feature-points strong{color:var(--ink);font-weight:700}
.feature-cta{display:flex;flex-wrap:wrap;gap:12px}
.feature-cta a{display:inline-block;padding:11px 18px;border-radius:9px;font-weight:700;font-size:15px;text-decoration:none}
.feature-cta .btn-primary{background:var(--teal);color:#fff}
.feature-cta .btn-primary:hover{background:var(--teal-dark)}
.feature-cta .btn-ghost{background:#fff;color:var(--teal-dark);border:1.5px solid var(--teal)}
.feature-cta .btn-ghost:hover{background:var(--bg-tint)}
@media(max-width:760px){.feature{grid-template-columns:1fr;gap:20px}}
.kicker,.kicker--lg{display:inline-block;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--teal);margin:10px 0 6px}
.article-title{font-size:clamp(28px,4vw,40px);font-weight:800;line-height:1.12;color:var(--ink);margin:4px 0 0}
.article-dek{font-size:19px;color:var(--muted);margin:14px 0 0;line-height:1.5}
.article-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;font-size:14px;color:var(--muted)}
.article-meta .byline{color:var(--ink);font-weight:700}
.article-hero{margin:18px 0 0;border-radius:var(--radius);overflow:hidden;background:var(--bg-tint)}
.article-hero img{width:100%;height:auto}
.article-hero figcaption{font-size:13px;color:var(--muted);padding:9px 2px 0;line-height:1.4}
.prose{font-size:18px;line-height:1.75;color:var(--body);margin-top:18px}
.prose h2{font-size:25px;font-weight:800;color:var(--ink);margin:1.6em 0 .5em;scroll-margin-top:140px}
.prose h3{font-size:20px;font-weight:700;color:var(--ink);margin:1.4em 0 .4em}
.prose a{color:var(--teal-dark);text-decoration:underline}
.prose ul,.prose ol{padding-left:1.3em;margin:0 0 1.1em}
.prose li{margin:0 0 .4em}
.prose li::marker{color:var(--teal)}
.prose table{width:100%;border-collapse:collapse;margin:1.3em 0;font-size:15.5px}
.prose th,.prose td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line)}
.prose th{background:var(--bg-tint);font-weight:800;color:var(--ink)}
.prose blockquote{margin:1.4em 0;padding:4px 0 4px 20px;border-left:4px solid var(--teal);font-size:20px;color:var(--ink)}
/* "On this page" contents, injected into long guides by article.html */
.guide-toc{margin:24px 0 8px;border:1px solid var(--line);border-left:4px solid var(--teal);border-radius:12px;padding:16px 20px;background:var(--bg-tint)}
.guide-toc-title{margin:0 0 10px;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.guide-toc ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:4px 24px}
.guide-toc li{margin:0}
.guide-toc a{display:block;color:var(--teal-dark);text-decoration:none;font-size:15.5px;font-weight:600;line-height:1.45;padding:3px 0}
.guide-toc a:hover{text-decoration:underline}
.hub-head{padding:18px 0;border-bottom:2px solid var(--teal);margin-bottom:8px}
.hub-head h1{font-size:clamp(26px,4vw,38px);font-weight:800;color:var(--ink)}
.hub-head .eyebrow{display:inline-block;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:#fff;background:var(--teal);padding:4px 10px;border-radius:5px;margin-bottom:10px}
.section-title{font-size:14px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--teal);border-bottom:2px solid var(--teal);padding-bottom:8px;margin:0 0 18px;display:inline-block}
.related{margin-top:36px}
.thumb-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#e7eef1,#d3dee3)}

/* ============================================================
   RESPONSIVE
   Breakpoints: 1024px (tablet landscape / small desktop),
   768px (tablet portrait -> mobile nav kicks in),
   480px (small phone). Mobile-safe tap targets >=44px,
   body text stays >=16px, no horizontal overflow.
   ============================================================ */

/* keep everything inside the viewport */
html,body{overflow-x:hidden;max-width:100%}

/* ---- <=1024px: tablet landscape / small desktop ---- */
@media (max-width:1024px){
  .tile-grid{grid-template-columns:repeat(3,1fr)}
  .card-grid,.calc-grid{grid-template-columns:repeat(2,1fr)}
  .trust-grid{grid-template-columns:repeat(2,1fr);gap:22px}
  .newsletter-inner{grid-template-columns:1fr 1fr}
  .footer-top{grid-template-columns:1fr}
  .footer-links{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 26px}
  .footer-brand{max-width:none}
}

/* ---- <=768px: tablet portrait. Mobile burger nav switches on ---- */
@media (max-width:768px){
  :root{--gut:16px}

  /* header: hide the topbar side links, keep the centred wordmark */
  .topbar-left span,.topbar-right span{display:none}
  .topbar-left,.topbar-right{width:44px;height:44px;justify-content:center}
  .topbar-inner{min-height:64px}
  .brand .brand-1,.brand .brand-2{font-size:24px}
  .brand-strap{font-size:10px}

  /* main nav -> burger + slide-down panel */
  .mainnav-inner{justify-content:space-between;position:relative}
  .nav-home{padding:12px 10px}
  .nav-burger{display:inline-flex}
  .nav-links{display:none;position:absolute;top:48px;left:0;right:0;flex-direction:column;gap:0;background:var(--teal-dark);z-index:60;padding:6px 0 10px;box-shadow:0 14px 22px rgba(0,0,0,.18)}
  .nav-toggle:checked ~ .mainnav-inner .nav-links{display:flex}
  .nav-toggle:checked ~ .mainnav-inner .nav-burger-bars span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  .nav-toggle:checked ~ .mainnav-inner .nav-burger-bars span:nth-child(2){opacity:0}
  .nav-toggle:checked ~ .mainnav-inner .nav-burger-bars span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
  .nav-links a{width:100%;padding:14px 20px;min-height:48px;display:flex;align-items:center;border-top:1px solid rgba(255,255,255,.12)}
  .nav-links a.active:not(.nav-cta){box-shadow:inset 4px 0 0 var(--yellow)}
  .nav-links .nav-cta{margin:10px 20px 4px;border-radius:6px;justify-content:center;border-top:0;min-height:48px}

  /* hero search stacks; full-width button */
  .hero{padding:40px 0 44px}
  .hero-search{flex-direction:column;padding:10px;gap:9px}
  .hs-field{flex:1 1 auto;width:100%}
  .hs-field input{padding:15px 0}
  .hero-search button{width:100%;padding:15px;min-height:48px}

  /* grids */
  .tile-grid{grid-template-columns:repeat(2,1fr);gap:14px}
  .card-grid,.calc-grid{grid-template-columns:repeat(2,1fr)}
  .trust-grid{grid-template-columns:repeat(2,1fr)}

  /* newsletter stacks */
  .newsletter-inner{grid-template-columns:1fr;gap:18px;padding:30px var(--gut)}
  .newsletter-form input{flex:1 1 100%}
  .newsletter-form button{flex:1 1 100%;min-height:48px}

  /* footer -> 2 columns, brand full width */
  .footer-links{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 26px}
  .footer-col a,.nav-links a{padding-top:2px;padding-bottom:2px}

  /* ---- directory profile (.dir-*) reinforcement on tablet/mobile ---- */
  .dir-layout{display:block!important}
  .dir-sidebar{position:static!important;margin-top:20px}
  .dir-hero-top{flex-wrap:wrap}
  .dir-hero-actions{width:100%}
  .dir-hero-actions .dir-btn{flex:1 1 100%;min-height:46px;display:flex;align-items:center;justify-content:center}
  .dir-btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  /* let wide fact / company tables scroll instead of overflowing */
  .dir-facts,.dir-company-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* ---- <=480px: phones. One column where it reads better ---- */
@media (max-width:480px){
  .section{padding:32px 0 6px}
  .section-head h2{font-size:19px}
  .hero-title{font-size:clamp(25px,7vw,32px)}
  .hero-sub{font-size:16px}

  /* single column grids on the smallest screens */
  .tile-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .tile{padding:18px 10px}
  .card-grid,.calc-grid{grid-template-columns:1fr}
  .trust-grid{grid-template-columns:1fr}

  /* footer single column */
  .footer-links{grid-template-columns:1fr;gap:8px 0}
  .footer-col{border-top:1px solid rgba(255,255,255,.08);padding-top:16px}
  .footer-col:first-child{border-top:0;padding-top:0}
  .footer-bar-inner{flex-direction:column;gap:6px}

  /* directory hero: logo + name + buttons stack */
  .dir-hero-top{flex-direction:column}
  .dir-hero-logo{flex-basis:auto;width:72px;height:72px}
  .dir-hero-name{font-size:1.35rem}
  .dir-grid{grid-template-columns:1fr!important}
}

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