/* ===================================================================
   Ned's Mobile Steel Fabrication
   Light, restrained, Inter, generous whitespace.

   Palette is sampled from the logo (assets/img/logo-1024.png), which is
   96% charcoal, 4% white, and one steel-blue accent line. The site reads
   the same way: charcoal and white do the work, blue is used sparingly.
   The old #254B7D navy appeared nowhere in his branding.
   =================================================================== */

:root{
  --steel:     #0072CE;   /* brand accent, sampled from the logo wordmark rule */
  --steel-700: #005CA8;   /* hover / pressed */
  --ink:       #1C1C1C;   /* charcoal, sampled from the logo ground */
  --slate-900: #1C1C1C;   /* headings */
  --slate-800: #2E2E2E;
  --slate-600: #4A4A4A;   /* body */
  --slate-500: #6B6B6B;   /* muted */
  --slate-400: #5F5F5F;
  --slate-200: #DCDCDC;   /* lines, dark enough that cards and dividers hold */
  --slate-100: #EDEDED;
  --slate-50:  #F5F5F5;   /* alt section bg, neutral so the blue stays deliberate */
  --white:     #FFFFFF;

  --wrap: 1280px;      /* header, util bar, footer */
  --wrap-sec: 1024px;  /* content sections read tighter */
  --r: 12px;
  --r-sm: 8px;
  --ease: cubic-bezier(.2,.7,.3,1);
  --shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

body{
  margin:0;
  background:var(--white);
  color:var(--slate-600);
  font:400 17px/1.65 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--steel);text-decoration:none}
:focus-visible{outline:2px solid var(--steel);outline-offset:3px}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px}
.sec > .wrap, .quote > .wrap, .cta > .wrap{max-width:var(--wrap-sec)}
.narrow{max-width:820px}
.tc{text-align:center}
.skip{position:absolute;left:-999px}
.skip:focus{left:8px;top:8px;z-index:200;background:var(--steel);color:#fff;padding:12px 18px;border-radius:var(--r-sm)}

/* ---------- type ---------- */
h1,h2,h3,h4{color:var(--slate-900);margin:0;letter-spacing:-.02em;font-weight:700}
.eyebrow{
  font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--steel);margin:0 0 14px;
}
.h1{font-size:clamp(2.6rem,6vw,4.5rem);line-height:1.03;font-weight:700;letter-spacing:-.025em}
.h2{font-size:clamp(1.6rem,2.6vw,2.25rem);line-height:1.15;letter-spacing:-.025em;margin-bottom:12px}
.h3{font-size:1.2rem;margin-bottom:10px}
.sub{font-size:clamp(1.15rem,2vw,1.5rem);font-weight:400;color:var(--slate-800);line-height:1.3;margin:0 0 18px}
.lede{font-size:1.05rem;color:var(--slate-500);max-width:62ch;margin:0 0 34px}
.sec-lede{font-size:1.05rem;color:var(--slate-500);max-width:60ch;margin:0 auto 52px}
p{margin:0 0 16px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:14px 26px;border-radius:var(--r-sm);
  font-weight:600;font-size:15.5px;border:1.5px solid transparent;cursor:pointer;
  transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease),transform .18s var(--ease);
}
.btn svg{width:17px;height:17px;fill:currentColor;flex:none}
.btn-pri{background:var(--steel);color:#fff;border-color:var(--steel)}
.btn-pri:hover{background:var(--steel-700);border-color:var(--steel-700);color:#fff;transform:translateY(-1px)}
.btn-out{background:var(--white);color:var(--steel);border-color:rgba(0,114,206,.85)}
.btn-out:hover{background:var(--steel);border-color:var(--steel);color:#fff}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.btn-ghost:hover{background:rgba(255,255,255,.12);color:#fff}
.btn-lg{padding:16px 32px;font-size:16.5px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px}
.cta-row.tc{justify-content:center}

/* ---------- utility bar ---------- */
.util{background:var(--ink);color:rgba(255,255,255,.72);font-size:12px}
.util-in{display:flex;align-items:center;gap:24px;height:36px;flex-wrap:wrap}
.util a{color:#FFFFFF;font-weight:600}
.util a:hover{color:#fff}
.util .sep{margin-left:auto;color:rgba(255,255,255,.55)}
.util span{white-space:nowrap}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--slate-200)}
.hdr-in{display:flex;align-items:center;gap:20px;height:64px}
.brand{display:flex;align-items:center;gap:11px}
.brand img{width:auto;height:38px;flex:none}
/* the full trading name carries the lockup, not the initials, so a first-time
   visitor knows who they are dealing with before they read anything else */
.brand b{font-size:15px;font-weight:800;color:var(--slate-900);letter-spacing:-.01em;line-height:1.15;white-space:nowrap}
.brand span{display:block;font-size:10px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--slate-500)}
@media (max-width:1100px){.brand b{font-size:14px}.brand span span{display:none}}
.nav{display:flex;gap:6px;margin:0 auto}
.nav a{
  padding:8px 12px;border-radius:6px;font-size:14px;font-weight:500;color:var(--slate-600);
  transition:background .16s,color .16s;
}
.nav a:hover{background:var(--slate-50);color:var(--slate-900)}
.nav a.on{background:rgba(0,114,206,.06);color:var(--steel);font-weight:600}
.burger{display:none;background:none;border:1px solid var(--slate-200);border-radius:var(--r-sm);padding:9px 11px;cursor:pointer}
.burger svg{width:20px;height:20px;fill:var(--slate-900);display:block}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;background:var(--ink)}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 50%}
.hero-veil{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to right, rgba(18,18,18,.90) 0%, rgba(18,18,18,.74) 44%, rgba(18,18,18,.28) 74%, rgba(18,18,18,.16) 100%),
    linear-gradient(to bottom, rgba(18,18,18,.50) 0%, rgba(18,18,18,0) 26%, rgba(255,255,255,0) 55%, rgba(255,255,255,.55) 86%, #fff 100%);
}
.hero-in{position:relative;z-index:2;padding:120px 24px 130px;max-width:808px}
.hero .eyebrow{color:#8CC4F2}
.hero h1{color:#fff}
.hero .sub{color:rgba(255,255,255,.94);font-weight:500}
.hero .lede{color:rgba(255,255,255,.82);font-size:18px;max-width:576px;margin-bottom:40px}
.hero-sm .hero-in{padding:78px 24px 84px;max-width:888px}
.hero-sm h1{font-size:clamp(2.1rem,4.4vw,3.3rem)}

/* ---------- inner page header (reference keeps photography for the home hero only) ---------- */
.phead{background:var(--white);border-bottom:1px solid var(--slate-200);padding:clamp(56px,7vw,104px) 0}
.phead .wrap{max-width:768px}
.phead h1{font-size:clamp(2.1rem,4.6vw,3.75rem);line-height:1.05;font-weight:700;letter-spacing:-.025em;margin-bottom:18px}
.phead h1 em{font-style:normal;color:var(--steel);display:block}
.phead p{font-size:18px;color:var(--slate-500);max-width:60ch;margin:0}

/* ---------- trust strip ---------- */
.trust{border-bottom:1px solid var(--slate-200);background:var(--white)}
.trust-in{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;padding:40px 0}
.trust-i{display:flex;gap:13px;align-items:center}
.trust-i .ic{
  width:36px;height:36px;border-radius:var(--r-sm);background:rgba(0,114,206,.10);
  border:0;display:grid;place-items:center;flex:none;
}
.trust-i .ic svg{width:18px;height:18px;fill:var(--steel)}
.trust-i b{display:block;font-size:14.5px;color:var(--slate-900);font-weight:700;line-height:1.3}
.trust-i span{font-size:13px;color:var(--slate-500);line-height:1.45}

/* ---------- sections ---------- */
.sec{padding:clamp(66px,8vw,104px) 0}
.sec-alt{background:var(--slate-50)}
.sec-head{text-align:center;margin-bottom:0}

/* ---------- service cards (photo) ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px}
.pcard{
  position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:3/4;
  display:flex;flex-direction:column;justify-content:flex-end;
  box-shadow:var(--shadow);transition:transform .25s var(--ease);
}
.pcard:hover{transform:translateY(-4px)}
.pcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pcard::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top, rgba(15,15,15,.90) 0%, rgba(15,15,15,.20) 50%, transparent 100%);
}
.pcard-b{position:relative;z-index:2;padding:26px 24px 24px}
.pcard-b h3{color:#fff;margin-bottom:8px;font-size:1.3rem}
.pcard-b p{color:rgba(255,255,255,.82);font-size:14.5px;margin:0}
.pcard-b .more{display:inline-flex;align-items:center;gap:6px;margin-top:14px;color:#8CC4F2;font-size:14px;font-weight:600;white-space:nowrap}
.pcard .chip{
  position:absolute;top:18px;left:18px;z-index:2;width:38px;height:38px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.16);backdrop-filter:blur(6px);display:grid;place-items:center;
}
.pcard .chip svg{width:18px;height:18px;fill:#fff}

/* ---------- plain cards ---------- */
.gcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px}
.gcard{background:var(--white);border:1px solid var(--slate-200);border-radius:var(--r);padding:30px 26px;transition:border-color .2s,transform .2s var(--ease)}
.gcard:hover{border-color:var(--steel);transform:translateY(-2px)}
.gcard .ic{width:42px;height:42px;border-radius:var(--r-sm);background:var(--slate-50);border:1px solid var(--slate-200);display:grid;place-items:center;margin-bottom:16px}
.gcard .ic svg{width:20px;height:20px;fill:var(--steel)}
.gcard p{font-size:15px;color:var(--slate-500);margin:0}
a.gcard{display:block;text-decoration:none}
a.gcard h3{color:var(--slate-900)}
a.gcard:hover h3{color:var(--steel)}

/* ---------- service detail blocks ---------- */
.sblock{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center;padding:56px 0;border-bottom:1px solid var(--slate-200)}
.sblock:last-child{border-bottom:0}
.sblock.flip .sfig{order:-1}
.sfig{margin:0;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.sfig img{width:100%;aspect-ratio:4/3;object-fit:cover}
.sblock h2{font-size:clamp(1.5rem,2.4vw,1.9rem);margin-bottom:12px}
.sblock > div > p{color:var(--slate-500)}
.covers{display:grid;grid-template-columns:1fr;gap:22px;margin-top:22px}
.covers h3{font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--slate-400);margin-bottom:12px}
.covers ul{margin:0;padding:0;list-style:none;font-size:15px;color:var(--slate-600)}
.covers li{padding-left:20px;position:relative;margin-bottom:7px;line-height:1.45}
.covers li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--steel)}
.covers p{font-size:15px;color:var(--slate-500);margin:0}

/* ---------- service figure chip ---------- */
.sfig{position:relative}
.sfig .chip{
  position:absolute;top:16px;left:16px;width:48px;height:48px;border-radius:var(--r-sm);
  background:var(--steel);display:grid;place-items:center;box-shadow:0 8px 20px rgba(0,0,0,.28);
}
.sfig .chip svg{width:22px;height:22px;fill:#fff}

/* ---------- projects grid ---------- */
.filters{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-bottom:34px}
.fbtn{border-color:#8F8F8F;padding:9px 18px;border-radius:100px;border:1px solid var(--slate-200);background:var(--white);color:var(--slate-600);font:600 13.5px/1 Inter,sans-serif;cursor:pointer;transition:all .16s}
.fbtn:hover{border-color:var(--steel);color:var(--steel)}
.fbtn.on{background:var(--steel);border-color:var(--steel);color:#fff}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.gi{position:relative;margin:0;border-radius:var(--r);overflow:hidden;background:var(--slate-100);cursor:zoom-in;border:0;padding:0;box-shadow:var(--shadow)}
.gi img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .5s var(--ease)}
.gi figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:34px 18px 16px;
  background:linear-gradient(to top,rgba(15,15,15,.90),transparent);
  color:#fff;font-size:14px;font-weight:600;text-align:left;
  opacity:0;transition:opacity .25s var(--ease);
}
.gi:hover img{transform:scale(1.04)}
.gi:hover figcaption{opacity:1}
/* hover-reveal is dead on touch: show captions outright there */
@media (hover:none){.gi figcaption{opacity:1;padding:52px 14px 12px}}
.gi.out{display:none}

/* home preview: fewer cards, labels always on (hover-reveal is useless on touch) */
.grid-home{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid-home .gi{cursor:pointer;display:block}
.grid-home .gi figcaption{opacity:1;padding:52px 16px 14px;font-size:13.5px;line-height:1.35}
.grid-home .gi-tag{display:block;width:fit-content}
.grid-home .gi img{aspect-ratio:4/3}
.gi-tag{
  display:inline-block;margin-bottom:7px;padding:4px 12px;border-radius:100px;
  background:var(--steel);color:#fff;font-size:11.5px;font-weight:600;letter-spacing:.02em;
}

/* ---------- quote band ---------- */
/* single signature job, centred. Replaces a blockquote that was attributed to
   the business itself, which read like a testimonial nobody gave. */
.feature{margin:0;text-align:center}
.feature img{width:100%;max-width:940px;margin:0 auto;border-radius:var(--r);box-shadow:var(--shadow)}
.feature figcaption{margin-top:20px;font-size:15px;color:var(--slate-500)}
.feature figcaption b{color:var(--slate-900);font-weight:700}

/* ---------- CTA band ---------- */
.cta{background:var(--white);color:var(--slate-600);padding:104px 0;text-align:center;border-top:1px solid var(--slate-200)}
.cta h2{color:var(--slate-900);margin-bottom:14px}
.cta p{color:var(--slate-500);max-width:52ch;margin:0 auto 30px}
.cta .btn-ghost{background:var(--white);color:var(--steel);border-color:rgba(0,114,206,.85)}
.cta .btn-ghost:hover{background:var(--steel);border-color:var(--steel);color:#fff}
.cta-note{margin-top:22px;font-size:14px;color:var(--slate-500)}

/* ---------- two-column content (About) ---------- */
.ccols{display:grid;grid-template-columns:1.1fr .9fr;gap:52px;align-items:start}

/* ---------- contact ----------
   Two clear actions first so the page has a focal point, then the details as
   an even panel. No hero-sized phone number and no block built just for it. */
.contact-dl{
  margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;background:var(--slate-200);
  border:1px solid var(--slate-200);border-radius:var(--r);overflow:hidden;
}
.contact-dl > div{background:var(--white);padding:24px 26px;min-width:0}
.contact-dl dt{
  font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--slate-500);margin-bottom:9px;
}
.contact-dl dd{
  margin:0;font-size:19px;line-height:1.35;color:var(--slate-900);font-weight:600;
  overflow-wrap:break-word;
}
.contact-dl dd a{color:var(--steel)}
.contact-dl dd a:hover{text-decoration:underline}
.contact-dl dd.sm{font-size:15.5px;font-weight:500;letter-spacing:-.01em}
@media (max-width:900px){.contact-dl{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  .contact-dl{grid-template-columns:1fr}
  .contact-dl > div{padding:20px 22px}
  .contact-dl dd{font-size:17px}
}

/* ---------- areas ---------- */
.areas{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:30px}
.areas h3{font-size:1.05rem;padding-bottom:11px;border-bottom:2px solid var(--steel);display:inline-block;margin-bottom:14px}
.areas p{font-size:14.5px;color:var(--slate-500);margin:0}

/* ---------- faq ---------- */
.faq details{border-bottom:1px solid var(--slate-200)}
.faq summary{padding:22px 40px 22px 0;cursor:pointer;list-style:none;position:relative;font-weight:600;font-size:1.03rem;color:var(--slate-900)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);font-size:23px;font-weight:400;color:var(--steel)}
.faq details[open] summary::after{content:"\2212"}
.faq summary:hover{color:var(--steel)}
.faq details p{padding:0 40px 24px 0;margin:0;color:var(--slate-500);font-size:15.5px}

/* ---------- footer ---------- */
.ftr{background:var(--ink);color:rgba(255,255,255,.62);padding:0 0 0;font-size:14.5px}
.ftr-in{padding:52px 0}
.ftr-in{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:44px;padding:52px 0}
.ftr h3{color:#fff;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;margin-bottom:16px;font-weight:700}
.ftr a{color:rgba(255,255,255,.78)}
.ftr a:hover{color:#fff}
.ftr ul{list-style:none;margin:0;padding:0}
.ftr li{margin-bottom:9px}
.ftr p{margin:0 0 10px;line-height:1.6}
.ftr-brand img{width:auto;height:52px;margin-bottom:18px;opacity:.95}
.ftr-cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;padding:22px 0;border-top:1px solid rgba(255,255,255,.12)}
.ftr-cta p{margin:0;color:#fff;font-size:14px;font-weight:500}
.ftr-cta .btn{padding:11px 20px;font-size:14px}
.ftr-btm{margin-top:0;border-top:1px solid rgba(255,255,255,.12);padding:22px 0 26px;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:13px;color:rgba(255,255,255,.60)}

/* ---------- lightbox ---------- */
.lb{position:fixed;inset:0;z-index:120;background:rgba(10,17,29,.95);display:flex;align-items:center;justify-content:center;padding:24px}
.lb[hidden]{display:none}
.lb figure{margin:0;max-width:1400px;display:flex;flex-direction:column;gap:14px;align-items:center}
.lb img{max-width:100%;max-height:82vh;object-fit:contain;border-radius:var(--r-sm)}
.lb figcaption{color:rgba(255,255,255,.7);font-size:14px;text-align:center;max-width:70ch}
.lb button{position:absolute;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);color:#fff;cursor:pointer;border-radius:var(--r-sm)}
.lb button:hover{background:var(--steel)}
.lb-x{top:20px;right:20px;width:44px;height:44px;font-size:26px;line-height:1}
.lb-p,.lb-n{top:50%;transform:translateY(-50%);width:48px;height:62px;font-size:30px;line-height:1}
.lb-p{left:20px}.lb-n{right:20px}

/* ---------- mobile call bar ---------- */
.callbar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:80;
  align-items:center;justify-content:center;gap:10px;
  padding:15px 16px calc(15px + env(safe-area-inset-bottom));
  background:var(--steel);color:#fff;font-weight:700;font-size:16px;
  box-shadow:0 -4px 20px rgba(0,0,0,.22);
}
.callbar svg{width:18px;height:18px;fill:currentColor}
.callbar:hover{color:#fff}

/* ---------- responsive ---------- */
@media (max-width:1023px){ .util{display:none} }
@media (max-width:1000px){
  .trust-in{grid-template-columns:repeat(2,1fr);gap:22px}
  .sblock,.ccols{grid-template-columns:1fr;gap:32px}
  .sblock.flip .sfig{order:0}
  .ftr-in{grid-template-columns:1fr 1fr;gap:34px}
}
@media (max-width:820px){
  .nav{display:none;position:absolute;top:64px;left:0;right:0;background:#fff;border-bottom:1px solid var(--slate-200);flex-direction:column;gap:0;padding:10px 16px 16px;box-shadow:var(--shadow)}
  .nav.open{display:flex}
  .nav a{padding:13px 12px;border-radius:var(--r-sm)}
  .burger{display:block;margin-left:auto}
  .hdr-call{display:none}
  .util .sep{display:none}
}
@media (max-width:820px){.callbar{display:flex}body{padding-bottom:66px}}
@media (max-width:640px){
  body{font-size:16px;padding-bottom:66px}
  .wrap{padding:0 18px}
  .callbar{display:flex}
  .hero-in{padding:72px 18px 84px}
  .covers{grid-template-columns:1fr;gap:20px}
  .grid{grid-template-columns:1fr 1fr;gap:10px}
  .cards{grid-template-columns:1fr;gap:14px}
  .ftr-in{grid-template-columns:1fr}
  .dl dt{width:96px}
}

/* ---------- gallery, grouped by type ----------
   One flat wall of photos read as "a bunch of slapped on photos". Labelled runs
   give the eye somewhere to stop and make the range legible at a glance. */
.gsec{margin:0 0 56px}
.gsec.out{display:none}
.gsec-h{
  display:flex;align-items:baseline;gap:10px;
  font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--slate-500);margin:0 0 18px;
  padding-bottom:12px;border-bottom:1px solid var(--slate-200);
}
.gsec-h span{
  font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--slate-400);
  margin-left:auto;text-transform:none;
}

/* ---------- line breaking ----------
   Stops headings and intros ending on a single orphaned word. */
h1,h2,h3,.h1,.h2,.h3{text-wrap:balance}
.lede,.sec-lede,.phead p,.cta p,.sub,.pcard-b p,.gcard p,.areas p{text-wrap:pretty}

/* ---------- touch targets ----------
   Anything you tap rather than read gets a 44px minimum on touch devices,
   which is the accepted floor for a reliable thumb press. Body-copy links are
   left alone; enlarging those would wreck the line spacing for no gain. */
@media (hover:none),(max-width:820px){
  .fbtn{padding:13px 20px;min-height:44px}
  .brand{min-height:44px}
  .ftr ul a,.ftr-in p a{display:inline-flex;align-items:center;padding:10px 0;min-height:44px}
  .ftr li{margin-bottom:0}
  /* the phone number and email on /contact are the two most important taps on
     the site and were 21px and 19px high */
  .contact-dl dd a{display:inline-flex;align-items:center;min-height:44px}
  .nav a{min-height:44px;display:flex;align-items:center}
  .gsec-h{font-size:12px}
}

/* ---------- mobile type and rhythm ----------
   The hero headline was sitting within a few pixels of the right edge at 390,
   and the subline was jammed against its descenders. */
@media (max-width:520px){
  .h1{font-size:clamp(2.1rem,8.6vw,2.6rem);line-height:1.06}
  .hero .sub{margin-top:10px}
  .phead h1{font-size:clamp(1.9rem,8vw,2.4rem)}
  .h2{font-size:clamp(1.45rem,5.6vw,1.8rem)}
  .trust-in{grid-template-columns:1fr;gap:18px;padding:30px 0}
  .gsec{margin-bottom:38px}
}

/* ---------- very small screens (320px, older iPhone SE) ----------
   The header lockup is nowrap so the full trading name stays on one line, but
   at 320 the logo, name, burger and padding total more than the viewport.
   Let the name wrap there rather than push the burger off-screen. */
@media (max-width:400px){
  .brand b{white-space:normal;font-size:13px;line-height:1.18}
  .brand img{height:32px}
  .brand{gap:9px}
  .hdr-in{height:auto;min-height:62px;padding-top:9px;padding-bottom:9px}
}