/* =====================================================================
   HGV Driver Jobs — Design system
   "Motorway signage meets modern jobs board"
   Dark asphalt chrome · light concrete content · hi-vis accents
   ===================================================================== */

/* ---------- Fonts (self-hosted, GDPR-friendly) ---------- */
@font-face { font-family:'Barlow'; font-style:normal; font-weight:400; font-display:swap; src:url('/assets/fonts/barlow-400.woff2') format('woff2'); }
@font-face { font-family:'Barlow'; font-style:normal; font-weight:500; font-display:swap; src:url('/assets/fonts/barlow-500.woff2') format('woff2'); }
@font-face { font-family:'Barlow'; font-style:normal; font-weight:600; font-display:swap; src:url('/assets/fonts/barlow-600.woff2') format('woff2'); }
@font-face { font-family:'Barlow'; font-style:normal; font-weight:700; font-display:swap; src:url('/assets/fonts/barlow-700.woff2') format('woff2'); }
@font-face { font-family:'Barlow Semi Condensed'; font-style:normal; font-weight:700; font-display:swap; src:url('/assets/fonts/barlow-sc-700.woff2') format('woff2'); }
@font-face { font-family:'Barlow Semi Condensed'; font-style:normal; font-weight:800; font-display:swap; src:url('/assets/fonts/barlow-sc-800.woff2') format('woff2'); }

/* ---------- Tokens ---------- */
:root {
  /* Brand */
  --asphalt:   #12171d;
  --asphalt-2: #1a212a;
  --asphalt-3: #232d38;
  --asphalt-line: #313d4a;
  --concrete:  #f4f5f7;
  --concrete-2:#eceef2;
  --surface:   #ffffff;

  --orange:    #ff6a00;
  --orange-600:#e85f00;
  --orange-050:#fff3ea;
  --link:      #b34700;   /* AA-compliant (>=4.5:1 on white) for inline text links */
  --hivis:     #ffd21f;
  --hivis-600: #e6bd10;

  --ink:   #141a20;
  --ink-2: #47525d;
  --ink-3: #626c77;
  --line:  #e4e8ec;
  --on-dark:   #eef2f6;
  --on-dark-2: #9fabb7;

  --green: #127a41;   /* AA-compliant on white and on --green-050 */
  --green-050:#e9f7ef;
  --red:   #d8483a;
  --red-050:#fdecea;
  --amber: #d99413;
  --amber-050:#fbf2df;

  /* Type */
  --font-display:'Barlow Semi Condensed','Barlow',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-sans:'Barlow',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --text-xs:.8125rem; --text-sm:.9rem; --text-base:1rem; --text-lg:1.125rem;
  --text-xl:1.375rem; --text-2xl:1.75rem; --text-3xl:2.25rem; --text-4xl:3rem;

  /* Spacing */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-5:1.25rem; --space-6:1.5rem; --space-8:2rem; --space-10:2.5rem;
  --space-12:3rem; --space-16:4rem; --space-20:5rem; --space-24:6rem;

  /* Radius */
  --radius-sm:7px; --radius:11px; --radius-lg:18px; --radius-pill:999px;

  /* Shadow */
  --shadow-sm:0 1px 2px rgba(18,23,29,.06),0 1px 3px rgba(18,23,29,.05);
  --shadow-md:0 6px 20px rgba(18,23,29,.10),0 2px 6px rgba(18,23,29,.06);
  --shadow-lg:0 18px 48px rgba(18,23,29,.16);
  --focus-ring:0 0 0 3px rgba(255,106,0,.35);

  /* Layout */
  --container:1180px;
  --container-narrow:820px;

  /* Z */
  --z-dropdown:1000; --z-sticky:1020; --z-banner:1030; --z-modal:1050; --z-toast:1080;
}

/* ---------- Reset / base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; font-family:var(--font-sans); font-size:var(--text-base);
  line-height:1.6; color:var(--ink); background:var(--concrete);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--link); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* Accessible skip link — visually hidden until focused */
.skip-link{ position:absolute; left:var(--space-4); top:-60px; z-index:var(--z-toast); background:var(--orange); color:#fff; padding:.7rem 1.1rem; border-radius:var(--radius); font-weight:700; transition:top .15s ease; }
.skip-link:focus{ top:var(--space-3); text-decoration:none; outline:2px solid #fff; }
h1,h2,h3,h4{ font-family:var(--font-display); line-height:1.08; margin:0 0 var(--space-4); letter-spacing:-.01em; font-weight:800; color:var(--ink); }
h1{ font-size:var(--text-4xl); } h2{ font-size:var(--text-2xl); } h3{ font-size:var(--text-xl); } h4{ font-size:var(--text-lg); }
p{ margin:0 0 var(--space-4); }
ul,ol{ margin:0 0 var(--space-4); padding-left:1.25rem; }
:focus-visible{ outline:none; box-shadow:var(--focus-ring); border-radius:var(--radius-sm); }
button{ font-family:inherit; }
hr{ border:none; border-top:1px solid var(--line); margin:var(--space-8) 0; }

/* ---------- Layout ---------- */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--space-5); }
.container-narrow{ max-width:var(--container-narrow); }
.section{ padding-block:var(--space-16); }
.section-sm{ padding-block:var(--space-10); }
.stack>*+*{ margin-top:var(--space-4); }
.grid{ display:grid; gap:var(--space-5); }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-5); }
.split-2{ display:grid; grid-template-columns:1.4fr 1fr; gap:var(--space-10); align-items:center; }
@media (max-width:820px){ .grid-2,.split-2{ grid-template-columns:1fr; } .split-2{ gap:var(--space-6); } }
.muted{ color:var(--ink-3); }
.lead{ font-size:var(--text-lg); color:var(--ink-2); }
.center{ text-align:center; }
.eyebrow{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:.14em; font-size:var(--text-xs); font-weight:700; color:var(--orange-600); margin-bottom:var(--space-2); }
.on-dark .eyebrow{ color:var(--hivis); }

/* Hazard chevron accent strip (lorry tail-lift stripes) */
.hazard-strip{ height:8px; background:repeating-linear-gradient(-55deg,var(--hivis) 0 18px,var(--asphalt) 18px 36px); }
.hazard-strip--thin{ height:5px; }

/* Road-marking dashed divider */
.road-divider{ height:0; border-top:3px dashed var(--asphalt-line); opacity:.25; margin:var(--space-10) 0; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:.03em;
  font-size:var(--text-sm); line-height:1; padding:.85rem 1.4rem; border-radius:var(--radius);
  border:2px solid transparent; cursor:pointer; transition:transform .12s ease, box-shadow .12s ease, background .12s ease; text-decoration:none;
}
.btn:hover{ text-decoration:none; }
.btn:active{ transform:translateY(1px); }
/* Dark text on orange: matches the approved mockup and passes WCAG AA (6.3:1). */
.btn-primary{ background:var(--orange); color:var(--asphalt); box-shadow:0 2px 0 var(--orange-600); }
.btn-primary:hover{ background:var(--orange-600); color:var(--asphalt); box-shadow:0 4px 14px rgba(255,106,0,.35); }
.btn-hivis{ background:var(--hivis); color:var(--asphalt); box-shadow:0 2px 0 var(--hivis-600); }
.btn-hivis:hover{ background:var(--hivis-600); }
.btn-dark{ background:var(--asphalt); color:#fff; }
.btn-dark:hover{ background:var(--asphalt-2); }
.btn-outline{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn-outline:hover{ border-color:var(--ink-3); background:#fff; }
/* Buttons on ANY dark surface: legible text + a visible border (not just on hover).
   Any dark card/section that carries buttons should get the .on-dark class. */
.on-dark .btn-outline,
.hero .btn-outline,
.site-header .btn-outline,
.site-footer .btn-outline{ color:#fff; border-color:rgba(255,255,255,.5); }
.on-dark .btn-outline:hover,
.hero .btn-outline:hover,
.site-header .btn-outline:hover,
.site-footer .btn-outline:hover{ border-color:#fff; background:rgba(255,255,255,.12); }
.on-dark .btn-ghost,
.hero .btn-ghost,
.site-header .btn-ghost,
.site-footer .btn-ghost{ color:var(--on-dark); }
.on-dark .btn-ghost:hover,
.hero .btn-ghost:hover,
.site-header .btn-ghost:hover,
.site-footer .btn-ghost:hover{ color:#fff; background:rgba(255,255,255,.1); }
.btn-ghost{ background:transparent; color:var(--ink-2); padding-inline:.6rem; }
.btn-ghost:hover{ color:var(--ink); }
.btn-block{ width:100%; }
.btn-sm{ padding:.55rem .9rem; font-size:var(--text-xs); }
.btn-lg{ padding:1.05rem 1.8rem; font-size:var(--text-base); }
.btn[disabled],.btn.is-loading{ opacity:.6; pointer-events:none; }

/* ---------- Badges / pills ---------- */
.badge{ display:inline-flex; align-items:center; gap:.35em; font-size:var(--text-xs); font-weight:600; padding:.28em .7em; border-radius:var(--radius-pill); line-height:1.3; white-space:nowrap; }
.badge-featured{ background:var(--hivis); color:var(--asphalt); font-weight:700; }
.badge-priority{ background:var(--orange-050); color:var(--link); border:1px solid #ffd8bd; }
.badge-class{ background:var(--asphalt); color:#fff; }
.badge-soft{ background:var(--concrete-2); color:var(--ink-2); }
.badge-green{ background:var(--green-050); color:var(--green); }
.badge-red{ background:var(--red-050); color:#b3271a; }
.badge-amber{ background:var(--amber-050); color:#8a5d00; }
.badge-live{ background:var(--green-050); color:var(--green); }
.badge-live::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--green); }

/* ---------- Cards ---------- */
.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); }
.card-pad{ padding:var(--space-6); }
a.card, .card-link{ display:block; color:inherit; transition:box-shadow .15s ease, transform .15s ease, border-color .15s ease; }
a.card:hover, .card-link:hover{ text-decoration:none; box-shadow:var(--shadow-md); transform:translateY(-1px); border-color:#d5dbe2; }

/* Job card */
.job-card{ position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); padding:var(--space-5) var(--space-6); display:block; color:inherit; transition:box-shadow .15s ease, transform .15s ease, border-color .15s ease; overflow:hidden; }
.job-card:hover{ text-decoration:none; box-shadow:var(--shadow-md); transform:translateY(-1px); border-color:#d5dbe2; }
.job-card.is-featured{ border-color:#ffe08a; }
.job-card.is-featured::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:linear-gradient(var(--hivis),var(--orange)); }
.job-card__top{ display:flex; justify-content:space-between; align-items:flex-start; gap:var(--space-4); }
.job-card__top>div:first-child{ min-width:0; }
.job-card__title{ font-family:var(--font-display); font-weight:700; font-size:var(--text-lg); color:var(--ink); margin:0 0 var(--space-1); line-height:1.15; }
.job-card:hover .job-card__title{ color:var(--orange-600); }
.job-card__company{ color:var(--ink-3); font-size:var(--text-sm); }
.job-card__meta{ display:flex; flex-wrap:wrap; gap:var(--space-2) var(--space-4); margin-top:var(--space-3); color:var(--ink-2); font-size:var(--text-sm); }
.job-card__meta span{ display:inline-flex; align-items:center; gap:.4em; }
.job-card__pay{ font-family:var(--font-display); font-weight:700; color:var(--green); font-size:var(--text-lg); text-align:right; flex-shrink:0; max-width:48%; overflow-wrap:anywhere; }
.job-card__tags{ display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-4); }
.job-card__logo{ width:52px; height:52px; border-radius:var(--radius); object-fit:contain; background:#fff; border:1px solid var(--line); flex-shrink:0; }

.icon{ width:1em; height:1em; display:inline-block; vertical-align:-.125em; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* ---------- Forms ---------- */
.form-group{ margin-bottom:var(--space-5); }
.form-label{ display:block; font-weight:600; font-size:var(--text-sm); margin-bottom:var(--space-2); color:var(--ink); }
.form-hint{ font-size:var(--text-xs); color:var(--ink-3); margin-top:var(--space-1); }
.form-input,.form-select,.form-textarea{
  width:100%; font-family:inherit; font-size:var(--text-base); color:var(--ink);
  background:#fff; border:1.5px solid var(--line); border-radius:var(--radius); padding:.7rem .85rem; transition:border-color .12s ease, box-shadow .12s ease;
}
.form-input:focus,.form-select:focus,.form-textarea:focus{ outline:none; border-color:var(--orange); box-shadow:var(--focus-ring); }
.form-textarea{ min-height:140px; resize:vertical; line-height:1.55; }
.form-select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236c7681' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .85rem center; padding-right:2.2rem; }
.has-error .form-input,.has-error .form-select,.has-error .form-textarea,.form-input.error{ border-color:var(--red); }
.field-error{ color:var(--red); font-size:var(--text-xs); margin-top:var(--space-1); }
.form-check{ display:flex; align-items:flex-start; gap:var(--space-2); font-size:var(--text-sm); color:var(--ink-2); }
.form-check input{ margin-top:.2rem; accent-color:var(--orange); width:1.05rem; height:1.05rem; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4); }
.honeypot{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ---------- Header ---------- */
.site-header{ background:var(--asphalt); color:var(--on-dark); position:sticky; top:0; z-index:var(--z-sticky); }
.site-header__inner{ display:flex; align-items:center; gap:var(--space-6); height:68px; }
.brand{ display:flex; align-items:center; gap:.6rem; font-family:var(--font-display); font-weight:800; font-size:1.3rem; color:#fff; text-transform:uppercase; letter-spacing:.01em; }
.brand:hover{ text-decoration:none; }
.brand__mark{ width:34px; height:34px; flex-shrink:0; }
.brand em{ color:var(--orange); font-style:normal; }
.main-nav{ display:flex; align-items:center; gap:var(--space-5); margin-left:auto; }
.main-nav a:not(.btn){ color:var(--on-dark-2); font-weight:600; font-size:var(--text-sm); transition:color .12s ease; }
.main-nav a:not(.btn):hover,.main-nav a:not(.btn).is-active{ color:#fff; text-decoration:none; }
.header-actions{ display:flex; align-items:center; gap:var(--space-3); }
.nav-toggle{ display:none; background:none; border:none; color:#fff; padding:.4rem; cursor:pointer; }

/* ---------- Hero ---------- */
.hero{ position:relative; background:var(--asphalt); color:var(--on-dark); overflow:hidden; }
.hero__bg{ position:absolute; inset:0; object-fit:cover; width:100%; height:100%; opacity:.6; z-index:0; }
/* Darker on the left (behind the text) fading right so the UK truck shows through. */
.hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(100deg,rgba(18,23,29,.92) 34%,rgba(18,23,29,.55) 100%),radial-gradient(1000px 480px at 12% -10%,rgba(255,106,0,.16),transparent 55%); z-index:1; }
@media (max-width:720px){ .hero::after{ background:linear-gradient(180deg,rgba(18,23,29,.72),rgba(18,23,29,.9) 88%); } }
.hero__inner{ position:relative; z-index:2; padding-block:var(--space-20) var(--space-16); }
.hero h1{ color:#fff; font-size:clamp(2.2rem,5.2vw,3.6rem); max-width:16ch; text-transform:uppercase; }
.hero h1 em{ color:var(--orange); font-style:normal; }
.hero__sub{ font-size:var(--text-lg); color:var(--on-dark); max-width:52ch; margin-bottom:var(--space-8); }
.hero__stats{ display:flex; flex-wrap:wrap; gap:var(--space-8); margin-top:var(--space-10); }
.hero__stat b{ font-family:var(--font-display); font-size:var(--text-2xl); color:var(--hivis); display:block; line-height:1; }
.hero__stat span{ font-size:var(--text-sm); color:var(--on-dark-2); }

/* Search bar */
.search-bar{ background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); padding:var(--space-3); display:grid; grid-template-columns:1.4fr 1fr 1fr auto; gap:var(--space-2); }
.search-bar__field{ display:flex; align-items:center; gap:.6rem; padding:.35rem .6rem; border-right:1px solid var(--line); }
.search-bar__field:last-of-type{ border-right:none; }
.search-bar__field .icon{ color:var(--ink-3); font-size:1.15rem; flex-shrink:0; }
.search-bar input,.search-bar select{ border:none; width:100%; font-size:var(--text-base); color:var(--ink); background:none; padding:.35rem 0; }
.search-bar input:focus,.search-bar select:focus{ outline:none; box-shadow:none; }
.search-bar label{ display:block; font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; font-weight:700; color:var(--ink-3); }

/* Popular searches chips */
.chips{ display:flex; flex-wrap:wrap; gap:var(--space-2); }
.chip{ display:inline-flex; align-items:center; gap:.35em; background:#fff; border:1px solid var(--line); color:var(--ink-2); font-size:var(--text-sm); font-weight:500; padding:.4rem .8rem; border-radius:var(--radius-pill); transition:all .12s ease; }
.chip:hover{ border-color:var(--orange); color:var(--orange-600); text-decoration:none; }
.on-dark .chip{ background:rgba(255,255,255,.06); border-color:var(--asphalt-line); color:var(--on-dark); }
.on-dark .chip:hover{ background:var(--orange); border-color:var(--orange); color:#fff; }

/* ---------- Category / location tiles ---------- */
.tile-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:var(--space-4); }
.tile{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:var(--space-5); display:flex; flex-direction:column; gap:var(--space-1); transition:all .15s ease; color:inherit; }
.tile:hover{ text-decoration:none; box-shadow:var(--shadow-md); transform:translateY(-1px); border-color:#d5dbe2; }
.tile__icon{ width:40px; height:40px; color:var(--orange); margin-bottom:var(--space-2); }
.tile__name{ font-family:var(--font-display); font-weight:700; font-size:var(--text-lg); color:var(--ink); }
.tile__count{ font-size:var(--text-sm); color:var(--ink-3); }
.tile__blurb{ font-size:var(--text-xs); color:var(--ink-3); }

/* ---------- Sections on dark ---------- */
.on-dark{ background:var(--asphalt); color:var(--on-dark); }
.on-dark h1,.on-dark h2,.on-dark h3{ color:#fff; }
.on-dark .card{ background:var(--asphalt-2); border-color:var(--asphalt-line); }

/* ---------- Trust band ---------- */
.trust-band{ background:var(--asphalt-2); color:var(--on-dark); }
.trust-band__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-6); text-align:center; }
.trust-band .icon{ color:var(--hivis); width:28px; height:28px; }

/* ---------- Job advert: description + sticky apply/map/facts cluster ---------- */
.job-layout{ display:grid; grid-template-columns:1fr 360px; gap:var(--space-6); align-items:start; }
.job-aside{ position:sticky; top:88px; }
.job-main>*+*{ margin-top:var(--space-5); }
@media (max-width:900px){
  .job-layout{ grid-template-columns:1fr; }
  .job-aside{ position:static; order:-1; margin-bottom:var(--space-5); }
}

/* ---------- Layout: content + sidebar ---------- */
.layout-2col{ display:grid; grid-template-columns:300px 1fr; gap:var(--space-8); align-items:start; }
.layout-2col--right{ grid-template-columns:1fr 320px; }
.sidebar{ position:sticky; top:88px; }

/* Filters */
.filter-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:var(--space-5); }
.filter-group{ padding-block:var(--space-4); border-bottom:1px solid var(--line); }
.filter-group:last-child{ border-bottom:none; }
.filter-group h4{ font-size:var(--text-sm); text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3); margin-bottom:var(--space-3); font-family:var(--font-display); }

/* ---------- Article / prose ---------- */
.prose{ max-width:72ch; font-size:var(--text-lg); color:var(--ink-2); }
.prose h2{ margin-top:var(--space-10); font-size:var(--text-2xl); color:var(--ink); }
.prose h3{ margin-top:var(--space-8); color:var(--ink); }
.prose p,.prose ul,.prose ol{ margin-bottom:var(--space-5); }
.prose a{ text-decoration:underline; }
.prose table{ width:100%; border-collapse:collapse; font-size:var(--text-base); margin-bottom:var(--space-6); }
.prose th,.prose td{ text-align:left; padding:.7rem .8rem; border-bottom:1px solid var(--line); }
.prose th{ background:var(--concrete); font-family:var(--font-display); }
.prose blockquote{ border-left:4px solid var(--orange); padding-left:var(--space-4); color:var(--ink-2); font-style:italic; margin:var(--space-6) 0; }

/* ---------- Flash messages ---------- */
.flashes{ position:fixed; top:80px; right:var(--space-5); z-index:var(--z-toast); display:flex; flex-direction:column; gap:var(--space-2); max-width:360px; }
.flash{ display:flex; align-items:flex-start; gap:var(--space-3); background:#fff; border-left:4px solid var(--ink-3); border-radius:var(--radius); box-shadow:var(--shadow-lg); padding:var(--space-4); font-size:var(--text-sm); animation:flashIn .3s ease; }
.flash--success{ border-color:var(--green); }
.flash--error{ border-color:var(--red); }
.flash--info{ border-color:var(--orange); }
.flash button{ background:none; border:none; color:var(--ink-3); cursor:pointer; margin-left:auto; padding:.35rem; min-width:24px; min-height:24px; display:inline-flex; align-items:center; justify-content:center; }
@keyframes flashIn{ from{ opacity:0; transform:translateX(20px); } to{ opacity:1; transform:none; } }

/* ---------- Cookie banner ---------- */
.cookie-banner{ position:fixed; bottom:var(--space-4); left:var(--space-4); right:var(--space-4); max-width:520px; margin-inline:auto; background:var(--asphalt); color:var(--on-dark); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); padding:var(--space-5); z-index:var(--z-banner); font-size:var(--text-sm); }
.cookie-banner h4{ color:#fff; margin-bottom:var(--space-2); }
.cookie-banner__actions{ display:flex; gap:var(--space-3); margin-top:var(--space-4); }

/* ---------- Footer ---------- */
.site-footer{ background:var(--asphalt); color:var(--on-dark-2); padding-block:var(--space-16) var(--space-8); }
.site-footer a{ color:var(--on-dark-2); font-size:var(--text-sm); }
.site-footer a:hover{ color:#fff; }
.footer-grid{ display:grid; grid-template-columns:1.6fr repeat(4,1fr); gap:var(--space-8); }
.footer-col h4{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:.08em; font-size:var(--text-xs); color:var(--on-dark); margin-bottom:var(--space-4); }
.footer-col ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:var(--space-2); }
.footer-bottom{ border-top:1px solid var(--asphalt-line); margin-top:var(--space-12); padding-top:var(--space-6); display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--space-4); font-size:var(--text-xs); }

/* ---------- Dashboard ---------- */
.dash{ display:grid; grid-template-columns:240px 1fr; gap:var(--space-8); align-items:start; }
.dash-nav{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:var(--space-3); position:sticky; top:88px; }
.dash-nav a{ display:flex; align-items:center; gap:var(--space-3); padding:.7rem .9rem; border-radius:var(--radius); color:var(--ink-2); font-weight:600; font-size:var(--text-sm); }
.dash-nav a:hover{ background:var(--concrete); text-decoration:none; }
.dash-nav a.is-active{ background:var(--orange-050); color:var(--orange-600); }
.stat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:var(--space-4); }
.stat{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:var(--space-5); }
.stat b{ font-family:var(--font-display); font-size:var(--text-3xl); color:var(--ink); display:block; line-height:1; }
.stat span{ font-size:var(--text-sm); color:var(--ink-3); }

/* Table */
.table{ width:100%; border-collapse:collapse; background:#fff; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line); font-size:var(--text-sm); }
.table th{ text-align:left; font-family:var(--font-display); text-transform:uppercase; letter-spacing:.04em; font-size:var(--text-xs); color:var(--ink-3); padding:var(--space-3) var(--space-4); background:var(--concrete); border-bottom:1px solid var(--line); }
.table td{ padding:var(--space-3) var(--space-4); border-bottom:1px solid var(--line); vertical-align:middle; }
.table tr:last-child td{ border-bottom:none; }
.table tr:hover td{ background:var(--concrete); }
.table-wrap{ overflow-x:auto; }

/* Breadcrumb */
.breadcrumb{ display:flex; flex-wrap:wrap; gap:.5rem; font-size:var(--text-sm); color:var(--ink-3); padding-block:var(--space-4); }
.breadcrumb a{ color:var(--ink-3); }
.breadcrumb a:hover{ color:var(--orange-600); }
.breadcrumb span{ color:var(--line); }

/* Pagination */
.pagination{ display:flex; gap:var(--space-2); justify-content:center; margin-top:var(--space-8); }
.pagination a,.pagination span{ display:inline-flex; align-items:center; justify-content:center; min-width:40px; height:40px; padding:0 .6rem; border:1px solid var(--line); border-radius:var(--radius); background:#fff; color:var(--ink-2); font-weight:600; }
.pagination a:hover{ border-color:var(--orange); color:var(--orange-600); text-decoration:none; }
.pagination .is-current{ background:var(--asphalt); color:#fff; border-color:var(--asphalt); }

/* Empty state */
.empty{ text-align:center; padding:var(--space-16) var(--space-6); color:var(--ink-3); }
.empty .icon{ width:48px; height:48px; color:var(--line); margin-inline:auto var(--space-4); }

/* Utilities */
.flex{ display:flex; } .items-center{ align-items:center; } .justify-between{ justify-content:space-between; }
.gap-2{ gap:var(--space-2); } .gap-3{ gap:var(--space-3); } .gap-4{ gap:var(--space-4); }
.wrap{ flex-wrap:wrap; }
.mt-2{ margin-top:var(--space-2); } .mt-4{ margin-top:var(--space-4); } .mt-6{ margin-top:var(--space-6); } .mt-8{ margin-top:var(--space-8); }
.mb-0{ margin-bottom:0; } .mb-4{ margin-bottom:var(--space-4); } .mb-6{ margin-bottom:var(--space-6); }
.text-sm{ font-size:var(--text-sm); } .text-center{ text-align:center; }
.hide{ display:none !important; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--space-4); margin-bottom:var(--space-8); flex-wrap:wrap; }
.section-head p{ margin:0; }

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .footer-grid{ grid-template-columns:1fr 1fr; gap:var(--space-8) var(--space-6); }
  .trust-band__grid{ grid-template-columns:1fr 1fr; gap:var(--space-8); }
  .layout-2col,.layout-2col--right{ grid-template-columns:1fr; }
  .dash{ grid-template-columns:1fr; }
  .dash-nav,.sidebar{ position:static; }
  .search-bar{ grid-template-columns:1fr; }
  .search-bar__field{ border-right:none; border-bottom:1px solid var(--line); }
  .search-bar__field:last-of-type{ border-bottom:none; }
}
@media (max-width:720px){
  :root{ --text-4xl:2.3rem; --text-3xl:1.9rem; --text-2xl:1.5rem; }
  .main-nav{ display:none; }
  .nav-toggle{ display:inline-flex; margin-left:auto; }
  .site-header.nav-open .main-nav{ display:flex; position:absolute; top:68px; left:0; right:0; background:var(--asphalt); flex-direction:column; align-items:flex-start; padding:var(--space-5); gap:var(--space-4); border-top:1px solid var(--asphalt-line); }
  .form-row{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .trust-band__grid{ grid-template-columns:1fr; }
  .section{ padding-block:var(--space-12); }
  .flashes{ left:var(--space-4); right:var(--space-4); max-width:none; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}