:root{
  --red:#dd3446; --red-d:#c72b3c; --red-deep:#b81f31;
  --green:#30b040; --green-d:#1f7f31;
  --ink:#0e1116; --body:#303030; --muted:#5b6469;
  --line:#e6ebee; --field:#ecf0f2;
  --nav:#0e1116; --footer:#222327; --footer-d:#191a1d;
  --wrap:1140px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--body);
  font-family:'Open Sans','Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;
  font-weight:400;font-size:16px;line-height:28px;letter-spacing:.1px;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img{max-width:100%;height:auto;border:0}
p{margin:0 0 18px;text-wrap:pretty}
h1,h2,h3,h4,h5,h6{color:var(--ink);font-family:'Open Sans','Segoe UI',system-ui,sans-serif;
  font-weight:700;letter-spacing:-.01em;margin:0 0 14px;text-wrap:balance}
h1{font-size:36px;line-height:48px}
h2{font-size:35px;line-height:42px}
h3{font-size:26px;line-height:32px}
h4{font-size:22px;line-height:30px}
h5{font-size:17px;line-height:22px}
h6{font-size:16px;line-height:20px}
a{color:var(--body);text-decoration:none;transition:color .18s ease}
a:hover{color:var(--red)}
:focus-visible{outline:3px solid var(--red);outline-offset:2px}
/* Small comforts: in-brand selection, and smooth in-page scrolling for anyone who
   has not asked for reduced motion. */
::selection{background:var(--red);color:#fff}
/* The menu is a fixed panel on mobile, so the page behind it must not scroll.
   `overflow:hidden` on the scroller clamps scrollY to 0 and the reader lands back
   at the top when they close it; pinning the body at a negative offset holds the
   exact position instead. */
html.nav-open{overflow:hidden}
html.nav-open body{position:fixed;left:0;right:0;width:100%;overflow:hidden}
/* Pinning the body breaks position:sticky for its descendants, so the bar would
   scroll away and leave the panel floating under page content. Fix it to the
   viewport for as long as the menu is open. */
html.nav-open .logobar{position:fixed;top:0;left:0;right:0}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:#fff;
  padding:12px 20px}
.skip:focus{left:0;color:#fff}

/* ---- buttons ---------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:13px 26px;background:var(--red);color:#fff;border:0;border-radius:3px;
  font-family:inherit;font-size:15px;font-weight:600;line-height:1.2;letter-spacing:.3px;
  cursor:pointer;transition:background .18s ease,transform .12s ease}
.btn:hover{background:var(--red-d);color:#fff}
.btn:active{transform:translateY(1px)}
/* WhatsApp CTA. Uses the logo green that survives on white (--green-d, 5.07:1 with
   white text) rather than WhatsApp's own #25D366, which is only ~2.2:1 and fails AA. */
.btn-wa{background:var(--green-d)}
.btn-wa:hover{background:#19692a;color:#fff}
.btn-wa svg{width:18px;height:18px}
.btn svg{width:16px;height:16px;fill:currentColor;flex:0 0 auto}
.btn-ghost{background:rgba(255,255,255,.16);color:#fff;
  border:1px solid rgba(255,255,255,.55);backdrop-filter:blur(6px)}
.btn-ghost:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn-sm{min-height:44px;padding:10px 22px;font-size:14px}

/* ---- header: white logobar over a black sticky navbar ------------------ */
.logobar{background:#fff;border-bottom:1px solid var(--line)}
.logobar .wrap{display:flex;align-items:center;gap:26px;min-height:100px;flex-wrap:wrap}
/* Full width: the logo sits on ONE line with the contact strip and both CTAs.
   Below 1180px it is allowed to wrap again rather than crush the buttons. */
@media (min-width:1180px){
  /* The logobar alone is allowed past the 1140px Elementor container so the whole
     contact strip fits beside the logo; every other section stays at --wrap.
     The address keeps its own line breaks - forcing it to one line overflowed the
     flex row and the three .hi blocks printed on top of each other. */
  .logobar .wrap,
  .navbar .wrap{max-width:1360px}   /* both, or the logo and HOME lose their shared left edge */
  .logobar .wrap{flex-wrap:nowrap}
  .hinfo{flex-wrap:nowrap;gap:20px}
  .hi{min-width:0}
  .hi b{max-width:19ch}
}
.brand{flex:0 0 auto;display:flex;align-items:center}
.brand img{display:block;width:auto;height:60px}
.hinfo{display:flex;align-items:center;gap:24px;margin-left:auto;flex-wrap:wrap}
.hi{display:flex;align-items:flex-start;gap:12px}
.hi svg{width:24px;height:24px;fill:var(--red);flex:0 0 auto;margin-top:3px}
.hi b{display:block;max-width:21ch;color:var(--ink);font-weight:600;font-size:14px;
  line-height:1.5;letter-spacing:.2px}
.hi b a{color:var(--ink)}
.hi span{display:block;font-size:14px;line-height:1.5;color:var(--body)}
.hi a{color:var(--body)}
/* Phone and email share one column in the top bar rather than sitting side by side,
   which also buys the row back some width before the CTAs. */
.hstack{display:flex;flex-direction:column;gap:7px}

.navbar{background:var(--nav);position:sticky;top:0;z-index:70;
  box-shadow:0 10px 24px -18px rgba(0,0,0,.55)}
.navbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px}
.menu{display:flex;align-items:stretch;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.menu>li{display:flex;position:relative}
/* Title Case, per the client (2026-08-19) - matching the products dropdown, which
   already reads this way. Tracking drops from 1px to .3px with it: wide letter-
   spacing is there to open up ALL CAPS and reads as gappy on mixed case. Size goes
   14 -> 15px so the bar does not visually shrink once the caps come off. */
.menu>li>a{display:flex;align-items:center;gap:7px;height:60px;padding:0 18px;color:#fff;
  font-size:15px;font-weight:600;letter-spacing:.3px;white-space:nowrap}
.menu>li>a:hover,.menu>li>a:focus-visible{color:#c3ccd0}
.menu>li>a[aria-current="page"]{color:#fff}
.menu>li>a[aria-current="page"]{box-shadow:inset 0 -3px 0 var(--red)}
.caret{width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);opacity:.8}
.sub{position:absolute;top:60px;left:0;min-width:280px;margin:0;padding:8px 0;list-style:none;
  background:#161a1c;border-top:3px solid var(--red);
  box-shadow:0 22px 44px -18px rgba(0,0,0,.65);display:none;z-index:80}
.has-sub:hover>.sub,.has-sub:focus-within>.sub{display:block}
.sub a{display:block;padding:10px 20px;color:#e9edee;font-size:14.5px;letter-spacing:.3px}
.sub a:hover,.sub a:focus-visible{color:#fff;background:#22282a;
  box-shadow:inset 3px 0 0 var(--red)}
/* The toggle now sits in the WHITE logobar, not the dark navbar - it was rendering
   white-on-white and was effectively invisible. Ink on white, brand red when open. */
.navtoggle{display:none;align-items:center;justify-content:center;width:46px;height:46px;
  background:transparent;border:1px solid #d3dadd;border-radius:4px;color:var(--ink);
  cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease}
.navtoggle svg{width:22px;height:22px;fill:currentColor;display:block}
.navtoggle .i-shut{display:none}
.navtoggle[aria-expanded="true"] .i-open{display:none}
.navtoggle[aria-expanded="true"] .i-shut{display:block}
/* The toggle had no visual difference between shut and open - only aria-expanded,
   which a sighted user cannot see. Give the open state the brand red. */
.navtoggle:hover{border-color:#9aa4a9}
.navtoggle[aria-expanded="true"]{background:var(--red);border-color:var(--red);color:#fff}

/* ---- hero ------------------------------------------------------------- */
.hero{position:relative;min-height:min(84vh,660px);display:flex;align-items:center;
  overflow:hidden;background:#0e1116;padding:80px 0}
.hero-bg,.hero-bg i{position:absolute;inset:0;display:block}
.hero-bg i{background-size:cover;background-position:center;opacity:0;
  animation:heroFade 42s linear infinite}
@keyframes heroFade{0%,12%{opacity:1}18%,94%{opacity:0}100%{opacity:1}}
.hero-scrim{position:absolute;inset:0;
  background:linear-gradient(92deg,rgba(14,17,22,.88) 0%,rgba(14,17,22,.64) 46%,
                             rgba(14,17,22,.26) 78%,rgba(14,17,22,.12) 100%)}
.hero .wrap{position:relative;z-index:2}
.hero h1{color:#fff;font-size:clamp(38px,6.2vw,72px);line-height:1.06;font-weight:600;
  letter-spacing:.2px;max-width:17ch;margin:0 0 30px}
.hero .rule{display:block;width:88px;height:3px;margin:0 0 26px;
  background:linear-gradient(90deg,var(--red) 0 50%,var(--green) 50% 100%)}

/* ---- section furniture ------------------------------------------------ */
.sec{padding:86px 0}
.sec-sm{padding:60px 0}
.sec-band{background:var(--field)}
.st{position:relative;padding-bottom:18px;margin:0 0 26px}
.st::after{content:"";position:absolute;left:0;bottom:0;width:78px;height:3px;background:var(--red)}
.center{text-align:center}
.center .st::after,.st.center::after{left:50%;transform:translateX(-50%)}
.lede{max-width:74ch;margin:0 auto 12px}
.lede.center{text-align:center}
.prose{max-width:78ch;margin:0 auto;text-align:left}
.prose.left{margin-left:0}   /* align the measure with a left-aligned .st heading */
/* .prose zeroes its vertical margin, so a run of them collides. Space the gaps
   only between siblings, leaving a lone .prose sitting flush as before. */
.prose + .prose{margin-top:15px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split-media{position:relative}
.split-media img{display:block;width:100%}
.split-media.ratio{aspect-ratio:16/10;overflow:hidden}
.split-media.ratio img{height:100%;object-fit:cover}
.split.top{align-items:start}
/* The product pages' heading lives in the content column, not the banner strip, so
   it needs the page-title size rather than the section-heading size it inherits. */
h1.st{font-size:34px;line-height:44px}
h1.st.center::after{left:50%;transform:translateX(-50%)}
.media-tint{background:linear-gradient(150deg,#dfe5e8 0%,var(--field) 100%);
  display:flex;align-items:flex-end;justify-content:center;padding:40px 26px 0;overflow:hidden}
.media-tint img{max-height:430px;width:auto;object-fit:contain}

/* ---- alternating value panels (ATX "Attitude / Respect / Communication") */
.band{display:grid;grid-template-columns:repeat(3,1fr)}
.band>div{padding:52px 34px;text-align:center}
.band>div:nth-child(odd){background:var(--field)}
.band>div:nth-child(even){background:var(--red)}
.band h3{position:relative;margin:0 0 22px;padding-bottom:16px;font-size:26px}
.band h3::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:52px;height:3px}
.band>div:nth-child(odd) h3{color:var(--ink)}
.band>div:nth-child(odd) h3::after{background:var(--red)}
.band>div:nth-child(even) h3{color:#fff}
.band>div:nth-child(even) h3::after{background:var(--green)}
.band>div:nth-child(odd) p,.band>div:nth-child(odd) li{color:var(--body)}
.band>div:nth-child(even) p,.band>div:nth-child(even) li{color:#fff}
.band ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.band li{line-height:26px}
.band p:last-child,.band li:last-child{margin-bottom:0}

/* ---- page banner (inner pages) ---------------------------------------- */
.pbanner{background:var(--field);border-bottom:1px solid var(--line)}
.pbanner .wrap{display:flex;align-items:center;justify-content:space-between;gap:22px;
  flex-wrap:wrap;padding-top:34px;padding-bottom:34px}
.pbanner .eyebrow{display:block;color:var(--red-d);font-size:13.5px;font-weight:600;
  letter-spacing:1.6px;text-transform:uppercase;margin:0 0 6px}
.pbanner h1{margin:0;font-size:30px;line-height:38px;letter-spacing:.2px}
/* breadcrumb-only banner: no title to give the band height, so it sits tighter */
.pbanner-slim .wrap{padding-top:18px;padding-bottom:18px}
.crumb{font-size:14.5px;color:var(--muted);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.crumb a{color:var(--muted)}
.crumb a:hover{color:var(--red)}
.crumb span[aria-current]{color:var(--ink)}

/* ---- cards ------------------------------------------------------------ */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:44px 34px}
.cards-2{grid-template-columns:repeat(2,1fr)}
.card{position:relative;display:flex;flex-direction:column;background:transparent}
.card-media{position:relative;overflow:hidden;background:#e9edee;aspect-ratio:16/10}
.card-media img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .55s cubic-bezier(.2,.6,.3,1)}
.card:hover .card-media img,.card:focus-within .card-media img{transform:scale(1.06)}
.card-tag{position:absolute;left:0;bottom:0;margin:0;padding:9px 16px;background:var(--red);
  color:#fff;font-size:13px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;
  line-height:1.35}
.card-body{padding:22px 0 0;display:flex;flex-direction:column;flex:1 1 auto}
.card h3,.card h4{margin:0 0 12px;font-size:22px;line-height:30px}
.card h3 a,.card h4 a{color:var(--ink)}
.card h3 a:hover,.card h4 a:hover{color:var(--red)}
.card h3 a::after,.card h4 a::after{content:"";position:absolute;inset:0;z-index:1}
.card .btn{position:relative;z-index:2}
.card p{margin:0 0 20px}
.card .btn{margin-top:auto;align-self:flex-start}

/* ---- feature blocks (product detail) ---------------------------------- */
.feat{display:grid;grid-template-columns:repeat(2,1fr);gap:44px 54px}
.feat h3{position:relative;padding-bottom:16px;margin:0 0 18px;font-size:24px;line-height:32px}
.feat h3::after{content:"";position:absolute;left:0;bottom:0;width:70px;height:3px;
  background:var(--red)}
.feat>section>p:last-child{margin-bottom:0}
/* Column counts live in classes, never inline: an inline grid-template-columns wins
   against the media query below, and the 3-up equipment grid was running a column
   off the side of a phone because of it. */
.feat-1{grid-template-columns:1fr}
.feat-3{grid-template-columns:repeat(3,1fr)}
.feat-gap{margin-top:46px}

/* ---- ticked lists ------------------------------------------------------ */
.ticks{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-direction:column;gap:10px}
.ticks li{position:relative;padding-left:36px;line-height:27px}
.ticks li::before{content:"";position:absolute;left:0;top:4px;width:21px;height:21px;
  border:2px solid var(--green-d);border-radius:50%}
.ticks li::after{content:"";position:absolute;left:6.5px;top:10px;width:8px;height:4px;
  border-left:2px solid var(--green-d);border-bottom:2px solid var(--green-d);
  transform:rotate(-45deg)}
/* .ticks is a flex column, and CSS multi-column does not apply to a flex container -
   so this rule had never done anything (it had no callers to reveal that). Switch the
   list back to block flow when it is asked for two columns, and carry the row rhythm
   with a margin, since the flex `gap` goes away with the flex box. */
.ticks.cols-2{display:block;columns:2;column-gap:54px}
.ticks.cols-2 li{margin-bottom:10px;break-inside:avoid}
.cols-2{columns:2;column-gap:54px}
.cols-2 li{break-inside:avoid}
.scope-h{margin:26px 0 14px;font-size:17px;line-height:26px;color:var(--ink)}
/* Was brand red; the client asked for it to sit back and read like the other
   sub-headings - same weight, ordinary ink. */
.sub-lede{margin:-6px 0 18px;font-size:17.5px;line-height:28px;color:var(--ink);font-weight:600}
/* A category's one-line summary: set apart from the body prose by weight and ink,
   not by another accent colour - four red sub-headings on one screen would blow the
   two-saturated-elements budget the rest of the page holds to. */
.cat-lede{margin:-4px 0 16px;color:var(--ink);font-weight:600}
.cta-band{margin-top:52px;padding:38px 30px;background:var(--field);
  border-top:3px solid var(--red)}
.cta-band h3{margin:0 0 10px;font-size:22px;line-height:30px}
.cta-band p{margin:0 auto;max-width:62ch}
.cta-band .btn{margin-top:22px}

.docs{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.doc{display:flex;align-items:center;gap:14px;padding:20px 22px;background:#fff;
  border:1px solid var(--line);border-left:3px solid var(--red);color:var(--ink);
  font-weight:600;font-size:15px;letter-spacing:.4px;transition:.2s ease}
.doc:hover{color:var(--red);border-left-color:var(--red-d);transform:translateY(-2px);
  box-shadow:0 14px 30px -18px rgba(5,24,41,.5)}
.doc svg{width:22px;height:22px;fill:var(--red);flex:0 0 auto}

/* ---- logo grids -------------------------------------------------------- */
.logos{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.logos div{display:flex;align-items:center;justify-content:center;min-height:98px;padding:16px;
  background:#fff;border:1px solid var(--line)}
/* Every logo wall reads in full colour - client, 2026-08-19. This began as a
   greyscale-until-hover treatment, then a Profile-only exception; the client has now
   asked for it site-wide, so the exception is gone and there is one rule again. */
.logos img{max-width:100%;max-height:58px;object-fit:contain}

/* ---- contact ----------------------------------------------------------- */
.cinfo{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:20px}
.cinfo li{display:flex;gap:15px;align-items:flex-start;line-height:27px}
.cinfo svg{width:24px;height:24px;fill:var(--red);flex:0 0 auto;margin-top:3px}
.cinfo a{color:var(--body);word-break:break-word}
.addr-link{color:inherit;text-decoration:none}
.addr-link:hover,.addr-link:focus-visible{text-decoration:underline;text-underline-offset:3px}
/* Map: a plain box with the brand rule on top, sized by ratio so it never pushes the
   page around while the iframe loads. */
.mapwrap{position:relative;aspect-ratio:16/7;border:1px solid var(--line);
  border-top:3px solid var(--red);background:var(--field);overflow:hidden}
.mapwrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.maplink{margin:16px 0 0}
.maplink .btn{min-height:44px}
/* Labels the client asked for on each contact row. The archive page used emoji
   (pin, envelope); this page already carries the same marks as brand-red SVGs, so
   the label is set in words beside the existing icon instead of doubling up. */
.ci-l{display:block;color:var(--ink);font-weight:600}
.ci-v + .ci-v{margin-top:2px}
.ci-tel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 18px}
.ci-n{white-space:nowrap}
.form{display:flex;flex-direction:column;gap:18px;background:var(--field);padding:36px;
  border:1px solid var(--line)}
.field{display:flex;flex-direction:column}
.field label{margin-bottom:8px;color:var(--ink);font-size:13px;font-weight:600;
  letter-spacing:.8px;text-transform:uppercase}
.field input,.field textarea{min-height:50px;padding:13px 15px;background:#fff;
  border:1px solid #d3dadd;border-radius:2px;color:var(--ink);font:inherit;font-size:15.5px}
.field textarea{min-height:150px;line-height:1.6;resize:vertical}
.field input:focus,.field textarea:focus{outline:0;border-color:var(--red);
  box-shadow:0 0 0 3px rgba(221,52,70,.16)}
.form-ok,.form-bad{margin:0;font-weight:600}
.form-ok{color:#0f7b3f}
.form-bad{color:#c02636}

/* ---- footer ------------------------------------------------------------ */
.footer{position:relative;background:var(--footer);color:#fff;padding:74px 0 20px;overflow:hidden}
/* the mark, oversized and barely there - brand presence without another logo lockup */
.footer::before{content:"";position:absolute;right:-90px;top:-70px;width:420px;height:420px;
  background:url(/assets/brand/mark.png) no-repeat center/contain;opacity:.05;pointer-events:none}
.footer .wrap{position:relative;z-index:1}
.footer h4{position:relative;color:#fff;font-size:15px;letter-spacing:.3px;
  margin:0 0 26px;padding-bottom:14px}
.footer h4::after{content:"";position:absolute;left:0;bottom:0;width:40px;height:2px;
  background:var(--green)}
/* Our Services carries the longest labels ("Engineering Equipment for Lease & Hire"),
   so it gets the widest column - it was wrapping onto two lines while Quick Links sat
   half empty. */
.fcols{display:grid;grid-template-columns:1.05fr .72fr 1.28fr 1.55fr;gap:40px}
/* Eight phone numbers in one column made a tall undifferentiated wall; two-up halves
   it and keeps the pairs scannable. */
/* These sit beside an icon in a flex row, so they need to claim the remaining
   width - left to flex:0 1 auto the grid tracks resolved to 0px and the numbers
   spilled underneath the icon. */
.footer .fi > span{flex:1 1 auto;min-width:0}
.ftel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 16px}
/* a phone number must never break across two lines */
.ftel div,.fmail div{white-space:nowrap}
.fmail{display:grid;gap:2px}
.footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.footer a{color:#dfe3e5}
.footer a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.footer .flogo img{width:196px;height:auto;margin-bottom:22px}
.footer .fi{display:flex;gap:13px;align-items:flex-start;line-height:26px;color:#dfe3e5}
.footer .fi svg{width:21px;height:21px;fill:var(--red);flex:0 0 auto;margin-top:4px}
.fbot{margin-top:58px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14);
  font-size:14.5px;color:#aeb5b8;display:flex;align-items:center;gap:12px}
.fbot::before{content:"";width:26px;height:26px;flex:0 0 auto;
  background:url(/assets/brand/mark.png) no-repeat center/contain;opacity:.9}

/* ---- scroll reveal (fails open) ---------------------------------------- */
html.rv [data-rv]{opacity:0;transform:translateY(16px)}
html.rv [data-rv].in{opacity:1;transform:none;transition:opacity .55s ease,transform .55s ease}
@media (prefers-reduced-motion:reduce){
  html.rv [data-rv]{opacity:1!important;transform:none!important}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ---- responsive -------------------------------------------------------- */
/* These drop rules used .hi:nth-of-type(n) and so depended on the exact sibling
   order of the contact strip. Wrapping the phone and email in .hstack renumbered
   them and the ≤1100px rule started hiding the PHONE instead of the address.
   Name the blocks instead - position is not what any of this ever meant. */
@media (max-width:1240px){
  .hi-mail{display:none}   /* email: also in the footer + /contact/ */
}
@media (max-width:1100px){
  .hinfo{gap:18px}
  .hi-addr{display:none}   /* address: also in the footer */
  .fcols{grid-template-columns:1fr 1fr;gap:38px}
}
/* Touch targets, phones AND tablets. Measured at 390px before this: contact
   phone/email links 22px tall, footer links 22px, breadcrumb 28px - all under the 44px
   minimum, and the phone numbers are the most important targets on the site. Height
   goes on the HIT AREA via min-height on an inline-flex box, so the text and the
   spacing rhythm stay exactly where they were while the target grows. Scoped at 980px,
   not 760px, or a tablet keeps the 22px targets. */
@media (max-width:980px),(hover:none){
  .cinfo a,.fcols ul a,.crumb a,.hi a,
  .footer .fi a:not(.addr-link){display:inline-flex;align-items:center;min-height:44px}
  /* the address wraps over two or three lines; inline-flex would collapse it into
     one run, so give it the tap height with padding and leave the text flowing. */
  .footer .fi .addr-link{display:inline-block;padding:9px 0}   /* 26px line + 18px = 44 */
  .ci-v + .ci-v{margin-top:0}
  .card h3 a{display:inline-block;padding:7px 0}
  /* "Projects & Engineering: projects@teltec.co.ug" does not fit one narrow line -
     put the label on its own line rather than let it break mid-phrase. */
  .ci-el{display:block}
  /* a 16:7 letterbox is unreadable on a phone - give the map real height */
  .mapwrap{aspect-ratio:1/1}
}

@media (max-width:980px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr;gap:36px}
  .band{grid-template-columns:1fr}
  .feat,.feat-3{grid-template-columns:1fr;gap:34px}
  /* .ticks.cols-2 out-specifies a bare .cols-2, so it needs naming here too or
     the scope list stays in two ~180px columns on a phone. */
  .cols-2,.ticks.cols-2{columns:1}
  h2{font-size:30px;line-height:38px}
  .sec{padding:64px 0}
}
@media (max-width:760px){
  /* ---- mobile header ---------------------------------------------------
     Was: a tall white block (logo, a phone line, then two CTAs on ragged rows)
     sitting above a wide dark strip that held nothing but a burger, ~290px of a
     844px phone spent before any content. Now: one compact sticky bar carrying the
     logo and the toggle, an even two-up CTA row beneath it that scrolls away, and a
     real full-height menu panel instead of a list pushing the page down. */
  .logobar{position:sticky;top:0;z-index:90;transition:box-shadow .2s ease}
  /* keep the 20px gutter - `padding:10px 0` here shoved the logo and both CTAs
     flush against the screen edges. */
  .logobar .wrap{min-height:0;padding:10px 20px;gap:10px 14px;flex-wrap:wrap;align-items:center}
  .brand{order:1}
  .brand img{height:44px;transition:height .18s ease}
  .navtoggle{display:inline-flex;order:2;margin-left:auto}
  /* phone line full width, then the two CTAs sharing the row evenly */
  .hinfo{order:3;width:100%;margin-left:0;display:grid;grid-template-columns:1fr 1fr;
    gap:9px;align-items:stretch}
  .hstack{grid-column:1/-1;gap:4px}
  .hinfo .btn{width:100%;padding:11px 8px;font-size:14px;letter-spacing:.2px;min-height:46px}
  .hi b{max-width:none}

  /* scrolled: shed the CTA row so the sticky bar is just logo + toggle */
  .logobar.shrunk{box-shadow:0 10px 24px -16px rgba(0,0,0,.5)}
  .logobar.shrunk .hinfo{display:none}
  .logobar.shrunk .brand img{height:38px}

  .navbar{position:static;background:transparent;box-shadow:none}
  .navbar .wrap{padding:0}
  .menu{display:none;position:fixed;left:0;right:0;top:var(--hdr,64px);bottom:0;
    flex-direction:column;gap:0;background:var(--nav);overflow-y:auto;overscroll-behavior:contain;
    padding:4px 20px calc(26px + env(safe-area-inset-bottom));z-index:88}
  .menu.open{display:flex}
  .menu>li{display:block}
  .menu>li>a{height:auto;padding:15px 2px;border-bottom:1px solid #23282b;font-size:16px;
    letter-spacing:.2px}
  .menu>li>a[aria-current="page"]{box-shadow:inset 3px 0 0 var(--red);color:#fff}
  .sub{position:static;display:block;min-width:0;background:transparent;border-top:0;
    box-shadow:none;padding:2px 0 10px 14px}
  .sub a{padding:12px 4px;font-size:15px}
  .cards{grid-template-columns:1fr;gap:34px}
  /* 150px tiles gave only two logo columns on a phone, which ran the Profile page to
     ~8,000px. Three narrower tiles read the same and cut a third off the scroll. */
  .logos{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .logos div{min-height:76px;padding:10px}
  .logos img{max-height:44px}
  .hero{min-height:0;padding:64px 0}
  .form{padding:24px}
  .fcols{grid-template-columns:1fr;gap:34px}
  .sec{padding:52px 0}
}