:root{--navy:#0b1f4b;--red:#e02b20;--gold:#ffc94d;--wa:#25d366;--ink:#17203a;--grey:#5e6a80;--line:#e7ebf3;--soft:#f5f7fb}
*{margin:0;box-sizing:border-box}
body{font-family:'Outfit',sans-serif;color:var(--ink);background:#fff}
a{color:inherit}
.info{background:var(--navy);color:#cdd8ef;font-size:13.5px;padding:8px 6%;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}
.info b{color:#fff}
.info-actions{display:flex;align-items:center;gap:12px}
.info-actions a.telto{color:#fff;font-weight:700;text-decoration:none}
.wa-pill{display:inline-flex;align-items:center;white-space:nowrap;gap:7px;background:var(--wa);color:var(--navy);padding:5px 14px;border-radius:100px;font-weight:700;text-decoration:none;font-size:13px;transition:.2s}
.wa-pill:hover{filter:brightness(1.08)}
header{display:flex;justify-content:space-between;align-items:center;padding:14px 6%;background:#fff;box-shadow:0 1px 0 var(--line);position:sticky;top:0;z-index:50}
.menu-btn{display:none;background:none;border:1px solid var(--line);border-radius:10px;padding:9px 11px;cursor:pointer;color:var(--navy)}
.logo img{height:52px;width:auto;display:block}
nav{display:flex;align-items:center}
.nav-item{position:relative}
.nav-item>a{margin-left:20px;text-decoration:none;color:var(--ink);font-weight:600;font-size:14.5px;display:inline-flex;align-items:center;gap:5px;padding:14px 0}
.nav-item>a .car{font-size:10px;color:var(--grey)}
.nav-item>a.call{background:var(--navy);color:#fff;padding:11px 20px;border-radius:10px}
.dropdown{position:absolute;top:100%;left:8px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 24px 50px rgba(11,31,75,.16);min-width:250px;padding:10px;display:none;z-index:60}
.nav-item:hover .dropdown,.nav-item:focus-within .dropdown{display:block}
.dropdown a{display:block;padding:10px 14px;border-radius:9px;text-decoration:none;font-weight:600;font-size:14px;color:var(--ink)}
.dropdown a:hover{background:var(--soft);color:#b3261e}
.hero{position:relative;color:#fff;padding:80px 6%;display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center;background:linear-gradient(120deg,#0b1f4b,#16336e);overflow:hidden}
.hero::before{content:"";position:absolute;inset:-8%;background:url('https://clydebosman.co.za/wp-content/uploads/2025/07/H1-Van-scaled.jpg') center/cover no-repeat;animation:kenburns 19.5s ease-in-out infinite alternate,heroFadeA 20s ease-in-out infinite;will-change:transform,opacity;z-index:0}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(6,15,38,.92) 30%,rgba(8,20,50,.72) 60%,rgba(10,24,60,.55));z-index:1}
.hero>*{position:relative;z-index:2}
@keyframes kenburns{from{transform:scale(1) translate(0,0)}to{transform:scale(1.12) translate(-1.5%,1.2%)}}
@media (prefers-reduced-motion:reduce){.hero::before{animation:none}}
.pill{display:inline-flex;gap:8px;align-items:center;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.25);border-radius:100px;padding:8px 16px;font-size:13px;font-weight:600;color:#dfe8f8}
.pill i{color:#5df0a6;font-style:normal}
.hero h1{font-size:clamp(38px,4.8vw,58px);font-weight:800;line-height:1.06;margin:20px 0}
.hero h1 span{color:var(--gold)}
.hero .lead{color:#c9d5ec;font-size:18px;line-height:1.65;max-width:48ch}
.microtrust{display:flex;gap:22px;margin-top:22px;color:#aebbdd;font-size:13.5px;font-weight:600;flex-wrap:wrap}
.microtrust b{color:#fff}
.bookcard{background:#fff;border-radius:20px;padding:30px;color:var(--ink);box-shadow:0 30px 70px rgba(3,10,30,.45)}
.bookcard h2{font-size:20px;font-weight:800}
.bookcard small{color:var(--grey)}
.bookcard form{display:grid;gap:12px;margin-top:18px}
.bookcard select,.bookcard input{padding:14px;border:1px solid #dbe1ec;border-radius:10px;font-family:inherit;font-size:15px;width:100%;background:#fff}
.bookcard button{background:var(--red);border:0;color:#fff;font-weight:800;font-size:16px;padding:16px;border-radius:10px;font-family:inherit;cursor:pointer}
.bookcard button:disabled{opacity:.6;cursor:wait}
.bookcard .or{text-align:center;color:var(--grey);font-size:13px}
.bookcard .tel{display:block;text-align:center;font-weight:800;color:var(--navy);font-size:20px;text-decoration:none}
.formmsg{display:none;border-radius:10px;padding:12px 16px;font-weight:600;font-size:14px}
.formmsg.ok{display:block;background:#eaf7f0;color:#157347;border:1px solid #bfe5d0}
.formmsg.err{display:block;background:#fdeeed;color:#b3261e;border:1px solid #f5c6c3}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px;padding:46px 6%;border-bottom:1px solid var(--line)}
.step{display:flex;gap:14px;align-items:flex-start}
.step .n{background:#fdeeed;color:#b3261e;font-weight:800;border-radius:12px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;flex:none}
.step h3{font-size:16.5px}
.step p{color:var(--grey);font-size:14px;margin-top:4px;line-height:1.55}
.fairbill{margin:0 6% 70px;background:var(--navy);border-radius:24px;color:#fff;padding:42px 46px;display:grid;grid-template-columns:auto 1fr;gap:34px;align-items:center;background-image:radial-gradient(circle at 90% 15%,#1d3a7c 0,transparent 45%)}
.fairbill .seal{width:92px;height:92px;border-radius:50%;border:3px solid var(--gold);display:flex;align-items:center;justify-content:center;font-weight:800;text-align:center;font-size:11px;color:var(--gold);padding:10px;flex:none}
.fairbill h2{font-size:26px;font-weight:800;margin-bottom:8px}
.fairbill h2 em{color:var(--gold);font-style:normal}
.fairbill p{color:#c9d5ec;font-size:15.5px;line-height:1.7;max-width:90ch}
.fairbill p b{color:#fff}
@media(max-width:700px){.fairbill{grid-template-columns:1fr;text-align:center}.fairbill .seal{margin:auto}}
.services{padding:76px 6%}
.services h2{font-size:34px;font-weight:800;color:var(--navy)}
.services p.sub{color:var(--grey);margin-top:8px}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px;row-gap:48px;margin-top:56px}
.tile{position:relative;border-radius:18px;padding:44px 28px 28px;text-decoration:none;color:var(--ink);transition:.2s;background:var(--soft);border:1px solid var(--line);border-bottom:4px solid var(--navy);display:block}
.tile:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(11,31,75,.14);border-bottom-color:var(--red)}
.tile .chip{position:absolute;top:-27px;left:26px;width:54px;height:54px;border-radius:14px;background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;font-size:24px;box-shadow:0 10px 24px rgba(224,43,32,.35);transition:transform 1s ease}
.tile:hover .chip{transform:perspective(400px) rotateY(360deg)}
@media (prefers-reduced-motion:reduce){.tile:hover .chip{transform:none}}
.tile h3{margin:0 0 6px;font-size:19px;color:var(--navy)}
.tile p{font-size:14.5px;color:var(--grey);line-height:1.6}
.tile b{display:inline-block;margin-top:14px;color:#b3261e;font-size:14px}
.proof{margin:0 6% 76px;background:var(--navy);border-radius:24px;color:#fff;padding:46px;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:26px;text-align:center;background-image:radial-gradient(circle at 82% 12%,#1d3a7c 0,transparent 45%)}
.proof b{font-size:34px;font-weight:800;display:block;color:var(--gold)}
.proof span{color:#aebbdd;font-size:14px}
.partners{padding:0 6% 84px;text-align:center}
.partners h2{font-size:26px;font-weight:800;color:var(--navy)}
.partners p{color:var(--grey);margin:8px 0 34px;font-size:15px}
.logos{display:flex;justify-content:center;align-items:center;gap:56px;flex-wrap:wrap}
.logos a{display:flex;filter:grayscale(1);opacity:.7;transition:.25s ease}
.logos a:hover{filter:none;opacity:1;transform:translateY(-3px)}
.logos img{height:44px;width:auto;object-fit:contain}
.areasec{padding:0 6% 80px}
.areasec h2{font-size:30px;font-weight:800;color:var(--navy);margin-bottom:10px}
.areasec h2 .accent{color:var(--red)}
.areasec>p{color:var(--grey);max-width:70ch;line-height:1.7;margin-bottom:26px}
.area-intro{max-width:none;margin:0 0 28px;text-align:center}
.area-intro p{color:var(--grey);line-height:1.7;max-width:none;margin:0 0 16px}
.areasec>h2{text-align:center}
.arearow{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px}
.maprow{display:grid;grid-template-columns:1.05fr .95fr;gap:26px;align-items:start}
.mapframe{width:100%;height:100%;min-height:340px;border:0;border-radius:18px;border:1px solid var(--line)}
.mapnote{margin-top:10px;font-size:13px;color:var(--grey)}
.covpanel{margin:0 6% 26px;background:var(--navy);border-radius:24px;color:#fff;padding:46px;display:grid;grid-template-columns:1fr .95fr;gap:40px;align-items:center;background-image:radial-gradient(circle at 12% 88%,#1d3a7c 0,transparent 45%)}
.covpanel h2{font-size:30px;font-weight:800;color:#fff;margin-bottom:12px}
.covpanel h2 em{color:var(--gold);font-style:normal}
.covpanel p{color:#c9d5ec;line-height:1.7;font-size:15.5px;margin-bottom:12px}
.covpanel .cbtn{display:inline-block;background:var(--red);color:#fff;font-weight:800;padding:14px 26px;border-radius:12px;text-decoration:none;margin-top:8px}
.covwrap svg{width:100%;height:auto;display:block;max-width:440px;margin:auto}
.ring{fill:none;stroke:#ffc94d;stroke-opacity:.45;stroke-width:1.5;stroke-dasharray:5 7}
.rlabel{font-family:Outfit,sans-serif;font-size:11px;font-weight:600;fill:#8fa3c4}
.basetxt{font-family:Outfit,sans-serif;font-size:11px;font-weight:800;fill:#ffc94d;letter-spacing:2px}
.chipbg{fill:#ffffff;stroke:#ffc94d;stroke-width:0;transition:.2s}
.chiptxt{font-family:Outfit,sans-serif;font-size:12.5px;font-weight:700;fill:#0b1f4b}
.covwrap a{cursor:pointer}
.covwrap a:hover .chipbg{fill:#ffc94d}
@media(max-width:920px){.covpanel{grid-template-columns:1fr}}
.zlabel{font-family:Outfit,sans-serif;font-size:11px;font-weight:600;fill:#dfe8f8}
.pinring{fill:none;stroke:#e02b20;stroke-width:2;animation:pinpulse 2s ease-out infinite}
@keyframes pinpulse{from{r:8;opacity:.9}to{r:26;opacity:0}}
@media (prefers-reduced-motion:reduce){.pinring{animation:none;opacity:0}}
@media(max-width:920px){.maprow{grid-template-columns:1fr}.mapframe{min-height:260px}}
.pagehero{background:linear-gradient(100deg,rgba(6,15,38,.93) 35%,rgba(8,20,50,.75)),url('https://clydebosman.co.za/wp-content/uploads/2025/07/H1-Van-scaled.jpg') center/cover no-repeat;color:#fff;padding:60px 6%}
@media (min-width:1024px) and (prefers-reduced-motion:no-preference){.pagehero{background-attachment:fixed}}
.crumb{font-size:13.5px;color:#93a8d4}
.crumb a{color:#c9d5ec;text-decoration:none}
.pagehero h1{font-size:clamp(32px,4.2vw,48px);font-weight:800;margin:14px 0 10px;max-width:24ch;line-height:1.1}
.pagehero p{color:#c9d5ec;font-size:17.5px;max-width:56ch;line-height:1.6}
.heroticks{display:flex;gap:22px;margin-top:18px;color:#aebbdd;font-size:13.5px;font-weight:600;flex-wrap:wrap}
.heroticks b{color:#fff}
.layout{display:grid;grid-template-columns:1fr 360px;gap:50px;padding:60px 6%;align-items:start}
.content h2{font-size:26px;font-weight:800;color:var(--navy);margin:34px 0 12px}
.content h2:first-of-type{margin-top:0}
.content p{color:var(--grey);line-height:1.75;font-size:16px;margin-bottom:14px}
.content p a{color:#b3261e;font-weight:600}
.callout{border-radius:0 12px 12px 0;padding:18px 22px;margin:0 0 22px}
.callout.red{background:#fdeeed;border-left:4px solid var(--red)}
.callout.red b{color:#b3261e}
.callout.red p{color:#7c3a35;margin:6px 0 0;font-size:15px}
.callout.green{background:#eef6f2;border-left:4px solid #1d9e5f}
.callout.green b{color:#157347}
.callout.green p{color:#3d6b56;margin:6px 0 0;font-size:15px}
.callout.gold{background:#fff7e2;border-left:4px solid var(--gold)}
.callout.gold b{color:#8a6100}
.callout.gold p{color:#7a6430;margin:6px 0 0;font-size:15px}
.includes{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:18px 0 8px}
.inc{background:var(--soft);border:1px solid var(--line);border-radius:14px;padding:18px}
.inc b{color:var(--navy);font-size:15px}
.inc p{font-size:13.8px;margin:6px 0 0;line-height:1.55}
.howsteps{counter-reset:s;display:grid;gap:14px;margin:18px 0}
.st{display:flex;gap:16px;align-items:flex-start}
.st::before{counter-increment:s;content:counter(s);background:var(--navy);color:#fff;font-weight:800;border-radius:10px;width:38px;height:38px;display:flex;align-items:center;justify-content:center;flex:none}
.st div b{font-size:15.5px}
.st div p{font-size:14.5px;margin:4px 0 0}
details{border:1px solid var(--line);border-radius:12px;padding:16px 20px;margin-bottom:10px}
summary{font-weight:700;cursor:pointer;font-size:15.5px}
details p{margin-top:10px;font-size:14.5px}
.side{position:sticky;top:90px;display:grid;gap:20px}
.side .bookcard{border:1px solid var(--line);box-shadow:0 22px 50px rgba(11,31,75,.10);padding:26px}
.side .bookcard h2{font-size:18px}
.trustbox{background:var(--navy);border-radius:20px;color:#fff;padding:24px;background-image:radial-gradient(circle at 85% 10%,#1d3a7c 0,transparent 45%)}
.trustbox b{display:block;font-size:15.5px;margin-bottom:10px}
.trustbox span{display:block;color:#c9d5ec;font-size:14px;line-height:2}
.related{padding:0 6% 70px}
.related h2{font-size:24px;font-weight:800;color:var(--navy);margin-bottom:20px}
.relrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.rel{background:var(--soft);border:1px solid var(--line);border-bottom:4px solid var(--navy);border-radius:14px;padding:20px;text-decoration:none;color:var(--ink);font-weight:700;transition:.2s;display:block}
.rel:hover{border-bottom-color:var(--red);transform:translateY(-3px)}
.rel span{display:block;font-weight:400;color:var(--grey);font-size:13.5px;margin-top:6px}
footer{background:var(--navy);color:#9fb0d2;padding:50px 6% 30px;font-size:14px}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:30px;margin-bottom:30px}
footer .fh{color:#fff;margin-bottom:12px;font-size:15px;font-weight:800}
.skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:12px 20px;z-index:300;border-radius:0 0 12px 0;font-weight:700;text-decoration:none}
.skip:focus{left:0}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
footer a{color:#9fb0d2;text-decoration:none;display:block;margin-bottom:8px}
footer a:hover{color:#fff}
.social{display:flex;gap:12px;margin-top:14px}
.social a{width:40px;height:40px;border-radius:50%;border:1px solid #2a4479;display:flex;align-items:center;justify-content:center;margin:0;transition:.2s}
.social a:hover{background:var(--red);border-color:var(--red)}
.social svg{width:18px;height:18px;fill:#cdd8ef}
.social a:hover svg{fill:#fff}
.fbase{border-top:1px solid #1d3057;padding-top:20px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;color:#96aacd}
.contactwrap{display:grid;grid-template-columns:1fr 400px;gap:50px;padding:60px 6%;align-items:start}
.formcard{background:#fff;border:1px solid var(--line);border-radius:22px;padding:34px;box-shadow:0 22px 50px rgba(11,31,75,.08)}
.formcard h2{font-size:24px;font-weight:800;color:var(--navy)}
.formcard>p{color:var(--grey);margin:8px 0 22px;font-size:15px}
.formcard form{display:grid;gap:14px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
label{font-weight:700;font-size:13.5px;color:var(--navy);display:block;margin-bottom:6px}
.formcard input,.formcard select,.formcard textarea{padding:14px;border:1px solid #dbe1ec;border-radius:10px;font-family:inherit;font-size:15px;width:100%;background:#fff}
.formcard textarea{min-height:120px;resize:vertical}
.formcard button{background:var(--red);border:0;color:#fff;font-weight:800;font-size:16px;padding:16px;border-radius:10px;font-family:inherit;cursor:pointer}
.hp{position:absolute;left:-9999px;opacity:0}
.ccard{background:var(--soft);border:1px solid var(--line);border-radius:18px;padding:26px}
.ccard h3{font-size:16.5px;color:var(--navy);margin-bottom:10px}
.ccard p,.ccard a{color:var(--grey);font-size:15px;line-height:1.8;text-decoration:none;display:block}
.ccard a b{color:var(--navy);font-size:19px}
.ccard.dark{background:var(--navy);border:0;color:#fff;background-image:radial-gradient(circle at 85% 10%,#1d3a7c 0,transparent 45%)}
.ccard.dark h3{color:#fff}
.ccard.dark p{color:#c9d5ec}
.ccard.dark a{background:var(--red);color:#fff;text-align:center;font-weight:800;padding:14px;border-radius:10px;margin-top:12px}
.mobilebar{display:none}
@media(max-width:920px){
 .menu-btn{display:inline-flex;align-items:center}
 header{position:sticky}
 header nav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;box-shadow:0 24px 40px rgba(11,31,75,.18);border-top:1px solid var(--line);padding:8px 6% 18px;z-index:80;max-height:calc(100vh - 90px);overflow:auto}
 header nav.open{display:block}
 .nav-item{position:static}
 .nav-item>a{display:flex;margin-left:0;padding:12px 0;font-size:16px;border-bottom:1px solid var(--soft)}
 .nav-item>a.call{display:inline-flex;margin-top:12px;justify-content:center;width:100%}
 .nav-item .dropdown{display:block;position:static;box-shadow:none;border:0;min-width:0;padding:2px 0 8px 16px}
 .nav-item .dropdown a{padding:8px 0;font-size:14.5px}
}
@media(max-width:640px){
 .info{justify-content:center;text-align:center;row-gap:4px;padding:7px 4%}
 .info-em{display:none}
 .info-actions{justify-content:center;gap:10px}
}
@media(max-width:768px){
 body{padding-bottom:56px}
 .mobilebar{display:grid;grid-template-columns:1fr 1fr;position:fixed;bottom:0;left:0;right:0;z-index:99;box-shadow:0 -6px 20px rgba(0,0,0,.15)}
 .mobilebar a{display:flex;align-items:center;justify-content:center;gap:8px;padding:15px;font-weight:800;color:#fff;text-decoration:none;font-size:15px;white-space:nowrap;min-width:0}
 .mobilebar .mcall{background:var(--navy)}
 .mobilebar .mwa{background:var(--wa);color:var(--navy)}
 .dropdown{position:static;box-shadow:none;border:0;min-width:0;padding:0 0 0 12px}
}
@media(max-width:920px){.hero,.layout,.contactwrap{grid-template-columns:1fr}.side{position:static}.two{grid-template-columns:1fr}}


/* ===== Added: new service-picker cards ("What do you need fixed?") ===== */
:root{
    --navy:#0B1F4B;
    --navy-ink:#17203A;
    --red:#E02B20;
    --red-deep:#B8210A;
    --gold:#FFC94D;
    --grey-text:#6B7280;
    --grey-border:#E7E9EE;
    --grey-bg:#F7F8FA;
  }
  *{box-sizing:border-box;}
  body{margin:0;font-family:'Poppins',system-ui,sans-serif;background:#fff;}

  .fixed-section{max-width:1280px;margin:0 auto;padding:72px 32px 64px;}
  .fixed-header{max-width:760px;margin:0 auto 40px;text-align:center;}
  .fixed-header h2{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:clamp(30px,3.6vw,42px);line-height:1.12;color:var(--navy);margin:0 0 14px;}
  .fixed-header h2 .accent{color:var(--red);}
  .fixed-header p{font-size:16px;line-height:1.6;color:#6B7280;margin:0;}
  /* Wide: all six across, then wrap/stack down */
  .fixed-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;}
  @media(max-width:1100px){.fixed-grid{grid-template-columns:repeat(3,1fr);gap:20px;}}
  @media(max-width:720px){.fixed-grid{grid-template-columns:repeat(2,1fr);}}
  @media(max-width:480px){.fixed-grid{grid-template-columns:1fr;}}
  .fixed-card{background:#fff;border:1px solid #E7E9EE;border-radius:16px;padding:28px 16px 22px;text-align:center;text-decoration:none;display:flex;flex-direction:column;align-items:center;box-shadow:0 1px 2px rgba(11,31,75,.06);transition:transform .3s cubic-bezier(.2,.75,.25,1),box-shadow .3s ease,border-color .3s ease;}
  .fixed-card:hover,.fixed-card:focus-visible{transform:translateY(-6px);box-shadow:0 22px 38px -16px rgba(11,31,75,.3);border-color:#fff;}
  .fixed-card:focus-visible{outline:2px solid var(--navy);outline-offset:3px;}
  .fixed-icon{width:80px;height:80px;border-radius:50%;background:var(--navy);display:flex;align-items:center;justify-content:center;margin-bottom:18px;position:relative;}
  .fixed-icon::before{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--red);opacity:0;transform:scale(.82);transition:opacity .3s ease,transform .3s ease;}
  .fixed-card:hover .fixed-icon::before,.fixed-card:focus-visible .fixed-icon::before{opacity:1;transform:scale(1);}
  .fixed-icon svg{width:50px;height:50px;overflow:visible;display:block;}
  .fixed-card h3{font-family:'Baloo 2',sans-serif;font-weight:700;font-size:17.5px;color:#17203A;margin:0 0 8px;}
  .fixed-card p{font-size:13px;line-height:1.5;color:#6B7280;margin:0 0 18px;flex-grow:1;}
  .fixed-cta{display:inline-flex;align-items:center;justify-content:center;gap:5px;font-family:'Poppins',sans-serif;font-weight:600;font-size:12.5px;letter-spacing:-.1px;white-space:nowrap;color:var(--red);border:1.5px solid var(--red);border-radius:10px;padding:9px 8px;width:100%;transition:background .25s ease,color .25s ease;}
  .fixed-cta .arw{display:inline-block;transition:transform .3s cubic-bezier(.2,.75,.25,1);}
  .fixed-card:hover .fixed-cta,.fixed-card:focus-visible .fixed-cta{background:var(--red);color:#fff;}
  .fixed-card:hover .fixed-cta .arw,.fixed-card:focus-visible .fixed-cta .arw{transform:translateX(5px);}
  .fixed-trust{margin-top:44px;padding-top:28px;border-top:1px solid #E7E9EE;display:flex;flex-wrap:wrap;justify-content:center;gap:14px 34px;}
  .fixed-trust-item{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:#17203A;}
  .fixed-trust-item .tick{color:var(--red);font-weight:800;}
  .a-flame{animation:cbp-flicker 1.05s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 96%;}
  .a-flame2{animation:cbp-flicker2 .8s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 96%;}
  .a-swirl{animation:cbp-swirl 2.6s linear infinite;transform-box:fill-box;transform-origin:center;}
  .a-drop{animation:cbp-drip 1.5s cubic-bezier(.55,.1,.85,.3) infinite;transform-box:fill-box;transform-origin:50% 0%;}
  .a-d1{animation:cbp-shower 1.1s ease-in infinite;transform-box:fill-box;}
  .a-d2{animation:cbp-shower 1.1s ease-in .22s infinite;transform-box:fill-box;}
  .a-d3{animation:cbp-shower 1.1s ease-in .44s infinite;transform-box:fill-box;}
  .a-drill{animation:cbp-spin 2.2s linear infinite;transform-box:fill-box;transform-origin:center;}
  .a-stamp{animation:cbp-stamp 1.15s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 42%;}
  .fixed-icon .anim{animation-play-state:paused;}
  .fixed-card:hover .anim,.fixed-card:focus-visible .anim{animation-play-state:running;}
  @keyframes cbp-flicker{0%,100%{transform:scale(1,1) translateX(0) rotate(0)}18%{transform:scale(1.05,1.14) translateX(-.5px) rotate(-1.5deg)}38%{transform:scale(.95,.93) translateX(.6px) rotate(1.5deg)}58%{transform:scale(1.05,1.09) translateX(-.4px) rotate(-1deg)}78%{transform:scale(.98,1.03) translateX(.35px) rotate(.8deg)}}
  @keyframes cbp-flicker2{0%,100%{transform:scale(1,1) translateX(0)}25%{transform:scale(.92,1.12) translateX(.6px)}50%{transform:scale(1.06,.9) translateX(-.5px)}75%{transform:scale(.96,1.06) translateX(.4px)}}
  @keyframes cbp-swirl{to{transform:rotate(360deg)}}
  @keyframes cbp-spin{to{transform:rotate(360deg)}}
  @keyframes cbp-drip{0%{transform:translateY(-3px) scale(.55,.45);opacity:0}14%{opacity:1}34%{transform:translateY(-1px) scale(.8,1.35);opacity:1}52%{transform:translateY(3px) scale(1.05,.92);opacity:1}80%{opacity:.85}100%{transform:translateY(14px) scale(.9,1.02);opacity:0}}
  @keyframes cbp-shower{0%{transform:translateY(-2px);opacity:0}25%{opacity:1}80%{opacity:.9}100%{transform:translateY(9px);opacity:0}}
  @keyframes cbp-stamp{0%,100%{transform:scale(1) rotate(0)}42%{transform:scale(.82) rotate(-5deg)}62%{transform:scale(.92) rotate(-2deg)}}
  @media (prefers-reduced-motion: reduce){.fixed-card,.fixed-icon::before,.fixed-cta,.anim{transition:none;animation:none;}}

/* ===== Added: new filterable/lightbox gallery ("Our Work") ===== */
:root{
    --navy:#0B1F4B;
    --navy-ink:#17203A;
    --red:#E02B20;
    --gold:#FFC94D;
    --grey-text:#6B7280;
    --grey-border:#E7E9EE;
  }
  *{box-sizing:border-box;}
  body{margin:0;font-family:'Poppins',system-ui,sans-serif;background:#fff;}

  .gal-section{max-width:1180px;margin:0 auto;padding:72px 32px 80px;}

  .gal-header{max-width:640px;margin:0 auto 12px;text-align:center;}
  .gal-header h1{
    font-family:'Baloo 2',sans-serif;font-weight:800;
    font-size:clamp(30px,3.6vw,42px);line-height:1.1;color:var(--navy);margin:0 0 12px;
  }
  .gal-header h1 .accent{color:var(--red);}
  .gal-header p{font-size:16px;line-height:1.6;color:var(--grey-text);margin:0 0 32px;}

  .gal-filters{
    display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:36px;
  }
  .gal-chip{
    font-family:'Poppins',sans-serif;font-weight:600;font-size:13.5px;
    padding:9px 18px;border-radius:999px;border:1.5px solid var(--grey-border);
    background:#fff;color:var(--navy-ink);cursor:pointer;transition:all .18s ease;
  }
  .gal-chip:hover{border-color:var(--navy);}
  .gal-chip.active{background:var(--navy);border-color:var(--navy);color:#fff;}

  .gal-grid{
    column-count:1; column-gap:16px;
  }
  @media (min-width:640px){ .gal-grid{column-count:2;} }
  @media (min-width:960px){ .gal-grid{column-count:3;} }
  @media (min-width:1180px){ .gal-grid{column-count:4;} }

  .gal-item{
    break-inside:avoid;
    margin-bottom:16px;
    position:relative;
    border-radius:14px;
    overflow:hidden;
    cursor:pointer;
    background:var(--grey-border);
    box-shadow:0 1px 2px rgba(11,31,75,.06);
    transition:box-shadow .22s ease, transform .22s ease;
  }
  .gal-item:hover{transform:translateY(-3px);box-shadow:0 16px 28px -14px rgba(11,31,75,.30);}
  .gal-item img{
    width:100%;display:block;transition:transform .35s ease;
  }
  .gal-item:hover img{transform:scale(1.045);}

  .gal-overlay{
    position:absolute;left:0;right:0;bottom:0;
    padding:28px 14px 12px;
    background:linear-gradient(to top, rgba(11,31,75,.88), rgba(11,31,75,0));
    opacity:0;transform:translateY(6px);
    transition:opacity .22s ease, transform .22s ease;
  }
  .gal-item:hover .gal-overlay{opacity:1;transform:translateY(0);}
  .gal-overlay .cat{
    display:inline-block;font-family:'Poppins',sans-serif;font-weight:600;font-size:10.5px;
    letter-spacing:.05em;text-transform:uppercase;color:var(--gold);margin-bottom:4px;
  }
  .gal-overlay .cap{font-family:'Poppins',sans-serif;font-weight:500;font-size:13.5px;color:#fff;margin:0;line-height:1.3;}

  .gal-item[data-hidden="true"]{display:none;}

  /* lightbox */
  .gal-lightbox{
    position:fixed;inset:0;background:rgba(11,31,75,.94);
    display:none;align-items:center;justify-content:center;z-index:999;
    padding:32px;
  }
  .gal-lightbox.open{display:flex;}
  .gal-lightbox img{max-width:100%;max-height:78vh;border-radius:10px;box-shadow:0 30px 60px rgba(0,0,0,.4);}
  .gal-lightbox .lb-wrap{display:flex;flex-direction:column;align-items:center;gap:14px;max-width:900px;width:100%;}
  .gal-lightbox .lb-caption{color:#fff;text-align:center;font-family:'Poppins',sans-serif;}
  .gal-lightbox .lb-caption .cat{color:var(--gold);font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;display:block;margin-bottom:4px;}
  .gal-lightbox .lb-caption .cap{font-size:15px;font-weight:500;}
  .lb-close, .lb-prev, .lb-next{
    position:absolute;background:rgba(255,255,255,.12);border:none;color:#fff;
    width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    cursor:pointer;transition:background .18s ease;
  }
  .lb-close:hover, .lb-prev:hover, .lb-next:hover{background:rgba(255,255,255,.24);}
  .lb-close{top:24px;right:24px;}
  .lb-prev{left:24px;top:50%;transform:translateY(-50%);}
  .lb-next{right:24px;top:50%;transform:translateY(-50%);}
  .lb-close svg,.lb-prev svg,.lb-next svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}

  @media (max-width:640px){
    .gal-section{padding:56px 20px 60px;}
    .lb-prev,.lb-next{width:38px;height:38px;}
    .lb-close{top:14px;right:14px;}
    .lb-prev{left:8px;} .lb-next{right:8px;}
  }

.hero-bg2{position:absolute;inset:-8%;background:url('https://clydebosman.co.za/img/hero-vans-southern-suburbs.jpg') center/cover no-repeat;opacity:0;animation:kenburns 19.5s ease-in-out infinite alternate,heroFadeB 20s ease-in-out infinite;will-change:transform,opacity;z-index:0}
@keyframes heroFadeA{0%,45%{opacity:1}50%,95%{opacity:0}100%{opacity:1}}
@keyframes heroFadeB{0%,45%{opacity:0}50%,95%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.hero-bg2{animation:none;opacity:0}}

.blog-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px;max-width:1080px;margin:0 auto;padding:0 24px}
.partners a.logo-color img{filter:grayscale(1) opacity(.85);transition:filter .35s ease,opacity .35s ease}
.partners a.logo-color:hover img{filter:grayscale(0);opacity:1}