/* =====================================================================
   V S Brands Enterprises — site.css
   Navy + Gold premium design system (self-contained, no external fonts)
   ===================================================================== */

:root{
  --bg:oklch(99% 0.004 90);
  --surface:oklch(100% 0 0);
  --ivory:oklch(98.5% 0.006 90);
  --fg:oklch(26% 0.07 262);
  --muted:oklch(48% 0.03 262);
  --faint:oklch(62% 0.02 262);
  --border:oklch(91% 0.008 262);
  --border-2:oklch(86% 0.01 262);
  --accent:oklch(72% 0.13 84);        /* gold */
  --accent-deep:oklch(58% 0.115 78);
  --gold-tint:oklch(94% 0.03 90);
  --navy:oklch(26% 0.07 262);
  --navy-2:oklch(31% 0.075 262);
  --navy-3:oklch(37% 0.07 262);
  --on-navy:oklch(97% 0.012 90);
  --on-navy-muted:oklch(80% 0.03 262);
  --wa:#25d366;                        /* WhatsApp green */
  --wa-deep:#128c4a;
  --danger:oklch(52% 0.19 27);
  --font-display:'Iowan Old Style','Charter','Palatino',Georgia,'Times New Roman',serif;
  --font-body:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,system-ui,sans-serif;
  --font-mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --r:5px;
  --r-lg:9px;
  --shadow-sm:0 1px 2px oklch(26% 0.07 262/.06),0 4px 14px oklch(26% 0.07 262/.05);
  --shadow-md:0 12px 34px oklch(26% 0.07 262/.12);
  --shadow-lg:0 26px 60px oklch(26% 0.07 262/.20);
  --wrap:1200px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--fg);font:16px/1.6 var(--font-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
::selection{background:var(--accent);color:oklch(22% 0.06 262)}
:focus-visible{outline:2px solid var(--accent-deep);outline-offset:2px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(18px,4vw,44px)}
section{padding:clamp(54px,8vw,104px) 0}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font:600 12px/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent-deep)}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--accent)}
.eyebrow.plain::before{display:none}
h2.sec{font:600 clamp(29px,3.6vw,46px)/1.12 var(--font-display);letter-spacing:-.02em;margin:16px 0 12px;text-wrap:balance}
.sec-sub{color:var(--muted);max-width:64ch;font-size:clamp(15px,1.6vw,17.5px)}
.center{text-align:center}
.center .eyebrow{justify-content:center}
.center .sec-sub{margin-left:auto;margin-right:auto}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font:600 14.5px/1 var(--font-body);letter-spacing:.01em;padding:13px 22px;border-radius:var(--r);border:1px solid transparent;cursor:pointer;transition:transform .12s,background .16s,color .16s,border-color .16s,box-shadow .16s;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn svg{width:17px;height:17px;flex:0 0 auto}
.btn-gold{background:var(--accent);color:oklch(22% 0.05 262);box-shadow:0 10px 24px oklch(72% 0.13 84/.28)}
.btn-gold:hover{background:var(--accent-deep);color:#fff}
.btn-navy{background:var(--navy);color:var(--on-navy)}
.btn-navy:hover{background:var(--navy-2)}
.btn-ghost{border-color:var(--border-2);color:var(--fg);background:transparent}
.btn-ghost:hover{border-color:var(--fg)}
.btn-wa{background:var(--wa);color:#fff;box-shadow:0 10px 24px rgba(37,211,102,.32)}
.btn-wa:hover{background:var(--wa-deep)}
.btn-outline-light{border-color:oklch(100% 0 0/.4);color:var(--on-navy);background:oklch(100% 0 0/.06)}
.btn-outline-light:hover{background:oklch(100% 0 0/.14);border-color:var(--on-navy)}
.btn-sm{padding:10px 16px;font-size:13.5px}
.btn-block{width:100%}

/* ---------- topbar ---------- */
.topbar{background:var(--navy);color:var(--on-navy);font-size:13px}
.topbar .wrap{display:flex;gap:8px 20px;align-items:center;min-height:40px;flex-wrap:wrap;padding-top:7px;padding-bottom:7px}
.topbar a,.topbar span.ti{display:inline-flex;align-items:center;gap:7px;color:var(--on-navy);opacity:.9;font-family:var(--font-mono);font-size:12.5px;letter-spacing:.02em}
.topbar a:hover{opacity:1}
.topbar svg{width:14px;height:14px;opacity:.8}
.topbar .spacer{flex:1}
.topbar .tag{font:500 11px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--on-navy-muted)}
@media(max-width:820px){.topbar .t-hide{display:none}}

/* ---------- nav ---------- */
nav.main{position:sticky;top:0;z-index:60;background:oklch(100% 0 0/.85);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}
nav.main .wrap{display:flex;align-items:center;gap:22px;min-height:70px}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:44px;width:auto}
.brand .bt{display:none}
.navlinks{display:flex;gap:4px;margin-left:auto;align-items:center}
.navlinks a{font:600 13.5px/1 var(--font-body);letter-spacing:.01em;color:var(--muted);padding:10px 13px;border-radius:999px;transition:color .14s,background .14s}
.navlinks a:hover{color:var(--fg);background:var(--gold-tint)}
.navlinks a.active{color:var(--fg);background:var(--gold-tint)}
.navlinks a.active{box-shadow:inset 0 -2px 0 var(--accent)}
.nav-cta{margin-left:6px}
.hamburger{display:none;width:46px;height:46px;border:1px solid var(--border-2);border-radius:var(--r);background:var(--surface);cursor:pointer;place-items:center;margin-left:auto}
.hamburger svg{width:22px;height:22px}
@media(max-width:1000px){
  .navlinks,.nav-cta{display:none}
  .hamburger{display:grid}
}

/* mobile drawer */
.drawer-scrim{position:fixed;inset:0;background:oklch(20% 0.06 262/.5);opacity:0;visibility:hidden;transition:.2s;z-index:70}
.drawer{position:fixed;top:0;right:0;height:100%;width:min(340px,86vw);background:var(--surface);z-index:80;transform:translateX(100%);transition:transform .26s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;box-shadow:var(--shadow-lg)}
body.nav-open .drawer{transform:translateX(0)}
body.nav-open .drawer-scrim{opacity:1;visibility:visible}
body.nav-open{overflow:hidden}
.drawer-top{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--border)}
.drawer-top img{height:38px}
.drawer-close{width:42px;height:42px;border:1px solid var(--border-2);border-radius:var(--r);background:var(--surface);cursor:pointer;display:grid;place-items:center}
.drawer-close svg{width:20px;height:20px}
.drawer nav{display:flex;flex-direction:column;padding:10px 14px;overflow-y:auto}
.drawer nav a{padding:14px 12px;border-bottom:1px solid var(--border);font:600 15.5px/1 var(--font-body);color:var(--fg);display:flex;justify-content:space-between;align-items:center}
.drawer nav a.active{color:var(--accent-deep)}
.drawer nav a::after{content:"›";color:var(--faint);font-size:20px}
.drawer .drawer-cta{padding:18px 20px;margin-top:auto;border-top:1px solid var(--border);display:grid;gap:10px}

/* ---------- home hero ---------- */
.hero{padding:clamp(44px,7vw,92px) 0}
.hero .wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(30px,5vw,68px);align-items:center}
.hero h1{font:600 clamp(38px,5.4vw,70px)/1.05 var(--font-display);letter-spacing:-.025em;margin:18px 0 20px;text-wrap:balance}
.hero h1 em{font-style:italic;color:var(--accent-deep)}
.hero p.lede{color:var(--muted);font-size:clamp(16px,1.9vw,19px);max-width:56ch;margin-bottom:30px}
.hero-cta{display:flex;gap:13px;flex-wrap:wrap}
.hero-meta{display:flex;gap:0;margin-top:38px;border-top:1px solid var(--border);flex-wrap:wrap}
.hero-meta div{padding:18px 26px 0 0;margin-right:26px}
.hero-meta div+div{border-left:1px solid var(--border);padding-left:26px}
.hero-meta b{display:block;font:600 clamp(22px,3vw,30px)/1.1 var(--font-display);font-variant-numeric:tabular-nums;color:var(--fg)}
.hero-meta span{font-size:12.5px;color:var(--muted)}
.hero-fig{position:relative}
.hero-fig>img{border-radius:var(--r-lg);aspect-ratio:4/4.4;object-fit:cover;width:100%;box-shadow:var(--shadow-md)}
.hero-fig::after{content:"";position:absolute;inset:16px -16px -16px 16px;border:1.5px solid var(--accent);border-radius:var(--r-lg);z-index:-1}
.hero-badge{position:absolute;left:-22px;bottom:26px;background:var(--navy);color:var(--on-navy);padding:16px 20px;border-radius:var(--r);box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:14px}
.hero-badge b{font:600 32px/1 var(--font-display);font-variant-numeric:tabular-nums;color:var(--accent)}
.hero-badge span{font:500 10.5px/1.4 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--on-navy-muted)}
@media(max-width:1000px){
  .hero .wrap{grid-template-columns:1fr}
  .hero-fig{max-width:540px}
  .hero-fig::after{inset:10px -10px -10px 10px}
  .hero-badge{left:-6px}
}

/* ---------- proof band ---------- */
.proof{background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.proof .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.proof article{padding:30px clamp(18px,2.4vw,30px);border-left:1px solid var(--border)}
.proof article:first-child{border-left:0}
.proof .pi{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--gold-tint);color:var(--accent-deep);margin-bottom:16px}
.proof .pi svg{width:22px;height:22px}
.proof h3{font:600 17px/1.25 var(--font-display);margin-bottom:6px}
.proof p{font-size:13.5px;color:var(--muted)}
@media(max-width:760px){
  .proof .wrap{grid-template-columns:1fr 1fr}
  .proof article{border-top:1px solid var(--border)}
  .proof article:nth-child(-n+2){border-top:0}
  .proof article:nth-child(odd){border-left:0}
}

/* ---------- section heading row ---------- */
.head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:34px}
.head-row .sec-sub{margin-top:4px}

/* ---------- category cards ---------- */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:22px}
.cat{position:relative;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);display:flex;flex-direction:column;overflow:hidden;transition:transform .16s,border-color .16s,box-shadow .16s;box-shadow:var(--shadow-sm)}
.cat:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:var(--shadow-md)}
.cat .cat-media{position:relative;aspect-ratio:16/11;background:var(--surface);display:grid;place-items:center;padding:10px;border-bottom:1px solid var(--border)}
.cat .cat-media img{width:auto;max-height:100%;object-fit:contain;transition:transform .3s}
.cat:hover .cat-media img{transform:scale(1.05)}
.cat .mc{position:absolute;left:12px;top:12px;font:600 11px/1 var(--font-mono);letter-spacing:.08em;color:oklch(22% 0.05 262);background:var(--accent);padding:6px 9px;border-radius:999px}
.cat .pad{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1}
.cat .grp-tag{font:600 10px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-bottom:8px}
.cat h3{font:600 18px/1.24 var(--font-display);margin-bottom:7px}
.cat p{font-size:13.5px;color:var(--muted);flex:1}
.cat .cat-foot{display:flex;align-items:center;justify-content:space-between;margin-top:16px;gap:10px}
.cat .cat-foot .view{font:600 13px/1 var(--font-body);color:var(--accent-deep);display:inline-flex;align-items:center;gap:6px}
.cat .cat-foot .view svg{width:15px;height:15px;transition:transform .16s}
.cat:hover .cat-foot .view svg{transform:translateX(3px)}
.cat .enq{width:34px;height:34px;border-radius:50%;background:var(--wa);color:#fff;display:grid;place-items:center;flex:0 0 auto}
.cat .enq svg{width:18px;height:18px}

/* group section (categories page) */
.grp-block{margin-top:44px}
.grp-block:first-of-type{margin-top:34px}
.grp-block>h2{font:600 clamp(21px,2.6vw,28px)/1.15 var(--font-display);letter-spacing:-.015em;display:flex;align-items:center;gap:14px;margin-bottom:6px}
.grp-block>h2 .n{font:600 12px/1 var(--font-mono);color:oklch(22% 0.05 262);background:var(--accent);border-radius:999px;padding:6px 10px;letter-spacing:.06em}
.grp-block>.gsub{color:var(--muted);font-size:14.5px;margin:0 0 22px}

/* filter chips */
.chips{display:flex;gap:10px;flex-wrap:wrap;margin:26px 0 8px}
.chip{font:600 13px/1 var(--font-body);letter-spacing:.01em;padding:10px 16px;border:1px solid var(--border-2);border-radius:999px;background:var(--surface);cursor:pointer;color:var(--muted);transition:all .12s}
.chip:hover{border-color:var(--fg);color:var(--fg)}
.chip[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:var(--on-navy)}

/* ---------- directory ---------- */
.dir-tools{display:flex;gap:12px 16px;flex-wrap:wrap;align-items:center;margin:26px 0 6px}
.dir-search{margin-left:auto;position:relative}
.dir-search input{font:14px/1 var(--font-body);padding:11px 15px 11px 38px;border:1px solid var(--border-2);border-radius:999px;background:var(--surface);width:min(260px,60vw);outline:none}
.dir-search input:focus{border-color:var(--accent-deep)}
.dir-search svg{position:absolute;left:14px;top:50%;translate:0 -50%;width:15px;height:15px;color:var(--faint)}
.dir-list{margin-top:16px;border-top:1px solid var(--border)}
.dir-row{display:grid;grid-template-columns:56px minmax(0,1fr) minmax(0,1.3fr) 150px;gap:18px;align-items:center;padding:15px 6px;border-bottom:1px solid var(--border);transition:background .12s}
.dir-row:hover{background:var(--ivory)}
.dir-row .no{font:500 12px/1.4 var(--font-mono);color:var(--faint);letter-spacing:.06em}
.dir-row h4{font:600 15.5px/1.3 var(--font-body)}
.dir-row p{font-size:13.5px;color:var(--muted)}
.dir-row .grp{font:600 10.5px/1.5 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--faint);text-align:right}
.dir-row .go{display:inline-flex;align-items:center;gap:6px;font:600 13px/1 var(--font-body);color:var(--accent-deep);justify-self:end}
.dir-row .go svg{width:14px;height:14px}
.dir-empty{padding:34px 6px;color:var(--muted);font-size:14.5px;display:none}
.dir-count{font:500 12px/1 var(--font-mono);letter-spacing:.06em;color:var(--faint)}
@media(max-width:820px){
  .dir-row{grid-template-columns:40px 1fr auto;gap:6px 12px}
  .dir-row p{grid-column:2/-1}
  .dir-row .grp{display:none}
}

/* ---------- why (navy) ---------- */
.navy-sec{background:var(--navy);color:var(--on-navy)}
.navy-sec .eyebrow{color:var(--accent)}
.navy-sec h2.sec{color:var(--on-navy)}
.navy-sec .sec-sub{color:var(--on-navy-muted)}
.why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1px;background:oklch(100% 0 0/.13);border:1px solid oklch(100% 0 0/.13);border-radius:var(--r-lg);overflow:hidden;margin-top:38px}
.why-grid article{background:var(--navy-2);padding:32px 30px 36px}
.why-grid b.num{font:600 14px/1 var(--font-mono);color:var(--accent);letter-spacing:.08em}
.why-grid h3{font:600 22px/1.24 var(--font-display);margin:14px 0 10px}
.why-grid p{font-size:14.5px;color:var(--on-navy-muted)}

/* ---------- process ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:s}
.step{padding:28px 24px 30px;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);counter-increment:s;box-shadow:var(--shadow-sm)}
.step::before{content:"0" counter(s);display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--navy);color:var(--accent);font:600 17px/1 var(--font-display);margin-bottom:20px}
.step h3{font:600 19px/1.2 var(--font-display);margin-bottom:8px}
.step p{color:var(--muted);font-size:14px}
@media(max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.steps{grid-template-columns:1fr}}

/* ---------- CTA band ---------- */
.cta-band{background:var(--navy);color:var(--on-navy);border-radius:0;position:relative;overflow:hidden}
.cta-band::before{content:"";position:absolute;right:-80px;top:-80px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,oklch(72% 0.13 84/.25),transparent 68%)}
.cta-band .wrap{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;position:relative}
.cta-band h2{font:600 clamp(26px,3.4vw,42px)/1.1 var(--font-display);letter-spacing:-.02em;max-width:22ch}
.cta-band p{color:var(--on-navy-muted);margin-top:12px;max-width:46ch}
.cta-band .cta-actions{display:flex;gap:13px;flex-wrap:wrap}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(30px,5vw,64px)}
.c-lines{margin-top:26px;border-top:1px solid var(--border)}
.c-line{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 4px;border-bottom:1px solid var(--border)}
.c-line .cl{display:flex;align-items:center;gap:13px}
.c-line .ci{width:38px;height:38px;border-radius:50%;background:var(--gold-tint);color:var(--accent-deep);display:grid;place-items:center;flex:0 0 auto}
.c-line .ci svg{width:18px;height:18px}
.c-line small{display:block;font-size:12px;color:var(--faint);font-family:var(--font-mono);letter-spacing:.04em}
.c-line b{font:600 15.5px/1.3 var(--font-body)}
.c-line b.addr{display:block;max-width:42ch;font-size:14.5px;line-height:1.35}
a.c-line:hover b{color:var(--accent-deep)}
form.enquiry{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:clamp(22px,3vw,34px);box-shadow:var(--shadow-sm)}
form.enquiry h3{font:600 22px/1.2 var(--font-display);margin-bottom:4px}
form.enquiry>p{font-size:13.5px;color:var(--muted);margin-bottom:22px}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.f-field{margin-bottom:15px}
.f-field label{display:block;font:600 11px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.f-field input,.f-field select,.f-field textarea{width:100%;font:14.5px/1.4 var(--font-body);padding:12px 13px;border:1px solid var(--border-2);border-radius:var(--r);background:var(--bg);outline:none;transition:border-color .14s}
.f-field :is(input,select,textarea):focus{border-color:var(--accent-deep)}
.f-field textarea{resize:vertical;min-height:96px}
.f-field .err{display:none;font-size:12px;color:var(--danger);margin-top:6px}
.f-field.bad :is(input,select){border-color:var(--danger)}
.f-field.bad .err{display:block}
form.enquiry .note{font-size:12px;color:var(--faint);text-align:center;margin-top:12px}
@media(max-width:860px){.contact-grid{grid-template-columns:1fr}.f-row{grid-template-columns:1fr}}

/* ---------- inner page hero band ---------- */
.page-hero{background:var(--navy);color:var(--on-navy);position:relative;overflow:hidden;padding:clamp(40px,6vw,74px) 0}
.page-hero::before{content:"";position:absolute;right:-60px;bottom:-120px;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,oklch(72% 0.13 84/.22),transparent 66%)}
.page-hero .wrap{position:relative}
.page-hero .eyebrow{color:var(--accent)}
.page-hero h1{font:600 clamp(32px,4.6vw,58px)/1.08 var(--font-display);letter-spacing:-.02em;margin:16px 0 14px;text-wrap:balance}
.page-hero p{color:var(--on-navy-muted);max-width:62ch;font-size:clamp(15px,1.7vw,18px)}
.crumb{display:flex;gap:8px;align-items:center;font:500 12.5px/1 var(--font-mono);letter-spacing:.03em;color:var(--on-navy-muted);flex-wrap:wrap}
.crumb a:hover{color:var(--on-navy)}
.crumb .sep{opacity:.5}

/* ---------- detail page header ---------- */
.detail-hero .wrap{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(28px,5vw,60px);align-items:center}
.detail-hero .mc-tag{display:inline-flex;align-items:center;gap:8px;font:600 12px/1 var(--font-mono);letter-spacing:.1em;color:var(--accent);border:1px solid oklch(72% 0.13 84/.4);border-radius:999px;padding:7px 12px;margin:14px 0 4px}
.detail-hero .d-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.detail-fig{background:var(--surface);border-radius:var(--r-lg);padding:22px;display:grid;place-items:center;aspect-ratio:4/3;box-shadow:var(--shadow-lg);overflow:hidden}
.detail-fig img{max-height:100%;width:auto;object-fit:contain}
.detail-fig.has-photo{padding:0;overflow:hidden}
.detail-fig.has-photo img{width:100%;height:100%;max-height:none;object-fit:cover;filter:none}
@media(max-width:920px){.detail-hero .wrap{grid-template-columns:1fr}.detail-fig{max-width:460px;aspect-ratio:16/10}}

/* detail body layout */
.detail-body{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(30px,5vw,56px);align-items:start}
.detail-main>*+*{margin-top:clamp(40px,5vw,60px)}
.detail-main h2{font:600 clamp(23px,2.8vw,32px)/1.15 var(--font-display);letter-spacing:-.015em;margin-bottom:10px}
.detail-main .lead{font-size:clamp(16px,1.8vw,18.5px);color:var(--muted)}
@media(max-width:940px){.detail-body{grid-template-columns:1fr}}

/* subcategory checklist */
.subs{display:grid;grid-template-columns:1fr 1fr;gap:12px 26px;margin-top:22px}
.subs li{list-style:none;display:flex;gap:12px;align-items:flex-start;padding:13px 4px;border-bottom:1px solid var(--border);font-size:14.5px}
.subs li .tick{flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:var(--gold-tint);color:var(--accent-deep);display:grid;place-items:center;margin-top:1px}
.subs li .tick svg{width:13px;height:13px}
@media(max-width:640px){.subs{grid-template-columns:1fr}}

/* audience pills */
.pills{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.pill{display:inline-flex;align-items:center;gap:9px;padding:10px 16px;border:1px solid var(--border-2);border-radius:999px;background:var(--surface);font:600 13.5px/1 var(--font-body);color:var(--fg)}
.pill .dot{width:7px;height:7px;border-radius:50%;background:var(--accent)}

/* faq */
.faq{border-top:1px solid var(--border);margin-top:22px}
.faq details{border-bottom:1px solid var(--border)}
.faq summary{cursor:pointer;list-style:none;padding:18px 4px;font:600 16px/1.4 var(--font-body);display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 24px/1 var(--font-body);color:var(--accent-deep);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{padding:0 4px 20px;color:var(--muted);font-size:14.5px;max-width:70ch}

/* sidebar quote card */
.side{position:sticky;top:92px;display:grid;gap:20px}
.quote-card{background:var(--navy);color:var(--on-navy);border-radius:var(--r-lg);padding:26px 24px 28px;box-shadow:var(--shadow-md)}
.quote-card .eyebrow{color:var(--accent)}
.quote-card h3{font:600 21px/1.2 var(--font-display);margin:12px 0 8px}
.quote-card p{color:var(--on-navy-muted);font-size:14px;margin-bottom:20px}
.quote-card .btn{width:100%;margin-bottom:10px}
.quote-card .qs{font:500 12px/1.5 var(--font-mono);color:var(--on-navy-muted);letter-spacing:.03em;text-align:center;margin-top:6px}
.fact-card{border:1px solid var(--border);border-radius:var(--r-lg);padding:22px 22px 8px;background:var(--surface)}
.fact-card h4{font:600 12px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:6px}
.fact-card .fr{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--border);font-size:14px}
.fact-card .fr:last-child{border-bottom:0}
.fact-card .fr span{color:var(--muted)}
.fact-card .fr b{font-weight:600;text-align:right}

/* related cards */
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:24px}
.rel{display:flex;gap:14px;align-items:center;padding:16px;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);transition:border-color .14s,transform .14s}
.rel:hover{border-color:var(--accent);transform:translateY(-3px)}
.rel img{width:56px;height:56px;object-fit:contain;flex:0 0 auto;border-radius:8px}
.rel .rt{font:600 15px/1.25 var(--font-display)}
.rel .rc{font:600 10.5px/1 var(--font-mono);color:var(--faint);letter-spacing:.08em}
@media(max-width:820px){.rel-grid{grid-template-columns:1fr}}

/* ---------- gallery ---------- */
.gal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:18px;margin-top:34px}
.gal{position:relative;border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;background:var(--surface);aspect-ratio:1;display:grid;place-items:center;padding:14px;transition:transform .16s,border-color .16s,box-shadow .16s}
.gal:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:var(--shadow-md)}
.gal img{max-height:100%;width:auto;object-fit:contain}
.gal .cap{position:absolute;left:0;right:0;bottom:0;padding:10px 12px;background:linear-gradient(0deg,oklch(100% 0 0/.94),transparent);font:600 12px/1.3 var(--font-body);color:var(--fg)}
.gal.photo{padding:0;background:var(--ivory)}
.gal.photo img{width:100%;height:100%;max-height:none;object-fit:cover;filter:none}
.gal.photo .cap{padding:26px 12px 10px;background:linear-gradient(0deg,oklch(0% 0 0/.85),oklch(0% 0 0/.5) 45%,transparent);color:#fff;text-shadow:0 1px 3px oklch(0% 0 0/.55)}

/* ---------- products ---------- */
.prod{display:grid;grid-template-columns:200px minmax(0,1fr);gap:26px;align-items:center;padding:26px 0;border-top:1px solid var(--border)}
.prod:last-child{border-bottom:1px solid var(--border)}
.prod .pmedia{aspect-ratio:1;border-radius:var(--r-lg);background:var(--surface);display:grid;place-items:center;padding:16px;border:1px solid var(--border)}
.prod .pmedia img{max-height:100%;width:auto;object-fit:contain}
.prod h3{font:600 clamp(20px,2.4vw,26px)/1.16 var(--font-display);letter-spacing:-.01em}
.prod .mc{font:600 11px/1 var(--font-mono);color:var(--faint);letter-spacing:.08em;margin-bottom:8px;display:block}
.prod p{color:var(--muted);margin:8px 0 14px;max-width:64ch}
.prod .ptags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.prod .ptags span{font:500 12px/1 var(--font-body);color:var(--muted);background:var(--ivory);border:1px solid var(--border);padding:7px 11px;border-radius:999px}
.prod .pacts{display:flex;gap:12px;flex-wrap:wrap}
@media(max-width:680px){.prod{grid-template-columns:1fr;gap:18px}.prod .pmedia{max-width:180px}}

/* ---------- feature/info tiles (about, our-work) ---------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px;margin-top:34px}
.tile{border:1px solid var(--border);border-radius:var(--r-lg);padding:26px 24px 28px;background:var(--surface);box-shadow:var(--shadow-sm)}
.tile .ti{width:44px;height:44px;border-radius:12px;background:var(--gold-tint);color:var(--accent-deep);display:grid;place-items:center;margin-bottom:16px}
.tile .ti svg{width:22px;height:22px}
.tile h3{font:600 19px/1.22 var(--font-display);margin-bottom:8px}
.tile p{color:var(--muted);font-size:14px}
.tile .big{font:600 clamp(30px,4vw,44px)/1 var(--font-display);color:var(--accent-deep);font-variant-numeric:tabular-nums;margin-bottom:6px}

/* sector pills big */
.sectors{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;margin-top:30px}
.sector{display:flex;align-items:center;gap:12px;padding:16px 18px;border:1px solid var(--border);border-radius:var(--r);background:var(--surface);font:600 14.5px/1.2 var(--font-body)}
.sector .n{width:30px;height:30px;border-radius:50%;background:var(--navy);color:var(--accent);display:grid;place-items:center;font:600 12px/1 var(--font-mono);flex:0 0 auto}

/* split media block */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,60px);align-items:center}
.split img{border-radius:var(--r-lg);width:100%;aspect-ratio:4/3;object-fit:cover;box-shadow:var(--shadow-md)}
.split .list{margin-top:20px;display:grid;gap:12px}
.split .list li{list-style:none;display:flex;gap:12px;align-items:flex-start;font-size:15px}
.split .list .tick{flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:var(--gold-tint);color:var(--accent-deep);display:grid;place-items:center;margin-top:2px}
.split .list .tick svg{width:13px;height:13px}
@media(max-width:820px){.split{grid-template-columns:1fr}}

/* ---------- footer ---------- */
footer.site{background:var(--navy);color:var(--on-navy-muted)}
footer.site .fmain{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:36px;padding:clamp(46px,6vw,68px) 0 40px}
footer.site img.flogo{height:58px;width:auto;max-width:min(320px,100%);margin-bottom:18px}
footer.site .fabout{font-size:14px;max-width:36ch;color:var(--on-navy-muted)}
footer.site .fsoc{display:flex;gap:10px;margin-top:18px}
footer.site .fsoc a{width:38px;height:38px;border-radius:50%;border:1px solid oklch(100% 0 0/.2);display:grid;place-items:center;color:var(--on-navy)}
footer.site .fsoc a:hover{background:oklch(100% 0 0/.1)}
footer.site .fsoc svg{width:17px;height:17px}
footer.site h5{font:600 12px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--on-navy);margin-bottom:16px}
footer.site .fcol a,footer.site .fcol div{display:block;font-size:13.5px;padding:6px 0;color:var(--on-navy-muted)}
footer.site .fcol a:hover{color:var(--on-navy)}
footer.site .fbar{border-top:1px solid oklch(100% 0 0/.13);padding:20px 0;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font:500 12px/1.6 var(--font-mono);letter-spacing:.02em;color:var(--on-navy-muted)}
footer.site b{color:var(--on-navy);font:600 15px/1 var(--font-display)}
@media(max-width:900px){footer.site .fmain{grid-template-columns:1fr 1fr}}
@media(max-width:560px){footer.site .fmain{grid-template-columns:1fr}}

/* ---------- floating WhatsApp FAB ---------- */
.wa-fab{position:fixed;right:20px;bottom:20px;z-index:55;display:inline-flex;align-items:center;gap:10px;background:var(--wa);color:#fff;padding:14px 18px;border-radius:999px;box-shadow:0 14px 30px rgba(37,211,102,.4);font:600 14.5px/1 var(--font-body);transition:transform .15s,background .15s}
.wa-fab:hover{transform:translateY(-2px);background:var(--wa-deep)}
.wa-fab svg{width:22px;height:22px}
@media(max-width:560px){.wa-fab .lbl{display:none}.wa-fab{padding:15px;right:16px;bottom:16px}}

/* ---------- misc ---------- */
.mono-note{font:500 12.5px/1.6 var(--font-mono);letter-spacing:.02em;color:var(--faint)}
.pan-band{background:var(--ivory);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}

/* =====================================================================
   2026 redesign layer — premium static-site UI + motion system
   ===================================================================== */
:root{
  --bg:oklch(97.8% 0.01 92);
  --surface:oklch(100% 0 0);
  --ivory:oklch(96.4% 0.018 94);
  --fg:oklch(22% 0.055 246);
  --muted:oklch(45% 0.035 238);
  --faint:oklch(60% 0.027 238);
  --border:oklch(88% 0.012 90);
  --border-2:oklch(82% 0.016 90);
  --accent:oklch(76% 0.14 82);
  --accent-deep:oklch(55% 0.12 73);
  --gold-tint:oklch(94% 0.035 91);
  --navy:oklch(20% 0.052 246);
  --navy-2:oklch(26% 0.055 246);
  --navy-3:oklch(35% 0.052 246);
  --emerald:oklch(58% 0.13 158);
  --terracotta:oklch(59% 0.15 38);
  --teal:oklch(61% 0.1 194);
  --on-navy:oklch(98% 0.008 92);
  --on-navy-muted:oklch(82% 0.025 235);
  --r:7px;
  --r-lg:8px;
  --shadow-sm:0 1px 1px oklch(18% 0.045 246/.05),0 12px 26px oklch(18% 0.045 246/.07);
  --shadow-md:0 20px 46px oklch(18% 0.045 246/.14);
  --shadow-lg:0 34px 80px oklch(18% 0.045 246/.22);
  --wrap:1240px;
}

*{letter-spacing:0}
body{
  background:
    linear-gradient(90deg, oklch(20% 0.052 246/.035) 1px, transparent 1px) 0 0/72px 72px,
    linear-gradient(180deg, oklch(20% 0.052 246/.03) 1px, transparent 1px) 0 0/72px 72px,
    linear-gradient(180deg, oklch(99% 0.008 92), var(--bg) 34rem);
}
section{position:relative}
h1,h2,h3,h4,h5,.sec{letter-spacing:0!important}

.btn{
  min-height:44px;
  border-radius:8px;
  box-shadow:none;
  transform:translateZ(0);
  transition:transform .22s cubic-bezier(.2,.8,.2,1),background .2s,border-color .2s,color .2s,box-shadow .2s;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 30px oklch(22% 0.055 246/.12)}
.btn:active{transform:translateY(0)}
.btn-gold{background:linear-gradient(135deg,var(--accent),oklch(82% 0.11 97));border-color:oklch(70% 0.12 82/.4)}
.btn-ghost{background:oklch(100% 0 0/.72);backdrop-filter:blur(10px)}
.btn-ghost:hover{background:var(--surface);border-color:var(--accent-deep);color:var(--accent-deep)}
.btn-wa{background:linear-gradient(135deg,var(--wa),var(--wa-deep));box-shadow:0 14px 32px rgba(37,211,102,.25)}

.topbar{
  background:linear-gradient(90deg,var(--navy),oklch(26% 0.07 220),var(--navy));
  border-bottom:1px solid oklch(100% 0 0/.1);
}
.topbar .wrap{min-height:38px}
.topbar a,.topbar .tag{letter-spacing:0}

nav.main{
  top:0;
  background:oklch(100% 0 0/.78);
  box-shadow:0 10px 32px oklch(18% 0.05 246/.06);
  transition:box-shadow .2s,background .2s,border-color .2s;
}
body.scrolled nav.main{
  background:oklch(100% 0 0/.92);
  box-shadow:0 18px 40px oklch(18% 0.05 246/.12);
}
nav.main .wrap{min-height:76px}
.brand img{height:48px;filter:drop-shadow(0 8px 12px oklch(22% 0.055 246/.12))}
.navlinks{
  padding:5px;
  border:1px solid var(--border);
  background:oklch(100% 0 0/.66);
  border-radius:999px;
  box-shadow:inset 0 1px 0 oklch(100% 0 0/.8);
}
.navlinks a{border-radius:999px;padding:10px 14px;color:oklch(38% 0.035 238)}
.navlinks a:hover,.navlinks a.active{background:var(--navy);color:var(--on-navy);box-shadow:none}
.navlinks a.active{box-shadow:0 10px 22px oklch(20% 0.052 246/.17)}

.hero{
  padding:clamp(40px,5.6vw,78px) 0 0;
  background:
    linear-gradient(135deg,oklch(100% 0 0/.86),oklch(96% 0.025 90/.78)),
    linear-gradient(90deg,oklch(74% 0.12 82/.14),transparent 42%,oklch(61% 0.1 194/.12));
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:16px;
  background:linear-gradient(90deg,var(--accent),var(--emerald),var(--teal),var(--terracotta));
}
.hero .wrap{grid-template-columns:minmax(0,1.05fr) minmax(420px,.95fr);align-items:center}
.hero-copy{position:relative;z-index:1}
.hero h1{
  font-size:clamp(42px,5.1vw,70px);
  line-height:.98;
  max-width:13.4ch;
  margin:18px 0 22px;
}
.hero h1 em{
  color:transparent;
  background:linear-gradient(90deg,var(--accent-deep),var(--terracotta));
  -webkit-background-clip:text;
  background-clip:text;
}
.hero p.lede{font-size:clamp(16.5px,1.7vw,20px);max-width:62ch;color:oklch(39% 0.04 238)}
.hero-meta{
  width:min(100%,720px);
  margin-top:30px;
  border:1px solid var(--border);
  background:oklch(100% 0 0/.76);
  backdrop-filter:blur(14px);
  border-radius:8px;
  box-shadow:var(--shadow-sm);
}
.hero-meta div{padding:18px 22px;margin-right:0}
.hero-meta div+div{border-left:1px solid var(--border);padding-left:22px}
.hero-meta b{font-size:clamp(23px,2.8vw,34px)}
.hero-meta span{display:block;line-height:1.35}
.hero-fig{
  isolation:isolate;
  transform-style:preserve-3d;
  transition:transform .28s ease;
}
.hero-fig>img{
  aspect-ratio:4/4.3;
  border-radius:8px;
  border:1px solid oklch(100% 0 0/.6);
  box-shadow:0 34px 86px oklch(18% 0.05 246/.22);
}
.hero-fig::before{
  content:"";
  position:absolute;
  inset:-24px 24px 54px -24px;
  z-index:-1;
  border:1px solid oklch(55% 0.12 73/.42);
  border-radius:8px;
  background:repeating-linear-gradient(135deg,oklch(55% 0.12 73/.12) 0 1px,transparent 1px 12px);
}
.hero-fig::after{display:none}
.hero-badge{
  left:auto;
  right:-10px;
  bottom:24px;
  border:1px solid oklch(100% 0 0/.12);
  background:oklch(18% 0.052 246/.94);
  backdrop-filter:blur(16px);
}
.hero-panel{
  position:absolute;
  left:-18px;
  top:28px;
  width:min(310px,72%);
  padding:18px 18px 16px;
  color:var(--fg);
  background:oklch(100% 0 0/.88);
  border:1px solid oklch(100% 0 0/.8);
  border-radius:8px;
  box-shadow:var(--shadow-md);
  backdrop-filter:blur(18px);
}
.hero-panel .hp-label{
  display:inline-flex;
  margin-bottom:8px;
  padding:5px 9px;
  border-radius:999px;
  background:oklch(58% 0.13 158/.12);
  color:var(--emerald);
  font:700 11px/1 var(--font-mono);
}
.hero-panel strong{display:block;font:650 19px/1.16 var(--font-display)}
.hero-panel small{display:block;margin-top:8px;color:var(--muted);line-height:1.45}
.hero-strip{
  margin-top:clamp(28px,4.4vw,48px);
  overflow:hidden;
  border-top:1px solid var(--border);
  background:var(--navy);
  color:var(--on-navy);
}
.hero-strip div{
  display:flex;
  gap:34px;
  width:max-content;
  padding:16px 0;
  animation:marquee 28s linear infinite;
}
.hero-strip span{
  position:relative;
  font:650 13px/1 var(--font-mono);
  text-transform:uppercase;
  white-space:nowrap;
}
.hero-strip span::after{
  content:"";
  position:absolute;
  right:-20px;
  top:50%;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--accent);
  transform:translateY(-50%);
}
@keyframes marquee{from{transform:translateX(100vw)}to{transform:translateX(-100%)}}

.proof{background:var(--surface)}
.proof .wrap{
  transform:translateY(-22px);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:8px;
  box-shadow:var(--shadow-md);
  overflow:hidden;
}
.proof article{transition:background .2s}
.proof article:hover{background:var(--ivory)}
.proof .pi,.tile .ti,.c-line .ci,.split .list .tick,.subs li .tick{
  border-radius:8px;
  background:linear-gradient(135deg,var(--gold-tint),oklch(96% 0.025 150));
}

.head-row{align-items:center}
.cat-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px}
.cat,.tile,.step,.quote-card,.fact-card,.rel,.prod .pmedia,form.enquiry,.gal{
  border-radius:8px;
  border-color:oklch(84% 0.014 90);
}
.cat{
  overflow:hidden;
  box-shadow:0 14px 38px oklch(18% 0.05 246/.08);
}
.cat::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:4px;
  background:linear-gradient(90deg,var(--accent),var(--emerald),var(--terracotta));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .28s ease;
  z-index:1;
}
.cat:hover::before{transform:scaleX(1)}
.cat:hover{transform:translateY(-7px);box-shadow:0 26px 58px oklch(18% 0.05 246/.16)}
.cat .cat-media{background:linear-gradient(160deg,oklch(99% 0.005 90),oklch(94% 0.028 92));padding:20px}
.cat .cat-media img{filter:drop-shadow(0 16px 18px oklch(24% 0.04 246/.16))}
.cat .mc{background:var(--navy);color:var(--accent)}
.cat .pad{padding:20px 20px 22px}
.cat h3{font-size:20px}
.cat .cat-foot .view{color:var(--accent-deep)}
.cat .enq{border-radius:8px}

.pan-band{
  background:
    linear-gradient(135deg,oklch(100% 0 0/.42),transparent),
    var(--ivory);
}
.dir-list{
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
}
.dir-row{
  grid-template-columns:72px minmax(0,1fr) minmax(0,1.45fr) 130px;
  padding:18px 18px;
}
.dir-row:hover{background:oklch(96.5% 0.022 92)}
.dir-search input,.chip{border-radius:8px}
.chip[aria-pressed="true"]{background:var(--navy);box-shadow:0 12px 22px oklch(20% 0.05 246/.14)}

.navy-sec,.cta-band,footer.site{
  background:
    linear-gradient(135deg,oklch(100% 0 0/.06),transparent 34%),
    linear-gradient(90deg,var(--navy),oklch(23% 0.06 222));
}
.why-grid{
  border-radius:8px;
  box-shadow:var(--shadow-lg);
}
.why-grid article{background:oklch(100% 0 0/.065);backdrop-filter:blur(10px)}
.why-grid article:hover{background:oklch(100% 0 0/.1)}
.steps{gap:22px}
.step{
  position:relative;
  overflow:hidden;
  transition:transform .2s,box-shadow .2s,border-color .2s;
}
.step::after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:3px;
  background:linear-gradient(90deg,var(--accent),var(--teal));
}
.step:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:var(--accent)}
.step::before{border-radius:8px;background:linear-gradient(135deg,var(--navy),var(--navy-3))}

.cta-band::before,.page-hero::before{display:none}
.cta-band{padding:clamp(58px,8vw,96px) 0}
.cta-kicker{
  display:inline-flex;
  margin-bottom:12px;
  padding:6px 10px;
  border:1px solid oklch(100% 0 0/.18);
  border-radius:999px;
  color:var(--accent);
  font:700 12px/1 var(--font-mono);
  text-transform:uppercase;
}

.contact-grid{align-items:start}
form.enquiry{
  background:oklch(100% 0 0/.82);
  backdrop-filter:blur(14px);
  box-shadow:var(--shadow-md);
}
.f-field input,.f-field select,.f-field textarea{
  border-radius:8px;
  background:oklch(99% 0.006 92);
  transition:border-color .16s,box-shadow .16s,background .16s;
}
.f-field :is(input,select,textarea):focus{
  background:var(--surface);
  box-shadow:0 0 0 4px oklch(76% 0.14 82/.14);
}
.c-lines{
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
}
.c-line{padding:17px 18px}

.page-hero{
  padding:clamp(54px,7vw,96px) 0;
  background:
    linear-gradient(135deg,oklch(18% 0.052 246),oklch(30% 0.06 218)),
    var(--navy);
}
.page-hero .wrap{
  display:grid;
  grid-template-columns:minmax(0,1fr) 280px;
  gap:32px;
  align-items:end;
}
.page-copy{max-width:780px}
.page-hero h1{font-size:clamp(38px,5.4vw,70px);line-height:1}
.page-signal{
  border:1px solid oklch(100% 0 0/.16);
  border-radius:8px;
  padding:22px;
  background:oklch(100% 0 0/.08);
  box-shadow:inset 0 1px 0 oklch(100% 0 0/.14);
}
.page-signal span{display:block;font:700 58px/1 var(--font-display);color:var(--accent)}
.page-signal b{display:block;margin-top:4px;color:var(--on-navy)}
.page-signal small{display:block;margin-top:8px;color:var(--on-navy-muted);line-height:1.45}
.detail-hero .wrap{grid-template-columns:minmax(0,1.05fr) minmax(360px,.8fr)}
.detail-hero .mc-tag{border-radius:999px;background:oklch(100% 0 0/.08)}
.detail-fig{
  border-radius:8px;
  box-shadow:var(--shadow-lg);
  border:1px solid oklch(100% 0 0/.18);
}
.detail-fig.has-photo img{transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.detail-fig.has-photo:hover img{transform:scale(1.04)}
.detail-main>div{
  scroll-margin-top:110px;
}
.subs li{
  background:var(--surface);
  padding:15px;
  border:1px solid var(--border);
  border-radius:8px;
  transition:transform .16s,border-color .16s,box-shadow .16s;
}
.subs li:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:var(--shadow-sm)}
.pills .pill,.sector,.prod .ptags span{border-radius:8px}
.side{top:102px}
.quote-card{
  background:linear-gradient(145deg,var(--navy),oklch(29% 0.06 220));
}
.fact-card{box-shadow:var(--shadow-sm)}
.rel:hover,.gal:hover,.prod:hover .pmedia{box-shadow:var(--shadow-md)}

.tiles{gap:22px}
.tile,.sector,.prod{
  transition:transform .18s,box-shadow .18s,border-color .18s,background .18s;
}
.tile:hover,.sector:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--accent)}
.tile .big{color:var(--accent-deep)}
.split img{border-radius:8px}

footer.site{
  position:relative;
  overflow:hidden;
}
footer.site::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:4px;
  background:linear-gradient(90deg,var(--accent),var(--emerald),var(--teal),var(--terracotta));
}
.wa-fab{
  border-radius:8px;
  box-shadow:0 20px 44px rgba(18,140,74,.35);
}

.reveal{
  opacity:0;
  transform:translateY(26px);
}
.reveal.in{
  opacity:1;
  transform:translateY(0);
  transition:opacity .68s ease,transform .68s cubic-bezier(.18,.84,.26,1);
}
.cat.reveal,.tile.reveal,.step.reveal,.gal.reveal,.prod.reveal,.dir-row.reveal{transition-delay:var(--delay,0ms)}

@media(max-width:1080px){
  .hero .wrap{grid-template-columns:1fr}
  .hero h1{max-width:13ch}
  .hero-fig{max-width:620px}
  .page-hero .wrap{grid-template-columns:1fr}
  .page-signal{max-width:340px}
}
@media(max-width:760px){
  section{padding:clamp(46px,12vw,76px) 0}
  nav.main .wrap{min-height:68px}
  .brand img{height:42px}
  .hero{padding-top:42px}
  .hero h1{font-size:clamp(38px,12vw,56px);max-width:12ch}
  .hero-cta .btn{width:100%;white-space:normal}
  .hero-meta{display:grid;grid-template-columns:1fr}
  .hero-meta div+div{border-left:0;border-top:1px solid var(--border);padding-left:22px}
  .hero-panel{position:relative;left:auto;top:auto;width:auto;margin:-26px 16px 0}
  .hero-badge{right:12px;bottom:76px}
  .proof .wrap{transform:none;border-radius:0;border-left:0;border-right:0}
  .proof article{padding:24px 18px}
  .cat-grid{grid-template-columns:1fr}
  .dir-tools{display:grid}
  .dir-search{margin-left:0}
  .dir-search input{width:100%}
  .dir-row{grid-template-columns:1fr;gap:7px;padding:18px}
  .dir-row .no,.dir-row .go{justify-self:start}
  .page-signal{display:none}
  .detail-hero .wrap{grid-template-columns:1fr}
  .detail-fig{max-width:100%}
  .cta-band .wrap,.head-row{align-items:flex-start}
  footer.site .fbar{display:grid}
}
@media(max-width:520px){
  .proof .wrap{grid-template-columns:1fr}
  .proof article{border-left:0!important}
  .hero-strip div{animation-duration:20s}
  .hero-badge{position:relative;right:auto;bottom:auto;left:auto;margin:-18px 16px 0;justify-content:center}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
}

/* =====================================================================
   Modern rebuild layer — command-center UI, July 2026
   ===================================================================== */
:root{
  --bg:#f6f7f3;
  --surface:#ffffff;
  --ivory:#f1f4ed;
  --fg:#101820;
  --muted:#51606c;
  --faint:#7a8790;
  --border:#dce2dc;
  --border-2:#cbd4ce;
  --accent:#f2b84b;
  --accent-deep:#b97412;
  --gold-tint:#fff5dd;
  --navy:#111820;
  --navy-2:#17232c;
  --navy-3:#243744;
  --emerald:#10b981;
  --terracotta:#e15f3f;
  --teal:#11a8bd;
  --on-navy:#f8faf7;
  --on-navy-muted:#b7c6cd;
  --wa:#22c55e;
  --wa-deep:#078b46;
  --font-display:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --font-body:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --font-mono:"SF Mono",ui-monospace,Menlo,Consolas,monospace;
  --r:8px;
  --r-lg:8px;
  --shadow-sm:0 1px 2px rgba(16,24,32,.06),0 14px 34px rgba(16,24,32,.08);
  --shadow-md:0 24px 62px rgba(16,24,32,.14);
  --shadow-lg:0 38px 90px rgba(16,24,32,.22);
}

body{
  color:var(--fg);
  font-size:16px;
  background:
    radial-gradient(circle at 12% 18%,rgba(17,168,189,.12),transparent 25rem),
    radial-gradient(circle at 85% 12%,rgba(242,184,75,.18),transparent 24rem),
    linear-gradient(90deg,rgba(16,24,32,.04) 1px,transparent 1px) 0 0/88px 88px,
    linear-gradient(180deg,rgba(16,24,32,.035) 1px,transparent 1px) 0 0/88px 88px,
    var(--bg);
}
.wrap{max-width:1280px}
.eyebrow{
  color:var(--accent-deep);
  font-weight:800;
  letter-spacing:.12em;
}
.eyebrow::before{height:1px;background:linear-gradient(90deg,var(--accent),var(--teal))}
h2.sec{
  font-weight:850;
  font-size:clamp(32px,4vw,56px);
  line-height:.95;
}
.sec-sub{font-size:16px;color:var(--muted)}

.topbar{
  background:#08131a;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.topbar .wrap{min-height:36px}
.topbar a,.topbar .tag{
  font-size:12px;
  color:#d9e5e9;
}
nav.main{
  background:rgba(246,247,243,.8);
  border-bottom:1px solid rgba(16,24,32,.08);
  box-shadow:none;
}
body.scrolled nav.main{
  background:rgba(255,255,255,.88);
  box-shadow:0 16px 42px rgba(16,24,32,.12);
}
nav.main .wrap{min-height:72px}
.brand img{height:42px;filter:none}
.navlinks{
  gap:3px;
  padding:4px;
  border-color:rgba(16,24,32,.1);
  background:rgba(255,255,255,.7);
  box-shadow:0 10px 34px rgba(16,24,32,.06);
}
.navlinks a{
  padding:10px 14px;
  color:#263743;
  font-size:13px;
  font-weight:750;
}
.navlinks a:hover,.navlinks a.active{
  background:#101820;
  color:#fff;
}
.nav-cta{
  background:#101820;
  color:#fff;
  border-color:#101820;
}
.nav-cta:hover{background:#2b3944}
.hamburger{border-radius:8px}

.hero{
  min-height:calc(100vh - 108px);
  padding:clamp(44px,6vw,80px) 0 0;
  background:
    linear-gradient(120deg,rgba(255,255,255,.82),rgba(255,255,255,.34)),
    radial-gradient(circle at 80% 18%,rgba(17,168,189,.12),transparent 26rem),
    radial-gradient(circle at 55% 92%,rgba(16,185,129,.18),transparent 28rem);
}
.hero::before{
  height:8px;
  background:linear-gradient(90deg,var(--accent),var(--emerald),var(--teal),var(--terracotta));
}
.hero .wrap{
  grid-template-columns:minmax(0,1fr) minmax(460px,.92fr);
  gap:clamp(40px,7vw,88px);
}
.hero h1{
  max-width:12.8ch;
  margin:16px 0 22px;
  font-weight:900;
  font-size:clamp(48px,6.2vw,86px);
  line-height:.9;
  letter-spacing:-.04em!important;
}
.hero h1 em{font-style:normal}
.hero p.lede{
  max-width:58ch;
  color:#41505c;
  font-size:clamp(17px,1.6vw,20px);
  line-height:1.65;
}
.btn{
  min-height:46px;
  border-radius:8px;
  font-weight:800;
}
.btn-wa{
  background:linear-gradient(135deg,#22c55e,#059669);
  box-shadow:0 18px 34px rgba(34,197,94,.24);
}
.btn-ghost{
  background:rgba(255,255,255,.7);
  border-color:rgba(16,24,32,.18);
}
.btn-gold{
  background:linear-gradient(135deg,#f7c64f,#e7a82e);
  color:#101820;
}
.hero-meta{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  margin-top:34px;
  background:rgba(255,255,255,.76);
  border:1px solid rgba(16,24,32,.12);
  box-shadow:0 22px 54px rgba(16,24,32,.1);
}
.hero-meta div{padding:18px 20px}
.hero-meta b{
  font-family:var(--font-display);
  font-weight:900;
  font-size:32px;
}
.hero-meta span{color:#5a6872}
.hero-fig{
  min-height:560px;
  display:grid;
  align-items:center;
}
.hero-fig::before{
  inset:24px -8px 76px 38px;
  border-color:rgba(16,24,32,.12);
  background:
    linear-gradient(135deg,rgba(255,255,255,.5),rgba(255,255,255,.06)),
    repeating-linear-gradient(135deg,rgba(242,184,75,.18) 0 1px,transparent 1px 14px);
  box-shadow:0 28px 72px rgba(16,24,32,.08);
}
.hero-fig>img{
  width:100%;
  aspect-ratio:4/3.6;
  border:1px solid rgba(255,255,255,.74);
  box-shadow:0 36px 90px rgba(16,24,32,.24);
}
.hero-panel{
  left:-28px;
  top:70px;
  width:min(360px,74%);
  padding:20px;
  border:1px solid rgba(16,24,32,.08);
  background:rgba(255,255,255,.92);
}
.hero-panel .hp-label{
  color:#047857;
  background:#dff8ea;
  font-weight:900;
}
.hero-panel strong{
  font-family:var(--font-display);
  font-weight:900;
  font-size:21px;
  line-height:1.05;
}
.hp-flow{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:7px;
  margin-top:16px;
}
.hp-flow i{
  display:block;
  height:6px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--accent),var(--emerald));
  animation:flowPulse 1.8s ease-in-out infinite;
}
.hp-flow i:nth-child(2){animation-delay:.15s;background:linear-gradient(90deg,var(--emerald),var(--teal))}
.hp-flow i:nth-child(3){animation-delay:.3s;background:linear-gradient(90deg,var(--teal),var(--terracotta))}
.hp-flow i:nth-child(4){animation-delay:.45s;background:linear-gradient(90deg,var(--terracotta),var(--accent))}
@keyframes flowPulse{0%,100%{opacity:.35;transform:scaleX(.72)}50%{opacity:1;transform:scaleX(1)}}
.hero-badge{
  right:-14px;
  bottom:62px;
  background:#101820;
  border-radius:8px;
}
.hero-badge b{font-family:var(--font-display);font-weight:900;color:var(--accent)}
.hero-strip{
  margin-top:clamp(22px,4vw,42px);
  background:#101820;
}
.hero-strip div{animation-duration:24s}

.proof{
  padding:0;
  background:transparent;
  border:0;
}
.proof .wrap{
  margin-top:-32px;
  transform:none;
  background:var(--surface);
  position:relative;
  z-index:2;
}
.proof .pi{
  width:42px;
  height:42px;
  border-radius:8px;
}
.proof h3,.cat h3,.tile h3,.step h3,.why-grid h3,.prod h3,.detail-main h2,.quote-card h3{
  font-family:var(--font-display);
  font-weight:850;
  letter-spacing:-.02em!important;
}

.cat{
  background:rgba(255,255,255,.92);
  border:1px solid rgba(16,24,32,.1);
  box-shadow:0 16px 44px rgba(16,24,32,.08);
}
.cat:hover{
  transform:translateY(-8px);
  box-shadow:0 26px 72px rgba(16,24,32,.16);
}
.cat .cat-media{
  background:
    radial-gradient(circle at 35% 20%,rgba(255,255,255,.9),transparent 12rem),
    linear-gradient(135deg,#edf8f5,#f7f0df);
}
.cat .mc{
  background:#101820;
  color:#fff;
  border-radius:8px;
}
.cat h3{font-size:19px;line-height:1.15}
.cat p{line-height:1.55}
.cat .enq{background:#101820}

.pan-band{
  background:
    radial-gradient(circle at 12% 18%,rgba(16,185,129,.1),transparent 25rem),
    rgba(255,255,255,.5);
}
.dir-list,.c-lines,form.enquiry,.tile,.step,.fact-card,.prod .pmedia,.gal,.sector{
  background:rgba(255,255,255,.9);
  border:1px solid rgba(16,24,32,.1);
  box-shadow:0 14px 40px rgba(16,24,32,.07);
}
.chip{
  border-radius:8px;
  background:rgba(255,255,255,.74);
  border-color:rgba(16,24,32,.12);
}
.chip[aria-pressed="true"]{background:#101820;color:#fff}
.dir-row{background:transparent}
.dir-row:hover{background:#f4f9f4}

.navy-sec,.cta-band,footer.site,.page-hero{
  background:
    radial-gradient(circle at 72% 26%,rgba(17,168,189,.18),transparent 25rem),
    radial-gradient(circle at 10% 88%,rgba(242,184,75,.14),transparent 28rem),
    linear-gradient(135deg,#101820,#17232c 58%,#07333b);
}
.why-grid{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.14);
}
.why-grid article{
  background:rgba(255,255,255,.07);
  border:0;
}
.step::before{
  border-radius:8px;
  color:#fff;
  background:linear-gradient(135deg,#101820,#0f766e);
}
.step:hover,.tile:hover,.sector:hover{transform:translateY(-6px)}

.page-hero{padding:clamp(78px,9vw,138px) 0}
.page-hero .wrap{
  grid-template-columns:minmax(0,1fr) 320px;
  align-items:center;
}
.page-hero h1{
  font-weight:900;
  font-size:clamp(44px,6vw,82px);
  line-height:.92;
  letter-spacing:-.045em!important;
}
.page-signal{
  background:rgba(255,255,255,.09);
  border-color:rgba(255,255,255,.16);
}
.page-signal span{
  font-family:var(--font-display);
  font-weight:950;
}
.detail-hero .wrap{grid-template-columns:minmax(0,1.02fr) minmax(440px,.82fr)}
.detail-fig{border-radius:8px;box-shadow:0 34px 84px rgba(0,0,0,.28)}
.detail-main h2{font-size:clamp(28px,3vw,40px)}
.subs{
  gap:14px;
}
.subs li{
  background:rgba(255,255,255,.9);
  border:1px solid rgba(16,24,32,.1);
}
.quote-card{
  background:linear-gradient(145deg,#101820,#07333b);
}

.cta-band{
  overflow:hidden;
}
.cta-band .wrap{
  align-items:center;
}
.cta-band h2{
  max-width:18ch;
  font-family:var(--font-display);
  font-weight:900;
  letter-spacing:-.04em!important;
}
.cta-kicker{
  border-color:rgba(255,255,255,.2);
  background:rgba(255,255,255,.08);
}

.wa-fab{
  background:#22c55e;
  border-radius:8px;
}

@media(max-width:1100px){
  .hero{min-height:auto}
  .hero .wrap{grid-template-columns:1fr}
  .hero h1{max-width:13ch}
  .hero-fig{min-height:auto;max-width:680px}
  .detail-hero .wrap{grid-template-columns:1fr}
}
@media(max-width:760px){
  body{font-size:15px}
  .topbar .wrap{min-height:36px}
  .hero{padding-top:42px}
  .hero h1{
    max-width:10.5ch;
    font-size:clamp(42px,12vw,56px);
    line-height:.92;
  }
  .hero p.lede{font-size:16px;line-height:1.65}
  .hero-meta{
    display:none;
  }
  .hero-fig{margin-top:8px}
  .hero-panel{
    position:relative;
    left:auto;
    top:auto;
    width:auto;
    margin:-28px 18px 0;
  }
  .hero-badge{
    position:relative;
    right:auto;
    bottom:auto;
    margin:-18px 18px 0;
  }
  .proof .wrap{margin-top:0}
  h2.sec{font-size:clamp(31px,9vw,42px)}
  .page-hero{padding:58px 0}
  .page-hero h1{font-size:clamp(38px,12vw,58px)}
  .cta-band h2{max-width:100%}
}

/* Logo sizing override */
nav.main .wrap{min-height:90px}
nav.main .brand img{
  width:clamp(220px,22vw,310px);
  height:auto;
  max-height:74px;
  object-fit:contain;
}
.brand{min-width:clamp(240px,24vw,340px)}
.drawer-top img{
  width:220px;
  height:auto;
  max-height:58px;
  object-fit:contain;
}
footer.site img.flogo{
  width:min(340px,100%);
  height:auto;
  max-height:92px;
}
@media(max-width:760px){
  nav.main .wrap{min-height:78px}
  nav.main .brand img{
    width:min(245px,100%);
    height:auto;
    max-height:64px;
  }
  .brand{min-width:0}
}

/* Service detail headers use the service/category image as the hero background. */
.detail-hero{
  isolation:isolate;
  min-height:clamp(480px,68vh,720px);
  display:flex;
  align-items:center;
  background:
    linear-gradient(90deg,rgba(8,15,24,.94) 0%,rgba(8,15,24,.86) 36%,rgba(8,15,24,.32) 68%,rgba(8,15,24,.16) 100%),
    var(--detail-bg) center/cover no-repeat,
    var(--navy)!important;
}
.detail-hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(180deg,rgba(8,15,24,.12),rgba(8,15,24,.62)),
    radial-gradient(circle at 18% 18%,rgba(245,190,76,.18),transparent 34%);
  pointer-events:none;
}
.detail-hero.has-art-bg{
  background:
    linear-gradient(90deg,rgba(8,15,24,.96) 0%,rgba(8,15,24,.88) 42%,rgba(8,15,24,.38) 72%,rgba(8,15,24,.28) 100%),
    var(--detail-bg) 76% center/cover no-repeat,
    linear-gradient(135deg,#101820,#07333b)!important;
}
.detail-hero .wrap{
  display:block;
  position:relative;
  z-index:1;
}
.detail-hero .wrap>div{
  max-width:min(720px,100%);
}
.detail-hero h1{
  text-shadow:0 18px 46px rgba(0,0,0,.38);
}
.detail-hero p{
  color:rgba(255,255,255,.82);
}
.detail-fig{
  display:none;
}
@media(max-width:760px){
  .detail-hero{
    min-height:560px;
    align-items:flex-end;
    padding:72px 0 64px;
    background:
      linear-gradient(180deg,rgba(8,15,24,.7) 0%,rgba(8,15,24,.9) 48%,rgba(8,15,24,.96) 100%),
      var(--detail-bg) center top/cover no-repeat,
      var(--navy)!important;
  }
  .detail-hero.has-art-bg{
    background:
      linear-gradient(180deg,rgba(8,15,24,.48) 0%,rgba(8,15,24,.82) 42%,rgba(8,15,24,.98) 100%),
      var(--detail-bg) center top/cover no-repeat,
      linear-gradient(135deg,#101820,#07333b)!important;
  }
}

/* Mobile hardening for all repeated grids and card-style sections. */
@media(max-width:760px){
  html,body{
    overflow-x:hidden;
  }
  .wrap{
    width:100%;
    max-width:100%;
    padding-left:18px;
    padding-right:18px;
  }
  section{
    padding:48px 0;
  }
  nav.main .wrap{
    min-height:86px;
    gap:12px;
    justify-content:space-between;
  }
  nav.main .brand{
    flex:1 1 auto;
    min-width:0;
    max-width:calc(100% - 62px);
  }
  nav.main .brand img{
    width:100%;
    max-width:250px;
    height:auto;
    max-height:58px;
    object-fit:contain;
  }
  .hamburger{
    flex:0 0 48px;
    width:48px;
    height:48px;
  }
  .page-hero{
    min-height:auto;
    padding:56px 0!important;
  }
  .page-hero .wrap{
    display:block!important;
    grid-template-columns:1fr!important;
  }
  .page-copy{
    max-width:100%;
  }
  .page-hero h1{
    max-width:100%;
    font-size:clamp(42px,12.5vw,56px);
    line-height:.96;
  }
  .page-hero p{
    max-width:100%;
    font-size:16px;
    line-height:1.65;
  }
  .page-signal{
    display:none;
  }
  .hero{
    padding-top:36px;
  }
  .hero h1{
    font-size:clamp(38px,11.4vw,50px);
    line-height:.94;
    max-width:100%;
  }
  .hero p.lede{
    font-size:16px;
  }
  .hero-strip{
    display:none;
  }
  .head-row{
    display:block;
    margin-bottom:24px;
  }
  .head-row .btn{
    width:100%;
    margin-top:18px;
    white-space:normal;
  }
  .cat-grid{
    grid-template-columns:minmax(0,1fr)!important;
    gap:18px;
  }
  .cat{
    min-width:0;
  }
  .cat:hover{
    transform:none;
  }
  .cat .cat-media{
    height:220px;
    aspect-ratio:auto;
    padding:14px;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .cat .cat-media img{
    width:auto!important;
    height:100%!important;
    max-width:100%;
    max-height:100%;
    object-fit:contain;
  }
  .cat .pad{
    padding:16px 16px 18px;
  }
  .cat h3{
    font-size:22px;
    line-height:1.12;
  }
  .cat p{
    font-size:15.5px;
  }
  .cat .cat-foot{
    min-height:44px;
  }
  .cat .enq{
    width:44px;
    height:44px;
  }
  .proof .wrap,
  .why-grid,
  .steps,
  .detail-body,
  .contact-grid,
  footer.site .fmain{
    grid-template-columns:1fr!important;
  }
  .proof .wrap{
    width:100%;
    border-left:0;
    border-right:0;
    border-radius:0;
  }
  .dir-tools{
    display:grid;
    gap:14px;
  }
  .chips{
    flex-wrap:nowrap;
    overflow-x:auto;
    padding-bottom:4px;
    -webkit-overflow-scrolling:touch;
  }
  .chip{
    flex:0 0 auto;
  }
  .dir-search{
    width:100%;
    margin-left:0;
  }
  .dir-search input{
    width:100%;
  }
  .dir-row{
    grid-template-columns:auto minmax(0,1fr) auto!important;
    gap:13px;
    padding:13px 14px;
  }
  .dir-row .no,
  .dir-row .go{
    justify-self:auto;
  }
  .prod{
    grid-template-columns:1fr;
  }
  .prod .pmedia{
    width:100%;
    max-width:100%;
    height:220px;
    overflow:hidden;
  }
  .prod .pmedia img,
  .gal img,
  .rel img{
    width:auto!important;
    height:100%!important;
    max-width:100%;
    max-height:100%;
    object-fit:contain;
  }
  .gal-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
  }
  .gal{
    padding:10px;
  }
  .side{
    position:static;
  }
  .cta-band .cta-actions,
  .hero-cta{
    display:grid;
    grid-template-columns:1fr;
  }
  .cta-band .btn,
  .hero-cta .btn{
    width:100%;
  }
  .wa-fab{
    right:14px;
    bottom:calc(env(safe-area-inset-bottom) + 14px);
    width:56px;
    height:56px;
    padding:0;
    justify-content:center;
  }
}

@media(max-width:420px){
  .cat .cat-media,
  .prod .pmedia{
    height:198px;
  }
  .gal-grid{
    grid-template-columns:1fr;
  }
}

/* Premium service cards: stable media framing, depth, and motion. */
.cat-grid{
  align-items:stretch;
}
.cat{
  isolation:isolate;
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(250,252,251,.94));
  border:1px solid rgba(16,24,32,.1);
  box-shadow:0 18px 48px rgba(16,24,32,.08);
  transform-style:preserve-3d;
}
.cat::before{
  height:3px;
  background:linear-gradient(90deg,var(--accent-deep),var(--accent) 55%,oklch(84% 0.115 92));
  transform:scaleX(.16);
  transform-origin:left;
  opacity:.9;
  transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .3s ease;
}
.cat::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:radial-gradient(circle at var(--mx,72%) var(--my,16%),oklch(74% 0.14 86/.22),transparent 15rem);
  opacity:0;
  transition:opacity .3s ease;
}
.cat:hover::before,
.cat.reveal.in::before{
  transform:scaleX(1);
}
.cat:hover::after{
  opacity:1;
}
.cat .cat-media{
  min-height:246px;
  aspect-ratio:16/10;
  padding:22px;
  overflow:hidden;
  border-bottom:1px solid var(--border);
  background:
    radial-gradient(circle at 50% 32%,oklch(100% 0 0) 0 26%,var(--gold-tint) 48%,transparent 66%),
    linear-gradient(158deg,var(--ivory) 0%,oklch(96.5% 0.026 90) 60%,oklch(94% 0.036 88) 100%);
  display:flex;
  align-items:center;
  justify-content:center;
}
.cat .cat-media::before{
  content:"";
  position:absolute;
  inset:20px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.74);
  background:
    linear-gradient(90deg,rgba(16,24,32,.05) 1px,transparent 1px),
    linear-gradient(180deg,rgba(16,24,32,.045) 1px,transparent 1px);
  background-size:34px 34px;
  mask-image:radial-gradient(circle at center,#000 0 60%,transparent 84%);
  opacity:.32;
}
.cat .cat-sheen{
  position:absolute;
  inset:-35% auto auto -45%;
  width:70%;
  height:180%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);
  transform:rotate(18deg) translateX(-120%);
  opacity:0;
}
.cat:hover .cat-sheen{
  animation:catSheen .9s ease;
}
.cat .cat-visual{
  position:relative;
  z-index:1;
  width:min(74%,220px);
  aspect-ratio:1;
  display:grid;
  place-items:center;
  border-radius:22px;
  background:linear-gradient(180deg,oklch(100% 0 0/.92),oklch(99% 0.006 90/.82));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 0 0 1px oklch(74% 0.13 84/.14),
    0 16px 40px oklch(26% 0.07 262/.14);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease;
}
.cat .cat-visual img,
.cat .cat-media>img{
  width:88%!important;
  height:88%!important;
  max-width:88%;
  max-height:88%;
  object-fit:contain;
  filter:drop-shadow(0 18px 18px rgba(16,24,32,.16));
  transition:transform .35s cubic-bezier(.2,.8,.2,1),filter .35s ease;
}
.cat:hover .cat-visual{
  transform:translateY(-6px) scale(1.025);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    0 26px 54px rgba(16,24,32,.18);
}
.cat:hover .cat-visual img{
  transform:scale(1.045);
  filter:drop-shadow(0 24px 20px rgba(16,24,32,.2));
}
.cat .mc{
  z-index:2;
  left:16px;
  top:16px;
  padding:7px 11px;
  border-radius:10px;
  background:var(--navy);
  color:var(--accent);
  letter-spacing:.1em;
  box-shadow:0 8px 20px oklch(26% 0.07 262/.22),inset 0 0 0 1px oklch(74% 0.13 84/.28);
}
.cat .pad{
  padding:20px 20px 22px;
}
.cat .grp-tag{
  color:#7b8792;
}
.cat h3{
  font-size:clamp(21px,2vw,25px);
  line-height:1.06;
  max-width:14ch;
}
.cat p{
  margin-top:8px;
  font-size:15px;
}
.cat .cat-foot{
  padding-top:4px;
}
.cat .view{
  padding:10px 0;
}
.cat .enq{
  width:44px;
  height:44px;
  border-radius:12px;
  background:var(--navy);
  box-shadow:0 10px 22px oklch(26% 0.07 262/.2);
  transition:transform .15s cubic-bezier(.2,.8,.2,1),background .18s ease,box-shadow .2s ease;
}
.cat .enq:hover{
  background:var(--wa);
  transform:translateY(-2px);
  box-shadow:0 14px 28px rgba(37,211,102,.34);
}
@keyframes catSheen{
  0%{opacity:0;transform:rotate(18deg) translateX(-120%)}
  18%{opacity:.9}
  100%{opacity:0;transform:rotate(18deg) translateX(260%)}
}
@media(max-width:760px){
  .cat{
    box-shadow:0 12px 30px oklch(26% 0.07 262/.09);
    transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease;
  }
  /* touch: no sticky hover glow/sheen — press + reveal carry the motion */
  .cat::after,
  .cat .cat-sheen{
    display:none;
  }
  .cat .cat-media{
    height:200px;
    min-height:200px;
    padding:18px;
    aspect-ratio:auto;
  }
  .cat .cat-media::before{
    inset:16px;
    border-radius:16px;
    background-size:30px 30px;
    opacity:.24;
  }
  .cat .cat-visual{
    width:min(72%,208px);
    border-radius:18px;
    transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s ease;
  }
  .cat .cat-visual img,
  .cat .cat-media>img{
    width:86%!important;
    height:86%!important;
  }
  /* tactile press: card dips, product tile settles, enquire pulses */
  .cat:active{
    transform:scale(.985);
    box-shadow:0 8px 20px oklch(26% 0.07 262/.1);
  }
  .cat .cat-media:active .cat-visual{
    transform:scale(.965);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 8px 20px oklch(26% 0.07 262/.12);
  }
  .cat .enq:active{
    transform:scale(.92);
  }
  .cat .pad{
    padding:18px 18px 20px;
  }
  .cat h3{
    max-width:100%;
    font-size:23px;
    line-height:1.1;
  }
  .cat p{
    font-size:15.5px;
    line-height:1.55;
  }
  .cat .cat-foot{
    margin-top:14px;
  }
  .cat .enq{
    width:46px;
    height:46px;
  }
}
@media(max-width:420px){
  .cat .cat-media{
    height:184px;
    min-height:184px;
  }
  .cat .cat-visual{
    width:min(70%,182px);
  }
}
@media(prefers-reduced-motion:no-preference){
  .cat.reveal.in .cat-visual{
    animation:cardRise .68s cubic-bezier(.18,.84,.26,1) both;
  }
}
@keyframes cardRise{
  from{opacity:.65;transform:translateY(14px) scale(.96)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

/* Final header type scale: reduce oversized page/header titles across the site. */
.hero h1{
  font-size:clamp(38px,4.8vw,66px)!important;
  line-height:1!important;
}
.page-hero h1,
.detail-hero h1{
  font-size:clamp(36px,4.7vw,62px)!important;
  line-height:1!important;
  letter-spacing:-.025em!important;
}
h2.sec{
  font-size:clamp(28px,3.2vw,44px)!important;
  line-height:1.12!important;
}
@media(max-width:760px){
  .hero h1,
  .page-hero h1,
  .detail-hero h1{
    font-size:clamp(31px,9.2vw,43px)!important;
    line-height:1.04!important;
    letter-spacing:-.015em!important;
  }
  h2.sec{
    font-size:clamp(25px,7.4vw,34px)!important;
    line-height:1.15!important;
  }
}

/* Main page hero background images for About, Services, Our Work, and Contact. */
.page-hero.page-hero-bg{
  isolation:isolate;
  min-height:clamp(430px,48vw,620px);
  display:flex;
  align-items:center;
  background:
    linear-gradient(90deg,rgba(8,15,24,.94) 0%,rgba(8,15,24,.78) 38%,rgba(8,15,24,.34) 72%,rgba(8,15,24,.16) 100%),
    var(--page-bg) center/cover no-repeat,
    linear-gradient(135deg,#101820,#07333b)!important;
}
.page-hero.page-hero-bg::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:
    linear-gradient(180deg,rgba(8,15,24,.08),rgba(8,15,24,.58)),
    radial-gradient(circle at 16% 18%,rgba(216,157,29,.16),transparent 26rem);
  pointer-events:none;
}
.page-hero.page-hero-bg .wrap{
  position:relative;
  z-index:1;
}
.page-hero.page-hero-bg .page-copy{
  max-width:760px;
}
.page-hero.page-hero-bg .page-signal{
  background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.2);
  backdrop-filter:blur(14px);
}
@media(max-width:760px){
  .page-hero.page-hero-bg{
    min-height:auto;
    padding:64px 0!important;
    background:
      linear-gradient(180deg,rgba(8,15,24,.72) 0%,rgba(8,15,24,.88) 42%,rgba(8,15,24,.96) 100%),
      var(--page-bg) center top/cover no-repeat,
      linear-gradient(135deg,#101820,#07333b)!important;
  }
  .page-hero.page-hero-bg .page-copy{
    max-width:100%;
  }
}

/* =====================================================================
   Cover images: product packshots fill the card media edge-to-edge.
   Last in source so the !important width rules above are overridden.
   ===================================================================== */
.cat .cat-media{
  padding:0;
  background:#fff;
}
.cat .cat-media::before{
  display:none;                 /* drop the grid-pattern frame */
}
.cat .cat-visual{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border-radius:0;
  background:none;
  box-shadow:none;
  display:block;
  overflow:hidden;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.cat .cat-visual img,
.cat .cat-media>img{
  width:100%!important;
  height:100%!important;
  max-width:none;
  max-height:none;
  object-fit:cover;
  object-position:center 42%;
  filter:none;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
/* hover: gentle ken-burns zoom on the cover; no lift that would show an edge */
.cat:hover .cat-visual{
  transform:none;
}
@media(hover:hover){
  .cat:hover .cat-visual img{
    transform:scale(1.06);
  }
}
/* reveal: zoom-settle instead of translate — no white gap on a full-bleed frame */
@media(prefers-reduced-motion:no-preference){
  .cat.reveal.in .cat-visual{
    animation:coverSettle .8s cubic-bezier(.18,.84,.26,1) both;
  }
}
@keyframes coverSettle{
  from{opacity:.35;transform:scale(1.09)}
  to{opacity:1;transform:scale(1)}
}
/* mobile: same full-bleed cover at the smaller media heights */
@media(max-width:760px){
  .cat .cat-media{
    padding:0;
  }
  .cat .cat-visual{
    width:100%;
    border-radius:0;
  }
  .cat .cat-visual img,
  .cat .cat-media>img{
    width:100%!important;
    height:100%!important;
  }
}

/* =====================================================================
   Home hero: full-screen section, single image background + navy scrim.
   Scoped to the home page and placed last so it overrides the layered
   .hero rules above without !important on most properties.
   ===================================================================== */
body[data-page="home"] .hero{
  position:relative;
  min-height:calc(100svh - 112px);   /* fills the viewport under topbar + sticky nav */
  display:grid;
  align-content:center;
  padding:clamp(40px,7vw,90px) 0 clamp(84px,10vw,120px);
  overflow:hidden;
  color:#fff;
  background-image:
    linear-gradient(90deg,rgba(17,24,32,.94),rgba(17,24,32,.66) 44%,rgba(17,24,32,.22) 74%,rgba(17,24,32,.04)),
    linear-gradient(180deg,rgba(17,24,32,.55),rgba(17,24,32,.12) 34%,rgba(17,24,32,.74)),
    url("../service-categories-web/MC007-ecommerce-warehouse-setup.webp");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
body[data-page="home"] .hero::before{           /* kill the off-brand rainbow strip */
  display:none;
}
/* slow ambient drift on the backdrop */
@media(prefers-reduced-motion:no-preference){
  body[data-page="home"] .hero{
    animation:heroPan 30s ease-in-out infinite alternate;
  }
}
@keyframes heroPan{
  from{background-position:50% 46%}
  to{background-position:50% 54%}
}
body[data-page="home"] .hero .wrap{
  grid-template-columns:1fr;
  align-items:start;
}
body[data-page="home"] .hero-copy{
  position:relative;
  z-index:1;
  max-width:660px;
}
body[data-page="home"] .hero .eyebrow{
  color:var(--accent);
}
body[data-page="home"] .hero .eyebrow::before{
  background:var(--accent);
}
body[data-page="home"] .hero h1{
  color:#fff;
  max-width:16ch;
  text-shadow:0 2px 30px rgba(0,0,0,.35);
}
body[data-page="home"] .hero h1 em{
  color:var(--accent);
  background:none;
  -webkit-text-fill-color:var(--accent);
}
body[data-page="home"] .hero p.lede{
  color:rgba(255,255,255,.86);
  max-width:56ch;
  text-shadow:0 1px 16px rgba(0,0,0,.3);
}
/* buttons on the dark backdrop */
body[data-page="home"] .hero .btn-ghost{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.55);
  color:#fff;
  backdrop-filter:blur(6px);
}
body[data-page="home"] .hero .btn-ghost:hover{
  background:#fff;
  border-color:#fff;
  color:var(--navy);
}
/* stat row → dark glass panel */
body[data-page="home"] .hero-meta{
  width:min(100%,640px);
  margin-top:34px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(17,24,32,.42);
  backdrop-filter:blur(16px);
  box-shadow:0 20px 50px rgba(0,0,0,.35);
}
body[data-page="home"] .hero-meta div+div{
  border-left-color:rgba(255,255,255,.16);
}
body[data-page="home"] .hero-meta b{
  color:#fff;
}
body[data-page="home"] .hero-meta span{
  color:rgba(255,255,255,.7);
}
/* the split figure is now the background — remove it */
body[data-page="home"] .hero-fig{
  display:none;
}
/* service-group marquee pinned to the bottom of the full-screen hero */
body[data-page="home"] .hero-strip{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  margin-top:0;
  border-top:1px solid rgba(255,255,255,.14);
  background:rgba(17,24,32,.5);
  backdrop-filter:blur(12px);
}
/* copy entrance */
@media(prefers-reduced-motion:no-preference){
  body[data-page="home"] .hero-copy>*{
    animation:heroRise .8s cubic-bezier(.18,.84,.26,1) both;
  }
  body[data-page="home"] .hero .eyebrow{animation-delay:.05s}
  body[data-page="home"] .hero h1{animation-delay:.13s}
  body[data-page="home"] .hero p.lede{animation-delay:.22s}
  body[data-page="home"] .hero-cta{animation-delay:.31s}
  body[data-page="home"] .hero-meta{animation-delay:.4s}
}
@keyframes heroRise{
  from{opacity:0;transform:translateY(22px)}
  to{opacity:1;transform:translateY(0)}
}
@media(max-width:760px){
  body[data-page="home"] .hero{
    min-height:calc(100svh - 96px);
    padding:clamp(28px,9vw,52px) 0 96px;
    /* stronger scrim + focus the frame for narrow screens */
    background-image:
      linear-gradient(180deg,rgba(17,24,32,.78),rgba(17,24,32,.5) 42%,rgba(17,24,32,.82)),
      url("../service-categories-web/MC007-ecommerce-warehouse-setup.webp");
    background-position:center;
    align-content:center;
  }
  body[data-page="home"] .hero h1{
    max-width:100%;
  }
  body[data-page="home"] .hero-meta{
    background:rgba(17,24,32,.5);
  }
}

/* =====================================================================
   Service directory: table rows → compact icon cards in a grid.
   Appended last to override the earlier table-layout .dir-list/.dir-row.
   ===================================================================== */
.dir-list{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(330px,1fr));
  gap:14px;
  margin-top:22px;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
  overflow:visible;
}
.dir-row{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:15px;
  padding:14px 15px;
  border:1px solid var(--border);
  border-bottom:1px solid var(--border);      /* override table border-bottom-only */
  border-radius:14px;
  background:var(--surface);
  box-shadow:0 5px 18px oklch(26% 0.07 262/.05);
  position:relative;
  overflow:hidden;
  transition:transform .18s cubic-bezier(.2,.8,.2,1),border-color .18s ease,box-shadow .25s ease;
}
.dir-row::before{                              /* gold rail that grows on hover */
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:3px;
  background:linear-gradient(180deg,var(--accent),var(--accent-deep));
  transform:scaleY(0);
  transform-origin:top;
  transition:transform .26s cubic-bezier(.2,.8,.2,1);
}
.dir-row:hover{
  transform:translateY(-3px);
  background:var(--surface);
  border-color:oklch(74% 0.13 84/.55);
  box-shadow:0 16px 38px oklch(26% 0.07 262/.13);
}
.dir-row:hover::before{
  transform:scaleY(1);
}
.dir-ic{
  width:54px;
  height:54px;
  flex:0 0 auto;
  border-radius:12px;
  background:radial-gradient(circle at 50% 34%,#fff 0 40%,var(--gold-tint) 100%);
  border:1px solid var(--border);
  display:grid;
  place-items:center;
  overflow:hidden;
}
.dir-ic img{
  width:82%;
  height:82%;
  object-fit:contain;
  transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
.dir-row:hover .dir-ic img{
  transform:scale(1.08);
}
.dir-main{
  min-width:0;
}
.dir-meta{
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:5px;
}
.dir-row .no{
  font:600 10px/1 var(--font-mono);
  letter-spacing:.07em;
  color:var(--accent-deep);
  background:var(--gold-tint);
  padding:4px 7px;
  border-radius:6px;
  text-align:left;
}
.dir-row .grp{
  display:inline;
  font:600 9.5px/1 var(--font-mono);
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--faint);
  text-align:left;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.dir-row h4{
  font:600 15px/1.22 var(--font-display);
  color:var(--fg);
  margin-bottom:3px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.dir-row p{
  font-size:12.5px;
  line-height:1.4;
  color:var(--muted);
  display:-webkit-box;
  -webkit-line-clamp:1;
  -webkit-box-orient:vertical;
  overflow:hidden;
  grid-column:auto;
}
.dir-row .go{
  width:34px;
  height:34px;
  flex:0 0 auto;
  border-radius:9px;
  display:grid;
  place-items:center;
  justify-self:end;
  color:var(--accent-deep);
  background:var(--gold-tint);
  transition:background .18s ease,color .18s ease;
}
.dir-row .go svg{
  width:16px;
  height:16px;
  transition:transform .18s ease;
}
.dir-row:hover .go{
  background:var(--navy);
  color:var(--accent);
}
.dir-row:hover .go svg{
  transform:translateX(2px);
}
@media(max-width:600px){
  .dir-list{
    grid-template-columns:1fr;
    gap:12px;
  }
  .dir-row{
    grid-template-columns:1fr !important;
    gap:10px;
    padding:18px !important;
  }
  .dir-row .no,
  .dir-row .go{
    justify-self:start;
  }
  .dir-main{
    display:grid;
    gap:6px;
    min-width:0;
  }
  .dir-meta{
    margin-bottom:0;
  }
  .dir-row h4,
  .dir-row p{
    display:block;
    overflow:visible;
    -webkit-line-clamp:unset;
    -webkit-box-orient:initial;
  }
  .dir-row h4{
    font-size:18px;
    line-height:1.15;
    margin-bottom:0;
  }
  .dir-row p{
    font-size:14px;
    line-height:1.45;
  }
  .dir-row p{
    grid-column:auto;
  }
  .dir-ic{
    width:74px;
    height:74px;
  }
  .dir-row .go{
    width:auto;
    min-width:44px;
    height:42px;
    padding:0 12px;
  }
}

/* =====================================================================
   Contact: full-width heading, then two top-aligned, equal-height cards.
   Fixes the offset where the form aligned to the heading, not the card.
   ===================================================================== */
.contact-grid{
  align-items:stretch;
}
.contact-head{
  grid-column:1/-1;
  max-width:60ch;
  margin-bottom:clamp(24px,3.2vw,42px);
}
.contact-head .sec-sub{
  margin-top:12px;
}
.c-lines{
  display:flex;
  flex-direction:column;
  margin-top:0;
}
.c-line{
  flex:1 1 auto;             /* rows share the matched height evenly */
}
form.enquiry{
  display:flex;
  flex-direction:column;
}
/* let the message field grow so the form matches the contact card height */
form.enquiry .f-field:has(textarea){
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
}
form.enquiry .f-field:has(textarea) textarea{
  flex:1 1 auto;
  min-height:96px;
}
@media(max-width:860px){
  .c-line{
    flex:0 0 auto;           /* stacked: natural row height, no stretching */
  }
  form.enquiry .f-field:has(textarea){
    flex:0 0 auto;
  }
}

/* =====================================================================
   Footer: .fmain / .fbar used `padding: V 0 V`, which zeroed the .wrap
   side padding — content sat flush to the screen edge on mobile.
   Restore the wrap gutter (kept vertical padding from the base rules).
   ===================================================================== */
footer.site .fmain,
footer.site .fbar{
  padding-left:clamp(18px,4vw,44px);
  padding-right:clamp(18px,4vw,44px);
}
@media(max-width:560px){
  footer.site .fmain{
    gap:30px;                /* tighter rhythm when stacked to one column */
  }
  footer.site .fbar{
    display:flex;
    flex-direction:column;
    gap:6px;
  }
}

/* =====================================================================
   Related categories: the mobile cover-image rule (.prod/.gal/.rel img
   width:auto/height:100%) wrongly blew the .rel thumbnail up to full
   width. Lock it back to a fixed square tile on every breakpoint.
   ===================================================================== */
.rel{
  gap:14px;
  align-items:center;
  min-width:0;
}
.rel img{
  width:58px!important;
  height:58px!important;
  max-width:58px!important;
  max-height:58px!important;
  flex:0 0 auto;
  object-fit:contain;
  border-radius:10px;
  padding:6px;
  background:radial-gradient(circle at 50% 34%,#fff 0 40%,var(--gold-tint) 100%);
  border:1px solid var(--border);
}
.rel span{
  min-width:0;
}
.rel .rt{
  overflow-wrap:anywhere;
}

/* =====================================================================
   Logo palette alignment: red, yellow, green, blue
   ===================================================================== */
:root{
  --logo-red:#D90412;
  --logo-red-deep:#9A0610;
  --logo-yellow:#FFC21A;
  --logo-yellow-deep:#D98B00;
  --logo-green:#06651F;
  --logo-green-bright:#08A833;
  --logo-blue:#0B3F8A;
  --logo-blue-deep:#052A75;
  --bg:#f7fbf5;
  --surface:#ffffff;
  --ivory:#eef8f0;
  --fg:#08224a;
  --muted:#4d6278;
  --faint:#77889a;
  --border:#d9e5df;
  --border-2:#bfd3c8;
  --accent:var(--logo-yellow);
  --accent-deep:var(--logo-red);
  --gold-tint:#fff7d8;
  --navy:var(--logo-blue-deep);
  --navy-2:#08336c;
  --navy-3:var(--logo-blue);
  --emerald:var(--logo-green);
  --terracotta:var(--logo-red);
  --teal:var(--logo-blue);
  --on-navy:#ffffff;
  --on-navy-muted:#d8e6f8;
  --wa:var(--logo-green-bright);
  --wa-deep:var(--logo-green);
  --shadow-sm:0 1px 2px rgba(8,34,74,.06),0 14px 34px rgba(8,34,74,.08);
  --shadow-md:0 24px 62px rgba(8,34,74,.14);
  --shadow-lg:0 38px 90px rgba(8,34,74,.22);
}

body{
  background:
    radial-gradient(circle at 10% 18%,rgba(255,194,26,.16),transparent 25rem),
    radial-gradient(circle at 88% 10%,rgba(8,168,51,.12),transparent 24rem),
    radial-gradient(circle at 82% 76%,rgba(11,63,138,.08),transparent 28rem),
    linear-gradient(90deg,rgba(11,63,138,.035) 1px,transparent 1px) 0 0/88px 88px,
    linear-gradient(180deg,rgba(6,101,31,.03) 1px,transparent 1px) 0 0/88px 88px,
    var(--bg);
}
::selection{background:var(--logo-yellow);color:var(--logo-blue-deep)}
:focus-visible{outline-color:var(--logo-red)}

.eyebrow{color:var(--logo-red)}
.eyebrow::before,
.hero::before,
.cat::before{
  background:linear-gradient(90deg,var(--logo-red),var(--logo-yellow),var(--logo-green),var(--logo-blue));
}

.topbar{
  background:linear-gradient(90deg,var(--logo-blue-deep),var(--logo-blue) 48%,var(--logo-green));
  border-bottom:3px solid var(--logo-yellow);
}
nav.main{
  background:rgba(255,255,255,.9);
  border-bottom:1px solid rgba(11,63,138,.16);
}
body.scrolled nav.main{
  background:rgba(255,255,255,.94);
  box-shadow:0 16px 42px rgba(11,63,138,.14);
}
.navlinks{
  border-color:rgba(11,63,138,.12);
  background:rgba(255,255,255,.82);
  box-shadow:0 10px 34px rgba(11,63,138,.08);
}
.navlinks a{color:var(--logo-blue-deep)}
.navlinks a:hover,
.navlinks a.active{
  background:var(--logo-blue);
  color:#fff;
  box-shadow:inset 0 -3px 0 var(--logo-yellow);
}
.nav-cta,
.btn-navy,
.chip[aria-pressed="true"],
.cat .mc,
.cat .enq,
.step::before{
  background:var(--logo-blue);
  color:#fff;
  border-color:var(--logo-blue);
}
.nav-cta:hover,
.btn-navy:hover,
.cat .enq:hover{
  background:var(--logo-green);
  border-color:var(--logo-green);
}
.btn-gold{
  background:linear-gradient(135deg,var(--logo-yellow),#F7A600);
  color:var(--logo-blue-deep);
  box-shadow:0 16px 34px rgba(255,194,26,.28);
}
.btn-gold:hover{
  background:linear-gradient(135deg,var(--logo-red),var(--logo-red-deep));
  color:#fff;
}
.btn-wa{
  background:linear-gradient(135deg,var(--logo-green-bright),var(--logo-green));
  box-shadow:0 18px 34px rgba(6,101,31,.24);
}
.btn-ghost:hover{border-color:var(--logo-blue);color:var(--logo-blue)}

.hero{
  background:
    linear-gradient(120deg,rgba(255,255,255,.88),rgba(255,255,255,.48)),
    radial-gradient(circle at 78% 18%,rgba(255,194,26,.18),transparent 26rem),
    radial-gradient(circle at 54% 92%,rgba(8,168,51,.16),transparent 28rem),
    radial-gradient(circle at 14% 20%,rgba(11,63,138,.12),transparent 28rem);
}
.hero h1 em{color:var(--logo-red)}
.hero-panel .hp-label{
  color:var(--logo-green);
  background:#e2f7e7;
}
.hp-flow i{background:linear-gradient(90deg,var(--logo-red),var(--logo-yellow))}
.hp-flow i:nth-child(2){background:linear-gradient(90deg,var(--logo-yellow),var(--logo-green))}
.hp-flow i:nth-child(3){background:linear-gradient(90deg,var(--logo-green),var(--logo-blue))}
.hp-flow i:nth-child(4){background:linear-gradient(90deg,var(--logo-blue),var(--logo-red))}

.hero-badge,
.hero-strip{
  background:var(--logo-blue-deep);
}
.hero-badge b{color:var(--logo-yellow)}

.proof .pi,
.c-line .ci,
.subs li .tick,
.cat .cat-visual,
.rel img{
  background:radial-gradient(circle at 50% 34%,#fff 0 38%,var(--gold-tint) 100%);
  color:var(--logo-red);
}
.cat{
  border-color:rgba(11,63,138,.12);
  box-shadow:0 18px 48px rgba(11,63,138,.08);
}
.cat:hover{
  border-color:var(--logo-yellow);
  box-shadow:0 26px 72px rgba(11,63,138,.16);
}
.cat::after{
  background:radial-gradient(circle at var(--mx,72%) var(--my,16%),rgba(255,194,26,.24),transparent 15rem);
}
.cat .cat-media{
  background:
    radial-gradient(circle at 50% 32%,#fff 0 26%,var(--gold-tint) 48%,transparent 66%),
    linear-gradient(158deg,#eef8f0 0%,#f8fbf6 60%,#fff7d8 100%);
}
.cat .mc{
  color:var(--logo-yellow);
  box-shadow:0 8px 20px rgba(11,63,138,.22),inset 0 0 0 1px rgba(255,194,26,.34);
}
.cat .cat-foot .view,
.dir-row .go,
a.c-line:hover b,
.faq summary::after,
.tile .big{
  color:var(--logo-red);
}

.navy-sec,
.cta-band,
footer.site,
.page-hero{
  background:
    radial-gradient(circle at 72% 26%,rgba(255,194,26,.18),transparent 25rem),
    radial-gradient(circle at 10% 88%,rgba(8,168,51,.16),transparent 28rem),
    radial-gradient(circle at 92% 84%,rgba(217,4,18,.18),transparent 24rem),
    linear-gradient(135deg,var(--logo-blue-deep),var(--logo-blue) 54%,var(--logo-green));
}
.quote-card{
  background:linear-gradient(145deg,var(--logo-blue-deep),var(--logo-blue) 58%,var(--logo-green));
}
.cta-band::before,
.page-hero::before{
  background:radial-gradient(circle,rgba(255,194,26,.26),transparent 68%);
}
.page-signal span,
.navy-sec .eyebrow,
.quote-card .eyebrow,
.page-hero .eyebrow,
.cta-kicker,
body[data-page="home"] .hero .eyebrow{
  color:var(--logo-yellow);
}

.page-hero.page-hero-bg{
  background:
    linear-gradient(90deg,rgba(0,0,0,.16) 0%,rgba(0,0,0,.09) 38%,rgba(0,0,0,.03) 72%,rgba(0,0,0,0) 100%),
    var(--page-bg) center/cover no-repeat,
    linear-gradient(135deg,var(--logo-blue-deep),var(--logo-green))!important;
}
.page-hero.page-hero-bg::after{
  background:
    linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.06)),
    radial-gradient(circle at 16% 18%,rgba(0,0,0,.03),transparent 26rem);
}
.detail-hero,
.detail-hero.has-art-bg{
  background:
    linear-gradient(90deg,rgba(0,0,0,.18) 0%,rgba(0,0,0,.1) 42%,rgba(0,0,0,.03) 72%,rgba(0,0,0,0) 100%),
    var(--detail-bg) 76% center/cover no-repeat,
    linear-gradient(135deg,var(--logo-blue-deep),var(--logo-green))!important;
}
.detail-hero::after{
  background:
    linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.07)),
    radial-gradient(circle at 18% 18%,rgba(0,0,0,.03),transparent 34%);
}

body[data-page="home"] .hero{
  background-image:
    linear-gradient(90deg,rgba(0,0,0,.16),rgba(0,0,0,.08) 44%,rgba(0,0,0,.02) 74%,rgba(0,0,0,0)),
    linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,0) 34%,rgba(0,0,0,.08)),
    url("../service-categories-web/MC007-ecommerce-warehouse-setup.webp");
}
body[data-page="home"] .hero::before{
  display:block;
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:8px;
  z-index:2;
  background:linear-gradient(90deg,var(--logo-red),var(--logo-yellow),var(--logo-green),var(--logo-blue));
}
body[data-page="home"] .hero h1 em{
  color:var(--logo-yellow);
  -webkit-text-fill-color:var(--logo-yellow);
}
body[data-page="home"] .hero .btn-ghost:hover{
  color:var(--logo-blue-deep);
}
body[data-page="home"] .hero-meta,
body[data-page="home"] .hero-strip{
  background:rgba(0,0,0,.14);
}

.wa-fab{
  background:linear-gradient(135deg,var(--logo-green-bright),var(--logo-green));
}
footer.site .fsoc a:hover,
.fcol a:hover{
  color:var(--logo-yellow);
}

@media(max-width:760px){
  .page-hero.page-hero-bg{
    background:
      linear-gradient(180deg,rgba(0,0,0,.18) 0%,rgba(0,0,0,.22) 42%,rgba(0,0,0,.32) 100%),
      var(--page-bg) center top/cover no-repeat,
      linear-gradient(135deg,var(--logo-blue-deep),var(--logo-green))!important;
  }
  .detail-hero,
  .detail-hero.has-art-bg{
    background:
      linear-gradient(180deg,rgba(0,0,0,.2) 0%,rgba(0,0,0,.24) 42%,rgba(0,0,0,.34) 100%),
      var(--detail-bg) center top/cover no-repeat,
      linear-gradient(135deg,var(--logo-blue-deep),var(--logo-green))!important;
  }
  body[data-page="home"] .hero{
    background-image:
      linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.1) 42%,rgba(0,0,0,.24)),
      url("../service-categories-web/MC007-ecommerce-warehouse-setup.webp");
  }
}