/*
Theme Name: VivyQuest Freight
Theme URI: https://vivyquest.com
Author: T-Zion Agency
Description: Air and sea freight between the UK and Nigeria. Built to the VivyQuest
  proposal's design system so the site, the flyer and the PDF read as one brand.
  Phone-first, no external requests, light enough for Nigerian and UK networks.
Version: 1.0
Text Domain: vivyquest-freight
*/

/* ==========================================================================
   1. Tokens — straight from the proposal's design system
   ========================================================================== */
:root{
  --ink:#1A1020;
  --violet:#6E2A8F;
  --violet-2:#57206F;
  --magenta:#C2389E;
  --lilac:#EFE4F4;
  --paper:#F8F5F2;
  --white:#FFFFFF;
  --muted:#63576D;
  --line:#E3D9E9;
  --hair:rgba(26,16,32,.10);
  --good:#0F6B3F;
  --warn:#9A3412;

  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --gut:clamp(18px,4vw,48px);
  --maxw:1180px;
  --radius:14px;
  --shadow:0 18px 50px rgba(26,16,32,.10);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-weight:400;font-size:16.5px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.12;margin:0;letter-spacing:-.01em}
h1{font-size:clamp(34px,6vw,60px)}
h2{font-size:clamp(26px,4vw,40px)}
h3{font-size:clamp(19px,2.2vw,24px)}
p{margin:0 0 1em}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);width:100%}

/* The proposal's technical label: mono, uppercase, wide tracking */
.kicker{
  font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.20em;text-transform:uppercase;color:var(--magenta);
}
.kicker--muted{color:var(--muted)}

/* Rotated-square bullets instead of dots */
.ticks{list-style:none;margin:0;padding:0}
.ticks li{position:relative;padding-left:26px;margin-bottom:11px}
.ticks li::before{
  content:'';position:absolute;left:2px;top:.62em;width:8px;height:8px;
  background:var(--magenta);transform:rotate(45deg);
}
.ticks--light li::before{background:var(--lilac)}

/* Skip link, because a freight site gets keyboard and screen-reader users too */
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:12px 18px;z-index:200}
.skip:focus{left:0}

/* ==========================================================================
   2. Buttons
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--mono);font-size:12px;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;text-decoration:none;
  padding:15px 26px;border:1px solid transparent;border-radius:999px;cursor:pointer;
  transition:transform .18s ease,background .18s ease,color .18s ease,border-color .18s ease;
  line-height:1;
}
.btn:hover{transform:translateY(-2px)}
.btn--primary{background:var(--violet);color:#fff}
.btn--primary:hover{background:var(--violet-2)}
.btn--magenta{background:var(--magenta);color:#fff}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:#fff}
.btn--light{background:#fff;color:var(--ink)}
.btn--onDark{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.btn--onDark:hover{background:#fff;color:var(--ink)}
.btn svg{width:16px;height:16px;flex:0 0 auto}

/* ==========================================================================
   3. Header
   ========================================================================== */
.top{
  background:var(--ink);color:#fff;font-family:var(--mono);
  font-size:11px;letter-spacing:.13em;text-transform:uppercase;
}
.top .wrap{display:flex;justify-content:center;gap:22px;flex-wrap:wrap;padding-top:9px;padding-bottom:9px;text-align:center}
.top a{color:#fff;text-decoration:none;opacity:.92}
.top a:hover{opacity:1;text-decoration:underline;text-underline-offset:3px}
.top .sep{opacity:.35}

.site-header{
  position:sticky;top:0;z-index:60;background:var(--paper);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{display:flex;align-items:center;gap:20px;padding-top:14px;padding-bottom:14px}
.brand{display:flex;align-items:center;text-decoration:none;flex:0 0 auto}
/* The lockup is a detailed crest — below about 70px the flourish turns to mush. */
.brand img{height:76px;width:auto}
.brand .wordmark{font-family:var(--serif);font-weight:700;font-size:21px;line-height:1.05;color:var(--violet)}
.brand .wordmark small{display:block;font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.18em;color:var(--ink);margin-top:3px}

.nav{margin-left:auto;display:flex;align-items:center;gap:26px}
.nav ul{list-style:none;display:flex;gap:26px;margin:0;padding:0}
.nav a{
  font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;text-decoration:none;color:var(--ink);padding:6px 0;
  border-bottom:1px solid transparent;
}
.nav a:hover,.nav .current-menu-item>a{border-bottom-color:var(--magenta)}

.nav-toggle{display:none;background:none;border:0;padding:8px;cursor:pointer}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--ink);margin:5px 0;transition:transform .2s ease,opacity .2s ease}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:900px){
  .nav-toggle{display:block;margin-left:auto}
  .nav{
    position:fixed;inset:0 0 0 auto;width:min(320px,86vw);background:var(--paper);
    flex-direction:column;align-items:stretch;gap:0;padding:96px 28px 28px;
    transform:translateX(100%);transition:transform .28s ease;box-shadow:var(--shadow);
    margin-left:0;
  }
  .nav[data-open="true"]{transform:none}
  .nav ul{flex-direction:column;gap:0}
  .nav li{border-bottom:1px solid var(--line)}
  .nav a{display:block;padding:16px 0;font-size:13px}
  .nav .btn{margin-top:22px}
  .brand img{height:56px}
}

/* ==========================================================================
   4. Hero — dotted flight-path arc, straight from the proposal's motifs
   ========================================================================== */
/* The scene is lifted from the flyer itself — skyline, containers, truck.
   It is a 4.6x blow-up of a small crop, so it is deliberately weighted to the
   right where it sits behind the docket rather than behind body copy, and the
   scrim below carries most of the contrast work. */
.hero{
  position:relative;color:#fff;overflow:hidden;
  background:var(--ink) url(assets/hero.jpg) right center/cover no-repeat;
}
.hero::before{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(26,16,32,.97) 0%,rgba(26,16,32,.93) 30%,rgba(26,16,32,.70) 52%,rgba(26,16,32,.30) 74%,rgba(26,16,32,.14) 100%),
    linear-gradient(180deg,rgba(26,16,32,.55) 0%,rgba(26,16,32,0) 34%),
    radial-gradient(900px 520px at 8% 96%,rgba(110,42,143,.42),transparent 68%);
}
.hero .arc{position:absolute;inset:0;width:100%;height:100%;opacity:.5;pointer-events:none}
.hero .wrap{position:relative;z-index:2;padding-top:clamp(56px,9vw,104px);padding-bottom:clamp(56px,9vw,104px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,5vw,64px);align-items:center}
.hero h1{color:#fff;max-width:16ch;margin:16px 0 18px}
.hero h1 em{font-style:normal;color:var(--magenta)}
.hero p.lede{color:rgba(255,255,255,.86);font-size:clamp(16px,1.7vw,19px);max-width:46ch;margin-bottom:28px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.hero-facts{display:flex;gap:26px;flex-wrap:wrap;margin-top:34px;padding-top:26px;border-top:1px solid rgba(255,255,255,.16)}
.hero-facts div{min-width:120px}
.hero-facts b{display:block;font-family:var(--serif);font-size:26px;font-weight:600;color:#fff}
.hero-facts .glyphs{display:flex;align-items:center;gap:9px;height:34px}
.hero-facts .glyphs svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.hero-facts .glyphs i{font-style:normal;font-weight:400;opacity:.45}
.hero-facts span{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.66)}

/* The waybill docket — the proposal's manifest block, reused as the hero card */
.docket{
  background:var(--white);color:var(--ink);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;
}
.docket-head{
  background:var(--violet);color:#fff;padding:16px 22px;
  display:flex;justify-content:space-between;align-items:center;gap:14px;
}
.docket-head .t{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.docket-head .n{font-family:var(--mono);font-size:11px;opacity:.82}
.docket-body{padding:22px}
.docket-rows{border-top:1px dashed var(--line)}
.docket-rows div{
  display:flex;justify-content:space-between;gap:16px;align-items:baseline;
  padding:11px 0;border-bottom:1px dashed var(--line);
}
.docket-rows dt,.docket-rows .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.docket-rows .v{font-weight:500}

@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr}
  .hero .arc{opacity:.32}
  /* No room for the scene to breathe beside the copy — darken it right down
     and let it work as texture rather than as a picture. */
  .hero::before{
    background:
      linear-gradient(180deg,rgba(26,16,32,.86) 0%,rgba(26,16,32,.92) 55%,rgba(26,16,32,.96) 100%),
      radial-gradient(700px 420px at 10% 96%,rgba(110,42,143,.42),transparent 70%);
  }
}

/* ==========================================================================
   5. Sections
   ========================================================================== */
.section{padding:clamp(52px,7vw,96px) 0}
.section--tight{padding:clamp(38px,5vw,64px) 0}
.section--lilac{background:var(--lilac)}
.section--ink{background:var(--ink);color:#fff}
.section--ink h2,.section--ink h3{color:#fff}
.section--ink p{color:rgba(255,255,255,.82)}
.section-head{max-width:62ch;margin-bottom:clamp(26px,4vw,44px)}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-head h2{margin:10px 0 12px}
.section-head p{color:var(--muted);margin:0}
.section--ink .section-head p{color:rgba(255,255,255,.78)}

/* Service cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 24px;position:relative;overflow:hidden;
}
.card .ico{width:44px;height:44px;color:var(--violet);margin-bottom:16px}
.card .ico svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.card h3{margin-bottom:9px}
.card p{color:var(--muted);margin-bottom:14px}
.card .more{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--violet);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px}

/* ==========================================================================
   6. Quote form — the whole point of the page
   ========================================================================== */
.quote{background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.quote-head{background:var(--ink);color:#fff;padding:24px clamp(20px,3vw,32px)}
.quote-head h2{color:#fff;margin:8px 0 6px}
.quote-head p{color:rgba(255,255,255,.78);margin:0;font-size:15px}
.quote-body{padding:clamp(22px,3vw,34px)}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px}
.field{display:flex;flex-direction:column;gap:7px;min-width:0}
.field--full{grid-column:1/-1}
.field label{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.field label .req{color:var(--magenta)}
.field input,.field select,.field textarea{
  font-family:var(--sans);font-size:16px;color:var(--ink);background:var(--paper);
  border:1px solid var(--line);border-radius:10px;padding:13px 14px;width:100%;
  transition:border-color .16s ease,box-shadow .16s ease;
}
.field textarea{min-height:104px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--violet);box-shadow:0 0 0 3px rgba(110,42,143,.14);
}
.field .hint{font-size:12.5px;color:var(--muted)}
.field .err{font-size:12.5px;color:var(--warn);font-weight:500}
.field--bad input,.field--bad select,.field--bad textarea{border-color:var(--warn)}

/* Air or sea, as a real choice rather than a dropdown nobody opens */
.modes{display:flex;gap:10px;flex-wrap:wrap}
.modes label{
  flex:1 1 150px;display:flex;align-items:center;gap:11px;cursor:pointer;
  border:1px solid var(--line);border-radius:12px;padding:13px 15px;background:var(--paper);
  font-family:var(--sans);font-size:15px;letter-spacing:0;text-transform:none;color:var(--ink);
  transition:border-color .16s ease,background .16s ease;
}
.modes input{position:absolute;opacity:0;pointer-events:none}
.modes label svg{width:22px;height:22px;color:var(--violet);flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.5}
.modes label small{display:block;font-size:12px;color:var(--muted)}
.modes input:checked+span,.modes label:has(input:checked){border-color:var(--violet);background:var(--lilac)}
.modes label:has(input:focus-visible){box-shadow:0 0 0 3px rgba(110,42,143,.18)}

.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:22px}
.form-actions .note{font-size:13px;color:var(--muted);flex:1 1 220px;min-width:0}

.notice{border-radius:12px;padding:16px 18px;margin-bottom:20px;font-size:15px}
.notice--ok{background:#E9F5EF;border:1px solid #B9DFCC;color:var(--good)}
.notice--bad{background:#FDF0EA;border:1px solid #F2C9B4;color:var(--warn)}
.notice b{display:block;margin-bottom:4px}

@media (max-width:640px){ .fields{grid-template-columns:1fr} }

/* ==========================================================================
   7. Rates table
   ========================================================================== */
.sample-flag{
  display:inline-flex;align-items:center;gap:9px;background:#FFF3D6;border:1px solid #F0D89B;
  color:#7A5A12;border-radius:999px;padding:8px 16px;margin-bottom:18px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
}
.sample-flag svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6}

.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radius);border:1px solid var(--line);background:var(--white)}
table.rates{width:100%;border-collapse:collapse;min-width:640px}
table.rates th,table.rates td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
table.rates thead th{
  background:var(--ink);color:#fff;font-family:var(--mono);font-weight:500;
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
}
table.rates tbody tr:last-child td{border-bottom:0}
table.rates tbody tr:nth-child(even){background:rgba(239,228,244,.42)}
table.rates .route{font-weight:500}
table.rates .route small{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:3px}
table.rates .price{font-family:var(--mono);font-size:14.5px;white-space:nowrap}
table.rates .price b{font-weight:600}
table.rates .price small{display:block;color:var(--muted);font-size:11.5px;margin-top:3px}
.rates-note{font-size:13.5px;color:var(--muted);margin-top:14px}

/* ==========================================================================
   8. Shipping rules — two columns, allowed and not
   ========================================================================== */
.rules{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.rule{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px}
.rule h3{display:flex;align-items:center;gap:11px;margin-bottom:16px}
.rule h3 svg{width:24px;height:24px;flex:0 0 auto;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.rule--yes h3 svg{stroke:var(--good)}
.rule--no h3 svg{stroke:var(--warn)}
.rule--yes li::before{background:var(--good)}
.rule--no li::before{background:var(--warn)}
@media (max-width:760px){ .rules{grid-template-columns:1fr} }

/* ==========================================================================
   9. Schedule / cut-off dates
   ========================================================================== */
.sched{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.sched .slot{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:var(--radius);padding:22px}
.sched .slot .kicker{color:var(--magenta)}
.sched .slot b{display:block;font-family:var(--serif);font-size:21px;font-weight:600;margin:9px 0 6px;color:#fff}
.sched .slot p{font-size:14.5px;margin:0}
.cutoff{
  margin-top:22px;border:1px solid var(--magenta);border-radius:var(--radius);
  padding:22px;background:rgba(194,56,158,.10);
}
.cutoff .kicker{color:var(--magenta)}
.cutoff b{display:block;font-family:var(--serif);font-size:20px;margin:8px 0 6px;color:#fff}

/* ==========================================================================
   10. Track a shipment
   ========================================================================== */
.track{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(22px,3vw,32px)}
.track form{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}
.track input{flex:1 1 240px;min-width:0;font-family:var(--mono);letter-spacing:.06em}

/* ==========================================================================
   11. Trust band, newsletter, footer
   ========================================================================== */
.trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px}
.trust .item{display:flex;gap:14px;align-items:flex-start}
.trust svg{width:26px;height:26px;flex:0 0 auto;color:var(--magenta);fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.trust h4{font-size:16px;margin-bottom:5px}
.trust p{font-size:14px;color:var(--muted);margin:0}
.section--ink .trust p{color:rgba(255,255,255,.75)}

.subscribe{text-align:center}
.subscribe form{display:flex;gap:10px;max-width:470px;margin:22px auto 0;flex-wrap:wrap}
.subscribe input{flex:1 1 220px;min-width:0;font-family:var(--sans);font-size:16px;padding:14px 16px;border:1px solid var(--line);border-radius:999px;background:var(--white)}
.subscribe .small{font-size:12.5px;color:var(--muted);margin-top:12px}

.site-footer{background:var(--ink);color:rgba(255,255,255,.78);padding:clamp(46px,6vw,72px) 0 0}
.site-footer h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#fff;margin-bottom:16px;font-weight:500}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:32px}
.foot-brand .mark{font-family:var(--serif);font-size:25px;font-weight:700;color:#fff;line-height:1.1}
.foot-brand .mark small{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;color:var(--magenta);margin-top:6px}
.foot-brand p{margin:16px 0 0;font-size:14.5px;max-width:34ch}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin-bottom:10px}
.site-footer a{color:rgba(255,255,255,.78);text-decoration:none;font-size:14.5px}
.site-footer a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.foot-num{font-family:var(--mono);font-size:15px;color:#fff;display:block;margin-bottom:4px}
.foot-num small{display:block;font-size:10px;letter-spacing:.15em;color:rgba(255,255,255,.55);margin-top:2px}
.foot-bar{
  margin-top:clamp(34px,5vw,54px);border-top:1px solid rgba(255,255,255,.14);
  padding:20px 0;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:rgba(255,255,255,.55);
}
@media (max-width:860px){ .foot-grid{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .foot-grid{grid-template-columns:1fr} }

/* ==========================================================================
   12. Fixed WhatsApp button — mobile, as the proposal specifies
   ========================================================================== */
.wa-float{
  position:fixed;right:16px;bottom:16px;z-index:80;
  width:56px;height:56px;border-radius:50%;background:#25D366;color:#fff;
  display:none;align-items:center;justify-content:center;text-decoration:none;
  box-shadow:0 10px 26px rgba(0,0,0,.28);
}
.wa-float svg{width:30px;height:30px;fill:currentColor}
@media (max-width:900px){ .wa-float{display:flex} }

/* ==========================================================================
   13. Interior pages
   ========================================================================== */
.page-hero{background:var(--ink);color:#fff;padding:clamp(40px,6vw,72px) 0 clamp(34px,5vw,56px)}
.page-hero h1{color:#fff;margin:12px 0 0;max-width:20ch}
.entry{padding:clamp(38px,6vw,72px) 0;max-width:760px;margin:0 auto}
.entry h2{margin:1.6em 0 .5em}
.entry h3{margin:1.4em 0 .4em}
.entry ul,.entry ol{padding-left:22px}
.entry li{margin-bottom:9px}

/* ==========================================================================
   14. Reveal on scroll — disabled for anyone who asked for less motion
   ========================================================================== */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .btn:hover{transform:none}
  *{scroll-behavior:auto !important}
}

/* The header pill
   --------------------------------------------------------------------------
   `.nav a` is two classes deep and beats `.btn--primary`'s one, so the button
   was picking up the dark link colour and rendering near-black on violet.
   Matching the same depth wins it back. */
/* Padding is the one that actually bit: `.nav a{padding:6px 0}` flattened the
   pill's 15px/26px to 6px/0, so the label sat hard against the edge. */
.nav a.btn{padding:15px 26px;border-bottom:0}
.nav a.btn--primary,.nav a.btn--magenta{color:#fff}
.nav a.btn--primary:hover,.nav a.btn--magenta:hover{color:#fff;border-bottom:0}
.nav a.btn--ghost{color:var(--ink)}
.nav a.btn--ghost:hover{color:#fff;border-bottom:0}

/* --------------------------------------------------------------------------
   The two service columns — freight on one side, local delivery on the other.
   Named deliberately: `.hp` in this stylesheet is the honeypot the quote form
   uses to catch bots, and it is parked off-screen at one pixel square.
   -------------------------------------------------------------------------- */

.svc-cols{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
	gap:clamp(26px,4vw,56px);
	align-items:start;
}
.svc-cols h3{margin:0 0 4px}
.svc-cols .kicker{margin-bottom:14px}

/* --------------------------------------------------------------------------
   The WhatsApp button in the footer

   `.site-footer a:hover{color:#fff}` is written for the footer's text links
   and carries specificity (0,2,1). `.btn--onDark:hover` only carries (0,2,0),
   so on hover the generic footer rule won — white text landing on the white
   background the button had just turned. The button disappeared.

   Restated here at (0,3,1) so the button keeps its own colours, and the
   footer's link underline is kept off it too.
   -------------------------------------------------------------------------- */

.site-footer a.btn{color:#fff;text-decoration:none}
.site-footer a.btn:hover{text-decoration:none}
.site-footer a.btn--onDark:hover{background:#fff;color:var(--ink);border-color:#fff}
.site-footer a.btn--onDark:hover svg{fill:currentColor;stroke:currentColor}

/* --------------------------------------------------------------------------
   Where we ship — two pieces of the client's own artwork.

   Framed rather than bled to the edge: both are square marketing cards with
   type running close to the border, and a full-bleed crop would clip it.
   -------------------------------------------------------------------------- */

.reach-grid{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
	gap:clamp(20px,3vw,36px);
}

.vqf-frame{
	margin:0;
	background:#fff;
	padding:10px;
	border:1px solid var(--line);
	border-radius:var(--radius);
	box-shadow:0 24px 60px -34px rgba(26,16,32,.4);
	overflow:hidden;
}
.vqf-frame img{
	display:block;
	width:100%;
	height:auto;
	border-radius:calc(var(--radius) - 6px);
}

/* Footer contact groups — five numbers under two headings, 25 Aug 2026.
   .foot-num was written for a number plus a <small> country label; the
   grouped version drops the <small> and labels the group instead. */
.foot-group{margin-bottom:16px}
.foot-group:last-of-type{margin-bottom:0}
.foot-group__lbl{
  display:block;font-family:var(--mono);font-size:10px;letter-spacing:.15em;
  text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:6px;
}
.foot-group .foot-num{margin-bottom:2px}

/* ==========================================================================
   Touch targets on small screens — 25 Aug 2026
   --------------------------------------------------------------------------
   Measured on a 375px viewport: the five footer numbers were 23px tall and
   stacked 2–3px apart — a 26px pitch against the 48px guideline. On a business
   whose main action is "tap to call", that is a wrong-number call waiting to
   happen. The hairline between numbers is not decoration; it shows where one
   target ends and the next begins.

   Scoped to the existing mobile breakpoint, so the desktop layout is untouched.
   ========================================================================== */
@media (max-width:900px){
  .foot-group{margin-bottom:22px}
  .foot-group .foot-num{
    padding:10px 0;
    margin-bottom:0;
    border-bottom:1px solid rgba(255,255,255,.10);
  }
  .foot-group .foot-num:last-child{border-bottom:0}

  /* "Quote air freight" and friends sit inside cards as inline links —
     inline-block so the vertical padding actually enlarges the hit box. */
  .card .more{display:inline-block;padding:12px 0}

  /* The top strip repeats the two headline numbers. It has to stay a thin
     strip, so this is a compromise: bigger than 18px, not a full 44. */
  .top .wrap{gap:8px 18px}
  .top a{display:inline-block;padding:7px 0}
}