/* Shared sections used on Home + About */
header{color:#fff}
.eyebrow.dk{color:var(--navy)}
.btn.ghost{background:transparent;color:#fff;border:2px solid var(--gold)}
.btn.ghost:before{display:none}
.cta .btn.ghost{animation:none}
.cta .btn.ghost:hover{background:var(--gold);color:var(--navy)}
.cta-btns{display:flex;gap:12px;flex-wrap:wrap}
/* services */
.svc{padding:48px 0;background:var(--bg)}
.svc-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.svc-c{grid-column:span 2;background:#fff;border-radius:12px;padding:24px;border-top:3px solid var(--gold);box-shadow:0 4px 18px rgba(11,29,61,.08);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.svc-c:nth-child(n+4){grid-column:span 3}
.svc-c:hover{transform:translateY(-6px);box-shadow:0 18px 36px rgba(11,29,61,.15)}
.svc-c>.i{font-size:34px;color:var(--gold2);margin-bottom:12px}
.svc-c h3{font-size:17px;font-weight:600;margin-bottom:8px}
.svc-c p{font-size:13px;color:var(--muted);margin-bottom:14px}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tags li{font-size:11px;font-weight:500;color:var(--navy);background:#fff3d1;padding:3px 10px;border-radius:999px}
/* areas / builders */
.net{padding:48px 0;background:#fff}
.net-in{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.net h2{font-size:clamp(20px,2.6vw,24px);font-weight:600;margin:4px 0 6px}
.net p{font-size:13px;color:var(--muted)}
.net .more{color:var(--gold2);font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}
.chips li{font-size:13px;font-weight:500;padding:7px 16px;border:1px solid #dfe3ec;border-radius:999px;color:var(--navy);transition:border-color .25s,background .25s}
.chips li:hover{border-color:var(--gold);background:#fff3d1}
@media(max-width:1024px){.svc-grid{grid-template-columns:1fr 1fr}.svc-c,.svc-c:nth-child(n+4){grid-column:auto}.net-in{grid-template-columns:1fr;gap:32px}}
@media(max-width:720px){.svc-grid{grid-template-columns:1fr}}

/* ===== Button hover effects (same family as Home) ===== */
/* About hero: primary = navy fill rises from bottom, text turns gold */
.ab-btns .btn:not(.ghost){border:2px solid var(--gold);transition:color .35s,transform .3s var(--ease)}
.ab-btns .btn:not(.ghost):before{background:var(--navy);transform:translateY(101%)}
.ab-btns .btn:not(.ghost):hover{color:var(--gold);transform:translateY(-3px)}
.ab-btns .btn:not(.ghost):hover:before{transform:none}
.ab-btns .btn:not(.ghost):hover .i{transform:translateX(8px)}
/* About hero: outline button = gold fill sweeps in from the left */
.ab-btns .btn.ghost{transition:color .35s,transform .3s var(--ease)}
.ab-btns .btn.ghost:before{display:block;background:var(--gold);transform:translateX(-101%)}
.ab-btns .btn.ghost:hover{background:transparent;color:var(--navy);transform:translateY(-3px)}
.ab-btns .btn.ghost:hover:before{transform:none}
/* Enquiry form button = navy fill sweeps from the left, arrow slides */
.enq .btn{transition:color .35s,transform .3s var(--ease)}
.enq .btn:before{background:var(--navy);transform:translateX(-101%)}
.enq .btn:hover{color:var(--gold);transform:translateY(-3px)}
.enq .btn:hover:before{transform:none}
.enq .btn:hover .i{transform:translateX(6px) scale(1.2)}

/* ===== Services cards: icon badge + navy fill on hover ===== */
.svc-c{position:relative;overflow:hidden;isolation:isolate}
.svc-c:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(160deg,#0b1d3d,#07142b);transform:translateY(101%);transition:transform .5s var(--ease)}
.svc-c:hover:before{transform:none}
.svc-c>.i{box-sizing:border-box;width:56px;height:56px;padding:14px;border-radius:50%;margin-bottom:16px;color:#b97d00;background:radial-gradient(circle at 30% 25%,#fff7dc,#ffe7a3 70%);border:1.5px solid rgba(232,169,28,.55);box-shadow:0 6px 14px rgba(232,169,28,.25);transition:transform .5s var(--ease),background .3s,color .3s}
.svc-c:hover>.i{transform:rotate(-8deg) scale(1.1);background:linear-gradient(135deg,#ffd45e,#e8a91c);color:var(--navy)}
.svc-c h3,.svc-c p,.tags li{transition:color .35s,background .35s}
.svc-c:hover h3{color:#fff}
.svc-c:hover p{color:#d8deeb}
.svc-c:hover .tags li{background:rgba(246,195,67,.18);color:var(--gold)}

/* ===== Areas / builders: panels + chips ===== */
.net{background:var(--bg)}
.net-in>div,.ab-blk{background:#fff;border-radius:16px;padding:28px;border-left:4px solid var(--gold);box-shadow:0 4px 18px rgba(11,29,61,.08);transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.net-in>div:hover,.ab-blk:hover{transform:translateY(-6px);box-shadow:0 20px 40px rgba(11,29,61,.15)}
.chips li{cursor:default;transition:transform .3s var(--ease),background .3s,border-color .3s,box-shadow .3s}
.chips li:before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--gold2);margin-right:8px;vertical-align:middle;transition:background .3s}
.chips li:hover{transform:translateY(-3px);background:linear-gradient(180deg,#ffd45e,var(--gold2));border-color:var(--gold2);box-shadow:0 8px 18px rgba(246,195,67,.4)}
.chips li:hover:before{background:var(--navy)}
.net .more{padding-bottom:2px;background:linear-gradient(var(--gold),var(--gold)) left bottom/0 2px no-repeat;transition:background-size .35s var(--ease)}
.net .more:hover{background-size:100% 2px}
@media(hover:none){.svc-c:hover,.net-in>div:hover,.ab-blk:hover,.chips li:hover{transform:none}}

/* ===== Areas / Builders: compact split card ===== */
.net{padding:36px 0}
.net-in{gap:0;align-items:stretch;border-radius:18px;overflow:hidden;box-shadow:0 8px 28px rgba(11,29,61,.12)}
.net .np{display:flex;flex-direction:column;padding:24px 28px 20px;border:0;border-radius:0;box-shadow:none;background:#fff}
.net .np:hover{transform:none;box-shadow:none}
.np-n{display:none}
.np-h{margin:0}
.net .np h2{font-size:clamp(17px,1.9vw,20px);line-height:1.25;margin:4px 0 0}
.net .np .chips{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 12px}
.net .np .chips li{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;font-size:12px;border-radius:999px}
.net .np .chips li:before{display:none}
.net .np-areas .chips .i{flex:none;font-size:13px;color:var(--gold2);transition:color .3s}
.net .np-areas .chips li:hover .i{color:var(--navy)}
.np-f{margin-top:auto;padding-top:10px;border-top:1px dashed #d6dbe6}
.np-f p{font-size:12px;color:var(--muted)}
.net .np-dev{background:linear-gradient(160deg,#0b1d3d,#07142b);color:#fff}
.net .np-dev .eyebrow.dk{color:var(--gold)}
.net .np-dev h2{color:#fff}
.net .np-dev .chips li{color:#fff;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);padding-left:6px}
.net .np-dev .chips li i{flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:10px;font-weight:700;color:var(--navy);background:linear-gradient(135deg,#ffd45e,var(--gold2));transition:transform .4s var(--ease)}
.net .np-dev .chips li:hover{color:var(--navy)}
.net .np-dev .chips li:hover i{transform:rotate(-12deg) scale(1.12);background:var(--navy);color:var(--gold)}
.net .np-dev .np-f{border-color:rgba(255,255,255,.2)}
.net .np-dev .np-f p{color:#d8deeb}
.net .np-dev .more{color:var(--gold)}
@media(max-width:1024px){.net-in{grid-template-columns:1fr;gap:0}}
@media(max-width:560px){.net .np{padding:20px}}
.net-in{border-radius:0;overflow:visible;box-shadow:none}
.net .np{box-shadow:0 8px 28px rgba(11,29,61,.12)}
.net .np-areas{border-radius:18px 0 0 18px}
.net .np-dev{border-radius:0 18px 18px 0}
@media(max-width:1024px){.net .np-areas{border-radius:18px 18px 0 0;box-shadow:none}.net .np-dev{border-radius:0 0 18px 18px}}

/* ===== What We Do: numbered cards, wide bottom row ===== */
.svc{padding:56px 0 64px;background:linear-gradient(180deg,var(--bg),#fff)}
.svc-grid{counter-reset:sv;gap:20px}
.svc-c{counter-increment:sv;padding:28px 26px 24px;border-top:0;border-radius:16px;border:1px solid #e8ebf2;box-shadow:0 6px 22px rgba(11,29,61,.07)}
.svc-c:after{content:"0" counter(sv);position:absolute;right:22px;top:16px;font-size:46px;font-weight:700;line-height:1;color:transparent;-webkit-text-stroke:1.5px rgba(232,169,28,.5);transition:-webkit-text-stroke-color .4s,transform .5s var(--ease);pointer-events:none}
.svc-c:hover:after{-webkit-text-stroke-color:var(--gold);transform:translateY(-4px)}
.svc-c h3{font-size:18px;padding-right:48px}
.svc-c p{line-height:1.65}
.svc-c .tags{padding-top:14px;border-top:1px dashed #dfe3ec}
.svc-c:hover .tags{border-color:rgba(255,255,255,.2)}
.svc-c .tags li{font-size:11.5px;padding:4px 12px}
/* gold accent that grows on hover */
.svc-c>.i{position:relative}
.svc .svc-c:nth-child(n+4){display:grid;grid-template-columns:56px 1fr;column-gap:20px;align-items:start}
.svc .svc-c:nth-child(n+4)>.i{grid-row:1/span 5;margin:0}
.svc .svc-c:nth-child(n+4)>:not(.i){grid-column:2}
.svc .svc-c:nth-child(n+4) .svc-link{justify-self:start}
.svc .svc-c:nth-child(n+4) h3{margin-top:2px}
@media(max-width:1024px){.svc .svc-c:nth-child(n+4){display:block}.svc .svc-c:nth-child(n+4)>.i{margin-bottom:16px}}
@media(max-width:560px){.svc-c{padding:24px 20px 20px}.svc-c:after{font-size:36px;right:16px}}

/* ===== About: network section follows Home split card + projects strip ===== */
.net .np-i{font-size:12.5px;color:var(--muted);margin-top:8px;line-height:1.55}
.net .np-dev .np-i{color:#d8deeb}
.net .np-i+.chips{margin-top:12px}
.net .np-proj{flex-direction:row;align-items:center;gap:32px;margin-top:20px;border-radius:18px;padding:24px 28px}
.net .np-proj .np-l{flex:0 0 36%}
.net .np-proj .np-note{margin-top:10px}
.net .np-proj .chips{margin:0;flex:1}
.net .np-proj .chips .i{flex:none;font-size:13px;color:var(--gold2);transition:color .3s}
.net .np-proj .chips li:hover .i{color:var(--navy)}
@media(max-width:900px){.net .np-proj{flex-direction:column;align-items:stretch;gap:16px}.net .np-proj .np-l{flex:none}}
@media(max-width:560px){.net .np-proj{padding:20px}}

/* ===== Chip hover: same gold fill + navy text everywhere ===== */
.net .np .chips li:hover,
.net .np-dev .chips li:hover{color:var(--navy);background:linear-gradient(180deg,#ffd45e,var(--gold2));border-color:var(--gold2);box-shadow:0 8px 18px rgba(246,195,67,.4);transform:translateY(-3px)}
.net .np-dev .chips li:hover i{background:var(--navy);color:var(--gold);transform:rotate(-12deg) scale(1.12)}
.net .np-areas .chips li:hover .i,.net .np-proj .chips li:hover .i{color:var(--navy)}

/* ===== PARALLAX (js/main.js drives --py / translate) ===== */
/* layers are taller than their parent so they can slide without showing gaps */
.hero .slide{top:-14%;bottom:-14%}
.ab-bg{top:-14%;bottom:-14%}
.hero .slide,.ab-bg,.ab-year,.slides-text{will-change:translate}
/* background-position driven (small images / cards) */
.about-img{background-position:center var(--py,45%)}
.thumb:before{background-position:center var(--py,50%)}
.cta{background-position:center var(--py,45%)}
@media(min-width:900px){.cta{background-attachment:scroll}} /* old fixed-bg replaced by smooth JS parallax (works on iOS too) */
@media(prefers-reduced-motion:reduce){.hero .slide,.ab-bg,.ab-year,.slides-text{translate:none!important}}