/* =========================================================
   DESWA Engineering (K) Limited — site styles
   Design system: navy, white and light grey with DESWA red as the
   accent. Syne headings, numerals and labels; Didact Gothic body. 12-column grid, thin technical lines,
   large numerals, minimal shadows and corners.
   1. Tokens   2. Base   3. Layout helpers   4. Header and nav
   5. Banners  6. Home   7. Shared components   8. Forms
   9. Footer   10. Responsive
   ========================================================= */

/* 1. Tokens --------------------------------------------- */
:root{
  --red:#E31E24;     /* DESWA red: accent and interaction only */
  --navy:#07152F;    /* deep DESWA navy: dark sections, numerals, links */
  --navy-2:#132A52;  /* navy tint: header panel edge */
  --blue:var(--navy);       /* legacy names, kept so older rules stay on-palette */
  --brand-blue:var(--navy);
  --ink:#111111;     /* headings */
  --text:#454C59;    /* body copy */
  --muted:#888888;   /* secondary text */
  --line:#E6E6E6;    /* dividers */
  --gray:#F4F4F4;    /* light section background */
  --sky:#EEF0F3;     /* light grey fills (tags) */
  --paper:var(--gray);
  --radius:2px;      /* the only corner radius (buttons, chips) */
  --max:1400px;      /* content width incl. .wrap padding (1320px of content) */
  --frame:1440px;    /* outer frame width for the whole site */
  --gutter:32px;     /* 12-column grid gutter */
  --section:104px;   /* vertical section spacing */
  --grid-line:rgba(255,255,255,.045); /* drawing grid on navy */
  --head:"Syne",system-ui,sans-serif;  /* headings, numerals and labels */
  --display:var(--head);
  --body:"Didact Gothic",system-ui,sans-serif;
}

/* 2. Base ----------------------------------------------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:#E9EDF3;scroll-padding-top:104px}
/* Boxed layout: the whole site sits in a centred frame and never stretches
   wider than --frame; the page background shows on either side. */
body{font-family:var(--body);color:var(--text);font-size:17px;line-height:1.7;background:#fff;
  max-width:var(--frame);margin:0 auto;position:relative;overflow-x:clip;box-shadow:0 0 0 1px rgba(10,26,51,.04),0 0 60px rgba(10,26,51,.10)}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
p a,.link{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
h1,h2,h3,h4,.h1{font-family:var(--head);color:var(--ink);font-weight:700;letter-spacing:-.02em}
h1,.h1{font-size:clamp(48px,4.6vw,66px);line-height:1.04}
h2{font-size:clamp(36px,3.4vw,50px);line-height:1.1;max-width:820px}
h3{font-size:20px;line-height:1.3;font-weight:600}
/* small uppercase label */
.label{font-family:var(--head);font-weight:600;font-size:13px;letter-spacing:.16em;text-transform:uppercase}
.hl{color:var(--red)}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.skip{position:absolute;left:-999px;top:0;background:#fff;padding:10px 16px;z-index:99}
.skip:focus{left:16px}

/* 3. Layout helpers ------------------------------------- */
.wrap{max-width:var(--max);margin:0 auto;padding:0 40px}
section{padding:var(--section) 0}
/* 12-column grid; two-col and sec-split are 7/5 splits of it */
.grid-12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter)}
/* subtle drawing grid on navy */
.bg-navy,.cta-band,.home-about,.home-projects{background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);background-size:48px 48px}
.bg-gray,.bg-paper{background:var(--gray)}
.center{text-align:center;margin-top:48px}
.eyebrow{display:flex;align-items:center;gap:14px;font-family:var(--head);font-weight:600;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);margin-bottom:14px}
.eyebrow::before{content:"";width:36px;height:1px;background:var(--red);flex:none}
.lead{font-size:18px;color:var(--text);max-width:680px;margin-top:16px}
.ph{width:100%;height:100%;object-fit:cover}
.rounded{overflow:hidden}
.two-col{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:72px;align-items:center}
.prose p{margin-top:16px}
.prose p b{color:var(--ink)}
.prose table{width:100%;border-collapse:collapse;margin:24px 0;font-size:15px}
@media (max-width:767px){.prose table{display:block;overflow-x:auto}}
.prose th,.prose td{padding:12px 16px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
.prose thead th{background:var(--navy);color:#fff;font-family:var(--head);font-weight:600}
.prose tbody td:first-child{color:var(--ink);font-weight:600}
.prose ul{margin:16px 0 0 20px}
.prose li{margin-top:6px}
.btn{display:inline-block;text-decoration:none;padding:15px 30px;border-radius:var(--radius);font-family:var(--head);font-weight:600;font-size:14px;letter-spacing:.06em;text-transform:uppercase;border:0;cursor:pointer;transition:background-color .25s,color .25s,border-color .25s}
.btn.red{background:var(--red);color:#fff}
.btn.red:hover{background:#B5141A}
.btn.navy{background:var(--navy);color:#fff}
.btn.navy:hover{background:var(--red)}
.btn.ghost{border:1px solid rgba(255,255,255,.7);color:#fff}
.btn.ghost:hover{background:#fff;color:var(--ink)}
.btn.outline{border:1px solid var(--ink);color:var(--ink)}
.btn.outline:hover{background:var(--ink);color:#fff}
.ctas{display:flex;gap:16px;flex-wrap:wrap}
@media (min-width:768px){.btn{white-space:nowrap}}
.link-line{display:inline-block;font-family:var(--head);font-weight:600;font-size:15px;color:var(--ink);border-bottom:1px solid var(--ink);line-height:1.5;transition:color .2s,border-color .2s}
a:hover .link-line,.link-line:hover{color:var(--red);border-color:var(--red)}

/* 4. Header and nav ------------------------------------- */
.site-header{position:absolute;top:0;left:0;right:0;z-index:20}
.site-header.solid{position:relative;background:var(--navy)}
/* home page: white header bar so the logo sits on white */
.site-header.light{position:relative;background:#fff;border-bottom:1px solid var(--line)}
.site-header.light .menu-toggle{color:var(--ink)}
.site-header.light.menu-open .menu-toggle{color:var(--ink)}
.site-header.light.menu-open{background:#fff!important}
@media (min-width:1081px){
  .site-header.light .nav ul{color:var(--ink)}
  .site-header.light .nav a:hover,.site-header.light .nav a[aria-current="page"]{color:var(--red)}
}
.site-header .wrap{display:flex;align-items:center;height:92px}
.brand{background:#fff;padding:8px 14px;display:flex;align-items:center}
.brand img{height:40px;width:auto}
.brand-full{padding:14px 16px;display:inline-flex}
.brand-full img{height:auto;width:185px}
.nav{margin-left:auto;display:flex;align-items:center;gap:30px}
.nav ul{list-style:none;display:flex;gap:28px;color:#fff;font-size:16px}
.nav a:hover,.nav a[aria-current="page"]{color:#FF6B70}
.offset-photo .badge b{display:block;font-family:var(--head);font-size:30px;line-height:1.1;margin-bottom:6px}
.menu-toggle{display:none;margin-left:auto;background:none;border:0;color:#fff;cursor:pointer;padding:8px}
.menu-toggle svg{width:28px;height:28px}
/* dropdown */
.nav .has-sub{position:relative}
.nav .sub{display:none;position:absolute;top:100%;left:-20px;min-width:240px;padding:12px 0;margin-top:14px;background:#fff;border:1px solid var(--line);flex-direction:column;gap:0;border-top:2px solid var(--red)}
.nav .sub::before{content:"";position:absolute;top:-16px;left:0;right:0;height:16px}
.nav .sub a{display:block;padding:8px 20px;color:var(--ink);font-size:15px}
.nav .sub a:hover{color:var(--red)}
.nav .has-sub:hover .sub,.nav .has-sub:focus-within .sub{display:flex}
/* sticky white header */
.site-header.light{position:sticky;top:0;z-index:40;background:#fff;border-bottom:1px solid var(--line);transition:box-shadow .25s;overflow-x:clip}
.site-header.scrolled{border-bottom-color:#D6DAE1}
.site-header .mainbar{height:88px}
.site-header.light .brand{padding:0}
.site-header.light .brand img{height:34px}
.site-header.light .brand{margin-right:32px;flex:none}
@media (min-width:1081px){
  .site-header.light .nav{gap:0;align-self:stretch;align-items:stretch}
  .site-header.light .nav>ul{gap:30px;font-size:15.5px;align-items:center;margin-right:36px}
  .site-header.light .nav>ul>li>a{position:relative;display:flex;align-items:center;gap:4px;padding:8px 0;color:var(--ink)}
  .site-header.light .nav>ul>li>a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:3px;border-radius:2px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .25s}
  .site-header.light .nav>ul>li>a:hover::after,.site-header.light .nav>ul>li>a[aria-current="page"]::after{transform:scaleX(1)}
  .site-header.light .nav>ul>li>a:hover,.site-header.light .nav>ul>li>a[aria-current="page"]{color:var(--red)}
  .site-header.light .nav .sub{margin-top:20px}
}
@media (min-width:1081px) and (max-width:1220px){
  .site-header.light .nav>ul{gap:16px!important;font-size:14.5px!important;margin-right:20px!important}
  .site-header.light .brand img{height:30px}
}
@media (min-width:1081px) and (max-width:1480px){
  .site-header.light .brand{margin-right:20px}
  .site-header.light .nav>ul{gap:22px;font-size:15px;margin-right:24px}
}
.caret svg{width:14px;height:14px;stroke-width:2.4}
.has-sub:hover .caret svg{transform:rotate(180deg)}
.caret svg{transition:transform .2s}

/* 5. Page banners --------------------------------------- */
.banner{position:relative;color:#fff;padding:90px 0 80px;background:var(--navy) var(--banner-img) center/cover no-repeat}
.banner::before{content:"";position:absolute;inset:0;background:linear-gradient(var(--grid-line) 1px,transparent 1px) 0 0/48px 48px,linear-gradient(90deg,var(--grid-line) 1px,transparent 1px) 0 0/48px 48px,linear-gradient(90deg,rgba(7,21,47,.93) 0%,rgba(7,21,47,.76) 55%,rgba(7,21,47,.45) 100%)}
.banner .wrap{position:relative}
.banner .eyebrow{color:#fff}
.banner h1{color:#fff;font-size:clamp(44px,4vw,58px);max-width:860px}
.banner p{color:#D8DEE9;font-size:18px;max-width:680px;margin-top:16px}
.crumbs{font-size:14px;color:#AEB8C8;margin-top:28px}
.crumbs a:hover{color:#fff}
.crumbs span{color:#fff}

/* 6. Home ----------------------------------------------- */
/* hero: split layout — solid navy text side, photo on the right bleeding into it */
/* hero: white side with a faint engineering-drawing grid, photo bleeding in from the right */
.hero{position:relative;height:min(76vh,640px);min-height:560px;padding:0;color:#fff;overflow:hidden;background-color:var(--navy);
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:40px 40px}
.hero-media{position:absolute;top:0;right:0;bottom:0;width:56%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.55) 16%,#000 34%);mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.55) 16%,#000 34%)}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:58% 17%}
.hero .wrap{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:center}
.hero .eyebrow{color:#fff;font-weight:600}
.hero h1{color:#fff;max-width:700px;font-size:clamp(40px,3.9vw,58px);line-height:1.08}
.hero p{font-size:18px;color:#D5DEEA;max-width:540px;margin:22px 0 32px}
/* proof card straddling the photo seam */
.hero-proof{position:absolute;z-index:3;left:44%;bottom:28px;display:flex;align-items:center;gap:16px;background:#fff;padding:18px 20px;max-width:340px;
  border:1px solid var(--line);border-left:4px solid var(--red);transition:transform .2s}
.hero-proof:hover{transform:translateY(-3px)}
.hero-proof i{flex:none;width:42px;height:42px;border-radius:50%;background:#E7F5EC;color:#17693A;display:grid;place-items:center}
.hero-proof i svg{width:22px;height:22px}
.hero-proof small{display:block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.hero-proof b{display:block;font-family:var(--head);font-size:15.5px;line-height:1.3;color:var(--ink);margin-top:2px}
.hero-proof em{display:block;font-style:normal;font-size:13.5px;color:var(--text)}
.hero-proof .go{flex:none;color:var(--red)}.hero-proof .go svg{width:20px;height:20px}
/* stats: consistent metrics with a red "node" marker */
.stats{background:#fff;color:var(--ink);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stats .wrap{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
.stats .wrap>div{position:relative;padding:34px 0 34px 30px;border-left:1px solid var(--line)}
.stats .wrap>div::before{content:"";position:absolute;top:-5px;left:-5px;width:9px;height:9px;border-radius:50%;background:var(--red);box-shadow:0 0 0 4px rgba(227,30,36,.25)}
.stats .wrap>div:first-child{border-left:0;padding-left:0}
.stats .wrap>div:first-child::before{left:0}
.stats b{display:block;font-family:var(--display);font-size:44px;line-height:1;color:var(--navy)}
.stats span{display:block;color:var(--ink);font-size:15.5px;margin-top:6px}
.stats small{display:block;color:var(--muted);font-size:13px}
.stats .stat-link{display:block}
.stats .stat-link span{text-decoration:underline;text-decoration-color:rgba(0,48,136,.35);text-underline-offset:4px}
.stats .stat-link:hover span{text-decoration-color:var(--red)}
/* "whole" photos: shown uncropped on a blurred copy of themselves */
.whole{position:relative;overflow:hidden;background:var(--navy)}
.whole::before{content:"";position:absolute;inset:-30px;background:var(--img) center/cover no-repeat;filter:blur(22px) brightness(.6);transform:scale(1.1)}
.whole img{position:relative;z-index:1;width:100%;height:100%;object-fit:contain!important;transform:none!important}
/* one colour treatment for content photography */
.offset-photo img,.svc-tile .img img,.pc-img img,.nw-img img,.pcard .img img,.hero-media img{filter:saturate(1.05) contrast(1.04)}

/* about */
.home-about{padding-top:84px}
/* navy sections: About and Projects */
.home-about,.home-projects{background:var(--navy);color:#C9D2E0}
.home-about h2,.home-about .eyebrow,.home-projects>.wrap>h2,.home-projects>.wrap>.eyebrow{color:#fff}
.home-about .signoff{border-top-color:rgba(255,255,255,.15)}
.home-about .signoff b{color:#fff}
.home-about .signoff small{color:#AEB8C8}
.home-about .signoff i{background:var(--red)}
.home-about .body{margin-top:18px}
.home-about h2{margin-bottom:6px}
.signoff{display:flex;align-items:center;gap:18px;margin-top:30px;padding-top:26px;border-top:1px solid var(--line);position:relative}
.signoff::before{content:"";position:absolute;top:-1px;left:0;width:36px;height:1px;background:var(--red)}
.signoff i{flex:none;width:56px;height:56px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-family:var(--head);font-style:normal;font-weight:700}
.signoff b{display:block;font-family:var(--head);color:var(--ink)}
.signoff small{font-size:14px;color:var(--muted)}
.offset-photo{position:relative;padding:14px 0 0 14px}
.offset-photo::before{content:"";position:absolute;top:0;left:0;width:55%;height:60%;background:var(--red)}
.offset-photo img{position:relative;width:100%;aspect-ratio:1.15/1;object-fit:cover}
.offset-photo .badge{position:absolute;left:34px;bottom:20px;display:flex;align-items:center;gap:8px;background:#fff;color:var(--ink);padding:10px 16px;font-size:14px;font-weight:600;border-left:3px solid var(--red)}
.offset-photo .badge svg{width:17px;height:17px;color:var(--red)}


/* services slider */
.home-services h2{margin-bottom:44px}
.slider{list-style:none;display:flex;gap:30px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;padding-bottom:4px}
.slider::-webkit-scrollbar{display:none}
.svc-tile{flex:0 0 calc((100% - 60px) / 3);scroll-snap-align:start;background:#fff;transition:transform .25s,box-shadow .25s}
.svc-tile:hover{transform:translateY(-4px)}
.svc-tile:hover h3{color:var(--red)}
.svc-tile a{display:flex;flex-direction:column;height:100%}
.svc-tile .img{position:relative;aspect-ratio:16/10;height:auto}
.svc-tile .img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.svc-tile .img{overflow:visible}
.svc-tile a{overflow:hidden}
.svc-tile .img i{position:absolute;z-index:1;left:30px;bottom:-30px;width:60px;height:60px;background:var(--red);color:#fff;display:grid;place-items:center}
.svc-tile .img i svg{width:30px;height:30px}
.svc-tile .body{padding:52px 30px 34px;display:flex;flex-direction:column;flex:1}
.svc-tile h3{margin-bottom:12px}
.svc-tile p{font-size:16px;line-height:1.7;flex:1;margin-bottom:22px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:calc(1.7em * 3)}
.svc-tile h3{min-height:2.6em;margin-bottom:4px;display:flex;align-items:flex-start}
.svc-tile .link-line{align-self:flex-start}
.slider-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:40px}
.slider-nav[hidden]{display:none}
.slider-dots{display:flex;justify-content:center;gap:8px}
.slider-arrow{display:none;width:46px;height:46px;flex:0 0 46px;border-radius:50%;border:1px solid #C9C9C9;background:#fff;color:var(--ink);place-items:center;cursor:pointer;transition:background-color .2s,border-color .2s,color .2s,opacity .2s}
.slider-arrow:hover:not(:disabled){background:var(--red);border-color:var(--red);color:#fff}
.slider-arrow:disabled{opacity:.35;cursor:default}
.slider-arrow svg{width:20px;height:20px}
.slider-arrow.prev svg{transform:rotate(180deg)}
.slider-dots button{width:12px;height:12px;border-radius:50%;border:1px solid #C9C9C9;background:transparent;cursor:pointer}
.slider-dots button.is-active{background:var(--red);border-color:var(--red)}

/* dark photo sections */
.dark-photo{position:relative;color:#fff;background:var(--navy) var(--bg) center/cover no-repeat fixed}
.dark-photo::before{content:"";position:absolute;inset:0;background:rgba(10,26,51,.86)}
.home-why.dark-photo::before{background:rgba(10,26,51,.95)}
.dark-photo>.wrap{position:relative}
.dark-photo h2,.dark-photo h3,.dark-photo .eyebrow{color:#fff}




/* numbers */
.numbers{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:30px;text-align:center}
.numbers i{width:80px;height:80px;margin:0 auto;border-radius:50%;background:var(--red);box-shadow:0 0 0 9px rgba(255,255,255,.08);display:grid;place-items:center;color:#fff}
.numbers i svg{width:32px;height:32px}
.numbers b{display:block;margin-top:30px;font-family:var(--display);font-size:50px;line-height:1;color:#fff}
.numbers span{display:block;margin-top:12px;font-family:var(--head);font-weight:600;color:#fff}
.numbers small{color:var(--red);font-size:12px;margin-right:4px}


/* section header row: title | intro | circle link */
.sec-head{display:grid;grid-template-columns:1fr 1.1fr auto;gap:40px;align-items:end;margin-bottom:48px}
.sec-head h2{margin:0}
.sec-head>p{font-size:16px;margin:0;max-width:420px}
.home-projects .sec-head>p{color:#C9D2E0}
.home-projects .sec-head h2,.home-projects .sec-head .eyebrow{color:#fff}
.circle-link{display:flex;align-items:center;gap:12px;font-family:var(--head);font-weight:600;font-size:14.5px;color:#fff;white-space:nowrap}
.circle-link i{width:42px;height:42px;border-radius:50%;border:1.5px solid currentColor;display:grid;place-items:center;transition:background-color .2s,border-color .2s,color .2s}
.circle-link i svg{width:18px;height:18px}
.circle-link:hover i{background:var(--red);border-color:var(--red);color:#fff}
.circle-link.dark{color:var(--ink)}
.arrow-link{display:inline-flex;align-items:center;gap:8px;font-family:var(--head);font-weight:600;font-size:14.5px;color:var(--ink);border-bottom:1.5px solid var(--red);padding-bottom:2px;white-space:nowrap}
.arrow-link svg{width:18px;height:18px;color:var(--red);transition:transform .2s}
a:hover .arrow-link svg,.arrow-link:hover svg{transform:translateX(3px)}
.btn-arrow{display:inline-flex;align-items:center;gap:10px}.btn-arrow svg{width:18px;height:18px}

/* projects: horizontal cards, image and text side by side */
.home-projects{position:relative;overflow:hidden}
.home-projects::after{content:"";position:absolute;right:-60px;bottom:-60px;width:420px;height:300px;pointer-events:none;opacity:.10;
  background:repeating-linear-gradient(135deg,transparent 0 46px,#fff 46px 47px)}
.pc-list{display:grid;gap:26px}
.pc{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);background:#fff;min-height:340px;position:relative;z-index:1}
.pc.flip{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.pc.flip .pc-img{order:2}
.pc-img{position:relative;overflow:hidden;min-height:300px}
.pc-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.pc:hover .pc-img img{transform:scale(1.03)}
.pc-body{padding:40px 44px;display:flex;flex-direction:column;color:var(--text)}
.pc-cat{font-family:var(--head);font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--red)}
.pc-body h3{font-size:28px;line-height:1.2;margin-top:10px}
.pc-body h3 span{display:block}
.pc-body p{font-size:16px;margin-top:14px}
.pc-foot{margin-top:auto;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:flex-end;gap:16px}
.pc-body p+.pc-foot{margin-top:26px}
.pc-foot ul{list-style:none;display:grid;gap:10px;font-size:14.5px}
.pc-foot li{display:flex;align-items:center;gap:12px}
.pc-foot li svg{width:19px;height:19px;color:var(--red)}

/* news */
.home-news{background:#fff}
.nw-grid{display:grid;grid-template-columns:1fr 1fr;gap:34px}
.nw{display:block;background:#fff;border:1px solid var(--line)}
.nw-img{position:relative;height:250px;overflow:hidden;background:#ddd}
.nw-img img{position:relative;width:100%;height:100%;object-fit:cover}
.nw-img .date{position:absolute;top:18px;left:18px;z-index:2;background:var(--red);color:#fff;font-family:var(--display);font-weight:700;font-size:22px;line-height:1;text-align:center;padding:9px 12px}
.nw-img .date small{display:block;font-size:11px;font-weight:600;margin-bottom:3px}
.nw-body{padding:24px 26px 22px}
.nw-body h3{font-size:20px;line-height:1.3;min-height:52px}
.nw:hover h3{color:var(--red)}
.nw-foot{display:flex;justify-content:space-between;align-items:center;margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font-size:14.5px}
.nw-foot>span:first-child{display:flex;align-items:center;gap:8px}
.nw-foot>span:first-child svg{width:18px;height:18px;color:var(--red)}

/* why DESWA */
.home-why{padding:110px 0}
.wy{display:grid;grid-template-columns:1.1fr 1fr;gap:60px;align-items:center}
.wy-intro p{color:#D0D6E0;margin-top:20px;max-width:500px;font-size:16.5px}
.wy-feats{list-style:none;display:flex;margin-top:40px}
.wy-feats li{display:flex;align-items:center;gap:14px;color:#fff;font-size:14.5px;line-height:1.4;padding:0 26px;border-left:1px solid rgba(255,255,255,.2)}
.wy-feats li:first-child{padding-left:0;border-left:0}
.wy-feats svg{width:34px;height:34px;color:var(--red);flex:none;stroke-width:1.6}
.wy-card{background:#fff;border-top:4px solid var(--red);padding:36px 38px 26px}
.wy-label{font-size:14px;color:var(--muted)}.wy-label span{color:var(--red);font-weight:600}
.wy-card h3{font-size:24px;margin-top:6px;color:var(--ink)!important}
.wy-card ul{list-style:none;margin-top:18px}
.wy-card li{display:grid;grid-template-columns:42px 1fr;padding:15px 0;border-top:1px solid var(--line)}
.wy-card li:first-child{border-top:0}
.wy-card li svg{width:24px;height:24px;color:var(--red);margin-top:2px}
.wy-card li b{display:block;font-family:var(--head);color:var(--ink);font-size:15.5px}
.wy-card li span{font-size:14px;line-height:1.55;color:var(--text)}

/* trusted by: red title panel with a slanted edge, client names on light grey */
.client-band{position:relative;display:grid;grid-template-columns:minmax(300px,32%) 1fr;background:#F1F2F4;overflow:hidden}
.client-band::after{content:"";position:absolute;top:0;right:0;bottom:0;width:70px;background:var(--red);clip-path:polygon(75% 0,100% 0,100% 100%,0 100%)}
.cb-head{position:relative;display:flex;flex-direction:column;justify-content:center;padding:48px 110px 48px 44px;color:#fff;
  background:linear-gradient(135deg,#E8222A 0%,#B3121A 100%);clip-path:polygon(0 0,calc(100% - 110px) 0,100% 100%,0 100%)}
.cb-head small{display:flex;align-items:center;gap:14px;font-size:13px;font-weight:600;letter-spacing:.32em;text-transform:uppercase}
.cb-head small::after{content:"";width:34px;height:1.5px;background:#fff;opacity:.8}
.cb-head h2{color:#fff;font-size:clamp(24px,2.1vw,32px);line-height:1.18;margin-top:12px;max-width:16ch}
.client-band ul{list-style:none;display:flex;flex-wrap:wrap;align-content:center;gap:22px 0;padding:44px 90px 44px 24px;clip-path:inset(0 0 0 24px)}
.client-band li{margin-left:-2px;padding:2px 24px;border-left:2px solid var(--red);color:var(--ink);font-size:16.5px;line-height:1.35}
.client-band img{max-height:40px;width:auto}
@media (max-width:767px){
  .client-band{grid-template-columns:1fr}
  .client-band::after{display:none}
  .cb-head{padding:34px 20px;clip-path:none}
  .client-band ul{padding:26px 20px 30px 20px;gap:14px 0;clip-path:inset(0 0 0 20px)}
  .client-band li{padding:2px 16px;font-size:15px}
}

/* 7. Shared components (inner pages) -------------------- */
/* service list (services page) */
.svc{display:grid;grid-template-columns:1fr 1fr;gap:0 48px;margin-top:48px}
.svc a{display:grid;grid-template-columns:150px 1fr;gap:24px;padding:26px 0;border-top:1px solid var(--line);align-items:start}
.svc a:hover h3{color:var(--red)}
.svc .img{height:120px;overflow:hidden}
.svc .n{font-family:var(--display);font-size:24px;line-height:1;font-weight:700;color:var(--navy)}
.svc h3{margin:3px 0 6px}
.svc p{font-size:16px}
.more{display:inline-block;margin-top:8px;font-family:var(--head);font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);border-bottom:1px solid currentColor}
a:hover .more{color:var(--red)}

/* process steps (how we work) */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:40px var(--gutter);margin-top:48px;list-style:none}
.steps li{border-top:1px solid var(--ink);padding-top:22px}
.steps b{display:block;font-family:var(--display);font-size:46px;line-height:1;font-weight:700;color:var(--navy)}
.steps li:hover b{color:var(--red)}
.steps h3{margin:14px 0 8px;font-size:18px}
.steps p{font-size:16px}
.steps.ten{grid-template-columns:repeat(5,1fr)}
.steps.ten h3{font-size:16px}

/* project cards */
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:48px}
.pcard{background:#fff;border:1px solid var(--line);overflow:hidden;display:flex;flex-direction:column}
.pcard .img{height:300px;overflow:hidden}
.pcard .img img{transition:transform .5s}
.pcard:hover .img img{transform:scale(1.04)}
.pcard .body{padding:28px 30px 30px}
.pcard h3{font-size:22px;margin:14px 0 8px}
.pcard p{font-size:16px}
.tag{display:inline-block;font-family:var(--head);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:4px 10px;background:var(--sky);color:var(--navy);margin-right:6px}
.tag.done{background:#E7F5EC;color:#17693A}

/* fact lists */
.facts{display:grid;grid-template-columns:160px 1fr;margin-top:20px;font-size:15px}
.facts dt,.facts dd{padding:12px 0;border-top:1px solid var(--line)}
.facts dt{color:var(--ink);font-family:var(--head);font-weight:600;font-size:14px}

/* timeline */
.timeline{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);margin-top:28px;position:relative}
.timeline::before{content:"";position:absolute;top:7px;left:7px;right:26%;height:1px;background:var(--red)}
.timeline li{position:relative;padding:26px 14px 0 0}
.timeline li::before{content:"";position:absolute;top:0;left:0;width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid var(--red)}
.timeline li:last-child::before{background:var(--red)}
.timeline b{display:block;color:var(--ink);font-family:var(--head)}
.timeline span{font-size:14px}

/* check list */
.checks{list-style:none;margin-top:30px}
.checks li{display:grid;grid-template-columns:40px 1fr;padding:16px 0;border-top:1px solid var(--line)}
.checks svg{width:22px;height:22px;margin-top:2px;color:var(--red)}
.checks p{font-size:16px}

/* gallery */
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:44px}
.gal .img{height:260px;overflow:hidden}
.gal figcaption{font-size:14px;margin-top:10px}

/* call to action band */
.cta-band{background:var(--navy);color:#fff;padding:80px 0;border-top:6px solid var(--red)}
.cta-band .wrap{display:flex;justify-content:space-between;align-items:center;gap:32px}
.cta-band .eyebrow{color:#fff}
.cta-band h2{color:#fff;font-size:clamp(32px,3vw,44px)}
.cta-band p{color:#C9D2E0;margin-top:8px}

/* service detail aside */
.aside{background:var(--gray);padding:32px}
.aside h3{margin-bottom:12px}
.aside ul{list-style:none}
.aside li{padding:10px 0;border-top:1px solid var(--line);font-size:16px}
.aside li a:hover{color:var(--red)}

/* dark section */
.bg-navy{background:var(--navy);color:#fff}
.bg-navy h2,.bg-navy .eyebrow{color:#fff}


/* cards */
.cards{display:grid;gap:24px;margin-top:44px}
.cards.three{grid-template-columns:repeat(3,1fr)}
.cards.two{grid-template-columns:repeat(2,1fr)}
.card{background:#fff;border:1px solid var(--line);padding:32px 30px 34px}
.bg-gray .card,.bg-paper .card{border-color:#fff}
.card>svg{width:46px;height:46px;padding:10px;background:var(--red);color:#fff}
.card h3{margin:18px 0 8px}
.card p{font-size:16px}
.card .num{display:block;font-family:var(--display);font-size:44px;line-height:1;font-weight:700;color:var(--navy)}
.card.row{display:grid;grid-template-columns:64px 1fr;gap:20px;align-items:start}
.card.row h3{margin-top:4px}
.card .ic{width:56px;height:56px;background:var(--red);color:#fff;display:grid;place-items:center}
.card .ic svg{width:28px;height:28px}

/* ticks list (service pages) */
.ticks{list-style:none!important;margin:14px 0 0!important}
.ticks li{display:grid;grid-template-columns:30px 1fr;padding:10px 0;border-top:1px solid var(--line);margin:0!important}
.ticks svg{width:20px;height:20px;color:var(--red);margin-top:3px}
.prose h3{margin-top:28px}

/* two images side by side (projects) */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:16px;height:480px}

/* director */
.leader{margin-top:28px;padding-top:22px;border-top:1px solid var(--line);display:flex;gap:16px;align-items:center}
.leader i{flex:none;width:52px;height:52px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-style:normal;font-family:var(--head);font-weight:700}
.leader b{font-family:var(--head);color:var(--ink)}
.leader small{display:block;font-size:14px}

/* clients and partners */
.logos{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.logos li{position:relative;display:flex;align-items:center;gap:16px;min-height:104px;padding:22px 24px;background:#fff;border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:background-color .2s}
.logos li::before{content:"";position:absolute;left:-1px;top:-1px;bottom:-1px;width:3px;background:var(--red);transform:scaleY(0);transform-origin:top;transition:transform .25s}
.logos li:hover{background:var(--gray)}
.logos li:hover::before{transform:scaleY(1)}
.logos img{max-height:56px;max-width:100%;width:auto;object-fit:contain;margin:0 auto}
.logos .mono{flex:none;width:48px;height:48px;background:var(--navy);color:#fff;display:grid;place-items:center;font-family:var(--head);font-size:14px;font-weight:700;letter-spacing:.04em;transition:background-color .2s}
.logos li:hover .mono{background:var(--red)}
.logos b{display:block;font-family:var(--head);font-size:15px;font-weight:600;color:var(--ink);line-height:1.35}
.logos small{display:block;margin-top:2px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.logos .logos-cta{grid-column:span var(--s4);justify-content:space-between;background:var(--navy);color:#fff}
.logos .logos-cta::before{display:none}
.logos .logos-cta:hover{background:var(--red)}
.logos-cta a{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;color:#fff}
.logos-cta b{color:#fff}
.logos-cta span{display:block;font-size:14px;color:#C9D4E3}
.logos-cta:hover span{color:#fff}
.logos-cta svg{flex:none;width:22px;height:22px}
@media (max-width:1080px){.logos{grid-template-columns:repeat(2,minmax(0,1fr))}.logos .logos-cta{grid-column:span var(--s2)}}
@media (max-width:560px){.logos .logos-cta{grid-column:auto}}
@media (max-width:560px){.logos{grid-template-columns:1fr}.logos li{min-height:0;padding:16px 18px}}


/* news list page */
.ngrid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:40px}
section>.wrap>.ngrid:first-child{margin-top:0}
.ncard{background:#fff;border:1px solid var(--line);overflow:hidden;display:flex;flex-direction:column}
.ncard .img{height:220px}
.ncard .body{padding:24px 26px 28px}
.ncard h3{margin:6px 0 8px}
.ncard p{font-size:16px}
.ncard:hover h3{color:var(--red)}
/* Blog: section nav, lead guide, FAQ accordion */
.blog-nav{position:sticky;top:92px;z-index:20;background:#fff;border-bottom:1px solid var(--line)}
.blog-nav .wrap{display:flex;gap:32px;overflow-x:auto}
.blog-nav a{padding:18px 0;font-family:var(--head);font-weight:600;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);white-space:nowrap;border-bottom:2px solid transparent}
.blog-nav a:hover{color:var(--red);border-color:var(--red)}
.ncard .meta,.guide-lead .meta{font-size:13px;color:var(--muted)}
.guide-lead{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);background:#fff;border:1px solid var(--line);margin-bottom:30px}
.guide-lead .img{position:relative;min-height:360px;overflow:hidden}
.guide-lead .img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.guide-lead:hover .img img{transform:scale(1.03)}
.guide-lead .body{display:flex;flex-direction:column;justify-content:center;padding:44px 44px 48px;border-top:4px solid var(--red)}
.guide-lead h3{font-size:clamp(22px,2vw,28px);line-height:1.25;margin:8px 0 14px}
.guide-lead p{font-size:16px}
.guide-lead .more{align-self:flex-start;margin-top:18px}
.guide-lead:hover h3{color:var(--red)}
.faq-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px;align-items:start}
.faq-side{position:sticky;top:170px}
.faq-side p{margin-top:16px;font-size:16px}
.faq-cta{display:flex;align-items:center;flex-wrap:wrap;gap:24px;margin-top:28px}
.faq-list{border-top:1px solid #D9DDE3}
.faq-list details{border-bottom:1px solid #D9DDE3}
.faq-list summary{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:22px 0;cursor:pointer;list-style:none;font-family:var(--head);font-weight:600;font-size:17px;line-height:1.35;color:var(--ink)}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";flex:none;width:32px;height:32px;display:grid;place-items:center;border:1px solid #C9CED6;font-size:20px;font-weight:400;line-height:1;color:var(--ink);transition:background-color .2s,color .2s,border-color .2s}
.faq-list details[open] summary::after{content:"\2212";background:var(--red);border-color:var(--red);color:#fff}
.faq-list summary:hover{color:var(--red)}
.faq-a{padding:0 56px 24px 0}
.faq-a p{font-size:16px;line-height:1.7}
@media (max-width:1080px){.guide-lead{grid-template-columns:1fr}.guide-lead .img{min-height:260px}.faq-grid{grid-template-columns:1fr;gap:36px}.faq-side{position:static}}
@media (max-width:1080px){.blog-nav{position:static}}
@media (max-width:767px){.guide-lead .body{padding:28px 24px 32px}.faq-a{padding-right:0}.faq-list summary{font-size:16px}}
.meta{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--red)!important;font-family:var(--head);font-weight:600}
.narrow{max-width:820px}
.article p{font-size:17px}
.article h2,.article h3{margin-top:32px}

/* jobs */
.jobs{list-style:none;margin-top:28px}
.jobs a{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0;border-top:1px solid var(--line)}
.jobs a:hover h3{color:var(--red)}
.jobs p{font-size:14.5px}
/* Careers: text column sits level with the form card and fills its height */
.careers-grid{align-items:start}
@media (min-width:1081px){.careers-grid{gap:64px}}
.careers-main{padding-top:36px}
.careers-main h2{margin-top:0}
.no-jobs{margin-top:32px;padding:26px 28px;background:var(--gray);border-left:3px solid var(--red)}
.no-jobs h3{font-size:19px;margin:0 0 8px}
.no-jobs p{margin:0;font-size:15px;line-height:1.6;color:var(--text)}
.careers-block{margin-top:36px;padding-top:28px;border-top:1px solid var(--line)}
.careers-block h4{font-family:var(--head);font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);margin:0 0 16px}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:10px}
.chips li{padding:8px 14px;border:1px solid var(--line);font-size:14.5px;color:var(--ink);line-height:1.3}
.next-steps{list-style:none;counter-reset:step;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.next-steps li{counter-increment:step}
.next-steps li::before{content:"0" counter(step);display:block;font-family:var(--display);font-size:26px;font-weight:700;line-height:1;color:var(--red);margin-bottom:10px}
.next-steps b{display:block;font-family:var(--head);font-size:15.5px;color:var(--ink);margin-bottom:4px}
.next-steps span{display:block;font-size:14px;line-height:1.55}
@media (max-width:1080px){.careers-main{padding-top:0}}
@media (max-width:560px){.next-steps{grid-template-columns:1fr;gap:18px}.no-jobs{padding:22px 20px}}

/* floating WhatsApp button */
.wa-float{position:fixed;right:max(20px,calc((100vw - var(--frame)) / 2 + 20px));bottom:20px;z-index:50;display:flex;align-items:center;gap:8px;background:#25D366;color:#fff;font-size:15px;padding:12px 18px 12px 14px;border-radius:999px;box-shadow:0 4px 12px rgba(0,0,0,.18);transition:transform .15s}
.wa-float:hover{transform:translateY(-2px)}
.wa-float svg{width:26px;height:26px}

/* 8. Forms ---------------------------------------------- */
.contact-items{margin-top:34px;display:grid;gap:22px}
.contact-items div{display:grid;grid-template-columns:56px 1fr;align-items:center}
.contact-items i{width:44px;height:44px;background:var(--red);color:#fff;display:grid;place-items:center}
.contact-items i.wa{background:#25D366}
.contact-items svg{width:20px;height:20px}
.contact-items b{font-family:var(--head);font-size:17px;color:var(--ink);font-weight:600}
.contact-items a:hover{color:var(--red)}
.contact-items small{display:block;font-family:var(--body);font-weight:400;font-size:15px;color:var(--muted)}
.branches{margin-top:30px;scroll-margin-top:100px}
.branches h3{font-size:18px;margin-bottom:12px}
.branches ul{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.branches li{padding:12px 14px;border:1px solid var(--line);border-left:3px solid var(--red);background:#fff}
.branches li b{display:block;font-family:var(--head);font-size:15.5px;color:var(--ink)}
.branches li span{display:block;font-size:14px;color:var(--muted);margin-top:2px}
form.enquiry{background:var(--gray);padding:40px;display:grid;gap:16px;border-top:6px solid var(--red)}
form.enquiry h3{font-size:24px}
form.enquiry .hint{font-size:14px;color:var(--muted);margin-top:-8px}
form.enquiry label{font-size:14px;color:var(--ink);display:grid;gap:6px}
form.enquiry input,form.enquiry select,form.enquiry textarea{font:inherit;font-size:15px;color:var(--ink);background:#fff;border:1px solid var(--line);padding:13px 15px;width:100%;border-radius:0}
form.enquiry textarea{min-height:120px;resize:vertical}
form.enquiry input:focus,form.enquiry select:focus,form.enquiry textarea:focus{border-color:var(--red);outline:0}
form.enquiry .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
form.enquiry .btn{width:100%}
form.enquiry .btn:disabled{opacity:.7;cursor:wait}
form.enquiry .hp{position:absolute;left:-9999px}
form.enquiry small.hint{margin-top:0}
form.enquiry input[type=file]{padding:10px}
.form-msg{padding:14px 16px;font-size:15px;display:none}
.form-msg.ok{display:block;background:#E7F5EC;color:#17693A}
.form-msg.err{display:block;background:#FDECEC;color:#A11D22}
.field-error{border-color:var(--red)!important}
.map{margin-top:28px;height:280px;overflow:hidden;border:1px solid var(--line)}
.map iframe{width:100%;height:100%;border:0}

/* 9. Footer --------------------------------------------- */
/* white footer so the logo sits on white */
.site-footer{background:#fff;color:var(--text);padding:90px 0 0;font-size:15px;border-top:1px solid var(--line)}
.site-footer .brand-full{padding:0;background:none}
.site-footer .top{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:60px;padding-bottom:50px;border-bottom:1px solid var(--line)}
.site-footer h4{color:var(--ink);font-size:22px;margin-bottom:20px}
.site-footer .top>div>p{margin-top:20px;max-width:380px;line-height:1.8}
.site-footer ul{list-style:none;line-height:2.2}
.site-footer ul.dots li{position:relative;padding-left:16px}
.site-footer ul.dots li::before{content:"";position:absolute;left:0;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--red)}
.site-footer a:hover{color:var(--red)}
.site-footer .staff-link{text-decoration:underline;text-underline-offset:3px;color:#fff}
.site-footer .top{border-bottom:0}
.site-footer .bot{margin-top:0;padding:26px 0 96px;display:flex;justify-content:space-between;gap:16px;font-size:14px;color:#C9D2E0;
  background:var(--navy);box-shadow:0 0 0 100vmax var(--navy);clip-path:inset(0 -40px)}
.site-footer .bot a:hover{color:#FF6B70}
.site-footer .reg>*+*::before{content:"·";margin:0 8px;display:inline-block;text-decoration:none}

/* ---- refinements ---- */
/* header: roomier links */
@media (min-width:1081px){
  .site-header.light .nav>ul{gap:32px}
}
@media (min-width:1081px) and (max-width:1480px){
  .site-header.light .nav>ul{gap:26px}
}
@media (min-width:1081px) and (max-width:1220px){
  .site-header.light .nav>ul{gap:18px!important}
}
/* hero: deliberate, balanced line breaks; larger photo share */
.hero h1{text-wrap:balance;max-width:15ch}
.hero p{text-wrap:pretty}
.hero-media{width:60%}
/* about: scannable fact list */
.about-facts{margin-top:26px;display:grid;gap:0;border-top:1px solid rgba(255,255,255,.15)}
.about-facts>div{display:grid;grid-template-columns:140px 1fr;gap:18px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.15)}
.about-facts dt{font-family:var(--head);font-weight:600;font-size:14px;color:#fff}
.about-facts dd{font-size:15px;color:#C9D2E0}
.about-facts dd a{color:#fff;text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:4px}
.cred-list{list-style:none;display:grid;gap:8px}
.cred-list li{display:flex;align-items:center;gap:10px}
.cred-list svg{width:17px;height:17px;color:var(--red);flex:none}
.home-about .offset-photo img{aspect-ratio:1.05/1}
/* why: columns aligned at the top */
.wy{align-items:start}
.wy-intro{padding-top:20px}
/* footer: unified four-column block */
.site-footer{padding-top:80px}
.site-footer .top{grid-template-columns:1.4fr .9fr 1.1fr 1.2fr;gap:48px;padding-bottom:56px}
.site-footer .brand-full img{width:200px;height:auto}
.site-footer h4{font-size:19px}
.f-contact-list{line-height:1.6!important}
.f-contact-list li+li{margin-top:14px}
.f-contact-list a,.f-contact-list .f-row{display:grid;grid-template-columns:24px 1fr;gap:10px;align-items:start}
.f-contact-list svg{width:18px;height:18px;color:var(--red);margin-top:3px}
.f-contact-list a:hover span{color:var(--red)}
.f-toggle{display:inline-flex;align-items:center;gap:8px;background:none;border:0;padding:0;font:inherit;color:inherit;text-align:left;cursor:default}
.f-toggle svg,.f-actions{display:none}
/* compact footer */
.site-footer{padding-top:48px;font-size:14px}
.site-footer .top{gap:40px;padding-bottom:32px}
.site-footer .brand-full img{width:160px}
.site-footer .top>div>p{margin-top:14px;line-height:1.65}
.site-footer h4{font-size:16px;margin-bottom:12px}
.site-footer ul{line-height:1.8}
.f-contact-list li+li{margin-top:8px}
.site-footer .bot{padding:18px 190px 18px 0;font-size:13px}
@media (max-width:1080px){.site-footer .bot{padding:18px 0 84px}}

/* 10. Responsive ---------------------------------------- */
@media (max-width:1080px){
  .nav{display:none;position:absolute;top:92px;left:0;right:0;background:var(--navy);flex-direction:column;align-items:stretch;gap:0;padding:8px 20px 24px;max-height:calc(100vh - 92px);overflow-y:auto;box-shadow:0 16px 30px rgba(0,0,0,.35)}
  .nav.open{display:flex}
  .nav ul{flex-direction:column;gap:0}
  .nav li a{display:block;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.1)}
  .nav .sub{display:flex;position:static;box-shadow:none;background:none;margin:0 0 6px;padding:0 0 0 14px;min-width:0;border:0}
  .nav .sub::before{display:none}
  .nav .sub a{color:#C9D4E3;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.06)}
  .menu-toggle{display:block}
  .site-footer .top{grid-template-columns:1fr 1fr}
  .hero h1{max-width:none}
  .sec-head{grid-template-columns:1fr auto}
  .sec-head>p{grid-column:1 / -1;grid-row:2}
  .wy{grid-template-columns:1fr}
  .site-header .mainbar{height:76px}
  .site-header.light .nav{top:76px;height:calc(100vh - 76px);height:calc(100dvh - 76px);max-height:none}
  .caret{display:none}
  .site-header.menu-open{background:var(--navy)}
  .svc-tile{flex-basis:calc((100% - 30px) / 2)}
  .cards.three,.ngrid{grid-template-columns:1fr 1fr}
  .numbers{grid-template-columns:1fr 1fr;row-gap:50px}
  .hero h1{max-width:520px}
  .hero-media{width:50%}
  .hero-proof{left:auto;right:24px;bottom:24px}
  .steps.ten,.steps{grid-template-columns:repeat(2,1fr)}
  .client-band .wrap{padding-right:40px}
  .site-footer .top{grid-template-columns:1fr 1fr}
  .dark-photo{background-attachment:scroll}
}
@media (max-width:767px){
  .wrap{padding:0 20px}
  section{padding:72px 0}
  h1,.h1{font-size:38px}
  h2{font-size:30px}
  .banner{padding:60px 0 54px}.banner h1{font-size:34px}.banner p{font-size:16.5px}
  .hero{height:auto;min-height:0}
  .hero-media{position:relative;width:100%;height:auto;-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 55%,transparent 100%)}
  .hero .wrap{height:auto;padding-top:0;padding-bottom:48px;margin-top:-60px}
  .hero p{font-size:16.5px;margin:16px 0 26px}
  .hero .ctas{flex-direction:column}.hero .btn{text-align:center}
  .stats .wrap{grid-auto-flow:row;grid-template-columns:1fr 1fr}
  .stats .wrap>div{padding:22px 0 22px 16px}
  .stats .wrap>div:nth-child(3){border-left:0;padding-left:0}
  .stats .wrap>div:nth-child(n+3){border-top:1px solid var(--line)}
  .stats b{font-size:30px}
  .stats .wrap>div:nth-child(3)::before{left:0}
  .hero-proof{position:relative;left:auto;right:auto;bottom:auto;margin:0 20px 40px;max-width:none}
  .two-col{grid-template-columns:1fr;gap:44px}
  .about-facts>div{grid-template-columns:1fr;gap:4px}
  .offset-photo .badge{position:absolute;left:28px;bottom:14px;margin:0;width:auto}
  .sec-head{grid-template-columns:1fr;gap:16px;margin-bottom:32px}
  .sec-head>p{grid-row:auto}
  .pc,.pc.flip{grid-template-columns:1fr}
  .pc.flip .pc-img{order:0}
  .pc-img{min-height:240px}
  .pc-img.whole{min-height:380px}
  .pc-body{padding:28px 24px}
  .pc-body h3{font-size:22px}
  .pc-foot{flex-direction:column;align-items:flex-start}
  .nw-grid{grid-template-columns:1fr;gap:22px}
  .wy-feats{flex-direction:column;gap:18px}
  .wy-feats li{padding:0;border-left:0}
  .wy-card{padding:28px 22px 18px}
  .svc-tile{flex-basis:86%}
  .slider-nav{margin-top:28px;justify-content:space-between}
  .slider-arrow{display:grid}
  .cards.three,.cards.two,.ngrid{grid-template-columns:1fr}
  .numbers b{font-size:38px}
  .client-band .wrap{flex-direction:column;align-items:flex-start;gap:12px;padding-right:20px}
  .svc{grid-template-columns:1fr}
  .svc a{grid-template-columns:100px 1fr;gap:16px}.svc .img{height:90px}
  .steps,.steps.ten,.pgrid{grid-template-columns:1fr}
  .pcard .img{height:220px}
  .facts{grid-template-columns:120px 1fr}
  .timeline{grid-template-columns:1fr 1fr;row-gap:22px}.timeline::before{display:none}
  .gal{grid-template-columns:1fr 1fr}.gal .img{height:160px}
  .cta-band .wrap{flex-direction:column;align-items:flex-start}
  .cta-band h2{font-size:28px}
  .duo{height:300px}
  .jobs a{flex-direction:column;align-items:flex-start;gap:6px}
  form.enquiry{padding:26px}form.enquiry .row{grid-template-columns:1fr}
  /* mobile footer: brand, tap-to-contact buttons, then collapsible link lists */
  .site-footer{padding:44px 0 0;font-size:14px}
  .site-footer .top{grid-template-columns:1fr;gap:0;padding-bottom:36px}
  .f-brand{display:flex;align-items:center;gap:16px;padding-bottom:26px}
  .f-brand .brand-full{flex:none}
  .site-footer .brand-full img{width:170px;height:auto}
  .site-footer .f-brand p{margin:0;font-size:13.5px;line-height:1.6}
  .f-contact{order:1;padding-bottom:26px}
  .f-contact h4,.f-dup{display:none}
  .f-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px}
  .f-actions a{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 6px 12px;border:1px solid var(--line);border-radius:var(--radius);font-family:var(--head);font-weight:600;font-size:13px;color:var(--ink);transition:border-color .2s,color .2s}
  .f-actions a:hover{border-color:var(--red)}
  .f-actions svg{width:22px;height:22px;color:var(--red)}
  .f-contact-list{font-size:13.5px}
  .f-contact-list li+li{margin-top:0}
  .f-contact-list li:not(.f-dup)+li:not(.f-dup){margin-top:8px}
  .f-links{order:2;border-top:1px solid var(--line)}
  .f-links+.f-links{border-bottom:1px solid var(--line)}
  .site-footer .f-links h4{margin:0;font-size:16px}
  .f-toggle{display:flex;width:100%;justify-content:space-between;padding:16px 0;cursor:pointer}
  .f-toggle svg{display:block;width:18px;height:18px;color:var(--red);transition:transform .2s}
  .f-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
  .site-footer ul.dots{padding:0 0 12px;line-height:1.4}
  .site-footer ul.dots[hidden]{display:none}
  .site-footer ul.dots li{padding-left:0}
  .site-footer ul.dots li::before{display:none}
  .site-footer ul.dots a{display:block;padding:9px 0}
  .site-footer .bot{flex-direction:column;gap:10px;padding-bottom:84px;font-size:13px;line-height:1.6}
  .site-footer .bot{clip-path:inset(0 -20px)}
  .site-footer .reg{display:flex;flex-wrap:wrap;gap:2px 16px;color:#AEB8C8}
  .site-footer .reg>*+*::before{display:none}
  .wa-float span{display:none}
  .wa-float{padding:14px;right:16px;bottom:16px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .slider{scroll-behavior:auto}
  .dark-photo{background-attachment:scroll}
}

/* ---- CMS-driven sections: team, testimonials, equipment ---- */
.team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:26px;margin-top:40px}
.tm{background:#fff;border:1px solid var(--line)}
.tm-img{aspect-ratio:4/5;background:var(--navy);display:grid;place-items:center;overflow:hidden}
.tm-img img{width:100%;height:100%;object-fit:cover}
.tm-img span{font-family:var(--head);font-size:40px;font-weight:700;color:#fff}
.tm h3{margin:18px 20px 2px;font-size:18px}
.tm-role{margin:0 20px;font-size:14px;color:var(--red)}
.tm-bio{margin:10px 20px 0;font-size:14.5px;line-height:1.6}
.tm .more{margin:10px 20px 0}
.tm>*:last-child{margin-bottom:22px}
.tq-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:24px;margin-top:40px}
.tq{background:#fff;border:1px solid var(--line);border-top:4px solid var(--red);padding:30px 30px 26px;margin:0}
.tq blockquote{margin:0;font-size:17px;line-height:1.7;color:var(--ink)}
.tq figcaption{display:flex;align-items:center;gap:14px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line);font-size:14px;color:var(--text)}
.tq figcaption img,.tq figcaption i{width:48px;height:48px;border-radius:50%;object-fit:cover;flex:none;background:var(--navy);color:#fff;display:grid;place-items:center;font-style:normal;font-family:var(--head);font-weight:700}
.tq figcaption b{display:block;font-family:var(--head);color:var(--ink);font-size:15px}
.eq-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:26px}
.eq{background:#fff;border:1px solid var(--line)}
.eq-img{aspect-ratio:16/10;overflow:hidden}.eq-img img{width:100%;height:100%;object-fit:cover}
.eq-body{padding:22px 24px 24px}
.eq-body h3{margin:10px 0 6px}
.eq-meta{font-size:14px;color:var(--muted);margin-top:12px}

/* HSEQ page */
/* HSEQ policy: text left; photo fading in from the top right with the four pillars beneath */
.hseq-sec{padding:0 0 var(--section);background:linear-gradient(180deg,#F7F9FC 0%,#fff 60%);overflow:hidden}
.hseq-policy{display:grid;grid-template-columns:minmax(0,9fr) minmax(0,11fr);gap:40px;align-items:start}
.hp-text{padding-top:72px}
.hp-title{font-size:clamp(40px,4.4vw,64px);line-height:1;letter-spacing:-.035em;color:var(--navy);margin:6px 0 24px}
@media (min-width:1081px){.hp-title{white-space:nowrap}}
.hp-lead{font-size:17px;line-height:1.7;color:var(--text);max-width:560px}
.policy-we{margin-top:34px;font-family:var(--head);font-weight:700;font-size:19px;color:var(--navy)}
.policy-list{list-style:none;margin-top:12px}
.policy-list li{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line);font-size:16px;line-height:1.45;color:var(--ink)}
.policy-list li:last-child{border-bottom:0}
.policy-list i{width:38px;height:38px;display:grid;place-items:center;border:1px solid #DADFE6;border-radius:6px;background:#fff;color:var(--red)}
.policy-list svg{width:20px;height:20px;stroke-width:2.6}
.hp-sign{display:flex;align-items:center;gap:24px;margin-top:30px}
.hp-sign>i{flex:none;width:72px;height:72px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;font-style:normal;font-family:var(--head);font-weight:700;font-size:22px}
.hp-sign>div{padding-left:24px;border-left:1px solid #CBD2DC}
.hp-sign b{display:block;font-family:var(--head);font-size:18px;color:var(--navy)}
.hp-sign em{display:block;margin-top:2px;font-style:normal;font-family:var(--head);font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--red)}
.hp-sign small{display:block;margin-top:8px;font-size:14.5px;line-height:1.5;color:var(--text);max-width:420px}
.hp-visual{position:relative;margin-right:-40px}
.hp-photo{height:540px;margin-left:-60px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%);mask-image:linear-gradient(90deg,transparent 0,#000 30%)}
.hp-photo img{width:100%;height:100%;object-fit:cover;object-position:60% 30%}
.hseq-policy .pillars{position:relative;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:-4px 40px 0 -24px}
.hseq-policy .pillar{padding:26px 22px 28px}
.hseq-policy .pillar b{font-size:19px}
.hseq-policy .pillar p{font-size:14.5px;line-height:1.55}
@media (max-width:1080px){
  .hseq-policy{grid-template-columns:1fr;gap:40px}
  .hp-text{padding-top:64px}
  .hp-visual{margin-right:0}
  .hp-photo{height:400px;margin-left:0;-webkit-mask-image:none;mask-image:none}
  .hseq-policy .pillars{grid-template-columns:repeat(2,minmax(0,1fr));margin:12px 0 0}
}
@media (max-width:767px){
  .hseq-sec{padding-bottom:64px}
  .hp-text{padding-top:48px}
  .hp-photo{height:260px}
  .policy-list li{grid-template-columns:36px 1fr;gap:12px;font-size:15px}
  .policy-list i{width:32px;height:32px}
  .hp-sign{gap:16px}.hp-sign>i{width:56px;height:56px;font-size:18px}.hp-sign>div{padding-left:16px}
}
.pillars{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.pillar{position:relative;display:block;background:var(--navy);color:#C9D4E3;padding:30px 26px 32px;text-decoration:none;overflow:hidden;transition:transform .25s}
.pillar:hover{transform:translateY(-4px)}
.pillar .ic{width:52px;height:52px;background:var(--red);color:#fff;display:grid;place-items:center}
.pillar .ic svg{width:26px;height:26px}
.pillar b{display:block;margin-top:18px;font-family:var(--head);font-size:20px;color:#fff}
.pillar p{margin-top:8px;font-size:15.5px;color:#C9D4E3}
@media (max-width:767px){.pillars{grid-template-columns:1fr 1fr;gap:10px}.pillar{padding:20px 16px 22px}.pillar b{font-size:17px}.pillar p{font-size:13.5px}}

/* About page redesign: varied layouts ------------------- */
section.tight{padding:88px 0}
.sec-split{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--gutter);align-items:end;margin-bottom:48px}
.sec-split h2{margin:0}
.sec-split.stack{grid-template-columns:1fr;gap:16px}
.sec-split.stack h2{max-width:none}
.sec-split.stack>p{justify-self:start;max-width:680px}
@media (min-width:1081px){.sec-split.stack h2{white-space:nowrap}}
.sec-split>p{margin:0;font-size:16px;max-width:520px;justify-self:end}
.bg-navy .sec-split>p{color:#C9D4E3}
.bg-navy .sec-split a{color:#fff}


/* full-width photo band */
.photo-band{position:relative;margin:0;height:min(56vw,520px);overflow:hidden;background:var(--navy)}
.photo-band img{width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.photo-band figcaption{position:absolute;left:0;right:0;bottom:0;padding:70px 0 26px;background:linear-gradient(180deg,transparent,rgba(10,26,51,.85));color:#fff;font-size:15.5px}
.photo-band figcaption span{display:inline-block;margin-right:12px;padding:3px 10px;background:var(--red);font-family:var(--head);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.16em}

/* industries: image-led panels */
.ind-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.ind{position:relative;min-height:420px;overflow:hidden;background:var(--navy);color:#fff;isolation:isolate}
.ind img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .5s}
.ind::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,26,51,0) 30%,rgba(10,26,51,.55) 55%,rgba(10,26,51,.94) 85%)}
.ind:hover img{transform:scale(1.05)}
.ind-body{position:absolute;left:0;right:0;bottom:0;padding:0 24px 26px}
.ind-body i{display:grid;place-items:center;width:40px;height:40px;background:var(--red);margin-bottom:16px}
.ind-body i svg{width:20px;height:20px}
.ind h3{color:#fff;font-size:18px;line-height:1.25;min-height:2.5em;display:flex;align-items:flex-end;margin:0 0 10px}
.ind p{color:#D5DEEA;font-size:14px;line-height:1.55;min-height:4.65em}

/* proof of delivery: project showcase */
.showcase{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.show{position:relative;display:grid;grid-template-rows:280px auto;background:#fff;color:var(--text);text-decoration:none;box-shadow:0 10px 30px rgba(0,0,0,.18);transition:transform .3s,box-shadow .3s}
.show::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--red);z-index:2;transition:height .3s}
.show:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(0,0,0,.32)}
.show:hover::before{height:7px}
.show-img{position:relative;overflow:hidden;background:#EEF1F5}
.show-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.show:hover .show-img img{transform:scale(1.04)}
.show-img.whole::before{content:"";position:absolute;inset:-20px;background:var(--img) center/cover;filter:blur(18px) brightness(.9) saturate(.8);opacity:.7}
.show-img.whole img{position:relative;object-fit:contain}
.show:hover .show-img.whole img{transform:none}
.show-body{display:flex;flex-direction:column;align-items:flex-start;padding:28px 30px 30px}
.show .tag{background:var(--red);color:#fff}
.show h3{color:var(--navy);font-size:22px;margin:14px 0 8px;transition:color .25s}
.show:hover h3{color:var(--red)}
.show p{color:var(--text);font-size:16px}
.show dl{align-self:stretch;display:grid;grid-template-columns:110px 1fr;margin-top:18px;font-size:14px}
.show dt,.show dd{padding:10px 0;border-top:1px solid var(--line)}
.show dt{color:var(--navy);font-family:var(--head);font-weight:600;font-size:13px}
.show .more{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:20px;color:var(--red);border:0}
.show .more::after{content:"\2192";font-size:16px;letter-spacing:0;transition:transform .25s}
.show:hover .more::after{transform:translateX(5px)}


/* HSEQ: safety timeline */
.safety-wrap{align-items:start;gap:64px}
.safety-side{position:sticky;top:120px}
.safety-side .rounded{height:300px;margin-top:28px}
.timeline-v{position:relative;padding-left:34px}
.timeline-v::before{content:"";position:absolute;left:7px;top:8px;bottom:8px;width:2px;background:var(--line)}
.tl-stage+.tl-stage{margin-top:30px}
.tl-label{position:relative;font-size:13px;font-family:var(--head);text-transform:uppercase;letter-spacing:.16em;color:var(--red);margin:0 0 6px}
.tl-label::before{content:"";position:absolute;left:-34px;top:0;width:16px;height:16px;border-radius:50%;background:var(--red);box-shadow:0 0 0 5px #fff}
.timeline-v ul{list-style:none}
.timeline-v li{position:relative;padding:14px 0;border-bottom:1px solid var(--line)}
.timeline-v li::before{content:"";position:absolute;left:-31px;top:22px;width:10px;height:10px;border-radius:50%;background:#fff;border:2px solid var(--navy)}
.timeline-v h4{font-family:var(--head);font-size:17px;color:var(--ink);margin:0 0 4px}
.timeline-v p{font-size:16px}

/* HSEQ: editorial grid (health) */
.ed-grid{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);column-gap:40px}
.ed-grid li{padding:22px 0 24px;border-top:2px solid var(--ink)}
.ed-grid li:nth-child(n+4){border-top-width:1px;border-top-color:var(--line)}
.ed-grid h3{font-size:18px;margin:0 0 6px}
.ed-grid p{font-size:16px}

/* HSEQ: quality on navy */
.q-list{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:0 40px}
.q-list li{display:grid;grid-template-columns:56px 1fr;padding:22px 0;border-top:1px solid rgba(255,255,255,.14)}
.q-list b{font-family:var(--display);color:rgba(255,255,255,.35);font-size:28px;line-height:1}
.q-list h3{color:#fff;font-size:18px;margin:0 0 6px}
.q-list p{color:#C9D4E3;font-size:16px}

/* HSEQ: compliance table */
.law-table{border:1px solid var(--line);background:#fff}
.lt-row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--gutter);padding:16px 24px;border-top:1px solid var(--line);font-size:16px}
.lt-row:nth-child(even){background:#FAFBFC}
.lt-row b{font-family:var(--head);font-weight:600;color:var(--ink);font-size:16.5px}
.lt-head{border-top:0;background:var(--navy)!important;color:#fff;font-family:var(--head);font-weight:600;font-size:12.5px;text-transform:uppercase;letter-spacing:.16em;padding:13px 24px}

/* credentials */
.cred-group{font-size:13px;font-family:var(--head);font-weight:600;text-transform:uppercase;letter-spacing:.16em;color:var(--muted);margin:34px 0 14px;display:flex;align-items:center;gap:14px}
.cred-group::after{content:"";flex:1;height:1px;background:var(--line)}
.sec-split+.cred-group{margin-top:0}
.creds{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.cred{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-top:3px solid var(--navy);padding:26px 26px 22px;transition:border-color .2s,box-shadow .2s}
.cred:hover{border-top-color:var(--red);box-shadow:0 14px 34px rgba(7,21,47,.08)}
.cred-head{display:flex;align-items:flex-start;gap:14px;min-height:84px}
.cred-head>i{flex:none;width:44px;height:44px;background:var(--sky);color:var(--navy);display:grid;place-items:center}
.cred-head>i svg{width:22px;height:22px}
.cred-head>div{flex:1;min-width:0}
.cred-head em{display:block;font-style:normal;font-family:var(--head);font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--red)}
.cred-head small{display:block;margin-top:4px;font-size:13px;line-height:1.4;color:var(--muted)}
.cred-thumb{flex:none;width:62px;height:80px;object-fit:cover;object-position:top;border:1px solid var(--line);box-shadow:0 6px 14px rgba(7,21,47,.12);transform:rotate(3deg);background:#fff}
.cred h4{font-family:var(--head);font-size:18px;line-height:1.3;color:var(--ink);margin:6px 0 16px}
.cred-no{padding:12px 14px;background:var(--gray);border-left:3px solid var(--red)}
.cred-no span{display:block;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.cred-no b{display:block;font-family:var(--head);font-size:15.5px;line-height:1.35;color:var(--navy);letter-spacing:.02em}
.cred dl{display:grid;grid-template-columns:auto 1fr;margin-top:12px;font-size:13.5px}
.cred dt,.cred dd{padding:7px 0;border-bottom:1px solid var(--line)}
.cred dt{color:var(--muted)}
.cred dd{padding-left:16px;color:var(--ink);text-align:right}
.cred-foot{margin-top:auto;padding-top:18px}
.cred-foot .more{margin-top:0}
.cred-status{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:#17693A;background:#E8F4EC;padding:4px 10px 4px 8px}
.cred-status svg{width:16px;height:16px}

/* mobile menu open: WhatsApp button out of the way */
body:has(.site-header.menu-open) .wa-float{display:none}

@media (max-width:1080px){
  .safety-side{position:static}
  .ind-grid{grid-template-columns:repeat(2,1fr)}
  .ed-grid,.q-list{grid-template-columns:1fr 1fr}
  .ed-grid li:nth-child(n+3){border-top-width:1px;border-top-color:var(--line)}
  .creds{grid-template-columns:1fr 1fr}
  .showcase{grid-template-columns:1fr}
}
@media (max-width:767px){
  html{scroll-padding-top:88px}
  section.tight{padding:56px 0}
  .sec-split{grid-template-columns:1fr;gap:12px;margin-bottom:28px}
  .sec-split>p{justify-self:start}
  .photo-band{height:300px}
  .photo-band figcaption{font-size:14px;padding-top:50px}
  .ind-grid{grid-template-columns:1fr}
  .ind{min-height:320px}
  .ind h3,.ind p{min-height:0}
  .ed-grid,.q-list,.creds{grid-template-columns:1fr}
  .ed-grid li{border-top-width:1px!important;border-top-color:var(--line)!important}
  .ed-grid li:first-child{border-top:2px solid var(--ink)!important}
  .show{grid-template-rows:220px auto}
  .show dl{grid-template-columns:96px 1fr}
  .lt-row{grid-template-columns:1fr;gap:4px;padding:14px 18px}
  .lt-head{display:none}
  .safety-side .rounded{height:220px}
}

/* About: vision and mission, HSEQ management line ------ */
/* intro: facts beside a team photo with a badge */
.ab-title{font-size:clamp(40px,4.6vw,60px);line-height:1;margin:0 0 8px}
.ab-ctas{margin-top:32px}
.ab-ctas .btn{display:inline-flex;align-items:center;gap:10px}
.ab-ctas svg{width:18px;height:18px;flex:none}
.ab-photo{position:relative;height:600px;overflow:hidden;margin:0}
.ab-photo figcaption{position:absolute;left:24px;right:24px;bottom:24px;display:flex;align-items:center;gap:16px;max-width:380px;padding:16px 20px;background:rgba(7,21,47,.92);color:#C9D2E0;font-size:14px;line-height:1.45}
.ab-photo figcaption i{width:44px;height:44px;display:grid;place-items:center;background:var(--red);color:#fff;flex:none}
.ab-photo figcaption svg{width:22px;height:22px}
.ab-photo figcaption b{display:block;font-family:var(--head);font-size:16px;color:#fff}

/* vision and mission: two photo cards */
.ab-vm{padding:24px 0 96px}
.ab-vm-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.ab-vm-card{position:relative;min-height:400px;overflow:hidden;display:flex;align-items:center}
.ab-vm-card>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s}
.ab-vm-card:hover>img{transform:scale(1.03)}
.ab-vm-card.dark>img{object-position:70% 50%}
.ab-vm-card.light>img{object-position:85% 50%}
.ab-vm-card::before{content:"";position:absolute;inset:0;z-index:1}
.ab-vm-card.dark::before{background:linear-gradient(90deg,rgba(7,21,47,.92) 0%,rgba(7,21,47,.7) 50%,rgba(7,21,47,.15) 100%)}
.ab-vm-card.light::before{background:linear-gradient(90deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.82) 48%,rgba(255,255,255,0) 78%)}
.ab-vm-body{position:relative;z-index:2;max-width:58%;padding:48px 0 48px 44px}
.ab-giant{position:relative;padding-top:22px;font-family:var(--display);font-size:clamp(40px,4.2vw,60px);line-height:.95;text-transform:uppercase;color:var(--navy);margin:0}
.ab-giant::before{content:"";position:absolute;top:0;left:0;width:44px;height:4px;background:var(--red)}
.ab-vm-card.dark .ab-giant{color:#fff}
.ab-vm-body p{margin-top:22px;padding-left:18px;border-left:1px solid currentColor;font-family:var(--head);font-weight:500;font-size:clamp(15px,1.15vw,17px);line-height:1.55;color:var(--ink)}
.ab-vm-card.dark .ab-vm-body p{color:#fff;border-color:rgba(255,255,255,.6)}

/* values: icon grid */
.values-grid{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:48px}
.values-grid li{display:grid;grid-template-columns:68px 1fr;gap:20px;padding:32px 28px;border-left:1px solid var(--line)}
.values-grid li:nth-child(3n+1){border-left:0;padding-left:0}
.values-grid li:nth-child(n+4){border-top:1px solid var(--line)}
.values-grid i{width:68px;height:68px;border-radius:50%;display:grid;place-items:center;background:#FCE4E5;color:var(--red);transition:background-color .25s,color .25s}
.values-grid li:hover i{background:var(--red);color:#fff}
.values-grid svg{width:30px;height:30px}
.values-grid h3{font-size:20px;margin:4px 0 6px}
.values-grid p{font-size:16px}

/* HSEQ management system: horizontal plan-do-check-act line */
.pdca-sec{padding:110px 0;background-color:var(--navy);color:#C9D2E0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:48px 48px}
.pdca-sec h2,.pdca-sec .eyebrow{color:#fff}
.pdca-sec .sec-split>p{color:#C9D4E3}
.pdca-sec .sec-split a{color:#fff}
.pdca{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:24px}
.pdca li{padding-right:28px}
.pdca-head{display:flex;align-items:center;gap:14px}
.pdca-head span{font-family:var(--display);font-weight:700;font-size:clamp(48px,5vw,68px);line-height:1;letter-spacing:-.04em;color:#fff}
.pdca-head h3{font-size:17px;letter-spacing:.16em;text-transform:uppercase;color:#fff}
.pdca-head::after{content:"";flex:1;height:1px;margin-right:-14px;background:rgba(255,255,255,.35)}
.pdca li:last-child .pdca-head::after{display:none}
.pdca em{position:relative;display:block;margin-top:14px;padding-top:40px;font-style:normal;font-family:var(--head);font-weight:600;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--red)}
.pdca em::before{content:"";position:absolute;top:0;left:24px;width:1px;height:28px;background:rgba(255,255,255,.35)}
.pdca p{margin-top:8px;font-size:16px;color:#C9D2E0;max-width:290px}

@media (max-width:1080px){
  .ab-vm-grid{grid-template-columns:1fr}
  .ab-photo{height:480px}
  .values-grid{grid-template-columns:1fr 1fr}
  .values-grid li,.values-grid li:nth-child(n){border-left:0;padding:28px 24px 28px 0;border-top:1px solid var(--line)}
  .values-grid li:nth-child(-n+2){border-top:0}
  .pdca{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:48px}
  .pdca li:nth-child(2n) .pdca-head::after{display:none}
}
@media (max-width:767px){
  .ab-vm{padding:8px 0 64px}
  .ab-photo{height:380px}
  .ab-photo figcaption{left:12px;right:12px;bottom:12px}
  .ab-vm-card{min-height:0}
  .ab-vm-body{max-width:none;padding:40px 24px}
  .ab-vm-card.dark::before{background:rgba(7,21,47,.78)}
  .ab-vm-card.light::before{background:rgba(255,255,255,.86)}
  .ab-giant{font-size:40px}
  .ab-vm-body p{font-size:16px}
  .values-grid{grid-template-columns:1fr}
  .values-grid li:nth-child(n){padding:24px 0;border-top:1px solid var(--line)}
  .values-grid li:first-child{border-top:0}
  .pdca-sec{padding:72px 0}
  .pdca{grid-template-columns:1fr;row-gap:40px}
  .pdca-head::after{display:none}
}

/* Homepage utility callout and client authority form */
.utility-band{background:var(--gray);border-top:1px solid var(--line)}
.utility-inner{display:flex;align-items:center;justify-content:space-between;gap:48px}
.utility-inner>div:first-child{max-width:760px}
.utility-inner h2{font-size:clamp(32px,3.2vw,44px);font-weight:800}
.utility-inner p{margin-top:14px;max-width:740px}
.utility-inner .ctas{flex:none}
.utility-inner .btn{display:inline-flex;align-items:center;gap:12px}
.utility-inner .btn svg{width:19px;height:19px;flex:none}
.consent-wrap{max-width:1040px}
.consent-wrap>h2{max-width:900px}
.consent-privacy{margin-top:20px;padding:16px 20px;background:#F4F4F4;border-left:3px solid var(--navy);font-size:15px}
.consent-form{display:grid;gap:24px;margin-top:36px;padding:clamp(24px,4vw,48px);background:#F4F4F4;border-top:6px solid var(--red)}
.consent-form h3{font-size:20px}
.consent-fields,.consent-dates{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.consent-form label{display:grid;gap:6px;color:var(--ink);font-size:14px}
.consent-form input:not([type=checkbox]),.consent-form textarea{width:100%;min-height:48px;padding:11px 13px;border:1px solid var(--line);border-radius:0;background:#fff;color:var(--ink);font:inherit;font-size:15px}
.consent-form input:focus{outline:2px solid var(--navy);outline-offset:1px}
.consent-form input[type=checkbox]{width:18px;height:18px;margin:2px 0 0;accent-color:var(--red);flex:none}
.authority-options,.signature-group,.advocate-fields{min-width:0;border:1px solid #D8DCE4;padding:20px}
.authority-options legend,.signature-group legend,.advocate-fields legend{padding:0 8px;font-family:var(--head);font-weight:600;color:var(--ink)}
.authority-options legend span,.advocate-fields legend span{display:block;font-family:var(--body);font-size:14px;font-weight:400;color:var(--text)}
.authority-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 24px}
.authority-options legend{grid-column:1/-1}
.authority-options label,.consent-ack,.typed-signature{display:flex!important;align-items:flex-start;gap:10px}
.scope-error,.signature-error{grid-column:1/-1;color:#A11D22;font-size:14px}
.consent-terms{padding:22px;background:#fff;border:1px solid var(--line)}
.consent-terms h3:not(:first-child){margin-top:24px}
.consent-terms p,.consent-terms ul{margin-top:10px;font-size:15px}
.consent-terms ul{padding-left:22px}
.consent-terms li+li{margin-top:6px}
.consent-signatures{display:grid;gap:18px}
.signature-pad{display:block;width:100%;height:150px;background:#fff;border:1px solid #C8CDD6;touch-action:none;cursor:crosshair}
.signature-actions{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:10px;font-size:13px;color:var(--muted)}
.signature-actions .btn{padding:9px 14px;font-size:12px}
.typed-signature{padding-top:6px}
.typed-signature span{font-size:13px}
.attestation-space{margin-top:20px}
.consent-ack{font-size:15px!important}
.consent-form>.btn{justify-self:start}
.consent-status{padding:12px 16px;background:#FDECEC;color:#A11D22}
.consent-status:not([hidden]){display:block}
.print-instructions{font-size:14px;color:var(--muted)}
.consent-contact{display:grid;gap:4px;margin-top:30px;padding:22px;border:1px solid var(--line)}
.consent-contact b{font-family:var(--head);color:var(--ink)}
.consent-contact a{color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.consent-print{display:none}

/* services page: core service cards, light and navy alternating */
.svc-cards{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.svc-card a{display:flex;flex-direction:column;height:100%;background:#F7F8FA;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;color:var(--text);transition:border-color .25s}
.svc-card .img{aspect-ratio:16/9;overflow:hidden;background:var(--navy)}
.svc-card .img img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.svc-card a:hover .img img{transform:scale(1.04)}
.svc-card .body{position:relative;flex:1;display:flex;flex-direction:column;padding:26px 30px 30px 82px}
.svc-card .body::before{content:"";position:absolute;left:28px;top:36px;width:36px;height:3px;background:var(--red)}
.svc-card .n{font-family:var(--head);font-weight:600;font-size:16px;color:#8A93A3}
.svc-card h3{font-size:22px;margin:6px 0 10px}
.svc-card p{font-size:16px;flex:1}
.svc-card .go{display:inline-flex;align-items:center;gap:10px;margin-top:20px;font-family:var(--head);font-weight:600;font-size:15px;color:var(--ink)}
.svc-card .go svg{width:18px;height:18px;color:var(--red);transition:transform .2s}
.svc-card a:hover .go svg{transform:translateX(4px)}
.svc-card a:hover{border-color:#C9CED8}
.svc-card.dark a{background:var(--navy);border-color:var(--navy);color:#C9D2E0}
.svc-card.dark h3,.svc-card.dark .go{color:#fff}
.svc-card.dark .n{color:#7F8BA3}
@media (max-width:1080px){
  .utility-inner{align-items:flex-start;flex-direction:column}
  .utility-inner .ctas{flex-wrap:wrap}
  .svc-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:767px){
  .utility-inner{gap:26px}
  .consent-fields,.consent-dates,.authority-options{grid-template-columns:1fr}
  .authority-options legend{grid-column:auto}
  .consent-form{padding:24px 18px}
  .authority-options,.signature-group,.advocate-fields{padding:16px}
  .signature-actions{align-items:flex-start;flex-direction:column}
  .consent-form>.btn{width:100%}
  .svc-cards{grid-template-columns:1fr}
  .svc-card .body{padding:22px 22px 26px 66px}
  .svc-card .body::before{left:20px;top:32px;width:30px}
}

@media print{
  @page{size:A4;margin:16mm}
  html,body{max-width:none!important;margin:0!important;background:#fff!important;box-shadow:none!important}
  body.page-authority{font:10.5pt/1.45 Arial,Helvetica,sans-serif;color:#111;overflow:visible}
  body.page-authority>:not(main){display:none!important}
  body.page-authority>main{display:block!important;margin:0!important;padding:0!important}
  body.page-authority>main>:not(.consent-print){display:none!important}
  body.page-authority .consent-print{display:block!important;color:#111;font:10.5pt/1.45 Arial,Helvetica,sans-serif}
  .consent-print .print-kicker{font-size:9pt;letter-spacing:.12em;color:#555}
  .consent-print h1{margin:8px 0;font:bold 20pt/1.1 Arial,Helvetica,sans-serif;color:#07152F}
  .consent-print h2{margin:0 0 18px;font:bold 12pt/1.3 Arial,Helvetica,sans-serif;color:#111}
  .consent-print h3{margin:18px 0 6px;padding-top:6px;border-top:1px solid #9BA2AE;font:bold 11pt/1.3 Arial,Helvetica,sans-serif;color:#07152F;break-after:avoid}
  .consent-print p{margin:5px 0}
  .consent-print .print-lead{margin:12px 0}
  .consent-print .print-field{break-inside:avoid}
  .consent-print .print-field b{font-weight:700}
  .consent-print ol,.consent-print ul{margin:6px 0 10px;padding-left:24px}
  .consent-print li{margin:3px 0}
  .consent-print .print-signature-image{display:block;max-width:280px;height:68px;object-fit:contain;object-position:left center}
  .consent-print .print-signature-typed{margin:12px 0;padding:8px 0;border-bottom:1px solid #555;font-style:italic}
  .consent-print .print-legal-note{margin-top:20px;padding-top:8px;border-top:1px solid #9BA2AE;font-size:9pt;color:#555}
}

  /* Homepage Kenya Power hero */
  .hero{height:auto;min-height:clamp(700px,76vh,790px);background:var(--navy);color:#fff;isolation:isolate}
  .hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,#07152F 0%,rgba(7,21,47,.97) 33%,rgba(10,32,72,.86) 47%,rgba(13,42,94,.55) 61%,rgba(13,42,94,.1) 78%,transparent 100%),linear-gradient(0deg,rgba(7,21,47,.92) 0%,rgba(7,21,47,.5) 11%,transparent 30%)}
  .hero-media{position:absolute;inset:0;width:100%;height:100%;-webkit-mask-image:none;mask-image:none}
  .hero-media img{width:100%;height:100%;object-fit:cover;object-position:70% 42%;filter:saturate(.86) contrast(1.02)}
  .hero .wrap{height:auto;min-height:100%;justify-content:flex-start;padding-top:clamp(72px,7vw,108px);padding-bottom:200px}
  .hero .eyebrow{color:#fff;font-weight:500}
  .hero h1{max-width:1040px;color:#fff;font-size:clamp(54px,5.3vw,76px);line-height:.99;text-wrap:balance}
  .hero h1 .hl{display:block;color:#fff}
  .hero .hero-period{color:var(--red)}
  .hero p{max-width:730px;margin:18px 0 22px;color:#D5DEEA;font-size:18px;line-height:1.55;text-wrap:pretty}
  .hero .ctas{gap:14px;flex-wrap:wrap}
  .hero .ctas .btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:17px 25px}
  .hero .ctas .btn svg{width:19px;height:19px;transition:transform .2s}
  .hero .ctas .btn:hover svg{transform:translateX(3px)}
  .hero .btn.outline{border-color:rgba(255,255,255,.7);color:#fff}
  .hero .btn.outline:hover{background:#fff;color:var(--navy)}
  .hero .stats{position:absolute;z-index:3;left:50%;bottom:24px;transform:translateX(-50%);width:calc(100% - 72px);max-width:1320px;border:0;border-radius:18px;background:rgba(255,255,255,.94);box-shadow:0 14px 38px rgba(19,36,63,.18);backdrop-filter:blur(12px)}
  .hero .stats .wrap{min-height:0;height:auto;max-width:none;padding:20px 34px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-flow:row;grid-auto-columns:auto}
  .hero .stats .wrap>div{padding:4px 18px;text-align:center;border-left:1px solid #D9DDE4}
  .hero .stats .wrap>div:first-child{border-left:0;padding-left:18px}
  .hero .stats .wrap>div::before{display:none}
  .hero .stats b{font-size:clamp(34px,3.3vw,48px)}
  .hero .stats span{margin-top:8px;font-size:16px}
  .hero .stats small{margin-top:4px;font-size:14px}

  @media (max-width:1080px){
    .hero{min-height:clamp(700px,80vh,790px)}
    .hero h1{max-width:min(100%,1040px)}
    .hero .wrap{padding-top:76px}
    .hero p{max-width:640px}
  }
  @media (max-width:767px){
    .hero{display:flex;height:auto;min-height:0;padding-bottom:0;flex-direction:column;background:var(--navy)}
    .hero::before{display:none}
    .hero-media{position:relative;inset:auto;width:100%;height:270px;order:0}
    .hero-media img{object-position:68% 62%}
    .hero .wrap{min-height:0;order:1;padding:28px 20px 26px}
    .hero .eyebrow{font-size:11px;letter-spacing:.13em}
    .hero h1{max-width:none;font-size:clamp(32px,9.5vw,40px);line-height:1.02}
    .hero p{margin:14px 0 20px;font-size:16px;line-height:1.5}
    .hero .ctas{flex-direction:column;align-items:stretch;gap:10px}
    .hero .ctas .btn{width:100%;padding:15px 16px}
    .hero .stats{position:relative;left:auto;bottom:auto;order:2;transform:none;width:auto;margin:0 16px 20px;border-radius:14px}
    .hero .stats .wrap{margin:0;grid-template-columns:repeat(2,minmax(0,1fr));padding:14px 20px}
    .hero .stats .wrap>div{padding:14px 4px;border-left:1px solid #D9DDE4}
    .hero .stats .wrap>div:nth-child(odd){border-left:0}
    .hero .stats .wrap>div:first-child{padding-left:4px}
    .hero .stats .wrap>div:nth-child(3){grid-column:1/-1;border-left:0;border-top:1px solid #D9DDE4}
    .hero .stats b{font-size:32px}
    .hero .stats span{font-size:14px}
    .hero .stats small{font-size:12px}
  }

/* =========================================================
   Projects page (Oct 2026): figures, featured project, filters,
   project cards, coverage map and gallery mosaic
   ========================================================= */
.pj-figs{background:var(--navy);color:#fff;padding:0}
.pj-figs ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.pj-figs li{padding:30px 28px;border-left:1px solid rgba(255,255,255,.12)}
.pj-figs li:first-child{border-left:0;padding-left:0}
.pj-figs b{display:block;font-family:var(--display);font-size:clamp(30px,3vw,42px);line-height:1;color:#fff}
.pj-figs span{display:block;margin-top:8px;font-size:14.5px;color:#C9D2E0}

.pj-feature-sec{padding-bottom:0}
.pj-feature{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);margin-top:18px;background:#fff;border:1px solid var(--line);color:inherit;text-decoration:none;overflow:hidden}
.pj-feature-img{position:relative;min-height:420px;overflow:hidden}
.pj-feature-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s}
.pj-feature:hover .pj-feature-img img{transform:scale(1.03)}
.pj-feature-body{padding:40px 40px 38px;display:flex;flex-direction:column;border-top:4px solid var(--red)}
.pj-feature-body h2{font-size:clamp(24px,2.2vw,32px);line-height:1.15;margin:14px 0 12px}
.pj-feature-body>p{font-size:16px;margin:0 0 18px}
.pj-feature dl{margin:0 0 26px;display:grid;gap:0}
.pj-feature dl>div{display:grid;grid-template-columns:110px 1fr;gap:14px;padding:10px 0;border-top:1px solid var(--line);font-size:14.5px}
.pj-feature dt{font-family:var(--head);font-weight:600;color:var(--ink)}
.pj-feature dd{margin:0}
.pj-feature .btn{align-self:flex-start;margin-top:auto;display:inline-flex;align-items:center;gap:10px}
.pj-feature .btn svg{width:18px;height:18px}
.pj-tags{display:flex;flex-wrap:wrap;gap:6px}

.pj-filter{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.pj-filter button{font:600 13.5px var(--head);letter-spacing:.02em;padding:10px 16px;border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;transition:border-color .15s,background .15s,color .15s}
.pj-filter button i{font-style:normal;margin-left:4px;color:var(--muted)}
.pj-filter button:hover{border-color:var(--ink)}
.pj-filter button.on{background:var(--navy);border-color:var(--navy);color:#fff}
.pj-filter button.on i{color:#C9D2E0}

.pj-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.pj-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);color:inherit;text-decoration:none;transition:border-color .2s,box-shadow .2s}
.pj-card[hidden]{display:none}
.pj-card:hover{border-color:#C9CED8;box-shadow:0 14px 34px rgba(7,21,47,.08)}
.pj-img{position:relative;height:220px;overflow:hidden;background:var(--navy)}
.pj-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.pj-card:hover .pj-img img{transform:scale(1.04)}
.pj-img.none{display:grid;place-items:center;background:var(--navy) linear-gradient(115deg,transparent 0 70%,var(--red) 70% 73%,transparent 73%)}
.pj-img.none span{display:flex;flex-direction:column;align-items:center;gap:10px;color:#fff}
.pj-img.none svg{width:40px;height:40px;color:var(--red)}
.pj-img.none em{font:600 12px var(--head);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:#C9D2E0}
.pj-count{position:absolute;right:12px;bottom:12px;font:600 12px var(--head);font-style:normal;color:#fff;background:rgba(7,21,47,.78);padding:5px 10px}
.pj-body{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1}
.pj-body h3{font-size:19px;line-height:1.25;margin:12px 0 8px}
.pj-meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:0 0 10px!important;font-size:13.5px!important;color:var(--muted)}
.pj-meta svg{width:15px;height:15px;color:var(--red)}
.pj-meta em{font-style:normal;color:var(--line)}
.pj-body>p:not(.pj-meta){font-size:15px;margin:0 0 14px}
.pj-body .more{margin-top:auto}
.pj-empty{margin-top:24px;color:var(--muted)}

.pj-map-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}
.pj-legend{list-style:none;margin:22px 0 28px;padding:0;display:flex;flex-wrap:wrap;gap:22px;font-size:14.5px}
.pj-legend li{display:flex;align-items:center;gap:10px}
.pj-legend .d{width:14px;height:14px;border-radius:50%;display:inline-block}
.pj-legend .d.project{background:var(--red);box-shadow:0 0 0 4px rgba(227,30,36,.18)}
.pj-legend .d.branch{background:#fff;border:3px solid var(--navy);box-sizing:border-box}
.pj-map{margin:0}
.pj-map svg{width:100%;height:auto;display:block;max-width:520px;margin:0 auto}
.pj-map .land{fill:#E4E8EF;stroke:#B8C2D1;stroke-width:1.5;stroke-linejoin:round}
.pj-map .halo{fill:rgba(227,30,36,.16)}
.pj-map .pt .dot{fill:var(--red);stroke:#fff;stroke-width:2}
.pj-map .pt.branch .dot{fill:#fff;stroke:var(--navy);stroke-width:3}
.pj-map .pt.both .dot,.pj-map .pt.hq .dot{fill:var(--red);stroke:var(--navy);stroke-width:3}
.pj-map text{font:600 12.5px var(--head);fill:var(--ink);paint-order:stroke;stroke:#F4F4F2;stroke-width:4px;stroke-linejoin:round}
.pj-map .pt.hq text{font-size:13.5px;fill:var(--navy)}
.pj-map figcaption{text-align:center;font-size:12.5px;color:var(--muted);margin-top:8px}

.pj-mosaic{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:200px;gap:14px}
.pj-mosaic figure{position:relative;margin:0;overflow:hidden;background:var(--navy)}
.pj-mosaic figure:nth-child(1){grid-column:span 2;grid-row:span 2}
.pj-mosaic figure:nth-child(6){grid-column:span 2}
.pj-mosaic .img{height:100%}
.pj-mosaic .img img,.pj-mosaic .img video{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.pj-mosaic figure:hover .img img{transform:scale(1.04)}
.pj-mosaic figcaption{position:absolute;left:0;right:0;bottom:0;margin:0;padding:28px 14px 12px;font-size:13.5px;color:#fff;background:linear-gradient(180deg,transparent,rgba(7,21,47,.85));opacity:0;transition:opacity .25s}
.pj-mosaic figure:hover figcaption,.pj-mosaic figure:focus-within figcaption{opacity:1}
.pj-more{margin-top:28px}
.pj-more summary{list-style:none;cursor:pointer;text-align:center}
.pj-more summary::-webkit-details-marker{display:none}
.pj-more[open] summary .btn{display:none}
.pj-more .gal{margin-top:0}

@media (max-width:1080px){
  .pj-figs ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pj-figs li:nth-child(3){border-left:0;padding-left:0}
  .pj-figs li:nth-child(n+3){border-top:1px solid rgba(255,255,255,.12)}
  .pj-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pj-feature{grid-template-columns:1fr}
  .pj-feature-img{min-height:300px}
  .pj-map-wrap{grid-template-columns:1fr;gap:24px}
}
@media (max-width:767px){
  .pj-figs li{padding:20px 14px}
  .pj-figs li:nth-child(odd){padding-left:0}
  .pj-figs span{font-size:13px}
  .pj-feature-body{padding:26px 20px 24px}
  .pj-feature dl>div{grid-template-columns:1fr;gap:2px}
  .pj-filter{justify-content:flex-start;margin-top:16px}
  .pj-filter button{padding:9px 12px;font-size:12.5px}
  .pj-grid{grid-template-columns:1fr;gap:18px}
  .pj-img{height:200px}
  .pj-mosaic{grid-template-columns:1fr 1fr;grid-auto-rows:140px;gap:8px}
  .pj-mosaic figure:nth-child(6){grid-column:auto}
  .pj-mosaic figcaption{opacity:1;font-size:12px;padding:20px 10px 8px}
}
.pj-map-sec .btn{display:inline-flex;align-items:center;gap:10px}
.pj-map-sec .btn svg{width:18px;height:18px}
.pj-more summary .btn{display:inline-flex}
.pj-map .sea{font:500 11px var(--head);letter-spacing:.18em;fill:#8C98AB;stroke:none;text-transform:uppercase}

/* =========================================================
   Projects v2 (from the DESWA projects page design): figures card over
   the banner, toolbar, cards with sector badges, load more, and the
   single-project layout with a facts sidebar
   ========================================================= */
.pj-figs-sec{position:relative;z-index:2;padding:0;margin-top:-58px}
.pj-figs-sec .pj-figs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:#fff;box-shadow:0 18px 44px rgba(7,21,47,.12);border-top:3px solid var(--red)}
.pj-figs-sec .pj-figs li,.pj-figs-sec .pj-figs li:first-child{padding:26px 28px;border-left:1px solid var(--line)}
.pj-figs-sec .pj-figs li:first-child{border-left:0}
.pj-figs-sec .pj-figs b{display:block;font-family:var(--display);font-size:clamp(28px,2.8vw,40px);line-height:1;color:var(--navy)}
.pj-figs-sec .pj-figs span{display:block;margin-top:8px;font-size:14px;color:var(--muted)}

.pj-list{padding-top:56px}
.pj-tools{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:28px}
.pj-tools .pj-filter{justify-content:flex-start}
.pj-sort{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted)}
.pj-sort select{font:inherit;color:var(--ink);border:1px solid var(--line);background:#fff;padding:9px 30px 9px 12px;cursor:pointer}

.pj-card .pj-img{height:210px}
.pj-sector{position:absolute;top:12px;left:12px;font:700 11px var(--head);letter-spacing:.12em;text-transform:uppercase;color:#fff;background:var(--red);padding:5px 9px}
.pj-status{position:absolute;top:12px;right:12px;font:700 11px var(--head);letter-spacing:.12em;text-transform:uppercase;color:#fff;background:var(--navy);padding:5px 9px}
.pj-card .pj-body{padding:20px 22px 18px}
.pj-card h3{font-size:18px;line-height:1.3;margin:0 0 8px}
.pj-card .pj-meta{margin:0 0 14px!important}
.pj-card .pj-meta .yr{margin-left:6px}
.pj-line{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:auto 0 0!important;padding-top:14px;border-top:1px solid var(--line);font-size:14px!important;color:var(--text)}
.pj-line svg{flex:none;width:18px;height:18px;color:var(--red);transition:transform .2s}
.pj-card:hover .pj-line svg{transform:translateX(4px)}
.pj-card:hover h3{color:var(--red)}
.pj-more-wrap{text-align:center;margin-top:36px}

/* single project */
.pd-wrap{display:grid;grid-template-columns:minmax(0,1fr) 370px;gap:56px;align-items:start}
.pd-main>h2{font-size:clamp(22px,2vw,28px);margin:44px 0 16px}
.pd-main>h2:first-child{margin-top:0}
.pd-about p{font-size:16.5px}
.pd-scope{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px 28px}
.pd-scope li{position:relative;padding-left:24px;font-size:15.5px;line-height:1.45}
.pd-scope li::before{content:"";position:absolute;left:0;top:5px;width:12px;height:12px;background:var(--red);clip-path:polygon(0 0,100% 0,100% 70%,70% 100%,0 100%)}
.pd-gal{display:grid;gap:12px}
.pd-gal figure{position:relative;margin:0;overflow:hidden;background:var(--navy)}
.pd-gal img{width:100%;height:100%;object-fit:cover}
.pd-gal figcaption{position:absolute;left:10px;bottom:10px;margin:0;font:600 11px var(--head);letter-spacing:.06em;color:#fff;background:rgba(7,21,47,.75);padding:4px 8px;max-width:calc(100% - 20px)}
.pd-gal.n1 figure{height:440px}
.pd-gal.n2{grid-template-columns:1fr 1fr}.pd-gal.n2 figure{height:320px}
.pd-gal.n3{grid-template-columns:2fr 1fr;grid-template-rows:200px 200px}
.pd-gal.n3 figure:first-child{grid-row:span 2}
.pd-more{margin-top:20px}
.pd-quote{margin:36px 0 0;padding:24px 28px;background:var(--paper,#F4F4F2);border-left:4px solid var(--red)}
.pd-quote blockquote{margin:0;font-size:18px;font-style:italic;line-height:1.5;color:var(--ink)}
.pd-quote figcaption{margin-top:10px;font-size:13.5px;color:var(--muted)}
.pd-timeline{list-style:none;margin:0;padding:0;border-left:2px solid var(--line)}
.pd-timeline li{position:relative;display:grid;grid-template-columns:96px 1fr;gap:14px;padding:0 0 16px 22px;font-size:15px}
.pd-timeline li::before{content:"";position:absolute;left:-6px;top:6px;width:10px;height:10px;border-radius:50%;background:var(--red)}
.pd-timeline b{font-family:var(--head);font-size:13px;color:var(--navy)}
.pd-case{display:block;margin-top:36px;padding:22px 24px;border:1px solid var(--line);border-left:4px solid var(--navy);color:inherit;text-decoration:none}
.pd-case small{font:600 11px var(--head);letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
.pd-case b{display:block;margin:6px 0 4px;font-family:var(--head);font-size:18px;color:var(--ink)}
.pd-case:hover b{color:var(--red)}

.pd-side{position:sticky;top:110px;display:grid;gap:14px}
.pd-facts{background:var(--navy);color:#fff;padding:26px 24px}
.pd-facts h3{margin:0 0 6px;font:700 12px var(--head);letter-spacing:.16em;text-transform:uppercase;color:#FF6B70}
.pd-facts dl{margin:0 0 20px}
.pd-facts dl>div{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.pd-facts dt{font:600 10.5px var(--head);letter-spacing:.14em;text-transform:uppercase;color:#93A3BA}
.pd-facts dd{margin:4px 0 0;font-size:15px;line-height:1.45;color:#fff}
.pd-facts .btn{display:block;text-align:center}
.pd-cert{display:flex;gap:12px;padding:18px 20px;border:1px dashed #C9CED8;background:#fff}
.pd-cert svg{flex:none;width:24px;height:24px;color:var(--red)}
.pd-cert b{display:block;font-family:var(--head);font-size:14.5px;color:var(--ink)}
.pd-cert span{display:block;margin-top:4px;font-size:13.5px;line-height:1.5;color:var(--muted)}
.pd-others .sec-split{margin-bottom:32px}

@media (max-width:1080px){
  .pj-figs-sec .pj-figs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pj-figs-sec .pj-figs li:nth-child(3){border-left:0}
  .pj-figs-sec .pj-figs li:nth-child(n+3){border-top:1px solid var(--line)}
  .pd-wrap{grid-template-columns:1fr;gap:36px}
  .pd-side{position:static}
}
@media (max-width:767px){
  .pj-figs-sec{margin-top:-36px}
  .pj-figs-sec .pj-figs li,.pj-figs-sec .pj-figs li:first-child{padding:18px 16px}
  .pj-tools{align-items:flex-start;flex-direction:column}
  .pd-scope{grid-template-columns:1fr}
  .pd-gal.n3{grid-template-columns:1fr 1fr;grid-template-rows:220px 140px}
  .pd-gal.n3 figure:first-child{grid-column:1 / -1;grid-row:auto}
  .pd-gal.n1 figure,.pd-gal.n2 figure{height:240px}
  .pd-timeline li{grid-template-columns:1fr;gap:2px}
}
@media (max-width:1080px){.pd-side{order:-1}}

/* =========================================================
   Projects page v3 (Oct 2026 inspiration): split hero, featured
   project, filter + search, compact cards, full photo gallery
   ========================================================= */
.pw-hero{background:#F5F7FA;padding:0;overflow:hidden}
.pw-hero-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:460px}
.pw-hero-txt{display:flex;flex-direction:column;justify-content:center;padding:64px 56px 64px max(40px,calc((100vw - var(--max)) / 2 + 40px))}
.pw-hero-txt h1{font-size:clamp(36px,4vw,58px);line-height:1.04;color:var(--ink);margin:14px 0 18px;max-width:12ch}
.pw-hero-txt>p{font-size:17px;max-width:520px;margin:0 0 30px}
.pw-stats{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:22px 34px}
.pw-stats li{display:flex;align-items:center;gap:12px}
.pw-stats svg{flex:none;width:30px;height:30px;color:var(--red)}
.pw-stats b{display:block;font-family:var(--head);font-size:18px;line-height:1.1;color:var(--ink)}
.pw-stats span{font-size:13px;color:var(--muted)}
.pw-hero-img{position:relative;min-height:320px}
.pw-hero-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:40% 30%}

.pw-feat-sec{padding:56px 0 0}
.pw-feat{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);background:#F5F7FA;border:1px solid var(--line);color:inherit;text-decoration:none;overflow:hidden}
.pw-feat-txt{padding:40px 40px 38px;display:flex;flex-direction:column;justify-content:center}
.pw-feat-txt h2{font-size:clamp(24px,2.2vw,32px);line-height:1.15;margin:10px 0 12px}
.pw-feat-txt>p{font-size:16px;margin:0 0 22px}
.pw-feat-txt ul{list-style:none;margin:0 0 26px;padding:0;display:flex;flex-wrap:wrap;gap:16px 26px}
.pw-feat-txt li{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--ink);max-width:240px}
.pw-feat-txt li svg{flex:none;width:22px;height:22px;color:var(--red);margin-top:2px}
.pw-feat-txt li small{display:block;font-size:12px;color:var(--muted)}
.pw-feat .btn{align-self:flex-start;display:inline-flex;align-items:center;gap:10px}
.pw-feat .btn svg{width:18px;height:18px}
.pw-feat-img{position:relative;min-height:360px;overflow:hidden}
.pw-feat-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s}
.pw-feat:hover .pw-feat-img img{transform:scale(1.03)}

.pw-list{padding-top:48px}
.pw-tools{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.pw-tools .pj-filter{justify-content:flex-start}
.pw-search{display:flex;align-items:center;gap:8px;width:min(280px,100%);border:1px solid var(--line);background:#fff;padding:0 12px}
.pw-search svg{flex:none;width:17px;height:17px;color:var(--muted)}
.pw-search input{flex:1;min-width:0;border:0;outline:0;font:inherit;font-size:14px;padding:11px 0;background:none;color:var(--ink)}
.pw-search:focus-within{border-color:var(--ink)}
.pj-empty .link{background:none;border:0;padding:0;font:inherit;cursor:pointer}

.pw-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.pm-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);color:inherit;text-decoration:none;transition:border-color .2s,box-shadow .2s}
.pm-card[hidden]{display:none}
.pm-card:hover{border-color:#C9CED8;box-shadow:0 12px 30px rgba(7,21,47,.08)}
.pm-img{position:relative;height:190px;overflow:hidden;background:var(--navy)}
.pm-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.pm-card:hover .pm-img img{transform:scale(1.04)}
.pm-img.none{display:grid;place-items:center;background:var(--navy) linear-gradient(115deg,transparent 0 70%,var(--red) 70% 73%,transparent 73%)}
.pm-img.none svg{width:38px;height:38px;color:var(--red)}
.pm-img b{position:absolute;top:10px;right:10px;font:700 10.5px var(--head);letter-spacing:.12em;text-transform:uppercase;color:#fff;background:var(--navy);padding:4px 8px}
.pm-body{padding:16px 18px 16px;display:flex;flex-direction:column;flex:1}
.pm-body small{font:600 11px var(--head);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.pm-body h3{font-size:17px;line-height:1.3;margin:6px 0 10px}
.pm-body p{display:flex;align-items:center;gap:6px;margin:auto 0 0!important;font-size:13.5px!important;color:var(--muted)}
.pm-body p svg{flex:none;width:15px;height:15px;color:var(--red)}
.pm-body p svg:last-child{margin-left:auto;width:18px;height:18px;color:var(--ink);transition:transform .2s}
.pm-card:hover h3{color:var(--red)}
.pm-card:hover .pm-body p svg:last-child{transform:translateX(4px);color:var(--red)}

.pw-photos .gal{margin-top:0}

@media (max-width:1080px){
  .pw-hero-in{grid-template-columns:1fr}
  .pw-hero-txt{padding:48px 24px 36px}
  .pw-hero-img{min-height:300px}
  .pw-feat{grid-template-columns:1fr}
  .pw-feat-img{min-height:260px;order:-1}
  .pw-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:767px){
  .pw-hero-txt{padding:36px 20px 28px}
  .pw-stats{gap:16px 22px}
  .pw-hero-img{min-height:230px}
  .pw-feat-sec{padding-top:36px}
  .pw-feat-txt{padding:24px 20px 26px}
  .pw-tools{flex-direction:column;align-items:stretch}
  .pw-search{width:auto}
  .pw-grid{grid-template-columns:1fr;gap:16px}
}
/* Projects hero: blue gradient, photo blends into it */
.pw-hero{position:relative;isolation:isolate;color:#fff;background:#07152F radial-gradient(120% 140% at 0% 0%,#163A78 0%,#0D2A5E 38%,#07152F 78%)}
.pw-hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(60% 80% at 38% 110%,rgba(30,90,190,.35),transparent 70%)}
.pw-hero .eyebrow{color:#fff}
.pw-hero-txt h1{color:#fff}
.pw-hero-txt>p{color:#C9D6EA}
.pw-stats b{color:#fff}
.pw-stats span{color:#A9B9D3}
.pw-stats svg{color:#FF5A5F}
.pw-hero-img::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,#0D2A5E 0%,rgba(13,42,94,.55) 18%,rgba(13,42,94,0) 45%),linear-gradient(0deg,rgba(7,21,47,.35),transparent 40%)}
@media (max-width:1080px){.pw-hero-img::before{background:linear-gradient(180deg,#0D2A5E 0%,rgba(13,42,94,0) 35%)}}
.pw-hero{background:#07152F linear-gradient(90deg,#07152F 0%,#0A1F45 22%,#0D2A5E 50%,#0D2A5E 100%)}
.pw-hero::after{background:radial-gradient(55% 90% at 30% 0%,rgba(40,100,200,.28),transparent 70%)}
.pw-hero-img{margin-left:-1px}
.pw-hero-img::before{background:linear-gradient(90deg,#0D2A5E 0%,#0D2A5E 4%,rgba(13,42,94,.6) 20%,rgba(13,42,94,0) 48%),linear-gradient(0deg,rgba(7,21,47,.35),transparent 40%)}
.pw-sites{margin:-6px 0 26px}
.pw-sites>small{display:block;font:600 11px var(--head);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.pw-sites ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.pw-sites li{display:inline-flex;align-items:center;gap:6px;padding:7px 12px 7px 10px;background:#fff;border:1px solid var(--line);border-left:3px solid var(--red);font-family:var(--head);font-size:13px;font-weight:600;color:var(--ink)}
.pw-sites li svg{width:14px;height:14px;color:var(--red)}
/* hero text: fixed half-width column aligned with .wrap, never squeezed */
.pw-hero-txt{padding:64px 48px 64px 40px;width:100%;max-width:calc(var(--max) / 2);margin-left:auto;box-sizing:border-box}
@media (max-width:1080px){.pw-hero-txt{max-width:none;margin-left:0;padding:48px 24px 36px}}
@media (max-width:767px){.pw-hero-txt{padding:36px 20px 28px}}
.pw-svc{list-style:none;margin:-8px 0 24px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px 22px}
.pw-svc li{display:flex;align-items:flex-start;gap:8px;font-size:14.5px;line-height:1.4;color:var(--ink);max-width:none}
.pw-svc li svg{flex:none;width:17px;height:17px;color:var(--red);margin-top:1px}
@media (max-width:767px){.pw-svc{grid-template-columns:1fr}}
.pw-feat-txt ul.pw-svc{display:grid;grid-template-columns:1fr 1fr;gap:9px 22px;margin:-8px 0 24px}
.pw-feat-txt .pw-svc li{max-width:none;font-size:14.5px}
@media (max-width:767px){.pw-feat-txt ul.pw-svc{grid-template-columns:1fr}}

/* =========================================================
   Projects page v4: full-bleed hero, featured slider, portfolio with
   map card, approach strip, photo CTA band
   ========================================================= */
.px-hero{position:relative;isolation:isolate;color:#fff;padding:96px 0 84px;background:#07152F url("/assets/img/hero/power-line-works-2026.webp") 75% 30%/cover no-repeat}
.px-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#07152F 0%,rgba(9,28,64,.96) 30%,rgba(13,42,94,.78) 50%,rgba(13,42,94,.15) 75%,transparent 100%)}
.px-hero .eyebrow{color:#fff}
.px-hero h1{color:#fff;font-size:clamp(38px,4.4vw,64px);line-height:1.02;margin:14px 0 18px;max-width:11ch}
.px-hero p{color:#C9D6EA;font-size:17px;max-width:540px;margin:0 0 30px}
.px-hero .pw-stats b{color:#fff}.px-hero .pw-stats span{color:#A9B9D3}.px-hero .pw-stats svg{color:#FF5A5F}

.px-feat-sec{padding:40px 0 0}
.px-feat{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:16px}
.px-feat-media{position:relative;min-height:520px;overflow:hidden;background:var(--navy)}
.px-feat-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s}
.px-feat-media img.on{opacity:1}
.px-nav{position:absolute;left:18px;bottom:18px;display:flex;align-items:center;gap:10px;z-index:2}
.px-nav button{width:42px;height:42px;border-radius:50%;border:0;background:#fff;color:var(--ink);display:grid;place-items:center;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.2)}
.px-nav button svg{width:18px;height:18px}
.px-nav .prev svg{transform:rotate(180deg)}
.px-nav button:hover{background:var(--red);color:#fff}
.px-nav span{margin-left:8px;font:600 14px var(--head);color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.px-nav b{font-weight:700}
.px-feat-panels{background:#F5F7FA;border:1px solid var(--line);padding:30px 30px 26px;display:flex;flex-direction:column}
.px-panel h2{font-size:clamp(22px,2vw,30px);line-height:1.15;margin:10px 0 12px}
.px-panel>p{font-size:15.5px;margin:0 0 18px}
.px-panel .pw-svc{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:8px 20px;margin:-6px 0 20px;padding:0}
.px-panel .pw-svc li{display:flex;gap:8px;font-size:14px;line-height:1.4;color:var(--ink)}
.px-panel .pw-svc svg{flex:none;width:17px;height:17px;color:var(--red);margin-top:1px}
.px-facts{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-wrap:wrap;gap:14px 28px}
.px-facts li{display:flex;gap:10px;font-size:14px;color:var(--ink)}
.px-facts svg{flex:none;width:22px;height:22px;color:var(--red);margin-top:2px}
.px-facts small{display:block;font-size:12px;color:var(--muted)}
.px-panel .pw-sites{margin:0 0 22px}
.px-panel .btn{display:inline-flex;align-items:center;gap:10px}
.px-panel .btn svg{width:18px;height:18px}
.px-thumbs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:auto;padding-top:22px}
.px-thumbs button{padding:0;border:2px solid transparent;background:none;height:62px;cursor:pointer;overflow:hidden;opacity:.6;transition:opacity .2s,border-color .2s}
.px-thumbs button img{width:100%;height:100%;object-fit:cover;display:block}
.px-thumbs button.on,.px-thumbs button:hover{opacity:1;border-color:var(--red)}

.px-port{padding-top:72px}
.px-port-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:28px;align-items:end;margin-bottom:22px}
.px-port-head h2{margin:0;max-width:16ch}
.px-port-head p{margin:0;font-size:15px}
.px-port .pj-filter{justify-content:flex-start;margin-bottom:24px}
.px-port .pj-filter button.on{background:var(--red);border-color:var(--red)}
.px-port-body{display:grid;grid-template-columns:270px minmax(0,1fr);gap:20px;align-items:start}
.px-mapcard{background:#F5F7FA;border:1px solid var(--line);padding:22px 22px 24px;position:sticky;top:110px}
.px-mapcard svg{width:100%;height:auto;display:block;margin-bottom:14px}
.px-mapcard .land{fill:#DCE2EB;stroke:#B8C2D1;stroke-width:2}
.px-mapcard .dot{fill:var(--red);stroke:#fff;stroke-width:3}
.px-mapcard .pt.branch .dot{fill:#fff;stroke:var(--navy);stroke-width:4}
.px-mapcard text{font:600 19px var(--head);fill:var(--ink);paint-order:stroke;stroke:#F5F7FA;stroke-width:5px}
.px-mapcard h3{font-size:20px;margin:0 0 8px}
.px-mapcard p{font-size:14px;margin:0 0 16px}
.px-mapcard .btn{display:inline-flex;align-items:center;gap:8px;color:var(--red);border-color:var(--red);padding:11px 16px}
.px-mapcard .btn svg{width:16px;height:16px}
.px-mapcard .btn:hover{background:var(--red);color:#fff}
.px-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.px-grid .pj-empty{grid-column:1/-1}

.px-approach{background:#F5F7FA;padding:56px 0}
.px-approach .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:40px;align-items:center}
.px-approach-head h2{margin:10px 0 10px;max-width:12ch}
.px-approach-head p{margin:0;font-size:15px}
.px-approach ol{list-style:none;margin:0;padding:0 0 0 32px;border-left:1px solid var(--line);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.px-approach li{display:flex;flex-direction:column;gap:6px}
.px-approach li svg{width:30px;height:30px;color:var(--red);margin-bottom:8px}
.px-approach li b{font-family:var(--head);font-size:17px;color:var(--ink)}
.px-approach li span{font-size:14px;color:var(--muted)}

.cta-band.has-img{position:relative;isolation:isolate;background:#07152F var(--cta-img) center 35%/cover no-repeat}
.cta-band.has-img::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#07152F 0%,rgba(9,28,64,.94) 40%,rgba(13,42,94,.55) 75%,rgba(13,42,94,.3) 100%)}
.cta-band.has-img p{max-width:620px}
.cta-band .ctas{display:flex;gap:12px;flex-wrap:wrap}
.btn.ghost-light{border:1px solid rgba(255,255,255,.8);color:#fff;background:transparent}
.btn.ghost-light:hover{background:#fff;color:var(--navy)}

@media (max-width:1180px){
  .px-port-head{grid-template-columns:1fr 1fr}
  .px-port-head .pw-search{grid-column:1/-1;width:auto}
  .px-port-body{grid-template-columns:1fr}
  .px-mapcard{position:static;display:grid;grid-template-columns:200px 1fr;gap:6px 24px;align-items:center}
  .px-mapcard svg{grid-row:span 3;margin:0}
  .px-approach .wrap{grid-template-columns:1fr}
  .px-approach ol{padding-left:0;border-left:0}
}
@media (max-width:1080px){
  .px-feat{grid-template-columns:1fr}
  .px-feat-media{min-height:340px}
  .px-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:767px){
  .px-hero{padding:56px 0 48px;background-position:70% 30%}
  .px-hero::before{background:linear-gradient(180deg,rgba(7,21,47,.82) 0%,rgba(9,28,64,.92) 100%)}
  .px-feat-media{min-height:250px}
  .px-feat-panels{padding:22px 18px}
  .px-panel .pw-svc{grid-template-columns:1fr}
  .px-thumbs button{height:46px}
  .px-port{padding-top:48px}
  .px-port-head{grid-template-columns:1fr;gap:14px}
  .px-mapcard{grid-template-columns:1fr}
  .px-mapcard svg{max-width:220px;margin:0 auto 10px}
  .px-grid{grid-template-columns:1fr}
  .px-approach ol{grid-template-columns:1fr 1fr}
}
.px-slide{position:absolute;inset:0;opacity:0;transition:opacity .5s;pointer-events:none}
.px-slide.on{opacity:1;pointer-events:auto}
.px-feat-media .px-slide>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:1}
.px-inserts{position:absolute;right:18px;bottom:18px;display:flex;gap:10px;z-index:2}
.px-inserts figure{margin:0;width:150px;height:110px;overflow:hidden;border:3px solid #fff;box-shadow:0 8px 22px rgba(0,0,0,.3);background:var(--navy)}
.px-inserts img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:767px){.px-inserts{right:10px;bottom:auto;top:10px;gap:6px}.px-inserts figure{width:92px;height:68px;border-width:2px}}
.px-feat-media .px-inserts img{position:static;opacity:1;width:100%;height:100%;object-fit:cover}
/* Projects hero: PROJECTS sign photo */
.px-hero{background:#120A1C url("/assets/img/hero/projects-sign.webp") right 40% center/cover no-repeat}
.px-hero::before{background:linear-gradient(90deg,rgba(10,8,22,.94) 0%,rgba(14,10,30,.82) 35%,rgba(14,10,30,.35) 62%,rgba(14,10,30,.05) 100%)}
@media (max-width:767px){.px-hero{background-position:62% center}.px-hero::before{background:rgba(12,9,26,.72)}}
.px-port-head{grid-template-columns:minmax(0,1fr) auto}
@media (max-width:1180px){.px-port-head{grid-template-columns:minmax(0,1fr) auto}.px-port-head .pw-search{grid-column:auto;width:min(280px,100%)}}
@media (max-width:767px){.px-port-head{grid-template-columns:1fr}.px-port-head .pw-search{width:auto}}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.px-hero .eyebrow+.sr-only+p{margin-top:18px}
/* Projects page: alternating section colours (light / white / navy grid / light) */
.px-feat-sec{background:var(--gray);padding:64px 0;border-bottom:1px solid var(--line)}
.px-feat-panels{background:#fff;box-shadow:0 14px 34px rgba(7,21,47,.07)}
.px-port{background:#fff;padding:64px 0 80px}
.px-mapcard{background:var(--gray)}
.px-mapcard text{stroke:var(--gray)}
.px-approach{background-color:var(--navy);background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);background-size:48px 48px;color:#C9D2E0;padding:80px 0;border-top:4px solid var(--red)}
.px-approach .eyebrow,.px-approach h2{color:#fff}
.px-approach-head p{color:#C9D2E0}
.px-approach ol{border-left-color:rgba(255,255,255,.15)}
.px-approach li{padding:22px 20px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-top:3px solid var(--red)}
.px-approach li b{color:#fff}
.px-approach li span{color:#AEB8C8}
.px-approach li svg{color:#FF5A5F}
.pw-photos{background:var(--gray)}
@media (max-width:767px){.px-feat-sec{padding:40px 0}.px-port{padding:44px 0 56px}.px-approach{padding:56px 0}}
/* Projects hero: whole sign visible on the right, clear of the text */
.px-hero{background:#120A1C url("/assets/img/hero/projects-sign.webp") right -40px bottom -6% / auto 118% no-repeat}
.px-hero::before{background:linear-gradient(90deg,#120A1C 0%,#120A1C 46%,rgba(18,10,28,.55) 56%,rgba(18,10,28,0) 66%)}
@media (max-width:1080px){.px-hero{background-size:auto 100%;background-position:right bottom}.px-hero::before{background:linear-gradient(90deg,#120A1C 0%,rgba(18,10,28,.9) 45%,rgba(18,10,28,.35) 100%)}}
@media (max-width:767px){.px-hero{background-position:70% center;background-size:cover}.px-hero::before{background:rgba(18,10,28,.74)}}
/* sign photo as a right-anchored layer whose left edge fades out (no seam) */
.px-hero{background:#120A1C;overflow:hidden}
.px-hero::before{display:none}
.px-hero::after{content:"";position:absolute;z-index:-1;right:-40px;bottom:-6%;height:118%;aspect-ratio:3/2;background:url("/assets/img/hero/projects-sign.webp") center/cover no-repeat;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 38%);mask-image:linear-gradient(90deg,transparent 0%,#000 38%)}
@media (max-width:767px){.px-hero::after{right:0;left:0;top:0;bottom:0;height:auto;aspect-ratio:auto;background-position:70% center;-webkit-mask-image:none;mask-image:none;opacity:.3}}
/* About: landscape photo slot sized to the image */
.ab-photo.wide{height:auto;aspect-ratio:596/335;align-self:center}
.ab-photo.wide img{width:100%;height:100%;object-fit:cover}
.ab-photo.wide figcaption{left:16px;right:auto;bottom:16px;padding:12px 16px}
@media (max-width:1080px){.ab-photo.wide{height:auto}}
@media (max-width:767px){.ab-photo.wide{height:auto}.ab-photo.wide figcaption{position:static;max-width:none}}

/* About: company profile section (redesign) */
.ab2{background:var(--gray)}
.ab2-top{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:56px;align-items:center}
.ab2-lead .ab-title{margin:12px 0 16px}
.ab2-lead>p{font-size:17px;max-width:560px;margin:0 0 26px}
.ab2-badges{list-style:none;margin:0 0 30px;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:#fff;border:1px solid var(--line);border-top:3px solid var(--red)}
.ab2-badges li{padding:16px 16px 14px;border-left:1px solid var(--line)}
.ab2-badges li:first-child{border-left:0}
.ab2-badges b{display:block;font-family:var(--display);font-size:24px;line-height:1;color:var(--navy)}
.ab2-badges span{display:block;margin-top:6px;font-size:13px;color:var(--muted)}
.ab2-photo{position:relative;margin:0;box-shadow:0 22px 50px rgba(7,21,47,.16)}
.ab2-photo::before{content:"";position:absolute;inset:18px -18px -18px 18px;z-index:-1;background:var(--navy);background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);background-size:24px 24px}
.ab2-photo img{display:block;width:100%;aspect-ratio:596/335;object-fit:cover}
.ab2-photo figcaption{display:flex;align-items:center;gap:14px;padding:16px 20px;background:var(--navy);color:#C9D2E0;font-size:14px}
.ab2-photo figcaption i{width:42px;height:42px;display:grid;place-items:center;background:var(--red);color:#fff;flex:none}
.ab2-photo figcaption svg{width:20px;height:20px}
.ab2-photo figcaption b{display:block;font-family:var(--head);font-size:16px;color:#fff}

.ab2-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:64px;align-items:start}
.ab2-card{background:#fff;border:1px solid var(--line);padding:24px 24px 10px}
.ab2-card header{display:flex;align-items:center;gap:12px;padding-bottom:14px;border-bottom:2px solid var(--navy)}
.ab2-card header i{width:38px;height:38px;display:grid;place-items:center;background:#FDE8E9;color:var(--red);flex:none}
.ab2-card header svg{width:19px;height:19px}
.ab2-card h3{margin:0;font-size:18px}
.ab2-card dl{margin:0}
.ab2-card dl>div{padding:12px 0;border-bottom:1px solid var(--line)}
.ab2-card dl>div:last-child{border-bottom:0}
.ab2-card dt{font:600 11px var(--head);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.ab2-card dd{margin:4px 0 0;font-size:15px;line-height:1.45;color:var(--ink)}

@media (max-width:1080px){
  .ab2-top{grid-template-columns:1fr;gap:40px}
  .ab2-photo{max-width:640px}
  .ab2-cards{grid-template-columns:1fr 1fr}
}
@media (max-width:767px){
  .ab2-badges{grid-template-columns:1fr 1fr}
  .ab2-badges li:nth-child(3){border-left:0}
  .ab2-badges li:nth-child(n+3){border-top:1px solid var(--line)}
  .ab2-photo::before{inset:10px -10px -10px 10px}
  .ab2-photo{margin-right:10px}
  .ab2-cards{grid-template-columns:1fr;margin-top:44px}
}
.ab2 .ab-ctas{display:flex;flex-wrap:wrap;gap:12px}
.ab2 .ab-ctas .btn{display:inline-flex;align-items:center;gap:8px}
.ab2-cards{align-items:stretch}
/* About company profile on navy grid */
.ab2{background-color:var(--navy);background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);background-size:48px 48px;color:#C9D2E0}
.ab2 .eyebrow,.ab2 .ab-title{color:#fff}
.ab2-lead>p{color:#C9D2E0}
.ab2-badges{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);border-top-color:var(--red)}
.ab2-badges li{border-left-color:rgba(255,255,255,.12)}
.ab2-badges b{color:#fff}
.ab2-badges span{color:#AEB8C8}
.ab2 .btn.outline{border-color:rgba(255,255,255,.7);color:#fff}
.ab2 .btn.outline:hover{background:#fff;color:var(--navy)}
.ab2-photo::before{background-color:var(--red);background-image:none}
.ab2-photo figcaption{background:#0D2A5E}
.ab2-card{border-color:transparent;box-shadow:0 14px 34px rgba(0,0,0,.25)}
@media (max-width:767px){.ab2-badges li:nth-child(n+3){border-top-color:rgba(255,255,255,.12)}}
/* trim empty wall left of the word */
.px-hero::after{aspect-ratio:1.22/1;background-size:auto 100%;background-position:right center;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 9%);mask-image:linear-gradient(90deg,transparent 0%,#000 9%)}
@media (max-width:767px){.px-hero::after{aspect-ratio:auto;background-size:cover;background-position:70% center;-webkit-mask-image:none;mask-image:none}}

/* =========================================================
   Client homepage design (Oct 2026): contact header + navy menu bar,
   split hero, service cards, why strip, contact band
   ========================================================= */
/* header */
.site-header.hx{border-bottom:0}
.hx .mainbar{height:84px}
.hx .brand img{height:44px!important}
.hx-contact{list-style:none;margin:0 0 0 auto;padding:0;display:flex;gap:34px}
.hx-contact a{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:13px;line-height:1.3}
.hx-contact i{width:42px;height:42px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;flex:none}
.hx-contact svg{width:19px;height:19px}
.hx-contact b{display:block;font-family:var(--head);font-size:15px;color:var(--ink)}
.hx-contact a:hover b{color:var(--red)}
.hx-bar{background:var(--navy)}
.hx-bar .wrap{height:auto!important;display:flex;align-items:stretch}
@media (min-width:1081px){
  .site-header.light.hx .nav{margin-left:0;align-self:stretch}
  .site-header.light.hx .nav>ul{gap:0!important;margin:0!important;font-size:15px!important;align-items:stretch}
  .site-header.light.hx .nav>ul>li>a{height:54px;padding:0 20px;color:#fff;font-family:var(--head);font-weight:600}
  .site-header.light.hx .nav>ul>li:first-child>a{margin-left:-20px}
  .site-header.light.hx .nav>ul>li>a::after{display:none}
  .site-header.light.hx .nav>ul>li>a:hover{color:#fff;background:rgba(255,255,255,.08)}
  .site-header.light.hx .nav>ul>li>a[aria-current="page"]{color:#fff;background:var(--red)}
  .site-header.light.hx .nav .sub{margin-top:0}
}
.hx-quote{margin-left:auto;display:flex;align-items:center;gap:10px;padding:0 26px;background:var(--red);color:#fff;font:600 14px var(--head);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.hx-quote svg{width:18px;height:18px}
.hx-quote:hover{background:#B5141A;color:#fff}
@media (max-width:1240px){.hx-contact{gap:20px}.hx-contact li:nth-child(3){display:none}}
@media (max-width:1080px){
  .hx-contact{display:none}
  .hx .mainbar{height:76px}
  .hx .menu-toggle{margin-left:auto}
  .hx-bar{background:none}
  .hx-bar .wrap{height:0!important;padding:0}
  .hx-quote{display:none}
}

/* hero */
.hx-hero{position:relative;isolation:isolate;overflow:hidden;background:var(--navy);color:#fff;padding:64px 0 60px}
.hx-hero-img{position:absolute;inset:0 0 0 38%;z-index:-2}
.hx-hero-img img{width:100%;height:100%;object-fit:cover;object-position:55% 30%}
.hx-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#07152F 0%,#07152F 36%,rgba(7,21,47,.82) 48%,rgba(13,42,94,.25) 66%,rgba(13,42,94,0) 80%)}
.hx-hero-txt{max-width:700px}
.hx-hero .eyebrow{color:#fff}
.hx-hero .eyebrow i{font-style:normal;margin:0 6px;color:#93A3BA}
.hx-hero h1{color:#fff;font-size:clamp(36px,4.1vw,60px);line-height:1.04;margin:16px 0 18px;letter-spacing:-.01em}
.hx-hero h1 .hl{display:block;color:var(--red)}
.hx-hero p{color:#D5DEEA;font-size:17px;line-height:1.6;max-width:600px;margin:0 0 26px}
.hx-hero .ctas{gap:14px}
.hx-hero .btn{display:inline-flex;align-items:center;gap:10px}
.hx-hero .btn svg{width:18px;height:18px}
.hx-ticks{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 26px;font:600 15px var(--head)}
.hx-ticks li{display:flex;align-items:center;gap:8px}
.hx-ticks svg{width:20px;height:20px;color:#fff;background:var(--red);border-radius:50%;padding:3px}
.hx-script{position:absolute;right:3%;top:26px;margin:0;font:600 clamp(24px,2.3vw,36px)/1.1 "Caveat",cursive;color:#0B1B33;transform:rotate(-8deg);text-align:center;text-shadow:0 0 18px rgba(255,255,255,.9),0 0 4px rgba(255,255,255,.9)}
.hx-script::after{content:"";display:block;width:70%;height:3px;margin:6px auto 0;background:var(--red);border-radius:2px;transform:rotate(-3deg)}

/* service cards */
.hx-svc{padding:26px 0 42px;background:#fff}
.hx-svc-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.hx-svc-grid a{display:flex;flex-direction:column;height:100%;background:#fff;border:1px solid var(--line);box-shadow:0 8px 22px rgba(7,21,47,.06);color:inherit;transition:box-shadow .2s,transform .2s}
.hx-svc-grid a:hover{box-shadow:0 16px 34px rgba(7,21,47,.12);transform:translateY(-3px)}
.hx-svc-img{position:relative;height:130px}
.hx-svc-img img{width:100%;height:100%;object-fit:cover;display:block}
.hx-svc-img i{position:absolute;left:16px;bottom:-22px;width:46px;height:46px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;border:3px solid #fff}
.hx-svc-img i svg{width:20px;height:20px}
.hx-svc-body{padding:32px 16px 16px;display:flex;flex-direction:column;flex:1}
.hx-svc-body h3{font-size:16px;line-height:1.25;margin:0 0 8px;color:var(--navy)}
.hx-svc-body p{font-size:13.5px;line-height:1.5;margin:0 0 12px}
.hx-more{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font:600 13.5px var(--head);color:var(--red)}
.hx-more svg{width:15px;height:15px;transition:transform .2s}
.hx-svc-grid a:hover .hx-more svg{transform:translateX(4px)}

/* why strip */
.hx-why{background:#EEF1F6;padding:26px 0}
.hx-why .wrap{display:grid;grid-template-columns:230px minmax(0,1fr);gap:24px;align-items:center}
.hx-why h2{margin:0;font-size:24px;line-height:1.15;color:var(--navy)}
.hx-why h2 span{display:block}
.hx-why h2::after{content:"";display:block;width:56px;height:3px;margin-top:10px;background:var(--red)}
.hx-why ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}
.hx-why li{display:flex;gap:10px;padding:4px 14px;border-left:1px solid #CDD4DF;font-size:12.5px;line-height:1.35;color:var(--muted)}
.hx-why li svg{flex:none;width:28px;height:28px;color:var(--navy)}
.hx-why li b{display:block;font-family:var(--head);font-size:14px;color:var(--navy);margin-bottom:2px}

/* contact band */
.hx-call{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:var(--navy);color:#fff}
.hx-call-l{position:relative;display:flex;align-items:center;gap:22px;padding:28px 60px 28px max(40px,calc((100vw - var(--max)) / 2 + 40px));background:var(--red);color:#fff;clip-path:polygon(0 0,100% 0,calc(100% - 50px) 100%,0 100%)}
.hx-call-l i{width:70px;height:70px;border-radius:12px;background:#fff;color:var(--red);display:grid;place-items:center;flex:none}
.hx-call-l i svg{width:34px;height:34px}
.hx-call-l small{display:block;font-size:17px}
.hx-call-l b{display:block;font-family:var(--head);font-size:clamp(22px,2.1vw,30px);text-transform:uppercase;line-height:1.1;margin:4px 0}
.hx-call-l em{font-style:normal;font-size:14px;color:#FFE1E2}
.hx-call-l:hover{color:#fff}
.hx-call-r{list-style:none;margin:0;padding:22px max(40px,calc((100vw - var(--max)) / 2 + 40px)) 22px 10px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:center}
.hx-call-r li{display:flex;align-items:center;gap:10px;padding:0 12px;border-left:1px solid rgba(255,255,255,.18);font-size:12.5px;color:#C9D2E0}
.hx-call-r li:first-child{border-left:0}
.hx-call-r svg{flex:none;width:34px;height:34px;padding:7px;border:2px solid #fff;border-radius:50%;color:#fff}
.hx-call-r b{display:block;font-family:var(--head);font-size:17px;color:#fff}

@media (max-width:1240px){
  .hx-svc-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hx-why .wrap{grid-template-columns:1fr}
  .hx-why ul{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:16px}
  .hx-why li:nth-child(4){border-left:0}
  .hx-call{grid-template-columns:1fr}
  .hx-call-l{clip-path:none;padding:28px 40px}
  .hx-call-r{padding:22px 40px}
}
@media (max-width:1080px){
  .hx-hero{padding:48px 0}
  .hx-hero-img{inset:0}
  .hx-hero::before{background:linear-gradient(90deg,rgba(7,21,47,.95) 0%,rgba(7,21,47,.82) 60%,rgba(7,21,47,.55) 100%)}
  .hx-script{display:none}
}
@media (max-width:767px){
  .hx-hero h1{font-size:34px}
  .hx-hero .ctas{flex-direction:column;align-items:stretch}
  .hx-hero .btn{justify-content:center}
  .hx-svc-grid{grid-template-columns:1fr 1fr;gap:10px}
  .hx-svc-img{height:110px}
  .hx-svc-body{padding:28px 12px 14px}
  .hx-svc-body h3{font-size:14.5px}
  .hx-svc-body p{display:none}
  .hx-why ul{grid-template-columns:1fr 1fr}
  .hx-why li,.hx-why li:nth-child(4){border-left:0;padding-left:0}
  .hx-call-l{padding:24px 20px;gap:16px}
  .hx-call-l i{width:54px;height:54px}
  .hx-call-r{grid-template-columns:1fr 1fr;row-gap:18px;padding:22px 20px}
  .hx-call-r li:nth-child(3){border-left:0}
}
.hx-hero-txt{max-width:780px}
.hx-hero h1{font-size:clamp(36px,3.9vw,58px)}
.hx-script{font-size:clamp(28px,2.6vw,42px);color:#fff;text-shadow:0 2px 10px rgba(7,21,47,.7);top:30px;right:2.5%}
@media (max-width:767px){.hx-hero .eyebrow{flex-wrap:wrap;font-size:11px;letter-spacing:.1em;row-gap:4px}.hx-hero .eyebrow::before{width:24px}}
.hx-call{padding:0}
.ab2 h1.ab-title{font-size:clamp(34px,3.4vw,52px);line-height:1.05}
.hx-call{border-bottom:1px solid rgba(255,255,255,.12)}
/* contact band v2: contents on the page grid, red panel bleeds left */
.hx-call{display:block;position:relative;isolation:isolate;overflow:hidden}
.hx-call-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:center;gap:0}
.hx-call-l{position:relative;padding:30px 70px 30px 0;clip-path:none;background:none}
.hx-call-l::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;right:0;width:100vw;background:var(--red);clip-path:polygon(0 0,100% 0,calc(100% - 50px) 100%,0 100%)}
.hx-call-l>span{min-width:0}
.hx-call-r{padding:26px 0 26px 30px;grid-template-columns:repeat(4,minmax(0,1fr))}
.hx-call-r li{padding:0 14px}
.hx-call-r b{white-space:nowrap}
@media (max-width:1240px){.hx-call-in{grid-template-columns:1fr}.hx-call-l{padding:28px 0}.hx-call-l::before{left:-100vw;right:-100vw;width:auto;clip-path:none}.hx-call-r{padding:24px 0}}
@media (max-width:767px){.hx-call-l{padding:24px 0}.hx-call-r{grid-template-columns:1fr 1fr;padding:22px 0}}
.authority-options .org-other{grid-column:1/-1;display:grid;gap:6px;font-weight:600}
.authority-options .org-other input{font:inherit;font-weight:400;padding:10px 12px;border:1px solid var(--line);background:#fff}
/* hero text: stay left of the photo */
.hx-hero-txt{max-width:min(640px,46vw)}
.hx-hero h1{font-size:clamp(32px,3.1vw,48px);line-height:1.08}
.hx-hero p{font-size:16px;max-width:560px}
@media (max-width:1080px){.hx-hero-txt{max-width:none}}
@media (max-width:767px){.hx-hero h1{font-size:32px}}
@media (min-width:1081px){.hx-hero .eyebrow{white-space:nowrap;font-size:12px}.hx-hero .ctas{flex-wrap:nowrap}.hx-hero .btn{white-space:nowrap;padding-left:20px;padding-right:20px}}
/* hero photo: soft left edge, no seam */
.hx-hero-img{inset:0 0 0 30%;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 40%);mask-image:linear-gradient(90deg,transparent 0%,#000 40%)}
.hx-hero::before{background:linear-gradient(90deg,rgba(7,21,47,.6) 0%,rgba(7,21,47,.35) 45%,rgba(7,21,47,0) 70%)}
@media (max-width:1080px){.hx-hero-img{inset:0;-webkit-mask-image:none;mask-image:none}.hx-hero::before{background:linear-gradient(90deg,rgba(7,21,47,.95) 0%,rgba(7,21,47,.82) 60%,rgba(7,21,47,.55) 100%)}}
/* trusted-by band: compact */
.client-band{grid-template-columns:minmax(230px,24%) 1fr}
.cb-head{padding:26px 80px 26px 40px}
.cb-head small{font-size:11px;letter-spacing:.26em}
.cb-head h2{font-size:clamp(19px,1.5vw,24px);margin-top:8px}
.client-band ul{padding:22px 80px 22px 16px;gap:10px 0}
.client-band li{padding:1px 14px;font-size:14px;border-left-width:2px}
@media (max-width:1080px){.cb-head{padding:22px 20px}.client-band ul{padding:18px 20px 22px}.client-band li{font-size:13.5px}}
/* prepaid sub-metering offer */
.hx-meter{background:var(--gray);padding:64px 0}
.hx-meter-in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:56px;align-items:center}
.hx-meter h2{font-size:clamp(28px,2.6vw,40px);line-height:1.1;margin:12px 0 14px;color:var(--navy)}
.hx-meter-txt>p{font-size:16.5px;max-width:600px;margin:0 0 20px}
.hx-meter ul{list-style:none;margin:0 0 26px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px 20px}
.hx-meter li{display:flex;gap:10px;font-size:15px;color:var(--ink)}
.hx-meter li svg{flex:none;width:20px;height:20px;color:#fff;background:var(--red);border-radius:50%;padding:3px}
.hx-meter .btn{display:inline-flex;align-items:center;gap:10px}
.hx-meter .btn svg{width:18px;height:18px}
.hx-meter-img{position:relative;margin:0;max-width:420px;justify-self:center}
.hx-meter-img::before{content:"";position:absolute;inset:18px -18px -18px 18px;z-index:0;background:var(--navy)}
.hx-meter-img img{position:relative;display:block;width:100%;aspect-ratio:3/4;object-fit:cover}
.hx-meter-img figcaption{position:absolute;left:-18px;bottom:28px;display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--red);color:#fff;font:600 13px var(--head)}
.hx-meter-img figcaption svg{width:16px;height:16px}
@media (max-width:1080px){.hx-meter-in{grid-template-columns:1fr;gap:40px}.hx-meter-img{max-width:340px}}
@media (max-width:767px){.hx-meter{padding:44px 0}.hx-meter ul{grid-template-columns:1fr}.hx-meter .ctas{flex-direction:column;align-items:stretch}.hx-meter .btn{justify-content:center}.hx-meter-img figcaption{left:0}}
/* trust strip: pale blue, red icons, red top rule */
.hx-why{background:#EAF0F8;border-top:3px solid var(--red)}
.hx-why li svg{color:var(--red)}
.hx-why li{border-left-color:#C8D3E3}

/* =========================================================
   Footer redesign: navy with drafting grid, white logo
   ========================================================= */
.site-footer.fx{background-color:var(--navy);background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);background-size:48px 48px;color:#AEB8C8;border-top:4px solid var(--red)}
.fx .brand-full img{width:190px}
.fx .top>div>p{color:#AEB8C8}
.fx h4{color:#fff}
.fx h4::after{content:"";display:block;width:32px;height:3px;margin-top:8px;background:var(--red)}
.fx .f-toggle{color:#fff}
.fx a{color:#C9D2E0}
.fx a:hover,.fx .f-contact-list a:hover span{color:#fff}
.fx ul.dots li::before{background:var(--red)}
.fx .f-contact-list svg{color:#FF5A5F}
.fx .f-contact-list span{color:#C9D2E0}
.f-badges{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.f-badges li{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.04);font:600 12px var(--head);letter-spacing:.04em;color:#fff}
.f-badges svg{width:15px;height:15px;color:#FF5A5F}
.fx .bot{background:#050F22;color:#93A3BA;border-top:1px solid rgba(255,255,255,.08)}
.fx .bot a{color:#C9D2E0}
.fx .bot a:hover{color:#fff}
.fx .staff-link{color:#C9D2E0}
.fx .f-actions a{border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.04);color:#fff}
.fx .f-actions a:hover{border-color:var(--red)}
.fx .f-actions svg{color:#FF5A5F}
.fx .f-links{border-color:rgba(255,255,255,.12)!important}
.fx .f-toggle svg{color:#FF5A5F}
@media (max-width:767px){.fx .f-brand p{color:#AEB8C8}.fx h4::after{display:none}.fx .f-links h4::after{display:none}}
/* trust strip: red rule top and bottom */
.hx-why{border-bottom:3px solid var(--red)}
/* project cards: show more of each photo */
.pj-card .pj-img,.pj-img{height:auto!important;aspect-ratio:4/3}
.pm-img{height:auto!important;aspect-ratio:4/3}
/* contact band: red rule separates it from the navy projects section above */
.hx-call{border-top:4px solid var(--red)}
/* trusted-by under the hero */
.hx-hero+.client-band{border-bottom:1px solid var(--line)}
/* contact band: white outline top and bottom */
.hx-call{border-top:4px solid #fff;border-bottom:4px solid #fff}
/* footer badges stacked vertically */
.f-badges{flex-direction:column;align-items:flex-start;gap:8px}
.f-badges li{min-width:190px}
/* footer bottom bar: full-bleed dark strip */
.fx .bot{box-shadow:0 0 0 100vmax #050F22;clip-path:inset(0 -100vmax);border-top:0;align-items:center}
.fx{overflow:hidden}
.fx .staff-link{text-decoration-color:rgba(255,255,255,.4)}

/* =========================================================
   Homepage refinements: selected clients row, premium service cards
   ========================================================= */
.hx-clients{background:#fff;padding:30px 0 26px;border-bottom:1px solid var(--line)}
.hx-clients .wrap{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px 36px;align-items:center}
.hx-clients-h{margin:0;max-width:170px;font:600 12px/1.4 var(--head);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.hx-clients ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));align-items:center}
.hx-clients ul li{display:flex;align-items:center;justify-content:center;min-height:48px;padding:0 14px;border-left:1px solid var(--line);text-align:center}
.hx-clients ul li:first-child{border-left:0}
.hx-clients ul li span{font:700 15px/1.25 var(--head);color:var(--navy)}
.hx-clients ul li img{max-height:44px;max-width:100%;filter:grayscale(1);opacity:.8;transition:filter .2s,opacity .2s}
.hx-clients ul li:hover img{filter:none;opacity:1}
.hx-clients-more{grid-column:1/-1}
.hx-clients-more summary{list-style:none;display:inline-flex;align-items:center;gap:6px;cursor:pointer;font:600 13px var(--head);color:var(--red)}
.hx-clients-more summary::-webkit-details-marker{display:none}
.hx-clients-more summary svg{width:16px;height:16px;transition:transform .2s}
.hx-clients-more[open] summary svg{transform:rotate(180deg)}
.hx-clients-more[open] summary span::before{content:"Hide ";}
.hx-clients-more[open] summary span{font-size:0}
.hx-clients-more[open] summary span::before{font-size:13px}
.hx-clients-more[open] summary span::after{content:"full client list";font-size:13px}
.hx-clients ul.hx-clients-full{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.hx-clients-full li{border:1px solid var(--line)!important;min-height:0!important;padding:7px 12px!important;font-size:13.5px;color:var(--ink);background:var(--gray)}

@media (max-width:1080px){
  .hx-clients .wrap{grid-template-columns:1fr}
  .hx-clients-h{max-width:none}
  .hx-clients ul{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:12px}
  .hx-clients ul li:nth-child(4){border-left:0}
}
@media (max-width:767px){
  .hx-clients ul{grid-template-columns:1fr 1fr}
  .hx-clients ul li:nth-child(odd){border-left:0}
  .hx-clients ul li:nth-child(4){border-left:1px solid var(--line)}
}
.hx-clients-all{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font:600 13px var(--head);color:var(--red)}
.hx-clients-all svg{width:16px;height:16px;transition:transform .2s}
.hx-clients-all:hover svg{transform:translateX(3px)}

/* About: company profile as a taller, bolder hero */
@media (min-width:1081px){
  .ab2{padding-top:0;overflow:hidden}
  .ab2-top{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:64px;align-items:stretch;min-height:clamp(560px,calc(100vh - 150px),720px)}
  .ab2-lead{display:flex;flex-direction:column;justify-content:center;padding:72px 0 64px}
  .ab2 h1.ab-title{font-size:clamp(46px,4.6vw,72px);line-height:1;margin:16px 0 20px}
  .ab2-lead>p{font-size:18px;max-width:600px;margin-bottom:30px}
  .ab2-badges b{font-size:28px}
  .ab2-photo{margin:0 calc(-1 * max(40px,(100vw - var(--max)) / 2 + 40px)) 0 0;box-shadow:none;display:flex;flex-direction:column}
  .ab2-photo::before{display:none}
  .ab2-photo img{flex:1;aspect-ratio:auto;height:100%;min-height:0;object-fit:cover;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 14%);mask-image:linear-gradient(90deg,transparent 0%,#000 14%)}
  .ab2-photo figcaption{position:absolute;left:44px;bottom:36px;max-width:380px;box-shadow:0 14px 30px rgba(0,0,0,.35);border-left:4px solid var(--red)}
  .ab2-cards{margin-top:0;padding-top:64px;border-top:1px solid rgba(255,255,255,.1)}
}
@media (min-width:1081px){.ab2-photo img{object-position:35% center}}
@media (min-width:1081px){.ab2-top{min-height:clamp(520px,calc(100vh - 170px),640px)}.ab2-photo img{object-position:8% center}}
.ab2-lead .eyebrow+.sr-only+p{margin-top:18px}
/* About hero: compact, full photo visible */
@media (min-width:1081px){
  .ab2-top{min-height:0;align-items:center;gap:56px}
  .ab2-lead{padding:48px 0 44px}
  .ab2-photo{margin:0;display:block;align-self:center}
  .ab2-photo img{height:auto;aspect-ratio:596/335;object-fit:cover;object-position:center;-webkit-mask-image:none;mask-image:none}
  .ab2-photo figcaption{position:static;max-width:none;box-shadow:none;border-left:0}
}
/* company facts as their own section after vision and mission */
.ab2-facts{padding:64px 0!important}
.ab2-facts .ab2-cards{margin-top:0!important;padding-top:0!important;border-top:0!important}
/* services section on navy grid, white cards */
.hx-svc{background-color:var(--navy);background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);background-size:48px 48px;padding:40px 0 48px}
.hx-svc-grid a{border-color:transparent;box-shadow:0 10px 26px rgba(0,0,0,.25)}
.hx-svc-grid a:hover{box-shadow:0 18px 38px rgba(0,0,0,.4)}